/* ────────────────────────────────────────────────────────
 * style.css - Shared Base Styles for Energiemedizin Musil
 * ────────────────────────────────────────────────────────
 * Extracted from index.html inline styles
 * Contains: CSS Variables, Reset, Typography, Nav, Footer, Buttons, A11y
 */

  /* ── Accessibility: Skip Link ───────────────────── */
  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #CC4553;
    color: #fff;
    padding: 12px 20px;
    z-index: 99999;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 4px 0;
  }
  .skip-link:focus {
    left: 0;
    outline: 3px solid #fff;
    outline-offset: -3px;
  }

  :root {
    --primary:       #CC4553;
    --primary-dark:  #992030;
    --primary-light: #F0B8BE;
    --primary-50:    #FDF0F1;
    --secondary:     #333333;
    --secondary-300: #6B6B6B;
    --secondary-100: #E6E6E6;
    --tertiary:      #8A2E38;
    --tertiary-light:#EDD5D7;
    --neutral:       #F7F7F7;
    --white:         #FFFFFF;
    --font-serif:    'Cormorant Garamond', Georgia, serif;
    --font-sans:     'DM Sans', sans-serif;
    --nav-h:         72px;
    --ease:          cubic-bezier(0.4,0,0.2,1);
    /* Schatten: flach, neutralgrau, keine Markenfarbe */
    --shadow-sm:     0 1px 2px rgba(0,0,0,.03), 0 3px 8px rgba(0,0,0,.04);
    --shadow-md:     0 1px 2px rgba(0,0,0,.04), 0 5px 14px rgba(0,0,0,.06);
    --shadow-lg:     0 2px 5px rgba(0,0,0,.05), 0 10px 26px rgba(0,0,0,.08);
    --shadow-up:     0 -1px 3px rgba(0,0,0,.04), 0 -5px 14px rgba(0,0,0,.05);
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; overflow-x: hidden; }
  body {
    font-family: var(--font-sans);
    color: var(--secondary);
    background: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
  }

  /* ── NAV ───────────────────────────────────────── */
  .nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    height: var(--nav-h);
    padding: 0 32px;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--secondary-100);
    box-shadow: var(--shadow-sm);
  }
  /* Auto-Hide Navbar beim Scrollen */
  .nav { transition: transform .35s var(--ease); will-change: transform; }
  .nav.nav-hidden { transform: translateY(-100%); }

  .nav-inner {
    max-width: 1200px; margin: 0 auto;
    padding: 0; height: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
  }
  .logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
  .logo-name { font-family:var(--font-sans); font-weight:500; font-size:15px; color:var(--secondary); }
  .logo-sub { font-family:var(--font-sans); font-size:9px; font-weight:500; letter-spacing:.18em; color:var(--primary); text-transform:uppercase; display:block; }
  .nav-links {
    display: flex; align-items: center; gap: 2px; list-style: none;
    flex: 1; justify-content: center;
  }
  .nav-links > li > a {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px 13px; font-size: 15px; font-weight: 400;
    color: var(--secondary); text-decoration: none;
    border-radius: 6px; transition: color 0.2s, background 0.2s; white-space: nowrap;
  }
  .nav-links > li > a:hover { color: var(--primary); background: var(--primary-50); }
  .nav-links > li > a.active { color: var(--primary); background: var(--primary-50); font-weight: 500; }
  .nav-dropdown { position: relative; }
  .nav-chevron { width:14px;height:14px;color:var(--secondary-300);transition:transform 0.2s;flex-shrink:0; }
  .nav-dropdown:hover .nav-chevron { transform:rotate(180deg);color:var(--primary); }
  .dropdown-menu {
    position: absolute; top: calc(100% + 10px); left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--white); border: 1px solid var(--secondary-100);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 10px; min-width: 256px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.2s, transform 0.2s, visibility 0s 0.12s; list-style: none;
  }
  .dropdown-menu::before {
    content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
  }
  .nav-dropdown:hover .dropdown-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.2s, transform 0.2s, visibility 0s 0s;
  }
  .nav-dropdown.dd-open .dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
  .dropdown-menu li a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; font-size: 13.5px; color: var(--secondary);
    text-decoration: none; border-radius: 8px;
    transition: background 0.15s, color 0.15s;
  }
  .dropdown-menu li a:hover { background: var(--primary-50); color: var(--primary); }
  .dropdown-icon {
    width:30px;height:30px;background:var(--primary-50);border-radius:7px;
    display:flex;align-items:center;justify-content:center;
    color:var(--primary);font-size:14px;flex-shrink:0;
  }
  .dropdown-divider { height:1px;background:var(--secondary-100);margin:6px 4px; }
  .dropdown-all a { font-weight: 500; }
  .dropdown-all a .dropdown-icon { background:var(--primary);color:var(--white); }
  .nav-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 20px; background: var(--primary); color: var(--white);
    font-size: 13.5px; font-weight: 500; text-decoration: none;
    border-radius: 6px; transition: background 0.2s; white-space: nowrap; flex-shrink: 0;
  }
  .nav-cta:hover { background: var(--primary-dark); }
  .nav-hamburger {
    display:none;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;cursor:pointer;background:none;border:none;
    padding:8px;border-radius:6px;flex-shrink:0;
  touch-action: manipulation; }
  .nav-hamburger span { display:block;height:2px;background:var(--secondary);border-radius:2px;transition:all 0.3s var(--ease); }
  .nav-hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
  .nav-hamburger.open span:nth-child(2) { opacity:0;transform:translateX(-8px); }
  .nav-hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
  .nav-mobile {
    display:none;position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;
    background:var(--white);z-index:99;overflow-y:auto;
    padding:8px 24px 48px;border-top:1px solid var(--secondary-100);
  }
  .nav-mobile.open { display:block; }
  .mobile-links { list-style:none; }
  .mobile-links > li > a {
    display:flex;align-items:center;justify-content:space-between;
    padding:15px 4px;font-size:17px;font-weight:400;
    color:var(--secondary);text-decoration:none;border-bottom:1px solid var(--secondary-100);
  }
  .mobile-links > li > a.active { color:var(--primary);font-weight:500; }
  .mobile-sub {
    display: none; list-style:none;padding:6px 0 6px 12px;border-bottom:1px solid var(--secondary-100); }
  .mobile-sub li a {
    display:flex;align-items:center;gap:10px;
    padding:13px 4px;font-size:15px;color:var(--secondary-300);text-decoration:none;
    border-bottom:1px solid var(--secondary-100);
  }
  .mobile-sub li:last-child a { border-bottom:none; }
  .mobile-sub-icon { width:26px;height:26px;background:var(--primary-50);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:12px;flex-shrink:0; }
  .mobile-cta-wrap { margin-top:28px;display:flex;flex-direction:column;gap:12px; }
  .mobile-contact-info { margin-top:28px;padding:20px;background:var(--neutral);border-radius:12px;font-size:13px;color:var(--secondary-300);line-height:2; }
  .mobile-contact-info a { color:var(--primary);text-decoration:none;font-weight:500; }
  

  /* ── BUTTONS ───────────────────────────────────── */
  .btn-primary {
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 28px;background:var(--primary);color:var(--white);
    font-size:14px;font-weight:500;text-decoration:none;
    border-radius:6px;transition:background 0.2s,transform 0.2s;
  }
  .btn-primary:hover { background:var(--primary-dark);transform:translateY(-1px); }
  .btn-ghost {
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 24px;background:transparent;color:var(--secondary);
    font-size:14px;font-weight:400;text-decoration:none;
    border:1px solid var(--secondary-100);border-radius:6px;
    transition:border-color 0.2s,color 0.2s;
  }
  .btn-ghost:hover { border-color:var(--primary);color:var(--primary); }
  .btn-white {
    display:inline-flex;align-items:center;gap:8px;
    padding:16px 32px;background:var(--white);color:var(--primary);
    font-size:14px;font-weight:500;text-decoration:none;
    border-radius:6px;transition:transform 0.2s,box-shadow 0.2s;
  }
  .btn-white:hover { transform:translateY(-2px);box-shadow:var(--shadow-md); }
  .btn-white-outline {
    display:inline-flex;align-items:center;gap:8px;
    padding:16px 24px;background:transparent;color:rgba(255,255,255,.95);
    font-size:14px;font-weight:400;text-decoration:none;
    border:1px solid rgba(255,255,255,0.4);border-radius:6px;
    transition:border-color 0.2s;
  }
  .btn-white-outline:hover { border-color:rgba(255,255,255,.95); }

  /* ── HERO ──────────────────────────────────────── */
  .hero {
    padding-top: var(--nav-h);
    min-height: 100vh;
    background: var(--neutral);
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
  }
  .hero-content {
    display: flex; flex-direction: column; justify-content: center;
    padding: 80px 64px 80px max(32px, calc((100vw - 1200px) / 2));
    max-width: 640px;
  }
  
  .hero h1 {
    font-family: var(--font-serif); font-weight: 300;
    font-size: clamp(2.8rem, 4.5vw, 4.2rem); line-height: 1.1;
    color: var(--secondary); margin-bottom: 24px; letter-spacing: -0.01em;
  }
  .hero h1 em { font-style: italic; color: var(--primary); }
  .hero-lead {
    font-size: 17px; color: var(--secondary-300); line-height: 1.8;
    margin-bottom: 40px; max-width: 440px;
  }
  .hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .hero-trust {
    margin-top: 56px; display: flex; align-items: center; gap: 16px;
    padding-top: 32px; border-top: 1px solid var(--secondary-100);
  }
  .hero-trust-stars { color: var(--primary); font-size: 16px; letter-spacing: 2px; }
  .hero-trust-text { font-size: 13px; color: var(--secondary-300); }
  .hero-trust-text strong { color: var(--secondary); font-weight: 500; }

  .hero-image {
    position: relative; overflow: hidden;
    background: var(--secondary-100);
  }
  .hero-image img {
    width: 100%; height: 100%; object-fit: cover; object-position: center top;
    display: block;
  }
  .hero-image-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 32px;
    background: linear-gradient(to top, rgba(51,51,51,0.85) 0%, transparent 100%);
  }
  .hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; background: rgba(255,255,255,0.15);
    backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.25);
    border-radius: 100px; font-size: 12.5px; color: var(--white); font-weight: 400;
  }
  .hero-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; flex-shrink: 0; }

  /* ── SYMPTOM SECTION ───────────────────────────── */
  .symptom-section {
    padding: 100px 32px;
    background: var(--neutral);
  }
  .symptom-inner { max-width: 1200px; margin: 0 auto; }
  .symptom-intro {
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
    align-items: center; margin-bottom: 72px;
  }
  
  .section-h2 {
    font-family: var(--font-serif); font-weight: 300;
    font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.18;
    color: var(--secondary); margin-bottom: 16px;
  }
  .section-h2 em { font-style: italic; color: var(--primary); }
  .section-lead { font-size: 16px; color: var(--secondary-300); line-height: 1.8; max-width: 480px; }
  .symptom-quote-box {
    background: var(--white);
    border: 1px solid var(--secondary-100);
    border-radius: 14px;
    padding: 36px 40px;
  }
  .symptom-quote-box::before {
    content: '';
    display: block;
    width: 36px;
    height: 2px;
    background: var(--primary);
    margin-bottom: 22px;
  }
  .symptom-quote-box blockquote {
    font-family: var(--font-serif); font-size: 1.2rem; font-style: italic;
    color: var(--secondary); line-height: 1.85; margin-bottom: 0;
  }
  .symptom-quote-box cite {
    display: block; margin-top: 20px;
    font-size: 11px; font-weight: 600; letter-spacing: .2em;
    color: var(--primary); text-transform: uppercase; font-style: normal;
  }
  .symptom-chips {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px;
  }
  .chip {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 2px;
    background: transparent; border: none; border-bottom: 1px solid var(--secondary-100);
    border-radius: 0; font-size: 14.5px; color: var(--secondary);
  }
  .chip-dot { width: 18px; height: 18px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CC4553' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; flex-shrink: 0; }

  /* ── PHILOSOPHIE ───────────────────────────────── */
  .philosophie-section {
    background: var(--neutral);
    padding: 68px 32px;
    color: #555;
  }
  .philosophie-inner { max-width: 1200px; margin: 0 auto; }
  .philosophie-head{max-width:64ch;margin-bottom:44px;}
  .philosophie-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 10px; font-weight: 500; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--primary); margin-bottom: 24px;
  }
  .philosophie-h2 {
    font-family: var(--font-serif); font-weight: 300;
    font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.18;
    color: var(--secondary); margin-bottom: 24px;
  }
  .philosophie-h2 em { font-style: italic; color: var(--primary); }
  .philosophie-text { font-size: 16px; line-height: 1.72; margin-bottom: 20px; }
  .philosophie-features{display:grid;grid-template-columns:repeat(4,1fr);gap:36px 32px;list-style:none;margin:0;padding:0;}
  .philosophie-features li {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 0;
    font-size: 14px;
  }
  .feat-icon {
    width: 32px; height: 32px; background: rgba(204,69,83,0.12);
    border-radius: 8px; display: flex; align-items: center;
    justify-content: center; color: var(--primary); font-size: 15px; flex-shrink: 0;
  }
  .feat-text strong { display: block; color: var(--secondary); font-weight: 500; margin-bottom: 3px; font-size: 14px; }
  .feat-text span { color: var(--secondary-300); font-size: 13px; }
  .musil-photo-card {
    height: 100%; border-radius: 20px; overflow: hidden;
    box-shadow: var(--shadow-md);
  }
  .musil-photo-card img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
  .musil-photo-placeholder {
    height: 100%; min-height: 300px; background: var(--neutral);
    border: 2px dashed var(--secondary-100);
    display: flex; align-items: center; justify-content: center;
  }
  .musil-photo-placeholder span {
    font-size: 13px; color: var(--secondary-300); letter-spacing: .08em;
  }
  .musil-portrait-img {
    width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
    background: var(--primary); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif); font-size: 1.4rem; color: var(--white);
  }
  .musil-portrait-text strong { display: block; color: var(--secondary); font-size: 14px; }
  .musil-portrait-text span { color: var(--secondary-300); font-size: 12px; }

  /* ── LEISTUNGEN GRID ───────────────────────────── */
  .leistungen-section {
    padding: 100px 32px;
    background: var(--white);
  }
  .leistungen-inner { max-width: 1200px; margin: 0 auto; }
  .section-header { text-align: center; margin-bottom: 64px; }
  .leistungen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .leistung-card {
    background: var(--white); border: 1px solid var(--secondary-100);
    border-radius: 18px; padding: 32px 28px;
    text-decoration: none; color: inherit;
    display: flex; flex-direction: column;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  }
  .leistung-card:hover {
    transform: translateY(-2px); box-shadow: var(--shadow-md);
  }
  .leistung-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: var(--primary-50); display: flex;
    align-items: center; justify-content: center;
    margin-bottom: 20px; color: var(--primary); font-size: 24px;
  }
  .leistung-card h3 {
    font-family: var(--font-serif); font-weight: 400; font-size: 1.25rem;
    color: var(--secondary); margin-bottom: 10px; line-height: 1.3;
  }
  .leistung-card p {
    font-size: 13.5px; color: var(--secondary-300); line-height: 1.7; flex: 1;
  }
  .leistung-link{display:block;width:100%;text-align:right;margin-top:18px;font-size:13px;font-weight:500;color:var(--primary);}
  .leistung-link::after{content:'';display:inline-block;vertical-align:-2px;width:14px;height:14px;margin-left:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CC4553' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s var(--ease);}
  .leistung-card:hover .leistung-link::after{transform:translateX(3px);}

  /* ── ÜBER DR. MUSIL ────────────────────────────── */
  .about-section {
    padding: 100px 32px;
    background: var(--white);
  }
  .about-inner{
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 80px; align-items: center;
  align-items: start;}
  .about-image{position:relative;border-radius:16px;overflow:hidden;background:var(--white);border:1px solid var(--secondary-100);aspect-ratio:4/5;}
  .about-image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
  .about-content {}
  .about-cred-list { list-style: none; margin: 28px 0; }
  .about-cred-list li {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--secondary-100);
    font-size: 14px; color: var(--secondary);
  }
  .about-cred-list li:last-child { border-bottom: none; }
  .cred-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; margin-top: 6px; }
  .about-text { font-size: 16px; color: var(--secondary); line-height: 1.72; margin-bottom: 20px; }

  /* ── PROGRAMME TEASER ──────────────────────────── */
  .programme-teaser {
    padding: 100px 32px;
    background: var(--white);
    border-top: 1px solid var(--secondary-100);
    border-bottom: 1px solid var(--secondary-100);
  }
  .programme-teaser-inner { max-width: 1200px; margin: 0 auto; }
  .programme-cards {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px;
  }
  .prog-teaser-card {
    background: var(--white); border-radius: 16px; padding: 24px 20px;
    border: 1px solid var(--secondary-100);
    text-decoration: none; display: flex; flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .prog-teaser-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .prog-teaser-num {
    font-family: var(--font-serif); font-size: 2.5rem; font-weight: 300;
    color: var(--secondary-300); line-height: 1; margin-bottom: 8px;
  }
  .prog-teaser-card h3 {
    font-family: var(--font-serif); font-weight: 400; font-size: 1.1rem;
    color: var(--secondary); margin-bottom: 8px; line-height: 1.3;
  }
  .prog-teaser-card p {
    font-size: 13px; color: var(--secondary-300); line-height: 1.65; flex: 1;
  }
  .prog-teaser-link{display:block;width:100%;text-align:right;margin-top:16px;font-size:13px;font-weight:500;color:var(--primary);}
  .prog-teaser-link::after{content:'';display:inline-block;vertical-align:-2px;width:14px;height:14px;margin-left:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CC4553' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s var(--ease);}
  .prog-teaser:hover .prog-teaser-link::after{transform:translateX(3px);}

  /* ── TESTIMONIALS ──────────────────────────────── */
  .testimonials-section {
    padding: 100px 32px;
    background: var(--neutral);
  }
  .testimonials-inner { max-width: 1200px; margin: 0 auto; }
  .testimonials-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 10px; font-weight: 500; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--primary); margin-bottom: 16px;
  }
  .testimonials-h2 {
    font-family: var(--font-serif); font-weight: 300;
    font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.2;
    color: var(--secondary); margin-bottom: 32px;
  }
  .testimonials-h2 em { font-style: italic; color: var(--primary); }
  .google-rating-summary {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 48px;
  }
  .google-rating-stars { color: #FBBC05; font-size: 18px; letter-spacing: 2px; }
  .google-rating-score { font-size: 15px; font-weight: 500; color: var(--secondary); }
  .google-rating-count { font-size: 13px; color: var(--secondary-300); }
  .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .testimonials-footer {
    margin-top: 40px; text-align: center;
  }
  .testimonials-google-link {
    font-size: 13px; color: var(--secondary-300);
    text-decoration: none; border-bottom: 1px solid var(--secondary-100);
    transition: color 0.2s, border-color 0.2s;
  }
  .testimonials-google-link:hover { color: var(--secondary); border-color: var(--secondary-300); }
  .testimonial-card {
    background: var(--white); border: 1px solid var(--secondary-100);
    border-radius: 20px; padding: 32px 28px;
  }
  .testimonial-stars { color: var(--primary); font-size: 14px; letter-spacing: 3px; margin-bottom: 20px; }
  .testimonial-text {
    font-family: var(--font-serif); font-size: 1.05rem; font-style: italic;
    color: var(--secondary); line-height: 1.65; margin-bottom: 24px;
  }
  .testimonial-author {
    display: flex; align-items: center; gap: 12px;
    padding-top: 20px; border-top: 1px solid var(--secondary-100);
  }
  .testimonial-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(204,69,83,0.12); display: flex; align-items: center;
    justify-content: center; font-size: 14px; color: var(--primary); flex-shrink: 0;
  }
  .testimonial-name { font-size: 13px; font-weight: 500; color: var(--secondary); }
  .testimonial-date { font-size: 11.5px; color: var(--secondary-300); }

  /* ── PRAXIS BILD SECTION ───────────────────────── */
  .praxis-section {
    background: var(--neutral);
    padding: 100px 32px;
  }
  .praxis-inner {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 480px; gap: 80px; align-items: center;
  }
  .praxis-image { border-radius: 24px; overflow: hidden; }
  .praxis-image picture { display: block; }
  .praxis-image img { width: 100%; height: 400px; object-fit: cover; display: block; }
  .praxis-info-list { list-style: none; margin: 28px 0; }
  .praxis-info-list li {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 0; border-bottom: 1px solid var(--secondary-100);
    font-size: 14px;
  }
  .praxis-info-list li:last-child { border-bottom: none; }
  .praxis-icon {
    width: 32px; height: 32px; background: var(--primary-50);
    border-radius: 8px; display: flex; align-items: center;
    justify-content: center; color: var(--primary); font-size: 15px; flex-shrink: 0;
  }
  .praxis-info-text strong { display: block; font-weight: 500; color: var(--secondary); margin-bottom: 2px; }
  .praxis-info-text span { color: var(--secondary-300); font-size: 13px; }

  /* ── CTA SECTION ───────────────────────────────── */
  .cta-section {
    background: var(--primary); padding: 100px 32px;
    text-align: center;
  }
  .cta-inner { max-width: 640px; margin: 0 auto; }
  .cta-section h2 {
    font-family: var(--font-serif); font-weight: 300;
    font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--white);
    margin-bottom: 20px; line-height: 1.2;
  }
  .cta-section h2 em { font-style: italic; }
  .cta-section p { font-size: 17px; color:rgba(255,255,255,.95); margin-bottom: 44px; line-height: 1.7; }
  .cta-actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
  .cta-footnote { font-size: 12.5px; color:rgba(255,255,255,.95); margin-top: 20px; }

  /* ── FOOTER ────────────────────────────────────── */
  .footer {
    background:var(--neutral);border-top:1px solid var(--secondary-100); padding: 72px 32px 0;
    color:#6b6b6b;
  }
  .footer-inner { max-width: 1200px; margin: 0 auto; }
  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 48px; padding-bottom: 56px;
  }
  .footer-logo-name { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 300; color:var(--secondary); margin-bottom: 4px; }
  .footer-logo-sub { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary); margin-bottom: 20px; display: block; }
  .footer-tagline { font-size: 13.5px; line-height: 1.85; color:#6b6b6b; margin-bottom: 24px; max-width: 280px; }
  .footer-contact-block {color:var(--secondary); font-size: 13px; line-height: 2; }
  .footer-contact-block a { color:var(--secondary); text-decoration: none; transition: color 0.2s; }
  .footer-contact-block a:hover { color: var(--primary); }
  .footer-hours-badge {display:inline-flex;align-items:center;gap:9px;margin-top:14px;padding:0;background:none;border:none;border-radius:0;font-size:13.5px;color:var(--secondary);letter-spacing:0;}
  .footer-hours-dot {width:16px;height:16px;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CC4553' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15.5 14'/%3E%3C/svg%3E") center/contain no-repeat;flex-shrink:0;}
  .footer-col-title { font-family: var(--font-sans); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color:var(--secondary); margin-bottom: 20px; }
  .footer-nav { list-style: none; }
  .footer-nav li { margin-bottom: 10px; }
  .footer-nav li a { font-size: 13.5px; color:#6b6b6b; text-decoration: none; transition: color 0.2s; display: inline-flex; align-items: center; gap: 7px; line-height: 1.4; }
  .footer-nav li a:hover { color:var(--primary); }
  .footer-divider { height: 1px; background:var(--secondary-100); }
  .footer-bottom { padding: 20px 0 24px; font-size: 12px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; color:#6b6b6b; }
  .footer-bottom a { color:#6b6b6b; text-decoration: none; transition: color 0.2s; }
  .footer-bottom a:hover { color:var(--secondary); }
  .footer-bottom-links { display: flex; gap: 20px; flex-wrap: wrap; }
  .footer-bottom-links a, .footer-bottom-links button {
    color: #6b6b6b; text-decoration: none; transition: color 0.2s;
    background: none; border: none; cursor: pointer; padding: 0;
    font-family: var(--font-sans); font-size: 12px;
  }
  .footer-bottom-links a:hover, .footer-bottom-links button:hover { color: var(--secondary); }
  /* Fallback für Seiten, die .footer-nav a statt .footer-nav li a nutzen */
  .footer-nav a { font-size: 13.5px; color: #6b6b6b; text-decoration: none; transition: color 0.2s; display: inline-flex; align-items: center; gap: 7px; line-height: 1.4; }
  .footer-nav a:hover { color: var(--primary); }
  .footer-logo-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }

  /* ── RESPONSIVE ────────────────────────────────── */
  
  
  

  /* Nach-oben-Button */
  .to-top { position: fixed; right: 22px; bottom: 22px; z-index: 90;
    width: 46px; height: 46px; border-radius: 50%; border: none;
    background: var(--primary); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-md);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), background .2s; }
  .to-top.show { opacity: 1; visibility: visible; transform: none; }
  .to-top:hover { background: var(--primary-dark); }
  .to-top:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
  

  /* Erstinfo-Spalte im Footer */
  .footer-cta { align-self: start; }
  .footer-cta .footer-col-title { margin-bottom: 14px; color: var(--secondary); }
  .footer-cta-text { font-size: 13px; line-height: 1.7; color: #6b6b6b; margin: 0 0 18px; max-width: 260px; }
  .footer-cta-btn { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; background: var(--primary); color: #fff; font-size: 13px; font-weight: 500; padding: 13px 18px; border-radius: 8px; text-decoration: none; white-space: nowrap; transition: background .2s; }
  .footer-cta-btn:hover { background: var(--primary-dark); }
  .footer-cta-btn svg { flex-shrink: 0; }

  /* Footer-Logo optisch an den Spaltentiteln ausrichten */
  .footer-logo-img { margin-top: -6px; margin-bottom: 20px; }

  /* ── Mobiler Sticky-CTA (Terminbuchung immer erreichbar) ─────────── */
  .m-cta { display: none; }
  

  /* ── Redundante CTAs auf Mobil ausblenden (Sticky-Balken übernimmt) ── */
  

/* Dropdown-Pfeil der Hauptnavigation (global, nicht nur Unterseiten) */
.nav-dropdown-toggle{cursor: default;}
.nav-dropdown-toggle svg{transition:transform .2s;}
.nav-dropdown-toggle svg{transform:rotate(180deg);}

/* ── Team: Für Sie da (Startseite) ───────────────── */
.team-section{padding:100px 32px;background:var(--white);}
.team-inner{max-width:1200px;margin:0 auto;}
.team-h2{font-family:var(--font-serif);font-weight:300;font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.15;color:var(--secondary);margin-bottom:14px;}
.team-h2 em{font-style:italic;color:var(--primary);}
.team-lead{font-size:16px;line-height:1.75;color:var(--secondary-300);max-width:52ch;margin-bottom:48px;}
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;}
.team-member{display:grid;grid-template-columns:210px minmax(0,1fr);gap:26px;align-items:start;margin:0;}
.team-photo-ph{width:100%;aspect-ratio:3/4;border-radius:14px;display:block;}
.team-photo-ph{background:var(--neutral);border:1px solid var(--secondary-100);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:var(--secondary-300);font-size:11.5px;letter-spacing:.04em;}
.team-caption{min-width:0;}
.team-name{font-family:var(--font-serif);font-weight:400;font-size:1.35rem;color:var(--secondary);line-height:1.2;}
.team-role{margin-top:5px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);}
.team-desc{margin-top:14px;font-size:14px;line-height:1.75;color:var(--secondary-300);}

  /* Bildcontainer: die picture-Box traegt das Seitenverhaeltnis,
     das Bild fuellt sie per object-fit. Kein height:100%, das wuerde
     die Box in Grid- und Flex-Kontexten auf die Zeilenhoehe dehnen. */
  .hero-image > picture, .about-image > picture,
  .musil-photo-card > picture, .about-hero-img > picture { display: block; width: 100%; height: 100%; }
  .hero-image > picture > img, .about-image > picture > img,
  .musil-photo-card > picture > img, .about-hero-img > picture > img { width: 100%; height: 100%; object-fit: cover; display: block; }

  

  /* Bildunterschrift statt schwebendem Namensschild */
  .about-figure { margin: 0; }
  .about-caption { display: block; margin-top: 14px; }
  .about-caption-name { display: block; font-family: var(--font-serif); font-size: 1.05rem; color: var(--secondary); }
  .about-caption-role { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.5; color: var(--secondary-300); }

  .team-member > picture { display: block; width: 100%; aspect-ratio: 3/4; align-self: start; }
  .team-member > picture > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 14px; display: block; }

  /* Sektions-Hintergrund gezielt drehen, wo zwei gleiche Klassen
     aufeinanderfolgen und die Alternation sonst bricht. */
  .bg-alt   { background: var(--neutral); }
  .bg-plain { background: var(--white); }

/* ── Responsive: absteigend nach Breakpoint sortiert ──────────
   Bei max-width treffen auf kleinen Bildschirmen mehrere Abfragen zu.
   Die zuletzt notierte gewinnt, deshalb muss der größte Wert oben stehen. */

@media (max-width: 1024px) {
    .hero { grid-template-columns: 1fr; min-height: auto; }
    .hero-content { padding: 64px 40px; max-width: 100%; }
    .hero-image { height: 480px; }
    .philosophie-features { grid-template-columns: 1fr 1fr; gap: 30px 28px; }
    .about-inner { grid-template-columns: 1fr; gap: 48px; }
    .about-image { aspect-ratio: 4/5; }
    .praxis-inner { grid-template-columns: 1fr; gap: 48px; }
    .symptom-intro { grid-template-columns: 1fr; gap: 40px; }
    .symptom-chips { grid-template-columns: 1fr 1fr; }
    .philosophie-features { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  }

@media (max-width:960px) { .nav-links{display:none;} .nav-cta{display:none;} .nav-hamburger{display:flex;} }

@media (max-width: 960px) {
    .m-cta {
      display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
      gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
      background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
      border-top: 1px solid var(--secondary-100); box-shadow: var(--shadow-up);
    }
    .m-cta a {
      flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
      min-height: 48px; padding: 12px 14px; border-radius: 8px;
      font-family: var(--font-sans); font-size: 14.5px; font-weight: 500;
      text-decoration: none; white-space: nowrap;
    }
    .m-cta-primary { background: var(--primary); color: #fff; }
    .m-cta-primary:active { background: var(--primary-dark); }
    .m-cta-secondary { flex: 0 0 auto; padding-left: 20px; padding-right: 20px; border: 1px solid var(--secondary-100); color: var(--secondary); background: var(--white); }
    /* Platz schaffen, damit der Balken nichts verdeckt */
    body { padding-bottom: 76px; }
    .to-top { bottom: calc(76px + 14px); }
    .nav-mobile { bottom: 68px; }
  }

@media (max-width: 960px) {
    /* Terminbuchung im Mobilmenü: doppelt zum Sticky */
    .mobile-cta-wrap { display: none; }
    /* Buchungs-Button in der Therapie-/Programm-Infobox: liegt mobil direkt über
       dem Sticky. Der zugehörige "Oder: E-Mail"-Hinweis entfällt mit. */
    .aside-card .btn-primary, .prog-aside .btn-primary { display: none; }
    .aside-phone, .prog-aside-note { display: none; }
    /* Abschluss-CTA-Banner komplett: Aufforderung ohne Button wirkt unfertig,
       der Sticky-Balken ist ohnehin dauerhaft sichtbar */
    .cta-banner, .cta-section { display: none; }
  }

@media(max-width:960px){
  .team-grid{grid-template-columns:1fr;gap:36px;}
  .team-member{grid-template-columns:150px minmax(0,1fr);gap:20px;}
  .team-lead{margin-bottom:36px;}
}

@media (max-width: 768px) {
    .leistungen-grid { grid-template-columns: 1fr 1fr; }
    .programme-cards { grid-template-columns: 1fr 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .hero-content { padding: 48px 24px; }
  }

@media (max-width: 600px) {
    .symptom-section, .philosophie-section, .leistungen-section, .about-section,
    .testimonials-section, .praxis-section, .team-section, .cta-section { padding: 56px 20px; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn-primary, .hero-actions .btn-ghost,
    .hero-actions .btn-secondary { width: 100%; justify-content: center; text-align: center; }
    .leistungen-grid { grid-template-columns: 1fr; }
    .programme-cards { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 22px; }
    .footer-grid > *:first-child { grid-column: 1 / -1; }
    .footer-grid > *:last-child { grid-column: 1 / -1; }
    .footer { padding: 56px 24px 0; }
    .hero-image { height: 320px; }
    .hero h1 { font-size: 2.4rem; }
  }

@media (max-width: 600px) { .to-top { right: 14px; width: 42px; height: 42px; } }

@media(max-width:600px){
  .team-member{grid-template-columns:120px minmax(0,1fr);gap:16px;}
  .team-name{font-size:1.2rem;}
  .team-desc{font-size:13.5px;margin-top:11px;}
}

@media (max-width: 600px) {
    .philosophie-features { grid-template-columns: 1fr; gap: 24px; }
    .about-inner { grid-template-columns: 1fr; }
    .about-figure { max-width: 220px; }
  }