/* ===== Schriften (lokal, keine Verbindung zu Google) ===== */
@font-face{font-family:"Allura";src:url("/assets/fonts/allura-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url("/assets/fonts/jost-latin-300-normal.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Jost";src:url("/assets/fonts/jost-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url("/assets/fonts/jost-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Jost";src:url("/assets/fonts/jost-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}

/* ===== Farben ===== */
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --creme:#FBF7F1; --weiss:#FFFDF9; --sand:#F5ECDF; --tinte:#4A3F37; --grau:#7A6D62; --linie:#E8DCC9;
  --gold:#B07E36; --gold-text:#8E6326; --gold-hell:#E2C48B;
  --gold-verlauf:linear-gradient(100deg,#A8762E 0%,#D3A961 52%,#B3833A 100%);
  --tuerkis:#1E8FB0; --pink:#D6407D; --orange:#E39232;
  --akzent:var(--gold); --akzent-text:var(--gold-text);
  --schrift:"Jost","Avenir Next","Segoe UI",system-ui,sans-serif;
  --script:"Allura","Snell Roundhand","Brush Script MT",cursive;
  --schatten:0 22px 44px -28px rgba(120,86,40,.45);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --creme:#1F1B17; --weiss:#26211C; --sand:#2A241E; --tinte:#F0E8DC; --grau:#BFB2A3; --linie:#3D352D;
    --gold-text:#D9B470;
  }
}
:root[data-theme="dark"]{
  --creme:#1F1B17; --weiss:#26211C; --sand:#2A241E; --tinte:#F0E8DC; --grau:#BFB2A3; --linie:#3D352D; --gold-text:#D9B470;
}
.welt-balance{--akzent:var(--gold)}
.welt-wasser{--akzent:var(--tuerkis)}
.welt-farbe{--akzent:var(--pink)}

/* ===== Grundlagen ===== */
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 90px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--creme);color:var(--tinte);font:300 1.0625rem/1.8 var(--schrift);letter-spacing:.02em;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-text);text-underline-offset:.2em}
strong{font-weight:500}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--schrift);font-weight:400;text-transform:uppercase;letter-spacing:.28em;line-height:1.5;margin:0 0 .8em;color:var(--tinte)}
h1{font-size:clamp(1.05rem,1.8vw,1.4rem)}
h2{font-size:clamp(.98rem,1.4vw,1.12rem)}
h3{font-size:.92rem;letter-spacing:.24em}
p,ul,ol,dl{margin:0 0 1.1em}
.sprung{position:absolute;left:-999px;top:0;background:var(--tinte);color:var(--creme);padding:10px 16px;z-index:50}
.sprung:focus{left:12px;top:12px}
.innen{max-width:1160px;margin:0 auto;padding:0 28px}
.text{max-width:62ch}
.lead{font-size:1.1rem;color:var(--tinte);max-width:48ch}
.mitte{text-align:center;margin-left:auto;margin-right:auto}
mark.ph{background:#FFF1A8;color:#5A4700;padding:0 .25em;border-radius:4px;border-bottom:1px dashed currentColor;letter-spacing:0;text-transform:none;font-family:var(--schrift)}
.ico{width:1em;height:1em;flex:none;stroke-width:1.4}

/* Schreibschrift */
.schrift-gross,.schrift-titel,.h2-optik,.abschnitt-kopf h2,.zitat{font-family:var(--script);font-weight:400;text-transform:none;letter-spacing:0;background:var(--gold-verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
.schrift-gross{display:block;font-size:clamp(4.6rem,10vw,8.4rem);line-height:.95;margin:0 0 .05em;padding:.08em .15em .05em 0}
.schrift-titel,.h2-optik,.abschnitt-kopf h2{font-size:clamp(2.8rem,5.4vw,4.2rem);line-height:1.08;margin:0 0 .35em;padding:.05em .1em .05em 0}
.kicker{display:block;font-size:.88rem;font-weight:400;letter-spacing:.42em;text-transform:uppercase;color:var(--tinte);margin-bottom:1.2em}
.goldlinie{display:block;width:56px;height:1px;background:var(--gold);margin:26px 0 28px;border:0}
.mitte .goldlinie,.goldlinie.mitte{margin-left:auto;margin-right:auto}

/* Etiketten (frühere Pillen) */
.pillen{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:18px}
.pille{display:inline-flex;align-items:center;gap:.6em;font-size:.72rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--akzent)}
.pille::before{content:"";width:18px;height:1px;background:currentColor}
.pille-rand{color:var(--grau)}

/* ===== Knöpfe ===== */
.knopf{display:inline-flex;align-items:center;gap:.9em;background:var(--gold-verlauf);background-size:160% 100%;background-position:0 0;color:#fff;text-decoration:none;font-weight:500;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;padding:1.15em 2.2em;border-radius:999px;border:0;line-height:1.2;white-space:nowrap;box-shadow:0 10px 24px -14px rgba(140,98,36,.8);transition:background-position .5s,transform .25s,box-shadow .25s}
.knopf:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(140,98,36,.85)}
.knopf .ico{transition:transform .25s}
.knopf:hover .ico{transform:translateX(4px)}
.knopf-rand,.knopf-hell,.knopf-rand-hell{background:transparent;color:var(--gold-text);box-shadow:inset 0 0 0 1px var(--gold)}
.knopf-rand:hover,.knopf-hell:hover,.knopf-rand-hell:hover{background:var(--gold-verlauf);color:#fff;box-shadow:0 10px 24px -14px rgba(140,98,36,.8)}
.knopf-klein{padding:.95em 1.7em;font-size:.72rem}
.knopfreihe{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
@media (prefers-reduced-motion:no-preference){
  .knopf-glow{animation:glow 3.2s ease-in-out infinite}
  .knopf-glow:hover{animation-play-state:paused}
  @keyframes glow{0%,100%{box-shadow:0 10px 24px -14px rgba(140,98,36,.8),0 0 0 0 rgba(200,160,90,.35)}55%{box-shadow:0 10px 24px -14px rgba(140,98,36,.8),0 0 0 14px rgba(200,160,90,0)}}
}

/* ===== Angebotsleiste ===== */
.angebot-leiste{background:var(--gold-verlauf);color:#fff;font-size:.85rem;letter-spacing:.06em}
.angebot-leiste .leiste-innen{max-width:1160px;margin:0 auto;padding:9px 56px 9px 24px;position:relative;display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.angebot-leiste .pille{color:#fff}
.angebot-leiste a{color:inherit;font-weight:500}
.angebot-leiste button{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:0;color:inherit;font-size:1.4rem;line-height:1;padding:6px 10px;cursor:pointer}

/* ===== Kopfbereich ===== */
.kopf{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--creme) 92%,transparent);backdrop-filter:blur(10px);padding-top:env(safe-area-inset-top,0px)}
.kopf-innen{max-width:1240px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:28px}
.marke{margin-right:auto;display:flex}
.marke .marke-schrift{height:40px;width:auto}
.kopf nav{display:flex;align-items:center;gap:30px}
.kopf nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.kopf nav ul a{position:relative;white-space:nowrap;color:var(--tinte);text-decoration:none;font-size:.72rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;padding:10px 0}
.kopf nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .3s}
.kopf nav ul a:hover::after,.kopf nav ul a[aria-current="page"]::after{transform:scaleX(1)}
.menue-knopf{display:none;background:none;border:1px solid var(--gold);border-radius:999px;padding:8px 20px;font:inherit;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text);cursor:pointer}
@media (max-width:1180px){
  .menue-knopf{display:block}
  .kopf nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--creme);border-bottom:1px solid var(--linie);flex-direction:column;align-items:flex-start;padding:12px 28px 28px;box-shadow:var(--schatten)}
  .kopf.offen nav{display:flex}
  .kopf nav ul{flex-direction:column;gap:2px;width:100%}
  .kopf nav ul a{display:block;padding:12px 0;font-size:.85rem}
}

/* ===== Wellen ===== */
.welle-bild{position:relative;z-index:2;pointer-events:none;margin:-2vw 0;overflow:hidden}
.welle-bild img{width:112%;max-width:none;margin-left:-6%;height:auto}
.welle-gespiegelt img{transform:scaleX(-1)}
.welle-unten{position:absolute;left:0;right:0;bottom:-3vw;margin:0}

/* ===== Fotos und Bildplätze ===== */
.foto{width:100%;height:100%;object-fit:cover}
.foto-leer{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;background:radial-gradient(circle at 60% 45%,var(--weiss),var(--sand) 75%)}
.foto-leer img{width:70%;max-width:520px;height:auto;opacity:.95}

/* ===== Startseite: Kopfbereich ===== */
.held-start{position:relative;text-align:center;padding:40px 0 0;overflow:hidden}
.held-start .logo-gross{width:min(560px,82vw);margin:0 auto 6px}
.held-start h1{max-width:46ch;margin:0 auto;font-size:clamp(.86rem,1.3vw,1.02rem);letter-spacing:.3em;line-height:1.9}
.held-start .schrift-gross{font-size:clamp(3.8rem,7.5vw,6rem);display:inline-block}
.held-start .lead{margin:.2em auto 1.6em;max-width:44ch}
.medaillons{display:flex;justify-content:center;gap:clamp(28px,8vw,120px);list-style:none;padding:0;margin:56px 0 0;flex-wrap:wrap}
.medaillons a{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--tinte)}
.medaillons .titel{margin-top:22px;font-size:.92rem;letter-spacing:.32em;text-transform:uppercase}
.medaillons .titel::after{content:"";display:block;width:40px;height:1px;background:var(--gold);margin:14px auto 0}
.medaillon{width:136px;height:136px;border-radius:50%;padding:3px;background:var(--gold-verlauf);box-shadow:0 18px 34px -20px rgba(120,86,40,.6);transition:transform .4s}
.medaillon > *{width:100%;height:100%;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--weiss)}
.medaillon .foto,.medaillon .foto-leer{border-radius:50%}
.medaillon .foto-leer img{width:78%}
a:hover .medaillon{transform:translateY(-6px) scale(1.03)}
.weiter-entdecken{display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none;color:var(--tinte);font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;margin:0 auto;padding:12px 0 40px;position:relative;z-index:3}
.weiter-entdecken span{width:38px;height:38px;border-radius:50%;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold)}
@media (prefers-reduced-motion:no-preference){.weiter-entdecken span{animation:hupf 2.4s ease-in-out infinite}@keyframes hupf{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}}

/* ===== Unterseiten: Kopfbereich ===== */
.seiten-held{position:relative;overflow:hidden;min-height:min(86vh,760px);display:flex;align-items:center;padding:70px 0 clamp(120px,14vw,190px);background:var(--creme)}
.seiten-held .held-bild{position:absolute;top:0;right:0;bottom:0;width:64%;z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%),linear-gradient(0deg,transparent 0%,#000 30%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,#000 38%),linear-gradient(0deg,transparent 0%,#000 30%);mask-composite:intersect}
.seiten-held .held-bild .foto,.seiten-held .held-bild .foto-leer{position:absolute;inset:0}
.seiten-held .held-bild .foto-leer{background:radial-gradient(circle at 62% 42%,var(--weiss),var(--sand) 80%)}
.seiten-held .held-bild .foto-leer img{width:min(64%,560px);transform:translateX(12%)}
.seiten-held .innen{position:relative;z-index:2;width:100%}
.seiten-held .held-text{max-width:560px}
.seiten-held h1{font-size:clamp(1rem,1.8vw,1.35rem);letter-spacing:.32em;margin:0 0 0 .2em;max-width:30ch}
.seiten-held .lead{margin-bottom:2em}
.seiten-held .welle-unten{bottom:-2.5vw}

/* ===== Abschnitte ===== */
.abschnitt{padding:clamp(72px,9vw,120px) 0;position:relative}
.creme{background:var(--sand)}
.nebel{background:var(--weiss)}
.abschnitt-kopf{margin-bottom:clamp(36px,5vw,60px);max-width:720px}
.abschnitt-kopf.rechts{margin-left:auto}
.abschnitt-kopf.mitte{text-align:center}
.abschnitt-kopf .lead.mitte,.abschnitt-kopf.mitte .lead{margin-left:auto;margin-right:auto}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);align-items:center}
.zwei-oben{align-items:start}

/* Frühere dunkle und schräge Blöcke: jetzt hell und ruhig */
.schraeg,.schraeg-oben{clip-path:none}
.dunkel{background:var(--weiss)}
.dunkel h2:not(.h2-optik){color:var(--tinte)}
.deko,.punkte{display:none}
.saeulen{display:grid;gap:22px;list-style:none;padding:0;margin:0}
.saeulen li{display:flex;gap:22px;align-items:center}
.saeulen h3{margin:0 0 .3em}
.saeulen p{margin:0;color:var(--grau)}

/* Runde Icon-Flächen */
.rund{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--weiss);color:var(--akzent);flex:none;width:82px;height:82px;font-size:2rem;box-shadow:inset 0 0 0 1px var(--gold-hell),0 14px 28px -20px rgba(120,86,40,.6)}
.rund-gross{width:96px;height:96px;font-size:2.3rem}
.ico-gross{font-size:2.2rem;color:var(--gold);margin-bottom:14px}

/* Icon-Spalten */
.icon-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px)}
.icon-karte{text-align:center}
.icon-karte .rund{margin-bottom:24px}
.icon-karte h3::after,.schritt h3::after,.thema h2::after{content:"";display:block;width:36px;height:1px;background:var(--gold);margin:14px auto 0}
.icon-karte p{color:var(--grau);max-width:28ch;margin:0 auto}

/* Bildkarten */
.bildkarten{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.bildkarten-zwei{grid-template-columns:repeat(2,1fr)}
.bildkarte{display:flex;flex-direction:column;text-decoration:none;color:var(--tinte);background:var(--weiss);border-radius:22px;overflow:hidden;box-shadow:0 0 0 1px var(--linie);transition:transform .4s,box-shadow .4s}
.bildkarte-bild{position:relative;aspect-ratio:4/3;overflow:hidden}
.bildkarte-bild .foto,.bildkarte-bild .foto-leer{position:absolute;inset:0;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.bildkarte-text{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}
.bildkarte h2,.bildkarte h3{font-size:.95rem;margin:.4em 0 .8em}
.bildkarte p{color:var(--grau);font-size:.98rem}
.bildkarte .weiter,.kombi .weiter{margin-top:auto;display:inline-flex;align-items:center;gap:.6em;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--gold-text)}
.bildkarte:hover{transform:translateY(-6px);box-shadow:0 0 0 1px var(--gold-hell),var(--schatten)}
.bildkarte:hover .foto,.bildkarte:hover .foto-leer{transform:scale(1.06)}

/* Schritte */
.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;list-style:none;padding:0;margin:0;position:relative}
.schritte::before{content:"";position:absolute;top:48px;left:18%;right:18%;height:1px;background:var(--gold-hell)}
.schritt{text-align:center;position:relative}
.schritt .rund{margin-bottom:22px;background:var(--creme)}
.schritt p{color:var(--grau);max-width:30ch;margin:0 auto}

/* Ablauf mit Foto */
.ablauf{background:var(--weiss)}
.ablauf-bild{position:relative;border-radius:50% 50% 24px 24px / 38% 38% 24px 24px;overflow:hidden;aspect-ratio:4/5;box-shadow:var(--schatten)}
.ablauf-bild .foto,.ablauf-bild .foto-leer{position:absolute;inset:0}
.ablauf .kicker{color:var(--tinte)}
.ablauf-schritte{list-style:none;padding:0;margin:0;counter-reset:a}
.ablauf-schritte li{counter-increment:a;display:grid;grid-template-columns:52px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--linie)}
.ablauf-schritte li:last-child{border-bottom:0}
.ablauf-schritte li::before{content:counter(a);width:46px;height:46px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--gold);color:var(--gold-text);display:flex;align-items:center;justify-content:center;font-family:var(--script);font-size:1.7rem}
.ablauf-schritte h2,.ablauf-schritte h3{font-size:.95rem;margin:.65em 0 .4em}
.ablauf-schritte p{margin:0;color:var(--grau)}

/* Themen (Workshops) */
.themen{display:grid;grid-template-columns:repeat(2,1fr);gap:48px 64px}
.thema{text-align:left}
.thema h2,.thema h3{display:flex;align-items:center;gap:.8em;font-size:.95rem;flex-wrap:wrap}
.thema h2::after{flex-basis:100%;margin:12px 0 0}
.thema h2 .ico{color:var(--gold);font-size:1.4rem;letter-spacing:0}
.thema p{color:var(--grau);margin:0}

/* Preiskarten */
.preiskarten{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.preiskarte{position:relative;display:flex;flex-direction:column;background:var(--weiss);border-radius:22px;padding:36px 30px 32px;box-shadow:0 0 0 1px var(--linie);text-align:center}
.preiskarte-kopf{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:12px}
.preiskarte h3{font-size:.9rem;margin:0}
.preiskarte .dauer{font-size:.85rem;color:var(--grau)}
.preiskarte .preis{font-family:var(--script);font-size:3rem;line-height:1.1;background:var(--gold-verlauf);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;padding:0 .1em}
.preiskarte > p{color:var(--grau);font-size:.96rem}
.preiskarte ul{list-style:none;padding:0;margin:0 0 26px;font-size:.94rem;text-align:left}
.preiskarte li{display:flex;gap:.7em;align-items:flex-start;padding:5px 0}
.preiskarte li .ico{color:var(--gold);margin-top:.4em}
.preiskarte .knopf{margin-top:auto;justify-content:center}
.preiskarte-top{box-shadow:0 0 0 1.5px var(--gold),var(--schatten)}
.preiskarte-top .pille{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--gold-verlauf);color:#fff;padding:.45em 1.2em;border-radius:999px;font-size:.66rem}
.preiskarte-top .pille::before{display:none}

/* Zweiteilung */
.zweiteilung{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1160px;margin:0 auto;padding:clamp(56px,7vw,96px) 28px}
.zweiteilung > div{padding:clamp(36px,5vw,56px);border-radius:24px;background:var(--weiss);box-shadow:0 0 0 1px var(--linie)}
.zweiteilung h2{font-size:1rem}
.zweiteilung p{color:var(--grau)}
.teil-farbig{background:linear-gradient(140deg,var(--weiss),#EAF4F7)!important}

/* Zitat in Schreibschrift */
.zitat-block{text-align:center}
.zitat-block .wortmarke{height:46px;width:auto;margin:0 auto 18px}
.zitat{font-size:clamp(2.6rem,5vw,4rem);line-height:1.18;max-width:22ch;margin:0 auto .3em;padding:.1em .2em}
.zitat-block .klein{color:var(--grau);max-width:56ch;margin:0 auto 28px}

/* Kästen, Listen, Info */
.kasten{background:var(--weiss);border-radius:22px;padding:34px 36px;box-shadow:0 0 0 1px var(--linie)}
.kasten > :last-child{margin-bottom:0}
.kasten h3{margin-top:1.4em}
.kasten h3:first-child{margin-top:0}
.haken{list-style:none;padding:0}
.haken li{display:flex;gap:.8em;align-items:flex-start;margin-bottom:.6em}
.haken li .ico{color:var(--gold);margin-top:.45em}
.info{display:flex;gap:24px;align-items:flex-start}
.info .rund{width:70px;height:70px;font-size:1.7rem}
.info h2{font-size:.98rem}

/* Kombi-Karten */
.kombi{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.kombi a{display:block;background:var(--weiss);border-radius:22px;padding:32px 34px;text-decoration:none;color:var(--tinte);box-shadow:0 0 0 1px var(--linie);transition:transform .35s,box-shadow .35s}
.kombi a:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--gold-hell),var(--schatten)}
.kombi h3{margin:.6em 0 .6em}
.kombi p{color:var(--grau);margin:0 0 14px}

/* Angebote (aus angebote.json) */
.angebot-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),380px));gap:26px}
.angebot-karte{background:var(--weiss);border-radius:22px;padding:30px 32px;box-shadow:0 0 0 1px var(--gold-hell),var(--schatten)}
.angebot-karte h3{margin:16px 0 .4em;font-size:.95rem}
.angebot-karte p{color:var(--grau);font-size:.96rem}
.angebot-frist{font-size:.82rem!important;color:var(--gold-text)!important;letter-spacing:.08em}
.angebot-preis{font-family:var(--script);font-size:2.6rem;line-height:1.1;color:var(--gold-text)!important}

/* Buchung */
.einbettung{border-radius:24px;padding:48px 34px;background:var(--weiss);box-shadow:0 0 0 1px var(--linie);text-align:center}
.einbettung p{max-width:56ch;margin:0 auto 1.4em;color:var(--grau)}
.einbettung.geladen{padding:0;box-shadow:none;background:none}
.einbettung iframe{width:100%;height:880px;border:0;border-radius:24px;background:#fff}

/* Fragen */
.fragen{max-width:780px;margin:0 auto}
.fragen details{border-bottom:1px solid var(--linie)}
.fragen summary{cursor:pointer;font-size:1.02rem;font-weight:400;padding:20px 0;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";font-size:1.5rem;font-weight:300;color:var(--gold);transition:transform .3s}
.fragen details[open] summary::after{transform:rotate(45deg)}
.fragen details p{color:var(--grau);margin:0 0 20px}

/* Schlussbereich */
.schluss{text-align:center}
.schluss .lead{margin:0 auto 2.2em}
.schluss .knopfreihe{justify-content:center}
.schluss-farbig{background:var(--creme)}

/* Rechtstexte */
.recht h1{font-size:1.3rem;margin-bottom:1.4em}
.recht h2{margin-top:2.2em}
.recht h3{margin-top:1.6em}

/* ===== Fussbereich ===== */
.fuss{background:var(--sand);padding:80px 0 calc(28px + env(safe-area-inset-bottom,0px));position:relative;z-index:1}
.fuss-innen{max-width:1160px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.fuss h2{font-size:.74rem;font-weight:500;letter-spacing:.3em;color:var(--gold-text);margin-bottom:1.2em}
.fuss ul{list-style:none;padding:0;margin:0 0 18px}
.fuss li{margin-bottom:.5em;font-size:.95rem}
.fuss a{color:var(--tinte);text-decoration:none}
.fuss a:hover{color:var(--gold-text)}
.fuss-logo img{height:44px;width:auto;margin-bottom:12px}
.fuss-slogan{font-family:var(--script);font-size:1.9rem;line-height:1.2;margin-bottom:.4em}
.fuss-marke p:last-child{color:var(--grau);font-size:.92rem;max-width:40ch}
.fuss-kontakt li{display:flex;gap:.7em;align-items:center}
.fuss-kontakt .ico{color:var(--gold)}
.fuss-recht{max-width:1160px;margin:48px auto 0;padding:22px 28px 0;border-top:1px solid var(--linie);color:var(--grau);font-size:.85rem;text-align:center;letter-spacing:.1em}
.s-balance{color:var(--gold-text)} .s-wasser{color:var(--tuerkis)} .s-farbe{color:var(--pink)}

/* ===== Mobil ===== */
@media (max-width:900px){
  .zwei,.zweiteilung,.kombi,.bildkarten,.bildkarten-zwei,.icon-karten,.schritte,.preiskarten,.themen{grid-template-columns:1fr}
  .schritte::before{display:none}
  .fuss-innen{grid-template-columns:1fr 1fr}
  .fuss-marke{grid-column:1/-1}
  .seiten-held{flex-direction:column;align-items:stretch;padding-top:0;min-height:0}
  .seiten-held .held-bild{position:relative;width:100%;height:56vw;min-height:260px;-webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 40%);mask-image:linear-gradient(0deg,transparent 0%,#000 40%)}
  .seiten-held .held-bild .foto-leer img{transform:none;width:58%}
  .seiten-held .innen{margin-top:-30px}
  .medaillon{width:112px;height:112px}
  .einbettung iframe{height:760px}
  .welle-bild img{width:150%;margin-left:-25%}
}
.seiten-held{padding-bottom:clamp(190px,21vw,300px)}
.seiten-held .welle-unten{z-index:1;bottom:-3.5vw}
.seiten-held .innen{z-index:3}
.held-start h1{margin-top:22px}
@media (max-width:600px){
  .medaillons{gap:14px;flex-wrap:nowrap}
  .medaillon{width:94px;height:94px}
  .medaillons .titel{font-size:.66rem;letter-spacing:.2em}
}
.seiten-held:has(.welle-art-farbe){padding-bottom:clamp(230px,26vw,360px)}
.seiten-held .welle-unten.welle-art-farbe{bottom:-9vw}
/* Wellen dürfen in den nächsten Abschnitt auslaufen */
.seiten-held{overflow:visible;overflow-x:clip}
.seiten-held + .abschnitt{padding-top:clamp(110px,12vw,170px)}
/* Logo auf der Startseite: Zeichen (PNG) + Schriftzug (SVG) */
.held-start .logo-zeichen{width:min(440px,70vw);margin:0 auto -4%;position:relative;z-index:1}
.held-start .logo-schrift{width:min(560px,86vw);margin:0 auto 4px;position:relative;z-index:2}
.marke .marke-schrift{height:42px;width:auto}
/* Hohe Wellen im Kopfbereich spiegeln: der hohe Teil liegt rechts beim Bild */
.seiten-held .welle-unten.welle-art-wasser img,.seiten-held .welle-unten.welle-art-farbe img{transform:scaleX(-1)}
.seiten-held:has(.welle-art-wasser){padding-bottom:clamp(220px,24vw,340px)}
.seiten-held .welle-unten.welle-art-wasser{bottom:-6vw}
.seiten-held .welle-unten.welle-art-farbe{bottom:-7vw}

/* ===== Neues Menüband mit Logo ===== */
.kopf-innen{padding:8px 28px}
.marke .marke-logo{height:64px;width:auto}
.fuss-logo img{height:120px;width:auto;margin-bottom:14px}

/* ===== Startseite: Foto mit Textkarte ===== */
.innen-breit{max-width:1360px;margin:0 auto;padding:12px 40px 0;position:relative}
.held-editorial-foto{height:min(640px,72vh);min-height:420px;border-radius:32px;overflow:hidden;position:relative}
.held-editorial-foto .foto,.held-editorial-foto .foto-leer{position:absolute;inset:0}
.held-editorial-foto .foto-leer{background:radial-gradient(circle at 72% 40%,#F1F9FB 0%,#BFE0EA 45%,#6FAFC2 100%);justify-content:flex-end;padding-right:10%}
.held-editorial-foto .foto-leer img{width:40%}
.textkarte{position:absolute;left:88px;bottom:-80px;max-width:560px;background:var(--weiss);border-radius:28px;padding:44px 48px;box-shadow:0 40px 80px -40px rgba(120,86,40,.55);z-index:2}
.textkarte .schrift-titel{font-size:clamp(3.6rem,6vw,5.4rem);margin-bottom:.1em}
.textkarte h1{font-size:1rem;letter-spacing:.28em;line-height:1.7;margin:.6em 0 0}
.textkarte .goldlinie{margin:22px 0}
.nach-held{padding-top:clamp(140px,14vw,190px)}

/* Über-mich-Teaser */
.ueber-teaser{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,6vw,72px);align-items:center}
.bogen-bild{height:460px;border-radius:240px 240px 28px 28px;overflow:hidden;position:relative;box-shadow:var(--schatten)}
.bogen-bild .foto,.bogen-bild .foto-leer{position:absolute;inset:0}
.bogen-bild .foto-leer img{width:36%;opacity:.55}
.etiketten{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 26px}
.etiketten li{font-size:.8rem;letter-spacing:.1em;padding:6px 14px;border-radius:999px;background:var(--weiss);box-shadow:inset 0 0 0 1px var(--gold-hell)}

/* Erklärzeilen mit Video */
.erklaer{display:grid;gap:clamp(48px,7vw,80px)}
.erklaer-zeile{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,64px);align-items:center}
.erklaer-gedreht{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.erklaer-gedreht .erklaer-medien{order:2}
.erklaer-medien{height:380px;border-radius:28px;overflow:hidden;position:relative;background:var(--sand)}
.erklaer-medien .foto,.erklaer-medien .foto-leer{position:absolute;inset:0}
.erklaer-medien video.foto{object-fit:cover;background:#000}
.erklaer-zeile h3{margin:.8em 0 .8em}
.erklaer-zeile p{color:var(--grau)}
.weiter-link,.mehr-link a{display:inline-flex;align-items:center;gap:.6em;font-size:.74rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;color:var(--gold-text)}
.mehr-link{margin-top:36px;text-align:center}

/* Unternehmen & Gruppen */
.hinweis-kasten{background:var(--weiss);border-radius:20px;padding:22px 24px;box-shadow:0 0 0 1px var(--linie);margin:22px 0 24px}
.hinweis-kasten h2{font-size:.78rem;letter-spacing:.24em;font-weight:500;margin:0 0 .4em}
.hinweis-kasten p{margin:0;color:var(--grau);font-size:.96rem}
.format-liste{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.format-liste li{display:flex;gap:22px;align-items:center;background:var(--weiss);border-radius:22px;padding:22px 24px;box-shadow:0 0 0 1px var(--linie)}
.format-liste h3{margin:0 0 .4em}
.format-liste p{margin:0;color:var(--grau);font-size:.96rem}
.medaillon-klein{width:92px;height:92px;flex:none;border-radius:50%;overflow:hidden;position:relative;box-shadow:inset 0 0 0 1px var(--gold-hell)}
.medaillon-klein .foto,.medaillon-klein .foto-leer{position:absolute;inset:0}
.medaillon-klein .foto-leer img{width:76%}

/* Gutschein-Bild */
.rund-bild{height:340px;border-radius:28px;overflow:hidden;position:relative}
.rund-bild .foto,.rund-bild .foto-leer{position:absolute;inset:0}
.rund-bild .foto-leer img{width:42%}

/* Stimmen (für später) */
.stimmen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.stimmen figure{margin:0;background:var(--creme);border-radius:22px;padding:30px;box-shadow:0 0 0 1px var(--linie)}
.stimmen figcaption{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grau);margin-top:14px}

/* Feste Buchungsleiste auf dem Handy */
.handy-leiste{display:none}
@media (max-width:860px){
  .marke .marke-logo{height:50px}
  .innen-breit{padding:8px 16px 0}
  .held-editorial-foto{min-height:0;height:250px}
  .held-editorial-foto .foto img{object-position:60% 70%}
  .held-editorial-foto img.foto{object-position:76% 55%}
  .textkarte{position:relative;left:auto;bottom:auto;margin:-56px 12px 0;padding:28px 24px;max-width:none}
  .nach-held{padding-top:72px}
  .ueber-teaser,.erklaer-zeile,.erklaer-gedreht,.stimmen{grid-template-columns:minmax(0,1fr)}
  .erklaer-gedreht .erklaer-medien{order:0}
  .erklaer-medien,.bogen-bild{height:300px}
  .handy-leiste{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--creme) 94%,transparent);backdrop-filter:blur(8px);box-shadow:0 -10px 24px -18px rgba(0,0,0,.4)}
  .handy-leiste .knopf{flex:1;justify-content:center;padding:1em 1em}
  .handy-leiste .knopf-rand{flex:0 0 auto}
  body{padding-bottom:76px}
}
@media (max-width:860px){.textkarte .schrift-titel{font-size:3.1rem}.textkarte h1{font-size:.88rem;letter-spacing:.2em}}

/* Öffnungszeiten (Kontakt) */
.zeiten{margin:0 0 14px;border-top:1px solid var(--linie)}
.zeiten div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--linie)}
.zeiten dd{margin:0;white-space:nowrap;font-weight:400}
.zeiten-hinweis{color:var(--grau);font-size:.95rem;margin-bottom:28px}

/* Preiskarten mit 2 bzw. 4 Karten */
.preiskarten-zwei{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px;margin:0 auto}
.preiskarten-vier{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.preiskarten-vier .preiskarte{padding:32px 22px 28px}
@media (max-width:1100px){.preiskarten-vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.preiskarten-zwei,.preiskarten-vier{grid-template-columns:minmax(0,1fr)}}
.preiskarte-top .pille{white-space:nowrap}

.icon-karten-vier{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.icon-karten-vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.icon-karten-vier{grid-template-columns:minmax(0,1fr)}}
.kombi-eins{grid-template-columns:minmax(0,1fr)}
/* Preise gut lesbar: gleiche Farbe und Grösse, aber in der Textschrift statt Schreibschrift */
.preiskarte .preis{font-family:var(--schrift);font-weight:400;font-size:2.1rem;letter-spacing:.06em;line-height:1.3}
.angebot-preis{font-family:var(--schrift)!important;font-weight:400;font-size:1.7rem!important;letter-spacing:.06em}
.preis-hinweis.mitte{text-align:center;margin-top:34px}
.zitat-quelle{text-align:center;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grau);margin-top:14px}
/* Termine & Events */
.termin-liste{display:grid;gap:18px;max-width:920px;margin:0 auto}
.termin{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:26px;align-items:center;background:var(--weiss);border-radius:22px;padding:24px 28px;box-shadow:0 0 0 1px var(--linie),var(--schatten)}
.termin[hidden]{display:none}
.termin-datum{display:flex;flex-direction:column;align-items:center;justify-content:center;width:96px;height:96px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--gold);line-height:1}
.termin-tag{font-size:2rem;color:var(--gold-text)}
.termin-monat{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;margin-top:4px}
.termin-wtag{font-size:.7rem;color:var(--grau);margin-top:3px}
.termin-text h3{margin:10px 0 .3em}
.termin-text .pillen{margin-bottom:0}
.termin-info{color:var(--grau);font-size:.92rem;margin:0 0 .4em}
.termin-text p{margin-bottom:.4em}
.termin-preis{font-weight:500;color:var(--gold-text)}
.termin-leer{text-align:center;color:var(--grau);max-width:56ch;margin:20px auto 0}
@media (max-width:700px){.termin{grid-template-columns:72px minmax(0,1fr);gap:16px;padding:20px;align-items:start}.termin-datum{width:72px;height:72px}.termin-tag{font-size:1.5rem}.termin .knopf{grid-column:1/-1;justify-self:start}}