/* ============================================================
   Dein Körperglück, gemeinsames Fundament
   ------------------------------------------------------------
   Liegt bewusst in public/ und wird im BaseLayout als fester <link>
   eingebunden (nicht per import). Sonst entscheidet im Build die
   Chunk-Reihenfolge von Vite, ob diese Datei vor oder nach dem Seiten-CSS
   steht: gemessen am 12.09. stand sie auf coaching/index/termine davor,
   auf kontakt/workshops dahinter. Bei gleicher Spezifitaet kippt damit die
   Kaskade je Seite. Als fester Link steht sie immer zuerst, genau wie das
   gemeinsame CSS der alten Seite.
   ------------------------------------------------------------
   Das hier ist der Teil, der in der alten Hand-HTML-Seite in
   JEDER der 16 Seiten noch einmal inline stand (per Selektor-
   Abgleich ermittelt: Tokens, Reset, Nav, Footer, Reveal waren
   16 von 16 mal identisch dupliziert). Ab hier existiert er
   genau einmal.

   Seitenspezifisches CSS gehoert NICHT hierher, sondern in den
   <style>-Block der jeweiligen .astro-Seite (Astro scoped das
   automatisch pro Seite).

   Nav-Varianten (die alte Seite hatte drei, je nachdem welche CSS
   eingebunden war; hier sind sie explizit benannt):
     .nav--transparent  ueber dem dunklen Hero          (nur Startseite)
     .nav--dark         dauerhaft dunkelviolett         (die 10 Seiten mit purple.css)
     .nav--light        dauerhaft weiss/milchig         (Impressum, Datenschutz,
                                                         AGB, Kontakt, Affiliate)
   Alle drei werden beim Scrollen weiss (.scrolled).

   ACHTUNG beim Portieren: assets/purple.css enthielt NICHT nur die
   Nav-Varianten, sondern ab Zeile 42 auch .section-dark und .cta-dark.
   Beides steht weiter unten in dieser Datei. Wer nur die Nav uebernimmt,
   verliert auf 8 Seiten still die dunklen Sektionen.

   ZWEITE FALLE: gleicher Selektor, anderer Wert je Seite. Gemessen:
   .page-header p ist 600px auf impressum/ueber-mich, aber 650px auf
   coaching; .cta-primary hat 0.9rem Padding auf ueber-mich, 0.95rem auf
   coaching. Die Werte hier stammen von den Rechtsseiten. Jede neu
   portierte Seite gegen IHREN alten Wert pruefen, nicht gegen diese Basis.
   ============================================================ */

:root {
  --bg: #FFFFFF;
  --bg-panel: #FBF7F5;
  --bg-panel-light: #FDF9F8;
  --text: #1A1225;
  --text-muted: #64748D;
  --accent: #C27B7F;
  --accent-dark: #A3585D;
  --accent-blue: #A3585D;
  --success: #A3585D;
  --border: rgba(194, 123, 127, 0.08);
  --border-hover: rgba(194, 123, 127, 0.15);
  --font: 'Inter', system-ui, sans-serif;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.03), 0 4px 16px rgba(194, 123, 127, 0.06);
  --shadow-hover: 0 4px 20px rgba(194, 123, 127, 0.12);
  --transition: 0.3s ease;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
::selection { background: rgba(194, 123, 127, 0.2); color: var(--text); }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
  overflow-x: hidden;
}

/* ── NAV ───────────────────────────────────────────────── */

/* Die Transition unterscheidet sich je Variante: die hellen Seiten hatten
   var(--transition) (0.3s), index und purple.css die explizite 0.4s-Liste.
   Gemessen, nicht vereinheitlicht. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: var(--transition);
}

/* Variante 1: ueber dem dunklen Hero, nur Startseite. */
.nav--transparent {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
}

/* Variante 2: dauerhaft weiss/milchig. Impressum, Datenschutz, AGB, Kontakt,
   Affiliate. Diese Seiten banden in der alten Fassung purple.css NICHT ein. */
.nav--light {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

.nav.scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
/* Die hellen Seiten hatten .nav.scrolled NUR im Mobil-Block (max-width 900px).
   Am Desktop blieb ihre Leiste beim Scrollen bei 0.85, mobil wurde sie 0.92.
   Gemessen 11.09. mit tools/zustaende.mjs. Die Mobil-Regel weiter unten
   gewinnt unter 900px, weil sie spaeter steht. */
.nav--light.scrolled { background: rgba(255, 255, 255, 0.85); }
.nav-inner {
  max-width: 1200px; margin: 0 auto; padding: 0.9rem 2rem;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  font-size: 1.1rem; font-weight: 700; color: var(--accent);
  text-decoration: none; letter-spacing: -0.02em;
}
/* width:auto ist Pflicht, weil das img die intrinsischen Maße als Attribute
   traegt (gegen Layout-Springen). Ohne auto wuerde 400px zur Layoutbreite. */
.nav-logo img { height: 60px; width: auto; transition: filter 0.4s ease; }
/* 'schlank': die 14 Seiten, deren alte .nav-logo-Regel nur Farbe setzte. */
.nav--logo-schlank .nav-logo { font-size: 1rem; font-weight: 400; letter-spacing: normal; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a {
  font-size: 0.85rem; font-weight: 500; color: var(--text-muted);
  text-decoration: none; transition: color var(--transition);
}
.nav-links a:hover { color: var(--accent); }
.nav-links a.active { color: var(--accent); }
.nav-cta {
  padding: 0.55rem 1.2rem; border-radius: 100px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff; font-size: 0.82rem; font-weight: 600;
  text-decoration: none; border: none; cursor: pointer;
  transition: all var(--transition); box-shadow: 0 1px 4px rgba(194, 123, 127, 0.1);
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(194, 123, 127, 0.2); }
.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 0; transition: var(--transition); }
.nav-links.show {
  display: flex; flex-direction: column;
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px);
  padding: 1rem 2rem; border-bottom: 1px solid var(--border); gap: 1rem;
}

/* Variante 3: dunkelviolett, ehemals assets/purple.css (10 von 16 Seiten). */
.nav--dark {
  background: #1A1225;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
}
.nav--dark .nav-logo img { filter: brightness(10); }
.nav--dark .nav-links a { color: rgba(255, 255, 255, 0.78); }
.nav--dark .nav-links a:hover { color: #fff; }
.nav--dark .nav-links a.active { color: #C9A8DD; }
.nav--dark .nav-links.show { background: #1A1225; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.nav--dark .hamburger span { background: #fff; }

/* Gescrollt gewinnt immer die helle Fassung, auch bei .nav--dark */
.nav--dark.scrolled { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); }
.nav--dark.scrolled .nav-logo img { filter: brightness(1); }
.nav--dark.scrolled .nav-links a { color: var(--text-muted); }
.nav--dark.scrolled .nav-links a:hover { color: var(--accent); }
.nav--dark.scrolled .nav-links a.active { color: var(--accent); }
.nav--dark.scrolled .nav-links.show { background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--border); }
.nav--dark.scrolled .hamburger span { background: var(--text); }

/* Variante 1 im Detail: helle Schrift und Logo ueber dem dunklen Hero, beim
   Scrollen die normale helle Nav. Werte aus index.html uebernommen. Das
   Mobilmenue ist hier dunkel, solange nicht gescrollt wurde. */
.nav--transparent .nav-links { gap: 1.75rem; }
.nav--transparent .nav-links a { color: rgba(255, 255, 255, 0.78); }
.nav--transparent .nav-links a:hover { color: #fff; }
.nav--transparent.scrolled .nav-links a { color: var(--text-muted); }
.nav--transparent.scrolled .nav-links a:hover { color: var(--accent); }
.nav--transparent .nav-logo img { height: 80px; filter: brightness(10); }
.nav--transparent.scrolled .nav-logo img { filter: brightness(1); }
.nav--transparent .nav-cta { box-shadow: none; }
.nav--transparent .hamburger span { background: #fff; }
.nav--transparent.scrolled .hamburger span { background: var(--text); }
.nav--transparent .nav-links.show { background: #1A1225; backdrop-filter: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.nav--transparent .nav-links.show a { color: rgba(255, 255, 255, 0.78); }
.nav--transparent .nav-links.show a:hover { color: #fff; }
.nav--transparent.scrolled .nav-links.show { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border-bottom-color: var(--border); }
.nav--transparent.scrolled .nav-links.show a { color: var(--text-muted); }
.nav--transparent.scrolled .nav-links.show a:hover { color: var(--accent); }

/* Variante 4: wie "light", aber mit den leicht abweichenden Werten von
   affiliate.html (Nav etwas deckender, engere Luecken, Button ohne Verlauf).
   Gemessen 12.09., bewusst nicht vereinheitlicht. */
.nav--affiliate { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); }
.nav--affiliate .nav-links { gap: 1.75rem; }
.nav--affiliate .nav-cta { background: var(--accent); box-shadow: none; }
.nav--affiliate .nav-cta:hover { background: var(--accent-dark); box-shadow: 0 4px 12px rgba(194, 123, 127, 0.25); }
.nav--affiliate .nav-links.show { background: rgba(255, 255, 255, 0.97); }

/* Variante 5: fragebogen.html. Wie "light", aber deckender, Logo 56px und
   ohne Scroll-Verhalten (die Seite hat live keinen Scroll-Handler). */
.nav--fragebogen { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); }
.nav--fragebogen .nav-logo img { height: 56px; display: block; }
.nav--fragebogen .nav-links.show { background: rgba(255, 255, 255, 0.97); }

/* ── LAYOUT-BAUSTEINE ──────────────────────────────────── */

.section { padding: 5rem 2rem; }
.section-alt { background: var(--bg-panel); }
.container { max-width: 1100px; margin: 0 auto; }
.section-label {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.15em; color: var(--accent); margin-bottom: 0.75rem;
}
.section-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 1rem; }
.section-subtitle { font-size: 1rem; color: var(--text-muted); max-width: 600px; line-height: 1.7; margin: 0 auto; }

.cta-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.9rem 2rem; border-radius: 100px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff; font-size: 1rem; font-weight: 600; text-decoration: none;
  transition: all var(--transition); box-shadow: 0 2px 8px rgba(194, 123, 127, 0.15);
}
.cta-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(194, 123, 127, 0.25); }
.cta-secondary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.95rem 2rem; border-radius: 100px;
  background: transparent; border: 1px solid var(--border-hover); color: var(--text);
  font-size: 1rem; font-weight: 600; text-decoration: none; transition: all var(--transition);
}
.cta-secondary:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── DUNKLE SEKTIONEN ──────────────────────────────────── */

/* Aus assets/purple.css ab Zeile 42. Wird von 8 Seiten benutzt (coaching, faq,
   kaiserschnittnarben-massage, termine, tupler-technik, index, workshops,
   ueber-mich). index.html hatte dieselben Regeln nochmal inline, wertgleich
   geprueft, deshalb steht das hier genau einmal. */

.section-dark { background: #1A1225; color: #fff; position: relative; overflow: hidden; }
.section-dark::before {
  content: ""; position: absolute; top: -40%; right: -20%; width: 60%; height: 120%;
  background: radial-gradient(ellipse, rgba(194, 123, 127, 0.12) 0%, transparent 60%);
  pointer-events: none;
}
.section-dark::after {
  content: ""; position: absolute; bottom: -40%; left: -20%; width: 60%; height: 120%;
  background: radial-gradient(ellipse, rgba(123, 79, 138, 0.18) 0%, transparent 60%);
  pointer-events: none;
}
.section-dark .container { position: relative; z-index: 1; }
.section-dark .section-title { color: #fff; }
.section-dark .section-subtitle { color: rgba(255, 255, 255, 0.7); }
.section-dark .section-label { color: #C9A8DD; }

/* SPEZIFITAET BEWUSST ANGEHOBEN (.cta-section.cta-dark statt .cta-dark).
   In der alten Seite wurde purple.css NACH dem Seiten-<style> geladen, dadurch
   gewann .cta-dark gegen die gleich spezifischen Seitenregeln .cta-section
   { background } und .cta-section p { color }. In Astro steht global.css VOR
   dem scoped style der Seite, die Reihenfolge ist also umgedreht. Ohne die
   Anhebung wurde die dunkle CTA-Sektion hell (gemessen auf coaching, workshops,
   termine: heller Verlauf, weisse Ueberschrift darauf). cta-dark kommt auf der
   alten Seite ausschliesslich zusammen mit cta-section vor (8 von 8). */
.cta-section.cta-dark { background: #1A1225; color: #fff; position: relative; overflow: hidden; }
.cta-section.cta-dark::before {
  content: ""; position: absolute; top: -30%; right: -15%; width: 50%; height: 130%;
  background: radial-gradient(ellipse, rgba(194, 123, 127, 0.18) 0%, transparent 60%);
  pointer-events: none;
}
.cta-section.cta-dark::after {
  content: ""; position: absolute; bottom: -30%; left: -15%; width: 50%; height: 130%;
  background: radial-gradient(ellipse, rgba(123, 79, 138, 0.22) 0%, transparent 60%);
  pointer-events: none;
}
.cta-section.cta-dark .container { position: relative; z-index: 1; }
.cta-section.cta-dark h2 { color: #fff; }
.cta-section.cta-dark p { color: rgba(255, 255, 255, 0.78); }
.cta-section.cta-dark .section-label { color: #C9A8DD; }
.cta-section.cta-dark .cta-secondary {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  backdrop-filter: blur(8px);
}
.cta-section.cta-dark .cta-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

/* Seitenkopf der Unterseiten. Der groessere Abstand oben stammt aus
   purple.css und gilt, weil die dunkle Nav immer sichtbar ist. */
.page-header {
  padding: 8rem 2rem 3rem;
  background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg) 100%);
  text-align: center;
}
.page-header h1 {
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 1rem;
}
.page-header p {
  font-size: 1.05rem; color: var(--text-muted); max-width: 600px;
  margin: 0 auto; line-height: 1.7;
}
body:has(.nav--dark) .page-header { padding-top: 11rem; }

/* ── FOOTER ────────────────────────────────────────────── */

.footer { background: #F8F3F1; border-top: 3px solid #C27B7F; color: #64748D; font-size: 0.875rem; position: relative; overflow: hidden; }
.footer::before { content: ""; position: absolute; top: -40%; right: -10%; width: 45%; height: 130%; background: radial-gradient(ellipse, rgba(194, 123, 127, 0.07) 0%, transparent 65%); pointer-events: none; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem 2rem; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; }
.footer-brand-logo { height: 48px; width: auto; margin-bottom: 1.25rem; filter: none; display: block; }
.footer-tagline { font-size: 0.95rem; font-weight: 700; color: #1A1225; margin-bottom: 0.5rem; }
.footer-brand p { font-size: 0.85rem; line-height: 1.65; color: #64748D; max-width: 240px; }
.footer-col h4 { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: #C27B7F; margin-bottom: 1rem; }
/* Ersetzt das inline style="margin-top:1.5rem" am zweiten h4 der Spalte "Mehr".
   Bewusst nur ein h4, das auf eine Liste folgt, sonst bekaeme auch die letzte
   Liste der Spalte einen Abstand und der Footer waere 24px zu hoch. */
.footer-col ul + h4 { margin-top: 1.5rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col ul a { color: #64748D; text-decoration: none; font-size: 0.875rem; transition: color 0.3s ease; display: block; }
.footer-col ul a:hover { color: #C27B7F; }
.footer-social { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.25rem; }
.footer-instagram { display: inline-flex; align-items: center; gap: 0.5rem; color: #C27B7F; text-decoration: none; font-size: 0.825rem; font-weight: 600; padding: 0.4rem 0; transition: color 0.3s; }
.footer-instagram:hover { color: #A3585D; }
.footer-whatsapp { display: inline-flex; align-items: center; gap: 0.5rem; color: #64748D; text-decoration: none; font-size: 0.825rem; transition: color 0.3s; padding: 0.4rem 0; }
.footer-whatsapp:hover { color: #C27B7F; }
.footer-address { font-size: 0.8rem; color: #64748D; margin-top: 0.5rem; line-height: 1.6; }
.footer-cert { margin-top: 1.25rem; }
.footer-cert-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #A3585D; background: rgba(194, 123, 127, 0.1); border: 1px solid rgba(194, 123, 127, 0.25); padding: 0.35rem 0.75rem; border-radius: 100px; }
.footer-quote { padding: 2.5rem 2rem; border-top: 1px solid rgba(26, 18, 37, 0.08); }
.footer-quote-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.footer-quote blockquote { font-size: 1.05rem; font-style: italic; font-weight: 500; color: #1A1225; line-height: 1.65; margin: 0 0 0.75rem; }
.footer-quote cite { font-style: normal; font-size: 0.78rem; color: rgba(26, 18, 37, 0.45); letter-spacing: 0.04em; }
.footer-bar { border-top: 1px solid rgba(26, 18, 37, 0.08); padding: 1.5rem 2rem; background: #F0EAE7; }
.footer-bar-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: 0.8rem; color: rgba(26, 18, 37, 0.45); }
.footer-bar-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-bar-links a { color: rgba(26, 18, 37, 0.45); text-decoration: none; transition: color 0.3s; }
.footer-bar-links a:hover { color: #1A1225; }
.footer-credit { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

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

@media (max-width: 900px) {
  .nav-links { display: none; }
  .hamburger { display: block; }
  .nav-cta { display: none; }
  .nav-logo img, .nav--transparent .nav-logo img { height: 56px; width: auto; }
  /* Dunkle Leiste bei offenem Menue. .menu-open setzt der Header NUR auf der
     Startseite (transparente Nav, Logo und Striche sind dort ohnehin hell).
     Auf den anderen Seiten bleibt die Leiste wie sie ist, wie live. */
  .nav.menu-open { background: #1A1225; border-bottom-color: rgba(255, 255, 255, 0.08); }
  .nav.scrolled { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(20px); border-bottom-color: var(--border); }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

@media (max-width: 600px) {
  .section { padding: 4rem 1.25rem; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.5rem 1.5rem; }
  .footer-bar { padding: 1.5rem; }
  .footer-bar-inner { flex-direction: column; align-items: flex-start; }
  .footer-quote { padding: 2rem 1.5rem; }
  .footer-quote blockquote { font-size: 0.95rem; }
}

/* ── ANIMATIONEN ───────────────────────────────────────── */

/* Startwert. GSAP uebernimmt ab hier, siehe BaseLayout.
   Ohne JS oder bei reduzierter Bewegung bleibt der Inhalt sichtbar. */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}