/* ============================================================
   Naturheilpraxis Egon Philipp — Redesign 2026
   Identität: Grün (aus dem bestehenden Logo) modernisiert,
   warmer Creme-Grund, ruhige Serifen-Headlines.
   Keine externen Ressourcen (Fonts/CDN) → schnell & DSGVO-arm.
   ============================================================ */

:root {
  --green-950: #142e21;
  --green-800: #1e4d33;
  --green-600: #2f7d4f;
  --green-100: #e4efe6;
  --green-50:  #f1f6f1;
  --cream: #faf8f3;
  --ink: #22251f;
  --muted: #5f6659;
  --gold: #c9a24b;
  --line: #dfe3da;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(20, 46, 33, 0.08);
  --font-head: Georgia, "Times New Roman", serif;
  --font-body: "Segoe UI", system-ui, -apple-system, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  /* Dezentes Blatt-Muster gegen Eintönigkeit — nur auf Creme-Flächen sichtbar,
     weiße Sektionen und Karten decken es ab. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cg fill='none' stroke='%232f7d4f' stroke-opacity='0.13' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M40 78 q22 -34 44 0 q-22 34 -44 0 z'/%3E%3Cpath d='M62 78 v20'/%3E%3Ccircle cx='262' cy='52' r='6.5'/%3E%3Ccircle cx='273' cy='60' r='6.5'/%3E%3Ccircle cx='269' cy='73' r='6.5'/%3E%3Ccircle cx='255' cy='73' r='6.5'/%3E%3Ccircle cx='251' cy='60' r='6.5'/%3E%3Cpath d='M168 250 v-46'/%3E%3Cpath d='M168 238 q-15 -5 -19 -16 q17 2 19 16 z'/%3E%3Cpath d='M170 224 q15 -5 19 -16 q-17 2 -19 16 z'/%3E%3Cpath d='M168 210 q-15 -5 -19 -16 q17 2 19 16 z'/%3E%3Cpath d='M312 148 q-10 15 0 22 q10 -7 0 -22 z'/%3E%3Cpath d='M236 296 q18 -27 36 0 q-18 27 -36 0 z' transform='rotate(32 254 296)'/%3E%3Cpath d='M254 296 v16' transform='rotate(32 254 296)'/%3E%3Cpath d='M96 186 q13 -20 26 0 q-13 20 -26 0 z' transform='rotate(-40 109 186)'/%3E%3C/g%3E%3Cg fill='%232f7d4f' fill-opacity='0.11'%3E%3Ccircle cx='58' cy='300' r='3.5'/%3E%3Ccircle cx='70' cy='307' r='3'/%3E%3Ccircle cx='63' cy='314' r='2.5'/%3E%3Ccircle cx='320' cy='232' r='3'/%3E%3Ccircle cx='196' cy='108' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.container { width: min(1120px, 92%); margin-inline: auto; }

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  overflow-wrap: break-word;
  hyphens: auto;
}

a { color: var(--green-800); }

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 248, 243, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.nav { display: flex; align-items: center; justify-content: space-between; padding-block: 0.85rem; }

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
  line-height: 1.2;
}
.nav-logo .logo-img { height: 54px; width: auto; }
.nav-logo strong { font-family: var(--font-head); font-size: 1.15rem; letter-spacing: 0.02em; }
.nav-logo span {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--green-600);
  font-weight: 600;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 1.6vw, 1.6rem);
  list-style: none;
}

.nav-links a:not(.btn) {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  padding-block: 0.3rem;
  border-bottom: 2px solid transparent;
}
.nav-links a:not(.btn):hover,
.nav-links a[aria-current="page"] { border-bottom-color: var(--green-600); }

.nav-links .lang a {
  border: 1px solid var(--line) !important;
  border-radius: 8px;
  padding: 0.25rem 0.6rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.nav-links .lang a:hover { border-color: var(--green-600) !important; color: var(--green-800); }

.nav-toggle { display: none; }

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.8rem 1.7rem;
  border: 2px solid var(--green-800);
  color: var(--green-800);
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--green-800); color: #fff; }
.btn-primary:hover { background: var(--green-600); border-color: var(--green-600); }

.btn-ghost:hover { background: var(--green-100); }

.btn-small { padding: 0.45rem 1.2rem; font-size: 0.9rem; }

/* ===== Hero ===== */
.hero { background: linear-gradient(180deg, var(--green-50) 0%, var(--cream) 100%); }

.hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.hero-kicker {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--green-600);
  margin-bottom: 1rem;
}

.hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); color: var(--green-950); }

.hero-sub { margin-top: 1.2rem; font-size: 1.12rem; color: var(--muted); max-width: 48ch; }

.hero-cta { margin-top: 2rem; display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; }

.hero-phone { font-weight: 600; text-decoration: none; color: var(--green-950); white-space: nowrap; }
.hero-phone small { display: block; font-weight: 400; color: var(--muted); }

.hero-photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 1 / 1;
  background: var(--green-100);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Trust-Leiste ===== */
.trustbar { border-block: 1px solid var(--line); background: #fff; }
.trustbar-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-block: 1.6rem;
}
.trustbar-item {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.2rem;
  padding-inline: 1rem;
}
.trustbar-item + .trustbar-item { border-left: 1px solid var(--line); }
.trustbar-item strong { font-family: var(--font-head); font-size: 1.55rem; color: var(--green-800); }
.trustbar-item span { color: var(--muted); font-size: 0.92rem; }

@media (max-width: 720px) {
  .trustbar-inner { grid-template-columns: 1fr; gap: 1rem; }
  .trustbar-item + .trustbar-item { border-left: none; border-top: 1px solid var(--line); padding-top: 1rem; }
}

/* ===== Sektionen ===== */
.section { padding-block: clamp(3.2rem, 7vw, 5.5rem); }
.section-alt { background: #fff; border-block: 1px solid var(--line); }

.section-head { max-width: 60ch; margin-bottom: 2.4rem; }
.section-kicker {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
}
.section-title { font-size: clamp(1.7rem, 3.6vw, 2.5rem); color: var(--green-950); margin-top: 0.4rem; }
.section-intro { margin-top: 0.9rem; color: var(--muted); }

/* ===== Karten (Schwerpunkte / Methoden) ===== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.3rem;
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Karten leuchten beim Darüberfahren sanft auf.
   Die zweite Selektor-Variante ist nötig, weil .reveal.visible ebenfalls
   transform setzt — ohne sie bliebe der Anhebe-Effekt bei eingeblendeten
   Karten wirkungslos (und nur manche Karten würden animieren). */
@media (hover: hover) {
  .card:hover,
  .card.reveal.visible:hover {
    transform: translateY(-4px);
    border-color: var(--green-600);
    box-shadow: 0 16px 34px rgba(20, 46, 33, 0.14);
  }
  .card:hover h3 { color: var(--green-600); }
  .card h3 { transition: color 0.2s ease; }
  .card:hover .card-icon { background: var(--green-100); }
  .card-icon { transition: background 0.2s ease; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .card h3, .card-icon { transition: none; }
  .card:hover { transform: none; }
}
.section-alt .card { background: var(--cream); }

.card h3 { font-size: 1.15rem; color: var(--green-950); }
.card p { color: var(--muted); font-size: 0.95rem; flex-grow: 1; }
.card a { font-weight: 600; text-decoration: none; font-size: 0.92rem; }
.card a:hover { text-decoration: underline; }

.card-icon {
  width: 4.2rem; height: 4.2rem;
  border-radius: 10px;
  background: var(--green-50);
  color: var(--green-800);
  display: grid; place-items: center;
  font-size: 1.25rem;
  overflow: hidden;
}
.card-icon img { width: 100%; height: 100%; object-fit: contain; }

/* ===== Therapie-Details (Akkordeon) ===== */
.therapy-list { display: grid; gap: 1rem; }

.therapy {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.therapy summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  font-family: var(--font-head);
  font-size: 1.2rem;
  color: var(--green-950);
}
.therapy summary::-webkit-details-marker { display: none; }

/* Symbol statt Nummer — zeigt die Methode auf einen Blick */
.therapy-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--green-50);
  color: var(--green-700, var(--green-800));
  display: grid;
  place-items: center;
  transition: background 0.2s ease;
}
.therapy-icon svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.therapy-icon svg .solid { fill: currentColor; stroke: none; }
.therapy[open] .therapy-icon,
.therapy summary:hover .therapy-icon { background: var(--green-100); }

.therapy summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.5rem;
  color: var(--green-600);
  transition: transform 0.2s ease;
}
.therapy[open] summary::after { transform: rotate(45deg); }

.therapy-body { padding: 0 1.5rem 1.5rem; color: var(--ink); }
.therapy-body p { margin-bottom: 0.9rem; }
.therapy-body h4 { margin: 1.1rem 0 0.4rem; font-size: 1rem; color: var(--green-800); }
.therapy-body ul { margin: 0 0 0.9rem 1.2rem; }
.therapy-body .btn { margin-top: 0.4rem; }

/* ===== Über mich / Timeline ===== */
.about-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.about-photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 1 / 1; background: var(--green-100); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }

.lead { font-size: 1.18rem; font-family: var(--font-head); color: var(--green-950); margin-bottom: 1rem; }

.timeline { list-style: none; margin-top: 1.6rem; border-left: 2px solid var(--green-100); }

.timeline li { position: relative; padding: 0 0 1.3rem 1.6rem; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -7px; top: 0.45em;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--green-600);
  border: 2px solid var(--cream);
}
.timeline strong { display: block; color: var(--green-950); }
.timeline span { color: var(--muted); font-size: 0.95rem; }

/* ===== Zitat ===== */
.quote-band { background: var(--green-950); color: #fff; text-align: center; }
.quote-band .container { padding-block: clamp(3rem, 6vw, 4.5rem); max-width: 780px; }
.quote-band blockquote { font-family: var(--font-head); font-size: clamp(1.3rem, 3vw, 1.8rem); line-height: 1.4; }
.quote-band footer { margin-top: 1rem; color: var(--gold); font-size: 0.95rem; }

/* ===== Videos ===== */
.video-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.3rem; }
.video-link {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  text-decoration: none;
  box-shadow: var(--shadow);
}
.video-link strong { display: block; color: var(--green-950); font-family: var(--font-head); font-size: 1.1rem; }
.video-link span { color: var(--muted); font-size: 0.9rem; }

/* Klick-Fassade: YouTube lädt erst nach Klick (DSGVO) */
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }

.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(135deg, var(--green-950), var(--green-800));
  box-shadow: var(--shadow);
  cursor: pointer;
  border: none;
  display: block;
  width: 100%;
  text-align: left;
}
.video-embed:hover .video-play { transform: scale(1.08); }

.video-play {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  display: grid; place-items: center;
  transition: transform 0.15s ease;
}
.video-play::after {
  content: "";
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--green-800);
  margin-left: 4px;
}

.video-embed-title {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem 1.2rem;
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.1rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
}

.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-caption { margin-top: 0.7rem; color: var(--muted); font-size: 0.92rem; }

/* ===== Webinare ===== */
.webinar-format {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding: 1.3rem 1.6rem;
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: var(--radius);
}
.webinar-format div { display: grid; }
.webinar-format strong { font-family: var(--font-head); font-size: 1.2rem; color: var(--green-800); }
.webinar-format span { color: var(--muted); font-size: 0.92rem; }

/* ===== Kontakt ===== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.contact-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
}
.contact-card h3 { color: var(--green-950); margin-bottom: 1rem; }
.contact-card dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.2rem; }
.contact-card dt { font-weight: 600; color: var(--green-800); }
.contact-card dd a { text-decoration: none; font-weight: 600; }

.notice {
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: var(--radius);
  padding: 1.2rem 1.5rem;
  font-size: 0.95rem;
  color: var(--muted);
  margin-top: 1.5rem;
}

/* ===== CTA-Band ===== */
.cta-band { background: var(--green-800); color: #fff; text-align: center; }
.cta-band .container { padding-block: clamp(3rem, 6vw, 4.5rem); }
.cta-band h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
.cta-band p { margin: 0.9rem auto 1.8rem; max-width: 55ch; color: #d9e4da; }
.cta-band .btn { border-color: #fff; color: var(--green-950); background: #fff; }
.cta-band .btn:hover { background: var(--gold); border-color: var(--gold); color: var(--green-950); }

/* ===== Footer ===== */
.site-footer { background: var(--green-950); color: #c4cfc4; font-size: 0.92rem; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 2rem;
  padding-block: 3rem 2rem;
}
.footer-grid h4 { color: #fff; font-family: var(--font-head); margin-bottom: 0.8rem; font-size: 1.05rem; }
.footer-grid ul { list-style: none; display: grid; gap: 0.4rem; }
.footer-grid a { color: #c4cfc4; text-decoration: none; }
.footer-grid a:hover { color: #fff; }

.social-row { display: flex; gap: 0.7rem; margin-top: 1.1rem; }

.social-link {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: grid; place-items: center;
  color: #c4cfc4;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.social-link:hover { background: var(--gold); color: var(--green-950); transform: translateY(-2px); }
.social-link svg { width: 17px; height: 17px; fill: currentColor; }
.social-link svg.stroke-icon { fill: none; stroke: currentColor; stroke-width: 2; }

.footer-note {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-block: 1.2rem;
  font-size: 0.82rem;
  color: #8fa192;
}
.footer-note p + p { margin-top: 0.5rem; }

/* ===== Ablauf (Erster Termin) ===== */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.3rem; }

.step-num {
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: var(--green-800);
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.2rem;
  display: grid; place-items: center;
  margin-bottom: 1rem;
}

/* ===== Prävention ===== */
.prevention-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.pull-quote {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 3.5vw, 2.3rem);
  line-height: 1.3;
  color: var(--green-950);
  border-left: 4px solid var(--gold);
  padding-left: 1.4rem;
}
.pull-quote em { font-style: normal; color: var(--green-600); }

.prevention-text p { margin-bottom: 1rem; }
.prevention-text .closing { font-weight: 600; color: var(--green-950); }

@media (max-width: 820px) {
  .prevention-grid { grid-template-columns: 1fr; }
}

/* ===== Patientenstimmen ===== */
.testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.3rem; }

.testimonial {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.7rem 1.6rem;
}
.testimonial .stars { color: var(--gold); letter-spacing: 3px; margin-bottom: 0.6rem; }
.testimonial p { font-style: italic; color: var(--ink); }
.testimonial footer { margin-top: 0.9rem; font-weight: 600; color: var(--green-800); font-size: 0.92rem; }

/* ===== WhatsApp-Button (schwebend) ===== */
.whatsapp-fab {
  position: fixed;
  right: 1.2rem; bottom: 1.2rem;
  z-index: 60;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25d366;
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}
.whatsapp-fab:hover { transform: scale(1.08); }
.whatsapp-fab svg { width: 32px; height: 32px; fill: #fff; }

.btn-whatsapp {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
}
.btn-whatsapp:hover { background: #1eb857; border-color: #1eb857; }

/* ===== Partner & Kooperationen ===== */
.partners-band { border-block: 1px solid var(--line); background: #fff; }

/* Titel steht über der Reihe — so kann nichts abgeschnitten werden,
   auch wenn später mehr Partner dazukommen. */
.partners-inner { padding-block: 1.7rem; text-align: center; }

.partners-title {
  display: block;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 0.9rem;
}

.partners-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem clamp(1rem, 2.5vw, 2.2rem);
}
.partners-list > * { position: relative; }
.partners-list > * + *::before {
  content: "";
  position: absolute;
  left: clamp(-1.1rem, -1.25vw, -0.5rem);
  top: 50%;
  translate: 0 -50%;
  width: 1px;
  height: 1em;
  background: var(--line);
}

.partner-logo {
  color: var(--muted);
  font-family: var(--font-head);
  font-size: 1.02rem;
  opacity: 0.8;
  text-decoration: none;
  white-space: nowrap;
}

/* Bewusst KEIN Hover-Effekt: Nur ein Partner hat bisher eine Website. Ein
   Aufleuchten würde ausschließlich diesen einen Eintrag betreffen und die
   Zeile uneinheitlich wirken lassen. Sobald für alle Partner Links (oder
   Logos) vorliegen, bekommen alle denselben Hover-Effekt.
   Tastatur-Fokus bleibt sichtbar — für Mausnutzer ändert sich nichts. */
a.partner-logo:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===== Gesundheitstest-Center ===== */
.quiz {
  max-width: 660px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
}

.quiz-progress { height: 6px; background: var(--green-100); border-radius: 999px; margin-bottom: 1.2rem; overflow: hidden; }
.quiz-progress span { display: block; height: 100%; width: 0; background: var(--green-600); transition: width 0.3s ease; }

.quiz-count { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.5rem; }

.quiz-question { font-family: var(--font-head); font-size: 1.3rem; color: var(--green-950); margin-bottom: 1.4rem; }

.quiz-answers { display: grid; gap: 0.7rem; }
.quiz-answers button {
  text-align: left;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.quiz-answers button:hover { border-color: var(--green-600); background: var(--green-50); }

.quiz-back { margin-top: 1.2rem; background: none; border: none; color: var(--muted); cursor: pointer; font: inherit; font-size: 0.9rem; }
.quiz-back:hover { color: var(--green-800); }

.quiz-result h3 { font-size: 1.5rem; margin-bottom: 0.4rem; color: var(--green-950); }

.result-badge { display: inline-block; padding: 0.35rem 0.95rem; border-radius: 999px; font-weight: 700; font-size: 0.9rem; margin-bottom: 1rem; }
.result-gruen { background: #e2f2e4; color: #1e5c2f; }
.result-gelb { background: #fdf3d7; color: #8a6d1a; }
.result-orange { background: #fde4d7; color: #9c4a1a; }

.quiz-result .actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* ===== Anamnesebogen ===== */
.anamnese-form {
  display: grid;
  gap: 1.2rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
}
.anamnese-form .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.anamnese-form label { font-weight: 600; font-size: 0.92rem; color: var(--green-800); display: grid; gap: 0.35rem; }
.anamnese-form input, .anamnese-form select, .anamnese-form textarea {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  background: #fff;
  width: 100%;
}
.anamnese-form input:focus, .anamnese-form select:focus, .anamnese-form textarea:focus { outline: 2px solid var(--green-600); outline-offset: 1px; }
.anamnese-form textarea { min-height: 90px; resize: vertical; }
.anamnese-form fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.2rem; }
.anamnese-form legend { font-weight: 600; color: var(--green-800); padding: 0 0.4rem; font-size: 0.92rem; }

.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.5rem 0.8rem; }
.check-grid label { font-weight: 400; color: var(--ink); display: flex; gap: 0.5rem; align-items: center; font-size: 0.95rem; }
.check-grid input { width: auto; }

.summary-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
}
.summary-card h3 { color: var(--green-950); margin-bottom: 0.8rem; }
.summary-card pre { white-space: pre-wrap; font-family: inherit; font-size: 0.95rem; line-height: 1.55; }
.summary-card .actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.5rem; }

@media (max-width: 720px) {
  .anamnese-form .grid-2 { grid-template-columns: 1fr; }
}

/* ===== Druckansicht: Praxis-Briefkopf + nur Ergebnis/Zusammenfassung ===== */
.print-head, .print-foot { display: none; }

@media print {
  .site-header, .site-footer, .whatsapp-fab, .cta-band, .test-chooser,
  .quiz-back, .quiz-result .actions, .summary-card .actions,
  .anamnese-form, .notice, .section-head p.section-kicker { display: none !important; }

  body { background: #fff; background-image: none; }
  .section { padding-block: 0; }
  .quiz, .summary-card { box-shadow: none; border: 1px solid #bbb; padding: 1.2rem; }

  .print-head {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    border-bottom: 2px solid var(--green-950);
    padding-bottom: 0.7rem;
    margin-bottom: 1.4rem;
  }
  .print-head img { height: 56px; width: auto; }
  .print-head strong { font-family: var(--font-head); font-size: 1.1rem; color: var(--green-950); }
  .print-head .print-adresse { font-size: 0.78rem; line-height: 1.55; color: #333; }

  .print-foot {
    display: block;
    border-top: 1px solid #bbb;
    margin-top: 1.6rem;
    padding-top: 0.6rem;
    font-size: 0.72rem;
    line-height: 1.5;
    color: #555;
    text-align: center;
  }

  @page { margin: 16mm 14mm; }
}

/* ===== Spotlight-Band (Hinweis auf einen eigenen Bereich) ===== */
.spotlight {
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, #eef3fa 0%, #f7f9fc 100%);
}

.spotlight-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(1.3rem, 4vw, 2.8rem);
  align-items: center;
  padding-block: clamp(2rem, 4.5vw, 3rem);
}

.spotlight-icon {
  width: 96px;
  height: 96px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #d9e2ef;
  display: grid;
  place-items: center;
  padding: 0.5rem;
  flex-shrink: 0;
}
.spotlight-icon img { width: 100%; height: 100%; object-fit: contain; }

.spotlight-kicker {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #4d6f9e;
  margin-bottom: 0.35rem;
}

/* Grüne Variante — für Hinweise, die zur Kernmarke gehören (Selbsttests) */
.spotlight.spotlight-gruen { background: linear-gradient(180deg, var(--green-50) 0%, #f7faf7 100%); }
.spotlight.spotlight-gruen .spotlight-icon { border-color: var(--green-100); }
.spotlight.spotlight-gruen .spotlight-kicker { color: var(--green-600); }
.spotlight h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--green-950);
  margin-bottom: 0.5rem;
}
.spotlight p { color: var(--muted); max-width: 60ch; }

.spotlight .btn { white-space: nowrap; }

@media (max-width: 860px) {
  .spotlight-inner { grid-template-columns: auto 1fr; }
  .spotlight .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 520px) {
  .spotlight-inner { grid-template-columns: 1fr; }
  .spotlight-icon { width: 76px; height: 76px; }
}

/* Patientenstimmen als Aufklapper: Sterne + Name sichtbar, Text auf Klick */
details.testimonial summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.7rem; }
details.testimonial summary::-webkit-details-marker { display: none; }
details.testimonial summary .stars { margin-bottom: 0; }
details.testimonial .t-name { font-weight: 600; color: var(--green-950); }
details.testimonial .t-plus { margin-left: auto; color: var(--green-600); font-weight: 700; font-size: 1.2rem; line-height: 1; transition: transform 0.2s ease; }
details.testimonial[open] .t-plus { transform: rotate(45deg); }
details.testimonial[open] summary { margin-bottom: 0.7rem; }

/* =====================================================================
   GEPARKT: Styles fuer Webinar-Terminliste und Mitgliederbereich.
   Werden reaktiviert, sobald Termine bzw. der Mitgliederbereich live gehen.
   ===================================================================== */
/* ===== Termin-Liste (buchbare Live-Webinare) ===== */
.termin-liste { display: grid; gap: 1rem; margin-top: 1.4rem; }

.termin {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.3rem;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.3rem;
}

.termin-datum {
  text-align: center;
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: 10px;
  padding: 0.55rem 0.85rem;
  min-width: 76px;
}
.termin-datum strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--green-800);
}
.termin-datum span {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.termin-info h4 { font-family: var(--font-head); font-size: 1.08rem; color: var(--green-950); margin-bottom: 0.15rem; }
.termin-info p { color: var(--muted); font-size: 0.9rem; }

@media (max-width: 700px) {
  .termin { grid-template-columns: auto 1fr; row-gap: 0.9rem; }
  .termin .btn { grid-column: 1 / -1; text-align: center; }
}

/* ===== Materialbibliothek (Mitgliederbereich) ===== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.6rem;
}

.filter-chip {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 0.45rem 1.05rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.filter-chip:hover { border-color: var(--green-600); color: var(--green-800); }
.filter-chip[aria-pressed="true"] {
  background: var(--green-800);
  border-color: var(--green-800);
  color: #fff;
}

.material-typ {
  align-self: flex-start;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-800);
}
.material-typ.rezept { background: #fdf3d7; color: #8a6d1a; }
.material-typ.kraut { background: #e6f0e2; color: #3d6b2e; }
.material-typ.merkblatt { background: #eceff5; color: #3c4a63; }

.material-quelle {
  font-size: 0.84rem !important;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 0.6rem;
  margin-top: 0.3rem;
  flex-grow: 0 !important;
}

.card[hidden] { display: none; }

.leer-hinweis {
  color: var(--muted);
  font-style: italic;
  padding: 1.5rem 0;
}

/* ===== Mitglieder-Login ===== */
.login-card { max-width: 440px; margin-inline: auto; }

.login-form { display: grid; gap: 0.95rem; margin-top: 1.2rem; }
.login-form label { font-weight: 600; font-size: 0.92rem; color: var(--green-800); display: grid; gap: 0.35rem; }
.login-form input {
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  background: #fff;
}
.login-form input:focus { outline: 2px solid var(--green-600); outline-offset: 1px; }

.login-error { color: #a23333; font-size: 0.9rem; display: none; }
.login-error.show { display: block; }

.member-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }

/* ===== Scroll-Einblendungen ===== */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; }
  .reveal.visible { opacity: 1; transform: none; }
}

/* ===== Mobile ===== */
@media (max-width: 820px) {
  .hero-inner, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero-photo { max-width: 420px; margin-left: auto; margin-right: auto; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  /* Der Einstieg zentriert — passend zu den zentrierten Sektionen darunter */
  .hero-inner > div:first-child { text-align: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
}

/* Bei acht Menüpunkten braucht die Leiste früher das Burger-Menü,
   sonst bricht sie auf mittelgroßen Bildschirmen um. */
@media (max-width: 1000px) {
  .nav-toggle {
    display: grid;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
  }
  .nav-toggle span { width: 26px; height: 3px; background: var(--green-950); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    padding: 1.2rem 4%;
    gap: 1rem;
    display: none;
  }
  .nav-links.open { display: flex; }
}