:root{
  /* Martinas Farbwelt. Zwei Werte sind vertieft, damit Text darauf lesbar bleibt. */
  --ink:#B80E66;
  --ink-soft:#A20C5A;
  --ink-softer:#920B51;
  --ink-plum:#5A0932;
  --fuchsia:#E23DA0;
  --fuchsia-bright:#E864B3;
  --fuchsia-deep:#AB2D78;
  --gold:#D0AE4A;
  --gold-light:#E8D090;
  --gold-pale:#F4EACE;
  --cream:#FBF3E7;
  --cream-warm:#F3E3D2;
  --panel:#FFFFFF;
  --text-on-ink:#F6E9DE;
  --text-on-ink-soft:#EBD5DF;
  --text-on-cream:#3A1B2E;
  --text-on-cream-soft:#6B4A5C;

  --ff-display:'Fraunces', Georgia, serif;
  --ff-body:'Jost', system-ui, sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --radius-s:8px;
  --radius-m:18px;
  --radius-l:34px;

  --container:min(1180px, 92vw);
  --nav-h:80px;

  --tshadow:0 1px 2px rgba(40,4,28,.9), 0 3px 14px rgba(40,4,28,.7), 0 12px 46px rgba(40,4,28,.6);
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;font-size:106.25%}  /* 17px statt 16px, auf Martinas Wunsch */
body{
  margin:0;background:var(--cream);color:var(--text-on-cream);
  font-family:var(--ff-body);font-weight:400;font-size:1.06rem;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4,h5{font-family:var(--ff-display);font-weight:500;line-height:1.15;margin:0 0 .55em}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
.container{width:var(--container);margin-inline:auto}
section{scroll-margin-top:calc(var(--nav-h) + 10px)}
::selection{background:var(--fuchsia);color:#fff}
:focus-visible{outline:2px solid var(--fuchsia);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.7rem 1.1rem;z-index:200}
.skip:focus{left:0}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- das eine feste Umgebungslicht ---------- */
.env{position:fixed;inset:0;z-index:-2;pointer-events:none;background:var(--cream)}
.env::after{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(ellipse 48% 38% at 20% 16%, rgba(244,234,206,.85), transparent 62%),
    radial-gradient(ellipse 44% 36% at 84% 78%, rgba(226,61,160,.1), transparent 62%);
  animation:env-drift 96s ease-in-out -30s infinite alternate;
}
@keyframes env-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(2.4%,-2%,0) scale(1.06)}}

/* ---------- kicker und ornament ---------- */
.eyebrow{
  font-family:var(--ff-body);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  display:inline-flex;align-items:center;gap:.7em;margin-bottom:1.3em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor}
.on-ink .eyebrow{color:var(--gold-pale)}
.on-cream .eyebrow{color:var(--fuchsia-deep)}
.ornament{display:flex;align-items:center;justify-content:center;gap:.9rem;margin:2.6rem 0}
.ornament::before,.ornament::after{content:"";height:1px;width:64px;background:linear-gradient(90deg,transparent,currentColor)}
.ornament::after{background:linear-gradient(90deg,currentColor,transparent)}
.on-ink .ornament{color:var(--gold)}
.on-cream .ornament{color:var(--fuchsia)}
.ornament svg{width:13px;height:13px;flex-shrink:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:1rem 2.1rem;border-radius:999px;border:1px solid transparent;
  font-family:var(--ff-body);font-weight:500;font-size:1.06rem;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn--gold{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:var(--ink-plum)}
.btn--gold:hover{transform:translateY(-3px);box-shadow:0 14px 30px -12px rgba(201,162,39,.65)}
.btn--fuchsia{background:var(--fuchsia-deep);color:#fff}
.btn--fuchsia:hover{transform:translateY(-3px);box-shadow:0 14px 30px -12px rgba(171,45,120,.6)}
.btn--outline-ink{background:transparent;border-color:rgba(246,233,222,.45);color:var(--text-on-ink)}
.btn--outline-ink:hover{background:rgba(246,233,222,.1);border-color:var(--gold-light)}
.btn--outline-cream{background:transparent;border-color:var(--fuchsia-deep);color:var(--fuchsia-deep)}
.btn--outline-cream:hover{background:rgba(171,45,120,.08)}
.btn--small{padding:.68rem 1.35rem;font-size:.96rem}
@media (pointer:coarse){.btn{min-height:44px}}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset-inline:0;top:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;
  background:rgba(142,20,102,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
/* Die Leiste braucht mehr Platz als der Textkörper, sonst schiebt sich das
   Menü bei schmalen Bildschirmen aus dem Bild. */
.nav .container{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  width:min(1440px, 100% - 3rem)}
.brand{font-family:var(--ff-display);font-style:italic;font-size:1.4rem;color:var(--gold-light);text-decoration:none;display:inline-flex;align-items:baseline}
.brand i{font-style:normal;color:var(--fuchsia)}
.nav-links{display:flex;gap:1.25rem;font-size:.96rem}
.nav-termin{display:none}
.nav-links a{text-decoration:none;color:var(--text-on-ink-soft);position:relative;padding-bottom:2px;white-space:nowrap;transition:color .3s var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold-light);transition:width .35s var(--ease)}
.nav-links a:hover{color:var(--gold-light)}
.nav-links a:hover::after{width:100%}
.nav-links a.here{color:var(--gold-light)}
.nav-links a.here::after{width:100%}
.nav-right{display:flex;align-items:center;gap:1rem}
.nav-toggle{display:none;background:none;border:1px solid rgba(232,208,144,.45);border-radius:999px;color:var(--gold-light);font-size:1.1rem;line-height:1;padding:.5rem .75rem;cursor:pointer}
@media (max-width:1300px){
  .nav-links{
    position:fixed;top:var(--nav-h);left:0;right:0;flex-direction:column;gap:0;
    background:rgba(142,20,102,.98);max-height:0;overflow:hidden;padding:0 6vw;
    transition:max-height .5s var(--ease), padding .5s var(--ease);
    border-bottom:1px solid rgba(201,162,39,.28);
  }
  .nav-links.open{max-height:70vh;padding:1rem 6vw 1.8rem}
  .nav-links a{padding:.7rem 0;font-size:1.06rem}
  .nav-toggle{display:block}
  /* Der Termin-Knopf hat in der schmalen Leiste keinen Platz und wandert
     stattdessen als letzter Eintrag ins aufgeklappte Menue. */
  .nav-right .btn{display:none}
  .nav-termin{display:block;margin-top:1rem;padding-bottom:.4rem}
  /* Die Menueregel faerbt alle Verweise hell. Der Knopf braucht seine eigene
     dunkle Schrift zurueck, sonst steht Creme auf Gold. */
  .nav-links .nav-termin a.btn{display:inline-block;padding:.7rem 1.5rem;
    color:var(--ink-plum)}
}

/* ---------- abschnitte ---------- */
.section{padding-block:clamp(4.5rem,9vw,8rem);position:relative}
.section--ink{
  background:
    radial-gradient(ellipse 60% 45% at 12% 0%, rgba(232,208,144,.14), transparent 60%),
    radial-gradient(ellipse 55% 50% at 90% 100%, rgba(226,61,160,.2), transparent 60%),
    var(--ink);
  color:var(--text-on-ink);
}
.section--cream{background:var(--cream)}
.section--cream-warm{background:var(--cream-warm)}
.on-ink p{color:var(--text-on-ink-soft)}
.on-cream p{color:var(--text-on-cream-soft)}
.head{max-width:62ch;margin-bottom:3rem}
.head h2{font-size:clamp(1.9rem,3.7vw,2.8rem)}
.on-ink .head h2{color:var(--text-on-ink)}
.lede{font-size:1.16rem;max-width:66ch}

.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease), transform .9s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}

/* ---------- die Zwischenzeile unter dem Hero ---------- */
.hero-caption{background:var(--cream-warm);padding:clamp(2.4rem,5vw,3.6rem) 0;text-align:center}
.hero-caption p{
  font-family:var(--ff-display);font-style:italic;font-size:clamp(1.05rem,2vw,1.4rem);line-height:1.5;
  max-width:52ch;margin:0 auto;color:var(--fuchsia-deep);
}

/* ---------- woher der stress kommt ---------- */
.causes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 2.6rem;margin:2.4rem 0 3.4rem}
.cause{display:flex;gap:.9rem;align-items:flex-start;padding:1.15rem 0;border-bottom:1px solid rgba(232,208,144,.22)}
.cause .arrow{color:var(--gold-pale);line-height:1.5}
.cause strong{color:var(--gold-pale);font-weight:600}
.cause p{margin:0;font-size:1.06rem}
@media (max-width:820px){.causes-grid{grid-template-columns:1fr}}

.effects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-bottom:2rem}
.effect-card{background:rgba(246,233,222,.06);border:1px solid rgba(232,208,144,.26);border-radius:var(--radius-m);padding:1.9rem}
.effect-card h4{color:var(--gold-pale);font-size:1.15rem}
.effect-card p{margin:0;font-size:1.06rem}
.effect-card--soul p{font-family:var(--ff-display);font-style:italic;font-size:1.4rem;color:var(--text-on-ink);line-height:1.35}
@media (max-width:820px){.effects-grid{grid-template-columns:1fr}}

.stress-quote{
  font-family:var(--ff-display);font-style:italic;font-size:clamp(1.4rem,2.7vw,2.1rem);
  color:var(--text-on-ink);text-align:center;max-width:26ch;margin:0 auto;line-height:1.34;
}
.stress-quote em{color:var(--gold-light)}

/* ---------- der mantel ---------- */
.hold-wrap{position:relative;border-radius:var(--radius-l);padding:clamp(1.6rem,4vw,2.8rem);overflow:hidden;background:var(--cream-warm)}
.hold-wrap::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.96), rgba(244,234,206,.6));
  opacity:calc(var(--p,0)*.9);transition:opacity .12s linear;
}
.hold-wrap > *{position:relative}
.noise{display:flex;flex-wrap:wrap;gap:.5rem .8rem;margin-bottom:2rem;opacity:calc(1 - var(--p,0)*.85)}
.noise span{font-size:.8rem;letter-spacing:.04em;color:var(--text-on-cream-soft);border:1px solid rgba(58,27,46,.18);padding:.32rem .8rem;border-radius:999px}

.mantel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}
.mantel-card{
  /* immer voll lesbar. Das Halten gibt einen Schimmer, es schaltet keinen Text frei. */
  --lift:clamp(0, (var(--p,0) - var(--pt,0)) * 4, 1);
  position:relative;background:var(--panel);border-radius:var(--radius-m);padding:2.2rem 1.8rem;
  border:1px solid rgba(226,61,160,.16);box-shadow:0 20px 40px -30px rgba(58,27,46,.4);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.mantel-card::after{
  content:"";position:absolute;inset:-1px;border-radius:var(--radius-m);pointer-events:none;
  box-shadow:0 0 0 1px var(--gold), 0 18px 40px -26px rgba(226,61,160,.7);
  opacity:var(--lift);transition:opacity .12s linear;
}
.mantel-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -26px rgba(226,61,160,.4)}
.mantel-card svg{width:36px;height:36px;color:var(--fuchsia);margin-bottom:1rem;stroke-width:1.2}
.mantel-card h4{font-size:1.25rem;color:var(--fuchsia-deep)}
.mantel-card p{font-size:1.06rem;margin:0}
@media (max-width:900px){.mantel-grid{grid-template-columns:1fr}}

.hold{
  margin-top:1.9rem;display:inline-flex;align-items:center;gap:.9rem;
  background:none;border:1px solid var(--fuchsia-deep);color:var(--fuchsia-deep);
  font-family:var(--ff-body);font-size:1.06rem;padding:.8rem 1.5rem;border-radius:999px;cursor:pointer;user-select:none;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.hold:hover{background:var(--fuchsia-deep);color:#fff}
.hold__meter{width:58px;height:2px;background:rgba(171,45,120,.25);position:relative;overflow:hidden}
.hold__meter i{position:absolute;inset:0;background:currentColor;transform:scaleX(var(--p,0));transform-origin:left}
.hold-wrap.done .hold{opacity:.45;pointer-events:none}
.hold-done{font-family:var(--ff-display);font-style:italic;font-size:1.1rem;color:var(--fuchsia-deep);margin:1.9rem 0 0;opacity:0;transition:opacity .6s var(--ease)}
.hold-wrap.done .hold-done{opacity:1}

/* Das Schild haengt oben in der Reihe. Der Abstand darunter muss die Schildhoehe
   mittragen, sonst kleben die vier Saeulen daran. */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;position:relative;padding-top:5rem;margin-top:2.6rem}
.pillars__label{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  font-family:var(--ff-display);font-style:italic;font-size:1.06rem;color:#fff;
  background:linear-gradient(135deg,var(--fuchsia-deep),var(--ink));padding:.62rem 1.5rem;border-radius:999px;white-space:nowrap;
}
.pillar{background:var(--cream-warm);border-top:3px solid var(--gold);border-radius:0 0 var(--radius-s) var(--radius-s);padding:2rem 1.2rem 1.5rem;text-align:center}
.pillar .num{font-family:var(--ff-display);font-style:italic;color:var(--fuchsia-deep);font-size:1.6rem;display:block;margin-bottom:.3rem}
.pillar h5{margin:0 0 .5rem;font-size:1.12rem}
.pillar p{font-size:1.06rem;margin:0}
@media (max-width:900px){.pillars{grid-template-columns:1fr 1fr;padding-top:0}.pillars__label{position:static;transform:none;display:block;width:fit-content;margin:0 auto 1.4rem;grid-column:1 / -1}}
@media (max-width:540px){.pillars{grid-template-columns:1fr}}

/* ---------- angebote ---------- */
.primary{
  border:1px solid var(--gold);border-radius:var(--radius-l);background:rgba(246,233,222,.07);
  padding:clamp(1.8rem,4vw,3rem);display:grid;grid-template-columns:1.35fr .65fr;gap:2.2rem;align-items:center;margin-bottom:3rem;
}
.primary h3{font-size:clamp(1.5rem,2.8vw,2rem);color:var(--text-on-ink);max-width:20ch}
.primary p{margin:0;max-width:46ch}
.primary__side{text-align:right}
.primary__price{font-family:var(--ff-display);font-style:italic;font-size:1.6rem;color:var(--gold-light);display:block;margin-bottom:1rem}
@media (max-width:880px){.primary{grid-template-columns:1fr;gap:1.5rem}.primary__side{text-align:left}}

.offers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.offer-card{
  background:var(--ink-soft);border-radius:var(--radius-m);padding:2rem 1.7rem;
  border:1px solid rgba(232,208,144,.28);display:flex;flex-direction:column;overflow:hidden;
  transition:transform .45s var(--ease), border-color .45s var(--ease);
}
.offer-card__media{
  width:calc(100% + 3.4rem);max-width:none;margin:-2rem -1.7rem 1.5rem;
  aspect-ratio:16/9;object-fit:cover;display:block;
}
.offer-card:hover{transform:translateY(-6px);border-color:var(--gold-light)}
.offer-card__badge{
  align-self:flex-start;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--ink-plum);background:var(--gold-light);padding:.3rem .8rem;border-radius:999px;margin-bottom:1.1rem;
}
.offer-card h3{font-size:1.3rem;color:var(--text-on-ink);margin-bottom:.5rem}
.offer-card p{font-size:1.06rem;flex-grow:1}
.offer-card__meta{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin:1.2rem 0 1.4rem;padding-top:1rem;border-top:1px dashed rgba(232,208,144,.35);
  font-size:.96rem;color:var(--gold-pale);
}
.offer-card__meta strong{font-family:var(--ff-display);font-size:1.15rem;color:#fff}
@media (max-width:980px){.offers-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.offers-grid{grid-template-columns:1fr}}

/* ---------- ahnenlinie ---------- */
.ahnen-quote{font-family:var(--ff-display);font-style:italic;font-size:clamp(1.4rem,2.7vw,2.1rem);color:var(--fuchsia-deep);margin-bottom:1rem;line-height:1.3}
.thread{position:relative;max-width:640px;margin:3rem auto 3.4rem;padding-left:2.6rem}
.thread::before{
  content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(var(--gold),var(--fuchsia));
  transform:scaleY(var(--lp,0));transform-origin:top;
  /* Die Linie folgt dem Scrollen, deshalb nur ein Hauch Nachlauf statt einer langen Animation. */
  transition:transform .12s linear;
}
.thread li{position:relative;padding-bottom:2rem}
.thread li:last-child{padding-bottom:0}
.thread li::before{content:"";position:absolute;left:-2.6rem;top:.4rem;width:15px;height:15px;border-radius:50%;background:var(--cream-warm);border:2px solid var(--gold)}
.thread li::before{transition:background .25s ease, border-color .25s ease, transform .25s ease}
.thread li.erreicht::before{background:var(--fuchsia);border-color:var(--fuchsia);transform:scale(1.12)}
.thread b{font-family:var(--ff-display);font-style:italic;color:var(--fuchsia-deep);font-size:1.06rem;font-weight:500;display:block}
.thread h4{margin:.1rem 0 .3rem;font-size:1.12rem;font-family:var(--ff-body);font-weight:500}
.thread p{margin:0;font-size:1.06rem}

.why-seven{background:var(--panel);border-radius:var(--radius-m);padding:2rem 2.2rem;max-width:760px;margin:0 auto 3.6rem;border:1px solid rgba(226,61,160,.16);font-size:1.06rem}
.why-seven p{margin:0}
.why-seven strong{color:var(--fuchsia-deep)}

.ablauf{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;margin-bottom:3.6rem}
.ablauf-step{text-align:center;padding:0 .5rem}
.step-num{width:46px;height:46px;border-radius:50%;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--gold),var(--fuchsia-deep));color:#fff;font-family:var(--ff-display);font-style:italic;font-size:1.2rem}
.ablauf-step h4{font-size:1.12rem;margin-bottom:.4rem}
.ablauf-step p{font-size:1.06rem;margin:0}
@media (max-width:820px){.ablauf{grid-template-columns:1fr}}

.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-bottom:3.6rem}
.fit-card{background:var(--panel);border-radius:var(--radius-m);padding:1.8rem 2rem;border:1px solid rgba(226,61,160,.14)}
.fit-card h4{font-size:1.12rem;color:var(--fuchsia-deep);margin-bottom:.8rem}
.fit-card li{font-size:1.06rem;position:relative;padding:.35rem 0 .35rem 1.35rem;color:var(--text-on-cream-soft)}
.fit-card li::before{content:"✦";position:absolute;left:0;top:.35rem;color:var(--gold)}
@media (max-width:780px){.fit-grid{grid-template-columns:1fr}}

.invest-box{background:var(--ink);color:var(--text-on-ink);border-radius:var(--radius-l);padding:2.8rem clamp(1.6rem,4vw,3.4rem);text-align:center;max-width:640px;margin:0 auto 3.6rem;position:relative;overflow:hidden}
.invest-box::before{content:"";position:absolute;inset:0;opacity:.4;background:radial-gradient(circle at 20% 20%,var(--fuchsia-deep),transparent 60%),radial-gradient(circle at 80% 80%,var(--gold),transparent 55%)}
.invest-box > *{position:relative}
.invest-box h3{color:#fff}
.invest-box .price{font-family:var(--ff-display);font-style:italic;font-size:2.3rem;color:var(--gold-light);margin:.3rem 0 1rem}
.invest-box ul{text-align:left;max-width:340px;margin:0 auto 1.8rem}
.invest-box li{position:relative;padding:.35rem 0 .35rem 1.35rem;font-size:1.06rem;color:var(--text-on-ink-soft)}
.invest-box li::before{content:"✦";position:absolute;left:0;top:.35rem;color:var(--gold-light)}

.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid rgba(226,61,160,.22)}
.faq summary{cursor:pointer;list-style:none;padding:1.3rem 0;display:flex;justify-content:space-between;align-items:baseline;gap:1.4rem;font-family:var(--ff-display);font-size:1.16rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--ff-body);font-size:1.4rem;color:var(--fuchsia-deep);transition:transform .35s var(--ease);flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 1.4rem;font-size:1.06rem;max-width:62ch}
.faq .a p:last-child{margin:0}

/* ---------- über mich ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
/* Der Text ist deutlich hoeher als das Bild. Statt es mittig schwimmen zu lassen,
   laeuft es beim Lesen oben mit. */
.about-grid > :first-child{position:sticky;top:calc(var(--nav-h) + 2rem)}
.about-photo{width:100%;max-width:400px;aspect-ratio:2/3;object-fit:cover;object-position:50% 50%;border-radius:var(--radius-l);border:4px solid var(--gold);box-shadow:0 30px 60px -32px rgba(58,27,46,.5)}
.about-grid h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.about-grid h2 em{font-style:italic;color:var(--fuchsia-deep)}
.about-list{margin:1.5rem 0 0}
.about-list li{position:relative;padding:.4rem 0 .4rem 1.4rem;font-size:1.06rem;color:var(--text-on-cream-soft)}
.about-list li::before{content:"✦";position:absolute;left:0;top:.4rem;color:var(--gold)}
.about-sig{font-family:var(--ff-display);font-style:italic;color:var(--fuchsia-deep);margin-top:1.5rem;font-size:1.12rem}
@media (max-width:880px){.about-grid{grid-template-columns:1fr}.about-photo{max-width:340px;margin-inline:auto}
  .about-grid > :first-child{position:static}}

/* ---------- stimmen ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.testi-card{background:var(--ink-soft);border-radius:var(--radius-m);padding:1.8rem;border:1px solid rgba(232,208,144,.24);margin:0}
.testi-stars{color:var(--gold-light);letter-spacing:.14em;margin-bottom:.8rem;font-size:.96rem}
.testi-card p{font-size:1.06rem;font-style:italic;font-family:var(--ff-display)}
.testi-card cite{display:block;font-style:normal;margin-top:.9rem;font-size:1.06rem;letter-spacing:.06em;color:var(--gold-light)}
@media (max-width:1000px){.testi-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.testi-grid{grid-template-columns:1fr}}

/* ---------- digitale begleiter ---------- */
.digi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.digi-card{background:var(--panel);border-radius:var(--radius-m);border:1px solid rgba(226,61,160,.16);border-top:4px solid var(--gold);box-shadow:0 20px 40px -30px rgba(58,27,46,.35);padding:2rem 1.6rem 1.8rem;display:flex;flex-direction:column}
.digi-card__tag{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fuchsia-deep);background:rgba(226,61,160,.1);padding:.3rem .75rem;border-radius:999px;width:fit-content;margin-bottom:.9rem;font-weight:600}
.digi-card h4{font-size:1.15rem;color:var(--fuchsia-deep);margin-bottom:.5rem}
.digi-card p{font-size:1.06rem;flex-grow:1}
.digi-card__price{font-family:var(--ff-display);font-style:italic;font-size:1.2rem;color:var(--text-on-cream);margin:.9rem 0 1.2rem;padding-top:.9rem;border-top:1px dashed rgba(226,61,160,.25)}
@media (max-width:920px){.digi-grid{grid-template-columns:1fr}}

/* ---------- kontakt ---------- */
.kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.kontakt-grid h2{font-size:clamp(1.9rem,3.8vw,2.8rem);color:var(--text-on-ink);max-width:19ch}
.kontakt-alt{font-size:1.06rem;margin-top:1.8rem}
.kontakt-alt a{color:var(--gold-pale)}
.form-card{background:rgba(246,233,222,.07);border:1px solid rgba(232,208,144,.32);border-radius:var(--radius-l);padding:clamp(1.7rem,4vw,2.5rem);backdrop-filter:blur(6px)}
.field{margin-bottom:1.2rem}
.field label{display:block;font-size:.8rem;letter-spacing:.06em;color:var(--gold-pale);margin-bottom:.45rem}
.field input,.field textarea{
  width:100%;padding:.85rem 1rem;border-radius:var(--radius-s);border:1px solid rgba(246,233,222,.32);
  background:rgba(88,12,63,.32);color:var(--text-on-ink);font-family:var(--ff-body);font-size:1.06rem;transition:border-color .3s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:rgba(246,233,222,.6)}
.field input:focus,.field textarea:focus{border-color:var(--gold-light);outline:none}
.field textarea{min-height:100px;resize:vertical}
.form-card .btn{width:100%}
.form-note{font-size:1.06rem;margin:1rem 0 0;line-height:1.5}
.form-done{display:none;font-family:var(--ff-display);font-style:italic;font-size:1.16rem;color:var(--gold-light);line-height:1.5}
.form-done.on{display:block}
@media (max-width:880px){.kontakt-grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{background:var(--ink-softer);color:var(--text-on-ink-soft);padding:3.4rem 0 2rem;text-align:center;font-size:1.06rem}
footer .brand{justify-content:center;margin-bottom:1rem}
footer nav{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.3rem}
footer nav a{text-decoration:none;transition:color .3s var(--ease)}
footer nav a:hover{color:var(--gold-light)}
footer nav.legal{font-size:1.06rem}
.footer-social{display:flex;gap:1rem;justify-content:center;margin-bottom:1.3rem}
.footer-social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(246,233,222,.35);display:flex;align-items:center;justify-content:center;transition:border-color .3s var(--ease),color .3s var(--ease)}
.footer-social a:hover{border-color:var(--gold-light);color:var(--gold-light)}
.footer-social svg{width:18px;height:18px}
.fine{margin:0;opacity:.85}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .rv{opacity:1;transform:none}
  .thread::before{transform:scaleY(1)}
  .thread li::before{background:var(--fuchsia);border-color:var(--fuchsia)}
  .hold-wrap{--p:1}
  .mantel-card{--lift:1}
  .noise{opacity:.15}
}

/* ============ Rechtsseiten: Datenschutz und Impressum ============ */
.legal-hero{
  background:
    radial-gradient(ellipse 60% 50% at 12% 0%, rgba(232,208,144,.16), transparent 60%),
    radial-gradient(ellipse 55% 60% at 92% 100%, rgba(226,61,160,.22), transparent 60%),
    var(--ink);
  color:var(--text-on-ink);padding:calc(var(--nav-h) + clamp(2.6rem,6vw,4.6rem)) 0 clamp(2.6rem,6vw,4.2rem);
}
.legal-hero h1{font-size:clamp(2rem,4.6vw,3.2rem);max-width:24ch;margin-bottom:.5em}
.legal-hero p{color:var(--text-on-ink-soft);max-width:60ch;margin:0}
.legal-hero .eyebrow{color:var(--gold-pale)}

.legal-body{background:var(--cream);padding-block:clamp(2.6rem,6vw,4.6rem) clamp(4rem,8vw,7rem)}
.legal-layout{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}

.toc{position:sticky;top:calc(var(--nav-h) + 1.6rem);max-height:calc(100vh - var(--nav-h) - 3.2rem);overflow-y:auto;
  border-left:1px solid rgba(226,61,160,.26);padding-left:1.2rem}
.toc h2{font-family:var(--ff-body);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--fuchsia-deep);margin-bottom:1rem}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:none}
.toc li{margin-bottom:.5rem}
.toc a{display:flex;gap:.55rem;text-decoration:none;font-size:1.06rem;line-height:1.4;color:var(--text-on-cream-soft);transition:color .3s var(--ease)}
.toc a span{color:var(--fuchsia-deep);flex-shrink:0;font-variant-numeric:tabular-nums;min-width:1.5em}
.toc a:hover{color:var(--text-on-cream)}
.toc a.here{color:var(--fuchsia-deep);font-weight:500}
.toc::-webkit-scrollbar{width:6px}
.toc::-webkit-scrollbar-thumb{background:rgba(171,45,120,.3);border-radius:3px}

.ds-sec{padding-bottom:clamp(2rem,4vw,3.2rem);scroll-margin-top:calc(var(--nav-h) + 1.4rem)}
.ds-sec + .ds-sec{border-top:1px solid rgba(226,61,160,.18);padding-top:clamp(2rem,4vw,3.2rem)}
.ds-sec h2{font-size:clamp(1.35rem,2.4vw,1.85rem);display:flex;gap:.6rem;align-items:baseline;margin-bottom:1.1em}
.ds-num{color:var(--fuchsia-deep);font-variant-numeric:tabular-nums;flex-shrink:0}
.ds-sec h3{font-size:1.12rem;font-family:var(--ff-body);font-weight:500;color:var(--fuchsia-deep);
  margin:2.2rem 0 .7rem;display:flex;gap:.5rem}
.ds-let{flex-shrink:0}
.legal-body p{color:var(--text-on-cream-soft);font-size:1.06rem;max-width:74ch}
.legal-body a{color:var(--fuchsia-deep);overflow-wrap:anywhere}
.ds-list{margin:0 0 1em;padding:0}
.ds-list li{position:relative;padding:.32rem 0 .32rem 1.5rem;color:var(--text-on-cream-soft);font-size:1.06rem;max-width:74ch}
.ds-list li::before{content:"✦";position:absolute;left:0;top:.32rem;color:var(--gold)}
.ds-address{
  font-style:normal;background:var(--panel);border:1px solid rgba(226,61,160,.18);border-left:3px solid var(--gold);
  border-radius:var(--radius-m);padding:1.5rem 1.7rem;font-size:1.06rem;line-height:1.9;color:var(--text-on-cream);
  max-width:46ch;margin:0 0 1.2em;
}
.legal-note{
  background:var(--cream-warm);border-radius:var(--radius-m);padding:1.4rem 1.6rem;margin-bottom:2.6rem;
  font-size:1.06rem;color:var(--text-on-cream-soft);max-width:74ch;
}
.legal-note strong{color:var(--fuchsia-deep)}
.back-top{margin-top:3rem}
@media (max-width:1000px){
  .legal-layout{grid-template-columns:1fr}
  .toc{position:static;max-height:none;border-left:none;border-top:1px solid rgba(226,61,160,.26);
    border-bottom:1px solid rgba(226,61,160,.26);padding:1.4rem 0;margin-bottom:2rem}
  .toc ol{columns:2;column-gap:2rem}
  .toc li{break-inside:avoid}
}
@media (max-width:620px){.toc ol{columns:1}}

/* ============ Programmseiten ============ */
.prog-hero{
  background:
    radial-gradient(ellipse 55% 50% at 8% 0%, rgba(232,208,144,.16), transparent 60%),
    radial-gradient(ellipse 55% 60% at 95% 100%, rgba(226,61,160,.22), transparent 60%),
    var(--ink);
  color:var(--text-on-ink);padding:calc(var(--nav-h) + clamp(2.4rem,6vw,4.4rem)) 0 clamp(3rem,7vw,5rem);
}
.prog-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.prog-hero .eyebrow{color:var(--gold-pale)}
.prog-hero h1{font-size:clamp(2rem,4.4vw,3.1rem);max-width:17ch;margin-bottom:.5em}
.prog-hero h1 em{font-style:italic;color:var(--gold-light)}
.prog-hero p{color:var(--text-on-ink-soft);max-width:48ch}
.prog-hero__cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.9rem}
.prog-hero__img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-l);border:3px solid var(--gold);box-shadow:0 30px 60px -34px rgba(40,4,28,.7)}
@media (max-width:880px){.prog-hero__grid{grid-template-columns:1fr}.prog-hero__img{max-width:420px}}

/* ---------- Der Kopf der Startseite als Film ----------
   Das Video liegt vollflächig hinter dem Text. Damit die Schrift auf jedem
   Einzelbild lesbar bleibt, liegt ein Schleier darüber, der links am dichtesten ist. */
.prog-hero--film{position:relative;overflow:hidden;isolation:isolate;
  min-height:min(80vh,760px);display:flex;align-items:center}
.prog-hero--film .prog-hero__grid{grid-template-columns:minmax(0,1fr)}
.prog-hero__text{max-width:min(46%,34rem)}
/* Der Film ist breiter als der Kopfbereich und sitzt links angeschlagen. Dadurch
   ragt seine rechte Seite aus dem Bild und die Frau rueckt nach rechts, weg von
   der Ueberschrift. Bei 16:9 gaebe es sonst gar keinen waagerechten Spielraum,
   object-position allein bliebe also wirkungslos. */
.prog-hero__film{position:absolute;top:0;bottom:0;left:0;right:auto;
  width:122%;height:100%;z-index:-2;
  object-fit:cover;object-position:50% 24%;pointer-events:none}
.prog-hero__schleier{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(95deg, rgba(74,7,41,.95) 0%, rgba(74,7,41,.90) 30%,
                           rgba(80,8,45,.80) 46%, rgba(122,10,68,.52) 64%,
                           rgba(184,14,102,.26) 84%, rgba(184,14,102,.16) 100%),
    linear-gradient(180deg, rgba(90,9,50,.62) 0%, rgba(90,9,50,0) 24%),
    linear-gradient(0deg, rgba(90,9,50,.5) 0%, rgba(90,9,50,0) 22%)}
@media (max-width:880px){
  .prog-hero--film{min-height:min(88vh,680px)}
  .prog-hero__text{max-width:none}
  /* hochkant steht der Text ueber dem ganzen Bild, da darf sie mittig bleiben */
  .prog-hero__film{width:100%;object-position:56% 14%}
  /* hochkant steht der Text über dem ganzen Bild, der Schleier deckt deshalb flächig */
  .prog-hero__schleier{background:
    linear-gradient(180deg, rgba(74,7,41,.9) 0%, rgba(74,7,41,.82) 46%, rgba(90,9,50,.74) 100%)}
}
@media (prefers-reduced-motion: reduce){.prog-hero__film{}}

.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.split--flip{grid-template-columns:1.1fr .9fr}
.split img{width:100%;object-fit:cover;border-radius:var(--radius-l)}
.split--flip img{order:2}
@media (max-width:880px){.split,.split--flip{grid-template-columns:1fr}.split--flip img{order:0}.split img{max-width:460px;margin-inline:auto}}

.pull{
  font-family:var(--ff-display);font-style:italic;font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.35;
  text-align:center;max-width:22ch;margin:clamp(2.4rem,5vw,3.6rem) auto 0;color:var(--fuchsia-deep);
}
.on-ink .pull{color:var(--gold-light)}

.rhythm{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.rhythm div{border-top:2px solid var(--gold);padding-top:1.2rem}
.rhythm .sym{font-size:1.4rem;color:var(--fuchsia-deep);display:block;margin-bottom:.5rem;line-height:1}
.rhythm p{margin:0;font-size:1.06rem}
@media (max-width:880px){.rhythm{grid-template-columns:1fr;gap:1.4rem}}

.modules{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.module{background:var(--ink-soft);border:1px solid rgba(232,208,144,.28);border-radius:var(--radius-m);padding:2.1rem 1.8rem;display:flex;flex-direction:column}
.module .num{font-family:var(--ff-body);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-pale);margin-bottom:.9rem;font-weight:600}
.module h3{font-size:1.28rem;color:var(--text-on-ink);margin-bottom:.6rem}
.module p{margin:0;font-size:1.06rem}
@media (max-width:980px){.modules{grid-template-columns:1fr}}

.care{margin:0}
.care li{display:grid;grid-template-columns:2.1rem 1fr;gap:.9rem;align-items:start;padding:1rem 0;border-bottom:1px solid rgba(58,27,46,.14)}
.care li:first-child{border-top:1px solid rgba(58,27,46,.14)}
.care .sym{font-size:1.15rem;line-height:1.4}
.care p{margin:0;font-size:1.06rem}

.gains{columns:2;column-gap:3rem;margin:0}
.gains li{break-inside:avoid;position:relative;padding:.5rem 0 .5rem 1.5rem;font-size:1.06rem;color:var(--text-on-cream-soft)}
.gains li::before{content:"✦";position:absolute;left:0;top:.5rem;color:var(--gold)}
@media (max-width:820px){.gains{columns:1}}

.invest-box .price-note{font-size:1.06rem;color:var(--text-on-ink-soft);margin:-.4rem 0 1.4rem}

/* ---------- Zahlenreihe und Zeitplan auf Programmseiten ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:3rem}
.stats div{text-align:center;border-top:1px solid rgba(232,208,144,.3);padding-top:1.2rem}
.stats b{display:block;font-family:var(--ff-display);font-style:italic;font-size:clamp(2rem,3.6vw,2.9rem);color:var(--gold-light);line-height:1}
.stats span{font-size:.96rem;color:var(--text-on-ink-soft);display:block;margin-top:.4rem}
.on-cream .stats div{border-color:rgba(58,27,46,.16)}
.on-cream .stats b{color:var(--fuchsia-deep)}
.on-cream .stats span{color:var(--text-on-cream-soft)}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr;gap:1.2rem}}

.days{display:grid;gap:1.4rem}
.day{display:grid;grid-template-columns:9rem 1fr;gap:1.6rem;background:var(--panel);border:1px solid rgba(226,61,160,.16);
  border-left:3px solid var(--gold);border-radius:var(--radius-m);padding:1.7rem 1.9rem}
.day__label{font-family:var(--ff-display);font-style:italic;font-size:1.25rem;color:var(--fuchsia-deep)}
.day h3{font-size:1.1rem;font-family:var(--ff-body);font-weight:500;margin:0 0 .7rem}
.day li{position:relative;padding:.28rem 0 .28rem 1.35rem;font-size:1.06rem;color:var(--text-on-cream-soft)}
.day li::before{content:"✦";position:absolute;left:0;top:.28rem;color:var(--gold)}
.day li b{color:var(--text-on-cream);font-weight:500}
@media (max-width:760px){.day{grid-template-columns:1fr;gap:.7rem}}

.groups{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem 3rem}
.groups h3{font-size:1.12rem;font-family:var(--ff-body);font-weight:600;color:var(--fuchsia-deep);
  letter-spacing:.02em;margin-bottom:.8rem;padding-bottom:.6rem;border-bottom:1px solid rgba(226,61,160,.22)}
.groups li{position:relative;padding:.42rem 0 .42rem 1.5rem;font-size:1.06rem;color:var(--text-on-cream-soft)}
.groups li::before{content:"✦";position:absolute;left:0;top:.42rem;color:var(--gold)}
.groups li b{color:var(--text-on-cream);font-weight:500}
@media (max-width:820px){.groups{grid-template-columns:1fr}}

/* ---------- Faktenzeile, Galerie und Haken-Liste ---------- */
.facts{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0 0}
.facts span{font-size:.8rem;letter-spacing:.04em;color:var(--gold-pale);
  border:1px solid rgba(232,208,144,.4);border-radius:999px;padding:.4rem .95rem}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.gallery img{width:100%;object-fit:cover;border-radius:var(--radius-m);display:block;aspect-ratio:3/4}
.gallery figure{margin:0}
.gallery figcaption{font-size:.8rem;color:var(--text-on-cream-soft);margin-top:.6rem}
@media (max-width:860px){.gallery{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.gallery{grid-template-columns:1fr}.gallery img{aspect-ratio:4/3}}

.checks{columns:2;column-gap:3rem;margin:0}
.checks li{break-inside:avoid;position:relative;padding:.55rem 0 .55rem 1.9rem;font-size:1.06rem}
.checks li::before{content:"✓";position:absolute;left:0;top:.55rem;color:var(--gold-light);font-weight:600}
.on-cream .checks li::before{color:var(--fuchsia-deep)}
@media (max-width:820px){.checks{columns:1}}

/* ---------- Schlagwort-Chips auf hellem Grund ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0 0}
.chips span{font-size:1.06rem;color:var(--fuchsia-deep);background:rgba(226,61,160,.08);
  border:1px solid rgba(226,61,160,.22);padding:.4rem 1rem;border-radius:999px}
.on-ink .chips span{color:var(--gold-pale);background:rgba(232,208,144,.1);border-color:rgba(232,208,144,.35)}

/* unsichtbares Feld gegen Spam-Eintraege */
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}


/* ---------- Zurück zum Seitenanfang ----------
   Schwebt unten rechts über allem. Der Knopf muss sowohl auf Creme als auch auf
   den magentafarbenen Abschnitten stehen, deshalb ein satter eigener Grund mit
   goldenem Ring statt einer durchscheinenden Fläche. */
.nach-oben{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:90;
  width:3rem;height:3rem;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;padding:0;
  background:var(--ink-plum);color:var(--gold-pale);
  border:1px solid var(--gold);
  box-shadow:0 12px 28px -10px rgba(40,4,28,.55);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.nach-oben.sichtbar{opacity:1;visibility:visible;transform:none}
.nach-oben svg{width:1.25rem;height:1.25rem;display:block}
.nach-oben:hover{background:var(--ink);color:#fff}
.nach-oben:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  .nach-oben{transition:none;transform:none}
}


/* ---------- Hinweis auf mit KI erzeugte Bilder ----------
   Unaufdringlich, aber lesbar. Die Offenlegung nuetzt nur, wenn man sie findet. */
.bild-hinweis{font-size:.86rem;letter-spacing:.02em;margin:1rem 0 0}
.on-cream .bild-hinweis{color:var(--text-on-cream-soft)}
.on-ink .bild-hinweis{color:var(--text-on-ink-soft)}
.bild-hinweis a{color:inherit;text-underline-offset:3px}

/* im Kopffilm sitzt der Hinweis unten rechts, ausserhalb des Textes */
.prog-hero--film .bild-hinweis{
  position:absolute;bottom:clamp(.9rem,2.5vw,1.6rem);
  /* buendig mit der linken Kante des Textkoerpers. Ohne max-width:none wuerde die
     Breitenbegrenzung der Absaetze den Hinweis in die Mitte schieben. */
  left:calc((100% - var(--container)) / 2);right:auto;margin:0;width:auto;max-width:none;z-index:1;
  font-size:.8rem;color:var(--text-on-ink);
  /* Links ist der Schleier am dichtesten. Dort traegt der Hinweis von selbst
     und braucht keinen eigenen Kasten, der im Bild stoeren wuerde. */
  text-shadow:0 1px 8px rgba(74,7,41,.8)}
@media (max-width:880px){
  /* Hochkant laeuft der Hinweis einfach im Text mit, unter den Knoepfen.
     Er steht im Markup in der Textspalte, deshalb sitzt er dort richtig. */
  .prog-hero--film .bild-hinweis{position:static;margin:1.8rem 0 0;
    text-shadow:none;max-width:none}
}