/* einfach.gesund. — statische Website
   Schriften werden lokal ausgeliefert. Keine externen Verbindungen. */

/* ---------- Schriften (lokal) ---------- */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-latin-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-latin-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- Farben & Grundwerte ---------- */
:root {
  /* Waldtiefe — wärmere, tiefere Fassung (10.08.2026).
     Alte Werte stehen als Kommentar dahinter, falls etwas zurückgedreht werden soll. */
  --sand: #F5F0E6;            /* war #F8F6F1 */
  --sand-alt: #EDE6D9;        /* war #F3F0E9 */
  --green: #103A2E;           /* war #315C4B */
  --green-deep: #0B2A22;      /* war #2A5041 */
  --mint: #DDE7D4;            /* war #DCE8DF */
  --beige: #E8DDCE;
  --ink: #14170F;             /* war #252A28 */
  --muted: rgba(20, 23, 15, 0.68);
  --line: rgba(20, 23, 15, 0.11);
  --white: #FCFAF5;           /* war #ffffff — leicht angewärmt */

  /* neu */
  --tief: #0B2A22;            /* Kopfbereich und Bühne */
  --karte: #103A2E;           /* dunkle Kacheln */
  --karte-hover: #1B4E3E;
  --bernstein: #D2A24C;       /* warmer Akzent auf dunklem Grund */
  --bernstein-dunkel: #8A6430;/* derselbe Akzent, lesbar auf hellem Grund */
  --salbei: #A8C39A;
  --hell: #EFE9DC;            /* Text auf dunklem Grund */
  --leise: #B9C7BC;           /* gedämpfter Text auf dunklem Grund */
  --rand-hell: rgba(255, 255, 255, 0.12);
  --wrap: 1200px;
  --radius: 16px;
  --font-body: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --font-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--sand);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* height:auto ist Pflicht — sonst zieht der Browser Bilder in die Länge,
   sobald width/height im HTML stehen und die Spalte schmaler wird. */
img { max-width: 100%; height: auto; display: block; }

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

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 .6em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.2rem, 5.2vw, 3.75rem); }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.7rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1.1em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }

.section { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.section--alt { background: var(--sand-alt); }
.section--white { background: var(--white); }
.section--green { background: var(--green); color: #fff; }
.section--green h2, .section--green h3 { color: #fff; }
.section--green p { color: rgba(255,255,255,.85); }

.eyebrow {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; margin: 0 0 1rem;
}

.lead { font-size: 1.12rem; color: var(--muted); max-width: 46rem; }

.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.7rem; border-radius: 999px;
  font-weight: 500; font-size: .98rem; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-deep); }
.btn--ghost { background: transparent; color: var(--green); border-color: rgba(49,92,75,.35); }
.btn--ghost:hover { background: var(--mint); }
.btn--light { background: #fff; color: var(--green); }
.btn--light:hover { background: var(--mint); color: var(--green-deep); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--outline-light:hover { background: rgba(255,255,255,.14); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }

.arrow-link {
  display: inline-block; margin-top: .6rem; color: var(--green);
  font-weight: 500; text-decoration: none;
}
.arrow-link:hover { text-decoration: underline; }

/* ---------- Kopfbereich ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(248,246,241,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 999px; background: var(--green);
  display: flex; align-items: center; justify-content: center; color: var(--sand);
  flex: 0 0 auto;
}
.brand-name {
  font-family: var(--font-head); font-size: 1.25rem; font-weight: 600;
  color: var(--green); letter-spacing: -.02em;
}
.nav { display: none; align-items: center; gap: .15rem; }
.nav a {
  padding: .5rem .75rem; border-radius: 10px; font-size: .93rem;
  font-weight: 500; color: var(--muted); text-decoration: none;
}
.nav a:hover { color: var(--green); }
.nav a[aria-current="page"] { color: var(--green); background: var(--mint); }
.header-cta { display: none; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 1px solid var(--line); background: transparent;
  border-radius: 12px; cursor: pointer; color: var(--ink);
}
.mobile-nav { display: none; border-top: 1px solid var(--line); background: var(--sand); }
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block; padding: .85rem .25rem; text-decoration: none;
  color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--line);
}
.mobile-nav .btn { margin: 1rem 0 1.4rem; }

@media (min-width: 1000px) {
  .nav, .header-cta { display: flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* ---------- Hero ---------- */
.hero { padding: clamp(2.5rem, 5vw, 4.5rem) 0 0; }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.hero-photo { border-radius: 20px; overflow: hidden; background: var(--mint); }
.hero-photo img { width: 100%; height: auto; }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 2.2rem;
  color: var(--muted); font-size: .92rem;
}
.hero-meta strong { display: block; color: var(--ink); font-weight: 600; font-size: 1rem; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

/* ---------- Merkmal-Leiste ---------- */
.pillars {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem;
  text-align: center; padding: 3rem 0; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pillars .icon-circle { margin: 0 auto .8rem; }
.pillars span { font-size: .95rem; color: var(--muted); }
@media (min-width: 800px) { .pillars { grid-template-columns: repeat(4, 1fr); } }

.icon-circle {
  width: 48px; height: 48px; border-radius: 999px; background: var(--mint);
  display: flex; align-items: center; justify-content: center; color: var(--green);
  flex: 0 0 auto;
}
.icon-square {
  width: 44px; height: 44px; border-radius: 12px; background: var(--mint);
  display: flex; align-items: center; justify-content: center; color: var(--green);
  flex: 0 0 auto;
}

/* ---------- Zweispalter Text/Bild ---------- */
.split { display: grid; gap: 2.5rem; align-items: center; }
.split img { border-radius: var(--radius); }
/* Bilder nie über ihre echte Auflösung hinaus aufblasen — sonst werden sie unscharf */
.img-natur { margin-left: auto; margin-right: auto; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .split--reverse .split-text { order: 2; }
}

.check-list { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .9rem; }
.check-list li { display: flex; align-items: center; gap: .8rem; font-size: .97rem; }

/* ---------- Karten ---------- */
.cards { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.8rem; transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: 0 10px 30px rgba(37,42,40,.07); transform: translateY(-2px); }
.card h3 { margin-top: 1rem; margin-bottom: .5rem; }
.card p { color: var(--muted); font-size: .96rem; margin: 0; }

/* ---------- Schritte ---------- */
.steps { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .steps--4 { grid-template-columns: repeat(4, 1fr); } }
.step {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.8rem;
}
.step-num {
  font-family: var(--font-head); font-size: 1.6rem; color: var(--green);
  opacity: .45; display: block; margin-bottom: .6rem;
}
.step h3 { font-size: 1.12rem; margin-bottom: .4rem; }
.step p { color: var(--muted); font-size: .95rem; margin: 0; }

/* ---------- Themenblöcke (Gesundheitsthemen) ---------- */
.topic {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem; margin-bottom: 1.25rem;
}
.topic-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.topic-head h2 { font-size: 1.5rem; margin: 0; }
.topic p { color: var(--muted); font-size: .98rem; }
.topic p:last-child { margin-bottom: 0; }

/* ---------- Info-Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.chips li {
  background: var(--mint); color: var(--green); border-radius: 999px;
  padding: .45rem 1rem; font-size: .88rem; font-weight: 500;
}

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 2.5rem auto 0; }
.faq details {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: .8rem; padding: 0 1.4rem;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 1.25rem 0; font-weight: 500;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.4rem; color: var(--green); line-height: 1; flex: 0 0 auto;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); margin: 0 0 1.3rem; font-size: .97rem; }

/* ---------- Zitat ---------- */
.quote {
  border-left: 3px solid var(--green); padding: .4rem 0 .4rem 1.6rem;
  font-family: var(--font-head); font-size: 1.4rem; color: var(--green);
  margin: 2.5rem 0; line-height: 1.5;
}

/* ---------- Formulare ---------- */
.form-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.5rem);
}
.form-grid { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: .9rem; font-weight: 500; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 12px;
  background: var(--sand); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid rgba(49,92,75,.35); outline-offset: 1px; background: #fff;
}
.field textarea { min-height: 130px; resize: vertical; }
.field .hint { font-size: .84rem; color: var(--muted); }
.form-note { font-size: .86rem; color: var(--muted); margin: 1.2rem 0 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; }
.contact-list li { display: flex; gap: 1rem; align-items: flex-start; }
.contact-list .label { font-size: .82rem; color: var(--muted); display: block; }
.contact-list a { text-decoration: none; font-weight: 500; }
.contact-list a:hover { text-decoration: underline; }

/* ---------- Rechtstexte ---------- */
.legal { max-width: 820px; }
.legal h2 { font-size: 1.4rem; margin-top: 2.8rem; }
.legal h3 { font-size: 1.12rem; margin-top: 2rem; }
.legal h4 {
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  margin: 1.6rem 0 .5rem; color: var(--ink);
}
.legal p, .legal li { color: var(--muted); font-size: .97rem; }
.legal ul { padding-left: 1.2rem; margin: 0 0 1.1em; }
.legal li { margin-bottom: .6rem; }
.legal a { word-break: break-word; }
.legal address { font-style: normal; color: var(--muted); margin-bottom: 1.2rem; }

/* ---------- eRecht24-Siegel ---------- */
.siegel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem;
  margin: 3rem 0 0; padding-top: 2rem; border-top: 1px solid var(--line);
}
.siegel img { height: 130px; width: auto; }
.siegel a { display: inline-flex; }
.siegel a:hover { opacity: .85; }
.siegel img[src*="agentur"] { height: 66px; }

/* ---------- Fußbereich ---------- */
.site-footer { background: var(--green); color: rgba(255,255,255,.82); padding: 4rem 0 2rem; }
.site-footer a:not(.btn):not(.brand) { color: rgba(255,255,255,.82); text-decoration: none; }
.site-footer a:not(.btn):not(.brand):hover { color: #fff; text-decoration: underline; }
.site-footer .btn { text-decoration: none; }
.site-footer .btn--light { background: #fff; color: var(--green); }
.site-footer .btn--light:hover { background: var(--mint); color: var(--green-deep); }
.site-footer .btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.site-footer .btn--outline-light:hover { background: rgba(255,255,255,.14); color: #fff; }
.footer-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; margin-top: 1.2rem; }
.footer-actions .btn { width: 100%; justify-content: center; }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; } }
.footer-grid h3 { font-size: 1.02rem; color: #fff; margin-bottom: 1rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .95rem; }
.site-footer .brand-name { color: #fff; }
.site-footer .brand-mark { background: rgba(255,255,255,.15); color: #fff; }
.footer-bottom {
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.18);
  display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; justify-content: space-between;
  font-size: .88rem;
}
.footer-disclaimer {
  margin-top: 1.6rem; font-size: .8rem; color: rgba(255,255,255,.6); line-height: 1.6;
}
.footer-credit {
  margin-top: 1.1rem; font-size: .82rem; color: rgba(255,255,255,.6);
}
.site-footer .footer-credit a:not(.btn):not(.brand) {
  color: rgba(255,255,255,.8); text-decoration: underline; text-underline-offset: 2px;
}
.site-footer .footer-credit a:not(.btn):not(.brand):hover { color: #fff; }

/* ---------- Hilfsklassen ---------- */
.mt-0 { margin-top: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   WALDTIEFE — Farb- und Stilfassung vom 10.08.2026
   Ändert nur Farben, Tiefe und Kontrast. Kein Baustein wird verschoben,
   keine Reihenfolge geändert, keine Abstände umgestellt außer dort, wo
   die Bühne einen unteren Innenabstand braucht.
   Zum Zurückdrehen: diesen Block löschen und :root oben zurücksetzen.
   ===================================================================== */

/* ---------- Kopfbereich: dunkel ---------- */
.site-header {
  background: rgba(11, 42, 34, .92);
  border-bottom-color: var(--rand-hell);
}
.brand-name { color: #fff; }
/* Logo bleibt grün wie auf den Visitenkarten. #315C4B ist das ursprüngliche
   Markengrün — hell genug, um sich vom dunklen Kopfbereich abzuheben. */
.brand-mark { background: #315C4B; color: var(--sand); }
.nav a { color: var(--leise); }
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.10); }
.nav-toggle { color: var(--hell); border-color: rgba(255,255,255,.22); }
.site-header .btn--primary { background: var(--bernstein); color: #1C1408; }
.site-header .btn--primary:hover { background: #E0B463; }
.mobile-nav { background: var(--tief); border-top-color: var(--rand-hell); }
.mobile-nav a { color: var(--hell); border-bottom-color: var(--rand-hell); }
.mobile-nav a:hover { color: #fff; }

/* ---------- Bühne: dunkel, mit zwei wandernden Lichtscheinen und Korn ---------- */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--hell);
  background-color: var(--tief);
  /* Kein Korn. Tiefe kommt aus einem sehr weichen Verlauf und den Lichtscheinen. */
  background-image: linear-gradient(165deg, #0E3128 0%, #0B2A22 55%, #082019 100%);
  padding: clamp(3rem, 5.5vw, 5rem) 0 clamp(3.5rem, 6vw, 5.5rem);
}
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(70px); pointer-events: none; z-index: 0;
}
.hero::before {
  width: 60vw; height: 60vw; left: -18vw; top: -24vw;
  background: radial-gradient(circle, rgba(168,195,154,.30), transparent 62%);
  animation: schein-a 26s ease-in-out infinite alternate;
}
.hero::after {
  width: 52vw; height: 52vw; right: -16vw; bottom: -26vw;
  background: radial-gradient(circle, rgba(210,162,76,.24), transparent 62%);
  animation: schein-b 32s ease-in-out infinite alternate;
}
@keyframes schein-a { to { transform: translate3d(9vw, 7vw, 0) scale(1.14); } }
@keyframes schein-b { to { transform: translate3d(-8vw, -6vw, 0) scale(1.10); } }
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after { animation: none; }
}
.hero > .wrap { position: relative; z-index: 2; }

.hero .eyebrow { color: var(--salbei); }
.hero h1 { color: #fff; }
.hero .lead { color: var(--leise); }
.hero-meta {
  color: var(--leise);
  border-top: 1px solid var(--rand-hell);
  padding-top: 1.6rem;
}
.hero-meta strong { color: #fff; }
.hero-photo {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--rand-hell);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.75);
}
.hero-photo img { filter: saturate(.85) brightness(.94); }

/* Knöpfe auf der Bühne */
.hero .btn--primary { background: var(--bernstein); color: #1C1408;
  box-shadow: 0 12px 30px -14px rgba(210,162,76,.75); }
.hero .btn--primary:hover { background: #E0B463; }
.hero .btn--ghost { color: var(--hell); border-color: rgba(255,255,255,.28); background: transparent; }
.hero .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: var(--salbei); color: #fff; }

/* ---------- Merkmal-Leiste unter der Bühne ---------- */
.pillars { border-top: 0; }

/* ---------- Kacheln dunkel, Lesebereiche hell ---------- */
.card, .step {
  background: var(--karte);
  border-color: rgba(255,255,255,.08);
  color: var(--hell);
}
.card:hover, .step:hover { background: var(--karte-hover); }
.card:hover { box-shadow: 0 18px 40px -22px rgba(11,42,34,.65); }
.card h3, .step h3 { color: #fff; }
.card p, .step p { color: var(--leise); }
.card .icon-square, .card .icon-circle { background: rgba(255,255,255,.10); color: var(--salbei); }
.step-num { color: var(--bernstein); opacity: .9; }

/* ---------- Akzente auf hellem Grund ---------- */
.check-list li .icon-circle, .check-list li svg { color: var(--green); }
.quote { border-left-color: var(--bernstein-dunkel); }
.faq summary::after { color: var(--bernstein-dunkel); }

/* ---------- Grüne Bänder und Fußbereich: Tiefe statt Fläche ---------- */
.section--green { position: relative; overflow: hidden; }
.section--green::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 70vw; height: 70vw; left: 15vw; top: -38vw; border-radius: 50%;
  filter: blur(80px);
  background: radial-gradient(circle, rgba(168,195,154,.20), transparent 60%);
}
.section--green > .wrap { position: relative; z-index: 2; }
.btn--light { background: var(--bernstein); color: #1C1408; }
.btn--light:hover { background: #E0B463; color: #1C1408; }
.site-footer .btn--light { background: var(--bernstein); color: #1C1408; }
.site-footer .btn--light:hover { background: #E0B463; color: #1C1408; }
.site-footer { background: var(--tief); }

/* Nachzügler: Elemente, die innerhalb der jetzt dunklen Kacheln sitzen */
.card .btn--primary, .step .btn--primary { background: var(--bernstein); color: #1C1408; }
.card .btn--primary:hover, .step .btn--primary:hover { background: #E0B463; }
.card .check-list li, .step .check-list li { color: var(--leise); }
.card .check-list svg, .step .check-list svg { color: var(--salbei); }
.card a:not(.btn), .step a:not(.btn) { color: var(--salbei); }