:root{
  --ink:#14243F;
  --ink-soft:#2A3B57;
  --slate:#5A657C;
  --gold:#A87D3A;
  --gold-soft:#C9A76B;
  --paper:#FFFFFF;
  --mist:#F4F6F9;
  --line:#E3E8F0;
  --measure:38rem;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"Karla","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#EDF1F7; --ink-soft:#C9D2E0; --slate:#9AA5BA;
    --gold:#D0AC6A; --gold-soft:#8E6F3E;
    --paper:#0E1729; --mist:#15203A; --line:#26314A;
  }
}
:root[data-theme="dark"]{
  --ink:#EDF1F7; --ink-soft:#C9D2E0; --slate:#9AA5BA;
  --gold:#D0AC6A; --gold-soft:#8E6F3E;
  --paper:#0E1729; --mist:#15203A; --line:#26314A;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink-soft);
  font-family:var(--body); font-weight:300; font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display); font-weight:600; color:var(--ink); margin:0; letter-spacing:-.008em}
h1{font-size:clamp(2.9rem,7.6vw,5.2rem); line-height:1; font-weight:700; letter-spacing:-.015em}
h2{font-size:clamp(2.1rem,4.6vw,3.2rem); line-height:1.08}
h3{font-size:1.5rem; line-height:1.22; font-weight:600}
p{margin:0 0 1.1em}
.wrap{width:min(100% - 2.5rem, 68rem); margin-inline:auto}
.measure{max-width:var(--measure)}
section{padding:clamp(4rem,9vw,7.5rem) 0}
.tint{background:var(--mist)}
.deep{background:var(--ink); color:#C9D3E4}
.deep h1,.deep h2,.deep h3{color:#F6F3EC}
.deep .dnum{color:#F6F3EC}
.deep .dnum small{color:var(--gold-soft)}
.deep .dwhat p,.deep .dprice,.deep .rhythm{color:#A8B4CA}
.deep .date-row{border-top-color:rgba(255,255,255,.16)}
.deep .date-row:last-of-type{border-bottom-color:rgba(255,255,255,.16)}
.deep .btn{background:var(--gold); border-color:var(--gold); color:var(--ink)}
.deep .btn:hover,.deep .btn:focus-visible{background:transparent; color:var(--gold-soft)}
.deep .btn.ghost{background:transparent; color:#F6F3EC; border-color:rgba(255,255,255,.3)}
.deep .btn.ghost:hover{border-color:var(--gold); color:var(--gold-soft)}
.deep blockquote{border-top-color:rgba(255,255,255,.16)}
.deep blockquote p{color:#F6F3EC}
.deep summary{color:#F6F3EC}
.deep details{border-top-color:rgba(255,255,255,.16)}
.deep details:last-of-type{border-bottom-color:rgba(255,255,255,.16)}
.deep details p{color:#A8B4CA}
.deep input[type=email]{background:transparent; border-color:rgba(255,255,255,.3); color:#F6F3EC}
.deep .contact-list li{border-top-color:rgba(255,255,255,.16)}
.deep .contact-list b{color:#F6F3EC}
.deep .claim{color:#F6F3EC}

/* ---------- Kopf ---------- */
.top{
  position:sticky; top:0; z-index:20; background:var(--paper);
  border-bottom:1px solid var(--line);
}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.05rem 0}
.mark{font-family:var(--display); font-weight:600; font-size:1.4rem; color:var(--ink); text-decoration:none; letter-spacing:.06em; white-space:nowrap}
.mark span{color:var(--gold)}
nav{display:flex; gap:1.7rem; font-size:.94rem}
nav a{text-decoration:none; color:var(--slate); padding-bottom:2px; border-bottom:1px solid transparent}
nav a:hover, nav a:focus-visible, nav a.active{color:var(--ink); border-bottom-color:var(--gold)}
@media (max-width:720px){ nav{display:none} }

/* ---------- Nächster Termin ---------- */
.next{background:var(--ink); color:#F3F0E9}
.next .wrap{display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.1rem; padding:.8rem 0; font-size:.94rem}
.next b{font-weight:500; color:var(--gold-soft)}
.next a{margin-left:auto; color:#F3F0E9; text-decoration:none; border-bottom:1px solid rgba(243,240,233,.4)}

/* ---------- Hero ---------- */
.hero-img{aspect-ratio:16/9; width:100%; object-fit:cover}
.hero{padding-top:clamp(3rem,7vw,5.5rem)}
.hero h1{margin-bottom:1.6rem}
.hero .lead{font-size:1.18rem; color:var(--slate); max-width:34rem}

/* ---------- Buttons ---------- */
.actions{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.2rem}
.btn{
  display:inline-block; font-family:var(--body); font-size:.95rem; font-weight:500;
  padding:.82rem 1.6rem; text-decoration:none; border:1px solid var(--ink);
  background:var(--ink); color:var(--paper);
}
.btn:hover,.btn:focus-visible{background:transparent; color:var(--ink)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover,.btn.ghost:focus-visible{border-color:var(--gold); color:var(--gold)}

/* ---------- Termine ---------- */
.date-row{
  display:grid; grid-template-columns:8.5rem 1fr auto; gap:1.8rem;
  padding:2.1rem 0; border-top:1px solid var(--line); align-items:baseline;
}
.date-row:last-of-type{border-bottom:1px solid var(--line)}
.dnum{font-family:var(--display); font-size:3.4rem; line-height:.95; color:var(--ink)}
.dnum small{display:block; font-family:var(--body); font-size:.82rem; letter-spacing:.16em; color:var(--gold); margin-top:.5rem; font-weight:600}
.dwhat h3{margin-bottom:.35rem; font-size:1.6rem}
.dwhat p{margin:0; font-size:.95rem; color:var(--slate)}
.dprice{font-family:var(--display); font-size:1.4rem; color:var(--gold); white-space:nowrap}
@media (max-width:640px){
  .date-row{grid-template-columns:5.4rem 1fr; gap:1.1rem}
  .dnum{font-size:2.1rem}
  .dprice{grid-column:2; margin-top:.3rem}
}
.rhythm{margin-top:2rem; font-size:.95rem; color:var(--slate)}
.rhythm.more-dots{margin-top:1.1rem; margin-bottom:0; font-size:.85rem; letter-spacing:.04em; color:var(--gold-soft)}
.rhythm.more-dots + .rhythm{margin-top:.5rem}

/* ---------- Formate ---------- */
.format{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; margin-bottom:clamp(3.5rem,7vw,6rem)}
.format:last-child{margin-bottom:0}
.format .pic{aspect-ratio:4/5; object-fit:cover; width:100%}
.format:nth-child(even) .pic{order:2}
.format h2{margin-bottom:.9rem}
.format .claim{font-family:var(--display); font-weight:500; font-size:1.52rem; line-height:1.4; color:var(--ink); margin-bottom:1.1rem}
.format .close{color:var(--gold); font-weight:500; margin-top:1.3rem; margin-bottom:0}
@media (max-width:820px){
  .format{grid-template-columns:1fr; gap:1.8rem}
  .format:nth-child(even) .pic{order:0}
}

/* ---------- Über / Zitate ---------- */
.about{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:start}
.about .pic{aspect-ratio:3/4; object-fit:cover; width:100%}
@media (max-width:820px){ .about{grid-template-columns:1fr} }

.quotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:2.6rem; margin-top:2.8rem}
blockquote{margin:0; border-top:1px solid var(--line); padding-top:1.2rem}
blockquote p{font-family:var(--display); font-size:1.24rem; line-height:1.48; color:var(--ink)}
blockquote cite{font-style:normal; font-size:.88rem; color:var(--gold); letter-spacing:.05em}

/* ---------- Newsletter / Kontakt ---------- */
.news{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start}
@media (max-width:820px){ .news{grid-template-columns:1fr} }
form{display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1.6rem}
form .btn{margin-top:.2rem}
input[type=email]{
  flex:1 1 15rem; padding:.8rem 1rem; font-family:var(--body); font-size:.95rem;
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
}
input[type=email]:focus{outline:2px solid var(--gold); outline-offset:1px}
.contact-list{list-style:none; padding:0; margin:1.5rem 0 0; font-size:.98rem}
.contact-list li{padding:.65rem 0; border-top:1px solid var(--line)}
.contact-list b{display:block; font-weight:500; color:var(--ink); font-size:.82rem; letter-spacing:.1em; margin-bottom:.15rem}

/* ---------- FAQ ---------- */
details{border-top:1px solid var(--line); padding:1.15rem 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer; font-size:1.05rem; color:var(--ink); list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-family:var(--display); font-size:1.5rem; color:var(--gold); line-height:1}
details[open] summary::after{content:"–"}
details p{margin:.9rem 0 0; color:var(--slate); max-width:var(--measure)}

/* ---------- Fuß ---------- */
footer{background:var(--ink); color:#C2CADA; padding:3.5rem 0 2.5rem; font-size:.92rem}
footer h3{color:#F3F0E9; font-weight:600; font-size:1.45rem; margin-bottom:.8rem}
footer a{color:#C2CADA}
.legal{margin-top:1.6rem; font-size:.83rem; color:#8E9AB0; max-width:46rem}
.legal-block{margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.12); max-width:46rem}
.legal-block summary{cursor:pointer; font-size:.83rem; color:#A8B0C2; list-style:none}
.legal-block summary::-webkit-details-marker{display:none}
.legal-block p{margin:.7rem 0 0; font-size:.83rem; color:#8E9AB0}

/* ---------- Bildplatzhalter ---------- */
.ph{
  background:linear-gradient(160deg,#1B2C4A,#35476A 60%,#5C6A87);
  display:flex; align-items:flex-end; padding:1rem;
}
.ph span{font-size:.78rem; letter-spacing:.1em; color:rgba(255,255,255,.72)}

@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* Fortschrittsbalken */
#prog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--gold);z-index:50}

/* Termine als Kacheln */
.dates{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2.2rem}
@media (min-width:640px){ .dates{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .dates{grid-template-columns:repeat(3,1fr)} }
.dcard{background:var(--ink);color:#EFEAE0;padding:1.4rem 1.3rem 1.2rem;border-radius:8px;display:flex;flex-direction:column;gap:.35rem}
@media (max-width:640px){ .dcard{padding:1.1rem 1.1rem .95rem; gap:.25rem} .dcard .day{font-size:2.2rem} .dates{gap:.7rem} }
.dcard .day{font-family:var(--display);font-weight:600;font-size:2.8rem;line-height:.95;color:#fff}
.dcard .mon{font-size:.78rem;letter-spacing:.16em;color:var(--gold-soft);font-weight:500;margin-bottom:.5rem}
.dcard h3{color:#fff;font-size:1.25rem;line-height:1.22;font-weight:600}
.dcard p{margin:0;font-size:.9rem;color:#BFC7D6;line-height:1.5}
.dcard .fee{margin-top:auto;padding-top:.9rem;font-size:.88rem;color:var(--gold-soft)}
.dcard.raum{background:#1D3055}
.dcard{position:relative;overflow:hidden}
.dcard-top{display:flex; align-items:center; gap:.8rem}
.dcard-thumb{width:3rem; height:3rem; border-radius:8px; object-fit:cover; flex:0 0 auto; opacity:.92; box-shadow:inset 0 0 0 100px rgba(15,31,56,.38)}

.dcard .thumb{position:absolute;top:0;right:0;width:6.2rem;height:6.2rem;object-fit:cover;opacity:.3;border-bottom-left-radius:60px;pointer-events:none}
.dcard>*{position:relative;z-index:1}

/* Haltung */
.stance{display:grid;grid-template-columns:repeat(2,1fr);gap:2.4rem 3rem;margin-top:2.8rem}
.stance h3{font-size:1.3rem;margin-bottom:.6rem;color:var(--ink)}
.stance p{font-size:.98rem;color:var(--slate);margin:0}
.stance .lead{font-family:var(--display);font-weight:500;font-size:1.72rem;line-height:1.4;color:var(--gold);grid-column:1/-1;max-width:34rem;margin:0 0 .5rem}
.deep .stance p{color:#A8B4CA}

/* Zitate als Boxen */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.2rem;margin-top:2.6rem}
blockquote{margin:0;border:0;border-top:0;padding:1.4rem 1.4rem 1.2rem;background:var(--mist);border-radius:14px 14px 14px 4px;position:relative}
blockquote p{font-family:var(--body);font-weight:300;font-size:1rem;line-height:1.6;color:var(--ink);margin:0 0 .9rem}
blockquote cite{font-style:normal;font-size:.84rem;color:var(--slate);letter-spacing:.02em}

/* Newsletter mit Bild */
.news-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.news-wrap img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:8px}
@media (max-width:820px){.news-wrap{grid-template-columns:1fr}}

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


/* ---------- Runde 2: mehr Kraft in den Titeln, CTA-Buttons, Subpages ---------- */
h2{font-weight:700; letter-spacing:-.012em}
h3{font-weight:700}
.format h2{font-weight:700}
.cta-row{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.6rem}

/* Rückmeldungen als Kacheln (kompakter) */
.quotes blockquote{padding:1.2rem 1.2rem 1rem}
.quotes cite{opacity:.85}

/* Unterseiten */
.backlink{display:inline-block; font-size:.85rem; color:var(--slate); text-decoration:none; margin-bottom:1.6rem; border-bottom:1px solid transparent}
.backlink:hover{color:var(--ink); border-bottom-color:var(--gold)}
.subhero{padding-top:clamp(2.5rem,6vw,4.5rem); padding-bottom:1rem}
.subhero .eyebrow, .hero-content .eyebrow{font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:1rem}
.subhero-flex{display:flex; align-items:flex-end; justify-content:space-between; gap:2.5rem}
.subhero-portrait{width:8.5rem; height:8.5rem; border-radius:50%; object-fit:cover; flex:0 0 auto; border:1px solid var(--line)}
@media (max-width:700px){ .subhero-flex{flex-direction:column; align-items:flex-start} .subhero-portrait{width:6rem; height:6rem} }
.gallery3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.gallery3 img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:14px}
@media (max-width:700px){ .gallery3{grid-template-columns:1fr 1fr} .gallery3 img:last-child{grid-column:1/-1; aspect-ratio:16/9} }
.gallery2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.gallery4{display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem}
.gallery4 img{aspect-ratio:3/4; object-fit:cover; border-radius:8px; width:100%}
@media (max-width:820px){ .gallery4{grid-template-columns:1fr 1fr; gap:.8rem} }
@media (max-width:480px){ .gallery4{grid-template-columns:1fr 1fr; gap:.6rem} .gallery4 img{aspect-ratio:1/1} }
.gallery2 img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:14px}
@media (max-width:600px){ .gallery2{grid-template-columns:1fr} }
.deepgrid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:start}
.deepgrid img.pic{width:100%}
@media (max-width:820px){ .deepgrid{grid-template-columns:1fr} }
.disclaimer{margin-top:2.4rem; padding:1.4rem 1.5rem; background:var(--mist); border-radius:8px; font-size:.9rem; color:var(--slate)}
.deep .disclaimer{background:rgba(255,255,255,.06); color:#A8B4CA}
.factbox{border:1px solid var(--line); border-radius:8px; padding:1.5rem 1.6rem}
.factbox h3{font-size:1.05rem; margin-bottom:.9rem}
.factbox dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:.5rem 1rem; font-size:.92rem}
.factbox dt{color:var(--slate)}
.factbox dd{margin:0; color:var(--ink); font-weight:500}

/* ---------- Runde 3: Social, mobiles Menü, dynamisches Termin-Badge, Pill-Buttons, Wackel-Testimonials ---------- */

/* Pill-Buttons statt eckig */
.btn{border-radius:999px}

/* Header: Social-Icons + mobiles Menü */
.top .wrap{flex-wrap:nowrap}
.header-right{display:flex; align-items:center; gap:1.1rem}
.social-row{display:flex; align-items:center; gap:.6rem}
.social-row a{
  display:flex; align-items:center; justify-content:center;
  width:2.1rem; height:2.1rem; border-radius:50%; border:1px solid var(--line);
  color:var(--slate); text-decoration:none; flex:0 0 auto;
}
.social-row a:hover{border-color:var(--gold); color:var(--gold)}
.social-row svg{width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-width:1.6}

.menu-toggle{
  display:none; width:2.4rem; height:2.4rem; border:1px solid var(--line); border-radius:50%;
  background:transparent; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
  content:""; display:block; width:1.05rem; height:1.5px; background:var(--ink); position:relative;
}
.menu-toggle span::before{position:absolute; top:-.4rem}
.menu-toggle span::after{position:absolute; top:.4rem}

@media (max-width:900px){
  .menu-toggle{display:flex}
  nav{
    display:none; position:absolute; top:100%; left:0; right:0; background:var(--paper);
    border-bottom:1px solid var(--line); flex-direction:column; gap:0; padding:.5rem 0;
    box-shadow:0 12px 24px -12px rgba(15,31,56,.18);
  }
  nav.open{display:flex}
  nav a{padding:.9rem var(--gutter,1.25rem); border-bottom:1px solid var(--line)}
  .top .wrap{position:relative}
}

/* Dynamisches Termin-Badge im Hero */
.hero-badge{
  display:inline-flex; align-items:center; gap:.6rem; font-size:.86rem; color:var(--slate);
  border:1px solid var(--line); border-radius:999px; padding:.5rem 1.1rem; margin-bottom:1.6rem;
}
.hero-badge .dot{width:.5rem; height:.5rem; border-radius:50%; background:var(--gold); flex:0 0 auto}
.hero-badge b{color:var(--ink); font-weight:600}

/* Testimonial-Kacheln: leichter Wackel-Effekt beim Hover */
.quotes blockquote{transition:transform .25s ease, box-shadow .25s ease}
.quotes blockquote:hover{transform:rotate(-1deg) translateY(-3px); box-shadow:0 14px 28px -18px rgba(15,31,56,.35)}
.quotes blockquote:nth-child(even):hover{transform:rotate(1deg) translateY(-3px)}

/* SoundCloud: schlanke, aufklappbare Leiste statt fixem Kasten */
.sc-block{
  margin-top:1.8rem; padding:0; border:1px solid var(--line); border-radius:14px;
  max-width:26rem; overflow:hidden;
}
.deep .sc-block{border-color:rgba(255,255,255,.16)}
.sc-block .sc-head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem 1.1rem; cursor:pointer; list-style:none;
}
.sc-block summary::-webkit-details-marker{display:none}
.sc-block .sc-text{display:flex; align-items:center; gap:.75rem}
.sc-block svg{width:1.5rem; height:1.5rem; flex:0 0 auto; color:var(--gold)}
.sc-block h3{margin-bottom:.1rem; font-size:.98rem}
.sc-block p{margin:0; font-size:.82rem; color:var(--slate)}
.deep .sc-block p{color:#A8B4CA}
.sc-block .sc-arrow{font-size:.78rem; letter-spacing:.06em; color:var(--gold); flex:0 0 auto}
.sc-block[open] .sc-arrow::after{content:" ▲"}
.sc-block:not([open]) .sc-arrow::after{content:" ▾"}
.sc-block .sc-body{padding:0 1.1rem 1.1rem}
.sc-block .sc-frame{display:block; width:100%}

/* Ablauf-Schritte (Essential Dance Unterseite) */
.steps{margin-top:2rem}
.step{display:grid; grid-template-columns:2.6rem 1fr; gap:1.1rem; padding:1.3rem 0; border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .num{
  width:2.6rem; height:2.6rem; border-radius:50%; border:1px solid var(--gold); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:1.2rem;
}
.step h3{font-size:1.1rem; margin-bottom:.3rem}
.step p{margin:0; color:var(--slate); font-size:.94rem}
.step .time{color:var(--gold); font-weight:600; font-size:.82rem; letter-spacing:.05em; display:block; margin-bottom:.2rem}

/* Footer neu strukturiert */
footer .fgrid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2.4rem 2rem; align-items:start}
footer .fgrid nav a{padding:0; border:0; display:block; margin-bottom:.5rem; font-size:.9rem}
@media (max-width:820px){ footer .fgrid{grid-template-columns:1fr 1fr; gap:2rem 1.5rem} }
@media (max-width:520px){ footer .fgrid{grid-template-columns:1fr; gap:1.8rem} }
.foot-social{display:flex; flex-direction:row; flex-wrap:wrap; gap:.65rem}
.foot-social a{
  display:inline-flex; align-items:center; justify-content:center; color:#C2CADA; text-decoration:none;
  width:2.3rem; height:2.3rem; border:1px solid rgba(255,255,255,.16); border-radius:50%; flex:0 0 auto;
}
.foot-social a:hover{border-color:var(--gold-soft); color:var(--gold-soft)}
.foot-social svg{width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-width:1.6}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.foot-contact{list-style:none; padding:0; margin:0; font-size:.9rem}
.foot-contact li{margin-bottom:.6rem}
.bottom-bar{display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; align-items:center; justify-content:space-between; margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.12); font-size:.83rem; color:#8E9AB0}
.bottom-bar .legal-links{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center}
.bottom-bar details{border:0; padding:0; display:inline}
.bottom-bar summary{font-size:.83rem; color:#8E9AB0; display:inline}
.bottom-bar summary:hover{color:var(--gold-soft)}
.legal-popover{max-width:34rem; margin-top:.6rem; font-size:.83rem; color:#8E9AB0}

/* ---------- Runde 4: Hero als Bild-Overlay, Termine-Feintuning, Player ---------- */

/* Hero: Text liegt direkt auf dem Bild, kein zweites Scrollen nötig */
.hero{position:relative; padding-top:0; min-height:min(94vh,60rem); display:flex; align-items:flex-end; overflow:hidden}
.hero-media{position:absolute; inset:0; z-index:0}
.hero-media .hero-img{width:100%; height:100%; object-fit:cover; object-position:78% center}
.hero-spacer{height:clamp(3.5rem,7vw,6rem); background:var(--paper)}
.hero-spacer + section{padding-top:clamp(1.2rem,3vw,2rem)}
.hero-gradient{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(15,31,56,.88) 0%, rgba(15,31,56,.75) 30%, rgba(15,31,56,.45) 56%, rgba(15,31,56,.10) 78%);
}
.hero-content{position:relative; z-index:1; padding:clamp(1rem,2.8vw,1.7rem) 0 clamp(1.1rem,2.6vw,1.7rem)}
.hero-content h1{color:#F6F3EC}
.hero-content .lead{color:#DDE4F0}
.hero-content .hero-badge{border-color:rgba(255,255,255,.35); color:#F0EEE8}
.hero-content .hero-badge b{color:#fff}
.hero-content .btn.ghost{border-color:rgba(255,255,255,.55); color:#fff}
.hero-content .btn.ghost:hover{border-color:var(--gold); color:var(--gold-soft)}
.hero-content .btn:not(.ghost):hover, .hero-content .btn:not(.ghost):focus-visible{background:var(--gold); border-color:var(--gold); color:var(--ink)}
@media (max-width:700px){
  .hero{min-height:84vh; align-items:flex-end}
  .hero-gradient{background:linear-gradient(190deg, rgba(15,31,56,.4) 0%, rgba(15,31,56,.86) 62%)}
}

/* Unterseiten-Hero: gleiches Bild-plus-Text-Prinzip wie die Startseite, nur kompakter */
.hero-sub{min-height:min(64vh,38rem)}
.hero-sub .hero-content{padding:clamp(1.6rem,4.5vw,2.6rem) 0 clamp(1.5rem,3.5vw,2.1rem)}
.hero-content .backlink{color:#C9D2E0; border-bottom-color:transparent}
.hero-content .backlink:hover{color:#fff; border-bottom-color:var(--gold)}
@media (max-width:700px){ .hero-sub{min-height:58vh} }

/* Termine: Kopfzeile mit "Alle Termine"-Button oben rechts */
.termine-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:1rem}
.termine-head .btn{flex:0 0 auto}

/* Kachel-Icon zur Unterscheidung Dance / Essenzraum */
.dcard .kind-icon{position:absolute; top:1rem; right:1rem; width:1.6rem; height:1.6rem; opacity:.35; stroke:#fff; fill:none; stroke-width:1.5}

/* SoundCloud-Player im CTA-Block */
.sc-block{flex-direction:column; align-items:stretch}
.sc-block .sc-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.sc-block iframe{margin-top:1.1rem; border-radius:8px}

/* ---------- Runde 5: helle Terminkacheln, Stimmen mit Gesicht, kompakteres Spacing ---------- */

/* Terminkacheln heben sich jetzt hell vom dunkelblauen Block ab */
.deep .dcard{
  background:#F7F4ED; color:#46536C; border:1px solid rgba(255,255,255,.10);
  box-shadow:0 20px 38px -26px rgba(0,0,0,.6);
}
.deep .dcard .day{color:#14243F}
.deep .dcard .mon{color:#8A6528}
.deep .dcard h3{color:#14243F}
.deep .dcard p{color:#5A657C}
.deep .dcard .fee{color:#8A6528; border-top:1px solid rgba(20,36,63,.13); margin-top:auto; padding-top:.85rem}
.deep .dcard .kind-icon{stroke:#14243F; opacity:.2}
/* Essenzraum-Tage: warmer Ton plus goldene Kante */
.deep .dcard.raum{background:#F3ECDC}
.deep .dcard.raum::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--gold)}
.dcard-thumb{box-shadow:inset 0 0 0 100px rgba(15,31,56,.30)}

/* Stimmen: acht Kacheln, leicht unterschiedliche Töne, Gesicht und Name */
.quotes{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1rem}
.quotes blockquote:nth-child(4n+1){background:#F2F5F9}
.quotes blockquote:nth-child(4n+2){background:#F7F2E8}
.quotes blockquote:nth-child(4n+3){background:#F0F4EF}
.quotes blockquote:nth-child(4n+4){background:#F6F1F1}
.quotes blockquote p{margin-bottom:0}
.q-person{display:flex; align-items:center; gap:.7rem; margin-top:1.05rem}
.q-avatar{
  width:2.4rem; height:2.4rem; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(150deg,#2A3B57,#5C6A87);
  display:flex; align-items:center; justify-content:center;
}
.q-avatar svg{width:1.05rem; height:1.05rem; stroke:rgba(255,255,255,.8); fill:none; stroke-width:1.4}
.q-name{display:block; font-size:.87rem; font-weight:500; color:var(--ink); font-style:normal; line-height:1.3}
.q-where{display:block; font-size:.77rem; color:var(--slate); letter-spacing:.02em}
@media (max-width:640px){
  .quotes{display:block; columns:2; column-gap:.65rem; margin-top:2rem}
  .quotes blockquote{break-inside:avoid; margin:0 0 .65rem; padding:.95rem .9rem .85rem; border-radius:14px 12px 12px 4px}
  .quotes blockquote p{font-size:.87rem; line-height:1.52}
  .quotes blockquote:hover{transform:none; box-shadow:none}
  .q-person{gap:.5rem; margin-top:.8rem}
  .q-avatar{width:1.85rem; height:1.85rem}
  .q-avatar svg{width:.85rem; height:.85rem}
  .q-name{font-size:.79rem}
  .q-where{font-size:.71rem}
}

/* Kompakteres Textspacing, wo Absätze eng zusammengehören */
.tight p{margin-bottom:.72em}
.tight p.close{margin-top:1rem}
.tight .lead{margin-bottom:.9em}

/* Bildband über die volle Breite */
.imgband{width:100%; height:clamp(10rem,24vw,19rem); object-fit:cover; display:block}

/* Quadratische Variante der Vierer-Galerie */
.gallery4.sq img{aspect-ratio:1/1}

/* Pakete / Preisstaffel */
.pakete{display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1rem; margin-top:2.2rem}
.paket{border:1px solid var(--line); border-radius:14px; padding:1.5rem 1.5rem 1.3rem; display:flex; flex-direction:column}
.paket.hebt{border-color:var(--gold)}
.paket .tag{font-size:.73rem; letter-spacing:.13em; text-transform:uppercase; color:var(--gold); font-weight:600}
.paket h3{font-size:1.18rem; margin:.5rem 0 0}
.paket .preis{font-family:var(--display); font-size:1.95rem; color:var(--ink); line-height:1.05; margin:.7rem 0 0}
.paket .preis small{display:block; font-family:var(--body); font-size:.79rem; color:var(--slate); letter-spacing:.03em; margin-top:.35rem; font-weight:400}
.paket p{font-size:.92rem; color:var(--slate); margin:.8rem 0 0}

/* Disclaimer unten auf der Seite statt im Footer */
.disclaimer{margin-top:0; font-size:.87rem; line-height:1.6}
.disclaimer b{display:block; color:var(--ink); font-weight:600; font-size:.83rem; letter-spacing:.09em; text-transform:uppercase; margin-bottom:.5rem}

/* ---------- Runde 6: Terminkacheln dezenter, Bild rechts, Stimmen ohne Grün/Rot ---------- */

/* Kacheln nicht mehr knallig weiß, sondern gedämpft — das Dunkelblau scheint durch */
.deep .dcard{background:rgba(243,239,230,.84); box-shadow:0 18px 34px -28px rgba(0,0,0,.5)}
.deep .dcard.raum{background:rgba(240,229,205,.80)}
.deep .dcard .kind-icon{display:none}

/* Bild größer und nach rechts, mit Transparenz */
.dcard-top{display:flex; align-items:center; gap:1rem; justify-content:space-between}
.dcard-top > div{order:1}
.dcard-thumb{order:2; width:4.4rem; height:4.4rem; border-radius:8px; opacity:.62; box-shadow:none; filter:saturate(.85)}
@media (max-width:640px){ .dcard-thumb{width:3.6rem; height:3.6rem} }

/* Stimmen: nur Blau, Sand/Gold, Lila, Magenta — kein Grün, kein Rot */
.quotes blockquote:nth-child(4n+1){background:#F1F4F9}
.quotes blockquote:nth-child(4n+2){background:#F7F2E8}
.quotes blockquote:nth-child(4n+3){background:#F3F1F8}
.quotes blockquote:nth-child(4n+4){background:#F7F1F6}

/* Elemente-Raster (Essenzraum: Womit wir arbeiten) */
.elems{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.6rem 2.4rem; margin-top:2.4rem}
.elems h3{font-size:1.12rem; margin-bottom:.45rem}
.elems p{font-size:.95rem; color:var(--slate); margin:0}

/* ---------- Runde 7: Terminkacheln wieder fester, Bildhintergrund in der Termine-Sektion ---------- */

/* Sektions-Hintergrundbild mit kräftigem Blau darüber */
.deep#termine{position:relative; overflow:hidden}
.sect-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0}
.sect-tint{position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(13,26,48,.90) 0%, rgba(13,26,48,.82) 45%, rgba(13,26,48,.91) 100%)}
#termine > .wrap{position:relative; z-index:1}

/* Kacheln wieder fest statt blass */
.deep .dcard{background:#F7F4EC; box-shadow:0 22px 40px -26px rgba(0,0,0,.7)}
.deep .dcard.raum{background:#F4EDDC}
.dcard-thumb{opacity:.82; filter:none}

/* ---------- Runde 8: Kalender hell mit Bildkarten, schräge Stimmen, Icons, aufklappbare Pakete ---------- */

/* Sektions-Eyebrow mit goldenem Strich */
.sect-eyebrow{display:block; font-size:.76rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:.8rem}
.sect-eyebrow::after{content:""; display:block; width:2.6rem; height:1px; background:var(--gold); margin-top:.7rem}
.termine-head{align-items:flex-end}

/* Terminkarten: hell, Bild oben */
.dates{grid-template-columns:1fr; gap:1.4rem; margin-top:2.6rem}
@media (min-width:640px){ .dates{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .dates{grid-template-columns:repeat(3,1fr)} }
.dcard{
  background:var(--paper); color:var(--ink-soft); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; padding:0; display:flex; flex-direction:column; gap:0;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.dcard:hover{transform:translateY(-5px); box-shadow:0 26px 46px -26px rgba(15,31,56,.45)}
.dcard-img{width:100%; aspect-ratio:16/10; object-fit:cover; display:block}
.dcard-body{padding:1.35rem 1.35rem 1.25rem; display:flex; flex-direction:column; flex:1}
.dcard-date{font-size:.74rem; letter-spacing:.11em; text-transform:uppercase; color:var(--gold);
  font-weight:600; margin-bottom:.55rem}
.dcard h3{font-size:1.3rem; line-height:1.2; color:var(--ink); margin-bottom:.5rem; font-weight:600}
.dcard p{margin:0; font-size:.93rem; color:var(--slate); line-height:1.5}
.dcard-foot{margin-top:auto; padding-top:1.1rem; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap}
.dcard-fee{font-family:var(--display); font-size:1.12rem; color:var(--ink); line-height:1.2}
.dcard-link{font-size:.84rem; text-decoration:none; color:var(--ink); border:1px solid var(--line);
  border-radius:999px; padding:.42rem 1.05rem; white-space:nowrap; transition:border-color .2s, color .2s}
.dcard-link:hover{border-color:var(--gold); color:var(--gold)}
/* Essenzraum-Tage: goldene Kante */
.dcard.raum{border-color:var(--gold-soft)}
.dcard.raum::before{display:none}
.rhythm.more-dots{color:var(--gold)}

/* Stimmen: leicht schräg, eine dunkle Karte, Trennlinie über der Person */
.quotes blockquote{transform:rotate(-.55deg); border-radius:14px}
.quotes blockquote:nth-child(2n){transform:rotate(.65deg)}
.quotes blockquote:nth-child(3n){transform:rotate(-.3deg)}
.quotes blockquote:hover,.quotes blockquote:nth-child(even):hover{transform:rotate(0deg) translateY(-5px);
  box-shadow:0 20px 38px -22px rgba(15,31,56,.4)}
.q-person{border-top:1px solid rgba(15,31,56,.10); padding-top:.9rem}
.quotes blockquote:nth-child(6){background:var(--ink)}
.quotes blockquote:nth-child(6) p{color:#F6F3EC}
.quotes blockquote:nth-child(6) .q-name{color:#F6F3EC}
.quotes blockquote:nth-child(6) .q-where{color:#AEB9CB}
.quotes blockquote:nth-child(6) .q-person{border-top-color:rgba(255,255,255,.18)}
@media (max-width:640px){ .quotes blockquote{transform:none} }

/* Ablauf-Schritte mit Icon statt Ziffer */
.step .num{border-color:var(--gold-soft)}
.step .num svg{width:1.25rem; height:1.25rem; fill:none; stroke:var(--gold); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round}

/* Pakete: anklickbar, goldener Balken, Detail klappt auf */
.pakete{align-items:stretch}
.paket{position:relative; text-align:left; font:inherit; color:inherit; background:var(--paper);
  cursor:pointer; transition:border-color .25s, box-shadow .25s, transform .25s}
.paket:hover{transform:translateY(-3px); box-shadow:0 18px 34px -26px rgba(15,31,56,.45)}
.paket::after{content:""; position:absolute; left:1.4rem; right:1.4rem; bottom:0; height:3px;
  background:var(--gold); border-radius:3px; transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease}
.paket.is-open::after{transform:scaleX(1)}
.paket.is-open{border-color:var(--gold-soft)}
.paket .more{margin-top:1rem; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold); font-weight:600}
.paket.is-open .more::after{content:" –"}
.paket:not(.is-open) .more::after{content:" +"}
.paket-panel{display:none; margin-top:1.4rem; border:1px solid var(--gold-soft); border-radius:14px;
  padding:1.6rem 1.7rem; background:var(--paper); animation:panelIn .32s ease}
.paket-panel.is-open{display:block}
@keyframes panelIn{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}
.panel-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:1.4rem 2rem; margin-top:1.2rem}
.panel-grid h4{margin:0 0 .4rem; font-family:var(--body); font-size:.76rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--gold); font-weight:600}
.panel-grid p{margin:0; font-size:.93rem; color:var(--slate)}
.panel-ico{width:1.6rem; height:1.6rem; fill:none; stroke:var(--gold); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round; margin-bottom:.7rem; display:block}

/* Essenzraum-Karten hell halten (alte dunkle Regel ueberschreiben) */
.dcard.raum{background:#FBF6EC}
.dcard.raum h3{color:var(--ink)}
.dcard.raum p{color:var(--slate)}
.dcard.raum .dcard-fee{color:var(--ink)}
.dcard.raum .dcard-foot{border-top-color:rgba(168,125,58,.28)}
.dcard.raum .dcard-link{border-color:rgba(168,125,58,.4)}

/* ---------- Runde 9: Terminkacheln kompakt, dunkle Blöcke auf Unterseiten ---------- */

/* Kompakte Kacheln — auch auf dem Handy zweispaltig */
.dates{gap:1rem; margin-top:2.2rem; grid-template-columns:1fr 1fr}
@media (min-width:760px){ .dates{grid-template-columns:repeat(3,1fr)} }
.dcard{border-radius:14px}
.dcard-img{aspect-ratio:16/9}
.dcard-body{padding:.95rem 1rem 1rem}
.dcard-date{font-size:.68rem; letter-spacing:.09em; margin-bottom:.35rem}
.dcard h3{font-size:1.06rem; line-height:1.22; margin-bottom:.28rem}
.dcard p{font-size:.85rem; line-height:1.45}
.dcard .dcard-link{align-self:flex-start; margin-top:.85rem; padding:.34rem .85rem; font-size:.78rem}
@media (min-width:760px){
  .dcard-body{padding:1.1rem 1.15rem 1.15rem}
  .dcard h3{font-size:1.18rem}
  .dcard p{font-size:.9rem}
}
.dcard-foot,.dcard-fee{display:none}

/* Titel auf den Unterseiten: Die Musik / Der Raum größer */
.bigsub{font-size:clamp(1.75rem,3.4vw,2.5rem); line-height:1.12; font-weight:700;
  font-family:var(--display); color:var(--ink); letter-spacing:-.01em; margin-bottom:.9rem}

/* Engere Sektion, wo Blöcke direkt zusammengehören */
.pull-up{padding-top:clamp(1.2rem,2.6vw,2rem)}
.pull-tight{padding-top:clamp(1.4rem,3vw,2.4rem); padding-bottom:clamp(1.4rem,3vw,2.4rem)}

/* Pakete auf dunklem Grund */
.deep .paket{background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.16); color:#C9D3E4}
.deep .paket h3{color:#F6F3EC}
.deep .paket .preis{color:#F6F3EC}
.deep .paket .preis small{color:#A8B4CA}
.deep .paket p{color:#A8B4CA}
.deep .paket.hebt{border-color:var(--gold); background:rgba(168,125,58,.14)}
.deep .paket:hover{box-shadow:0 20px 38px -26px rgba(0,0,0,.7)}
.deep .paket-panel{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.2)}
.deep .paket-panel h3{color:#F6F3EC}
.deep .panel-grid p{color:#A8B4CA}
.deep .lead{color:#C9D3E4}
.deep .rhythm{color:#A8B4CA}

/* Sektion mit Bild als Hintergrund und dunklem Overlay */
.bgsect{position:relative; overflow:hidden; background:var(--ink)}
.bgsect > .sect-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.bgsect > .sect-tint{position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(13,26,48,.93) 0%, rgba(13,26,48,.86) 50%, rgba(13,26,48,.94) 100%)}
.bgsect > .wrap{position:relative; z-index:1}

/* Bild neben den Ablauf-Schritten, über die volle Höhe */
.steps-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(2rem,4vw,3.5rem); align-items:stretch}
.steps-grid .tallpic{width:100%; height:100%; object-fit:cover; border-radius:14px; min-height:20rem}
@media (max-width:820px){ .steps-grid{grid-template-columns:1fr} .steps-grid .tallpic{min-height:16rem; aspect-ratio:4/3; height:auto} }

/* Über mich: Bild und Text auf gleicher Höhe */
.evengrid{align-items:stretch}
.evengrid .fillpic{width:100%; height:100%; object-fit:cover; border-radius:14px; min-height:22rem}
@media (max-width:820px){ .evengrid .fillpic{min-height:0; aspect-ratio:4/5; height:auto} }

/* ---------- Runde 10: Dreier-Raster, sanftes Einblenden beim Scrollen ---------- */
.trio{display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:2.2rem 2.8rem; margin-top:2.4rem}
.trio h3{font-size:1.45rem; margin-bottom:.6rem; color:var(--ink)}
.trio p{font-size:.97rem; color:var(--slate); margin:0; line-height:1.62}

@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0; transform:translateY(20px);
    transition:opacity .75s ease, transform .75s cubic-bezier(.22,.85,.3,1)}
  .reveal.is-in{opacity:1; transform:none}
}

/* ---------- Runde 10b: mobil deutlich kompakter ---------- */
@media (max-width:760px){
  section{padding:clamp(2.2rem,6.5vw,3.2rem) 0}
  .hero-spacer{height:clamp(1.6rem,4vw,2.4rem)}
  h2{font-size:clamp(1.75rem,6.6vw,2.3rem)}
  .bigsub{font-size:clamp(1.55rem,6vw,2rem)}
  .deepgrid{gap:1.6rem}
  .deepgrid img.pic{aspect-ratio:4/3 !important}
  .steps{margin-top:1.4rem}
  .step{padding:.95rem 0; grid-template-columns:2.2rem 1fr; gap:.85rem}
  .step .num{width:2.2rem; height:2.2rem}
  .step .num svg{width:1.05rem; height:1.05rem}
  .imgband{height:clamp(8rem,34vw,12rem)}
  .elems{gap:1.3rem 1.8rem; margin-top:1.6rem}
  .trio{gap:1.6rem; margin-top:1.6rem}
  .trio h3{font-size:1.25rem}
  .stance{grid-template-columns:1fr; gap:1.4rem; margin-top:1.6rem}
  .gallery4{gap:.5rem}
  .gallery3{gap:.5rem}
  .gallery2{gap:.5rem}
  .factbox{padding:1.15rem 1.2rem}
  details{padding:.9rem 0}
  .quotes{margin-top:1.6rem}
  .pakete{gap:.8rem; margin-top:1.6rem}
  .paket{padding:1.15rem 1.2rem 1.05rem}
  .disclaimer{padding:1.1rem 1.2rem}
}

/* Auf dem Handy nebeneinander statt untereinander */
@media (max-width:760px){
  .gallery2{grid-template-columns:1fr 1fr}
  .gallery2 img{aspect-ratio:1/1}
  .pakete{grid-template-columns:1fr 1fr}
  .paket .preis{font-size:1.5rem}
  .paket h3{font-size:1.02rem}
  .paket p{font-size:.85rem}
  .paket .tag{font-size:.66rem; letter-spacing:.1em}
  .panel-grid{gap:1.1rem; margin-top:.9rem}
  .paket-panel{padding:1.1rem 1.2rem}
}

/* ---------- Runde 11: Stimmen nur in den Markenfarben, klares Seitenende ---------- */
.quotes blockquote{border:1px solid var(--line)}
.quotes blockquote:nth-child(4n+1){background:#FFFFFF}
.quotes blockquote:nth-child(4n+2){background:#F1F4F9}
.quotes blockquote:nth-child(4n+3){background:#F8F3E9}
.quotes blockquote:nth-child(4n+4){background:#FFFFFF}
.quotes blockquote:nth-child(6){background:var(--ink); border-color:var(--ink)}

/* Newsletter am Seitenende: mittig, schlicht */
.center-block{max-width:38rem; margin-inline:auto; text-align:center}
.center-block .sect-eyebrow::after{margin-inline:auto}
.center-block form{justify-content:center; margin-top:1.8rem}
.center-block p{color:#A8B4CA}
.contact-plain{list-style:none; padding:0; margin:2rem 0 0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:1.4rem 2rem}
.contact-plain b{display:block; font-size:.74rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:.35rem}
.contact-plain a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line)}
.contact-plain a:hover{border-bottom-color:var(--gold)}

/* Essenzraum-Kacheln: Hinweis auf Anmeldung */
.dcard-flag{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; color:#8A6528; background:var(--gold-soft); border-radius:999px;
  padding:.3rem .72rem; white-space:nowrap}
@media (max-width:640px){ .dcard-flag{font-size:.64rem; padding:.3rem .7rem} }

/* Fakten-Leiste (Wo, Wann, Preis, Anmeldung) */
.facts{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem 1.8rem;
  margin-top:clamp(2rem,4vw,2.8rem); padding-top:1.5rem; border-top:1px solid var(--line)}
.facts .facts-k{display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:.35rem}
.facts p{margin:0; font-size:.95rem; color:var(--ink); line-height:1.45}
@media (max-width:820px){ .facts{grid-template-columns:repeat(2,1fr); gap:1.2rem 1.4rem} }
@media (max-width:420px){ .facts{grid-template-columns:1fr} }

/* SoundCloud als eigener Abschnitt */
.sc-solo{display:block; width:100%; border:0; border-radius:14px;
  margin-top:clamp(1.6rem,3vw,2.2rem); background:var(--paper)}

/* SoundCloud: Hinweiskarte statt eingebettetem Player */
.sc-card{display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  margin-top:clamp(1.6rem,3vw,2.2rem); padding:1.5rem 1.6rem;
  background:var(--ink); color:#F6F3EC; border-radius:14px;
  box-shadow:0 20px 40px -28px rgba(15,31,56,.6)}
.sc-card svg{width:2.2rem; height:2.2rem; flex:0 0 auto; fill:none; stroke:var(--gold-soft); stroke-width:1.5}
.sc-card-t{flex:1 1 14rem; min-width:0}
.sc-card-t strong{display:block; font-family:var(--display); font-size:1.15rem; font-weight:600; margin-bottom:.2rem}
.sc-card-t span{font-size:.9rem; color:#BFC7D6; line-height:1.5}
.sc-card .btn{flex:0 0 auto; background:var(--gold); border-color:var(--gold); color:#14243F}
@media (max-width:560px){ .sc-card{padding:1.3rem 1.2rem} .sc-card .btn{width:100%; text-align:center} }

/* Faktenbox ueber die ganze Breite, unter dem Einstiegstext */
.factbox-wide{margin-top:clamp(2rem,4vw,2.8rem); max-width:44rem}
.factbox-wide h3{font-family:var(--display); font-size:1.15rem; font-weight:600; margin-bottom:1rem}
.factbox-wide dl{grid-template-columns:8rem 1fr; gap:.65rem 1.2rem}
@media (max-width:480px){ .factbox-wide dl{grid-template-columns:1fr; gap:.15rem}
  .factbox-wide dt{margin-top:.7rem} }
.sc-card{justify-content:space-between; max-width:44rem}
.sc-card svg{width:1.9rem; height:1.9rem}

[data-e="ed-53"]{margin-bottom:.6rem}

/* Bleib in Verbindung: Telegram-Kanal und Newsletter nebeneinander */
.zweiwege{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3vw,2.4rem);
  max-width:56rem; margin:0 auto}
.zweiwege .weg{background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.13);
  border-radius:14px; padding:clamp(1.5rem,3vw,2rem); display:flex; flex-direction:column}
.zweiwege .weg h3{font-size:1.15rem; color:#F6F3EC; margin-bottom:.45rem}
.zweiwege .weg p{font-size:.92rem; color:#BFC7D6; line-height:1.55; margin-bottom:1.3rem}
.zweiwege .weg > :last-child{margin-top:auto}
.zweiwege .weg .btn{background:var(--gold); border-color:var(--gold); color:#14243F;
  min-width:11rem; text-align:center}
.zweiwege .weg form{display:flex; flex-direction:column; gap:.7rem; margin-top:auto}
.zweiwege .weg input{width:100%; min-width:0; flex:0 0 auto}
.weg-fuss{display:flex; justify-content:flex-end}
@media (max-width:760px){ .zweiwege{grid-template-columns:1fr} }

/* Ueber-mich-Header: auf schmalen Schirmen Gesicht nach oben, Schrift bekommt Ruhe */
@media (max-width:760px){
  .hero-media img[data-img="ub-i0"]{object-position:62% 16%}
}

/* Passen wir zusammen: zwei Bloecke sollen nicht wie drei mit Luecke wirken */
.trio:has(> div:last-child:nth-child(2)){grid-template-columns:repeat(2,1fr); max-width:52rem}
@media (max-width:760px){ .trio:has(> div:last-child:nth-child(2)){grid-template-columns:1fr} }

/* Galerie mit nur zwei Bildern soll nicht wie drei mit Luecke wirken */
.gallery3:has(> img:last-child:nth-child(2)){grid-template-columns:repeat(2,1fr)}
@media (max-width:700px){ .gallery3:has(> img:last-child:nth-child(2)){grid-template-columns:1fr} }

/* Geleerte Textbausteine nehmen keinen Platz ein; in der Werkstatt bleiben sie anklickbar */
[data-e]:empty{display:none}
body.w-edit [data-e]:empty{display:block; min-height:1.4em; min-width:6rem}

.dcard-body .dcard-foot{margin-top:auto; padding-top:1.1rem; border:0;
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.dcard-flag{text-decoration:none; transition:background .2s}
a.dcard-flag:hover{background:var(--gold); color:#14243F}
@media (max-width:820px){
  .dcard-body .dcard-foot{gap:.5rem}
  .dcard-body .dcard-foot > *{flex:0 0 auto}
}

/* Header auf schmalen Schirmen: Logo und Menue, sonst wird der Knopf herausgedrueckt.
   Die Social-Links stehen im Menue und im Fuss. */
@media (max-width:520px){
  .top .social-row{display:none}
  .top .header-right{gap:0}
}
html,body{overflow-x:hidden}

/* Bleib in Verbindung liegt auf einem Bild: Karten etwas dichter, damit der Text ruhig bleibt */
#kontakt.bgsect .sect-bg{opacity:.62; object-position:center 38%}
#kontakt.bgsect > .sect-tint{background:
  linear-gradient(180deg, rgba(15,31,56,.92) 0%, rgba(15,31,56,.62) 38%, rgba(15,31,56,.9) 100%)}
#kontakt .zweiwege .weg{background:rgba(20,36,63,.72); border-color:rgba(255,255,255,.16);
  backdrop-filter:blur(2px)}

/* Paket-Details: Handy klappt direkt unter der Kachel auf, Rechner zeigt sie unter allen vieren */
.pakete .paket-panel{margin-top:0}
@media (min-width:821px){
  .pakete{grid-template-columns:repeat(4,1fr)}
  .pakete .paket{order:1}
  .pakete .paket-panel{order:2; grid-column:1 / -1; margin-top:.6rem}
}
@media (max-width:820px){
  .pakete{grid-template-columns:1fr; gap:.7rem}
  .pakete .paket-panel.is-open{margin-bottom:.6rem}
  .paket{padding:1.25rem 1.3rem 1.1rem}
  .paket .preis{font-size:1.6rem; margin-top:.5rem}
  .paket p{font-size:.88rem}
  .panel-grid{grid-template-columns:1fr; gap:1rem}
}
/* ohne Icons: die drei Bloecke brauchen eine ruhige Trennung */
.panel-grid > div + div{padding-top:0}
@media (min-width:821px){ .panel-grid{grid-template-columns:repeat(3,1fr)} }

/* Knoepfe nebeneinander halten, auch auf schmalen Schirmen */
@media (max-width:560px){
  .cta-row{display:flex; gap:.55rem; flex-wrap:nowrap}
  .cta-row .btn{flex:1 1 0; min-width:0; padding-left:.9rem; padding-right:.9rem;
    font-size:.86rem; text-align:center; white-space:nowrap}
  .termine-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem}
  .termine-head .btn{flex:0 0 auto; white-space:nowrap}
}

/* Terminkacheln auf dem Handy: eine Zeile je Termin statt zwei schmaler Spalten.
   Kuerzer zu scrollen, keine zerrissenen Zeilen. */
@media (max-width:620px){
  .dates{grid-template-columns:1fr; gap:.8rem}
  .dcard{flex-direction:row; align-items:stretch}
  .dcard-img{width:6rem; aspect-ratio:1; flex:0 0 auto; height:auto}
  .dcard-body{padding:.8rem .95rem .8rem 1rem; flex:1 1 auto; min-width:0}
  .dcard-date{font-size:.66rem; letter-spacing:.08em; margin-bottom:.22rem}
  .dcard h3{font-size:1.05rem; line-height:1.18; margin-bottom:.18rem}
  .dcard p{font-size:.82rem; line-height:1.4}
  .dcard .dcard-body .dcard-foot{padding-top:.5rem; gap:.4rem; margin-top:.2rem}
  .dcard .dcard-body{justify-content:flex-start}
  .dcard .dcard-flag{font-size:.74rem; padding:.24rem .58rem; letter-spacing:.07em}
  .dcard .dcard-foot .dcard-link{font-size:.76rem; padding:.28rem .8rem; line-height:1.3}
}
@media (max-width:380px){
  .dcard-img{width:4.6rem}
  .dcard h3{font-size:.98rem}
}

/* Kopfzeile der Termine: Ueberschrift und Knopf auf einer Linie, auch auf dem Handy */
@media (max-width:620px){
  .termine-head{flex-wrap:nowrap; align-items:center; gap:.8rem}
  .termine-head h2{font-size:clamp(1.5rem,7vw,2rem); line-height:1.1}
  .termine-head .sect-eyebrow{margin-bottom:.3rem}
  .termine-head .btn{font-size:.8rem; padding:.42rem .95rem; white-space:nowrap}
  .dates{margin-top:1.4rem}
}

/* Hero-Knoepfe auch auf sehr schmalen Schirmen nebeneinander */
@media (max-width:380px){
  .hero .actions{display:flex; gap:.5rem; flex-wrap:nowrap}
  .hero .actions .btn{flex:1 1 0; min-width:0; font-size:.82rem; padding:.55rem .7rem;
    text-align:center; white-space:nowrap}
}

/* Lesbarkeit auf kleinen Schirmen: nichts unter 11.5px, Kachelfuss bleibt einzeilig */
@media (max-width:620px){
  .paket .tag{font-size:.73rem}
  .dcard .dcard-body .dcard-foot{flex-wrap:nowrap; align-items:center}
  .dcard .dcard-flag{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis}
  .dcard .dcard-foot .dcard-link{flex:0 0 auto; margin-left:auto}
}
@media (max-width:340px){
  .dcard .dcard-flag{font-size:.72rem; padding:.22rem .48rem; letter-spacing:.04em}
  .dcard .dcard-foot .dcard-link{font-size:.72rem; padding:.26rem .66rem}
}

/* ---------- Runde 12: Logo zurueckgesetzt (Namenszusatz entfernt, Jakob fand es zu viele Stile) ---------- */

/* Erstgespräch-Karte: kein Klick-Panel, direkter Mail-Link statt Akkordeon */
.paket.erstgespraech{text-decoration:none; cursor:pointer}
.paket.erstgespraech::after{display:none}
.paket.erstgespraech .more{color:var(--gold)}
.paket.erstgespraech .more::after{content:" →"}

/* ---------- Runde 13: Anmelden+Details Buttons in Terminkarten sauber bündig ---------- */
.dcard-foot .dcard-link{margin-top:0; align-self:center}
.dcard-foot{align-items:center}