/* ==========================================================================
   Lotiva – Gestaltung
   Schwarz, Lila, Roségold. Alle Schriften liegen lokal im Ordner assets/schrift
   (keine Verbindung zu Drittservern).

   Aufbau dieser Datei
   01 Schriften und Grundwerte      08 Kurse, Kursplan
   02 Grundlagen                    09 Termine, Kalender
   03 Bausteine (Knopf, Bogen …)    10 Preise, Shop, Warenkorb
   04 Kopf und Navigation           11 Formulare, Dialog
   05 Startseite mit den zwei Toren 12 Textseiten (Recht)
   06 Bühne der Portale             13 Fuß
   07 Abschnitte                    14 Bewegung, Druck
   ========================================================================== */

/* 01 Schriften und Grundwerte ------------------------------------------------ */
@font-face{font-family:"Lotiva Serif";src:url("../schrift/lotiva-serif-regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lotiva Serif";src:url("../schrift/lotiva-serif-italic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Poppins";src:url("../schrift/poppins-300.woff") format("woff");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../schrift/poppins-400.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../schrift/poppins-500.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}

:root{
  /* Farben */
  --schwarz:#000;
  --nacht:#0c0712;          /* Flächen: Schwarz mit einem Hauch Lila */
  --nacht-2:#150c20;
  --nacht-3:#20132f;
  --linie:#2c1d40;
  --linie-hell:#4a3366;
  --lila:#7a3fd1;
  --lila-glut:#9d63f7;
  --lila-hell:#cbb0ff;
  --gold:#dba27f;           /* Roségold aus dem Logo */
  --gold-hell:#f4d6c1;
  --gold-tief:#b36f49;
  --text:#f6efe9;
  --leise:#bbb0b8;
  --fehler:#ff9d94;
  --gut:#a6e3b7;
  --metall:linear-gradient(100deg,#e3b596 0%,#f7d9c5 46%,#d6966c 100%);

  /* Akzent je Bereich (neutral = Gold) */
  --akzent:var(--gold);
  --akzent-hell:var(--gold-hell);
  --glut:rgba(219,162,127,.17);

  /* Schrift */
  --serif:"Lotiva Serif","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* Maße */
  --rand:clamp(1.25rem,5vw,4.5rem);
  --breite:73.75rem;
}
body[data-bereich="tanz"]{--akzent:var(--lila-glut);--akzent-hell:var(--lila-hell);--glut:rgba(122,63,209,.50)}
body[data-bereich="yoga"]{--akzent:var(--gold);--akzent-hell:var(--gold-hell);--glut:rgba(219,162,127,.24)}

/* 02 Grundlagen --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--schwarz);color:var(--text);font:300 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
main{flex:1;overflow-x:hidden;overflow-x:clip}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.08;margin:0;text-wrap:balance}
h1{font-size:clamp(2.75rem,7vw,5.6rem);letter-spacing:-.012em}
h2{font-size:clamp(2rem,4.2vw,3.15rem);letter-spacing:-.006em}
h3{font-size:1.55rem;line-height:1.2}
h4{font-size:1.25rem;line-height:1.25}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:inherit}
strong,b{font-weight:500}
ul,ol{padding-left:1.2em}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold-hell);outline-offset:3px}
::selection{background:var(--lila);color:#fff}
[hidden]{display:none!important}

/* Tanz bewegt sich (kursiv), Yoga ruht (aufrecht) */
body[data-bereich="tanz"] :is(h1,h2){font-style:italic}

.b{width:min(calc(100% - 2 * var(--rand)),var(--breite));margin-inline:auto}
.b--schmal{--breite:46rem}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprung{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--gold-hell);color:#000;padding:.6rem 1rem;border-radius:999px;font-weight:500;text-decoration:none}
.sprung:focus{top:1rem}

/* 03 Bausteine ---------------------------------------------------------------- */
/* Kapitälchen wie auf der Visitenkarte */
.kap{font-family:var(--serif);font-variant-caps:small-caps;letter-spacing:.14em;font-style:normal}
.leise{color:var(--leise)}
.metall{background:var(--metall);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Platzhalter, die noch mit echten Angaben gefüllt werden */
.ph{background:none;color:inherit;border-bottom:1px dashed var(--lila-hell);padding-bottom:.05em}
.ph-block{border:1px dashed var(--linie-hell);padding:1.25rem 1.4rem;color:var(--leise);font-size:.95rem}

/* Ornament der Visitenkarte: Linie, Punkt, Linie */
.ornament{display:flex;align-items:center;justify-content:center;gap:.55rem;color:var(--gold);margin:1.4rem auto}
.ornament::before,.ornament::after{content:"";height:1px;width:3.25rem;background:currentColor}
.ornament span{width:5px;height:5px;border-radius:50%;background:currentColor}
.ornament--links{justify-content:flex-start;margin-inline:0}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:3rem;padding:.7em 1.6em;border:1px solid var(--akzent);border-radius:999px;background:transparent;color:var(--akzent-hell);font:500 .95rem/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.knopf:hover{background-color:rgba(255,255,255,.07)}
.knopf--voll{border-color:transparent;background:var(--metall);color:#1b0e07}
.knopf--voll:hover{background:linear-gradient(100deg,#ecc4a8 0%,#fde9da 46%,#e2a67e 100%)}
body[data-bereich="tanz"] .knopf--voll{background:linear-gradient(100deg,#6631bb,#8b4de8);color:#fff}
body[data-bereich="tanz"] .knopf--voll:hover{background:linear-gradient(100deg,#7440cc,#9d63f7)}
.knopf--klein{min-height:2.5rem;padding:.45em 1.15em;font-size:.875rem}
.knopf--breit{width:100%}
.knopf[disabled],.knopf[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.75rem}
.textlink{color:var(--akzent-hell);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;background:none;border:0;padding:0;cursor:pointer;font-weight:400}
.textlink:hover{text-decoration-thickness:2px}

/* Auswahl (Filter) */
.wahl{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.wahl__titel{font-size:.875rem;color:var(--leise);margin-right:.35rem}
.wahl button{min-height:2.4rem;padding:.35em 1.05em;border:1px solid var(--linie-hell);border-radius:999px;background:none;color:var(--text);font:400 .875rem/1.2 var(--sans);cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.wahl button:hover{border-color:var(--akzent)}
.wahl button[aria-pressed="true"]{background:var(--akzent-hell);border-color:var(--akzent-hell);color:#000;font-weight:500}

/* Bogen: die Form der Tore, auch für Bilder */
.bogen{position:relative;overflow:hidden;border-radius:999px 999px 0 0;background:var(--nacht-2);aspect-ratio:4/5;isolation:isolate}
.bogen img{width:100%;height:100%;object-fit:cover}
.bogen--kuppel{aspect-ratio:16/9;border-radius:50% 50% 0 0 / 100% 100% 0 0}
.bogen--hoch{aspect-ratio:3/4.4}
.bogen--leer{background:radial-gradient(ellipse 85% 60% at 50% 100%,var(--glut),transparent 72%),var(--nacht-2);display:grid;align-items:end;justify-items:center}
.bogen--leer::after{content:attr(data-bild);padding:0 1rem 1.1rem;font-size:.78rem;line-height:1.35;color:var(--leise);text-align:center;max-width:16rem}
.rahmen{padding:.6rem;border:1px solid var(--linie-hell);border-color:color-mix(in srgb,var(--akzent) 45%,transparent);border-radius:999px 999px 0 0}
.rahmen--kuppel{border-radius:50% 50% 0 0 / 100% 100% 0 0;border-bottom:0;padding-bottom:0}

/* Marke für den Bereich (Punkt + Wort) */
.bereich{display:inline-flex;align-items:center;gap:.45em;font-size:.82rem;font-weight:400;color:var(--leise)}
.bereich::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--gold)}
.bereich--tanz::before{background:var(--lila-glut)}
.bereich--yoga::before{background:var(--gold-hell)}

/* Hinweisband ganz oben (z. B. „Seite im Aufbau“) */
.band{background:var(--nacht-3);color:var(--text);font-size:.875rem;font-weight:400;text-align:center;padding:.55rem var(--rand);border-bottom:1px solid var(--linie)}

/* 04 Kopf und Navigation ------------------------------------------------------ */
.kopf{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s}
.kopf[data-fest]{background:rgba(0,0,0,.94);border-bottom-color:var(--linie)}
.kopf__innen{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;width:min(calc(100% - 2 * var(--rand)),82rem);margin-inline:auto;min-height:6.75rem;transition:min-height .3s}
.kopf[data-fest] .kopf__innen{min-height:4.5rem}
.kopf__marke{display:flex;align-items:center;gap:.9rem;text-decoration:none;flex:none}
.kopf__marke img{height:5.4rem;width:auto;transition:height .3s}
.kopf[data-fest] .kopf__marke img{height:3.5rem}
.kopf__by{font-family:var(--serif);font-size:1.05rem;line-height:1;color:var(--akzent-hell);padding-left:.9rem;border-left:1px solid var(--linie-hell);white-space:nowrap}
.kopf__by i{font-size:.85em;margin-right:.15em}
.kopf--start .kopf__marke{visibility:hidden}
.kopf--start[data-fest] .kopf__marke{visibility:visible}

.kopf__menue{display:none;align-items:center;gap:.7rem;min-height:2.75rem;padding:0 .25rem;border:0;background:none;color:var(--text);font:400 .95rem/1 var(--sans);cursor:pointer;position:relative;z-index:2}
.kopf__menue-icon{position:relative;width:1.6rem;height:.75rem}
.kopf__menue-icon::before,.kopf__menue-icon::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .25s,top .25s,bottom .25s}
.kopf__menue-icon::before{top:0}
.kopf__menue-icon::after{bottom:0}
.kopf[data-offen] .kopf__menue-icon::before{top:.36rem;transform:rotate(45deg)}
.kopf[data-offen] .kopf__menue-icon::after{bottom:.33rem;transform:rotate(-45deg)}

.nav{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem)}
.nav ul{display:flex;align-items:center;gap:clamp(1rem,2.1vw,2.1rem);list-style:none;margin:0;padding:0}
.nav a{position:relative;display:inline-block;padding:.5rem 0;font-size:.95rem;font-weight:400;text-decoration:none;color:var(--text)}
.nav li a::after{content:"";position:absolute;left:0;right:0;bottom:.2rem;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav li a:hover::after,.nav li a[aria-current]::after{transform:scaleX(1)}
.nav .nav__weg--tanz{color:var(--lila-hell)}
.nav .nav__weg--yoga{color:var(--gold-hell)}
.nav__trenner{width:1px;height:1.1rem;background:var(--linie-hell)}
.nav .nav__korb{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;border:1px solid var(--linie-hell);border-radius:999px;font-size:.875rem}
.nav__korb span{display:inline-grid;place-items:center;min-width:1.4rem;height:1.4rem;padding:0 .3rem;border-radius:999px;background:var(--gold-hell);color:#000;font-size:.78rem;font-weight:500}

@media (max-width:59.99rem){
  .kopf__innen{min-height:5rem}
  .kopf__marke img{height:3.9rem}
  .kopf__marke{position:relative;z-index:2}
  .kopf__menue{display:inline-flex}
  .nav{position:fixed;inset:0;z-index:1;flex-direction:column;justify-content:center;gap:2rem;padding:6rem var(--rand) 3rem;background:#000;overflow:auto;visibility:hidden;opacity:0;transition:opacity .25s,visibility .25s}
  .kopf[data-offen] .nav{visibility:visible;opacity:1}
  .nav ul{flex-direction:column;gap:1.1rem}
  .nav li a{font-family:var(--serif);font-size:2rem;line-height:1.2;padding:.15rem 0}
  .nav__trenner{width:3rem;height:1px}
}

/* Unternavigation der Portale */
.unternav{border-block:1px solid var(--linie)}
.unternav ul{display:flex;gap:clamp(1.1rem,3vw,2.5rem);list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.unternav ul::-webkit-scrollbar{display:none}
.unternav a{display:block;padding:.95rem 0;font-size:.9rem;font-weight:400;color:var(--leise);text-decoration:none;white-space:nowrap}
.unternav a:hover{color:var(--akzent-hell)}
body[data-bereich="yoga"] .unternav ul{justify-content:center}
@media (max-width:40rem){body[data-bereich="yoga"] .unternav ul{justify-content:flex-start}}

/* 05 Startseite mit den zwei Toren -------------------------------------------- */
/* Links das Tor zum Tanzen, rechts das Tor zum Yoga, dazwischen das Logo. */
.start{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:clamp(1rem,4vw,4.5rem);width:min(calc(100% - 2 * var(--rand)),74rem);margin-inline:auto;padding-block:clamp(.5rem,1.5vw,1.25rem) clamp(2.5rem,6vw,4.5rem);text-align:center}
.start__mitte{order:2;display:grid;justify-items:center;gap:clamp(1.1rem,2.6vw,2.2rem)}
.start__logo{width:100%;max-width:27rem}
.start__frage{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.3vw,1.8rem);color:var(--gold-hell)}
.tor{--tor-glut:var(--lila);--tor-hell:var(--lila-hell);order:1;position:relative;display:block;justify-self:center;width:min(100%,clamp(10.5rem,calc((100vh - 18rem) * .65),23rem));width:min(100%,clamp(10.5rem,calc((100svh - 18rem) * .65),23rem));text-decoration:none;color:var(--text);padding-bottom:clamp(2.5rem,6vw,5rem)}
.tor--yoga{--tor-glut:var(--gold);--tor-hell:var(--gold-hell);order:3}
.tor__rand{display:block;padding:clamp(.35rem,.8vw,.6rem);border:1px solid var(--tor-hell);border-color:color-mix(in srgb,var(--tor-hell) 50%,transparent);border-radius:999px 999px 0 0;transition:border-color .4s}
.tor__bogen{display:block;position:relative;aspect-ratio:3/4.6;border-radius:999px 999px 0 0;overflow:hidden;-webkit-clip-path:inset(0 round 999px 999px 0 0);clip-path:inset(0 round 999px 999px 0 0);background:#050308;perspective:60rem}
/* Das Licht hinter dem Tor. Sobald Fotos da sind: style="--foto:url(assets/bilder/tor-tanz.jpg)" am Tor setzen. */
.tor__licht{position:absolute;inset:0;background:
    var(--foto,linear-gradient(transparent,transparent)) center/cover no-repeat,
    repeating-radial-gradient(circle at 50% 47%,transparent 0 2.4rem,rgba(255,255,255,.06) 2.4rem calc(2.4rem + 1px)),
    radial-gradient(ellipse 80% 48% at 50% 47%,#f3eaff 0%,#c29bff 14%,#8a4de8 34%,#4a1f95 62%,#1c0c36 100%);
  transform:scale(1.02);transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .6s}
.tor--yoga .tor__licht{background:
    var(--foto,linear-gradient(transparent,transparent)) center/cover no-repeat,
    repeating-radial-gradient(circle at 50% 47%,transparent 0 2.4rem,rgba(255,255,255,.07) 2.4rem calc(2.4rem + 1px)),
    radial-gradient(ellipse 80% 48% at 50% 47%,#fffaf2 0%,#fbe3d1 14%,#e0a985 34%,#96603f 62%,#2e1a0f 100%)}
.tor__fluegel{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(90deg,#07040b,#150b21 60%,#0c0613);transition:transform .9s cubic-bezier(.2,.7,.2,1);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.tor__fluegel--l{left:0;transform-origin:left center;transform:rotateY(-44deg);border-right:1px solid var(--tor-hell)}
.tor__fluegel--r{right:0;transform-origin:right center;transform:rotateY(44deg);border-left:1px solid var(--tor-hell);background:linear-gradient(270deg,#07040b,#150b21 60%,#0c0613)}
.tor__schatten{position:absolute;inset:auto 0 0 0;height:44%;background:linear-gradient(to top,rgba(0,0,0,.92) 10%,rgba(0,0,0,.62) 50%,transparent);pointer-events:none}
.tor__text{position:absolute;left:0;right:0;bottom:clamp(2.5rem,6vw,5rem);padding:0 .75rem clamp(1rem,2.4vw,2rem);display:grid;justify-items:center;gap:.3rem}
.tor__name{font-family:var(--serif);font-size:clamp(1.9rem,4.2vw,3.4rem);line-height:1;color:#fff;text-shadow:0 .1rem 1.2rem rgba(0,0,0,.65)}
.tor--tanz .tor__name{font-style:italic}
.tor__by{font-family:var(--serif);font-size:clamp(.9rem,1.5vw,1.15rem);color:var(--tor-hell)}
.tor__by i{font-size:.85em}
.tor__zeile{font-size:clamp(.78rem,1.2vw,.95rem);font-weight:400;color:var(--text);max-width:14rem;line-height:1.4;margin-top:.3rem}
.tor__schein{position:absolute;left:50%;bottom:0;width:135%;height:clamp(2.5rem,6vw,5rem);transform:translateX(-50%);background:linear-gradient(to bottom,var(--tor-glut),transparent 88%);clip-path:polygon(33% 0,67% 0,100% 100%,0 100%);opacity:.38;filter:blur(7px);transition:opacity .6s;pointer-events:none}
.tor:hover .tor__fluegel--l,.tor:focus-visible .tor__fluegel--l,.tor[data-geht] .tor__fluegel--l{transform:rotateY(-80deg)}
.tor:hover .tor__fluegel--r,.tor:focus-visible .tor__fluegel--r,.tor[data-geht] .tor__fluegel--r{transform:rotateY(80deg)}
.tor:hover .tor__licht,.tor:focus-visible .tor__licht,.tor[data-geht] .tor__licht{transform:scale(1.08);filter:brightness(1.1)}
.tor:hover .tor__schein,.tor:focus-visible .tor__schein,.tor[data-geht] .tor__schein{opacity:.7}
.tor:hover .tor__rand,.tor:focus-visible .tor__rand{border-color:var(--tor-hell)}
.tor:focus-visible{outline:none}
.tor:focus-visible .tor__rand{outline:2px solid var(--gold-hell);outline-offset:4px}
/* ein einziger inszenierter Moment: die Tore gehen beim Laden auf */
@keyframes tor-auf{from{transform:rotateY(0)}}
@keyframes tor-kommt{from{opacity:0;transform:translateY(1.25rem)}}
.tor{animation:tor-kommt .9s cubic-bezier(.2,.7,.2,1) both}
.tor--yoga{animation-delay:.14s}
.tor__fluegel{animation:tor-auf 1.6s .45s cubic-bezier(.2,.7,.2,1) backwards}
.tor--yoga .tor__fluegel{animation-delay:.62s}
@media (max-width:46rem){
  .start{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem clamp(.9rem,4vw,2rem)}
  .start__mitte{grid-column:1 / -1;order:0}
  .start__logo{max-width:17.5rem}
  .tor{width:100%;max-width:15rem}
}

/* 06 Bühne der Portale -------------------------------------------------------- */
.buehne{position:relative;isolation:isolate;padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,6rem);overflow-x:clip}
.buehne::before{content:"";position:absolute;z-index:-1;top:-18rem;right:-12rem;width:min(60rem,95vw);aspect-ratio:1;background:radial-gradient(closest-side,var(--glut),transparent 72%);pointer-events:none}
/* Das Licht gehört zu den Portalen. Neutrale Seiten bleiben schwarz, außer man kommt aus einem Portal (…?bereich=tanz). */
body[data-bereich="neutral"] .buehne::before{display:none}
.buehne__raster{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.buehne__text p{font-size:clamp(1.1rem,1.6vw,1.25rem);max-width:33rem;margin-top:1.5rem}
.buehne__text .knopfreihe{margin-top:2rem}
.buehne__bild{max-width:27rem;justify-self:end;width:100%}
.buehne--mitte{text-align:center}
.buehne--mitte::before{top:-22rem;right:auto;left:50%;transform:translateX(-50%)}
.buehne--mitte .buehne__logo{width:clamp(16rem,30vw,23.5rem);margin:0 auto clamp(1.5rem,3vw,2.5rem)}
.buehne--mitte .buehne__text p{margin-inline:auto;max-width:36rem}
.buehne--mitte .knopfreihe{justify-content:center}
.buehne--mitte .buehne__kuppel{margin-top:clamp(2.5rem,6vw,4.5rem);max-width:60rem;margin-inline:auto}
.buehne--klein{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,3vw,2.5rem)}
.buehne--klein h1{font-size:clamp(2.5rem,5.5vw,4.25rem)}
.buehne--klein p{font-size:1.15rem;color:var(--leise);max-width:40rem;margin-top:1.1rem}
@media (max-width:52rem){
  .buehne__raster{grid-template-columns:1fr}
  .buehne__bild{justify-self:center;max-width:20rem}
}

/* 07 Abschnitte ---------------------------------------------------------------- */
.abschnitt{padding-block:clamp(3.75rem,8.5vw,8rem)}
.abschnitt--eng{padding-block:clamp(2.5rem,5vw,4.5rem)}
.abschnitt--linie{border-top:1px solid var(--linie)}
.abschnitt--flaeche{background:var(--nacht)}
.abschnitt__kopf{display:grid;gap:1rem;max-width:42rem;margin-bottom:clamp(2rem,4.5vw,3.5rem)}
.abschnitt__kopf p{color:var(--leise);font-size:1.125rem;margin:0}
.abschnitt__fuss{margin-top:clamp(1.75rem,3vw,2.5rem)}
body[data-bereich="yoga"] .abschnitt__kopf{margin-inline:auto;text-align:center;justify-items:center}
body[data-bereich="yoga"] .abschnitt__kopf .ornament{margin:.2rem auto}
body[data-bereich="yoga"] .abschnitt__fuss{text-align:center}
body[data-bereich="yoga"] .abschnitt__fuss .knopfreihe{justify-content:center}

/* Die vier Worte aus dem Logo */
.werte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border-top:1px solid var(--linie)}
.werte > div{padding:1.75rem 1.75rem .25rem 0}
.werte > div + div{padding-left:1.75rem;border-left:1px solid var(--linie)}
.werte dt{font-family:var(--serif);font-size:1.7rem;line-height:1.1;color:var(--akzent-hell)}
body[data-bereich="tanz"] .werte dt{font-style:italic}
.werte dd{margin:.6rem 0 0;color:var(--leise);font-size:.98rem}
@media (max-width:56rem){
  .werte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .werte > div:nth-child(3){padding-left:0;border-left:0}
  .werte > div:nth-child(n+3){border-top:1px solid var(--linie)}
}
@media (max-width:34rem){
  .werte{grid-template-columns:1fr}
  .werte > div + div{padding-left:0;border-left:0;border-top:1px solid var(--linie)}
}

/* Zwei Spalten Text und Bild */
.duo{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,5.5rem);align-items:center}
.duo--umgekehrt{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.duo__bild{max-width:23rem;width:100%}
.duo__text > * + *{margin-top:1.1rem}
.duo__text p{color:var(--leise)}
.duo__text .knopfreihe{margin-top:1.75rem}
@media (max-width:52rem){
  .duo,.duo--umgekehrt{grid-template-columns:1fr}
  .duo__bild{margin-inline:auto;max-width:18rem}
}

/* Zwei gleichwertige Textblöcke mit Trennlinie */
.zweier{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,6vw,6rem)}
.zweier > div{display:grid;gap:1rem;align-content:start;justify-items:start}
.zweier > div + div{padding-left:clamp(2rem,6vw,6rem);border-left:1px solid var(--linie)}
.zweier p{color:var(--leise);max-width:26rem;margin:0 0 .5rem}
@media (max-width:48rem){
  .zweier{grid-template-columns:1fr}
  .zweier > div + div{padding-left:0;border-left:0;padding-top:2.5rem;border-top:1px solid var(--linie)}
}

.weg-tanz{color:var(--lila-hell);font-style:italic}
.weg-yoga{color:var(--gold-hell);font-style:normal}
.tarif-titel{margin-bottom:1.25rem}
.tarif-titel__by{font-size:.42em;margin-left:.5em;white-space:nowrap}
.tarif-titel__by i{font-size:.85em}
.spalten{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(2rem,6vw,5.5rem);align-items:start}
.spalten h2{font-size:clamp(1.7rem,3vw,2.2rem);margin-bottom:1.25rem}
.angaben dl{margin:0}
.angaben dt{font-size:.85rem;color:var(--leise);margin-top:1.1rem}
.angaben dt:first-child{margin-top:0}
.angaben dd{margin:.1rem 0 0;font-weight:400}
.angaben .formular__hinweis{margin-top:1.5rem}
@media (max-width:52rem){.spalten{grid-template-columns:1fr}}
.fragen{border-top:1px solid var(--linie)}
.fragen details{border-bottom:1px solid var(--linie)}
.fragen summary{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.15rem 0;font-family:var(--serif);font-size:1.3rem;line-height:1.3;cursor:pointer;list-style:none}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";font-family:var(--sans);font-weight:300;font-size:1.5rem;line-height:1;color:var(--gold-hell)}
.fragen details[open] summary::after{content:"\2013"}
.fragen details p{color:var(--leise);padding-bottom:1.25rem;max-width:38rem}

/* Arkade: drei Bögen nebeneinander */
.arkade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.75rem,2vw,1.5rem);align-items:end}
.arkade figure{margin:0}
.arkade figure:nth-child(2) .bogen{aspect-ratio:4/5.8}
.arkade figcaption{margin-top:.7rem;font-size:.9rem;color:var(--leise)}
@media (max-width:34rem){.arkade figcaption{font-size:.78rem}}

/* Angebotsliste (Yoga) und Schritte */
.liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.liste > li{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr) auto;gap:.5rem 2rem;align-items:baseline;padding:1.35rem 0;border-bottom:1px solid var(--linie)}
.liste h3{font-size:1.5rem}
.liste p{color:var(--leise);margin:0}
@media (max-width:52rem){.liste > li{grid-template-columns:1fr}}
.schritte{list-style:none;counter-reset:schritt;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.5rem)}
.schritte li{counter-increment:schritt;padding-top:1.1rem;border-top:1px solid var(--linie-hell)}
.schritte li::before{content:counter(schritt);display:block;font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--akzent-hell);margin-bottom:.6rem}
.schritte h3{font-size:1.3rem;margin-bottom:.4rem}
.schritte p{color:var(--leise);font-size:.98rem}
@media (max-width:44rem){.schritte{grid-template-columns:1fr}}

.unterschrift{font-size:1.9rem;color:var(--gold-hell);letter-spacing:.2em;margin-top:1.5rem!important}
body[data-bereich="yoga"] .liste h3{color:var(--gold-hell)}
body[data-bereich="yoga"] .formular{text-align:left}

/* Stimmen und Team (noch leer) */
.leerreihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,2rem)}
@media (max-width:48rem){.leerreihe{grid-template-columns:1fr}}
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr));gap:clamp(1.25rem,3vw,2.5rem)}
.team figure{margin:0}
.team .bogen{aspect-ratio:1/1.15}
.team figcaption{margin-top:.8rem}
.team figcaption strong{display:block;font-family:var(--serif);font-weight:400;font-size:1.3rem}
.team figcaption span{font-size:.9rem;color:var(--leise)}

/* 08 Kurse, Kursplan ----------------------------------------------------------- */
.programm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,4vw,3.5rem)}
.programm__gruppe > h3{font-size:1.15rem;padding-bottom:.7rem;border-bottom:1px solid var(--akzent);color:var(--akzent-hell)}
.kurs{padding:1.3rem 0;border-bottom:1px solid var(--linie)}
.kurs h4{font-size:1.5rem}
body[data-bereich="tanz"] .kurs h4{font-style:italic}
.kurs__meta{font-size:.85rem;font-weight:400;color:var(--akzent-hell);margin:.25rem 0 0}
.kurs p{color:var(--leise);font-size:.98rem;margin:.5rem 0 .65rem}
@media (max-width:52rem){.programm{grid-template-columns:1fr}}

.plan__leiste{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;margin-bottom:1.5rem}
body[data-bereich="yoga"] .plan__leiste{justify-content:center}
.plan__legende{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;list-style:none;margin:0;padding:0;font-size:.85rem;color:var(--leise);align-items:center}
.plan__tag{display:grid;grid-template-columns:10.5rem minmax(0,1fr);gap:1rem 2rem;padding:1.5rem 0;border-top:1px solid var(--linie)}
.plan__tag:last-child{border-bottom:1px solid var(--linie)}
.plan__tagname{font-size:1.45rem;color:var(--akzent-hell)}
.plan__raeume{display:grid;grid-template-columns:repeat(var(--spalten,2),minmax(0,1fr));gap:1.25rem 2.5rem}
.plan__raum > h4{font-family:var(--sans);font-size:.8rem;font-weight:400;color:var(--leise);margin-bottom:.5rem}
.plan__raum ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.plan__eintrag{display:grid;grid-template-columns:6.4rem minmax(0,1fr);gap:.75rem;align-items:baseline}
.plan__zeit{font-variant-numeric:tabular-nums;font-weight:400;font-size:.95rem;white-space:nowrap}
.plan__kurs{font-weight:400}
.plan__meta{display:block;font-size:.85rem;font-weight:300;color:var(--leise)}
.marke{display:inline-block;margin-left:.45rem;padding:.05rem .55rem;border:1px solid var(--linie-hell);border-radius:999px;font-size:.72rem;font-weight:400;color:var(--leise);vertical-align:.1em;white-space:nowrap}
.marke--neu{border-color:var(--gold);color:var(--gold-hell)}
.marke--anmeldung{border-color:var(--lila-glut);color:var(--lila-hell)}
.leerstand{padding:1.75rem 0;border-block:1px solid var(--linie);color:var(--leise)}
@media (max-width:44rem){
  .plan__tag{grid-template-columns:1fr}
  .plan__raeume{grid-template-columns:1fr}
}

/* 09 Termine, Kalender ---------------------------------------------------------- */
.termine{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.termin{display:grid;grid-template-columns:5.25rem minmax(0,1fr) auto;gap:.75rem clamp(1rem,3vw,2.25rem);align-items:center;padding:1.3rem 0;border-bottom:1px solid var(--linie);text-align:left}
.termin__datum{display:grid;justify-items:center;line-height:1;padding-right:clamp(.75rem,2vw,1.5rem);border-right:1px solid var(--linie)}
.termin__tag{font-family:var(--serif);font-size:2.5rem;color:var(--gold-hell)}
.termin__monat{font-size:.95rem;margin-top:.3rem;color:var(--text)}
.termin__wt{font-size:.75rem;color:var(--leise);margin-top:.35rem}
.termin__titel{font-family:var(--serif);font-size:1.45rem;line-height:1.2;margin:.15rem 0 .2rem}
.termin__meta{font-size:.9rem;color:var(--leise);margin:0}
.termin__meta span + span::before{content:"|";margin:0 .6em;color:var(--linie-hell)}
@media (max-width:40rem){
  .termin{grid-template-columns:4.25rem minmax(0,1fr)}
  .termin__aktion{grid-column:2}
  .termin__tag{font-size:2rem}
}

.kal__leiste{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-bottom:1.5rem}
.kal__monat{display:flex;align-items:center;gap:.5rem}
.kal__monat h2{font-size:clamp(1.6rem,3vw,2.2rem);min-width:12.5rem;text-align:center;font-style:normal}
.kal__pfeil{display:grid;place-items:center;width:2.75rem;height:2.75rem;border:1px solid var(--linie-hell);border-radius:50%;background:none;color:var(--text);cursor:pointer;transition:border-color .2s}
.kal__pfeil:hover{border-color:var(--akzent)}
.kal__pfeil svg{width:1rem;height:1rem}
.kal__raster{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--linie);border-left:1px solid var(--linie)}
.kal__wt{padding:.6rem .5rem;font-size:.95rem;text-align:center;color:var(--leise);border-right:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.kal__zelle{min-height:7.25rem;padding:.45rem;border-right:1px solid var(--linie);border-bottom:1px solid var(--linie);display:flex;flex-direction:column;gap:.25rem;min-width:0}
.kal__zelle--aus{background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(255,255,255,.022) 7px 8px)}
.kal__zelle--aus .kal__nr{color:var(--linie-hell)}
.kal__nr{font-size:.85rem;font-weight:400;font-variant-numeric:tabular-nums;width:1.75rem;height:1.75rem;display:grid;place-items:center;border-radius:50%}
.kal__zelle--heute .kal__nr{background:var(--gold-hell);color:#000;font-weight:500}
.kal__ereignis{display:block;width:100%;padding:.22rem .45rem;border:0;border-left:2px solid var(--gold);background:var(--nacht-2);color:var(--text);font:400 .78rem/1.3 var(--sans);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.kal__ereignis:hover{background:var(--nacht-3)}
.kal__ereignis--tanz{border-left-color:var(--lila-glut)}
.kal__ereignis--yoga{border-left-color:var(--gold-hell)}
.kal__punkte{display:none;gap:.2rem;flex-wrap:wrap}
.kal__punkte i{width:.42rem;height:.42rem;border-radius:50%;background:var(--gold)}
.kal__punkte i.tanz{background:var(--lila-glut)}
.kal__punkte i.yoga{background:var(--gold-hell)}
.kal__tagwahl{display:none}
.kal__liste{margin-top:clamp(2rem,4vw,3rem)}
.kal__liste h3{margin-bottom:1rem}
@media (max-width:46rem){
  .kal__zelle{min-height:3.6rem;padding:.25rem;align-items:center}
  .kal__ereignis{display:none}
  .kal__punkte{display:flex;justify-content:center}
  .kal__wt{font-size:.8rem;padding:.45rem .1rem}
  .kal__monat h2{min-width:9.5rem}
  .kal__tagwahl{display:block;position:absolute;inset:0;border:0;background:none;cursor:pointer}
  .kal__zelle{position:relative}
  .kal__zelle[data-gewaehlt]{background:var(--nacht-3)}
}

/* 10 Preise, Shop, Warenkorb ----------------------------------------------------- */
.tarife{border-top:1px solid var(--linie)}
.tarife__gruppe{padding:1.1rem 0 .5rem;font-size:1.15rem;color:var(--akzent-hell);border-bottom:1px solid var(--akzent)}
.tarif{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.6rem clamp(1rem,3vw,2.5rem);align-items:center;padding:1.3rem 0;border-bottom:1px solid var(--linie)}
.tarif__name{font-family:var(--serif);font-size:1.5rem;line-height:1.2}
.tarif__details{margin:.3rem 0 0;font-size:.95rem;color:var(--leise)}
.tarif__preis{text-align:right;white-space:nowrap}
.tarif__preis strong{font-family:var(--serif);font-weight:400;font-size:1.75rem;color:var(--gold-hell)}
.tarif__preis span{display:block;font-size:.82rem;color:var(--leise)}
@media (max-width:40rem){
  .tarif{grid-template-columns:minmax(0,1fr) auto}
  .tarif__aktion{grid-column:1 / -1}
}

.waren{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(14rem,46%),1fr));gap:clamp(1.5rem,3.5vw,3rem) clamp(1rem,2.5vw,2rem)}
.ware{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;align-content:start;min-width:0}
.ware .bogen{aspect-ratio:1/1.12}
.ware__name{font-family:var(--serif);font-size:1.35rem;line-height:1.2;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
.ware__zeile{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.2rem 1rem}
.ware__preis{font-weight:400;color:var(--gold-hell);white-space:nowrap}
.ware__text{font-size:.92rem;color:var(--leise);margin:0}
.ware select{width:100%}
.korb{border:1px solid var(--linie-hell);padding:clamp(1.25rem,3vw,2rem);background:var(--nacht)}
.korb__zeile{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.5rem 1rem;align-items:center;padding:.9rem 0;border-bottom:1px solid var(--linie)}
.korb__name{font-weight:400}
.korb__name small{display:block;color:var(--leise);font-weight:300;font-size:.85rem}
.korb__menge{display:inline-flex;align-items:center;border:1px solid var(--linie-hell);border-radius:999px}
.korb__menge button{width:2.25rem;height:2.25rem;border:0;background:none;color:var(--text);font-size:1.1rem;cursor:pointer;border-radius:50%}
.korb__menge output{min-width:1.5rem;text-align:center;font-variant-numeric:tabular-nums;font-weight:400}
.korb__summe{display:grid;grid-template-columns:1fr auto;gap:.35rem 1rem;margin:1.1rem 0 0;font-variant-numeric:tabular-nums}
.korb__summe dt{color:var(--leise)}
.korb__summe dd{margin:0;text-align:right}
.korb__summe .gesamt{font-family:var(--serif);font-size:1.5rem;color:var(--gold-hell);padding-top:.5rem;border-top:1px solid var(--linie-hell);margin-top:.4rem}
.kasse{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
@media (max-width:56rem){.kasse{grid-template-columns:1fr}}

/* 11 Formulare, Dialog ----------------------------------------------------------- */
.formular{display:grid;gap:1.25rem}
.felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1.5rem}
.feld{display:grid;gap:.4rem;align-content:start}
.feld--ganz{grid-column:1 / -1}
.feld > label,.feld > .feld__titel{font-size:.9rem;font-weight:400}
.feld small{font-size:.82rem;color:var(--leise)}
.feld :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){width:100%;min-height:3rem;padding:.65rem .85rem;border:1px solid var(--linie-hell);border-radius:0;background-color:var(--nacht);color:var(--text);transition:border-color .2s,background-color .2s}
.feld textarea{min-height:7.5rem;resize:vertical}
.feld :is(input,select,textarea):focus{outline:none;border-color:var(--gold-hell);background-color:var(--nacht-2)}
.feld :is(input,select,textarea)::placeholder{color:#8a7f88}
.feld select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f4d6c1' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;background-size:.75rem;padding-right:2.5rem}
.feld select:not([multiple]):not([size]){padding-right:2.75rem;text-overflow:ellipsis}
.feld select option{background:#150c20;color:#f6efe9}
input[type="date"]{color-scheme:dark}
.haken{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;align-items:start;font-size:.92rem}
.haken input{width:1.2rem;height:1.2rem;margin-top:.22rem;accent-color:var(--gold-hell)}
.radios{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem}
.radios label{display:inline-flex;align-items:center;gap:.5rem;font-weight:300}
.radios input{width:1.1rem;height:1.1rem;accent-color:var(--gold-hell)}
.formular__falle{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.formular__hinweis{font-size:.85rem;color:var(--leise)}
.meldung{padding:1.1rem 1.25rem;border:1px solid var(--linie-hell);background:var(--nacht);font-weight:400}
.meldung--gut{border-color:var(--gut)}
.meldung--fehler{border-color:var(--fehler)}
.meldung h3{font-size:1.4rem;margin-bottom:.4rem;font-style:normal}
.meldung pre{white-space:pre-wrap;font:300 .85rem/1.5 var(--sans);color:var(--leise);margin:.75rem 0;max-height:16rem;overflow:auto}
.pflicht{color:var(--gold-hell)}
@media (max-width:40rem){.felder{grid-template-columns:1fr}}

dialog{width:min(calc(100% - 1.5rem),44rem);max-height:calc(100dvh - 2rem);padding:0;border:1px solid var(--linie-hell);background:var(--nacht);color:var(--text);overflow:auto}
dialog::backdrop{background:rgba(0,0,0,.78)}
.dialog__innen{padding:clamp(1.25rem,4vw,2.5rem);display:grid;gap:1.1rem}
.dialog__zu{position:sticky;top:.75rem;display:block;margin:.75rem .75rem -3.35rem auto;width:2.6rem;height:2.6rem;border:1px solid var(--linie-hell);border-radius:50%;background:var(--nacht);color:var(--text);font-size:1.3rem;line-height:1;cursor:pointer;z-index:2}
.dialog__zu:hover{border-color:var(--gold-hell)}
.dialog h2{font-size:clamp(1.7rem,3.5vw,2.3rem);font-style:normal;padding-right:3rem}
.fakten{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.3rem 1.25rem;margin:0;font-size:.98rem}
.fakten dt{color:var(--leise)}
.fakten dd{margin:0;font-weight:400}

/* 12 Textseiten (Recht) ---------------------------------------------------------- */
.text{max-width:46rem}
.text h2{font-size:1.75rem;margin:2.75rem 0 .8rem;font-style:normal}
.text h3{font-size:1.3rem;margin:1.75rem 0 .5rem}
.text p,.text li{color:#ddd3d9}
.text a{color:var(--gold-hell);text-underline-offset:.2em}
.text ul,.text ol{margin:0 0 1em}
.text li + li{margin-top:.3em}
.text address{font-style:normal;margin-bottom:1em;color:#ddd3d9}
.entwurf{border:1px dashed var(--lila-hell);padding:1rem 1.25rem;margin-bottom:2rem;font-size:.95rem;font-weight:400;max-width:46rem}
.entwurf strong{color:var(--lila-hell)}

/* 13 Fuß ---------------------------------------------------------------------------- */
.fuss{border-top:1px solid var(--linie);padding-block:clamp(3rem,6vw,5rem) 2rem;font-size:.95rem}
.fuss__raster{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:2.5rem clamp(1.5rem,4vw,4rem)}
.fuss__marke img{width:15rem}
.fuss h2{font-family:var(--sans);font-size:.9rem;font-weight:500;font-style:normal!important;letter-spacing:0;margin-bottom:.9rem;color:var(--gold-hell)}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.fuss a{text-decoration:none;color:var(--text)}
.fuss a:hover{color:var(--gold-hell);text-decoration:underline;text-underline-offset:.2em}
.fuss address{font-style:normal;color:var(--leise);line-height:1.7}
.fuss__vertrag{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.75rem;padding-top:1.75rem;border-top:1px solid var(--linie)}
.fuss__vertrag .knopf{color:var(--text);border-color:var(--linie-hell)}
.fuss__vertrag .knopf:hover{border-color:var(--gold-hell);text-decoration:none}
.fuss__recht{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem;margin-top:1.75rem;color:var(--leise);font-size:.875rem}
.fuss__recht ul{display:flex;flex-wrap:wrap;gap:.3rem 0}
.fuss__recht li + li::before{content:"|";margin:0 .75rem;color:var(--linie-hell)}
.fuss__recht a{color:var(--leise)}
@media (max-width:56rem){
  .fuss__raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fuss__marke{grid-column:1 / -1}
}
@media (max-width:30rem){.fuss__raster{grid-template-columns:1fr}}

/* Landingpage vor der Eröffnung ---------------------------------------------- */
.band a{color:inherit;text-underline-offset:.2em}
.nw{white-space:nowrap}
.band__t{margin:0 .6em;opacity:.5}
@media (max-width:38rem){.band__t{display:none}.band .nw{display:block}}
.nav .knopf{display:inline-flex;padding:.45em 1.15em;font-size:.875rem;font-weight:500;color:var(--akzent-hell)}
@media (max-width:59.99rem){.nav .knopf{font-size:1rem;padding:.7em 1.6em}}
.buehne--mitte h1{font-size:clamp(2.05rem,4.6vw,3.9rem);line-height:1.12;max-width:32ch;margin-inline:auto}
.termin--fest{grid-template-columns:auto minmax(0,1fr) auto}
.termin--fest .termin__datum{min-width:5.25rem}
.termin--fest .termin__meta{font-size:1rem;max-width:36rem}
@media (max-width:40rem){.termin--fest{grid-template-columns:auto minmax(0,1fr)}}
.erreichbar{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.45rem 1.5rem;align-items:baseline}
.erreichbar dt{font-size:.9rem;color:var(--leise)}
.erreichbar dd{margin:0;font-weight:400}
.erreichbar a{text-decoration:none;color:var(--text);border-bottom:1px solid var(--linie-hell)}
.erreichbar a:hover{color:var(--akzent-hell);border-bottom-color:currentColor}
@media (max-width:26rem){.erreichbar{grid-template-columns:1fr;gap:0}.erreichbar dd{margin-bottom:.7rem}}
.auswahl{border:0;margin:0;padding:0;min-width:0}
.auswahl legend{padding:0;margin-bottom:.6rem;font-size:.9rem;font-weight:400}
.auswahl__liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem 1.5rem}
.auswahl__liste label{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;align-items:start;font-size:.95rem}
.auswahl__liste input{width:1.15rem;height:1.15rem;margin-top:.22rem;accent-color:var(--gold-hell)}
@media (max-width:34rem){.auswahl__liste{grid-template-columns:1fr}}
.bogen--zeichen{align-items:center}
.bogen--zeichen img{width:80%;height:auto;object-fit:contain;margin-top:-8%}
.person{font-size:1.9rem;color:var(--akzent-hell);letter-spacing:.2em;margin-top:1.5rem!important}

/* 14 Bewegung, Druck ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{
  body{background:#fff;color:#000}
  .kopf,.fuss,.band,.unternav,.knopf,dialog{display:none!important}
  .text p,.text li,.text address{color:#000}
}