/* STUDIO KLARA — Darstellung.
   Animiert werden ausschliesslich transform, opacity und clip-path.
   clip-path steht ausdruecklich dabei, weil das Formprinzip der Seite eine
   Kante ist, die etwas freigibt: mit height 0 auf auto waere das ein
   Layout-Shift, mit clip-path ist es keiner. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  background:var(--tinte);
  color-scheme:dark;
  -webkit-text-size-adjust:100%;
}
body{
  background:var(--tinte);
  color:var(--papier);
  font-family:var(--schrift-text);
  font-size:var(--t-m);
  line-height:var(--zeile-text);
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--ton);color:var(--papier)}

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

.bahn{width:100%;max-width:96rem;margin-inline:auto;padding-inline:var(--rand)}
.nur-fuer-lesegeraete{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.springmarke{
  position:absolute;left:var(--rand);top:-4rem;z-index:100;
  background:var(--papier);color:var(--tinte);
  padding:.7rem 1.1rem;font-size:var(--t-s);font-weight:600;
  transition:top var(--d-fast) var(--e-aus);
}
.springmarke:focus{top:.75rem}

/* ---------- Schrift ---------- */
.display{
  font-family:var(--schrift-display);
  font-optical-sizing:auto;
  line-height:var(--zeile-eng);
  letter-spacing:-.015em;
  font-weight:380;
}
.marke{
  font-family:var(--schrift-display);
  font-weight:600;
  font-size:var(--t-s);
  letter-spacing:.24em;
  text-transform:uppercase;
}
.zaehler{
  font-size:var(--t-xs);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--rauch);
  font-weight:500;
}
.fliess{max-width:68ch;color:var(--rauch)}
.fliess strong{color:var(--papier);font-weight:500}

/* ---------- Knoepfe ---------- */
.knopf{
  --knopf-grund:var(--ton);
  /* Dunkle Schrift auf dem Akzent, nicht weisse: weiss auf #C4623F liegt bei
     3,54:1 und faellt damit unter 4,5:1. Den Ton so weit abzudunkeln, dass
     weiss passt, waere der falsche Weg gewesen - dann faellt der Ton als
     TEXTfarbe auf dem dunklen Grund durch (gemessen 3,05 bis 3,83:1).
     So: 4,60:1 im Ruhezustand, 5,35:1 beim Ueberfahren. */
  --knopf-schrift:var(--tinte);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:44px;padding:.95em 1.7em;
  background:var(--knopf-grund);color:var(--knopf-schrift);
  border:0;border-radius:2px;cursor:pointer;
  font-family:inherit;font-size:var(--t-s);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  transition:transform var(--d-instant) var(--e-aus),
             background-color var(--d-fast) var(--e-aus),
             color var(--d-fast) var(--e-aus);
}
.knopf--klar{
  --knopf-grund:transparent;
  --knopf-schrift:var(--papier);
  box-shadow:inset 0 0 0 var(--strich) var(--kante);
  transition:transform var(--d-instant) var(--e-aus),
             box-shadow var(--d-fast) var(--e-aus),
             color var(--d-fast) var(--e-aus);
}
@media (hover:hover) and (pointer:fine){
  .knopf:hover{background:#D06E48}
  .knopf--klar:hover{background:transparent;box-shadow:inset 0 0 0 var(--strich) var(--papier)}
}
.knopf--klar{--knopf-schrift:var(--papier)}
.knopf:active{transform:scale(.975)}

/* ---------- Kopfzeile ---------- */
.kopf{
  position:fixed;inset:0 0 auto 0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:var(--r-2);
  padding:var(--r-2) var(--rand);
  background:color-mix(in srgb,var(--tinte) 82%,transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:var(--strich) solid transparent;
  transition:border-color var(--d-base) var(--e-aus),
             transform var(--d-base) var(--e-beides);
}
.kopf[data-gescrollt="ja"]{border-bottom-color:var(--kante)}
.kopf__marke{text-decoration:none;display:inline-flex;align-items:baseline;gap:.5em}
.kopf__marke span:last-child{color:var(--rauch);font-weight:400;letter-spacing:.18em}
.kopf__rechts{display:flex;align-items:center;gap:var(--r-2)}
.kopf__tel{
  font-size:var(--t-s);color:var(--rauch);text-decoration:none;
  min-height:44px;display:inline-flex;align-items:center;
  transition:color var(--d-fast) var(--e-aus);
}
@media (hover:hover) and (pointer:fine){.kopf__tel:hover{color:var(--papier)}}
@media (max-width:44rem){
  .kopf__tel{display:none}
  .kopf__marke span:last-child{display:none}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  padding:calc(var(--r-6) + 2rem) 0 var(--r-4);
  overflow:clip;
}
.hero__bild{
  position:absolute;inset:0;z-index:0;
  opacity:.34;
}
.hero__bild img{width:100%;height:100%;object-fit:cover;object-position:62% 35%}
.hero__schleier{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,var(--tinte) 0%,transparent 34%,transparent 52%,var(--tinte) 96%),
    linear-gradient(90deg,var(--tinte) 4%,transparent 62%);
}
.hero__inhalt{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center}

/* Der Signature-Moment: die Wortmarke liegt doppelt uebereinander.
   Die untere Lage steht auf hoher Strichstaerke, die obere auf niedriger.
   --schnitt (0 bis 1) legt fest, wie weit die Kante durchgewandert ist. */
.schnitt{position:relative;display:block;--schnitt:0;--schere:0px}
.schnitt__lage{display:block;margin:0}
.schnitt__lage--dick{
  position:absolute;inset:0;
  font-variation-settings:"wght" 760,"opsz" 144;
  clip-path:inset(0 0 calc((1 - var(--schnitt)) * 100%) 0);
  transform:translate3d(0,calc(var(--schere) * -1),0);
}
.schnitt__lage--duenn{
  font-variation-settings:"wght" 260,"opsz" 144;
  clip-path:inset(calc(var(--schnitt) * 100%) 0 0 0);
  transform:translate3d(0,var(--schere),0);
}
.schnitt__wort{
  font-size:var(--t-mega);
  line-height:.92;
  letter-spacing:-.03em;
  text-transform:uppercase;
  white-space:nowrap;
}

.hero__zeile{
  margin-top:var(--r-3);
  max-width:34ch;
  font-size:var(--t-l);
  line-height:var(--zeile-mittel);
  color:var(--papier);
  font-family:var(--schrift-display);
  font-weight:340;
}
.hero__tun{display:flex;flex-wrap:wrap;gap:var(--r-2);margin-top:var(--r-3)}
.hero__fuss{
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;gap:var(--r-1) var(--r-3);
  align-items:baseline;
  padding-top:var(--r-3);
  color:var(--rauch);font-size:var(--t-s);
}

/* DIE KANTE, dreimal als echte Linie.
   Vorher war das EIN wanderndes Element: position:fixed, ein 1x1-Kaestchen, per
   transform auf Laenge UND Dicke gebracht. Zwei Fehler daran, beide sichtbar:
   es schwebte ueber dem Text und verdeckte ihn, und ein auf 2px hochskaliertes
   1px-Kaestchen wird weich statt scharf.
   Jetzt drei Linien mit echten Massen, jede an ihrem Platz im Fluss, und jede
   skaliert NUR in ihrer langen Achse. Die 2px bleiben unskaliert und damit
   pixelscharf. Verdecken kann keine davon etwas. */
.strich{display:block;background:var(--ton);pointer-events:none}
.strich--senkrecht{
  /* am TEXTrand, nicht am Bildschirmrand: .bahn traegt die Aussenmarge als
     padding, left:0 waere sonst die nackte Fensterkante gewesen. */
  position:absolute;left:var(--rand);top:0;bottom:0;width:2px;
  transform:scaleY(var(--zug,0));transform-origin:50% 0;
}
.strich--waagerecht{
  position:absolute;left:0;right:0;top:0;height:2px;
  transform:scaleX(var(--zug,0));transform-origin:0 50%;
}
/* Die Schnittkante liegt IM Wortkasten, nicht ueber der Seite. Sie faehrt
   ausschliesslich per translate, wird also nie gestaucht. */
.schnitt::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--ton);
  transform:translate3d(0,var(--schnitt-px,0px),0);
  opacity:var(--schnitt-sicht,0);
  transition:opacity var(--d-fast) var(--e-aus);
  pointer-events:none;
}

/* ---------- Sektionsgeruest ---------- */
.abschnitt{padding-block:var(--r-6);position:relative}
.abschnitt__kopf{
  display:grid;grid-template-columns:var(--spalte);gap:var(--r-2);
  margin-bottom:var(--r-4);
}
.abschnitt__titel{font-size:var(--t-xl);max-width:22ch}
@media (min-width:60rem){
  .abschnitt__kopf{grid-template-columns:10rem var(--spalte);align-items:start}
}

/* ---------- Manifest ---------- */
.manifest{padding-block:var(--r-6)}
.manifest__innen{position:relative}
.manifest__satz{padding-left:var(--r-3)}
@media (min-width:60rem){.manifest__satz{padding-left:var(--r-4)}}
.manifest__satz{
  font-size:var(--t-2xl);
  line-height:1.12;
  max-width:19ch;
  font-weight:340;
}
.manifest__satz .wort{
  display:inline-block;
  opacity:.16;
  transition:opacity var(--d-base) var(--e-aus);
}
.manifest__satz .wort[data-hell="ja"]{opacity:1}
.manifest__nach{margin-top:var(--r-3);padding-left:var(--r-3)}
@media (min-width:60rem){.manifest__nach{padding-left:var(--r-5)}}

/* ---------- Leistungen ---------- */
.preise{position:relative;border-top:var(--strich) solid var(--kante)}
.preis{
  display:grid;
  grid-template-columns:var(--spalte) auto;
  gap:var(--r-1) var(--r-2);
  align-items:baseline;
  padding-block:var(--r-3);
  border-bottom:var(--strich) solid var(--kante);
  clip-path:inset(0 100% 0 0);
  transform:translate3d(0,10px,0);
  transition:clip-path var(--d-slow) var(--e-aus),
             transform var(--d-slow) var(--e-aus);
  transition-delay:calc(var(--i,0) * var(--stagger));
}
.preise[data-da="ja"] .preis{clip-path:inset(0 0 0 0);transform:none}
.preis__name{font-family:var(--schrift-display);font-size:var(--t-l);font-weight:400}
.preis__was{grid-column:1;color:var(--rauch);font-size:var(--t-s);max-width:46ch}
.preis__geld{
  font-family:var(--schrift-display);font-size:var(--t-l);
  white-space:nowrap;font-weight:400;
}
.preis__geld small{font-size:var(--t-xs);color:var(--rauch);letter-spacing:.14em;
  text-transform:uppercase;display:block;text-align:right;font-family:var(--schrift-text)}
.preis--frei .preis__geld{color:var(--ton)}
.preise__hinweis{margin-top:var(--r-3);color:var(--rauch);font-size:var(--t-s);max-width:60ch}

/* ---------- Galerie ---------- */
.galerie{padding-block:var(--r-5) 0}
.galerie__buehne{position:relative;height:320svh}
.galerie__halt{
  position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}
.galerie__spur{
  display:flex;gap:var(--r-3);
  padding-inline:var(--rand);
  width:max-content;
  will-change:transform;
}
.stueck{width:min(76vw,30rem);flex:0 0 auto}
.stueck__rahmen{
  position:relative;overflow:hidden;background:var(--tinte-2);
  aspect-ratio:4/5;
  clip-path:inset(0 0 100% 0);
}
.galerie[data-da="ja"] .stueck__rahmen{
  clip-path:inset(0 0 0 0);
  transition:clip-path var(--d-slow) var(--e-aus);
  transition-delay:calc(var(--i,0) * var(--stagger));
}
.stueck__rahmen img{width:100%;height:100%;object-fit:cover}
.stueck__text{display:flex;justify-content:space-between;gap:var(--r-2);
  padding-top:var(--r-1);font-size:var(--t-s);color:var(--rauch)}
.galerie__balken{
  margin:var(--r-3) var(--rand) 0;height:2px;background:var(--kante);
  position:relative;overflow:hidden;
}
.galerie__balken::after{
  content:"";position:absolute;inset:0;background:var(--ton);
  transform:scaleX(var(--fortschritt,0));transform-origin:0 50%;
}

/* Auf dem Handy wird aus der gepinnten Sequenz ein Wischstreifen.
   Choreografie wird einfacher, nicht abgeschaltet: die Masken bleiben. */
@media (max-width:48rem){
  .galerie__buehne{height:auto}
  .galerie__halt{position:static;height:auto;display:block}
  .galerie__spur{
    width:auto;transform:none!important;
    overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-padding-left:var(--rand);
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .galerie__spur::-webkit-scrollbar{display:none}
  .stueck{scroll-snap-align:start}
  .stueck:last-child{scroll-snap-align:end}
}

/* ---------- Team ---------- */
.team__raster{
  display:grid;gap:var(--strich);
  background:var(--kante);
  border-block:var(--strich) solid var(--kante);
  grid-template-columns:var(--spalte);
}
@media (min-width:40rem){.team__raster{grid-template-columns:repeat(2,var(--spalte))}}
@media (min-width:68rem){.team__raster{grid-template-columns:repeat(4,var(--spalte))}}

.kopfkarte{position:relative;background:var(--tinte);isolation:isolate}
.kopfkarte__knopf{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;color:inherit;font:inherit;
  padding:var(--r-2) var(--r-2) var(--r-3);
}
.kopfkarte__bild{
  aspect-ratio:1;overflow:hidden;background:var(--tinte-2);margin-bottom:var(--r-2);
}
.kopfkarte__bild img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06);
  transform:scale(1.02);
  transition:filter var(--d-slow) var(--e-aus),transform var(--d-slow) var(--e-aus);
}
@media (hover:hover) and (pointer:fine){
  .kopfkarte:hover .kopfkarte__bild img{filter:grayscale(0);transform:scale(1.06)}
}
.kopfkarte[data-offen="ja"] .kopfkarte__bild img{filter:grayscale(0);transform:scale(1.06)}
.kopfkarte__name{display:block;font-family:var(--schrift-display);
  font-size:var(--t-l);font-weight:400;line-height:1.15}
.kopfkarte__rolle{display:block;color:var(--rauch);font-size:var(--t-s);margin-top:.15rem}
.kopfkarte__bild{display:block}
.kopfkarte__mehr{
  margin-top:var(--r-1);font-size:var(--t-xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ton);display:inline-flex;align-items:center;gap:.5em;
}
.kopfkarte__mehr i{
  font-style:normal;display:inline-block;
  transition:transform var(--d-fast) var(--e-aus);
}
.kopfkarte[data-offen="ja"] .kopfkarte__mehr i{transform:rotate(45deg)}

/* Die Tafel waechst aus der Karte, nicht aus der Bildmitte:
   transform-origin sitzt an der Oberkante der Karte. */
.kopfkarte__tafel{
  position:absolute;left:0;right:0;top:100%;z-index:5;
  background:var(--tinte-2);
  border:var(--strich) solid var(--kante);
  padding:var(--r-2);
  transform-origin:50% 0;
  transform:translate3d(0,-6px,0) scaleY(.94);
  opacity:0;visibility:hidden;
  transition:transform var(--d-base) var(--e-ein),
             opacity var(--d-fast) var(--e-ein),
             visibility 0s linear var(--d-base);
}
.kopfkarte[data-offen="ja"] .kopfkarte__tafel{
  transform:none;opacity:1;visibility:visible;
  transition:transform var(--d-base) var(--e-aus),
             opacity var(--d-fast) var(--e-aus),
             visibility 0s;
}
.kopfkarte__tafel p{color:var(--rauch);font-size:var(--t-s)}
.kopfkarte__tafel dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem var(--r-2);
  margin-top:var(--r-2);font-size:var(--t-s)}
.kopfkarte__tafel dt{color:var(--rauch)}

/* ---------- Ablauf ---------- */
.ablauf__liste{list-style:none;position:relative;display:grid;gap:var(--r-4)}
.ablauf__achse{
  position:absolute;left:calc(1.5rem - 1px);top:.6rem;bottom:.6rem;width:2px;
  background:var(--kante);
}
.ablauf__achse::after{
  content:"";position:absolute;inset:0;background:var(--ton);
  transform:scaleY(var(--fortschritt,0));transform-origin:50% 0;
}
.schritt{display:grid;grid-template-columns:3rem var(--spalte);gap:var(--r-2);align-items:start}
.schritt__punkt{
  width:12px;height:12px;border-radius:50%;margin:.5rem auto 0;
  background:var(--tinte);box-shadow:inset 0 0 0 2px var(--kante);
  transition:background-color var(--d-base) var(--e-aus),
             box-shadow var(--d-base) var(--e-aus),
             transform var(--d-base) var(--e-aus);
}
.schritt[data-an="ja"] .schritt__punkt{
  background:var(--ton);box-shadow:inset 0 0 0 2px var(--ton);transform:scale(1.25);
}
.schritt__nr{font-size:var(--t-xs);letter-spacing:.2em;color:var(--rauch)}
.schritt__titel{font-family:var(--schrift-display);font-size:var(--t-l);font-weight:400;
  margin-top:.15rem}
.schritt__text{color:var(--rauch);max-width:52ch;margin-top:.35rem}

/* ---------- Standort ---------- */
.standort__raster{display:grid;gap:var(--r-4)}
@media (min-width:60rem){.standort__raster{grid-template-columns:1fr 1fr;align-items:start}}
.zeiten{width:100%;border-collapse:collapse;margin-top:var(--r-2)}
.zeiten th,.zeiten td{
  text-align:left;padding:.7rem 0;border-bottom:var(--strich) solid var(--kante);
  font-weight:400;font-size:var(--t-s);
}
.zeiten th{color:var(--rauch)}
.zeiten td{text-align:right}
.zeiten tr[data-heute="ja"] th,.zeiten tr[data-heute="ja"] td{color:var(--ton)}
.karte-bild{
  display:block;border:var(--strich) solid var(--kante);overflow:hidden;
  text-decoration:none;background:var(--tinte-2);
  transition:border-color var(--d-fast) var(--e-aus);
}
@media (hover:hover) and (pointer:fine){.karte-bild:hover{border-color:var(--ton)}}
.karte-bild__fuss{display:flex;justify-content:space-between;gap:var(--r-2);
  padding:var(--r-2);font-size:var(--t-s);color:var(--rauch)}

/* ---------- Buchung ---------- */
.buchung{background:var(--papier);color:var(--tinte)}
.buchung .zaehler{color:#6B655C}
.buchung__titel{font-size:var(--t-2xl);max-width:16ch;font-weight:340}
.buchung__tun{display:flex;flex-wrap:wrap;gap:var(--r-2);margin-top:var(--r-3)}
.buchung .knopf{--knopf-grund:var(--tinte);--knopf-schrift:var(--papier)}
.buchung .knopf--klar{
  --knopf-grund:transparent;--knopf-schrift:var(--tinte);
  box-shadow:inset 0 0 0 var(--strich) rgba(20,18,15,.3);
}
@media (hover:hover) and (pointer:fine){
  .buchung .knopf:hover{background:#2A241D}
  .buchung .knopf--klar:hover{background:transparent;box-shadow:inset 0 0 0 var(--strich) var(--tinte)}
}
.buchung__rest{margin-top:var(--r-3);color:#57524A;font-size:var(--t-s);max-width:52ch}

/* ---------- Fussleiste am Handy ---------- */
.leiste{
  position:fixed;inset:auto 0 0 0;z-index:45;
  display:none;gap:var(--strich);
  background:var(--kante);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translate3d(0,110%,0);
  transition:transform var(--d-slow) var(--e-aus);
}
.leiste[data-da="ja"]{transform:none}
.leiste a{
  flex:1;min-height:56px;display:flex;align-items:center;justify-content:center;
  text-decoration:none;font-size:var(--t-s);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;background:var(--tinte);color:var(--papier);
}
.leiste a + a{background:var(--ton);color:var(--tinte)}
.leiste a:active{background:var(--tinte-2)}
@media (max-width:48rem){
  .leiste{display:flex}
  body{padding-bottom:56px}
}

/* ---------- Fusszeile ---------- */
.fuss{border-top:var(--strich) solid var(--kante);padding-block:var(--r-4)}
.fuss__raster{display:grid;gap:var(--r-3)}
@media (min-width:52rem){.fuss__raster{grid-template-columns:2fr 1fr 1fr}}
.fuss a{color:var(--rauch);text-decoration:none;
  transition:color var(--d-fast) var(--e-aus)}
@media (hover:hover) and (pointer:fine){.fuss a:hover{color:var(--papier)}}
.fuss ul{list-style:none;display:grid;gap:.55rem;font-size:var(--t-s)}
.fuss h2{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;
  color:var(--rauch);margin-bottom:var(--r-2);font-weight:500}
.fuss__unten{
  margin-top:var(--r-4);padding-top:var(--r-2);
  border-top:var(--strich) solid var(--kante);
  display:flex;flex-wrap:wrap;gap:var(--r-1) var(--r-3);justify-content:space-between;
  color:var(--rauch);font-size:var(--t-xs);
}

/* ---------- Demo-Kennzeichnung (Ehrlichkeitspflicht) ---------- */
.demo-band{
  background:var(--tinte-2);border-top:var(--strich) solid var(--kante);
  padding:var(--r-2) 0;color:var(--rauch);font-size:var(--t-xs);
}
.demo-band a{color:#D06E48;text-decoration:none;font-weight:600}
@media (hover:hover) and (pointer:fine){.demo-band a:hover{text-decoration:underline}}

/* ---------- Rechtstexte ---------- */
.recht{padding-block:calc(var(--r-6) + 2rem) var(--r-5)}
.recht h1{font-family:var(--schrift-display);font-size:var(--t-xl);font-weight:400;
  margin-bottom:var(--r-3)}
.recht h2{font-family:var(--schrift-display);font-size:var(--t-l);font-weight:400;
  margin:var(--r-4) 0 var(--r-1)}
.recht h3{font-size:var(--t-m);font-weight:600;margin:var(--r-3) 0 .3rem}
.recht p,.recht li{color:var(--rauch);max-width:72ch}
.recht ul{margin:.5rem 0 0 1.2rem;display:grid;gap:.4rem}
.recht a{color:var(--ton)}

/* ---------- Eintritte ---------- */
/* Beruehrflaechen: freistehende Links bekommen 44px Hoehe. Links MITTEN im
   Fliesstext bleiben bewusst inline (WCAG 2.2 nimmt sie ausdruecklich aus,
   und ein aufgeblasener Link im Satz zerreisst den Zeilenfall). */
.kopf__marke{min-height:44px}
.fuss ul a,.ton,.fuss__unten a,.kontaktblock a{
  display:inline-flex;align-items:center;
  min-height:44px;min-width:44px;
}
.fuss ul{gap:0}
.fuss__unten{align-items:center}
/* Der einzige Link, der bewusst inline bleibt: der Herstellerhinweis mitten im
   Satz des Demo-Bandes. Ihn auf 44px aufzublasen wuerde den Satz zerreissen,
   und WCAG 2.2 nimmt Links im Fliesstext ausdruecklich aus. */
.demo-band a{padding-block:.35em}

/* Kleine Hilfsklassen statt Inline-Styles. Inline-Styles wuerden ausserdem
   eine CSP ohne unsafe-inline brechen. */
.blank{list-style:none}
.ton{color:var(--ton)}
.abstand-oben{margin-top:var(--r-3)}
.abstand-unten{margin-bottom:var(--r-2)}
.kontaktblock{margin-top:var(--r-2);font-size:var(--t-s)}
.zurueck{margin-top:var(--r-4)}
/* Der Staffel-Index kommt aus der Reihenfolge, nicht aus dem Markup. */
.preis:nth-child(1){--i:0}
.preis:nth-child(2){--i:1}
.preis:nth-child(3){--i:2}
.preis:nth-child(4){--i:3}
.preis:nth-child(5){--i:4}
.stueck:nth-child(1){--i:0}
.stueck:nth-child(2){--i:1}
.stueck:nth-child(3){--i:2}
.stueck:nth-child(4){--i:3}
.stueck:nth-child(5){--i:4}

.auf{
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity var(--d-slow) var(--e-aus),transform var(--d-slow) var(--e-aus);
  transition-delay:calc(var(--i,0) * var(--stagger));
}
.auf[data-da="ja"]{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  /* Ruhige Opacity-Uebergaenge, aber die Seite bleibt vollstaendig:
     keine nackte Textwueste, nur keine Bewegung mehr. */
  .auf,.preis,.stueck__rahmen{transform:none!important;clip-path:none!important}
  .strich,.schnitt::after{display:none}
  .galerie__buehne{height:auto}
  .galerie__halt{position:static;height:auto;display:block}
  .galerie__spur{width:auto;transform:none!important;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-left:var(--rand)}
  .schnitt__lage--dick{clip-path:none;position:static;transform:none}
  .schnitt__lage--duenn{display:none}
  .manifest__satz .wort{opacity:1}
}