:root{
  --creme:#fff8f1; --creme2:#fbf1e6; --band:#f3e4d3; --text:#5b4d43; --dunkel:#3d322a;
  --gold:#b58b2e; --gold2:#c9a24b; --linie:#5b4d4322;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
body{background:var(--creme);color:var(--text);font-family:'Jost',Helvetica,Arial,sans-serif;font-weight:300;font-size:16.5px;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:500;color:var(--text);margin:0;letter-spacing:.5px}
.inner{max-width:1120px;margin:0 auto;padding:0 24px}

/* HEADER */
header{background:var(--creme);border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:50}
.nav{display:flex;justify-content:center;gap:30px;padding:14px 24px 0;font-family:'Jost',sans-serif;font-weight:400;font-size:12px;letter-spacing:1.6px;text-transform:uppercase}
.nav a:hover,.nav a.aktiv{color:var(--gold)}
.brand{text-align:center;padding:22px 0 24px;display:block}
.brand img{width:240px;height:auto;margin:0 auto}
@media (max-width:860px){.brand{padding:8px 0 10px}.brand img{width:190px}}
.brand .mono{font-family:'Cormorant Garamond',serif;font-size:36px;color:var(--gold2);letter-spacing:2px;line-height:1}
.brand .name{font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:600;letter-spacing:3px;color:#8a2b3d;margin-top:4px}
.brand .claim{font-family:'Jost',sans-serif;font-weight:400;font-size:9.5px;letter-spacing:2px;color:var(--text);opacity:.8}
.menu-btn{display:none}

/* BUTTONS */
.btn{display:inline-block;font-family:'Jost',sans-serif;font-weight:400;font-size:13px;letter-spacing:1.4px;padding:13px 26px;border:1px solid var(--gold2);background:#fffdf9;color:var(--text);transition:.2s}
.btn:hover{background:var(--gold2);color:#fff}
.btn.gold{background:var(--gold2);color:#fff}
.btn.gold:hover{background:var(--gold)}
.orn{color:var(--gold2);font-size:20px;letter-spacing:8px;margin:18px 0}

/* HERO (Startseite) */
.hero{position:relative;background:url('/bilder/hero-meer.jpg') center/cover;padding:70px 0 80px}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#fff8f177,#fff8f122 55%,#fff8f100)}
.hero .inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.hero-text{text-align:center}
.hero h1{font-size:54px;font-weight:500;line-height:1.15}
.hero .sub{font-family:'Jost',sans-serif;font-weight:400;font-size:15px;letter-spacing:2px;margin-top:8px}
.hero p.lead{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:26px;line-height:1.45;color:var(--dunkel);max-width:440px;margin:0 auto}
.hero .btn{margin-top:28px}
.hero-img{margin:0}
.hero-img img{aspect-ratio:4/5;object-fit:cover;width:100%;max-width:420px;margin-left:auto}
.hero-img figcaption{max-width:420px;margin:8px 0 0 auto;font-family:'Jost',sans-serif;font-weight:400;font-size:10.5px;letter-spacing:1.2px;text-align:center;color:var(--text);opacity:.85}

/* INTRO + DREI WEGE */
.intro{background:var(--band);padding:60px 0 50px;text-align:center}
.intro p{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;font-size:22px;letter-spacing:.2px;max-width:760px;margin:0 auto;line-height:1.9}
.wege{background:var(--band);padding:10px 0 80px}
.wege h2{text-align:center;font-size:44px;margin-bottom:40px}
.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.karte{background:#fffdf9;display:flex;flex-direction:column;transition:.25s}
.karte:hover{transform:translateY(-3px);box-shadow:0 10px 26px #5b4d431a}
.karte img{aspect-ratio:4/3;object-fit:cover;width:100%}
.karte .body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1;text-align:center}
.karte h3{font-size:28px;margin-bottom:10px}
.karte .txt{font-size:14.5px;line-height:1.65;margin:0 0 20px}
.karte .mehr-link{margin-top:auto;font-family:'Jost',sans-serif;font-weight:400;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);border-bottom:1px solid #c9a24b77;align-self:center;padding-bottom:2px}

/* ABSCHNITTE */
section.block{padding:80px 0}
.kopf{text-align:center;margin-bottom:36px}
.kopf h2{font-size:42px}
.kopf p{margin:8px auto 0;max-width:560px;font-size:15px}

/* TERMINE (Karten aus termine.js) */
.termine-wrap{max-width:720px;margin:0 auto}
.stack{display:flex;flex-direction:column;gap:12px}
.kit-block{background:#fffdf9;border:1px solid var(--linie)}
.kit-block:hover{border-color:var(--gold2)}
.card{display:flex;align-items:center;gap:16px;padding:18px 20px}
.card-mark{color:var(--gold2);font-size:13px}
.card-body{flex:1;min-width:0}
.card-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:500;display:block;color:var(--dunkel)}
.card-desc{font-size:13.5px;line-height:1.55;opacity:.8;display:block;margin-top:2px}
.ev-when{font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:3px}
.ev-where{font-size:10px;letter-spacing:1px;text-transform:uppercase;opacity:.6;border:1px solid var(--linie);padding:2px 7px;margin-left:6px}
.subrow{display:flex;gap:10px;padding:0 20px 16px;flex-wrap:wrap}
.chip{font-size:12px;color:var(--gold);border:1px solid #c9a24b77;padding:7px 13px;display:inline-flex;gap:6px;align-items:center}
.chip:hover{background:#c9a24b14}
.chip .dot{font-size:8px}
.termine-leer{text-align:center;opacity:.8}
.mehr{text-align:center;margin-top:26px}

/* ANHÖREN */
.anhoeren{background:var(--creme2)}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mini a{background:#fffdf9;border:1px solid var(--linie);padding:24px;display:block;transition:.2s}
.mini a:hover{border-color:var(--gold2);transform:translateY(-2px)}
.mini h3{font-size:25px;margin-bottom:6px}
.mini p{font-size:14px;line-height:1.6;margin:0 0 12px}
.mini .preis{font-size:13px;font-weight:600;color:var(--gold);letter-spacing:.5px}

/* GESPRÄCH */
.gespraech{text-align:center;padding:80px 0;background:url('/bilder/hero-meer.jpg') center/cover;position:relative}
.gespraech::before{content:"";position:absolute;inset:0;background:#fff8f188}
.gespraech .inner{position:relative;max-width:640px}
.gespraech h2{font-size:38px;margin-bottom:12px}
.gespraech p{margin:0 0 26px}

/* UNTERSEITEN */
.seiten-hero{position:relative;background:url('/bilder/hero-meer.jpg') center/cover;padding:70px 0 60px;text-align:center}
.seiten-hero::before{content:"";position:absolute;inset:0;background:#fff8f166}
.seiten-hero .inner{position:relative;max-width:760px}
.seiten-hero h1{font-size:56px;line-height:1.15}
.seiten-hero .sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:24px;letter-spacing:1px;margin-top:10px;color:var(--dunkel)}
.text-bild{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.text-bild.umgekehrt .bild{order:2}
.text-bild img{width:100%;aspect-ratio:4/5;object-fit:cover}
.fliess p{margin:0 0 16px}
.fliess .gross{font-family:'Cormorant Garamond',serif;font-size:27px;line-height:1.5;color:var(--dunkel)}
.fliess .zitat{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:23px;line-height:1.55;color:var(--gold);margin:22px 0}
.zeilen p{margin:0 0 4px}
.band{background:var(--band)}
.angebote{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.angebote.zwei{grid-template-columns:repeat(2,1fr)}
.angebot{background:#fffdf9;padding:30px 28px;display:flex;flex-direction:column;border-top:3px solid var(--gold2)}
.angebot h3{font-size:28px;margin-bottom:6px}
.angebot .meta{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.angebot p{font-size:14.5px;line-height:1.65;margin:0 0 14px}
.preisliste{list-style:none;padding:14px 0 0;margin:auto 0 20px;border-top:1px solid var(--linie);font-size:14.5px}
.preisliste li{display:flex;justify-content:space-between;gap:10px;padding:5px 0}
.preisliste b{font-weight:600;color:var(--dunkel);white-space:nowrap}
.angebot .knoepfe{display:flex;flex-direction:column;gap:10px}
.angebot .btn{text-align:center;font-size:12px;padding:12px 16px}
.liste{padding-left:0;list-style:none;margin:0 0 16px}
.liste li{padding:6px 0 6px 26px;position:relative}
.liste li::before{content:"✦";position:absolute;left:0;color:var(--gold2);font-size:12px;top:9px}
.zentriert{text-align:center;max-width:720px;margin:0 auto}

/* FOOTER */
footer{padding:46px 0 40px;text-align:center;font-size:13px;border-top:1px solid var(--linie)}
.social{display:flex;justify-content:center;gap:14px;margin-bottom:20px}
.social a{width:40px;height:40px;border-radius:50%;background:#5b4d43;color:#fff8f1;display:flex;align-items:center;justify-content:center;transition:.2s}
.social a:hover{background:var(--gold2)}
.social svg{width:19px;height:19px;fill:currentColor}
.fusslinks{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;font-family:'Jost',sans-serif;font-weight:400;font-size:11.5px;letter-spacing:1.2px;margin-top:10px}
.fusslinks a{border-bottom:1px solid #c9a24b77}

/* MOBIL */
@media (max-width:860px){
  .nav{display:none;flex-direction:column;gap:14px;align-items:center;padding:18px 0}
  .nav.offen{display:flex}
  .menu-btn{display:block;position:absolute;right:18px;top:22px;background:none;border:0;font-size:26px;color:var(--text);cursor:pointer}
  .hero{padding:40px 0 50px}
  .hero .inner,.text-bild{grid-template-columns:1fr;gap:30px}
  .text-bild.umgekehrt .bild{order:0}
  .hero h1{font-size:40px}
  .hero p.lead{font-size:22px}
  .hero-img img,.hero-img figcaption{margin-left:auto;margin-right:auto;max-width:320px}
  .karten,.mini,.angebote,.angebote.zwei{grid-template-columns:1fr}
  .wege h2,.kopf h2{font-size:34px}
  .seiten-hero h1{font-size:42px}
  .intro p{font-size:19px}
  section.block{padding:56px 0}
}

/* KONTAKTFORMULAR */
.kontaktform{background:#fffdf9;padding:30px;border-top:3px solid var(--gold2);display:flex;flex-direction:column;gap:14px}
.kontaktform label{display:flex;flex-direction:column;gap:6px;font-size:13px;letter-spacing:.5px}
.kontaktform input,.kontaktform textarea{font:inherit;font-size:15px;padding:11px 13px;border:1px solid var(--linie);background:#fff;color:var(--dunkel)}
.kontaktform input:focus,.kontaktform textarea:focus{outline:none;border-color:var(--gold2)}
.kontaktform label.check{flex-direction:row;align-items:flex-start;gap:10px;font-size:12.5px;line-height:1.5}
.kontaktform label.check input{margin-top:3px}
.kontaktform label.check a{border-bottom:1px solid #c9a24b77}
.versteckt{display:none}
.kontaktform .btn{align-self:flex-start;cursor:pointer}

/* ---------- Newsletter-Pop-up ---------- */
.nl-popup{position:fixed;right:24px;bottom:24px;z-index:50;width:min(640px,calc(100vw - 32px));display:grid;grid-template-columns:200px 1fr;background:var(--creme);border:1px solid #b58b2e55;opacity:0;transform:translateY(24px);transition:opacity .4s ease,transform .4s ease}
.nl-popup.offen{opacity:1;transform:none}
.nl-popup[hidden]{display:none}
.nl-popup.mit-badge{bottom:76px}
.nl-bild{background:url(/bilder/hero-meer.jpg) center/cover;position:relative}
.nl-bild::after{content:"✦";position:absolute;inset:auto 0 18px;text-align:center;color:#fff;font-size:22px;letter-spacing:.3em}
.nl-inhalt{padding:30px 30px 24px}
.nl-klein{font-family:Jost,sans-serif;text-transform:uppercase;letter-spacing:.22em;font-size:11px;color:var(--gold)}
.nl-popup h2{font-size:30px;line-height:1.15;margin:6px 0 10px}
.nl-popup p{font-size:15px;line-height:1.6;margin:0 0 14px}
.nl-popup input[type=text],.nl-popup input[type=email]{display:block;width:100%;box-sizing:border-box;padding:11px 14px;margin:0 0 10px;border:1px solid #b58b2e66;background:#fff;font:inherit;font-size:15px;color:var(--text)}
.nl-popup .btn{width:100%;margin-top:4px;border:0;cursor:pointer}
.nl-popup .nl-hinweis{font-size:12px;line-height:1.5;margin:12px 0 0;opacity:.8}
.nl-popup .nl-hinweis a{color:inherit}
.nl-fehler{color:#a33b2b;font-size:14px!important}
.nl-zu{position:absolute;top:6px;right:10px;background:none;border:0;font-size:28px;line-height:1;color:var(--text);cursor:pointer;padding:6px}
@media (max-width:640px){
  .nl-popup{right:0;left:0;bottom:0;width:auto;grid-template-columns:1fr;border-width:2px 0 0;border-color:var(--gold2);max-height:85vh;overflow:auto}
  .nl-popup.mit-badge{bottom:0;padding-bottom:60px}
  .nl-bild{display:none}
  .nl-inhalt{padding:18px 18px 16px}
  .nl-popup h2{font-size:24px;margin:4px 30px 6px 0}
  .nl-popup p{font-size:14px;line-height:1.5;margin-bottom:10px}
  .nl-popup input[type=text],.nl-popup input[type=email]{padding:9px 12px;margin-bottom:8px}
  .nl-popup .nl-hinweis{font-size:11px;margin-top:8px}
}
.podcast .mehr{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.mini.zwei{grid-template-columns:repeat(2,1fr);max-width:760px;margin:0 auto}
.podcast-box{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:center;max-width:820px;margin:0 auto}
.podcast-box img{width:100%;display:block}
.podcast-box .kopf{text-align:left}
.podcast .podcast-box .mehr{justify-content:flex-start}
@media (max-width:860px){.mini.zwei{grid-template-columns:1fr}.podcast-box{grid-template-columns:1fr;gap:24px}.podcast-box img{max-width:300px;margin:0 auto}.podcast-box .kopf{text-align:center}.podcast .podcast-box .mehr{justify-content:center}}
.seiten-hero .sub-zusatz{font-size:16px;line-height:1.6;margin:14px auto 0;max-width:560px;color:var(--dunkel)}
h1,h2,h3,.intro p,.hero .lead,.kopf p,.sub,.sub-zusatz{text-wrap:balance}
.parallax{overflow:hidden;background-image:none!important}
.parallax>.meer-bg{position:absolute;left:0;right:0;top:-40vh;height:calc(100% + 80vh);background:url('/bilder/hero-meer.jpg') center/cover;will-change:transform;z-index:0}
.parallax::before{z-index:1}
.parallax>.inner{z-index:2}