/* Fünf Monde – Entwurf. Design-Mix: Edle Palette/Typografie/Buttons/Menü/Footer von bewegungskunst-fulda.de,
   Hero-Größe (100vh) wie die alte Yoga-Herz-Rhön-Seite. Handgeschriebenes CSS, kein Tailwind, kein CDN, kein Build.
   Schriften: css/fonts.css (lokal). */
:root{
  --bg:#FDF4E3; --surface:#FFFCF0; --brand:#2C2C2C; --primary:#50483E; --text:#1A1A1A; --border:#D5C9A8;
  --grad:linear-gradient(135deg,#EBDCBB 0%,#FDF6E8 50%,#ECDCBC 100%);
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --max:1120px; --gold:#B09A64; --night:#2C2C2C; --night2:#3A342D; --sand:#D5C9A8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px} /* Umbau 198: Sprungziel direkt unter dem Menü, kein Balken */
body{margin:0;font-family:var(--sans);font-weight:400;font-size:1rem;line-height:1.75;color:var(--primary);background:var(--bg);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--text)}
a:hover{color:var(--primary)}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 1.5rem}
.narrow{max-width:780px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.3;color:var(--brand);margin:0 0 .7em}
h1{font-size:clamp(2.2rem,7vw,4.2rem);text-transform:uppercase;letter-spacing:.15em}
h2{font-size:clamp(1.6rem,4.2vw,2.5rem);text-transform:uppercase;letter-spacing:.14em}
h3{font-size:1.2rem;letter-spacing:.04em}
p{margin:0 0 1rem}
strong{font-weight:500;color:var(--text)}
.sub{margin-top:2.5rem}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:.5rem 1rem;z-index:300}
.skip:focus{left:0}
.small{font-size:.875rem}
.center{text-align:center}

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

/* ===== Buttons (Stil der Schulseite: eckig, Outline, Versalien) ===== */
.btn{display:inline-block;border:1px solid var(--text);color:var(--text);background:transparent;text-decoration:none;text-transform:uppercase;letter-spacing:.2em;font:500 .75rem/1.2 var(--sans);letter-spacing:.2em;padding:.95rem 2rem;cursor:pointer;text-align:center;transition:background .3s,color .3s}
.btn:hover{background:var(--text);color:#fff}

.btn-solid{background:var(--text);color:#fff}
.btn-solid:hover{background:transparent;color:var(--text)}
.btn-small{padding:.7rem 1.3rem}

/* ===== Menü oben (Desktop ab 1024px: 3 Links links, Wortmarke Mitte, 3 Links rechts; mobil Overlay) ===== */
.site-nav{position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:1px solid var(--border)}
.nav-in{max-width:80rem;margin:0 auto;height:5.5rem;padding:0 1.5rem;display:flex;align-items:center;justify-content:center;position:relative}
.nav-side{display:none;flex:1;align-items:center;gap:1.6rem;font-family:var(--serif);text-transform:uppercase;letter-spacing:.14em;font-size:.8rem}
.nav-side.left{justify-content:flex-end;padding-right:2rem}
.nav-side.right{justify-content:flex-start;padding-left:2rem}
.nav-side a{text-decoration:none;color:var(--text);white-space:nowrap}
.nav-side a:hover{color:var(--primary)}

.brand-name{display:block;font-size:1.45rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;line-height:1.2}
.hamburger{position:absolute;right:.75rem;background:none;border:0;padding:.5rem;cursor:pointer;color:var(--text);z-index:2}
.hamburger svg,.menu-close svg{width:1.8rem;height:1.8rem;display:block}
.mobile-menu{display:none;position:fixed;inset:0;z-index:200;background:var(--bg);flex-direction:column;align-items:center;justify-content:center;gap:1.7rem;overflow-y:auto;padding:5rem 1rem}
.mobile-menu.open{display:flex}
.mobile-menu a.mobile-link{font-family:var(--serif);font-size:1.45rem;text-transform:uppercase;letter-spacing:.15em;text-decoration:none;color:var(--text);text-align:center}

.menu-close{position:absolute;top:1.4rem;right:1.4rem;background:none;border:0;padding:1rem;color:var(--text);cursor:pointer}
@media(min-width:1024px){
  .nav-side{display:flex}
  .hamburger{display:none}
}
@media(min-width:1180px){.nav-side{font-size:.86rem;gap:2rem}}
/* Kopfzeile der Rechtstexte (Wortmarke links, Button rechts) */

/* ===== Hero: Höhe wie alte Yoga-Herz-Rhön-Seite (100vh, min 600px), Buttons wie Schulseite ===== */
.hero{position:relative;height:75vh;height:75svh;min-height:520px;display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(2.2rem,7vh,4.5rem) 0 2rem;overflow:hidden;color:var(--surface);background:linear-gradient(180deg,#3B4858 0%,#6C6F80 40%,#B08E86 72%,#6F7F6B 100%)}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
/* Foto ungespiegelt: Mond steht rechts oben (ca. 73 % von links); Text bleibt links. Fehlt images/hero.jpg, bleibt der Farbverlauf der .hero sichtbar. */
.hero-photo{position:absolute;inset:0;background:url("../images/hero.jpg?v=3") 85% 20%/cover no-repeat}
.hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(10,14,28,.62) 0%,rgba(10,14,28,.34) 45%,rgba(0,0,0,.08) 100%)}
.hero-in{position:relative;z-index:2;text-shadow:0 1px 2px rgba(0,0,0,.45),0 2px 18px rgba(0,0,0,.4)}
.hero h1{color:var(--surface);margin-bottom:.9rem;max-width:14ch}

.hero-in{max-width:var(--max);padding-left:clamp(1.2rem,4vw,3rem);margin-left:0;margin-right:auto}
@media(min-width:1240px){.hero-in{margin-left:max(1.5rem,calc((100vw - 1240px)/2))}}
.hero .lead{max-width:34rem}
.hero .eyebrow{color:var(--surface);opacity:.85}
.eyebrow{display:block;text-transform:uppercase;letter-spacing:.2em;font-size:.75rem;font-weight:500;color:var(--primary);margin:0 0 1rem}
.hero .lead{color:var(--surface);opacity:.9;font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2.4vw,1.6rem);max-width:34rem;border-left:2px solid rgba(255,252,240,.35);padding-left:1.4rem;margin:0}
.hero .lead .hero-ort{white-space:nowrap}
.hero .btn{text-shadow:none}
@media(max-width:900px){
  .hero-photo{background-position:70% 20%}
  .hero{padding-top:2.2rem}
}

/* ===== Sections ===== */
.section{padding:6rem 0;background:var(--grad)}
h2::after{content:'';display:block;width:3.2rem;height:1px;background:var(--gold);margin:1.1rem 0 0}
.center h2::after{margin-left:auto;margin-right:auto}
.section-dark h2::after{background:var(--sand)}
.section-alt{background:linear-gradient(180deg,#FFFCF0 0%,#F6ECD2 100%)}

.section-form{background:var(--grad);border-top:1px solid var(--border)}
.section-dark{background:radial-gradient(120% 90% at 85% 0%,#4A4238 0%,var(--night) 60%);color:#E9E0CB;border-top:1px solid #000}

.section-dark h2,.section-dark h3,.section-dark strong{color:#FDF6E8}
.section-dark .eyebrow{color:var(--sand)}
.section-dark a{color:#FDF6E8}

.lead{font-size:1.2rem;font-family:var(--serif);font-style:italic;color:var(--primary)}

/* Monde */

.moon-card{background:var(--bg);border:1px solid var(--border);padding:1.6rem 1.5rem;position:relative}

.moon-card h3{margin-bottom:.2rem}

.moon-card p:last-child{margin:0}

/* ===== Gut zu wissen (Akkordeon, aus der Schulseite) ===== */

.accordion-item{border-bottom:1px solid var(--border)}
.accordion-item:last-child{border-bottom:0}
.accordion-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.4rem 1.5rem;background:none;border:0;text-align:left;cursor:pointer;font:500 .75rem/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--brand)}
.accordion-btn:hover{color:var(--primary)}

.accordion-content{padding:0 1.5rem 1.5rem;font-size:.95rem}
.js .accordion-content{padding:0 1.5rem;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-in-out,opacity .4s ease-in-out,padding .4s ease-in-out}
.js .accordion-item.active .accordion-content{padding:0 1.5rem 1.5rem;opacity:1}
.accordion-content p:last-child,.accordion-content ul:last-child{margin-bottom:0}

/* ===== Formular (Stil der Schulseite: Linien-Felder) ===== */
.form{position:relative;margin:2rem 0}
.field{margin-bottom:1.6rem}
.field label{display:block;font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.2rem}
.field input{width:100%;font:inherit;font-size:1rem;padding:.7rem 0;border:0;border-bottom:1px solid rgba(26,26,26,.3);background:transparent;color:var(--text);border-radius:0}
.field input:focus{border-bottom-color:var(--text)}
.field input::placeholder{color:rgba(80,72,62,.7)}
.check{display:flex;gap:.8rem;align-items:flex-start;margin-bottom:1.2rem;font-size:.8rem;line-height:1.6}
.check input{flex:none;width:1.1rem;height:1.1rem;margin-top:.25rem;accent-color:var(--text)}

/* ===== Platzhalter / Entwurf ===== */

.legal{padding:4rem 0 5rem}
.legal h1{font-size:clamp(1.8rem,5vw,2.6rem)}
.legal h2{font-size:1.2rem;margin-top:2.2rem}

/* ===== Niks weitere Angebote (extern, luftig) ===== */
.angebote-intro{padding-bottom:6rem}
.lead-soft{font-size:1.1rem}

.offer-intro{max-width:640px;font-size:1.05rem;margin:0 0 2.5rem}
.facts-soft{list-style:none;margin:0 0 2rem;padding:0}
.facts-soft li{padding:1rem 0;border-bottom:1px solid var(--border)}
.facts-soft li:last-child{border-bottom:0}

.kurs-card{background:var(--surface);border:1px solid var(--border);padding:2rem}
.kurs-card h3{font-size:1.7rem;margin-bottom:.5rem}
.kurs-card p{margin:0 0 .6rem}

.pricing-grid{display:grid;grid-template-columns:1fr;gap:2rem;margin-top:1rem}
.price-card{position:relative;background:var(--bg);border:1px solid var(--border);padding:2.2rem 1.7rem}
.price-card-featured{border:1px solid var(--text);background:var(--surface)}

.price-name{text-align:center;font-size:1.3rem;margin-bottom:.5rem}
.price-amount{text-align:center;font-family:var(--serif);font-size:2.8rem;line-height:1.1;margin:.6rem 0;color:var(--brand)}
.price-subtitle{text-align:center;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:500;margin-bottom:1rem}
.price-description{margin:.8rem 0;text-align:center}
.price-features{list-style:none;margin:1.2rem 0 0;padding:0;font-size:.95rem}
.price-features li{padding:.55rem 0;border-bottom:1px solid rgba(213,201,168,.6)}
.price-features li:last-child{border-bottom:0}

.coaching-cta{text-align:center;margin-top:4rem;padding-top:3rem;border-top:1px solid var(--border)}
.coaching-cta p{margin:0 0 .8rem}

@media(min-width:960px){.pricing-grid{grid-template-columns:repeat(3,1fr);align-items:start}.section{padding:8rem 0}}

/* ===== Footer (Stil der Schulseite) ===== */
.site-footer{background:linear-gradient(180deg,#34302A 0%,#2C2C2C 100%);color:#D9CFB8;padding:5rem 0 2.5rem;border-top:1px solid #000;font-size:.8rem}
.site-footer a{color:#E9E0CB;text-decoration:none}
.site-footer a:hover{color:var(--sand)}
.site-footer .foot-title,.site-footer .brand-name{color:#FDF6E8}

.foot-grid{display:grid;gap:3rem;padding-bottom:3rem;margin-bottom:2.5rem;border-bottom:1px solid rgba(213,201,168,.2)}
.foot-title{font-family:var(--serif);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brand);margin:0 0 1.4rem}
.foot-list{list-style:none;margin:0;padding:0}
.foot-list li{margin-bottom:.75rem}
.foot-list.caps{text-transform:uppercase;letter-spacing:.14em}
.foot-brand .brand-name{color:#FDF6E8;margin-bottom:.8rem}
.foot-bottom{display:flex;flex-direction:column;gap:1rem;justify-content:space-between;align-items:center;text-transform:uppercase;letter-spacing:.2em;font-size:.7rem}
.foot-bottom p{margin:0}
.foot-bottom nav a{margin:0 .8rem}
.site-footer .wrap>p{margin:.3rem 0}
@media(min-width:768px){.foot-grid{grid-template-columns:2fr 1.2fr 1fr 1.2fr}.foot-bottom{flex-direction:row}}

/* ===== Einstieg unter dem Hero (dunkel) ===== */

/* ===== Impressionen (Spalten-Galerie wie Schulseite) ===== */
.imp-head{max-width:640px;margin:0 auto 3.5rem}

/* ===== Portrait (rund, wie alte Yoga-Herz-Rhön-Seite) ===== */
.portrait{position:relative;width:300px;height:300px;max-width:80vw;max-height:80vw;margin:2rem auto 2.5rem;border-radius:50%;overflow:hidden;box-shadow:0 8px 30px rgba(44,44,44,.18);border:1px solid var(--border);background:linear-gradient(135deg,#EBDCBB,#FDF6E8)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:circle(50%);z-index:1}
.portrait-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--primary)}
.portrait-ph small{text-transform:none;letter-spacing:0;opacity:.7;margin-top:.3rem}
.about-text{text-align:left}

.section-dark .lead-soft{color:#E9E0CB}

/* ===== Umbau 3: Logo-Menü, heller Einstieg, Preiskarten, Textlinks ===== */
.logo{display:inline-flex;align-items:center;justify-content:center;flex:none;text-decoration:none;padding:0 .5rem}
.logo img{width:64px;height:64px;display:block}

.hero .lead{max-width:46rem;text-wrap:pretty}
@media(min-width:700px){.hero .lead .hero-l1,.hero .lead .hero-l2{display:block}}
.section-light{background:linear-gradient(180deg,#FFFCF0 0%,#FBF1DA 100%);color:var(--primary);border-top:0}
.intro-grid{display:grid;gap:2.5rem;align-items:center}
.intro-moon{max-width:260px;margin:0 auto}
.intro-moon svg{width:100%;height:auto;display:block}

.textlink{color:var(--text);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:.15rem;font-family:var(--serif);font-style:italic;font-size:1.05rem}
.textlink:hover{color:var(--primary);border-bottom-color:var(--primary)}
@media(min-width:860px){.intro-grid{grid-template-columns:.8fr 1.4fr;gap:4.5rem}}

.pcard-main{background:linear-gradient(160deg,#50483E 0%,#2C2C2C 100%);color:#E9E0CB;border:1px solid var(--gold);box-shadow:0 14px 40px rgba(44,44,44,.22)}

.pcard-main .btn-solid{background:#FDF6E8;color:var(--night);border-color:#FDF6E8}
.pcard-main .btn-solid:hover{background:transparent;color:#FDF6E8}

.pcard-main p{margin-bottom:0}

.coaching-cta .textlink,.narrow>p>.textlink{display:inline-block}

/* ===== Umbau 4: Stil des Logos (Salbeigrün/Petrol + Gold, helle cremige Flächen, keine blauen Töne) ===== */
:root{
  --sage:#5E8C80; --sage-l:#9FBDB1; --petrol:#2F5F5A; --petrol-d:#1F4743; --petrol-dd:#163836; --gold:#C9A66B; --gold-d:#A98650;
  --bg:#FBF6E9; --surface:#FFFCF3; --border:#DCCFAE; --sand:#E3D4AE;
  --brand:#24504B; --primary:#4C5B54; --text:#1F2D2A; --night:#1F4743; --night2:#2B5A55;
  --grad:linear-gradient(135deg,#F1E6CB 0%,#FCF7EA 50%,#EFE3C6 100%);
}
a{color:var(--petrol)}a:hover{color:var(--gold-d)}
.btn{border-color:var(--petrol);color:var(--petrol)}
.btn:hover,.btn-solid{background:var(--petrol);color:#FFFCF3}
.btn-solid:hover{background:transparent;color:var(--petrol)}

strong{color:var(--petrol-dd)}
:focus-visible{outline-color:var(--gold-d)}
/* Menü */
.site-nav{background:rgba(251,246,233,.97);border-bottom:1px solid var(--gold);box-shadow:0 1px 0 rgba(201,166,107,.25)}
.nav-in{height:6.1rem}
.logo img{width:auto;height:5rem}
.nav-side a,.mobile-menu a.mobile-link{color:var(--petrol)}
.nav-side a:hover{color:var(--gold-d)}

.hamburger,.menu-close{color:var(--petrol)}
.mobile-menu{background:var(--bg)}
.mobile-menu::before{content:'';width:min(260px,70vw);height:26px;background:url("../images/orn-divider.svg") center/contain no-repeat;margin-bottom:-.6rem}
@media(max-width:1023px){.nav-in{height:5.2rem;justify-content:flex-start}.logo{margin:0 auto}.logo img{height:4.1rem}}
/* Hero: Schatten petrolgrün statt blau */
.hero-shade{background:linear-gradient(to bottom,rgba(12,30,31,.58) 0%,rgba(12,30,31,.30) 45%,rgba(0,0,0,.06) 100%)}
.hero{border-bottom:2px solid var(--gold)}
.hero h1{max-width:none}
/* Abschnitte */
.section-light{background:linear-gradient(180deg,#FFFCF3 0%,#F6EED6 100%)}
.section-alt{background:linear-gradient(180deg,#FFFCF3 0%,#F1E8CE 100%)}

.section-dark{background:radial-gradient(120% 90% at 85% 0%,#37706A 0%,var(--petrol-d) 60%,var(--petrol-dd) 100%);color:#EDE6D2;border-top:1px solid var(--gold)}

.section-dark h2,.section-dark h3,.section-dark strong{color:#FFFCF3}
.section-dark .eyebrow{color:var(--gold)}

.eyebrow{color:var(--gold-d)}
.hero .eyebrow{color:#F3E3BE}
/* Überschrift-Ornament statt kurzer Linie */
h2::after{width:160px;height:16px;background:url("../images/orn-head.svg") left center/contain no-repeat;margin:1.1rem 0 0}
.center h2::after{background-position:center}
.section-dark h2::after{background:url("../images/orn-head.svg") left center/contain no-repeat}
.section-dark .center h2::after{background-position:center}
/* Trenner mit Ranke am Beginn ausgewählter Abschnitte */
.section-light,#inhalt,#ueber-nik,#impressionen,#kurse,#coaching,#kontakt{position:relative}
.section-light::before,#ueber-nik::before,#kurse::before,#kontakt::before{content:'';position:absolute;top:0;left:50%;width:min(360px,80vw);height:36px;transform:translate(-50%,-50%);background:url("../images/orn-divider.svg") center/contain no-repeat;z-index:3}
.section-light::before{display:none}
/* Eck-Rankenzier auf Karten */
.moon-card,.pcard-main{position:relative}
.moon-card::after,.pcard-main::after{content:'';position:absolute;left:0;bottom:0;width:64px;height:64px;background:url("../images/orn-corner.svg") center/contain no-repeat;opacity:.55;transform:scaleY(-1);pointer-events:none}
.pcard-main::after{left:auto;right:0;transform:scale(-1,-1);opacity:.8}
.moon-card{border-color:var(--border)}
.moon-card{background:var(--surface)}

.pcard-main{background:linear-gradient(160deg,#2F5F5A 0%,var(--petrol-dd) 100%);color:#EDE6D2;border:1px solid var(--gold)}

.pcard-main .btn-solid{background:#FFFCF3;color:var(--petrol-dd);border-color:#FFFCF3}
.pcard-main .btn-solid:hover{background:transparent;color:#FFFCF3}

.lead{color:var(--petrol)}
.textlink{color:var(--petrol);border-bottom-color:var(--gold)}
.textlink:hover{color:var(--gold-d);border-bottom-color:var(--gold-d)}

.hero .lead{color:#FFFCF3}
.intro-moon{max-width:280px}
.intro-moon img{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 22px rgba(31,71,67,.28))}
.portrait{border:none;box-shadow:0 8px 30px rgba(31,71,67,.2)}
/* Footer */
.site-footer{background:linear-gradient(180deg,#1F4743 0%,#163836 100%);border-top:2px solid var(--gold);color:#D6DDCF}
.site-footer a{color:#EDE6D2}.site-footer a:hover{color:var(--gold)}
.site-footer .foot-title{color:var(--gold)}
.foot-grid{border-bottom-color:rgba(201,166,107,.35)}
.foot-brand::before{content:'';display:block;width:84px;height:88px;margin-bottom:1rem;background:url("../images/logo-menu@2x.png") center/contain no-repeat;background-image:image-set(url("../images/logo-menu@2x.webp") type("image/webp"),url("../images/logo-menu@2x.png") type("image/png"));filter:drop-shadow(0 0 1px rgba(0,0,0,.4))}   /* Umbau 167: WebP 38 KB statt PNG 136 KB, PNG nur als Rückfall */
/* Formular / Akkordeon: Akzente */
.field input:focus,textarea:focus,select:focus{border-bottom-color:var(--gold-d)}
.field input,.check input{accent-color:var(--petrol)}
/* Mobile: Mond oben rechts frei, Text darunter (kein Überlappen) */
@media(max-width:700px){
  .hero{height:auto;min-height:620px;padding:12.5rem 0 2.5rem}
  .hero-photo{background-position:78% 0;background-size:auto 100%}
  .hero-shade{background:linear-gradient(to bottom,rgba(12,30,31,.05) 0%,rgba(12,30,31,.15) 28%,rgba(12,30,31,.62) 52%,rgba(12,30,31,.45) 100%)}
  .hero h1{font-size:clamp(2rem,10vw,2.6rem)}
  .hero .lead{font-size:1.1rem;padding-left:1rem}
}

/* ===== Umbau 5: Salbei/Petrol/Dämmerung statt Gold-Flächen, großes Menü-Logo, Logo im Einstieg, Formular wie Schulseite ===== */
:root{
  --bg:#EAF1ED; --surface:#F6FAF8; --border:#B5CBC1; --sand:#C3D8CE;
  --dusk:#3B3A5A; --dusk2:#4A4468; --ember:#B5532B;
  --grad:linear-gradient(160deg,#E6EEE9 0%,#EEF4F0 50%,#D9E7E0 100%);
}
body{background:var(--bg)}
.section{background:var(--grad)}
.section-light{background:linear-gradient(180deg,#F3F8F5 0%,#CFE0D8 100%)}
.section-alt{background:linear-gradient(180deg,#F6FAF8 0%,#D6E5DD 100%)}
.section-form{background:linear-gradient(160deg,#E6EEE9 0%,#CFE0D8 100%);border-top:1px solid var(--gold)}

.section-dark{background:linear-gradient(160deg,#3B3A5A 0%,#335563 55%,#2F5F5A 100%);color:#E8EFEA;border-top:1px solid var(--gold)}
.section-dark .eyebrow{color:#E8B48F}
.eyebrow{color:var(--ember)}
.hero .eyebrow{color:#F3E3BE}
.moon-card,.price-card,.kurs-card{background:var(--surface)}
.moon-card,.accordion-item,.kurs-card,.price-card{border-color:var(--border)}

.price-features li{border-bottom-color:rgba(137,170,155,.4)}
.pcard-main{background:linear-gradient(160deg,#3B3A5A 0%,#2F5F5A 100%)}

.site-footer{background:linear-gradient(180deg,#333358 0%,#243E48 60%,#163836 100%)}
.site-nav{background:rgba(234,241,237,.97)}
.mobile-menu{background:var(--bg)}
.field input:focus,textarea:focus,select:focus{border-bottom-color:var(--petrol)}

/* Menü: schlanke Leiste, Logo groß und über die Leiste hinaus */
.nav-in{height:4.4rem}
.site-nav{overflow:visible}
.logo{position:absolute;left:50%;top:.3rem;transform:translateX(-50%);z-index:5;padding:0}
.logo img{height:clamp(84px,7vw,98px);width:auto;display:block;filter:drop-shadow(0 8px 14px rgba(22,56,54,.35))}
.nav-side.left{padding-right:calc(clamp(84px,7vw,98px)*.48 + 1.5rem)}
.nav-side.right{padding-left:calc(clamp(84px,7vw,98px)*.48 + 1.5rem)}
@media(max-width:1023px){
  .nav-in{height:3.9rem;justify-content:flex-start}
  .logo{margin:0;left:50%}
  .logo img{height:66px}
}
/* Hero: Platz für das überstehende Logo (mobil) */
@media(max-width:700px){.hero{padding-top:9rem}}

/* Einstieg: Logo links, Text rechts (mobil: Logo oben) */
.intro-moon{max-width:min(360px,80vw);margin:0 auto}
.intro-moon img{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 24px rgba(31,71,67,.28))}
@media(min-width:860px){.intro-grid{grid-template-columns:minmax(300px,.9fr) 1.4fr;gap:4rem}.intro-moon{max-width:none;width:100%}}

/* Formular wie bewegungskunst-fulda.de: Linien-Felder, Dropdown, Meldung als Overlay */
.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#contact-form{scroll-margin-top:2.6rem}
.field select,.field textarea{width:100%;font:inherit;font-size:1rem;font-weight:400;padding:.7rem 0;border:0;border-bottom:1px solid rgba(26,26,26,.3);background:transparent;color:var(--text);border-radius:0}
.field select{cursor:pointer;appearance:none;-webkit-appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%232F5F5A' stroke-width='1.5'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E") right .2rem center no-repeat;padding-right:1.8rem}
.field select option{color:#1F2D2A;background:#F6FAF8}
.field textarea{resize:none;min-height:6.5rem}
.field select:focus,.field textarea:focus{}
.field textarea::placeholder{color:rgba(80,72,62,.7)}
.form .btn{align-self:flex-start;margin-top:.6rem}
.form-msg{position:absolute;inset:0;z-index:10;background:linear-gradient(160deg,#E6EEE9 0%,#CFE0D8 100%);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.form-msg[hidden]{display:none}
.form-msg h3{font-size:1.6rem}

/* ===== Umbau 6: Farbrhythmus. Strikt abwechselnd hell / dunkel; Gold nur als Linie =====
   Reihenfolge: Hero(dunkel) · mist · dusk · cream · petrol · mist · dusk2 · cream · petrol · mist · dusk · cream · sage · Footer(dunkel) */
.tone-mist{background:linear-gradient(180deg,#E6EEE9 0%,#CFE0D8 100%)!important;color:var(--primary)}
.tone-cream{background:linear-gradient(180deg,#FBFBF6 0%,#F0F3E8 100%)!important;color:var(--primary)}

.tone-dusk{background:linear-gradient(160deg,#3B3A5A 0%,#335563 60%,#2F5F5A 100%)!important}

.tone-petrol{background:radial-gradient(120% 90% at 85% 0%,#37706A 0%,#1F4743 55%,#163836 100%)!important}
.tone-dusk,.tone-petrol{color:#E4ECE7;border-top:1px solid var(--gold)}
.tone-mist,.tone-cream{border-top:1px solid rgba(201,166,107,.55)}
.tone-dusk h2,.tone-petrol h2,.tone-dusk h3,.tone-petrol h3,.tone-dusk strong,.tone-petrol strong{color:#FFFCF3}
.tone-dusk .eyebrow,.tone-petrol .eyebrow{color:#E3C58F}
.tone-mist .eyebrow,.tone-cream .eyebrow{color:#A4532D}

.tone-dusk a,.tone-petrol a{color:#FFFCF3}
.tone-dusk .textlink,.tone-petrol .textlink{border-bottom-color:var(--gold)}

/* Karten bleiben hell mit dunkler Schrift, auch auf dunklem Grund */
.tone-dusk .moon-card,.tone-dusk .kurs-card,.tone-mist .kurs-card,.tone-cream .price-card,.tone-cream .moon-card,.tone-mist .moon-card{color:var(--primary)}
.tone-cream .moon-card,.tone-cream .price-card,.tone-cream .kurs-card{background:#fff;border-color:#C9DAD1}
.tone-cream .price-card-featured{background:#F3F8F5;border-color:var(--petrol)}
.tone-mist .kurs-card{background:rgba(255,255,255,.7)}
.tone-cream .moon-card h3,.tone-cream .price-card h3,.tone-mist .kurs-card h3{color:var(--brand)}
.tone-cream .moon-card strong,.tone-cream .price-card strong{color:var(--petrol-dd)}
/* Gut zu wissen auf Petrol: Akkordeon als transparente Fläche mit heller Schrift */

.tone-petrol .accordion-item{border-bottom-color:rgba(201,166,107,.35)}
.tone-petrol .accordion-btn{color:#FFFCF3}
.tone-petrol .accordion-btn:hover{color:#E3C58F}
.tone-petrol .accordion-content{color:#E4ECE7}

/* Für wen / Atemzeremonie auf dunkel: Listen und Linien */
.tone-dusk li,.tone-petrol li{color:inherit}
.tone-dusk .facts-soft li{border-bottom-color:rgba(201,166,107,.35)}

/* Ort-Platzhalter und Galerie-Rahmen */

/* Ranken-Trenner an jedem Abschnittsanfang (außer dem ersten) */
.tone-dusk,.tone-cream,.tone-petrol,.tone-mist{position:relative}
.tone-dusk::before,.tone-cream::before,.tone-petrol::before,.tone-mist:not(#fuenf-monde)::before{content:'';display:block!important;position:absolute;top:0;left:50%;width:min(360px,80vw);height:36px;transform:translate(-50%,-50%);background:url("../images/orn-divider.svg") center/contain no-repeat;z-index:3}
/* Ränder der Karten im Preisbereich auf Mist */

/* ===== Umbau 7: Kontakt dunkel (Petrol -> Dämmerungsviolett), Footer abgesetzt ===== */

.site-footer{position:relative;background:linear-gradient(180deg,#171E2B 0%,#12201F 100%);border-top:2px solid var(--gold)}
.foot-orn{position:absolute;top:0;left:50%;width:min(300px,70vw);height:30px;transform:translate(-50%,-50%);background:url("../images/orn-divider.svg") center/contain no-repeat}

/* ===== Umbau 8: Kontakt in Menü-Farbe (Salbei-Nebel), Erstgespräch, mehr Bronze ===== */
.section-form.tone-menu{background:linear-gradient(180deg,#EAF1ED 0%,#DCE8E1 100%)!important;color:#2B3A36;border-top:1px solid var(--gold);position:relative}
.tone-menu::before{content:'';display:block;position:absolute;top:0;left:50%;width:min(360px,80vw);height:36px;transform:translate(-50%,-50%);background:url("../images/orn-divider.svg") center/contain no-repeat;z-index:3}
.tone-menu .eyebrow{color:#8A5A2B}
.tone-menu h2{color:#163836}
.tone-menu a:not(.btn){color:#163836;text-decoration-color:#B8956A}
.tone-menu .field label,.tone-menu .check label{color:#1F2D2A}
.tone-menu .field input,.tone-menu .field select,.tone-menu .field textarea{border-bottom:1px solid rgba(22,56,54,.55);color:#10201E}
.tone-menu .field input::placeholder,.tone-menu .field textarea::placeholder{color:rgba(22,56,54,.62)}
.tone-menu .field input:focus,.tone-menu .field select:focus,.tone-menu .field textarea:focus{border-bottom-color:#B8956A}
.tone-menu .btn{border:1px solid #163836;color:#163836;background:transparent}
.tone-menu .btn:hover{background:#B8956A;border-color:#B8956A;color:#163836}
.tone-menu .btn-solid{background:#1F4743;color:#FFFCF3;border-color:#1F4743}
.tone-menu .btn-solid:hover{background:#B8956A;border-color:#B8956A;color:#163836}

.tone-menu .form-msg{background:#fff;color:#1F2D2A;border:1px solid #B8956A}
.tone-menu .form-msg h3{color:#163836}
.kontakt-lead{font-size:1.1rem;line-height:1.65;margin-bottom:1.4rem}

.form-hint{margin:-.8rem 0 1.4rem;font-size:.85rem;opacity:.85}
/* mehr Bronze */
h2::after{width:4.6rem;height:2px;background:linear-gradient(90deg,#B8956A,#E3C58F 60%,transparent)}
.center h2::after{background:linear-gradient(90deg,transparent,#B8956A,transparent)}

.kurs-card,.price-card,.moon-card{border-top:2px solid #C9A66B}
.btn:hover,.btn-solid:hover{border-color:#B8956A}
.textlink{border-bottom:1px solid #C9A66B}
.mobile-link:hover{color:#C9A66B}
.site-nav{border-bottom:2px solid #C9A66B}
.eyebrow{position:relative}
.tone-mist .eyebrow,.tone-cream .eyebrow{color:#8A5A2B}

.site-footer .foot-title{color:#D8B97F}

/* ===== Umbau 10: So arbeite ich, Gründerpreis-Geltung, Anmeldung in vier Schritten, zwei Wege im Kontakt, Formular Thema/Schritt, Stimmen (vorbereitet) ===== */
/* So arbeite ich (auf Dämmerung): Liste wie „Für dich, wenn …“, fette Einstiege in Gold-Sand */

/* Gründerpreis: Geltung direkt unter dem Betrag */

/* So meldest du dich an (heller Kasten im Programm-Abschnitt) */

/* Kontakt: zwei gleichwertige Wege */

/* Formular: nächster Schritt als Auswahl */
.choice{border:0;padding:0;margin:0 0 1.6rem;min-width:0}
.choice legend{display:block;padding:0;font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.5rem;color:#1F2D2A}
.choice-opt{display:flex;gap:.8rem;align-items:flex-start;padding:.7rem 0;border-bottom:1px solid rgba(22,56,54,.22);cursor:pointer;font-size:1rem;color:#10201E}
.choice-opt input{flex:none;width:1.1rem;height:1.1rem;margin-top:.3rem;accent-color:#1F4743}
.choice-opt small{display:block;font-size:.85rem;opacity:.8;margin-top:.1rem}
/* Stimmen (V14, im HTML noch auskommentiert): dunkel im Stil des Heros */
.stimmen{position:relative;overflow:hidden;color:var(--surface);background:#1F3A3A;border-top:2px solid var(--gold);border-bottom:2px solid var(--gold)}
.stimmen::before{content:'';display:block;position:absolute;top:0;left:50%;width:min(360px,80vw);height:36px;transform:translate(-50%,-50%);background:url("../images/orn-divider.svg") center/contain no-repeat;z-index:3}

.stimmen .eyebrow{color:var(--surface);opacity:.85}
.stimmen h2{color:#FFFCF3}

.form .choice label.choice-opt{display:flex;text-transform:none;letter-spacing:0;font-size:1rem;font-weight:400;margin:0;color:#10201E}
.form .choice label.choice-opt small{font-size:.85rem;letter-spacing:0;text-transform:none}
.form .choice .choice-opt input[type=radio]{width:1.1rem;height:1.1rem;padding:0;border:0;margin:.3rem 0 0;flex:none}

/* Karte (Zwei-Klick-Lösung wie bewegungskunst-fulda.de) */
.map-box{position:relative;width:100%;height:24rem;margin:1.5rem 0;background:var(--bg);border:1px solid var(--border);border-radius:2px;overflow:hidden}
.map-placeholder{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;text-align:center;background:var(--bg);transition:opacity .5s}
.map-placeholder h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;margin:0 0 .8rem}
.map-placeholder p{font-size:.78rem;max-width:26rem;margin:0 0 1.4rem;line-height:1.6}
.map-placeholder .btn{padding:.7rem 1.6rem;font-size:.7rem}
.map-placeholder.is-hidden{opacity:0;pointer-events:none}
.map-container{width:100%;height:100%;opacity:0;transition:opacity .5s}
.map-container.is-visible{opacity:1}
.map-container iframe{width:100%;height:100%;border:0}
.map-placeholder,.map-placeholder p{color:var(--primary)}.map-placeholder h3{color:var(--brand)}.map-placeholder a{color:var(--text)}
.map-box .map-placeholder p,.map-box .map-placeholder{color:#50483E!important}.map-box .map-placeholder h3{color:#2C2C2C!important}.map-box .map-placeholder a{color:#1A1A1A!important}

/* ===== Umbau 13 ===== */
/* V35: Lesbarkeit. Schrift in normaler Strichstärke (body 400), Labels mindestens .8rem, Sperrung ca. .12em */
.eyebrow,.accordion-btn,.field label,.price-subtitle,.choice legend,.foot-title,.foot-bottom,.portrait-ph,.map-placeholder h3,.btn,.map-placeholder .btn{font-size:max(.8rem,1em);letter-spacing:.12em}
.eyebrow,.accordion-btn,.field label,.price-subtitle,.choice legend,.foot-title,.foot-bottom,.portrait-ph,.map-placeholder h3,.btn,.map-placeholder .btn{font-size:.8rem}

.map-placeholder p{font-size:.88rem}

.foot-list.caps{letter-spacing:.12em}
/* V31: FAQ-Überschriften im Akkordeon (h3 um den Button, optisch unverändert) */

.accordion-content a{text-decoration:underline;text-underline-offset:3px}
/* V36: Kalender-Link */

/* V37: Formularfehler, Fokus der Meldungen */
.form-err{margin:.6rem 0 1rem;padding:.7rem 1rem;border-left:3px solid #A4532D;background:rgba(164,83,45,.1);color:#5C2A12;font-size:.95rem}
.form-err[hidden]{display:none}
.field input[aria-invalid="true"]{border-bottom-color:#A4532D;border-bottom-width:2px}
.form-msg:focus{outline:2px solid var(--gold-d);outline-offset:-4px}
/* V37: weniger Bewegung, wenn am Gerät so eingestellt */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .accordion-content{transition:none}
}
/* V38: Hero-Textlink (nur mobil). Umbau 294: „Termine ↓“ entfällt auf Mobil, Desktop bleibt ohne ihn. */
.hero-link{display:none}
@media(max-width:700px){
  .hero{min-height:70vh;min-height:70svh;height:auto;padding-bottom:1.6rem}
  .hero-photo{background-position:70% 0}
}

/* Umbau 16 */

.dates-title{font-family:var(--serif);font-size:1.15rem;margin:2rem 0 .8rem}
.date-chips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:.6rem}
.date-chips li{background:#fff;border:1px solid var(--border);border-top:2px solid #C9A66B;padding:.7rem .4rem;text-align:center}
.dc-m{display:block;text-transform:uppercase;letter-spacing:.16em;font-size:.65rem;color:#8A5A2B}
.dc-d{display:block;font-family:var(--serif);font-size:1.3rem;margin-top:.15rem}

.offer-card{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;margin:1.8rem 0;padding:1.4rem 1.6rem;background:linear-gradient(160deg,#50483E 0%,#2C2C2C 100%);color:#E9E0CB;border:1px solid #C9A66B}
.oc-price{display:flex;flex-direction:column;line-height:1.1}
.oc-old{font-size:.95rem;opacity:.7}
.oc-new{font-family:var(--serif);font-size:clamp(2.2rem,6vw,3rem);color:#FDF6E8}
.oc-text{display:flex;flex-direction:column;gap:.25rem;font-size:.9rem;flex:1;min-width:220px}
.oc-text strong{font-family:var(--serif);font-size:1.15rem;font-weight:400;color:#F3E3BE;letter-spacing:.04em}

/* Umbau 20: Hero-Zusatzzeile; Umbau 44 Desktop einzeilig; Umbau 53 Mobil kürzer */
.hero .hero-zeit{margin:1.5rem 0 0;max-width:34rem;font-size:1rem;line-height:1.6;color:#E9D9B4;letter-spacing:.01em}
.hero .hero-zeit-short{display:none}
@media (min-width:768px){.hero .hero-zeit{max-width:none;width:max-content;white-space:nowrap}}
@media (max-width:767px){
  .hero .hero-zeit{max-width:none;font-size:clamp(.82rem,3.6vw,1rem)}
  .hero .hero-zeit-long{display:none}
  .hero .hero-zeit-short{display:block}
  .hero-zeit-ed,.hero-zeit-tage{display:block}
  .hero-zeit-uhr{white-space:nowrap}
}

/* Umbau 20: Gründerplatz-Karte hell, warm und einladend */
.offer-card{background:linear-gradient(150deg,#FFF6E2 0%,#FCE6C6 100%);color:#3B4A44;border:1px solid #E6C58E;border-radius:14px;box-shadow:0 8px 24px rgba(181,83,43,.12)}
.oc-old{opacity:.6;color:#6A6F66}
.oc-new{color:#2F5F5A}
.oc-text strong{color:#2F5F5A;font-size:1.25rem}
.oc-old{font-size:1.15rem;opacity:1;color:#5E6B63;text-decoration-thickness:2px}

/* Umbau 20: Menü im Ton des Nachthimmels (wie Footer) */
.site-nav{background:#0C1727;border-bottom:2px solid #C9A66B;box-shadow:none}
.site-nav .nav-side a{color:#F3E3BE}
.site-nav .nav-side a:hover{color:#fff}
.site-nav .hamburger{color:#F3E3BE}
.mobile-menu{background:#0C1727}
.mobile-menu a.mobile-link{color:#F3E3BE}

.menu-close{color:#F3E3BE}

/* Umbau 21: Menü zweizeilig, Angebote als Karten */
@media(min-width:900px) and (max-width:1179px){.nav-side{gap:1.1rem;letter-spacing:.1em;font-size:.76rem}.nav-side.left{padding-right:calc(clamp(84px,7vw,98px)*.48 + .9rem)}.nav-side.right{padding-left:calc(clamp(84px,7vw,98px)*.48 + .9rem)}}

.angebot-card{background:#FBF5E8!important;color:#1F4D4A!important;border-color:#C9A66B!important}
.angebot-card h3{color:#1F4D4A!important;font-size:1.7rem;margin-bottom:.8rem}
.angebot-card .facts-soft li{border-bottom-color:rgba(31,77,74,.2)!important;padding:.7rem 0}
.angebot-card a.textlink{color:#1F4D4A}

.angebot-card p,.angebot-card li,.angebot-card strong,.angebot-card .small{color:#1F4D4A!important}

/* Umbau 22: Impressionen hell (Wechsel dunkel/hell) */

/* Umbau 23: gemischtes Raster Bilder + Stimmen */

/* Umbau 22: fünf Mondphasen statt Karten */
.every-weekend{margin:2rem 0 2.2rem;padding:2rem 1.6rem;background:linear-gradient(160deg,#2B5A55 0%,#1F4743 100%);color:#F3EBD6;border:1px solid #C9A66B;box-shadow:0 14px 40px rgba(31,71,67,.22);text-align:center}
.every-weekend h3{color:#E3C98F;margin:0 0 .8rem;font-size:1.5rem}
.every-weekend h3::after{content:'';display:block;width:3.2rem;height:1px;background:#C9A66B;margin:.8rem auto 0}
.every-weekend p{margin:1rem auto 0;max-width:62ch;color:#F3EBD6;font-size:1.05rem;line-height:1.7;font-weight:300} /* Umbau 81: Nik „zu fett“ → Inter Light */

.moon-det summary{list-style:none;cursor:pointer;display:block;padding:1.5rem 1.4rem 1.2rem;position:relative}
.moon-det summary::-webkit-details-marker{display:none}

@media(min-width:900px){
.every-weekend{padding:2.6rem 3rem}

.moon-det{display:flex;flex-direction:column;width:100%}
.moon-det summary{cursor:default;padding:1.9rem 1.8rem 1rem;pointer-events:none}

}
/* Eindrücke: Bilderwand (Spalten) mit Stimmen */

/* Umbau: Angebotskarten gleich hoch, ohne Zierlinie oben */
.angebot-card{height:100%;display:flex;flex-direction:column;border-top:1px solid #C9A66B!important;background-image:none}
.angebot-card::before,.angebot-card::after{content:none!important;display:none!important}
.angebot-card>p:last-child{margin-top:auto;margin-bottom:0;padding-top:.6rem}

/* Umbau 26: Unterkunftsliste */
.unterkunft-liste{margin:.4rem 0 1rem;padding-left:1.2rem}
.unterkunft-liste li{margin:.35rem 0}

.warum-monde p{font-size:1.15rem;line-height:1.7}

/* Umbau 31 */

.tone-dusk .imp-head p{color:#E4ECE7}

/* Umbau 37: Angebote als Akkordeon */
.offer-tabs{display:grid;grid-template-columns:1fr;gap:.8rem;margin:2.2rem 0 0}
@media(min-width:700px){.offer-tabs{grid-template-columns:repeat(3,1fr);gap:1.1rem}}
.offer-tab{font:inherit;font-family:var(--serif);font-size:1.35rem;letter-spacing:.04em;padding:1.05rem 1.2rem;background:rgba(255,252,243,.06);color:#FFFCF3;border:1px solid var(--gold);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.7rem;transition:background .25s,color .25s}
.offer-tab::after{content:'';width:.55rem;height:.55rem;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg) translateY(-2px);transition:transform .3s,border-color .25s}
.offer-tab:hover{background:rgba(201,166,107,.22)}
.offer-tab[aria-expanded="true"]{background:var(--gold);color:var(--petrol-dd)}
.offer-tab[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px);border-color:var(--petrol-dd)}
.offer-tab:focus-visible{outline:2px solid #FFFCF3;outline-offset:3px}
.offer-panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .45s ease,visibility 0s linear .45s;scroll-margin-top:6rem}
.offer-panel.is-open{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .45s ease,visibility 0s}
.offer-panel-in{overflow:hidden;min-height:0}
.offer-panel.is-open .offer-panel-in{padding-top:1.6rem}
.offer-box{background:#FBF6E9;color:#2B2B2B;border:1px solid var(--gold);padding:2.5rem 1.3rem}
@media(min-width:960px){.offer-box{padding:3.5rem 3rem}}
.offer-box h3,.offer-box h4,.offer-box strong{color:var(--petrol-dd)}
.offer-box .price-card{background:#FFFCF3}
.offer-box .price-card-featured{background:#fff}

.offer-panel .angebot-card{max-width:760px;margin:0 auto;color:#2B2B2B}
.offer-panel .angebot-card h3{color:var(--petrol-dd)}
.offer-box #coaching-titel{margin-top:0}
/* Umbau 197: Coaching-Titel wie Yogakurse/Breathwork */
.offer-panel .offer-box #coaching-titel{font-size:1.7rem;color:#1F4D4A;margin-bottom:.8rem}
@media(prefers-reduced-motion:reduce){.offer-panel,.offer-tab::after{transition:none}}

.offer-box #coaching-titel{text-align:center}
.offer-box #coaching-titel::after{margin-left:auto;margin-right:auto}
.offer-box .offer-intro{max-width:46rem;margin-left:auto;margin-right:auto;text-align:center}
/* Umbau 41: Ort dunkel */

/* u22: Fokus deutlich sichtbar (Petrol auf hell, Creme auf dunkel), Eyebrow-Kontrast auf hellem Mint ≥ 4,5:1 */
:focus-visible{outline:2px solid #1F4743;outline-offset:3px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,.check input:focus-visible,.choice-opt input:focus-visible{outline:2px solid #1F4743;outline-offset:2px}
.hero :focus-visible,.tone-dusk :focus-visible,.tone-petrol :focus-visible,.section-dark :focus-visible,.site-nav :focus-visible,.site-footer :focus-visible{outline-color:#FFFCF3}
.offer-tab:focus-visible{outline:2px solid #FFFCF3;outline-offset:3px}
.form-msg:focus{outline:2px solid #1F4743;outline-offset:-4px}
.tone-mist .eyebrow,.tone-cream .eyebrow,.tone-menu .eyebrow,.section-light .eyebrow{color:#7A4E22}
/* u22: So läuft die Anmeldung, Datenschutz-Hinweis im Formular, Telefonzeile */
/* 27.10.2026: Preisbox nur noch mit Button; Anmeldeschritte als Mondphasen im Kontaktbereich */
.oc-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin:-.2rem 0 1rem}
.mond-schritte{margin:.4rem 0 2.2rem;padding:1.6rem 0 1.5rem;border-top:1px solid rgba(184,149,106,.55);border-bottom:1px solid rgba(184,149,106,.55);text-align:center}
.mond-schritte h3{margin:0 0 1.3rem;font-size:.8rem;font-family:var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#7A4E22}
.mond-schritte ol{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;position:relative}
.mond-schritte li{display:flex;align-items:center;gap:1rem;text-align:left;position:relative}
.ms-mark{flex:0 0 auto;width:2.9rem;height:2.9rem;border-radius:50%;display:grid;place-items:center;background:#FBF6E9;border:1px solid #B8956A;position:relative;z-index:1}
.ms-mark svg{width:1.6rem;height:1.6rem;display:block}
.ms-ring{fill:none;stroke:#B8956A;stroke-width:1}
.ms-lit{fill:#C9A66B}
.ms-text{font-family:var(--serif);font-style:italic;font-size:1.08rem;line-height:1.5;color:#163836}
/* Mobil: feine Goldlinie senkrecht durch die Marken */
.mond-schritte ol::before{content:'';position:absolute;left:1.45rem;top:1.45rem;bottom:1.45rem;width:1px;background:linear-gradient(180deg,#B8956A,rgba(184,149,106,.5))}
@media(min-width:700px){
  .mond-schritte ol{grid-template-columns:repeat(3,1fr);gap:1.6rem}
  .mond-schritte li{flex-direction:column;text-align:center;gap:.9rem}
  .ms-text{font-size:1.02rem;max-width:14rem}
  .mond-schritte ol::before{left:16.66%;right:16.66%;top:1.45rem;bottom:auto;width:auto;height:1px;background:linear-gradient(90deg,rgba(184,149,106,.6),#B8956A,rgba(184,149,106,.6))}
}
.form-privacy{margin:0 0 1.2rem;font-size:.8rem;line-height:1.6;opacity:.9}

/* u23: Rückruf-Wunsch im Formular */
.rueckruf-opt{margin:-.4rem 0 1rem}
.rueckruf-felder{margin:0 0 .6rem;padding-left:1.9rem}
.rueckruf-felder[hidden]{display:none}

/* 28.10.2026: Gesundheitsfragebogen (fragebogen.html) */
.fragebogen .fb-lead{font-family:var(--serif);font-style:italic;font-size:1.2rem;line-height:1.6;color:#163836}
.fragebogen h2{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(184,149,106,.55)}
.fb-intro{font-size:.95rem;opacity:.9;margin-bottom:1.4rem}
.fb-q{border:0;margin:0;padding:1rem 0;border-bottom:1px solid rgba(22,56,54,.18);min-width:0}
.fb-q legend{float:left;width:100%;padding:0;font-size:1rem;line-height:1.55;color:#10201E;margin-bottom:.7rem}
.fb-q .fb-hint{clear:both}
.fb-yn{clear:both;display:flex;gap:.8rem}
.fb-yn label{position:relative;cursor:pointer}
.fb-yn input{position:absolute;opacity:0;width:1px;height:1px}
.fb-yn span{display:inline-block;min-width:5.2rem;padding:.6rem 1.2rem;text-align:center;border:1px solid #B8956A;border-radius:999px;background:#FFFCF3;color:#163836;font-size:.95rem;transition:background .2s,color .2s}
.fb-yn label:hover span{background:#F3EAD3}
.fb-yn input:checked+span{background:var(--petrol,#2F5F5A);border-color:var(--petrol,#2F5F5A);color:#FFFCF3}
.fb-yn input:focus-visible+span{outline:2px solid #1F4743;outline-offset:2px}
.fb-hint{font-size:.85rem;opacity:.85;margin:.2rem 0 .7rem}
.fb-q.is-invalid legend{color:#7A2E12}
.fb-q.is-invalid .fb-yn span{border-color:#A4532D;border-width:2px}
.fb-form .field label.fb-label-plain{text-transform:none;letter-spacing:0;font-size:.95rem;font-weight:400;line-height:1.5;margin-bottom:.1rem}
.fb-opt{opacity:.7}
.fb-form .field textarea{min-height:3.6rem}
.fb-notfall{border:0;padding:0;margin:1.6rem 0 0;min-width:0}
.fb-notfall legend{font-size:.95rem;padding:0;margin-bottom:.2rem;color:#10201E}
.fb-check{font-size:.92rem;line-height:1.6;padding:.6rem .7rem;margin:0 -.7rem .6rem;border-radius:6px}
.fb-check input{width:1.3rem;height:1.3rem;margin-top:.15rem}
.fb-check.is-invalid{background:rgba(164,83,45,.1);outline:1px solid rgba(164,83,45,.5)}
.fb-summary ul{margin:.4rem 0 0;padding-left:1.2rem}
.fb-summary a{color:#5C2A12}
.fb-summary{scroll-margin-top:110px}
.fb-summary:focus{outline:2px solid #A4532D;outline-offset:2px}
#fb-edition .choice-opt{text-transform:none;letter-spacing:0;font-size:1rem;font-weight:400}
/* 28.10.2026 Runde 2: Fragebogen nach Review (Krisenkasten, Hinweis, Datenblock) */
.fb-note{font-size:.92rem;padding:.7rem .9rem;border-left:3px solid #B8956A;background:rgba(243,234,211,.5);margin:0 0 1.2rem}
.fb-krise{clear:both;margin:1rem 0 .2rem;padding:.9rem 1rem;border:1px solid #2F5F5A;border-radius:8px;background:#EEF4F1;font-size:.92rem;line-height:1.6}
.fb-krise p{margin:0 0 .5rem}.fb-krise p:last-child{margin-bottom:0}
.fb-krise a{color:#163836;font-weight:500;white-space:nowrap}
.fb-daten{margin:0 0 1.6rem;padding:1rem 1.1rem;border:1px solid rgba(184,149,106,.7);border-radius:8px;background:#FFFCF3;font-size:.9rem;line-height:1.6}
.fb-daten h3{margin:0 0 .5rem;font-size:1.05rem}
.fb-daten ul{margin:0 0 .6rem;padding-left:1.1rem}
.fb-daten li{margin-bottom:.4rem}
.fb-daten .small{margin:0}
.fb-details[hidden]{display:none}
.field.is-invalid input,.field input[aria-invalid="true"]{border-bottom-color:#A4532D;border-bottom-width:2px}
.fb-edition.is-invalid legend{color:#7A2E12}
/* 28.10.2026 Runde 3: Hinweis direkt an der Frage (C21) */
.fb-err-inline{display:none;clear:both;margin:.5rem 0 0;font-size:.85rem;color:#7A2E12}
.fb-q.is-invalid .fb-err-inline{display:block}
.fb-daten p{margin:0 0 .6rem}.fb-daten p:last-child{margin-bottom:0}
.oc-frage-hinweis{display:block;margin-top:1.1rem;font-family:var(--serif);font-style:italic;font-size:1.05rem;opacity:.85}

/* 29.10.2026: Mondkarten ohne Fließtext, nicht aufklappbar */

.erwartet li{margin-bottom:.45rem}

/* 29.10.2026: Coaching-CTA „Kennenlernen vereinbaren“ als gut lesbarer Button (vorher weiße Schrift auf hellem Grund) */
.offer-box .coaching-cta .btn.cta-kennenlernen{display:inline-block;margin-top:.4rem}
/* 29.10.2026: zweite Checkbox „Ich möchte einen Videocall“ direkt unter „Ich möchte telefonieren“ */
.rueckruf-opt + .videocall-opt{margin-top:-.6rem}
.offer-box .coaching-cta a.btn.cta-kennenlernen{background:var(--petrol);color:#FFFCF3;border-color:var(--petrol)}
.offer-box .coaching-cta a.btn.cta-kennenlernen:hover,.offer-box .coaching-cta a.btn.cta-kennenlernen:focus-visible{background:transparent;color:var(--petrol)}

/* 29.10.2026 (Nik: Übergang Menü → Hero nahtlos): Menüfarbe = gemessene Himmelsfarbe in der obersten Hero-Zeile (inkl. Hero-Schleier), links → rechts.
   Desktop (Hero-Bild hero-hd): vorher flach #0C1727, gemessen 13,26,40 → 21,31,45 → 19,30,41. Mobil ≤700 px (hero-mobile): 27,30,60 → 34,32,60 → 34,32,58. */
.site-nav{background:linear-gradient(90deg,rgb(13,26,40) 0%,rgb(18,29,44) 25%,rgb(21,31,45) 50%,rgb(21,31,44) 75%,rgb(19,30,41) 100%)}
.mobile-menu{background:linear-gradient(90deg,rgb(13,26,40) 0%,rgb(18,29,44) 25%,rgb(21,31,45) 50%,rgb(21,31,44) 75%,rgb(19,30,41) 100%)}
@media(max-width:700px){
  .site-nav,.mobile-menu{background:linear-gradient(90deg,rgb(27,30,60) 0%,rgb(32,31,60) 25%,rgb(34,32,60) 50%,rgb(35,32,59) 75%,rgb(34,32,58) 100%)}
}

/* Umbau 88: Abschnitt Achtsamkeit, dezente Quellenzeile */

/* ===== Umbau 97: Ritualpflanzen – geteilt wie „Worum es geht“ (intro-grid), links Tasse mit Überblendung, rechts fünf Schalter ===== */
.tone-ritual{background:linear-gradient(180deg,#F8F3EA 0%,#F2EADD 100%)!important;color:var(--primary);border-top:1px solid rgba(201,166,107,.55)}
.tone-ritual .eyebrow{color:#A4532D}
.tone-ritual::before{content:'';display:block;position:absolute;top:0;left:50%;width:min(360px,80vw);height:36px;transform:translate(-50%,-50%);background:url("../images/orn-divider.svg") center/contain no-repeat;z-index:3}
#ritualpflanzen{position:relative}
.rp-grid{align-items:center}
@media(min-width:860px){.rp-grid{grid-template-columns:1fr 1fr;gap:4.5rem}}
.rp-media{width:100%;max-width:560px;margin:0 auto}
.rp-stack{position:relative;aspect-ratio:5/4;isolation:isolate}
.rp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;opacity:0;transition:opacity .8s ease-in-out;pointer-events:none;filter:drop-shadow(0 18px 22px rgba(80,62,40,.14))}
.rp-img.is-active{opacity:1}
/* Überblendung ohne „durchsichtige“ Tasse: plus-lighter addiert beide Bilder; wo sie gleich sind (Tasse), bleibt es voll deckend */
@supports (mix-blend-mode:plus-lighter){.rp.is-ready .rp-img{mix-blend-mode:plus-lighter;filter:none}.rp.is-ready .rp-stack{filter:drop-shadow(0 18px 22px rgba(80,62,40,.14))}}
/* Ohne plus-lighter: altes Bild bleibt voll darunter, nur das neue blendet darüber ein (JS setzt is-under) */
@supports not (mix-blend-mode:plus-lighter){.rp-img.is-under{opacity:1;transition:none}.rp-img.is-active{z-index:2}}
.rp-copy h2{margin-bottom:.6em}
.rp-lead{max-width:34rem}
.rp-list{list-style:none;margin:1.6rem 0 0;padding:0}
.rp-item{border-bottom:0}
.rp-btn{all:unset;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem;width:100%;padding:1rem 2.2rem 1rem 0;cursor:pointer;position:relative;color:var(--brand)}
.rp-btn::after{content:'';position:absolute;right:.4rem;top:50%;width:.6rem;height:.6rem;margin-top:-.3rem;border-radius:50%;border:1px solid var(--gold);transition:background .3s}
.rp-btn[aria-pressed="true"]::after{background:var(--gold)}
.rp-btn:hover .rp-name{color:var(--gold-d)}
.rp-btn:focus-visible{outline:2px solid var(--gold-d);outline-offset:3px}
.rp-name{font-family:var(--serif);font-size:1.3rem;line-height:1.3;transition:color .3s;display:inline-block;padding-bottom:.4rem;border-bottom:1px solid rgba(201,166,107,.55)}

.rp-btn[aria-pressed="true"] .rp-name{color:var(--petrol)}
.rp-panel-in p{margin:0 0 1.1rem;max-width:34rem}
.rp.is-ready .rp-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease}
.rp.is-ready .rp-panel>.rp-panel-in{overflow:hidden;min-height:0;opacity:0;transition:opacity .4s ease}
.rp.is-ready .rp-item.is-active .rp-panel{grid-template-rows:1fr}
.rp.is-ready .rp-item.is-active .rp-panel>.rp-panel-in{opacity:1;transition-delay:.12s}
@media(prefers-reduced-motion:reduce){.rp-img,.rp.is-ready .rp-panel,.rp.is-ready .rp-panel>.rp-panel-in{transition:none!important}}
@media(max-width:859px){.rp-media{max-width:480px}.rp-copy{text-align:left}}
.rp-media{position:relative}
.rp-dampf{position:absolute;left:-12%;top:-62%;width:124%;height:104%;pointer-events:none;z-index:3}

/* Umbau 123: kein seitliches Scrollen auf dem Handy (Hero-Blumen) */
html,body{overflow-x:clip}

/* Umbau 128: Eindrücke und Stimmen als Lichtring – runde Fotos um echten Vollmond (NASA Goddard/LRO, gemeinfrei), wechselnde Stimme in der Mitte. Ersetzt Umbau 126. */
.ra{position:relative;margin:2.4rem auto 0;container-type:inline-size}
.ra-ring{position:relative;aspect-ratio:1/1}
.ra-moon{position:absolute;inset:14%;border-radius:50%;background:url(../images/impressionen/mond-nasa-1200.webp) center/cover no-repeat;box-shadow:0 0 4cqw .8cqw rgba(255,244,222,.22),0 0 16cqw 5cqw rgba(255,236,200,.10)}
.ra-moon::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse 62% 46% at 50% 50%,rgba(252,246,234,.62) 0%,rgba(252,246,234,.42) 55%,rgba(252,246,234,0) 100%)}
.ra-ph{position:absolute;margin:0;width:16%;aspect-ratio:1/1;left:calc(50% + 38.5% * sin(var(--i) * 45deg) - 8%);top:calc(50% - 38.5% * cos(var(--i) * 45deg) - 8%);border-radius:50%;overflow:hidden;border:1px solid rgba(227,197,143,.85);box-shadow:0 6px 22px rgba(0,0,0,.35)}
.ra-ph img{width:100%;height:100%;object-fit:cover;display:block}
.ra-center{text-align:center}
.ra-quotes{display:grid}
.ra .mq{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity 1.4s ease,visibility 0s linear 1.4s;display:flex;flex-direction:column;justify-content:center;align-items:center}
.ra .mq.is-on{opacity:1;visibility:visible;transition:opacity 1.4s ease,visibility 0s}
.ra .mq blockquote{margin:0}
.ra .mq blockquote::before{content:'\201C';display:block;font-family:var(--serif);font-size:3.2rem;line-height:.6;height:1.6rem;color:#C9A66B;margin:0 auto .4rem}
.ra .mq p{margin:0;font-family:var(--serif);font-style:italic;font-size:1.15rem;line-height:1.6;color:#FFF8E8}
.ra .mq figcaption{margin-top:.9rem;font-family:var(--serif);font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:#E3C58F}
.ra-dots{display:flex;gap:.55rem;justify-content:center;margin-top:1.2rem}
.ra-dots button{width:8px;height:8px;padding:0;border-radius:50%;border:1px solid #C9A66B;background:transparent;cursor:pointer}
.ra-dots button[aria-current="true"]{background:#C9A66B}
@media(min-width:900px){
.ra{width:min(980px,92vw);margin-left:calc(50% - min(490px,46vw));aspect-ratio:1/1}
.ra-ring{position:absolute;inset:0}
.ra-center{position:absolute;left:26%;right:26%;top:24%;bottom:24%;display:flex;flex-direction:column;justify-content:center}
.ra .mq blockquote::before{font-size:10cqw;height:4.6cqw;color:#A88440;opacity:.8}
.ra .mq p{font-size:2.25cqw;line-height:1.55;color:#1F2C40}
.ra .mq figcaption{font-size:1.15cqw;color:#3A2908;font-weight:600}
.ra-dots{margin-top:2cqw}
.ra-dots button{border-color:#7A5C26}
.ra-dots button[aria-current="true"]{background:#7A5C26}
}
@media(max-width:899.98px){
.ra-ph{width:19%;left:calc(50% + 40% * sin(var(--i) * 45deg) - 9.5%);top:calc(50% - 40% * cos(var(--i) * 45deg) - 9.5%)}
.ra-moon{inset:17%}
.ra-center{margin-top:1.2rem;padding:0 .4rem}
}
@media(max-width:899.98px){.ra-center{display:flex;flex-direction:column}.ra-dots{order:-1;margin:0 0 1.4rem}}
@media(max-width:899.98px){.ra-moon{background-image:url(../images/impressionen/mond-nasa-640.webp)}.ra-moon::after{display:none}}

/* Umbau 129: runde Fotos im Lichtring vergrößern sich bei Hover (Maus) bzw. Tippen (Touch); Kopierschutz so weit der Browser es zulässt */
.ra-ph{--s:1.85;--k:22%;transition:transform .4s ease,box-shadow .4s ease;transform-origin:50% 50%;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.ra-ph.is-big{z-index:6;transform:translate(calc(-1 * var(--k) * sin(var(--i) * 45deg)),calc(var(--k) * cos(var(--i) * 45deg))) scale(var(--s));box-shadow:0 0 0 1px rgba(227,197,143,.9),0 14px 40px rgba(0,0,0,.5);cursor:zoom-out}
@media(hover:hover) and (pointer:fine){
.ra-ph:hover{z-index:6;transform:translate(calc(-1 * var(--k) * sin(var(--i) * 45deg)),calc(var(--k) * cos(var(--i) * 45deg))) scale(var(--s));box-shadow:0 0 0 1px rgba(227,197,143,.9),0 14px 40px rgba(0,0,0,.5)}
}
@media(max-width:899.98px){.ra-ph{--s:2;--k:30%}}
@media(prefers-reduced-motion:reduce){.ra-ph{transition:none}}
.ra-center{pointer-events:none}
.ra-quotes,.ra-dots{pointer-events:auto}
#impressionen img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none;pointer-events:none}
#impressionen .ra-ph,#impressionen figure{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* Umbau 142: ruhige Ordnung der Hintergründe. Hell und dunkel wechseln sich ab.
   Hell im festen Wechsel Nebel (mist) / Creme: Fünf Monde (Nebel) · Inhalt + Zeremoniepflanzen (Creme, ein durchgehendes Band) · Über Nik (Nebel) · Warum Monde (Creme) · Kontakt (Nebel).
   Dunkel überall derselbe Ton (dusk): Eindrücke · Ort · Achtsamkeit · Niks Angebote. */
.tone-petrol{background:linear-gradient(160deg,#3B3A5A 0%,#335563 60%,#2F5F5A 100%)!important}
#inhalt.tone-cream{background:#F8F8F1!important}
#ritualpflanzen.tone-ritual{background:#F8F8F1!important;border-top:0}
#ritualpflanzen.tone-ritual::before{width:min(220px,60vw);opacity:.85}
/* Umbau 142: Mondkomposition in „Eindrücke und Stimmen“ etwa 22 % kleiner */
@media(min-width:900px){
.ra{width:min(760px,72vw);margin-left:calc(50% - min(380px,36vw))}
.ra .mq p{font-size:max(1rem,2.6cqw);line-height:1.5}
.ra .mq figcaption{font-size:max(.72rem,1.35cqw)}
.ra .mq blockquote::before{font-size:9cqw;height:4.2cqw}
}
@media(max-width:899.98px){.ra-ring{width:84%;margin:0 auto}}

/* Umbau 145: Reihenfolge Fünf Monde · Die fünf Wochenenden · Eindrücke · Zeremoniepflanzen · Ort · Über mich · Weitere Angebote · Gut zu wissen · Kontakt.
   Hell/dunkel im Wechsel, mit zwei ruhigen hellen Doppeln: oben Fünf Monde (Nebel) + Wochenenden (Creme), unten Gut zu wissen (Creme) + Kontakt (Nebel), dazwischen nur das kleine Ornament. */
#inhalt.tone-cream{border-top:0}
#inhalt.tone-cream::before,#kontakt.tone-menu::before{width:min(220px,60vw);opacity:.85}
#kontakt.tone-menu{border-top:0}
#ritualpflanzen.tone-ritual{border-top:1px solid rgba(201,166,107,.55)}
#ritualpflanzen.tone-ritual::before{width:min(360px,80vw);opacity:1}
#gut-zu-wissen.tone-cream{background:#F8F8F1!important}
.gzw h2{margin-bottom:2.2rem}
.gzw-box{background:#fff;border:1px solid #DCE5DF;box-shadow:0 6px 22px rgba(31,71,67,.07)}
.gzw-item+.gzw-item{border-top:1px solid #E4EAE5}
.gzw-item h3{margin:0;font:inherit}
.gzw-btn{all:unset;box-sizing:border-box;width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 1.5rem;cursor:pointer;font-size:.8rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--brand,#1F4743);transition:color .25s}
.gzw-btn:hover,.gzw-btn[aria-expanded="true"]{color:#8A5A2B}
.gzw-btn:focus-visible{outline:2px solid #B8956A;outline-offset:-3px}
.gzw-icon{position:relative;flex:0 0 14px;width:14px;height:14px}
.gzw-icon::before,.gzw-icon::after{content:'';position:absolute;left:0;top:6.5px;width:14px;height:1px;background:#B8956A;transition:transform .35s ease}
.gzw-icon::after{transform:rotate(90deg)}
.gzw-btn[aria-expanded="true"] .gzw-icon::after{transform:rotate(0)}
.gzw-panel{overflow:hidden;transition:height .45s ease,opacity .45s ease}
.gzw-in{padding:0 1.5rem 1.4rem;color:#3C4A46;font-size:.98rem;line-height:1.7}
.gzw-in p{margin:0 0 .8rem}.gzw-in p:last-child{margin-bottom:0}

@media(max-width:600px){.gzw-btn{padding:1rem 1.1rem;font-size:.74rem;letter-spacing:.11em}.gzw-in{padding:0 1.1rem 1.2rem}}
@media(prefers-reduced-motion:reduce){.gzw-panel,.gzw-icon::after{transition:none}}
/* Umbau 151: Formular – Edition, Tippflächen, Kontrast */
.edition-wahl[hidden],.choice-opt.edition-offen[hidden]{display:none!important}
.edition-wahl .form-err{margin:.7rem 0 0}
.check{min-height:2.75rem}
.check input,.choice-opt input,.form .choice .choice-opt input[type=radio]{width:1.3rem;height:1.3rem}
.check label{cursor:pointer;padding:.1rem 0}
.choice-opt{min-height:2.75rem}
.form-hint,.fb-hint{opacity:1}
.choice-opt small{opacity:.88}
/* Umbau 158: Rechtslinks in der Fußzeile brechen mobil um statt abgeschnitten zu werden */
.foot-bottom nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.4rem;max-width:100%}
.foot-bottom nav a{margin:0}
/* Umbau 159: sehr schmale Handys (unter 360 px) – „Zur Startseite“ passt in die Kopfzeile */

/* Umbau 169: Anreise, Übernachtung, Adresse und Karte im „Gut zu wissen“-Punkt Ort (#gzw-ort) */
.gzw-in h4.sub{margin:1.6rem 0 .5rem;font-family:var(--serif);font-size:1.1rem;font-weight:400;letter-spacing:.04em;line-height:1.3;color:#1F4D4A}
.gzw-in .unterkunft-liste a{color:#1F4D4A;text-decoration:none;border-bottom:1px solid var(--gold)}
.gzw-in .unterkunft-liste a:hover{color:#8A5A2B}
.gzw-in .map-adresse{margin-top:1.2rem}
.gzw-in .map-box{margin:1rem 0 .2rem;height:22rem}
.map-placeholder h4{font-family:var(--serif);font-weight:400;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;line-height:1.3;margin:0 0 .8rem;color:#2C2C2C}
/* Umbau 170: Foto großer Saal in „Ein Ort zum Ankommen“ – Rahmen wie die Galerie-Bilder */
.ort-foto{margin:1.8rem 0 .4rem;border:1px solid rgba(201,166,107,.5);border-radius:2px;box-shadow:0 2px 10px rgba(0,0,0,.25);overflow:hidden;background:rgba(213,201,168,.08)}
.ort-foto img{display:block;width:100%;height:auto}
/* Umbau 180: Saal-Foto im „Gut zu wissen“-Punkt Ort (#gzw-ort), kleiner und hell statt im aufgelösten Abschnitt „Ein Ort zum Ankommen“ */
.gzw-in .gzw-foto{margin:.2rem 0 1.1rem;max-width:560px;border:1px solid #DCE5DF;box-shadow:0 2px 10px rgba(31,71,67,.08);background:#F0F3E8}
.gzw-in .gzw-foto img{aspect-ratio:16/10;object-fit:cover}
.gzw-in h4.sub#kapok{margin-top:1.4rem}
.foot-brand .brand-name:last-child{margin-bottom:0}

/* Umbau 209 (Nik 4.11.2026): Stimmen-Punkte größer, große Klickfläche */
.ra-dots{gap:.15rem}
.ra-dots button,.ra-dots button[aria-current="true"]{width:30px;height:30px;padding:0;border:0!important;background:transparent!important;display:grid;place-items:center;border-radius:50%}
.ra-dots button::after{content:'';width:13px;height:13px;border-radius:50%;border:1.5px solid #C9A66B;background:transparent;transition:background .25s,transform .25s}
.ra-dots button[aria-current="true"]::after{background:#C9A66B}
@media(min-width:900px){.ra-dots button::after{border-color:#7A5C26}.ra-dots button[aria-current="true"]::after{background:#7A5C26}}
.ra-dots button:hover::after{transform:scale(1.15)}
.ra-dots button:focus-visible{outline:2px solid #C9A66B;outline-offset:1px}

/* Umbau 294: der Strich unter „Weitere Angebote“ liegt in der Seitenmitte, auch auf dem Desktop.
   Die Überschrift selbst bleibt auf dem Desktop links. */
#niks-angebote h2::after{margin-left:auto;margin-right:auto;background:linear-gradient(90deg,transparent,#B8956A,transparent)}

/* Umbau 294: mobile Mittelachse bis 700 px (dieselbe Grenze wie der Hero).
   Mittig: Überschriften und ihre Linie, kurze Einleitungen, Angebotskarten, Buttons, Fußzeile, Hero-Aufmacher.
   Links bleiben: längere Fließtexte, Rechtstext, Formularfelder und Beschriftungen, Akkordeon- und Pflanzenzeilen, die Anmeldeschritte. */
@media(max-width:700px){
  h1,h2,h3,h4,h5,h6{text-align:center}
  h2::after,.every-weekend h3::after{margin-left:auto;margin-right:auto}
  h2::after{background:linear-gradient(90deg,transparent,#B8956A,transparent)}
  html.anim-on h2.fx-hline::after{transform-origin:50% 50%}
  .hero-in,.eyebrow,.lead,.lead-soft,.dates-title,.imp-head,.offer-intro,.kontakt-lead{text-align:center}
  .hero .lead{border-left:0;padding-left:0;margin-left:auto;margin-right:auto}
  .hero .hero-zeit{margin-left:auto;margin-right:auto}
  .moon-card,.kurs-card,.angebot-card,.price-card,.offer-card,.offer-box,.pcard-main{text-align:center}
  a.btn,button.btn{display:table;width:auto;max-width:100%;margin-left:auto;margin-right:auto}
  .site-footer{text-align:center}
  .foot-brand::before{margin-left:auto;margin-right:auto}
  .about-text,.intro-copy p,.rp-lead,.rp-list,.rp-btn,.gzw-in,.gzw-btn,.legal p,.legal li,.field,.field label,.check,.choice,.choice-opt,.form-hint,.form-privacy,.mond-schritte li,.unterkunft-liste{text-align:left}
  /* Umbau 295: Termin 4 und 5 als Paar mittig unter den drei Kästen. */
  .date-chips{grid-template-columns:repeat(6,minmax(0,1fr))}
  .date-chips li{grid-column:span 2}
  .date-chips li:nth-child(4){grid-column:2 / span 2}
  .date-chips li:nth-child(5){grid-column:4 / span 2}
  /* Umbau 297: Startpreis unter dem Text, Fragensatz mittig. Desktop bleibt nebeneinander. */
  #preis.offer-card{flex-direction:column;align-items:stretch}
  #preis .oc-text{order:1;min-width:0}
  #preis .oc-price{order:2;align-self:center}
  .oc-frage-hinweis{width:100%;text-align:center}
  /* Umbau 296: Ausschnitt aus hero-hd weiter links, der kleine Bau auf dem Berg (Bild x ≈ 962) bleibt im Bild.
     Spezifischer als anim.css, damit der Desktop-Ausschnitt (85% 20%) unverändert bleibt. */
  .hero .hero-photo{
    background-image:url("../images/hero-hd.jpg?v=3");
    background-image:image-set(url("../images/hero-hd.webp?v=3") type("image/webp"),url("../images/hero-hd.jpg?v=3") type("image/jpeg"));
    background-position:39% 0;
    background-size:cover;
  }
}

/* Umbau 295: unter 860 px (gestapelte Pflanzen) steht die passende Tasse in der offenen Kategorie.
   Der Bildstapel oben entfällt dort, damit nicht zwei Tassen zugleich sichtbar sind. Ab 860 px bleibt der Stapel links. */
.rp-inline,.rp-shot{display:none}
@media(max-width:859.98px){
  .rp-media{display:none}
  .rp-item.is-active .rp-shot{display:block;position:relative;width:min(260px,78%);margin:2.75rem auto .9rem}
  .rp-item.is-active .rp-shot .rp-inline{display:block;width:100%;height:auto;margin:0}
  .rp-item.is-active .rp-inline{display:block;width:min(260px,78%);height:auto;margin:.15rem auto .9rem}
  .rp.is-ready .rp-item.is-active .rp-panel>.rp-panel-in{overflow:visible}
  .rp-item.is-active .rp-panel-in p{text-align:left}
}