/* =========================================================
   Praxis Michael Baumhauer — Design Tokens
   Ruhig, geerdet, unaufgeregt. Kein Hypnose-Kitsch (Spiralen,
   Violett-Mystik) — stattdessen: Atem, Ruhe, Rhein-Erdung.
   ========================================================= */

/* =========================================================
   Lokal gehostete Schriften (kein Nachladen von Google Fonts —
   dadurch wird keine Besucher-IP an Google übertragen)
   ========================================================= */
@font-face{
  font-family: "Fraunces";
  src: url("fonts/Fraunces-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Fraunces";
  src: url("fonts/Fraunces-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root{
  /* Farben */
  --ink:        #212e2a;   /* tiefes Kiefer-Anthrazit, warm */
  --ink-soft:   #4a5852;
  --paper:      #eae7dc;   /* warmer Stein-Ton, kein reines Creme */
  --paper-raised: #f5f3ea;
  --line:       #d8d3c3;
  --teal:       #3c5c52;   /* Primärakzent: gedecktes Waldteal */
  --teal-deep:  #223a33;
  --ochre:      #ab7f3f;   /* Sekundärakzent: erdiges Ocker */
  --ochre-soft: #d9c39b;
  --white:      #fffdf8;

  /* Typografie */
  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body:    "Source Sans 3", "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", monospace;

  --step-0: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
  --step-3: clamp(2.5rem, 2rem + 2.2vw, 4rem);

  --maxw: 1120px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: var(--teal-deep); }
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--ochre);
  outline-offset: 3px;
}

h1,h2,h3{
  font-family: var(--font-display);
  color: var(--teal-deep);
  line-height: 1.1;
  margin: 0 0 0.5em;
  font-weight: 600;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
h1{ font-size: var(--step-3); }
h2{ font-size: var(--step-2); }
h3{ font-size: var(--step-1); }

.eyebrow{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--teal);
}

.wrap{
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ---------- Header / Navigation ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  border-bottom: 1px solid var(--line);
}
.site-header::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background: rgba(234,231,220,0.92);
  backdrop-filter: blur(6px);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-block: 0.9rem;
  gap: 1rem;
}
.brand{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--teal-deep);
  text-decoration:none;
  line-height:1.2;
}
.brand small{
  display:block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  text-transform: uppercase;
  font-weight: 400;
}

nav.main-nav{ display:flex; }
nav.main-nav > ul{
  list-style:none; display:flex; gap: 1.6rem;
  margin:0; padding:0; align-items:center;
}
nav.main-nav a{
  text-decoration:none;
  color: var(--ink);
  font-size: 0.95rem;
  padding: 0.4rem 0.1rem;
  border-bottom: 2px solid transparent;
}
nav.main-nav a:hover, nav.main-nav a.active{
  border-bottom-color: var(--ochre);
  color: var(--teal-deep);
}
nav.main-nav li.has-sub{ position:relative; }
nav.main-nav .sub{
  list-style:none; margin:0; padding: 0.5rem;
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background: var(--white);
  border:1px solid var(--line);
  border-radius: 8px;
  min-width: 240px;
  box-shadow: 0 12px 28px rgba(33,46,42,0.12);
  opacity:0; visibility:hidden; translate: 0 6px;
  transition: all 0.15s ease;
}
nav.main-nav li.has-sub:hover .sub,
nav.main-nav li.has-sub:focus-within .sub{
  opacity:1; visibility:visible; translate: 0 0;
}
nav.main-nav .sub a{ display:block; padding: 0.5rem 0.7rem; border-bottom:none; border-radius:5px; }
nav.main-nav .sub a:hover{ background: var(--paper); }

.nav-toggle{ display:none; }

/* ---------- Hero ---------- */
.hero{
  padding-block: clamp(2.5rem, 6vw, 5rem);
  position:relative;
  overflow:hidden;
}
.hero.hero-night, .hero.hero-bloom, .hero.hero-branch, .hero.hero-breathe{
  padding-bottom: clamp(90px, 14vw, 150px);
}
.hero .wrap{
  display:grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 3rem;
  align-items:center;
}
/* Grid-Items dürfen per Default nicht unter ihre Inhalts-Mindestbreite
   schrumpfen (initial min-width:auto) – ein einzelnes langes Wort in der
   Überschrift (z.B. "Teilnahmebedingungen") kann dadurch die Spalte über
   die Viewport-Breite hinaus aufblähen und den Text nach rechts abschneiden. */
.hero .wrap > *{ min-width: 0; }
.hero h1{ margin-bottom:0.4em; }
.hero .lede{ font-size: 1.15rem; color: var(--ink-soft); max-width: 46ch; }

/* Signature element: der "Atemkreis" — ein sich langsam
   weitender/schließender Ring, der die Beruhigung des
   vegetativen Nervensystems andeutet. Kein Spiralklischee. */
.breath{
  width: min(260px, 60vw);
  aspect-ratio: 1;
  margin-inline: auto;
  position: relative;
}
.breath svg{ width:100%; height:100%; }
.breath [class^="ring-"]{
  fill:none;
  stroke: #5f8b7a;
  stroke-width: 1.4;
  transform-origin: 100px 100px;
  animation: breathe 18s ease-in-out infinite;
  opacity: var(--ring-op);
}
.breath .ring-1{ --ring-op:0.42; --peak-scale:1.55; }
.breath .ring-2{ --ring-op:0.3;  --peak-scale:1.40; }
.breath .ring-3{ --ring-op:0.2;  --peak-scale:1.30; }
.breath .core{ opacity:0.9; }
.breath figcaption{
  text-align:center; margin-top:0.7rem;
  font-family: var(--font-display); font-weight:600; font-variant: small-caps;
  font-size:0.95rem; letter-spacing:0.14em; color: var(--teal-deep);
}
@keyframes breathe{
  0%, 100% { transform: scale(1); opacity: var(--ring-op); }
  33.3%    { transform: scale(var(--peak-scale)); opacity: calc(var(--ring-op) * 1.4); }
}
@media (prefers-reduced-motion: reduce){
  .breath circle{ animation: none; }
}

/* ---------- Hero-Variante: Nacht/Mond (Schlafstörungen-Seite) ---------- */
.hero.hero-night{
  background: linear-gradient(180deg, #16261f 0%, #223a33 55%, #2f4d43 100%);
  color: var(--paper);
}
.hero.hero-night .eyebrow{ color: var(--ochre-soft); }
.hero.hero-night h1{ color: var(--white); }
.hero.hero-night .lede{
  color: rgba(255,253,248,0.85);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  max-width: 18ch;
}
.hero.hero-night .wrap{ position:relative; z-index:2; }

.hero-stars{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-stars .star{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:#e8dfc2;
}

.hero-night .moon{ position:relative; width:min(200px,44vw); aspect-ratio:1; margin-inline:auto; }
.hero-night .moon-disc{
  position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle at 38% 35%, #f6efd8 0%, #ead9a8 55%, #d8c489 100%);
  box-shadow: 0 0 70px 22px rgba(230,210,150,0.18);
}
.hero-night .moon-shadow{
  position:absolute; top:-6%; left:14%; width:76%; height:76%; border-radius:50%;
  background:#1a2e27;
}

.hero-waves{ position:absolute; left:0; right:0; bottom:0; height:clamp(70px,14vw,150px); z-index:1; line-height:0; }
.hero-waves .wave{ position:absolute; left:0; bottom:0; width:100%; }
.hero-waves .wave-1{ height:130%; }
.hero-waves .wave-2{ height:110%; }
.hero-waves .wave-3{ height:80%; }

.hero-night .wave-1{ fill:#3f6558; opacity:.35; }
.hero-night .wave-2{ fill:#2c4a40; opacity:.55; }
.hero-night .wave-3{ fill:#16261f; }

@media (max-width:820px){
  .hero-night .moon{ order:-1; width:130px; }
}

/* ---------- Hero-Variante: Sonne/Blüten (Kinderwunsch-Seite) ---------- */
.hero.hero-bloom{
  background: linear-gradient(180deg, #fdf8ee 0%, #f6ecd6 45%, #eddcb8 100%);
  color: #3a2a1a;
}
.hero.hero-bloom .eyebrow{ color: var(--ochre); }
.hero.hero-bloom h1{ color: #3a2a1a; }
.hero.hero-bloom .lede{
  color: rgba(58,42,26,0.72);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  max-width: 20ch;
}
.hero.hero-bloom .wrap{ position:relative; z-index:2; }

.hero-blooms{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-blooms .bloom{ position:absolute; }
.hero-blooms .bloom-a{ fill:#e8a97a; }
.hero-blooms .bloom-b{ fill:#d98c5f; }

.sun{
  position:relative; width:min(200px,44vw); aspect-ratio:1; margin-inline:auto;
  border-radius:50%;
  filter: blur(1px);
}
.hero-bloom .sun{
  background: radial-gradient(circle at 35% 30%, #fff8e8 0%, #fbe9bf 60%, #f3d896 100%);
  box-shadow: 0 0 60px 20px rgba(251,233,175,0.35);
}

.hero-bloom .wave-1{ fill:#f0dcb5; opacity:.5; }
.hero-bloom .wave-2{ fill:#e9cd9a; opacity:.7; }
.hero-bloom .wave-3{ fill:#dcb87e; }

@media (max-width:820px){
  .hero-bloom .sun{ order:-1; width:130px; }
}

/* ---------- Hero-Variante: Sonne/Ast (Erweitertes Angebot-Seite) ---------- */
.hero.hero-branch{
  background: linear-gradient(180deg, #fdf8ee 0%, #f3ecd8 45%, #e6ddc0 100%);
  color: #3a2f1e;
}
.hero.hero-branch .eyebrow{ color: var(--ochre); }
.hero.hero-branch h1{ color: #3a2f1e; }
.hero.hero-branch .lede{
  color: rgba(58,47,30,0.72);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  max-width: 20ch;
}
.hero.hero-branch .wrap{ position:relative; z-index:2; }

.hero-branch .sun{
  background: radial-gradient(circle at 38% 34%, #fff9e9 0%, #fbedc1 55%, #f2dda0 100%);
  box-shadow: 0 0 60px 20px rgba(242,221,160,0.35);
}

.hero-dots{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-dots .dot{ position:absolute; border-radius:50%; }
.hero-branch .dot{ background:#c9a35c; }

.branch-visual{ position:relative; width:min(240px,50vw); margin-inline:auto; }
.branch-visual .sun{ position:absolute; top:-10%; right:-8%; width:55%; z-index:-1; }
.branch{ width:100%; margin-inline:auto; }
.branch svg{ width:100%; height:auto; display:block; }
.branch .branch-line{ fill:none; stroke:#8a6a3a; stroke-width:4; stroke-linecap:round; }
.branch .leaf-a{ fill:#7c9a5e; }
.branch .leaf-b{ fill:#a3b876; }

.hero-branch .wave-1{ fill:#e6d7ac; opacity:.45; }
.hero-branch .wave-2{ fill:#dcc890; opacity:.6; }
.hero-branch .wave-3{ fill:#c9ac6d; }

@media (max-width:820px){
  .branch-visual{ order:-1; width:170px; }
}

/* ---------- Hero-Variante: Atemringe (Startseite) ---------- */
.hero.hero-breathe{
  background: linear-gradient(180deg, #f7faf6 0%, #e9f1eb 45%, #d9e8de 100%);
}

.hero-breathe .dot{ background:#6fa08c; }

.hero-breathe .wave-1{ fill:#cfe3d5; opacity:.45; }
.hero-breathe .wave-2{ fill:#b8d4c1; opacity:.6; }
.hero-breathe .wave-3{ fill:#8fb4a0; }

/* ---------- Content ---------- */
main{ padding-block: 1rem 3rem; }
.section{ padding-block: 2.4rem; }
.section + .section{ border-top: 1px solid var(--line); }
.prose p{ margin: 0 0 1.1em; max-width: 68ch; }
.prose ul{ max-width: 68ch; padding-left: 1.2em; }
.prose li{ margin-bottom: 0.4em; }

blockquote.pull{
  margin: 1.6rem 0 2rem;
  padding: 1.2rem 1.5rem;
  border-left: 3px solid var(--ochre);
  background: var(--paper-raised);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--teal-deep);
  border-radius: 0 8px 8px 0;
}
blockquote.pull cite{
  display:block; margin-top:0.5rem;
  font-family: var(--font-mono); font-style:normal;
  font-size: 0.7rem; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--ink-soft);
}

.note{
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  max-width: 68ch;
  font-size: 0.95rem;
}

.card-grid{
  display:grid; gap:1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(230px,1fr));
  margin-block: 1.5rem;
}
.card{
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.4rem;
}
.card h3{ margin-bottom:0.35em; font-size:1.05rem; }
.card p{ margin:0; color: var(--ink-soft); font-size:0.95rem; }

.table-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.prices{
  width:100%; border-collapse: collapse; margin-block: 1.2rem;
  max-width: 60ch;
}
table.prices caption{ text-align:left; font-family: var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); margin-bottom:0.6rem;}
table.prices th{
  text-align:left; font-family: var(--font-mono); text-transform:uppercase;
  font-size:0.7rem; letter-spacing:0.08em; color: var(--ink-soft);
  border-bottom: 1px solid var(--line); padding: 0.5rem 0.4rem;
}
table.prices td{ padding: 0.65rem 0.4rem; border-bottom: 1px solid var(--line); }
table.prices tr:last-child td{ border-bottom:none; }
table.prices td:last-child{ text-align:right; font-variant-numeric: tabular-nums; white-space:nowrap; }

.img-banner{
  width:100%; border-radius:14px; overflow:hidden; margin: 0.5rem 0 2rem;
}
.img-banner img{ width:100%; height: min(360px, 42vw); object-fit:cover; }
.img-banner figcaption{
  font-family: var(--font-mono); font-size:0.7rem; letter-spacing:0.08em;
  text-transform:uppercase; color: var(--ink-soft); margin-top:0.5rem;
}

.cert-row{
  display:flex; flex-wrap:wrap; gap:1.1rem; align-items:center;
  margin: 1rem 0 2rem;
}
.cert-row img{
  height:60px; width:auto;
  background: var(--white); padding:8px;
  border:1px solid var(--line); border-radius:8px;
}

.btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  background: var(--teal-deep); color: var(--white);
  text-decoration:none; padding: 0.75rem 1.3rem;
  border-radius: 999px; font-size:0.95rem;
  border: 1px solid var(--teal-deep);
  transition: background .15s ease;
}
.btn:hover{ background: var(--teal); }
.btn.ghost{
  background:transparent; color: var(--teal-deep);
}
.btn.ghost:hover{ background: var(--paper-raised); }

/* ---------- Contact band (auf jeder Seite) ---------- */
.contact-band{
  background: var(--teal-deep);
  color: var(--paper);
}
.contact-band .wrap{
  padding-block: 2.6rem;
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap: 2rem;
  align-items:center;
}
.contact-band img.portrait{
  width: 96px; height:96px; border-radius:50%;
  object-fit:cover; border: 2px solid var(--ochre-soft);
}
.contact-band h2{ color: var(--white); font-size:1.3rem; margin-bottom:0.2em; }
.contact-band .role{ font-size:0.85rem; color: var(--ochre-soft); font-style:italic; margin-bottom:0.8em; }
.contact-band a{ color: var(--paper); }
.contact-band .details p{ margin:0 0 0.35em; font-size:0.92rem; }
.contact-band .details strong{ color: var(--ochre-soft); font-weight:500; }
.badges{ display:flex; gap:1.1rem; align-items:center; flex-wrap:wrap; }
.badges img{
  height:84px; width:auto;
  background: var(--white);
  border-radius: 10px;
  padding: 6px;
  flex-shrink:0;
}
.badges-text{ display:flex; flex-direction:column; gap:0.3rem; max-width:36ch; }
.badges-text strong{
  font-family: var(--font-display);
  font-size:1.05rem; font-weight:600;
  line-height:1.3;
  color: var(--white);
}
.badges-text strong a{
  color: var(--ochre-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.badges-text strong a:hover{ color: var(--white); }
.badges-text small{ color: var(--paper); opacity:0.65; font-size:0.8rem; }

/* ---------- Kontaktformular ---------- */
form.contact-form{ max-width: 60ch; margin-top: 1.5rem; }
form.contact-form .field{ margin-bottom: 1.2rem; }
form.contact-form label{
  display:block; font-size:0.88rem; font-weight:600;
  color: var(--teal-deep); margin-bottom:0.35rem;
}
form.contact-form input[type="text"],
form.contact-form input[type="email"],
form.contact-form select,
form.contact-form textarea{
  width:100%; font: inherit; color: var(--ink);
  background: var(--white); border: 1px solid var(--line);
  border-radius: 8px; padding: 0.65rem 0.8rem;
}
form.contact-form textarea{ resize: vertical; min-height: 8rem; }
form.contact-form input:focus, form.contact-form select:focus, form.contact-form textarea:focus{
  outline: 2px solid var(--ochre); outline-offset:1px; border-color: var(--ochre);
}
.checkbox-field label{
  display:flex; gap:0.6rem; align-items:flex-start; font-weight:400; font-size:0.9rem; color: var(--ink-soft);
}
.checkbox-field input{ margin-top:0.25rem; }
.hp-field{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
/* Zweites Honeypot-Feld, absichtlich anders versteckt (opacity/height statt
   Off-Screen-Positionierung) als .hp-field, damit Bots, die nur nach einer
   Versteck-Technik suchen, nicht beide Felder erkennen. */
.hp-field-alt{ opacity:0; height:0; width:0; overflow:hidden; pointer-events:none; margin:0; }
.captcha-figure{ display:block; margin:0.3rem 0 0.6rem; }
.captcha-figure rect{ fill: var(--teal-deep); }

.form-status{
  display:none; margin: 1rem 0; padding: 0.8rem 1rem;
  border-radius: 8px; font-size:0.92rem;
}
.form-status.visible{ display:block; }
.form-status.success{ background:#e4efe6; color:#1f4a2c; border:1px solid #b6d6bd; }
.form-status.error{ background:#f6e6e2; color:#7a2e1c; border:1px solid #e3b7a8; }

button.btn[disabled]{ opacity:0.6; cursor:progress; }

/* ---------- Footer ---------- */
footer.site-footer{
  background: var(--ink);
  color: var(--paper);
  font-size: 0.85rem;
}
footer.site-footer .wrap{
  padding-block: 1.4rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem;
}
footer.site-footer a{ color: var(--ochre-soft); }

/* ---------- Mobile ---------- */
@media (max-width: 820px){
  .hero .wrap{ grid-template-columns: 1fr; }
  .hero .breath{ order:-1; width: 160px; }
  .hero .hypno-focus, .hero .body-flow, .hero .price-steps, .hero .about-portrait, .hero .contact-rings, .hero .legal-doc{ order:-1; width: 140px; }
  .site-header .wrap{ flex-wrap:nowrap; }
  .brand{ font-size:1.05rem; }
  .brand small{ font-size:0.6rem; }
  nav.main-nav{
    position: fixed; inset: 64px 0 0 0;
    background: var(--paper);
    flex-direction:column;
    padding: 1.2rem 1.5rem;
    transform: translateY(-110%);
    transition: transform .2s ease;
    overflow-y:auto;
  }
  nav.main-nav.open{ transform: translateY(0); }
  nav.main-nav > ul{ flex-direction:column; align-items:flex-start; gap:0; width:100%; }
  nav.main-nav > ul > li{ width:100%; border-bottom:1px solid var(--line); }
  nav.main-nav a{ display:block; padding:0.9rem 0.1rem; min-height:44px; }
  nav.main-nav .sub{
    position:static; transform:none; opacity:1; visibility:visible;
    box-shadow:none; border:none; display:none; padding-left:1rem;
  }
  nav.main-nav li.has-sub.open .sub{ display:block; }
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; flex:none; border-radius:8px;
    border:1px solid var(--line); background:var(--paper-raised);
    font-size:1.1rem; cursor:pointer;
  }
  .contact-band .wrap{ grid-template-columns: 1fr; text-align:center; }
  .contact-band .wrap > *{ margin-inline:auto; }
  footer.site-footer .wrap{ flex-direction:column; text-align:center; }

  table.prices{ font-size:0.88rem; }
  table.prices td, table.prices th{ padding:0.5rem 0.3rem; }

  .btn{ width:100%; justify-content:center; }
}

@media (max-width: 380px){
  h1{ font-size: 1.9rem; }
  .wrap{ padding-inline: 1.1rem; }
}

/* ---------- Hero-Grafik: Fokusringe (Hypnotherapie-Seite) ---------- */
.hypno-focus{ width:min(230px,50vw); margin-inline:auto; text-align:center; }
.hypno-focus svg{ width:100%; height:auto; display:block; }
.hypno-focus .ring{
  fill:none; stroke: var(--teal); stroke-width:1.4;
  transform-origin:100px 100px; animation: breathe 18s ease-in-out infinite;
  opacity: var(--ring-op);
}
.hypno-focus .core{ fill: var(--ochre); opacity:0.9; }
.hypno-focus figcaption{
  font-family: var(--font-display); font-weight:600; font-variant: small-caps;
  font-size:0.9rem; letter-spacing:0.14em; color: var(--teal-deep); margin-top:0.6rem;
}
@media (prefers-reduced-motion: reduce){
  .hypno-focus .ring{ animation:none; }
}

/* ---------- Hero-Grafik: Fluss-Linie (Körperarbeit-Seite) ---------- */
.body-flow{ width:min(230px,50vw); margin-inline:auto; text-align:center; }
.body-flow svg{ width:100%; height:auto; display:block; }
.body-flow .flow-line{
  fill:none; stroke: var(--teal); stroke-width:2;
  stroke-dasharray:1 9; stroke-linecap:round;
  animation: flowmove 4s linear infinite;
}
.body-flow .node{ animation: nodepulse 6s ease-in-out infinite; }
.body-flow figcaption{
  font-family: var(--font-display); font-weight:600; font-variant: small-caps;
  font-size:0.9rem; letter-spacing:0.14em; color: var(--teal-deep); margin-top:0.6rem;
}
@keyframes flowmove{ 0%,100%{ stroke-dashoffset:0; } 50%{ stroke-dashoffset:-14; } }
@keyframes nodepulse{ 0%,100%{ r:6; opacity:0.85; } 50%{ r:8; opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .body-flow .flow-line, .body-flow .node{ animation:none; }
}

/* ---------- Hero-Grafik: Preisstufen (Preise-Seite) ---------- */
.price-steps{ width:min(230px,50vw); margin-inline:auto; text-align:center; }
.price-steps svg{ width:100%; height:auto; display:block; }
.price-steps .baseline{ stroke: var(--line); stroke-width:2; }
.price-steps .step{
  fill:none; stroke: var(--teal); stroke-width:2;
  animation: settle 6s ease-in-out infinite;
}
.price-steps .step-fill{ fill: var(--ochre); stroke:none; opacity:0.9; }
.price-steps figcaption{
  font-family: var(--font-display); font-weight:600; font-variant: small-caps;
  font-size:0.9rem; letter-spacing:0.14em; color: var(--teal-deep); margin-top:0.6rem;
}
@keyframes settle{ 0%,100%{ transform:translateY(0); opacity:0.9; } 50%{ transform:translateY(-4px); opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .price-steps .step{ animation:none; }
}

/* ---------- Hero-Grafik: Portrait (Über mich-Seite) ---------- */
.about-portrait{ width:min(220px,50vw); margin-inline:auto; text-align:center; }
.about-portrait .ring{
  position:relative; width:100%; aspect-ratio:1; border-radius:50%; padding:6px;
  background: conic-gradient(from 0deg, var(--teal), var(--ochre), var(--teal));
}
.about-portrait .frame{
  width:100%; height:100%; border-radius:50%; overflow:hidden; border:4px solid var(--paper);
}
.about-portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-portrait figcaption{
  font-family: var(--font-display); font-weight:600; font-variant: small-caps;
  font-size:0.9rem; letter-spacing:0.14em; color: var(--teal-deep); margin-top:0.7rem;
}

/* ---------- Hero-Grafik: Ringe im Austausch (Kontakt-Seite) ---------- */
.contact-rings{ width:min(220px,50vw); margin-inline:auto; text-align:center; }
.contact-rings svg{ width:100%; height:auto; display:block; overflow:visible; }
.contact-rings .ring-a{
  fill:none; stroke: var(--teal); stroke-width:1.6; opacity:0.7;
  transform-origin:82px 80px; animation: drift-a 9s ease-in-out infinite;
}
.contact-rings .ring-b{
  fill:none; stroke: var(--ochre); stroke-width:1.6; opacity:0.7;
  transform-origin:118px 80px; animation: drift-b 9s ease-in-out infinite;
}
.contact-rings .core{ fill: var(--teal); animation: softglow 9s ease-in-out infinite; }
.contact-rings figcaption{
  font-family: var(--font-display); font-weight:600; font-variant: small-caps;
  font-size:0.9rem; letter-spacing:0.14em; color: var(--teal-deep); margin-top:0.7rem;
}
@keyframes drift-a{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(5px); } }
@keyframes drift-b{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-5px); } }
@keyframes softglow{ 0%,100%{ opacity:0.5; } 50%{ opacity:0.85; } }
@media (prefers-reduced-motion: reduce){
  .contact-rings .ring-a, .contact-rings .ring-b, .contact-rings .core{ animation:none; }
}

/* ---------- Hero-Grafik: Dokument mit Siegel (Rechtliches-Seiten) ---------- */
.legal-doc{ width:min(180px,45vw); margin-inline:auto; text-align:center; }
.legal-doc svg{ width:100%; height:auto; display:block; }
.legal-doc .doc-frame{ fill:none; stroke: var(--teal); stroke-width:1.8; }
.legal-doc .doc-line{ stroke: var(--teal); stroke-width:1.6; opacity:0.6; }
.legal-doc .seal{ animation: stampfade 8s ease-in-out infinite; }
.legal-doc .seal-privacy{ fill: var(--ochre); opacity:0.9; }
.legal-doc .seal-imprint{ fill:none; stroke: var(--ochre); stroke-width:2; opacity:0.9; }
.legal-doc .seal-terms{ fill:none; stroke: var(--ochre); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.legal-doc figcaption{
  font-family: var(--font-display); font-weight:600; font-variant: small-caps;
  font-size:0.85rem; letter-spacing:0.14em; color: var(--teal-deep); margin-top:0.6rem;
}
@keyframes stampfade{ 0%,100%{ opacity:0.75; } 50%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .legal-doc .seal{ animation:none; }
}