/* ================= tokens ================= */
:root{
  --paper:#F1E9E1;
  --paper-2:#E7DCD1;
  --ink:#241A14;
  --ink-72:rgba(36,26,20,.72);
  --ink-48:rgba(36,26,20,.5);
  --ink-32:rgba(36,26,20,.34);
  --dark:#1B1310;
  --dark-ink:#EBE1D7;
  --dark-ink-60:rgba(235,225,215,.6);
  --dark-line:rgba(235,225,215,.17);
  --line:rgba(36,26,20,.22);
  --line-soft:rgba(36,26,20,.11);
  --img-bright:1;
  --f-disp:"Newsreader","Iowan Old Style",Georgia,serif;
  --f-ui:"Karla","Helvetica Neue",Arial,sans-serif;
  --pad:clamp(20px,5.2vw,84px);
  --gap:clamp(14px,1.8vw,26px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#161110; --paper-2:#1E1715; --ink:#ECE2D9;
    --ink-72:rgba(236,226,217,.72); --ink-48:rgba(236,226,217,.5); --ink-32:rgba(236,226,217,.32);
    --dark:#251A15; --dark-ink:#ECE2D9; --dark-ink-60:rgba(236,226,217,.6); --dark-line:rgba(236,226,217,.2);
    --line:rgba(236,226,217,.24); --line-soft:rgba(236,226,217,.12); --img-bright:.88;
  }
}
:root[data-theme="dark"]{
  --paper:#161110; --paper-2:#1E1715; --ink:#ECE2D9;
  --ink-72:rgba(236,226,217,.72); --ink-48:rgba(236,226,217,.5); --ink-32:rgba(236,226,217,.32);
  --dark:#251A15; --dark-ink:#ECE2D9; --dark-ink-60:rgba(236,226,217,.6); --dark-line:rgba(236,226,217,.2);
  --line:rgba(236,226,217,.24); --line-soft:rgba(236,226,217,.12); --img-bright:.88;
}

/* ================= base ================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-ui);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;filter:brightness(var(--img-bright))}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
::selection{background:var(--ink);color:var(--paper)}
h1,h2,h3{font-family:var(--f-disp);font-weight:300;letter-spacing:-.022em;text-wrap:balance;margin:0}
h1{font-size:clamp(2.5rem,6.4vw,6rem);line-height:1.02;font-variation-settings:"opsz" 72}
h2{font-size:clamp(1.75rem,3.8vw,3.2rem);line-height:1.06;font-variation-settings:"opsz" 56}
h3{font-size:clamp(1.05rem,1.6vw,1.34rem);line-height:1.24;font-variation-settings:"opsz" 20;font-weight:400}
p{margin:0}
sup{font-size:.56em;line-height:0;vertical-align:.5em;letter-spacing:.04em;color:var(--ink-48);font-family:var(--f-ui)}

.wrap{max-width:1500px;margin:0 auto;padding-inline:var(--pad)}
.sheet{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-48);font-weight:500}
.lead{font-size:clamp(1rem,1.24vw,1.16rem);line-height:1.58;color:var(--ink-72)}
.small{font-size:14px;color:var(--ink-72);line-height:1.62}
.it{font-family:var(--f-disp);font-style:italic;font-weight:300}

/* Marginalspalte — das durchlaufende Motiv */
.marg{grid-column:1/3;border-top:1px solid var(--line);padding-top:10px;font-size:11.5px;line-height:1.52;color:var(--ink-48);align-self:start}
.marg b{display:block;font-weight:500;color:var(--ink-72);letter-spacing:.13em;text-transform:uppercase;font-size:10px;margin-bottom:6px}
.col{grid-column:4/13}
@media(max-width:980px){
  .marg{grid-column:1/13;border-top:0;border-left:1px solid var(--line);padding:2px 0 2px 14px;margin-bottom:22px}
  .col{grid-column:1/13}
}

/* Knöpfe */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:1.02em 1.9em;border:1px solid var(--ink);overflow:hidden;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;transition:color .38s}
.btn i{position:relative;z-index:1;font-style:normal}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .52s cubic-bezier(.16,.84,.28,1)}
.btn:hover{color:var(--paper)}
.btn:hover::before{transform:none}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid::before{background:var(--paper)}
.btn--solid:hover{color:var(--ink)}
.on-dark .btn{border-color:var(--dark-ink);color:var(--dark-ink)}
.on-dark .btn::before{background:var(--dark-ink)}
.on-dark .btn:hover{color:var(--dark)}
.tl{position:relative;display:inline-block;padding-bottom:2px;font-size:13px}
.tl::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform-origin:right;transform:scaleX(0);transition:transform .42s cubic-bezier(.2,.7,.2,1)}
.tl:hover::after,.course:hover .tl::after{transform-origin:left;transform:scaleX(1)}

/* Bildplatz */
.figcap{display:flex;justify-content:space-between;gap:14px;margin-top:11px;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-48)}

/* ================= nav ================= */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:20px var(--pad);transition:background .5s,backdrop-filter .5s,border-color .5s,padding .45s;border-bottom:1px solid transparent}
.nav.is-stuck{background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(12px);border-bottom-color:var(--line-soft);padding-block:13px}
.brand{font-size:13px;letter-spacing:.2em;font-weight:600}
.nav-links{display:flex;gap:26px;font-size:13px}
.nav-links a{color:var(--ink-72);transition:color .3s}
.nav-links a:hover{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:20px}
.mode{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-48);padding-bottom:2px;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.mode:hover{color:var(--ink);border-bottom-color:var(--line)}
.nav .btn{padding:.82em 1.45em}
@media(max-width:1080px){.nav-links{display:none}}
@media(max-width:640px){
  .nav{padding-inline:18px;gap:12px}
  .brand{font-size:10.5px;letter-spacing:.15em;white-space:nowrap}
  .mode{font-size:10px;letter-spacing:.12em}
  .nav .btn{padding:.78em 1.02em;font-size:10.5px;letter-spacing:.12em}
}

/* ================= 1 · Auftakt (luftig) ================= */
.hero{padding-top:clamp(112px,15vh,176px);padding-bottom:clamp(50px,8vw,120px)}
.hero-top{grid-column:1/13;grid-row:1;display:flex;justify-content:space-between;gap:20px;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:13px}
.hero .marg{grid-column:1/3;grid-row:2;margin-top:.55em}
.hero-main{grid-column:4/10;grid-row:2}
.hero h1{max-width:15ch}
.hero-lead{margin-top:clamp(24px,2.6vw,38px);max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3vw,40px)}
.hero-next{margin-top:clamp(24px,2.8vw,36px);padding-top:13px;border-top:1px solid var(--line-soft);font-size:13.5px;color:var(--ink-72);max-width:46ch;min-height:1.6em}
.hero-next b{font-weight:500;color:var(--ink)}
.hero-next a{border-bottom:1px solid var(--line);padding-bottom:1px;transition:border-color .3s}
.hero-next a:hover{border-bottom-color:var(--ink)}
.hero-fig{grid-column:10/13;grid-row:2;align-self:end;margin-right:calc(-1 * var(--pad))}
.arch{position:relative;overflow:hidden;background:var(--paper-2);aspect-ratio:1856/2304;border-radius:min(40vw,220px) min(40vw,220px) 0 0}
.arch img{width:100%;height:100%;object-fit:cover}
@media(max-width:980px){
  .hero .marg{grid-column:1/13;grid-row:auto}
  .hero-main{grid-column:1/13;grid-row:auto}
  .hero-fig{grid-column:1/13;grid-row:auto;margin-top:36px;max-width:400px;margin-right:0}
}
@media(max-width:640px){.hero-cta .btn{flex:1 1 100%}}

/* ================= 2 · Stundenplan (dicht — das Rückgrat) ================= */
.plan{background:var(--paper-2);border-block:1px solid var(--line);padding-block:clamp(36px,4.4vw,64px)}
.plan-head{grid-column:4/13;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px}
.plan-head h2{font-size:clamp(1.3rem,2vw,1.75rem)}
.plan-body{grid-column:4/13;margin-top:22px}
.days{display:flex;gap:clamp(14px,2vw,28px);flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:11px}
.day{font-family:var(--f-disp);font-size:clamp(.98rem,1.5vw,1.2rem);color:var(--ink-48);padding-bottom:5px;border-bottom:1px solid transparent;margin-bottom:-12px;transition:color .3s,border-color .3s}
.day:hover{color:var(--ink)}
.day[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.slot{display:grid;grid-template-columns:78px minmax(0,1fr) 150px 130px;gap:16px;align-items:baseline;padding-block:9px;border-bottom:1px solid var(--line-soft);font-size:14px}
.slot time{font-family:var(--f-disp);font-size:1.02rem;font-variant-numeric:tabular-nums}
.slot b{font-weight:500}
.slot .who,.slot .avail{font-size:12.5px;color:var(--ink-48)}
.slot .avail.free{color:var(--ink-72)}
.slot.past{color:var(--ink-32)}
.slot.past time,.slot.past b,.slot.past .who,.slot.past .avail{color:var(--ink-32)}
.slot.next{position:relative}
.slot.next::before{content:"als Nächstes";position:absolute;left:-104px;top:10px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-72);white-space:nowrap}
.plan-foot{margin-top:16px;font-size:12.5px;color:var(--ink-48)}
@media(max-width:1100px){.slot.next::before{position:static;display:block;grid-column:1/-1;margin-bottom:1px}}
@media(max-width:980px){.plan-head,.plan-body{grid-column:1/13}}
@media(max-width:760px){
  .slot{grid-template-columns:66px 1fr;gap:1px 12px}
  .slot .who,.slot .avail{grid-column:2}
}

/* ================= 3 · Haltung (luftig) ================= */
.creed{padding-block:clamp(66px,10vw,150px)}
.creed .col{grid-column:4/12}
.manifest{font-family:var(--f-disp);font-weight:300;font-size:clamp(1.42rem,3.1vw,2.7rem);line-height:1.28;letter-spacing:-.022em}
.manifest .w{opacity:1}
.js-motion .manifest .w{opacity:.17}
.js-motion .manifest.lit .w{opacity:1;transition:opacity .8s cubic-bezier(.2,.7,.2,1)}
.creed-by{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;align-items:baseline}
.creed-by .sig{font-family:var(--f-disp);font-style:italic;font-size:1.24rem}

/* ================= 4 · Kurse ================= */
.courses-sec{padding-bottom:clamp(56px,7vw,110px)}
.courses-head{grid-column:4/13;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,3vw,56px);align-items:end;padding-bottom:clamp(22px,3vw,40px)}
.courses-head p{max-width:44ch;padding-bottom:.35em}
.courses{grid-column:4/13;border-top:1px solid var(--line)}
.course{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 84px 124px 96px 78px;align-items:baseline;gap:18px;text-align:left;padding:clamp(16px,2vw,24px) 0;border-bottom:1px solid var(--line-soft);transition:opacity .4s}
.courses:hover .course{opacity:.4}
.courses:hover .course:hover{opacity:1}
.course-name{font-family:var(--f-disp);font-size:clamp(1.3rem,2.4vw,1.95rem);font-weight:300;letter-spacing:-.02em;line-height:1.08}
.course-name em{display:block;font-family:var(--f-ui);font-style:normal;font-size:12.5px;color:var(--ink-48);margin-top:.6em;max-width:42ch;line-height:1.5}
.course .m{font-size:12.5px;color:var(--ink-72)}
.course .c-price{font-family:var(--f-disp);font-size:1.08rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.course .tl{justify-self:end;color:var(--ink-72)}
@media(max-width:980px){
  .course{grid-template-columns:1fr auto;gap:5px 16px}
  .course .m{grid-column:1;font-size:12px;color:var(--ink-48)}
  .course .m.lvl{display:none}
  .course .c-price{grid-row:1;grid-column:2}
  .course .tl{grid-row:2;grid-column:2}
}

/* ================= 5 · Bildband ================= */
.band{position:relative;height:clamp(300px,52vh,520px);overflow:hidden}
.band-img{position:absolute;inset:-14% 0;width:100%;height:128%;object-fit:cover;will-change:transform}
.band-cap{position:absolute;left:0;bottom:0;padding:var(--pad);padding-block:22px;color:#F4EBE3;font-size:11px;letter-spacing:.15em;text-transform:uppercase;text-shadow:0 1px 18px rgba(20,12,8,.75)}

/* ================= 6 · dunkles Kapitel ================= */
.chapter{background:var(--dark);color:var(--dark-ink);padding-block:clamp(66px,9vw,132px)}
.chapter h2,.chapter h3{color:var(--dark-ink)}
.chapter .kicker{color:var(--dark-ink-60)}
.chapter .figcap{color:var(--dark-ink-60)}
.chapter .marg{border-top-color:var(--dark-line);color:var(--dark-ink-60)}
.chapter .marg b{color:var(--dark-ink)}
.chapter-head{grid-column:4/10}
.method{grid-column:1/13;margin-top:clamp(32px,4vw,60px);display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(24px,4vw,72px);align-items:start}
.method-img{background:#2A201A;aspect-ratio:4/5;overflow:hidden;margin-left:calc(-1 * var(--pad))}
.method-img img{width:100%;height:100%;object-fit:cover}
.method-list{margin:0;padding:0;list-style:none}
.method-list li{padding-block:clamp(15px,1.9vw,22px);border-top:1px solid var(--dark-line)}
.method-list li:last-child{border-bottom:1px solid var(--dark-line)}
.method-list p{margin-top:.45em;font-size:14px;color:var(--dark-ink-60);max-width:52ch}
@media(max-width:980px){.chapter-head,.method{grid-column:1/13}}
@media(max-width:820px){.method{grid-template-columns:1fr}.method-img{margin-left:0;aspect-ratio:3/2}}

/* ================= 7 · Studio & Team ================= */
.studio{padding-block:clamp(60px,8vw,124px)}
.studio-head{grid-column:4/11}
.studio-copy{grid-column:4/9;margin-top:clamp(20px,2.4vw,34px)}
.studio-copy p+p{margin-top:1.1em}
.studio-fig{grid-column:10/13;margin-top:clamp(20px,2.4vw,34px)}
.portrait{background:var(--paper-2);aspect-ratio:4/5;overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover}
.studio-shots{grid-column:4/13;margin-top:clamp(30px,4vw,56px);display:grid;grid-template-columns:1.35fr 1fr;gap:var(--gap)}
.studio-shots .shot{overflow:hidden;background:var(--paper-2);aspect-ratio:3/2}
.studio-shots .shot.tall{aspect-ratio:4/5}
.studio-shots img{width:100%;height:100%;object-fit:cover}
.people{grid-column:4/13;margin-top:clamp(30px,4vw,52px);border-top:1px solid var(--line)}
.person{display:grid;grid-template-columns:1fr auto;gap:3px 20px;padding-block:14px;border-bottom:1px solid var(--line-soft)}
.person b{font-weight:500;font-size:15px}
.person .roles{grid-column:1;font-size:12.5px;color:var(--ink-48)}
.person .since{grid-row:1;grid-column:2;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-48)}
@media(max-width:980px){
  .studio-head,.studio-copy,.studio-fig,.studio-shots,.people{grid-column:1/13}
  .studio-fig{max-width:360px}
  .studio-shots{grid-template-columns:1fr}
  .studio-shots .shot.tall{aspect-ratio:3/2}
}

/* ================= 8 · Preise als Fußnoten-Apparat (sehr dicht) ================= */
.fees{background:var(--paper-2);border-block:1px solid var(--line);padding-block:clamp(40px,5vw,74px)}
.fees-head{grid-column:4/13;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:12px}
.fees-head h2{font-size:clamp(1.2rem,1.8vw,1.6rem)}
.notes{grid-column:4/13;margin-top:20px;columns:2;column-gap:clamp(26px,4vw,72px);font-size:13.4px;line-height:1.56;color:var(--ink-72)}
.note{break-inside:avoid;padding-left:30px;text-indent:-30px;margin-bottom:13px}
.note .n{display:inline-block;width:22px;text-indent:0;font-variant-numeric:tabular-nums;color:var(--ink-48);font-size:11.5px;letter-spacing:.06em}
.note strong{font-weight:500;color:var(--ink)}
@media(max-width:980px){.fees-head,.notes{grid-column:1/13}}
@media(max-width:700px){.notes{columns:1}}

/* ================= 9 · Stimmen ================= */
.voices{padding-block:clamp(56px,8vw,120px)}
.voices .col{grid-column:4/13}
.voices h2{max-width:16ch}
.vlist{margin-top:clamp(26px,3.4vw,46px);display:grid;gap:clamp(22px,3vw,40px)}
.voice{border-top:1px solid var(--line);padding-top:18px;display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:clamp(16px,3vw,40px)}
.voice q{font-family:var(--f-disp);font-weight:300;line-height:1.42;letter-spacing:-.012em;quotes:"\201E" "\201C"}
.voice:nth-child(1) q{font-size:clamp(1.06rem,1.62vw,1.34rem);max-width:62ch}
.voice:nth-child(2) q{font-size:clamp(1rem,1.3vw,1.1rem);max-width:56ch}
.voice:nth-child(3) q{font-size:clamp(1.1rem,1.8vw,1.5rem);max-width:44ch}
.voice .src{font-size:12px;color:var(--ink-48);line-height:1.5}
@media(max-width:900px){.voice{grid-template-columns:1fr;gap:12px}}

/* ================= 10 · Fragen ================= */
.faq-sec{padding-bottom:clamp(56px,8vw,120px)}
.faq-head{grid-column:4/7}
.faq{grid-column:7/13;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{list-style:none;cursor:pointer;padding-block:17px;display:flex;gap:18px;align-items:baseline;justify-content:space-between;font-family:var(--f-disp);font-size:clamp(1rem,1.5vw,1.24rem);font-weight:300}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;font-family:var(--f-ui);font-size:14px;color:var(--ink-48);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq .ans{padding:0 34px 20px 0;max-width:60ch;color:var(--ink-72);font-size:14px}
@media(max-width:980px){.faq-head{grid-column:1/13}.faq{grid-column:1/13;margin-top:24px}}

/* ================= 11 · Kontakt ================= */
.loc{padding-bottom:clamp(52px,7vw,110px)}
.loc-head{grid-column:4/10}
.loc-info{grid-column:4/9;margin-top:clamp(22px,2.6vw,38px)}
.loc-info dl{margin:0;display:grid;grid-template-columns:94px 1fr;gap:11px 16px;font-size:14.5px;border-top:1px solid var(--line);padding-top:18px}
.loc-info dt{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-48);padding-top:.4em}
.loc-info dd{margin:0}
.loc-map{grid-column:10/13;margin-top:clamp(22px,2.6vw,38px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.loc-map svg{width:100%;height:auto;display:block}
@media(max-width:980px){.loc-head,.loc-info,.loc-map{grid-column:1/13}.loc-map{margin-top:30px}}

/* ================= Abschluss & Fuß ================= */
.close{border-top:1px solid var(--line);padding-block:clamp(48px,7vw,96px)}
.close h2{grid-column:4/10;font-size:clamp(1.7rem,4vw,3.3rem)}
.close .btn{grid-column:11/13;align-self:end;justify-self:start}
@media(max-width:900px){.close h2{grid-column:1/13}.close .btn{grid-column:1/13;margin-top:24px}}

.foot{background:var(--paper-2);padding-top:clamp(40px,5vw,70px);padding-bottom:24px}
.foot-news{grid-column:1/5}
.foot-news p{margin-top:.5em;max-width:32ch}
.news{display:flex;gap:10px;margin-top:16px;border-bottom:1px solid var(--ink);padding-bottom:8px}
.news input{flex:1;background:none;border:0;font:inherit;font-size:14.5px;color:var(--ink);padding:4px 0}
.news input::placeholder{color:var(--ink-48)}
.news button{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.foot-cols{grid-column:7/13;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.foot-cols ul{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--ink-72)}
.foot-cols a:hover{color:var(--ink)}
.foot-free{grid-column:1/13;margin-top:clamp(28px,3.4vw,46px);border-top:1px solid var(--line);padding-top:14px;display:flex;flex-wrap:wrap;gap:5px 26px;font-size:13px;color:var(--ink-72)}
.foot-free .lbl2{width:100%;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-48);margin-bottom:5px}
.foot-free b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.wordmark{grid-column:1/13;margin-top:clamp(38px,5vw,74px);line-height:.78;font-family:var(--f-disp);font-weight:300;letter-spacing:-.038em;font-size:clamp(2.2rem,12.6vw,12.6rem);white-space:nowrap;border-bottom:1px solid var(--line);padding-bottom:.1em}
.legal{grid-column:1/13;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:15px;font-size:11px;color:var(--ink-48)}
@media(max-width:860px){.foot-news,.foot-cols{grid-column:1/13}.foot-cols{margin-top:30px}}

/* ================= Panel ================= */
.scrim{position:fixed;inset:0;background:rgba(27,19,16,.5);opacity:0;pointer-events:none;transition:opacity .5s;z-index:80}
.scrim.open{opacity:1;pointer-events:auto}
.panel{position:fixed;top:0;right:0;height:100dvh;width:min(490px,94vw);z-index:90;background:var(--paper);border-left:1px solid var(--line);transform:translateX(101%);transition:transform .6s cubic-bezier(.16,.84,.28,1);display:flex;flex-direction:column;overflow-y:auto}
.panel.open{transform:none}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 26px;border-bottom:1px solid var(--line-soft)}
.panel-close{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-48);transition:color .3s}
.panel-close:hover{color:var(--ink)}
.panel-body{padding:24px 26px 34px;display:flex;flex-direction:column;gap:18px}
.panel-body h3{font-family:var(--f-disp);font-size:clamp(1.6rem,3.4vw,2.1rem);font-weight:300;letter-spacing:-.02em}
.panel-facts{display:grid;grid-template-columns:1fr 1fr;gap:11px 18px;border-block:1px solid var(--line-soft);padding-block:15px}
.panel-facts b{display:block;font-family:var(--f-disp);font-size:1.06rem;font-weight:400;margin-top:2px}
.panel-body ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--ink-72)}
.panel-body ul li{padding-left:16px;position:relative}
.panel-body ul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--ink-48)}
.panel-note{font-size:12.5px;color:var(--ink-48);font-style:italic;font-family:var(--f-disp)}

.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,150%);visibility:hidden;background:var(--ink);color:var(--paper);padding:.8em 1.5em;font-size:13px;z-index:120;transition:transform .55s cubic-bezier(.16,.84,.28,1),visibility 0s linear .55s}
.toast.show{transform:translate(-50%,0);visibility:visible;transition:transform .55s cubic-bezier(.16,.84,.28,1),visibility 0s}

/* Sektions-eigene Spalten auf schmalen Schirmen zuruecksetzen */
@media(max-width:980px){
  .creed .col,.voices .col,.courses-head,.courses{grid-column:1/13}
  .courses-head{grid-template-columns:1fr;align-items:start;gap:12px;padding-bottom:22px}
  .courses-head p{padding-bottom:0}
}

/* ================= Bewegung ================= */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes imgIn{from{transform:scale(1.09)}to{transform:none}}
.js-motion .hero-top{animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) .1s both}
.js-motion .hero .marg{animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) .5s both}
.js-motion .hero h1{animation:fadeUp 1s cubic-bezier(.2,.7,.2,1) .2s both}
.js-motion .hero-lead{animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) .34s both}
.js-motion .hero-cta{animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) .44s both}
.js-motion .arch img{animation:imgIn 1.6s cubic-bezier(.16,.84,.28,1) both}
.rv{opacity:1}
.js-motion .rv{opacity:0;transform:translateY(20px)}
.js-motion .rv.in{opacity:1;transform:none;transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js-motion .rv,.js-motion .manifest .w{opacity:1!important;transform:none!important}
}

/* ======================================================================
   Prototyp-Balken (Hausmuster, siehe roeststube-neun)
   ====================================================================== */
.prototyp-fuss{
  display:flex;gap:1rem 2rem;justify-content:space-between;align-items:center;flex-wrap:wrap;
  padding:1.1rem var(--pad);font-size:.82rem;line-height:1.6;
  background:#1C1814;color:#F6F2EA;
}
.prototyp-fuss b{font-weight:600}
.prototyp-fuss a{color:#D8B79A;border-bottom:1px solid rgba(216,183,154,.4);padding-bottom:1px}
.prototyp-fuss a:hover{border-bottom-color:#D8B79A}