/* ==========================================================================
   GESUNDHEITSARCHITEKTUR · style.css
   Reines CSS, keine Frameworks, keine externen Schriften.

   INHALT
   01 Design-Tokens (Farben, Schriften, Abstände)
   02 Basis
   03 Typografie
   04 Layout-Bausteine (Wrap, Sektionen, Karten)
   05 Buttons und Links
   06 Header
   07 Hero
   08 Was anders ist (Bauzeichnung)
   09 Drei Schritte
   10 Werkzeug (Haarwurzelanalyse, Epigenetik)
   11 Haltung
   12 Angebote
   13 Über mich
   14 Passung
   15 Inner Compass
   16 Wissen
   17 FAQ und Aufklappbereiche
   18 Kontakt
   19 Newsletter
   20 Footer
   21 Mobile Leiste
   22 Bewegung (Scroll-Reveal, Atmen)
   23 Rechtsseiten und 404
   24 Kleinere Bildschirme
   ========================================================================== */


/* ==========================================================================
   01 DESIGN-TOKENS
   Farben und Schriften werden ausschliesslich hier geändert.
   ========================================================================== */
:root {
  /* Markenfarben laut Marken- & Wording-Handbuch 2.0 */
  --navy: #152B3C;   /* Fundament, Überschriften, Tiefe */
  --cream: #F4EFE6;  /* Haupt-Hintergrund, Luft, Wärme */
  --paper: #FCFAF5;  /* heller Hintergrund */
  --sand: #D8C9B5;   /* Rahmen, Trennlinien, ruhige Flächen */
  --sage: #A8B09B;   /* sparsame Akzente, Bestätigungen */
  --gold: #B89A5A;   /* Kompass, Linien, primäre Buttons */
  --white: #FFFFFF;  /* Karten */

  /* Abgeleitete Töne (nur Abstufungen der Markenfarben) */
  --navy-light: #203D50;                    /* Navy, aufgehellt (Hover) */
  --navy-deep: #0F2230;                     /* Navy, abgedunkelt (Footer) */
  --cream-deep: #EDE6DA;                    /* Creme mit etwas Sand */
  --text: rgba(21, 43, 60, .92);            /* Fliesstext */
  --muted: rgba(21, 43, 60, .72);           /* Nebentext, Kleingedrucktes */
  --line: rgba(21, 43, 60, .12);            /* feine Linien auf hellem Grund */
  --on-navy: rgba(255, 255, 255, .86);      /* Text auf Navy */
  --on-navy-muted: rgba(255, 255, 255, .68);
  --line-on-navy: rgba(255, 255, 255, .16); /* feine Linien auf Navy */

  /* Schatten: nie hart, höchstens sehr weich und tief */
  --shadow-rest: 0 10px 30px rgba(21, 43, 60, .05);
  --shadow: 0 18px 48px rgba(21, 43, 60, .10);

  /* Rundungen */
  --radius-small: 16px;
  --radius-card: 24px;
  --radius-large: 32px;
  --radius-pill: 999px;

  /* Schriften: Serifen für Überschriften, Systemschrift für Fliesstext */
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Masse */
  --wrap: 1180px;
  --header-height: 76px;
  --section-space: clamp(4.5rem, 9vw, 8rem);
  --transition: .3s ease;
}


/* ==========================================================================
   02 BASIS
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-wrap: break-word; /* sehr lange Wörter umbrechen, statt aus dem Rand zu laufen */
  -webkit-font-smoothing: antialiased;
}

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

img {
  height: auto;
}

p {
  margin: 0 0 1.1em;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

strong {
  font-weight: 700;
  color: var(--navy);
}

::selection {
  background: var(--sand);
  color: var(--navy);
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* Sprungziele landen direkt unter dem stehenden Header */
section[id] {
  scroll-margin-top: calc(var(--header-height) - 1px);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: .75rem 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}


/* ==========================================================================
   03 TYPOGRAFIE
   ========================================================================== */
h1,
h2,
h3 {
  margin: 0 0 .6em;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--navy);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.1rem, 4.6vw + .6rem, 4.25rem);
  line-height: 1.05;
}

h2 {
  font-size: clamp(1.9rem, 3vw + .7rem, 3.1rem);
}

h3 {
  font-size: 1.45rem;
  line-height: 1.25;
}

/* Grosse Aussage (Sektion Haltung) */
.display {
  font-size: clamp(2.3rem, 5vw + .5rem, 4.6rem);
  line-height: 1.04;
}

/* Längere bzw. kleinere Überschriften */
.h2--long {
  font-size: clamp(1.55rem, 1.6vw + 1rem, 2.3rem);
  line-height: 1.22;
}

.h2--small {
  font-size: clamp(1.6rem, 1.6vw + 1rem, 2.2rem);
}

/* Einleitender Absatz in Serifenschrift */
.lead {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--navy);
}

/* Kleine Zeile über einer Überschrift, mit goldenem Strich */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.25rem;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 2px;
  background: var(--gold);
}

/* Kurze Aussagen untereinander, jeweils mit goldenem Strich */
.statement-list {
  display: grid;
  gap: .5rem;
  margin: 1.5rem 0;
}

.statement-list li {
  position: relative;
  padding-left: 1.75rem;
  font-weight: 600;
  color: var(--navy);
}

.statement-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .8em;
  width: 1rem;
  height: 2px;
  background: var(--gold);
}

.statement-list .is-strong {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
}

/* Aufzählung mit goldenen Punkten */
.dot-list {
  display: grid;
  gap: .55rem;
}

.dot-list li {
  position: relative;
  padding-left: 1.25rem;
}

.dot-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}


/* ==========================================================================
   04 LAYOUT-BAUSTEINE
   ========================================================================== */
.wrap {
  width: min(var(--wrap), 100% - 2.5rem);
  margin-inline: auto;
}

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

.section--compact {
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}

.section--paper {
  background: var(--paper);
}

.section--cream {
  background: var(--cream);
}

.section--warm {
  background: linear-gradient(135deg, var(--cream), var(--cream-deep));
}

.section--navy {
  background: var(--navy);
  color: var(--on-navy);
}

.section--navy h2,
.section--navy h3,
.section--navy strong {
  color: var(--white);
}

.section--navy .eyebrow {
  color: var(--sand);
}

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

.section-head h2 {
  margin-bottom: 0;
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .eyebrow {
  justify-content: center;
}

/* Zwei Spalten nebeneinander */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

/* Weisse Karte auf cremefarbenem Grund */
.card {
  background: var(--white);
  border: 1px solid var(--sand);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-rest);
}

/* Karte mit zwei Spalten: links die Überschrift, rechts der Text */
.card-split {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.75rem, 4vw, 3.5rem);
}

.card-split h2,
.card-split h3 {
  margin-bottom: 0;
}

.card-split p:last-child {
  margin-bottom: 0;
}

/* Der Markenname bleibt auf grossen Bildschirmen in einer Zeile */
.keep-together {
  white-space: nowrap;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

.actions--center {
  justify-content: center;
}


/* ==========================================================================
   05 BUTTONS UND LINKS
   ========================================================================== */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 52px;
  padding: .8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--transition),
    background-color var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0);
}

/* Gold: primäre Aktion (auswählen, kaufen) */
.button--gold {
  background: var(--gold);
  color: var(--navy);
}

.button--gold:hover {
  box-shadow: 0 12px 28px rgba(184, 154, 90, .35);
}

/* Navy: ruhige Hauptaktion */
.button--navy {
  background: var(--navy);
  color: var(--white);
}

.button--navy:hover {
  background: var(--navy-light);
}

/* Umriss: zweite Wahl */
.button--outline {
  background: transparent;
  border-color: rgba(21, 43, 60, .3);
  color: var(--navy);
}

.button--outline:hover {
  border-color: var(--gold);
  background: var(--white);
}

.section--navy .button--outline {
  border-color: rgba(255, 255, 255, .4);
  color: var(--white);
}

.section--navy .button--outline:hover {
  border-color: var(--gold);
  background: rgba(255, 255, 255, .08);
}

.button--small {
  min-height: 44px;
  padding: .6rem 1.15rem;
  font-size: .88rem;
}

.text-link {
  font-weight: 700;
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.text-link:hover {
  text-decoration-thickness: 3px;
}

.section--navy .text-link {
  color: var(--white);
}


/* ==========================================================================
   06 HEADER (bleibt oben stehen, Milchglas-Effekt)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(252, 250, 245, .82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}

/* Zustand nach dem ersten Scrollen (Klasse setzt main.js) */
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-rest);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
}

/* Kompass-Signet auf dunkler Scheibe */
.brand-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--navy);
}

.brand-mark img {
  width: 36px;
  height: 36px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.7vw, 1.75rem);
  font-size: .88rem;
  font-weight: 600;
}

.main-nav a {
  position: relative;
  padding: .5rem 0;
  white-space: nowrap;
  text-decoration: none;
  color: var(--navy);
}

/* Goldene Linie unter dem Menüpunkt (Hover und aktiver Abschnitt) */
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .15rem;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.main-nav a:hover::after,
.main-nav a.is-active::after {
  transform: scaleX(1);
}

.header-cta {
  flex: none;
  white-space: nowrap;
}


/* ==========================================================================
   07 HERO
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden; /* ältere Browser */
  overflow: clip;   /* schneidet den Zierkreis ab, ohne das mitlaufende Portrait zu blockieren */
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(4rem, 8vw, 7rem);
  background:
    radial-gradient(circle at 88% 12%, rgba(184, 154, 90, .12), transparent 30%),
    linear-gradient(135deg, var(--paper), var(--cream));
}

/* Feiner goldener Kreis als ruhiges Hintergrundelement */
.hero::after {
  content: "";
  position: absolute;
  right: -220px;
  bottom: -240px;
  width: 540px;
  height: 540px;
  border: 1px solid rgba(184, 154, 90, .22);
  border-radius: 50%;
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.hero-copy {
  max-width: 40rem;
}

.hero-lead {
  margin-bottom: 1.5em;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.2vw + 1rem, 1.7rem);
  line-height: 1.35;
  color: var(--navy);
}

/* Die zentrale Frage der Leserin */
.hero-question {
  margin: 1.5em 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--gold);
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.35;
  color: var(--navy);
}

/* Portrait im Bogenrahmen. Bleibt beim Lesen des Hero-Textes im Blick. */
.hero-visual {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  justify-self: end;
  width: min(100%, 440px);
  margin: .5rem 0 0;
}

.hero-frame {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 220px 220px 28px 28px;
  background: var(--sand);
  box-shadow: var(--shadow);
}

.hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kompass-Siegel am Bildrand */
.hero-seal {
  position: absolute;
  top: 9%;
  right: -16px;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: var(--shadow);
}

.hero-seal img {
  width: 86px;
  height: 86px;
}

/* Kleine Karte mit dem Leitgedanken */
.hero-note {
  position: absolute;
  left: -36px;
  bottom: 36px;
  max-width: 250px;
  padding: 1rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--sand);
  border-radius: var(--radius-small);
  box-shadow: var(--shadow);
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--navy);
}

.hero-note-label {
  display: block;
  margin-bottom: .4rem;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}


/* ==========================================================================
   08 WAS ANDERS IST (Bauzeichnung: Haus, Riss, Fundament)
   ========================================================================== */
.blueprint {
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--line-on-navy);
  border-radius: var(--radius-large);
  background-color: rgba(255, 255, 255, .04);
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 28px 28px;
}

.blueprint svg {
  width: 100%;
  height: auto;
}

/* Linien der Zeichnung */
.bp-line {
  fill: none;
  stroke: var(--sand);
  stroke-width: 1.5;
  stroke-opacity: .7;
}

.bp-line--soft {
  stroke-width: 1;
  stroke-opacity: .38;
}

.bp-line--strong {
  stroke-width: 2;
  stroke-opacity: .9;
}

/* Schraffierte Flächen (Fundament); die Füllung steht als Attribut im SVG */
.bp-hatched {
  stroke: var(--sand);
  stroke-width: 1.5;
  stroke-opacity: .7;
}

.bp-hatch {
  stroke: var(--sand);
  stroke-width: 1;
  stroke-opacity: .32;
}

/* Der Riss in Gold. Er zeichnet sich, sobald die Zeichnung sichtbar wird. */
.bp-crack {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.8s ease .5s;
}

.js-ready .blueprint:not(.is-visible) .bp-crack {
  stroke-dashoffset: 1;
}

.bp-focus {
  fill: rgba(184, 154, 90, .12);
  stroke: var(--gold);
  stroke-width: 1.2;
  stroke-dasharray: 4 5;
}

.bp-label {
  fill: var(--sand);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Die beiden Fragen */
.question-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
  margin-top: 1.75rem;
}

.question {
  margin: 0;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line-on-navy);
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, .04);
}

.question--key {
  border-color: var(--gold);
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--white);
}


/* ==========================================================================
   09 DREI SCHRITTE
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.step {
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
}

.step > :last-child {
  margin-bottom: 0;
}

.step-number {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.5rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--cream);
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--navy);
}

.step-questions {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--navy);
}


/* ==========================================================================
   10 WERKZEUG (Haarwurzelanalyse, Epigenetik)
   ========================================================================== */
.media-frame {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-large);
  background: var(--sand);
  box-shadow: var(--shadow);
}

.media-frame img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Hinweis: Abgrenzung zur medizinischen Diagnose */
.notice {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--sage);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  background: rgba(168, 176, 155, .18);
  font-size: .92rem;
  line-height: 1.55;
  color: var(--muted);
}

/* Karte "Der Hintergrund" (Aufbau: siehe .card-split) */
.background-card {
  margin-top: clamp(3rem, 6vw, 5rem);
}

.background-title {
  font-size: clamp(1.6rem, 1.4vw + 1.1rem, 2.2rem);
  line-height: 1.18;
}


/* ==========================================================================
   11 HALTUNG
   ========================================================================== */
/* Links die grosse Aussage, rechts der Text */
.manifesto-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.manifesto-grid .display {
  margin-bottom: 0;
}

.manifesto-grid .statement-list {
  margin-top: 1.25rem;
}

.closing-line {
  margin: 1.5rem 0 0;
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--navy);
}


/* ==========================================================================
   12 ANGEBOTE (das Zentrum der Kaufentscheidung)
   ========================================================================== */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.4vw, 2rem);
}

.offer {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top: 5px solid var(--offer-accent);
  transition: transform var(--transition), box-shadow var(--transition);
}

/* Karte hebt sich sanft an, der weiche Schatten verdichtet sich */
.offer:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* Feiner Farbakzent je Angebot (Linie oben und unter dem Titel) */
.offer--wellness { --offer-accent: var(--navy); }
.offer--slim     { --offer-accent: var(--sage); }
.offer--beauty   { --offer-accent: var(--gold); }
.offer--kids     { --offer-accent: var(--sand); }

.offer-media {
  overflow: hidden;
  background: var(--cream);
}

.offer-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 30%;
  transition: transform .8s ease;
}

.offer:hover .offer-media img {
  transform: scale(1.03);
}

.offer-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(1.25rem, 2.6vw, 2.4rem);
}

/* Der Text füllt die Karte, damit der Kaufbereich in allen Karten unten sitzt */
.offer-text {
  flex: 1;
  padding-bottom: .75rem;
}

.offer-title {
  margin-bottom: .9rem;
  font-size: clamp(1.8rem, 1.2vw + 1.4rem, 2.3rem);
}

.offer-title::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: .8rem;
  background: var(--offer-accent);
}

.offer-hook {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--navy);
}

/* Kaufbereich: jede Zeile ist ein direkter Link zum Checkout */
.buy-box {
  padding: 1.25rem;
  border-radius: var(--radius-small);
  background: var(--cream);
}

.buy-title {
  margin: 0 0 .85rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
}

.buy-list {
  display: grid;
  gap: .6rem;
}

.buy-option {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 56px;
  padding: .5rem .5rem .5rem 1.15rem;
  border: 1px solid var(--sand);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--navy);
  line-height: 1.2;
  text-decoration: none;
  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

.buy-option:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: var(--shadow-rest);
}

.buy-name {
  flex: 1;
  font-size: .98rem;
  font-weight: 700;
}

.buy-price {
  font-family: var(--serif);
  font-size: 1.2rem;
  white-space: nowrap;
}

.buy-arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  transition: transform var(--transition);
}

.buy-arrow svg {
  width: 18px;
  height: 18px;
}

.buy-option:hover .buy-arrow {
  transform: translateX(3px);
}

/* Pflicht-Hinweis unter den Kauf-Buttons */
.buy-note {
  margin: .9rem 0 0;
  font-size: .8rem;
  line-height: 1.4;
  text-align: center;
  color: var(--muted);
}

.offer-help {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  text-align: center;
  color: var(--muted);
}


/* ==========================================================================
   13 ÜBER MICH
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

/* Karte mit dem Signatursatz. Bleibt beim Lesen des Textes im Blick. */
.signature-card {
  position: sticky;
  top: calc(var(--header-height) + 1.5rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(620px, 78vh);
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
  border-radius: var(--radius-large);
  background: var(--navy);
  box-shadow: var(--shadow);
  color: var(--white);
}

.signature-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dunkler Verlauf, damit der Satz auf dem Bild gut lesbar ist */
.signature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(21, 43, 60, 0) 18%,
    rgba(21, 43, 60, .72) 55%,
    rgba(21, 43, 60, .96) 86%
  );
}

.signature-quote,
.signature-person {
  position: relative;
  z-index: 1;
}

.signature-quote {
  margin: 0 0 1.5rem;
}

.signature-quote::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: 1.25rem;
  background: var(--gold);
}

.signature-quote p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 1.6vw + 1.2rem, 2.4rem);
  line-height: 1.18;
}

.signature-person {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-size: .9rem;
  line-height: 1.4;
  color: var(--on-navy);
}

.signature-person img {
  width: 56px;
  height: 56px;
  border: 2px solid var(--gold);
  border-radius: 50%;
}

.signature-person strong {
  color: var(--white);
}

.about-copy h2 {
  margin-bottom: .75em;
}


/* ==========================================================================
   14 PASSUNG (helle Karte = passt, dunkle Karte = passt eher nicht)
   ========================================================================== */
.fit-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  align-items: start;
}

.fit-card {
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border-radius: var(--radius-card);
}

.fit-card h3 {
  margin-bottom: 0;
}

.fit-card--yes {
  background: var(--paper);
  box-shadow: var(--shadow);
  color: var(--text);
}

.fit-card--yes h3 {
  color: var(--navy);
}

.fit-card--no {
  border: 1px solid var(--line-on-navy);
  background: rgba(255, 255, 255, .04);
}

.fit-list {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.fit-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  align-items: start;
}

/* Häkchen und Kreuze */
.fit-list svg {
  width: 28px;
  height: 28px;
  margin-top: .05rem;
  padding: 5px;
  border-radius: 50%;
}

.fit-card--yes .fit-list svg {
  background: var(--sage);
  color: var(--navy);
}

.fit-card--no .fit-list svg {
  border: 1px solid var(--sand);
  color: var(--sand);
}

.fit-closer {
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-on-navy);
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--sand);
}


/* ==========================================================================
   15 INNER COMPASS
   ========================================================================== */
.compass-panel {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  margin: 0;
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--radius-large);
  background:
    radial-gradient(circle at 50% 42%, rgba(184, 154, 90, .2), transparent 60%),
    var(--navy);
  box-shadow: var(--shadow);
  text-align: center;
}

.compass-panel img {
  width: min(100%, 340px);
}

.compass-panel figcaption {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--sand);
}


/* ==========================================================================
   16 WISSEN
   ========================================================================== */
/* Aufbau: siehe .card-split */
.knowledge-card {
  border: 1px solid var(--sand);
  border-radius: var(--radius-large);
  background: var(--cream);
}


/* ==========================================================================
   17 FAQ UND AUFKLAPPBEREICHE
   Grundlage sind die HTML-Elemente <details> und <summary>.
   main.js sorgt für die weiche Bewegung und dafür, dass im FAQ nur eine Frage offen ist.
   ========================================================================== */
.details-panel {
  overflow: hidden;
}

summary {
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

.faq {
  max-width: 54rem;
  margin-inline: auto;
  padding: .5rem clamp(1.25rem, 3vw, 2.5rem);
}

.faq-item + .faq-item {
  border-top: 1px solid var(--line);
}

.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.4rem 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--navy);
}

/* Der Fragetext darf schrumpfen und umbrechen, das Plus-Zeichen behält seinen Platz */
.faq-item > summary span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Plus-Zeichen, dreht sich beim Öffnen zum Kreuz */
.faq-item > summary svg {
  flex: none;
  width: 38px;
  height: 38px;
  padding: 9px;
  border: 1px solid var(--sand);
  border-radius: 50%;
  color: var(--navy);
  transition:
    transform var(--transition),
    background-color var(--transition),
    border-color var(--transition);
}

.faq-item > summary:hover svg {
  border-color: var(--gold);
}

.faq-item[open]:not(.is-closing) > summary svg {
  transform: rotate(45deg);
  border-color: var(--gold);
  background: var(--gold);
}

.faq-item .details-panel p {
  max-width: 44rem;
  margin-bottom: 1.5rem;
}

.faq-item .details-panel .actions {
  margin: 0 0 1.75rem;
}

/* "Mehr über mich" */
.more {
  margin-top: 2rem;
}

.more-label-open {
  display: none;
}

.more[open]:not(.is-closing) .more-label-open {
  display: inline;
}

.more[open]:not(.is-closing) .more-label-closed {
  display: none;
}

.more-content {
  padding-top: 2rem;
}

.more-content p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   18 KONTAKT (Abschluss)
   ========================================================================== */
.final-cta {
  background:
    radial-gradient(circle at 50% 0%, rgba(184, 154, 90, .16), transparent 55%),
    var(--navy);
  text-align: center;
}

.final-cta-inner {
  max-width: 52rem;
}

.final-cta .eyebrow {
  justify-content: center;
}

.final-cta p {
  max-width: 44rem;
  margin-inline: auto;
}

.contact-line {
  margin-top: 1.75rem;
  margin-bottom: 0;
  font-size: .95rem;
  color: var(--on-navy-muted);
}


/* ==========================================================================
   19 NEWSLETTER
   ========================================================================== */
.newsletter {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(1.5rem, 4vw, 3.25rem);
}

.newsletter p:last-child {
  margin-bottom: 0;
}

.field-label {
  display: block;
  margin-bottom: .45rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--navy);
}

.field {
  width: 100%;
  min-height: 54px;
  padding: 0 1rem;
  border: 1px solid var(--sand);
  border-radius: 12px;
  background: var(--white);
  color: var(--navy);
  font: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.field::placeholder {
  color: rgba(21, 43, 60, .45);
}

.field:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 154, 90, .28);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 1rem 0 1.25rem;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--muted);
  cursor: pointer;
}

.check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: .1rem 0 0;
  accent-color: var(--navy);
}

.newsletter-form .button {
  width: 100%;
}

/* Rückmeldung nach dem Absenden (Text setzt main.js) */
.form-status {
  margin: 1rem 0 0;
  font-size: .9rem;
  line-height: 1.5;
}

.form-status:empty {
  display: none;
}

.form-status.is-success {
  padding: .85rem 1rem;
  border-left: 3px solid var(--sage);
  border-radius: 0 12px 12px 0;
  background: rgba(168, 176, 155, .2);
  color: var(--navy);
}


/* ==========================================================================
   20 FOOTER
   ========================================================================== */
.site-footer {
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
  background: var(--navy-deep);
  color: var(--on-navy-muted);
  font-size: .95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2.5rem;
  align-items: end;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 .75rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--white);
}

.site-footer .brand-mark {
  border: 1px solid rgba(184, 154, 90, .5);
}

.footer-name {
  margin: 0 0 1rem;
}

.footer-tagline {
  margin: 0;
  line-height: 1.6;
  color: var(--sand);
}

.footer-links {
  display: grid;
  gap: .75rem;
  font-size: .88rem;
}

.footer-links nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .25rem 1.5rem;
}

.footer-links a {
  padding: .35rem 0;
  text-decoration: none;
  transition: color var(--transition);
}

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

.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-on-navy);
  font-size: .82rem;
}

.footer-bottom p {
  margin: 0;
}


/* ==========================================================================
   21 MOBILE LEISTE (nur auf dem Smartphone, siehe Abschnitt 24)
   ========================================================================== */
.mobile-bar {
  display: none;
}


/* ==========================================================================
   22 BEWEGUNG
   Scroll-Reveal: main.js setzt .js-ready auf <html> und .is-visible auf Elemente
   mit der Klasse .reveal, sobald sie in den sichtbaren Bereich kommen.
   Ohne JavaScript bleibt alles sichtbar.
   ========================================================================== */
@keyframes einblenden {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes atmen {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

.js-ready .reveal {
  opacity: 0;
}

.js-ready .reveal.is-visible {
  opacity: 1;
  animation: einblenden .8s ease backwards;
}

/* Karten in einer Reihe erscheinen leicht versetzt */
.steps .reveal:nth-child(2),
.offer-grid .reveal:nth-child(even),
.fit-grid .reveal:nth-child(2) {
  animation-delay: .12s;
}

.steps .reveal:nth-child(3) {
  animation-delay: .24s;
}

/* Der Hero blendet beim Laden sanft ein */
.hero-copy {
  animation: einblenden .9s ease backwards;
}

.hero-visual {
  animation: einblenden .9s ease .15s backwards;
}

/* Der Kompass atmet ruhig */
.hero-seal img,
.compass-panel img {
  animation: atmen 8s ease-in-out infinite;
}

/* Wer Bewegung im System reduziert hat, bekommt eine ruhige Seite */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .js-ready .reveal {
    opacity: 1;
  }
}


/* ==========================================================================
   23 RECHTSSEITEN UND 404 (impressum.html, datenschutz.html, agb.html, 404.html)
   ========================================================================== */
.legal {
  padding-block: clamp(3rem, 7vw, 6rem);
}

.legal .wrap {
  max-width: 46rem;
}

.legal h1 {
  font-size: clamp(2.2rem, 3vw + 1rem, 3.4rem);
}

.legal h2 {
  margin-top: 2.5rem;
  font-size: 1.5rem;
}

.legal-notice {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--sand);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-small);
  background: var(--white);
}

.legal-notice p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   24 KLEINERE BILDSCHIRME
   ========================================================================== */

/* Unter 1080px: Menüpunkte ausblenden. Signet und "Termin & Beratung" bleiben stehen. */
@media (max-width: 1080px) {
  .main-nav {
    display: none;
  }
}

/* Unter 930px: alles einspaltig */
@media (max-width: 930px) {
  .hero-grid,
  .split,
  .about-grid,
  .fit-grid,
  .newsletter,
  .card-split,
  .manifesto-grid,
  .steps {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    position: relative;
    top: auto;
    justify-self: center;
    width: min(100%, 400px);
    margin-top: 1rem;
  }

  /* Text vor der Bauzeichnung */
  .section--navy .blueprint {
    order: 2;
  }

  .signature-card {
    position: relative;
    top: auto;
    min-height: 460px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .footer-links nav {
    justify-content: flex-start;
  }
}

/* Unter 760px: Smartphone */
@media (max-width: 760px) {
  :root {
    --header-height: 64px;
  }

  .header-inner {
    gap: .6rem;
  }

  .brand {
    gap: .5rem;
    font-size: .6rem;
    letter-spacing: .05em;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
  }

  .brand-mark img {
    width: 32px;
    height: 32px;
  }

  .header-cta {
    min-height: 44px;
    padding-inline: .8rem;
    font-size: .78rem;
  }

  .hero-seal {
    right: -8px;
    width: 86px;
    height: 86px;
  }

  .hero-seal img {
    width: 70px;
    height: 70px;
  }

  .hero-note {
    left: -8px;
    bottom: 24px;
    max-width: 220px;
    font-size: 1.05rem;
  }

  .actions .button {
    flex: 1 1 100%;
  }

  .offer-grid,
  .question-pair {
    grid-template-columns: 1fr;
  }

  .buy-box {
    padding: 1rem;
  }

  .buy-option {
    padding-left: 1rem;
  }

  .buy-price {
    font-size: 1.1rem;
  }

  .keep-together {
    white-space: normal;
  }

  /* Leiste im Daumenbereich. Sichtbar wird sie über die Klasse .is-visible (main.js). */
  .mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    gap: .6rem;
    padding: .7rem 1.25rem calc(.7rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(252, 250, 245, .92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    visibility: hidden;
    transform: translateY(110%);
    transition: transform .35s ease, visibility 0s linear .35s;
  }

  .mobile-bar.is-visible {
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .mobile-bar .button {
    min-height: 48px;
    padding-inline: 1rem;
    font-size: .9rem;
  }

  .mobile-bar .button--gold {
    flex: 1;
  }
}

/* Sehr schmale Geräte: der Schriftzug weicht, das Signet bleibt */
@media (max-width: 379px) {
  .brand-name {
    display: none;
  }
}