:root {
  /* Colors - Nature / Calm / Serious */
  --clr-primary: #3d5a49; /* Deep sage green */
  --clr-primary-light: #61816e;
  --clr-accent: #b38b59; /* Warm earthy beige/gold */
  --clr-accent-hover: #9c784b;
  --clr-bg: #f7f9f8; /* Off-white with a hint of green */
  --clr-surface: #ffffff;
  --clr-text-main: #2b3a32;
  --clr-text-muted: #5e6b64;
  --clr-border: #e0e5e2;

  /* Typography - System Fonts */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  
  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-xxl: 8rem;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

body {
  font-family: var(--font-sans);
  color: var(--clr-text-main);
  background-color: var(--clr-bg);
  line-height: 1.6;
  font-size: 1.125rem;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--clr-primary);
  line-height: 1.2;
  font-weight: normal;
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: var(--space-sm); }
h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--space-sm); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--space-xs); }

p {
  margin-bottom: var(--space-md);
  color: var(--clr-text-muted);
}
p:last-child { margin-bottom: 0; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-sm);
}

.section {
  padding: var(--space-xl) 0;
}

.section-light {
  background-color: var(--clr-surface);
}

.section-accent {
  background-color: var(--clr-primary);
  color: var(--clr-surface);
}
.section-accent h2, .section-accent p {
  color: var(--clr-surface);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: var(--clr-accent);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  text-align: center;
  border-radius: 4px;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.btn:hover, .btn:focus-visible {
  background-color: var(--clr-accent-hover);
  transform: translateY(-2px);
}
.btn-outline {
  background-color: transparent;
  border: 2px solid var(--clr-primary);
  color: var(--clr-primary);
}
.btn-outline:hover {
  background-color: var(--clr-primary);
  color: var(--clr-surface);
}

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  z-index: 1000;
  border-bottom: 1px solid var(--clr-border);
  transition: padding var(--transition-fast);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo-img {
  height: 50px;
  width: auto;
}

.logo-text {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--clr-primary);
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo-text span:last-child {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Navigation Desktop */
.main-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-list {
  display: flex;
  gap: 2rem;
}

.nav-link {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--clr-text-main);
  transition: color var(--transition-fast);
}

.nav-link:hover, .nav-link.active {
  color: var(--clr-accent);
}

.mobile-menu-btn {
  display: none;
  font-size: 1.5rem;
  color: var(--clr-primary);
}

/* Hero Section */
.hero {
  padding-top: 120px; /* offset for fixed header */
  padding-bottom: var(--space-xl);
  min-height: 85vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(247, 249, 248, 0.95) 0%, rgba(247, 249, 248, 0.7) 50%, rgba(247, 249, 248, 0.2) 100%);
}

.hero-content {
  max-width: 600px;
}

.hero-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background-color: rgba(61, 90, 73, 0.1);
  color: var(--clr-primary);
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hero-btns {
  display: flex;
  gap: 1rem;
  margin-top: var(--space-md);
  flex-wrap: wrap;
}

/* Intro / Über Mich Section */
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.intro-image-wrapper {
  position: relative;
}

.intro-image-wrapper img {
  border-radius: 8px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.intro-badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: var(--clr-surface);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.intro-badge-icon {
  width: 40px;
  height: 40px;
  background: var(--clr-primary-light);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: 1.5rem;
}

.intro-badge-text {
  font-size: 0.875rem;
  line-height: 1.2;
  color: var(--clr-text-main);
  font-weight: 500;
}

/* Services Section */
.services-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--space-lg);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-md);
}

.service-card {
  background: var(--clr-surface);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  border: 1px solid var(--clr-border);
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

.service-image {
  height: 220px;
  overflow: hidden;
}

.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.service-card:hover .service-image img {
  transform: scale(1.05);
}

.service-content {
  padding: 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.service-content h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.service-content p {
  font-size: 1rem;
  flex: 1;
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--clr-accent);
  font-weight: 500;
  margin-top: 1.5rem;
  transition: gap var(--transition-fast);
}

.service-card:hover .service-link {
  gap: 0.75rem;
}

/* Qualifikationen */
.qualifications-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1rem;
  margin-top: var(--space-lg);
  border-top: 1px solid var(--clr-border);
  padding-top: var(--space-lg);
}

.qual-card {
  flex: 1;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: transform var(--transition-fast);
}

.qual-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.qual-icon {
  background: var(--clr-primary-light);
  color: white;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.qual-text h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--clr-primary);
  margin-bottom: 0.2rem;
  font-size: 0.9rem;
}

.qual-text p {
  font-size: 0.8rem;
  margin: 0;
  line-height: 1.2;
}

@media (max-width: 992px) {
  .qualifications-row {
    flex-wrap: wrap;
  }
  .qual-card {
    flex: 1 1 calc(50% - 1rem);
  }
}

@media (max-width: 500px) {
  .qualifications-row {
    flex-direction: column;
  }
  .qual-card {
    flex: 1 1 100%;
  }
}

/* Praxis / Galerie */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 250px;
  gap: 1rem;
}

.gallery-item {
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--clr-bg);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

.gallery-item:hover img {
  transform: scale(1.03);
}

.gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery-item:nth-child(2) { grid-column: span 2; }
.gallery-item:nth-child(3) { grid-column: span 1; }
.gallery-item:nth-child(4) { grid-column: span 1; }

/* CTA Section */
.cta-section {
  text-align: center;
  padding: var(--space-xxl) 0;
}

.cta-content {
  max-width: 700px;
  margin: 0 auto;
}

.cta-content h2 {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

/* Footer */
.site-footer {
  background-color: #1f2a24;
  color: #a4b5aa;
  padding: var(--space-xl) 0 var(--space-md);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.footer-brand h3 {
  color: white;
  margin-bottom: 1rem;
}

.footer-brand p {
  color: inherit;
  max-width: 300px;
}

.footer-heading {
  color: white;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links a {
  transition: color var(--transition-fast);
}

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

.footer-bottom {
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
}

.footer-legal {
  display: flex;
  gap: 1.5rem;
}

/* Mobile Responsiveness */
@media (max-width: 1150px) {
  .main-nav {
    display: none;
  }
  .mobile-menu-btn {
    display: block;
    padding: 0.5rem;
    cursor: pointer;
  }
}

@media (max-width: 992px) {
  .intro-grid {
    grid-template-columns: 1fr;
  }
  .intro-image-wrapper {
    order: -1;
    max-width: 600px;
    margin: 0 auto;
  }
  .hero-bg::after {
    background: linear-gradient(to bottom, rgba(247, 249, 248, 0.95) 0%, rgba(247, 249, 248, 0.8) 50%, rgba(247, 249, 248, 0.4) 100%);
  }
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }
  .gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .gallery-item:nth-child(2) { grid-column: span 2; }
  .gallery-item:nth-child(3) { grid-column: span 1; }
  .gallery-item:nth-child(4) { grid-column: span 1; }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 250px;
  }
  .gallery-item:nth-child(n) { grid-column: span 1; grid-row: span 1; }

  .hero {
    text-align: center;
    padding-top: 100px;
  }
  .hero-content {
    margin: 0 auto;
  }
  .hero-btns {
    justify-content: center;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}

/* Premium Mobile Menu Open State */
.nav-open .main-nav {
  display: flex !important;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  padding: 1rem 1.5rem 1.75rem;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  border-top: 1px solid var(--clr-border);
  gap: 1rem;
  align-items: stretch;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: slideDown 0.3s ease forwards;
}

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

.nav-open .nav-list {
  flex-direction: column;
  width: 100%;
  align-items: stretch;
  gap: 0;
}

.nav-open .main-nav > div {
  flex-direction: column !important;
  width: 100%;
  gap: 1.5rem !important;
}

.nav-open .nav-link {
  font-size: 1.1rem;
  padding: 0.9rem 0.5rem;
  display: block;
  text-align: center;
  border-bottom: 1px solid var(--clr-border);
}

.nav-open .btn {
  width: 100%;
  max-width: 300px;
}

/* Contact Form (Unterseiten-Mockup) */
.contact-form {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 8px;
  padding: var(--space-md);
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.form-row label {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--clr-primary);
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--clr-border);
  border-radius: 4px;
  background: var(--clr-bg);
  color: var(--clr-text-main);
  font-family: var(--font-sans);
  font-size: 1rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-row input[type="text"]:focus,
.form-row input[type="email"]:focus,
.form-row input[type="tel"]:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--clr-primary-light);
  box-shadow: 0 0 0 3px rgba(61, 90, 73, 0.1);
}

.form-row textarea {
  resize: vertical;
  min-height: 120px;
}

.form-row-checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75rem;
}

.form-row-checkbox label {
  font-weight: 400;
  color: var(--clr-text-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

.form-row-checkbox input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 18px;
  height: 18px;
  accent-color: var(--clr-primary);
  flex-shrink: 0;
}

/* Map Container (Unterseiten-Mockup) */
.gmap-container {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  border: 1px solid var(--clr-border);
}

/* Legal Content Container (Impressum / Datenschutz) */
.legal-content {
  max-width: 850px;
  margin: 0 auto;
}

.legal-content h2 {
  margin-top: var(--space-md);
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.legal-content h3 {
  margin-top: var(--space-sm);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--clr-primary);
}

.legal-content p {
  margin-bottom: 1.25rem;
}

.legal-content ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
  color: var(--clr-text-muted);
}

.legal-content ul li {
  margin-bottom: 0.5rem;
}

/* =====================================================================
   ERWEITERUNG 2026 – Wortmarke, Dropdown-Navigation, Wirbelglück,
   Inhaltskomponenten (ruhig, naturheilkundlich, ohne Designspielerei)
   ===================================================================== */

:root {
  /* Wirbelglück – dezent abgesetzter, kühlerer Grauton */
  --clr-wirbel: #6f7873;
  --clr-wirbel-dark: #565d59;
  --clr-wirbel-bg: #eceeec;
  --clr-wirbel-border: #d6dad7;
}

/* --- Marke: reine Wortmarke (kein Kleeblatt-Logo mehr) --- */
.logo-link {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  line-height: 1.05;
}
.brand-name {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--clr-primary);
  letter-spacing: 0.5px;
}
.brand-sub {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 2.5px;
}

/* --- Navigation: CTA-Gruppe rechts --- */
.nav-cta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.nav-phone {
  font-weight: 500;
  color: var(--clr-primary);
  text-decoration: none;
  white-space: nowrap;
}
.nav-phone:hover { color: var(--clr-accent); }

.nav-link .caret {
  font-size: 0.7em;
  margin-left: 0.2rem;
  opacity: 0.7;
}

.dd-toggle { display: none; }

/* --- Leistungen-Dropdown (Desktop) --- */
.has-dropdown { position: relative; }

.dropdown-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  margin-top: 0.5rem;
  min-width: 640px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  box-shadow: 0 24px 50px rgba(31, 42, 36, 0.14);
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 1100;
}
.dropdown-panel::before {
  /* unsichtbare Brücke, damit der Hover beim Überfahren nicht abbricht */
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.has-dropdown:hover .dropdown-panel,
.has-dropdown:focus-within .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dd-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
}
.dd-title {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--clr-primary-light);
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--clr-border);
}
.dropdown-panel a.dd-link {
  display: block;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  color: var(--clr-text-main);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.dropdown-panel a.dd-link span {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--clr-text-muted);
  margin-top: 0.1rem;
}
.dropdown-panel a.dd-link:hover {
  background: var(--clr-bg);
  color: var(--clr-accent);
}

/* Wirbelglück im Dropdown – optisch abgesetzt (eigener Grauton) */
.dd-wirbel {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 0.9rem 1rem;
  background: var(--clr-wirbel-bg);
  border: 1px solid var(--clr-wirbel-border);
  border-radius: 8px;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}
.dd-wirbel:hover { background: #e4e7e4; }
.dd-wirbel img { height: 38px; width: auto; flex-shrink: 0; }
.dd-wirbel .dd-wirbel-label {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--clr-wirbel-dark);
}
.dd-wirbel .dd-wirbel-sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--clr-text-muted);
  margin-top: 0.1rem;
}

/* --- Lead / Einleitungstext --- */
.lead {
  font-size: 1.25rem;
  color: var(--clr-text-main);
  line-height: 1.5;
}

/* --- Aufzählung mit Häkchen --- */
.feature-list {
  list-style: none;
  display: grid;
  gap: 0.85rem;
  margin: var(--space-sm) 0 var(--space-md);
}
.feature-list li {
  position: relative;
  padding-left: 2rem;
  color: var(--clr-text-muted);
}
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--clr-primary-light);
  box-shadow: 0 0 0 4px rgba(97, 129, 110, 0.15);
}
.feature-list.two-col {
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 2rem;
}

/* --- Hinweis / Disclaimer (kein Heilversprechen) --- */
.disclaimer {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: var(--clr-bg);
  border-left: 3px solid var(--clr-primary-light);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-top: var(--space-sm);
  font-size: 0.95rem;
  color: var(--clr-text-muted);
}
.disclaimer .disclaimer-icon { flex-shrink: 0; color: var(--clr-primary-light); font-weight: 700; }
.disclaimer p { margin: 0; font-size: 0.95rem; }

/* --- Ablauf / Schritte --- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
  counter-reset: step;
}
.step {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 8px;
  padding: 2rem 1.75rem 1.75rem;
  position: relative;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--clr-primary);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  margin-bottom: 1rem;
}
.step h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--clr-primary);
  margin-bottom: 0.4rem;
  font-size: 1.05rem;
}
.step p { font-size: 0.95rem; margin: 0; }

/* --- Icon-Badge für Info-Karten --- */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(61, 90, 73, 0.08);
  color: var(--clr-primary);
  margin-bottom: 1rem;
}
.icon-badge svg { width: 30px; height: 30px; }

/* --- Medien-Platzhalter (für später einzusetzende lizenzierte Fotos) --- */
.media-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  min-height: 240px;
  background:
    radial-gradient(circle at 30% 25%, rgba(97,129,110,0.12), transparent 60%),
    linear-gradient(135deg, #e8eee9 0%, #dbe4dd 100%);
  border: 1px dashed var(--clr-wirbel-border);
  border-radius: 8px;
  color: var(--clr-text-muted);
  padding: 1.5rem;
}
.media-ph .ph-label { font-weight: 600; color: var(--clr-primary); font-size: 0.95rem; }
.media-ph .ph-hint { font-size: 0.82rem; max-width: 260px; }
.media-ph svg { width: 40px; height: 40px; opacity: 0.5; }

/* --- Bild im Intro-Grid auch ohne feste Höhe sauber --- */
.intro-image-wrapper.media-frame .media-ph { min-height: 420px; border-radius: 8px; }

/* --- Dezenteres Porträt im Intro (kleiner, zentriert) --- */
.intro-image-wrapper.intro-portrait {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Wirbelglück-Bereich (eigene, dezent abgesetzte Optik) --- */
.section-wirbel { background: var(--clr-wirbel-bg); }
.badge-wirbel {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: #fff;
  color: var(--clr-wirbel-dark);
  border: 1px solid var(--clr-wirbel-border);
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.wirbel-card {
  background: #fff;
  border: 1px solid var(--clr-wirbel-border);
  border-top: 4px solid var(--clr-wirbel);
  border-radius: 10px;
  padding: var(--space-md);
}
.wirbel-card h2, .wirbel-card h3 { color: var(--clr-wirbel-dark); }
.wirbel-logo-inline { height: 88px; width: auto; display: block; margin-bottom: 1.25rem; }

/* --- Online-Hinweis (dezent) --- */
.online-note {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
}
.online-note .icon-badge { margin-bottom: 0; flex-shrink: 0; }

/* --- Mobile: Dropdown wird statisch im aufgeklappten Menü angezeigt --- */
@media (max-width: 1150px) {
  .nav-link .caret { display: none; }

  .nav-open .has-dropdown { width: 100%; position: relative; }
  .nav-open .dd-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 6px;
    right: 6px;
    width: 46px;
    height: 46px;
    padding: 0;
    background: rgba(61, 90, 73, 0.08);
    border: none;
    border-radius: 50%;
    color: var(--clr-primary);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }
  .nav-open .dd-toggle:hover,
  .nav-open .dd-toggle:focus-visible {
    background: rgba(61, 90, 73, 0.16);
    outline: none;
  }
  .nav-open .dd-toggle .chev {
    display: flex;
    transition: transform var(--transition-normal);
  }
  .nav-open .dd-toggle .chev svg { width: 26px; height: 26px; display: block; }
  .nav-open .has-dropdown.dd-open .dd-toggle {
    background: var(--clr-primary);
    color: #fff;
  }
  .nav-open .has-dropdown.dd-open .dd-toggle .chev { transform: rotate(180deg); }

  .nav-open .dropdown-panel { display: none; }
  .nav-open .has-dropdown.dd-open .dropdown-panel {
    display: block;
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    width: 100%;
    box-shadow: none;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0.25rem 0 0.75rem;
    text-align: left;
  }
  .nav-open .dd-cols { grid-template-columns: 1fr; gap: 0.5rem; }
  .nav-open .dropdown-panel a.dd-link { text-align: left; }
  .nav-open .dd-wirbel { margin-top: 0.75rem; }

  .nav-open .nav-cta {
    flex-direction: column !important;
    width: 100%;
    gap: 1rem !important;
    align-items: center;
    margin-top: 1rem;
  }
}

/* Desktop: Dropdown-Panel darf nicht über den Rand laufen */
@media (max-width: 1320px) and (min-width: 1151px) {
  .dropdown-panel { min-width: 560px; }
}

@media (max-width: 700px) {
  .feature-list.two-col { grid-template-columns: 1fr; }
  .dropdown-panel { padding: 1rem; }
}

/* Wirbelglück-Markierung im Dropdown (ersetzt das Logo dezent) */
.dd-wirbel-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, #9fb6a6, var(--clr-wirbel));
}

/* Footer-Tagline */
.footer-tagline { color: #cdd9d0; font-weight: 500; margin-bottom: 0.5rem; }

/* Aus- & Weiterbildungen (Zeitleiste) */
.cv-wrap { max-width: 760px; margin: 0 auto; }
.cv-list { list-style: none; display: flex; flex-direction: column; }
.cv-list li {
  display: flex;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1rem 0.5rem;
  border-bottom: 1px solid var(--clr-border);
}
.cv-list li:last-child { border-bottom: none; }
.cv-year { flex: 0 0 110px; font-family: var(--font-serif); font-size: 1.15rem; color: var(--clr-accent); }
.cv-text { color: var(--clr-text-main); }
.cv-list li:last-child .cv-year { color: var(--clr-primary); font-weight: bold; }

@media (max-width: 540px) {
  .cv-list li { flex-direction: column; gap: 0.1rem; }
  .cv-year { flex-basis: auto; }
}

/* Zertifikat-Vorschau (Bild verlinkt auf die große Ansicht) */
.cert-block {
  max-width: 760px;
  margin: var(--space-md) auto 0;
  display: flex;
  gap: var(--space-md);
  align-items: center;
  flex-wrap: wrap;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  padding: 1.25rem;
}
.cert-thumb {
  flex-shrink: 0;
  display: block;
  border: 1px solid var(--clr-border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(31, 42, 36, 0.08);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.cert-thumb img { display: block; width: 150px; height: auto; }
.cert-thumb:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(31, 42, 36, 0.14); }
.cert-text { flex: 1; min-width: 220px; }
.cert-text h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--clr-primary);
  margin-bottom: 0.25rem;
  font-size: 1.1rem;
}
.cert-text p { margin: 0 0 0.5rem; }

/* 360°-Panorama-Rundgang (Marzipano, eingebettet) */
.pano-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--clr-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  background: #1f2a24;
}
.pano-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 768px) { .pano-frame { aspect-ratio: 4 / 3; } }

/* Lightbox – Galerie-Bilder im Vollbild */
.gallery-item img { cursor: zoom-in; }
body.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(31, 42, 36, 0.92);
  backdrop-filter: blur(4px);
}
.lightbox.open { display: flex; }
.lightbox-img {
  max-width: 95vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.lightbox-close:hover,
.lightbox-close:focus-visible { background: rgba(255, 255, 255, 0.32); outline: none; }

/* Größere, gleichmäßige Galerie (echte Praxisfotos) */
.gallery-grid.gallery-wide {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 210px;
}
.gallery-wide .gallery-item {
  grid-column: auto !important;
  grid-row: auto !important;
}


/* ===================== Cookie-Consent, Google-Maps-Freigabe, Formular ===================== */
/* Cookie-Banner */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:2000;background:var(--clr-surface);
  border-top:3px solid var(--clr-primary);box-shadow:0 -8px 30px rgba(0,0,0,.14);padding:1.1rem 1.25rem;display:none;}
.cookie-banner.show{display:block;animation:cookieUp .3s ease;}
@keyframes cookieUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.cookie-inner{max-width:1100px;margin:0 auto;display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;justify-content:space-between;}
.cookie-text{flex:1 1 340px;font-size:.9rem;color:var(--clr-text-main);line-height:1.5;}
.cookie-text strong{color:var(--clr-primary);}
.cookie-text a{color:var(--clr-accent-hover);text-decoration:underline;}
.cookie-actions{display:flex;gap:.6rem;flex-wrap:wrap;}
.cookie-actions .btn{cursor:pointer;}
.btn-ghost{background:transparent;color:var(--clr-primary);border:1.5px solid var(--clr-primary);}
.btn-ghost:hover{background:rgba(61,90,73,.08);}
.cookie-settings-link{background:none;border:none;color:inherit;cursor:pointer;font:inherit;text-decoration:underline;text-underline-offset:2px;padding:0;}

/* Google-Maps-Platzhalter (Consent) */
.map-consent{display:flex;align-items:center;justify-content:center;min-height:380px;
  background:linear-gradient(135deg,#eef2ef,#e2eae4);border:1px solid var(--clr-border);
  border-radius:12px;text-align:center;padding:2rem 1.25rem;}
.map-consent-box{max-width:470px;}
.map-consent-icon svg{width:44px;height:44px;color:var(--clr-primary);margin-bottom:.4rem;}
.map-consent-box h3{color:var(--clr-primary);margin-bottom:.5rem;}
.map-consent-box>p{font-size:.9rem;color:var(--clr-text-muted);margin-bottom:1rem;line-height:1.5;}
.map-consent-btn{cursor:pointer;}
.map-consent-remember{display:flex;gap:.5rem;align-items:center;justify-content:center;font-size:.82rem;color:var(--clr-text-muted);margin-top:.9rem;}
.map-consent-note{font-size:.78rem;margin-top:.6rem;margin-bottom:0;}
.map-consent-note a{color:var(--clr-accent-hover);text-decoration:underline;}
.gmap-container iframe{display:block;width:100%;height:450px;border:0;border-radius:12px;}

/* Formular-Statusmeldungen */
.form-status{margin-top:1rem;padding:.8rem 1rem;border-radius:8px;font-size:.9rem;line-height:1.45;}
.form-status.success{background:#e3f0e6;border:1px solid #b7d8c0;color:#2c6b40;}
.form-status.error{background:#fbe8e6;border:1px solid #f0c4bf;color:#9c2a20;}
.form-status.sending{background:#eef2ef;border:1px solid var(--clr-border);color:var(--clr-text-muted);}
/* Honeypot-Feld unsichtbar */
.hp-field{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden;}

/* #11 Lange Links/Texte sicher umbrechen (320px) */
.legal-content a{overflow-wrap:anywhere;word-break:break-word;}
.legal-content,.intro-content,.services-header,.cta-content,.service-content{overflow-wrap:anywhere;}