/* =========================================================================
   Heilungsimpuls — Betina Trunsperger
   Design: "Nocturne & Nurture" — Kosmos (Mitternacht/Gold) trifft Erdung (Atem-Weiss/Rosé)
   ========================================================================= */

/* ---------- Fonts (self-hosted, DSGVO-konform) ---------- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/cormorant-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/cormorant-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/cormorant-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/cormorant-italic-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/mulish-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/mulish-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/greatvibes-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  --mitternacht: #201c42;
  --mitternacht-2: #29234f;
  --tiefviolett: #362c6d;
  --zwielicht: #574f8c;
  --gold: #d3ac63;
  --gold-hell: #ecd39a;
  --gold-tief: #a9812f;
  --rose: #c68e84;
  --rose-tief: #a9736b;
  --atem: #efe7d7;
  --pergament: #e6dcc9;
  --tinte: #2b2745;
  --tinte-weich: #55506b;
  --nebel: #c7c1dc;
  --nebel-tief: #918bab;
  --linie-dunkel: rgba(211,172,99,.22);
  --linie-hell: rgba(32,29,56,.12);

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-script: 'Great Vibes', 'Cormorant Garamond', cursive;

  --maxw: 1180px;
  --maxw-text: 720px;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --sp-section: clamp(4.5rem, 10vw, 9rem);
  --radius: 4px;
  --shadow-soft: 0 24px 60px -30px rgba(22,20,47,.5);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, .55rem + .55vw, 1.125rem);
  line-height: 1.75;
  color: var(--tinte);
  background: var(--atem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .003em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

::selection { background: var(--gold); color: var(--mitternacht); }

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

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--sp-section); position: relative; }
.measure { max-width: var(--maxw-text); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* Section tones */
.tone-atem   { background: var(--atem); color: var(--tinte); }
.tone-pergament { background: var(--pergament); color: var(--tinte); }
.tone-nacht {
  background: var(--mitternacht);
  color: var(--nebel);
  background-image:
    radial-gradient(1200px 600px at 78% -10%, rgba(211,172,99,.10), transparent 60%),
    radial-gradient(900px 500px at 8% 110%, rgba(198,142,132,.10), transparent 60%);
}
.tone-nacht h1, .tone-nacht h2, .tone-nacht h3 { color: var(--atem); }

/* ---------- Eyebrow / kicker ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--rose-tief);
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
  gap: .5em .8em;
}
@media (max-width: 520px) {
  .eyebrow { letter-spacing: .18em; font-size: .66rem; }
}
.tone-nacht .eyebrow { color: var(--gold); }
.eyebrow::before {
  content: "";
  width: 1.6em; height: 1px;
  background: currentColor;
  opacity: .6;
}
.eyebrow.is-centered { }

/* ---------- Type scale ---------- */
.display {
  font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5.6rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: .004em;
}
.h-xl { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.5rem); font-weight: 400; }
.h-lg { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem); font-weight: 400; }
.h-md { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem); font-weight: 500; }
.lead {
  font-size: clamp(1.15rem, .95rem + .9vw, 1.5rem);
  line-height: 1.6;
  color: var(--tinte-weich);
  font-weight: 400;
}
.tone-nacht .lead { color: var(--nebel); }
.serif-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; }

.section-head { max-width: 44rem; }
.section-head.center { margin-inline: auto; }
.section-head .eyebrow { margin-bottom: 1.4rem; }
.section-head p.lead { margin-top: 1.2rem; }

/* Prose (long-form personal text) */
.prose > * + * { margin-top: 1.15em; }
.prose p { color: var(--tinte); }
.tone-nacht .prose p { color: var(--nebel); }
.prose h2, .prose h3 { margin-top: 2.2em; margin-bottom: .1em; color: var(--tinte); }
.prose .lead { margin-bottom: .4em; }
.prose strong { font-weight: 700; color: var(--tinte); }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--gold);
  --fg: #1b1636;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 1.05em 1.9em;
  color: var(--fg);
  background: linear-gradient(135deg, #f6e1b0 0%, #e2bd76 42%, #cc9d54 100%);
  border: 1px solid rgba(246,225,176,.6);
  border-radius: 999px;
  cursor: pointer;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), filter .45s var(--ease);
  box-shadow: 0 12px 28px -12px rgba(201,154,81,.6), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1.5px 1px rgba(140,100,44,.28);
}
.btn > * { position: relative; z-index: 1; }
/* wandernder Licht-Sheen (nur solide Buttons) */
.btn:not(.btn-ghost):not(.btn-line)::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-130%) skewX(-12deg);
  transition: transform .85s var(--ease);
  z-index: 0;
  pointer-events: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -12px rgba(201,154,81,.72), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1.5px 1px rgba(140,100,44,.3); filter: brightness(1.035) saturate(1.05); }
.btn:hover:not(.btn-ghost):not(.btn-line)::before { transform: translateX(130%) skewX(-12deg); }
.btn:active { transform: translateY(0); box-shadow: 0 6px 16px -8px rgba(201,154,81,.6), inset 0 2px 4px rgba(120,86,38,.35); }
.btn .arrow { transition: transform .4s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .btn:not(.btn-ghost):not(.btn-line)::before { display: none; }
}

.btn-ghost {
  --bg: transparent;
  --fg: currentColor;
  --ghost-fill: var(--tinte);
  background: transparent;
  border: 1px solid currentColor;
  box-shadow: none;
  opacity: .95;
}
/* Fläche als eigene Variable, NICHT currentColor: sonst würde die Fläche mit der
   umschaltenden Textfarbe mitwandern und Text/Fläche wären gleichfarbig (unlesbar). */
.btn-ghost:hover { background: var(--ghost-fill); box-shadow: none; color: var(--atem); }
.tone-nacht .btn-ghost { --ghost-fill: var(--atem); }
.tone-nacht .btn-ghost:hover { color: var(--mitternacht); }

.btn-line {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: .35em;
  color: inherit;
}
.btn-line:hover { transform: none; box-shadow: none; color: var(--rose-tief); }
.tone-nacht .btn-line:hover { color: var(--gold); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background .5s var(--ease), backdrop-filter .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
  padding-block: 1.2rem;
}
.site-header.is-scrolled {
  background: rgba(22,20,47,.82);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(211,172,99,.16);
  padding-block: .7rem;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--atem); }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: .01em;
}
.brand__sub {
  font-family: var(--font-body);
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: .28em;
}

.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.4rem); }
.nav a {
  color: var(--nebel);
  font-size: .92rem;
  letter-spacing: .02em;
  position: relative;
  padding-block: .3em;
  transition: color .3s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--atem); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .btn { font-size: .72rem; padding: .8em 1.4em; color: var(--mitternacht); }
.nav .btn:hover { color: var(--mitternacht); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  color: var(--atem);
  align-items: center; justify-content: center;
  position: relative;
  z-index: 110;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 24px; height: 2px; background: currentColor;
  transition: transform .35s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span::before { transform: translateY(-7px); }
.nav-toggle span::after  { transform: translateY(5px); }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: rotate(45deg); }
.nav-open .nav-toggle span::after  { transform: rotate(-45deg); }

@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 105;
    width: min(84vw, 360px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.4rem;
    padding: 2rem var(--pad);
    background: var(--mitternacht-2);
    background-image: radial-gradient(600px 400px at 100% 0%, rgba(211,172,99,.12), transparent 60%);
    transform: translateX(105%);
    transition: transform .5s var(--ease);
    box-shadow: -30px 0 60px -30px rgba(0,0,0,.6);
  }
  .nav-open .nav { transform: translateX(0); }
  .nav a { font-size: 1.15rem; font-family: var(--font-display); color: var(--atem); }
  .nav .btn { margin-top: .6rem; font-family: var(--font-body); }
  .nav-scrim {
    position: fixed; inset: 0; background: rgba(10,9,22,.5);
    opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
    z-index: 90;
  }
  .nav-open .nav-scrim { opacity: 1; visibility: visible; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  color: var(--nebel);
  background: var(--mitternacht);
  overflow: hidden;
  isolation: isolate;
}
.hero__sky {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(1200px 700px at 72% 12%, #241f4d 0%, transparent 55%),
    radial-gradient(900px 900px at 15% 95%, #2a1f45 0%, transparent 55%),
    linear-gradient(180deg, #100e26 0%, #16142f 45%, #1a1638 100%);
}
.hero__stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .9; }
.hero__glow {
  position: absolute; z-index: -1;
  width: min(70vw, 620px); aspect-ratio: 1;
  right: -6vw; top: 8%;
  background: radial-gradient(circle, rgba(211,172,99,.20), rgba(211,172,99,0) 62%);
  filter: blur(6px);
  pointer-events: none;
}
.hero__inner { padding-block: 9rem 5rem; max-width: 56rem; }
.hero .eyebrow { color: var(--gold); margin-bottom: 1.8rem; }
.hero__title {
  font-size: clamp(2.1rem, 1rem + 4.2vw, 4.3rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.06;
  color: var(--atem);
  letter-spacing: .005em;
}
.hero__title em { font-style: italic; color: var(--gold-hell); font-weight: 400; }
.hero__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, .9rem + 1vw, 1.6rem);
  color: var(--nebel);
  margin-top: 1.6rem;
  max-width: 40rem;
}
.hero__sense {
  display: flex; flex-wrap: wrap; gap: .5em 1.6em;
  margin-top: 2rem;
  font-size: .95rem; letter-spacing: .04em; color: var(--nebel);
}
.hero__sense span { display: inline-flex; align-items: center; gap: .6em; }
.hero__sense span::before { content: "✦"; color: var(--gold); font-size: .7em; }
.hero__cta { margin-top: 2.8rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.15rem; }

/* Breathing orb — the signature: an invitation to breathe */
.breath {
  position: absolute;
  right: clamp(1rem, 8vw, 7rem);
  bottom: clamp(2rem, 8vh, 5rem);
  z-index: 0;
  display: grid; place-items: center;
  width: clamp(120px, 20vw, 190px); aspect-ratio: 1;
  text-align: center;
}
.breath__orb {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(236,211,154,.55), rgba(211,172,99,.16) 55%, transparent 72%);
  box-shadow: 0 0 60px rgba(211,172,99,.28);
  animation: breathe 11s var(--ease) infinite;
}
.breath__ring {
  position: absolute; inset: 12%;
  border: 1px solid rgba(236,211,154,.5);
  border-radius: 50%;
  animation: breathe 11s var(--ease) infinite;
}
.breath__label {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-hell);
  line-height: 1.3;
}
@keyframes breathe {
  0%, 100% { transform: scale(.82); opacity: .7; }
  45%, 55% { transform: scale(1.08); opacity: 1; }
}
.hero__scroll {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--nebel-tief);
  display: inline-flex; flex-direction: column; align-items: center; gap: .6rem;
}
.hero__scroll::after {
  content: ""; width: 1px; height: 42px;
  background: linear-gradient(var(--gold), transparent);
  animation: scrollpulse 2.4s var(--ease) infinite;
}
@keyframes scrollpulse { 0%,100%{opacity:.3;transform:scaleY(.6);} 50%{opacity:1;transform:scaleY(1);} }

@media (max-width: 880px) {
  .hero__inner { padding-block: 7rem 3.5rem; }
  .breath {
    position: relative;
    right: auto; bottom: auto;
    margin: 3.4rem auto 3.2rem;      /* mittig, mit mehr Luft nach oben und unten */
    width: clamp(200px, 60vw, 260px); /* deutlich größer */
  }
  .breath__label { font-size: 1.15rem; }
  .hero__scroll { display: none; }
}
@media (max-width: 620px) {
  .hero__sense { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .breath__orb, .breath__ring { animation: none; transform: scale(.95); opacity: .95; }
  .hero__scroll::after { animation: none; }
}

/* ---------- Divider star ---------- */
.starline {
  display: flex; align-items: center; gap: 1.2rem;
  color: var(--gold); justify-content: center;
  margin-inline: auto;
}
.starline::before, .starline::after {
  content: ""; height: 1px; flex: 1; max-width: 120px;
  background: linear-gradient(to var(--dir, right), transparent, currentColor);
}
.starline::before { --dir: left; }
.starline span { font-size: .9rem; letter-spacing: .3em; }

/* ---------- Pull quote ---------- */
.pullquote { text-align: center; max-width: 46rem; margin-inline: auto; }
.pullquote p {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 3rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.28;
}
.pullquote cite { display: block; margin-top: 1.4rem; font-style: normal; font-family: var(--font-body); font-size: .78rem; letter-spacing: .26em; text-transform: uppercase; color: var(--rose-tief); }
.tone-nacht .pullquote cite { color: var(--gold); }
.tone-nacht .pullquote p { color: var(--atem); }

/* ---------- Grids ---------- */
.grid { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Feature split */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.split.reverse > :first-child { order: 2; }
@media (max-width: 860px) { .split, .split.reverse > :first-child { grid-template-columns: 1fr; order: 0; } }

/* ---------- Cards ---------- */
.card {
  background: var(--atem);
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.3rem);
  position: relative;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  height: 100%;
}
.tone-pergament .card { background: #fff; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); border-color: var(--linie-dunkel); }
.card__glyph { color: var(--rose); width: 30px; height: 30px; margin-bottom: 1.2rem; }
.card__title { font-size: 1.55rem; font-weight: 500; margin-bottom: .1rem; color: var(--tinte); }
.card__sub { font-family: var(--font-body); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--rose-tief); margin-bottom: .9rem; }
.card p { color: var(--tinte-weich); font-size: .98rem; line-height: 1.65; }

/* ---------- Angebots-Flip-Karten ---------- */
.sflip { position: relative; perspective: 1400px; aspect-ratio: 4 / 5; height: 100%; }
.sflip__inner { position: relative; width: 100%; height: 100%; transition: transform .7s var(--ease); transform-style: preserve-3d; }
.sflip.is-flipped .sflip__inner { transform: rotateY(180deg); }
.sflip__face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(1.5rem, 3vw, 2.2rem); border: 1px solid var(--linie-dunkel); box-shadow: 0 26px 60px -40px #000; }
.sflip__front { background-size: cover; background-position: center; color: #f4ecdc; }
.sflip__front::before { content: ''; position: absolute; inset: 0; border-radius: var(--radius); background: linear-gradient(180deg, rgba(16,14,38,.5) 0%, rgba(16,14,38,.34) 45%, rgba(16,14,38,.82) 100%); }
.sflip__front { background-color: #17152f; }
.sflip__front-in { position: relative; z-index: 1; }
.sflip__sub { font-family: var(--font-body); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--goldh); margin-bottom: .5rem; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.sflip__title { font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem); font-weight: 500; line-height: 1.18; }
.sflip__front .sflip__title { color: #fbf6ea; text-shadow: 0 2px 22px rgba(0,0,0,.7); }
.sflip__cta { font-family: var(--font-body); font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(211,172,99,.45); border-radius: 999px; padding: .55em 1.2em; margin-top: .9rem; background: rgba(16,14,38,.35); }
.sflip__front .sflip__cta { position: absolute; z-index: 1; bottom: clamp(1.1rem, 3vw, 1.6rem); left: 50%; transform: translateX(-50%); margin: 0; }
.sflip__back { transform: rotateY(180deg); background: radial-gradient(120% 100% at 50% 0%, rgba(211,172,99,.16), transparent 60%), linear-gradient(160deg, #26214f, #17152f); color: #e8e2f2; gap: .5rem; }
.sflip__back .card__glyph { color: var(--gold); width: 32px; height: 32px; margin: 0 0 .2rem; }
.sflip__back .sflip__title { color: #f4ecdc; }
.sflip__back p { color: rgba(232,226,242,.86); font-size: .92rem; line-height: 1.55; margin-top: .2rem; }
.sflip__cta--back { color: var(--nebel); border-color: var(--linie); background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .sflip:hover .sflip__inner { transform: rotateY(180deg); }
  .sflip__cta { display: none; }
}
@media (hover: none) { .sflip { cursor: pointer; } }

/* Dark cards */
.card-dark {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--linie-dunkel);
}
.card-dark .card__title { color: var(--atem); }
.card-dark p { color: var(--nebel); }
.card-dark:hover { box-shadow: 0 30px 60px -34px #000; }

/* ---------- List (checks / values) ---------- */
.implist { list-style: none; padding: 0; display: grid; gap: 1.1rem; }
.implist li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.implist .mk {
  width: 26px; height: 26px; flex: none; margin-top: .2rem;
  border-radius: 50%; display: grid; place-items: center;
  background: rgba(211,172,99,.14); color: var(--gold-tief, var(--rose-tief));
}
.tone-nacht .implist .mk { color: var(--gold); }
.implist b { font-weight: 700; color: inherit; }

/* Poetic "was wäre wenn" list */
.wenn { list-style: none; padding: 0; display: grid; gap: 1.3rem; max-width: 40rem; }
.wenn li {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem);
  font-style: italic;
  line-height: 1.35;
  padding-left: 1.6rem;
  position: relative;
  color: var(--atem);
}
.wenn li::before { content: "✦"; position: absolute; left: 0; top: .35em; font-size: .55em; color: var(--gold); font-style: normal; }

/* ---------- Price cards ---------- */
.price {
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 2.6rem);
  background: var(--atem);
  display: flex; flex-direction: column;
  height: 100%;
}
.tone-nacht .price { background: rgba(255,255,255,.03); border-color: var(--linie-dunkel); }
.price.is-featured { border-color: var(--gold); box-shadow: 0 30px 70px -40px rgba(211,172,99,.55); }
.price__tag { font-family: var(--font-body); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--rose-tief); }
.tone-nacht .price__tag { color: var(--gold); }
.price__name { font-family: var(--font-display); font-size: 1.9rem; font-weight: 500; margin: .5rem 0 .2rem; }
.tone-nacht .price__name { color: var(--atem); }
.price__meta { color: var(--tinte-weich); font-size: .95rem; }
.tone-nacht .price__meta { color: var(--nebel); }
.price__amount { font-family: var(--font-display); font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); font-weight: 400; margin: 1.2rem 0 .2rem; color: var(--tinte); }
.tone-nacht .price__amount { color: var(--gold-hell); }
.price__amount small { font-size: .38em; letter-spacing: .04em; color: var(--tinte-weich); }
.tone-nacht .price__amount small { color: var(--nebel); }
.price p { color: var(--tinte-weich); }
.tone-nacht .price p { color: var(--nebel); }
.price__foot { margin-top: auto; padding-top: 1.6rem; }

/* ---------- Steps (Ablauf) ---------- */
.steps { counter-reset: step; display: grid; gap: 1.6rem; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: start;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--linie-dunkel);
}
.step:last-child { border-bottom: 0; padding-bottom: 0; }
.step__num {
  counter-increment: step;
  font-family: var(--font-display);
  font-size: 1.6rem; font-style: italic;
  color: var(--gold);
  width: 2.6rem; height: 2.6rem; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--linie-dunkel); border-radius: 50%;
}
.step__num::before { content: counter(step); }
.step h3 { font-size: 1.4rem; margin-bottom: .3rem; color: var(--atem); }
.step p { color: var(--nebel); }

/* ---------- Timeline (Über mich / Blick ins Herz) ---------- */
.timeline { display: grid; gap: 0; position: relative; }
.tl {
  display: grid; grid-template-columns: minmax(0,1fr); gap: .4rem;
  padding: 2rem 0 2rem 2.2rem;
  border-left: 1px solid var(--linie-hell);
  position: relative;
}
.tone-nacht .tl { border-left-color: var(--linie-dunkel); }
.tl::before {
  content: ""; position: absolute; left: -5px; top: 2.5rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px rgba(211,172,99,.15);
}
.tl h3 { font-size: 1.5rem; color: var(--tinte); }
.tone-nacht .tl h3 { color: var(--atem); }
.tl .kicker { font-family: var(--font-body); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--rose-tief); }

/* ---------- Credentials chips ---------- */
.creds { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem; }
.creds li {
  font-size: .82rem; line-height: 1.4;
  padding: .6em 1em;
  border: 1px solid rgba(85,80,107,.28);
  border-radius: 999px;
  color: var(--tinte-weich);
  background: rgba(43,39,69,.04);
}
.creds li b { color: var(--gold-tief); font-weight: 700; }

/* ---------- Werdegang (Über mich) ---------- */
.werdegang { max-width: 44rem; margin: 2.6rem auto 0; display: grid; gap: 2.7rem; text-align: left; }
.wg-head { font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + .6vw, 1.6rem); font-weight: 500; color: var(--tinte); line-height: 1.2; }
.wg-head span { display: block; font-family: var(--font-body); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-tief); font-weight: 600; margin-top: .35rem; }
.wg-group ul { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .85rem; }
.wg-group li { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; align-items: baseline; }
.wg-year { color: var(--gold-tief); font-weight: 700; font-size: .86rem; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.wg-txt { color: var(--tinte-weich); font-size: .98rem; line-height: 1.5; }
@media (max-width: 560px) { .wg-group li { grid-template-columns: 4.7rem 1fr; gap: .7rem; } }

/* ---------- Portrait (Über mich) ---------- */
.ueber-intro { align-items: center; gap: clamp(2rem, 5vw, 4.8rem); }
.ueber-intro .prose { max-width: 34rem; }
.portrait {
  --pr: 50%;
  position: relative; margin: 0; max-width: 18rem; justify-self: center;
}
.portrait img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 22%;
  display: block; position: relative; z-index: 1;
  border-radius: var(--pr);
  box-shadow: 0 42px 90px -46px rgba(22,20,47,.62);
}
.portrait::before {
  content: ''; position: absolute; z-index: 0; inset: -9%;
  background: radial-gradient(58% 58% at 50% 42%, rgba(211,172,99,.30), rgba(198,142,132,.16) 55%, transparent 72%);
  filter: blur(26px); pointer-events: none;
}
.portrait::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  border-radius: var(--pr);
  box-shadow: inset 0 0 0 1px rgba(211,172,99,.42);
  pointer-events: none;
}
@media (max-width: 720px) {
  .portrait { max-width: 13.5rem; margin: 0 auto .5rem; }
  .ueber-intro { text-align: center; }
}

/* ---------- Impuls-CTA (animated hero call) ---------- */
.impuls-cta{
  display:inline-flex; align-items:center; gap:1.5rem;
  text-decoration:none; color:var(--atem);
  font-family:var(--font-body); font-weight:500;
  font-size:clamp(1rem,.9rem + .4vw,1.12rem); letter-spacing:.015em;
  padding:.5rem .3rem; position:relative; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.impuls-cta__orb{
  position:relative; width:15px; height:15px; flex:none; border-radius:50%;
  background:radial-gradient(circle at 38% 33%, var(--gold-hell), var(--gold) 58%, var(--gold-tief));
  box-shadow:0 0 16px 3px rgba(211,172,99,.55);
  animation:impulsBreath 8s var(--ease) infinite;
}
.impuls-cta__orb::before,.impuls-cta__orb::after{
  content:''; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid var(--gold); opacity:0;
  animation:impulsRipple 8s var(--ease) infinite;
}
.impuls-cta__orb::after{ animation-delay:4s; }
@keyframes impulsRipple{
  0%{ transform:scale(1); opacity:.75; }
  75%{ opacity:0; }
  100%{ transform:scale(4.2); opacity:0; }
}
@keyframes impulsBreath{
  0%,100%{ box-shadow:0 0 12px 2px rgba(211,172,99,.4); transform:scale(1); }
  50%{ box-shadow:0 0 22px 5px rgba(211,172,99,.7); transform:scale(1.12); }
}
.impuls-cta__label{ position:relative; }
.impuls-cta__label::after{
  content:''; position:absolute; left:0; right:0; bottom:-5px; height:1px;
  background:linear-gradient(90deg,var(--gold-hell),transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease);
}
.impuls-cta__arrow{ color:var(--gold-hell); transition:transform .4s var(--ease); }
.impuls-cta:hover .impuls-cta__label::after,
.impuls-cta:focus-visible .impuls-cta__label::after{ transform:scaleX(1); }
.impuls-cta:hover .impuls-cta__arrow{ transform:translateX(7px); }
.impuls-cta:hover .impuls-cta__orb,
.impuls-cta:focus-visible .impuls-cta__orb{ animation-duration:4.5s; }
.impuls-cta:hover .impuls-cta__orb::before,
.impuls-cta:hover .impuls-cta__orb::after{ animation-duration:4.5s; }
.impuls-cta:focus-visible{ outline:2px solid var(--gold-hell); outline-offset:6px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .impuls-cta__orb,.impuls-cta__orb::before,.impuls-cta__orb::after{ animation:none; }
  .impuls-cta__orb::before{ opacity:.5; transform:scale(2); }
}

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band .display { margin-bottom: 1.6rem; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 4.5rem); align-items: start; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-detail { display: grid; gap: 1.6rem; }
.contact-detail a.big { font-family: var(--font-display); font-size: clamp(1.3rem,1rem+1.2vw,1.7rem); color: var(--atem); border-bottom: 1px solid var(--linie-dunkel); padding-bottom: .2rem; display: inline-block; transition: color .3s; }
.contact-detail a.big:hover { color: var(--gold); }
.contact-note { font-size: .95rem; color: var(--nebel); }

.form { display: grid; gap: 1.3rem; }
.field { display: grid; gap: .5rem; }
.field label { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--nebel); }
.field input, .field textarea {
  font-family: var(--font-body); font-size: 1rem;
  padding: .95em 1.1em;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--radius);
  color: var(--atem);
  transition: border-color .3s var(--ease), background .3s var(--ease);
  width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: var(--nebel-tief); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,.06); }
.field textarea { resize: vertical; min-height: 140px; }
.consent { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; font-size: .88rem; color: var(--nebel); line-height: 1.5; }
.consent input { margin-top: .25rem; width: 18px; height: 18px; accent-color: var(--gold); flex: none; }
.consent a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
/* Honeypot: off-screen statt display:none, damit Bots das Feld sehen und ausfüllen,
   Menschen es aber nie wahrnehmen. Nicht fokussierbar (tabindex=-1 im HTML). */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form__status { font-size: .92rem; min-height: 1.2em; }
.form__status.ok { color: var(--gold-hell); }
.form__status.err { color: var(--rose); }
.form .btn { justify-self: start; }
.form .btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- Callout / hinweis ---------- */
.callout {
  border: 1px solid var(--linie-dunkel);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 3vw, 1.8rem) clamp(1.4rem, 3vw, 2rem);
  background: rgba(211,172,99,.05);
}
.callout.on-light { background: rgba(198,142,132,.07); border-left-color: var(--rose); }
.callout h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.callout p { font-size: .96rem; }
.callout strong { color: inherit; }

/* ---------- Footer ---------- */
.site-footer { background: var(--mitternacht); color: var(--nebel); padding-block: clamp(3.5rem,7vw,5.5rem) 2.5rem; position: relative; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--linie-dunkel); }
@media (max-width: 780px) { .footer-top { grid-template-columns: 1fr; gap: 2rem; } }
.footer-brand .brand { color: var(--atem); }
.footer-brand p { margin-top: 1.2rem; max-width: 26rem; color: var(--nebel); font-size: .96rem; }
.footer-col h4 { font-family: var(--font-body); font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: .7rem; }
.footer-col a { color: var(--nebel); transition: color .3s; }
.footer-col a:hover { color: var(--atem); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-top: 2rem; font-size: .82rem; color: var(--nebel-tief); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer-bottom a:hover { color: var(--gold); }
.footer-motto { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--gold); }

/* ---------- Page hero (interior) ---------- */
.page-hero {
  padding-top: clamp(8rem, 14vh, 11rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  text-align: center;
}
/* Interior-Hero: nur der obere Glow, KEIN unterer. Der untere rosé-Glow von
   .tone-nacht bleedet sonst in die Unterkante und erzeugt am Übergang zu einem
   folgenden dunklen Abschnitt (z. B. Kontaktformular) eine sichtbare Kante.
   Zusammen mit ".tone-nacht + .tone-nacht {background-image:none}" (flacher
   Folgeabschnitt) verschmelzen beide Dunkelflächen dadurch nahtlos. */
.page-hero.tone-nacht {
  background-image: radial-gradient(1200px 600px at 78% -10%, rgba(211,172,99,.10), transparent 60%);
}
.page-hero .eyebrow { margin-bottom: 1.4rem; }
.page-hero .display { font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.4rem); }
.page-hero p.lead { margin: 1.4rem auto 0; max-width: 40rem; }
.breadcrumb { font-size: .78rem; letter-spacing: .04em; color: var(--nebel-tief); margin-top: 2rem; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { margin-inline: .5em; opacity: .5; }

/* ---------- Legal / long text pages ---------- */
.legal { max-width: var(--maxw-text); }
.legal h2 { font-size: 1.7rem; margin-top: 2.4rem; margin-bottom: .6rem; color: var(--tinte); }
.legal h3 { font-size: 1.25rem; margin-top: 1.6rem; margin-bottom: .4rem; font-weight: 500; }
.legal p, .legal li { color: var(--tinte-weich); }
.legal ul { padding-left: 1.2rem; display: grid; gap: .5rem; margin-top: .6rem; }
.legal a { color: var(--rose-tief); text-decoration: underline; text-underline-offset: 2px; }
.legal .placeholder { background: rgba(198,142,132,.14); border-radius: 3px; padding: 0 .35em; font-style: italic; color: var(--rose-tief); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Utilities ---------- */
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.mt-5{margin-top:3rem}
.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.gold { color: var(--gold); }
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--gold); color: var(--mitternacht); padding: .8em 1.2em; border-radius: 0 0 var(--radius) 0;
  font-weight: 700; font-size: .85rem;
}
.skip-link:focus { left: 0; }

/* ============================================================
   Interaktive Erlebnisse
   ============================================================ */

/* ---- Impuls des Tages (Flip-Karte) ---- */
.impuls { text-align: center; }
.karte {
  width: min(400px, 88%);
  margin: 2.6rem auto 0;
  aspect-ratio: 5 / 6;
  perspective: 1400px;
  cursor: pointer;
  border: 0; background: none; padding: 0;
}
.karte__inner {
  position: relative; width: 100%; height: 100%;
  transition: transform 1s var(--ease);
  transform-style: preserve-3d;
}
.karte.is-flipped .karte__inner { transform: rotateY(180deg); }
.karte__face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(1.5rem, 4vw, 2.4rem); text-align: center;
  border: 1px solid var(--linie-dunkel);
  box-shadow: 0 30px 70px -40px #000, inset 0 1px 0 rgba(255,255,255,.05);
}
.karte__front {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(211,172,99,.18), transparent 60%),
    linear-gradient(160deg, #211d47, #16142f);
  gap: 1rem;
}
.karte__stern { font-size: 2.2rem; color: var(--gold); animation: twinkle 3.5s var(--ease) infinite; }
@keyframes twinkle { 0%,100%{opacity:.55;transform:scale(.92)} 50%{opacity:1;transform:scale(1.08)} }
.karte__hint { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--atem); }
.karte__cta {
  margin-top: .4rem; font-family: var(--font-body); font-size: .72rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
  border: 1px solid var(--linie-dunkel); border-radius: 999px; padding: .7em 1.5em;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.karte:hover .karte__cta { background: var(--gold); color: var(--mitternacht); }
.karte__back {
  transform: rotateY(180deg);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(211,172,99,.16), transparent 60%),
    linear-gradient(160deg, #26214f, #17152f);
  gap: .9rem;
}
.karte__wort { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); color: var(--gold-hell); line-height: 1; }
.karte__wort::before, .karte__wort::after { content: "\2726"; font-size: .4em; color: var(--gold); vertical-align: middle; margin: 0 .5em; opacity: .7; }
.karte__text { color: var(--atem); font-size: 1.08rem; line-height: 1.55; max-width: 22rem; }
.karte__aff { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--nebel); }
.karte__aff::before { content: "\201E"; } .karte__aff::after { content: "\201C"; }
.impuls__note { margin-top: 1.6rem; font-size: .85rem; color: var(--nebel-tief); }
@media (prefers-reduced-motion: reduce) { .karte__inner { transition: none; } .karte__stern { animation: none; } }

/* ---- Atem-Moment ---- */
.atem { text-align: center; }
.atem__stage {
  position: relative; display: grid; place-items: center;
  width: clamp(220px, 42vw, 300px); aspect-ratio: 1; margin: 2.4rem auto 1.5rem;
}
.atem__orb {
  position: absolute; inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(236,211,154,.5), rgba(211,172,99,.14) 55%, transparent 72%);
  box-shadow: 0 0 60px rgba(211,172,99,.25);
  transform: scale(.62);
  transition: transform 4s ease-in-out, box-shadow 4s ease-in-out;
}
.atem__orb.ein { transform: scale(1.12); box-shadow: 0 0 90px rgba(211,172,99,.4); transition-duration: 4s; }
.atem__orb.halt { transform: scale(1.12); box-shadow: 0 0 90px rgba(211,172,99,.4); transition-duration: 1.4s; }
.atem__orb.aus { transform: scale(.62); box-shadow: 0 0 40px rgba(211,172,99,.18); transition-duration: 6s; }
.atem__ring { position: absolute; inset: 4%; border: 1px solid var(--linie-dunkel); border-radius: 50%; }
.atem__cue {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); color: var(--gold-hell);
}
.atem.laeuft .atem__cue { color: var(--atem); }
@media (prefers-reduced-motion: reduce) {
  .atem__orb, .atem__orb.ein, .atem__orb.aus { transition: opacity .5s; transform: scale(.9); }
}

/* ---- Seelenkompass (Quiz) ---- */
.sk { max-width: 40rem; margin-inline: auto; }
.sk__intro { text-align: center; }
.sk__bar, .sk__stage { display: none; }
.sk.gestartet .sk__intro { display: none; }
.sk.gestartet .sk__bar, .sk.gestartet .sk__stage { display: block; }
.sk__bar { height: 3px; background: var(--linie-dunkel); border-radius: 3px; overflow: hidden; margin-bottom: 2.4rem; }
.sk__bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-hell)); transition: width .5s var(--ease); }
.sk__step { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: .8rem; }
.sk__q { font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); color: var(--atem); margin-bottom: 1.8rem; line-height: 1.15; }
.sk__answers { display: grid; gap: .9rem; }
.sk__a {
  text-align: left; font-family: var(--font-body); font-size: 1.02rem; color: var(--nebel);
  background: rgba(255,255,255,.03); border: 1px solid var(--linie-dunkel); border-radius: 10px;
  padding: 1.05em 1.3em; cursor: pointer;
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.sk__a:hover { transform: translateX(4px); border-color: var(--gold); background: rgba(211,172,99,.08); color: var(--atem); }
.sk__result { text-align: center; }
.sk__rname { font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); color: var(--gold-hell); margin: .4rem 0 1rem; }
.sk__rtext { color: var(--nebel); font-size: 1.1rem; line-height: 1.6; max-width: 32rem; margin-inline: auto; }
.sk__cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; margin-top: 2rem; }
.sk__again { margin-top: 1.8rem; background: none; border: 0; color: var(--nebel-tief); font-family: var(--font-body); font-size: .85rem; letter-spacing: .1em; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.sk__again:hover { color: var(--gold); }
.sk__hint { margin-top: 1.4rem; font-size: .82rem; color: var(--nebel-tief); font-style: italic; }

/* ---- Klang-Schalter ---- */
#klang-toggle {
  position: fixed; left: clamp(1rem, 3vw, 1.6rem); bottom: clamp(1rem, 3vw, 1.6rem); z-index: 85;
  display: inline-flex; align-items: center; gap: .6em;
  padding: .7em 1.1em .7em .85em;
  background: rgba(22,20,47,.72); backdrop-filter: blur(10px);
  border: 1px solid var(--linie-dunkel); border-radius: 999px;
  color: var(--nebel); cursor: pointer;
  font-family: var(--font-body); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
#klang-toggle:hover { color: var(--atem); border-color: var(--gold); }
#klang-toggle.an { color: var(--mitternacht); background: var(--gold); border-color: var(--gold); box-shadow: 0 8px 30px -8px rgba(211,172,99,.6); }
.klang__wave { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.klang__wave i { width: 2.5px; height: 40%; background: currentColor; border-radius: 2px; display: block; }
#klang-toggle.an .klang__wave i { animation: klang 1s ease-in-out infinite; }
#klang-toggle.an .klang__wave i:nth-child(2) { animation-delay: .18s; }
#klang-toggle.an .klang__wave i:nth-child(3) { animation-delay: .36s; }
#klang-toggle.an .klang__wave i:nth-child(4) { animation-delay: .1s; }
@keyframes klang { 0%,100%{height:30%} 50%{height:100%} }
@media (prefers-reduced-motion: reduce) { #klang-toggle.an .klang__wave i { animation: none; height: 70%; } }
@media (max-width: 600px) { #klang-toggle .klang__label { display: none; } #klang-toggle { padding: .7em; } }

/* ---------- FAQ-Accordion ---------- */
.faq { max-width: 48rem; margin-inline: auto; display: flex; flex-direction: column; gap: .8rem; }
.faq-item {
  border: 1px solid rgba(32, 29, 56, .12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .6);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.faq-item[open] {
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 16px 36px -22px rgba(32, 29, 56, .4);
}
.faq-q {
  cursor: pointer;
  list-style: none;
  display: block;
  padding: 1.2rem 3.2rem 1.2rem 1.5rem;
  position: relative;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--tinte);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: '';
  position: absolute;
  right: 1.5rem;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background:
    linear-gradient(var(--gold), var(--gold)) center/14px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) center/2px 14px no-repeat;
  transition: transform .25s ease, opacity .25s ease;
}
.faq-item[open] .faq-q::after {
  background: linear-gradient(var(--gold), var(--gold)) center/14px 2px no-repeat;
}
.faq-q:hover { color: var(--gold-tief); }
.faq-q:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 12px; }
.faq-a { padding: 0 1.5rem 1.35rem; }
.faq-a p { color: var(--tinte-weich); line-height: 1.75; max-width: 60ch; }
@media (max-width: 600px) {
  .faq-q { font-size: 1.18rem; padding: 1.05rem 2.8rem 1.05rem 1.15rem; }
  .faq-a { padding: 0 1.15rem 1.15rem; }
}

/* ---------- Dezente Wellen-Uebergaenge zwischen Ton-Abschnitten ---------- */
/* Klare Kante, aber leicht wellenfoermig: jeder Abschnitt zeichnet seine eigene
   Farbe als flache Welle in den vorherigen hinein (im Polster, ohne Inhalt zu
   verdecken), unabhaengig von der Nachbarfarbe. */
.tone-atem, .tone-pergament, .tone-nacht { position: relative; }
.tone-atem::before, .tone-pergament::before, .tone-nacht::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -28px; height: 30px;
  pointer-events: none;
  z-index: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='30' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0,15 C240,5 480,25 720,15 C960,5 1200,25 1440,15 L1440,30 L0,30 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='30' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0,15 C240,5 480,25 720,15 C960,5 1200,25 1440,15 L1440,30 L0,30 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.tone-atem::before { background: var(--atem); }
.tone-pergament::before { background: var(--pergament); }
.tone-nacht::before { background: var(--mitternacht); }
/* leichter goldener Faden genau auf der Wellenlinie */
.tone-atem::after, .tone-pergament::after, .tone-nacht::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -28px; height: 30px;
  pointer-events: none;
  z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='30' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0,15 C240,5 480,25 720,15 C960,5 1200,25 1440,15' fill='none' stroke='%23d3ac63' stroke-opacity='0.85' stroke-width='1.8' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
/* Gleicher Ton nach gleichem Ton: keine Welle, kein Faden (nahtlos ineinander).
   Bei tone-nacht zusätzlich die Radial-Glows des Folgeabschnitts abschalten, damit
   beide Dunkelflächen als EINE durchgehende Mitternachtsfläche lesen -- sonst
   erzeugen die pro Abschnitt versetzten Glows an der Naht eine sichtbare Kante. */
.tone-atem + .tone-atem::before, .tone-atem + .tone-atem::after,
.tone-pergament + .tone-pergament::before, .tone-pergament + .tone-pergament::after,
.tone-nacht + .tone-nacht::before, .tone-nacht + .tone-nacht::after { display: none; }
.tone-nacht + .tone-nacht { background-image: none; }
/* Inhalt liegt ueber Welle und Faden */
.tone-atem > *, .tone-pergament > *, .tone-nacht > * { position: relative; z-index: 2; }

/* ---------- Logo (Bild-Assets) ---------- */
.brand__logo { height: 46px; width: auto; flex: none; display: block; transition: height .5s var(--ease); }
.site-header.is-scrolled .brand__logo { height: 40px; }
@media (max-width: 600px) { .brand__logo { height: 40px; } }
.footer-logo-link { display: inline-flex; align-items: center; gap: .85rem; text-decoration: none; }
.footer-mark { width: 44px; height: auto; display: block; }
.footer-wordmark { display: flex; flex-direction: column; font-family: var(--font-display); font-size: 1.9rem; line-height: 1.02; color: var(--atem); font-weight: 500; letter-spacing: .01em; }
.footer-wordmark small { font-family: var(--font-body); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-top: .35rem; font-weight: 600; }
@media (max-width: 720px) { .footer-wordmark { font-size: 1.65rem; } }
.ig-link { display: inline-flex; align-items: center; gap: .5rem; }
.ig-link svg { flex: none; width: 1.15em; height: 1.15em; }
.footer-col .ig-link { color: var(--nebel); }
.contact-detail .ig-link { color: var(--gold-hell); }
.footer-col .ig-link:hover, .contact-detail .ig-link:hover { color: var(--gold); }