/* Glaserei Loos by Shako. Eine Schrift, eine Akzentfarbe, scharfe Glaskanten (Radius 2px). */
@font-face{
  font-family:"Figtree";
  src:url("../fonts/figtree-var.woff2") format("woff2");
  font-weight:300 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --grund:#eef3f2;
  --papier:#f9fbfb;
  --tinte:#0f2a2e;
  --leise:#3f5759;
  --akzent:#0b5a63;
  --akzent-tief:#08424a;
  --kante:#79c2b3;
  --kante-hell:#bfe3da;
  --linie:rgba(15,42,46,.16);
  --r:2px;
  --weich:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{
  margin:0;
  font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.0625rem;
  line-height:1.55;
  color:var(--tinte);
  background:
    linear-gradient(118deg,rgba(255,255,255,.75) 0 22%,transparent 22.1%) 0 0/100% 900px no-repeat,
    linear-gradient(118deg,transparent 0 46%,rgba(191,227,218,.28) 46.1% 63%,transparent 63.1%) 0 0/100% 900px no-repeat,
    var(--grund);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ol,dl,dd,address,fieldset{margin:0}
ol{padding:0;list-style:none}
address{font-style:normal}
img,svg{display:block;max-width:100%}
a{color:var(--akzent);text-underline-offset:.18em}
a:hover{color:var(--akzent-tief)}
:focus-visible{outline:3px solid var(--tinte);outline-offset:3px;border-radius:var(--r)}
.nr{font-variant-numeric:tabular-nums;white-space:nowrap}

.rand{width:min(100% - 2rem,72rem);margin-inline:auto}
.nur-vorleser{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprung{position:absolute;left:1rem;top:-4rem;z-index:30;background:var(--tinte);color:#fff;padding:.75rem 1rem;border-radius:var(--r)}
.sprung:focus{top:.5rem;color:#fff}

/* Kopfzeile */
.kopf{position:sticky;top:0;z-index:20;background:rgba(238,243,242,.96);border-bottom:1px solid var(--linie)}
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){
  .kopf{background:rgba(238,243,242,.8);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3)}
}
@media (prefers-reduced-transparency:reduce){
  .kopf{background:var(--grund);-webkit-backdrop-filter:none;backdrop-filter:none}
}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4rem;flex-wrap:nowrap}
.marke{display:inline-flex;align-items:baseline;gap:.4rem;color:var(--tinte);text-decoration:none;white-space:nowrap;min-height:44px;line-height:44px}
.marke:hover{color:var(--tinte)}
.marke-name{font-weight:800;font-size:1.2rem;letter-spacing:-.02em}
.marke-von{font-weight:500;font-size:.85rem;color:var(--akzent);letter-spacing:.01em}
.kopf-nav{display:none;gap:1.75rem;margin-left:auto;margin-right:1rem}
.kopf-nav a{color:var(--tinte);text-decoration:none;font-weight:500;font-size:.98rem;line-height:44px;white-space:nowrap}
.kopf-nav a:hover{text-decoration:underline}
@media (min-width:56rem){.kopf-nav{display:flex}}

.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;padding:.55rem 1.1rem;
  background:var(--akzent);color:#fff;font-weight:700;text-decoration:none;white-space:nowrap;
  border-radius:var(--r);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),3px 3px 0 0 var(--kante);
  transition:transform .18s var(--weich),background-color .18s;
}
.knopf:hover{background:var(--akzent-tief);color:#fff}
.knopf:active{transform:translate(2px,2px)}
.knopf-nummer{display:none;font-variant-numeric:tabular-nums}
@media (min-width:30rem){.knopf-nummer{display:inline}}
.knopf-gross{min-height:56px;padding:.8rem 1.5rem;font-size:1.15rem}

/* Einstieg */
.einstieg{padding:2rem 0 3.5rem;overflow-x:clip}
.einstieg-raster{display:grid;gap:2rem}
h1{font-size:clamp(2.15rem,1.2rem + 4.4vw,4.1rem);line-height:1.02;letter-spacing:-.035em;font-weight:800;text-wrap:balance}
.unterzeile{margin-top:1rem;font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);color:var(--leise);max-width:34ch}
.einstieg-text .knopf{margin-top:1.4rem}
@media (min-width:60rem){
  .einstieg{padding:3.5rem 0 5rem}
  .einstieg-raster{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:3.5rem;align-items:center}
  .einstieg-text .knopf{margin-top:2rem}
}

/* Kernstück: Scheibe nach Maß. Alle Bewegung nur über transform und opacity,
   gesteuert über --bx (Breite 0.2 bis 1) und --hy (Höhe 0.2 bis 1). */
.schnitt{display:grid;grid-template-columns:2.5rem minmax(0,1fr);grid-template-rows:auto 2.4rem auto;min-width:0}
.tafel{
  position:relative;grid-column:2;grid-row:1;aspect-ratio:4/3;
  background:
    linear-gradient(var(--linie) 1px,transparent 1px) 0 -1px/100% calc(100% / 15),
    linear-gradient(90deg,var(--linie) 1px,transparent 1px) -1px 0/calc(100% / 20) 100%,
    linear-gradient(135deg,#fdfefe,#e3ecea);
  box-shadow:0 0 0 1px var(--linie),0 30px 50px -36px rgba(15,60,66,.45);
  border-radius:var(--r);
}
.clip-x,.unclip-x,.clip-y,.unclip-y,.glas,.riss,.mit-r,.mit-o,.mitte,.l,.lauf{position:absolute;inset:0}
.clip-x,.clip-y{overflow:hidden}
.clip-x,.unclip-x,.clip-y,.unclip-y,.riss,.mit-r,.mit-o,.mitte,.mass .linie,.mass .ende,.mass .wo{transition:transform .28s var(--weich)}
.clip-x{transform:translateX(calc((var(--bx) - 1) * 100%))}
.unclip-x{transform:translateX(calc((1 - var(--bx)) * 100%))}
.clip-y{transform:translateY(calc((1 - var(--hy)) * 100%))}
.unclip-y{transform:translateY(calc((var(--hy) - 1) * 100%))}
.mit-r{transform:translateX(calc((var(--bx) - 1) * 100%));pointer-events:none}
.mit-o{transform:translateY(calc((1 - var(--hy)) * 100%));pointer-events:none}
.mitte{transform:translateY(calc((1 - var(--hy)) * 50%))}

.l{opacity:0;transition:opacity .35s}
.l-platte{background:linear-gradient(128deg,rgba(255,255,255,.7),rgba(140,205,192,.5) 36%,rgba(236,248,245,.55) 58%,rgba(96,178,162,.5))}
.l-spiegel{background:
  linear-gradient(115deg,transparent 0 18%,rgba(255,255,255,.75) 18.2% 27%,transparent 27.2% 33%,rgba(255,255,255,.5) 33.2% 36%,transparent 36.2%),
  linear-gradient(160deg,#dfe8ea,#aebfc4 45%,#e9f0f1 62%,#93a9af)}
.l-dusche{background:linear-gradient(128deg,rgba(255,255,255,.55),rgba(150,205,214,.42) 40%,rgba(240,250,250,.5) 60%,rgba(120,188,200,.42))}
.l-fenster{background:linear-gradient(150deg,#dcebf1,#b9d5e0 45%,#e8f2f5 62%,#a9c9d6)}
.schnitt:has(#art-platte:checked) .l-platte,
.schnitt:has(#art-spiegel:checked) .l-spiegel,
.schnitt:has(#art-dusche:checked) .l-dusche,
.schnitt:has(#art-fenster:checked) .l-fenster{opacity:1}

.glanz{position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 9%,rgba(255,255,255,.7) 9.2% 15%,transparent 15.2% 17.5%,rgba(255,255,255,.45) 17.7% 19.5%,transparent 19.7%)}
.reflex{position:absolute;top:-10%;bottom:-10%;left:0;width:34%;opacity:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.9) 45%,rgba(255,255,255,.2) 60%,transparent);transform:translateX(-120%) skewX(-14deg)}

/* Kanten der zugeschnittenen Scheibe */
.band{position:absolute;background:var(--kante);transition:background-color .35s,transform .35s var(--weich)}
.glas{--dk:.4}
.band-l{left:0;top:0;bottom:0;width:10px;transform-origin:left;transform:scaleX(var(--dk))}
.band-r{right:0;top:0;bottom:0;width:10px;transform-origin:right;transform:scaleX(var(--dk))}
.band-u{left:0;right:0;bottom:0;height:10px;transform-origin:bottom;transform:scaleY(var(--dk))}
.band-o{left:0;right:0;top:0;height:10px;transform-origin:top;transform:scaleY(var(--dk))}
.schnitt:has(#art-spiegel:checked) .glas{--dk:.6}
.schnitt:has(#art-spiegel:checked) .band{background:#f4f8f8;box-shadow:0 0 0 1px rgba(15,42,46,.3)}
.schnitt:has(#art-dusche:checked) .glas{--dk:.3}
.schnitt:has(#art-dusche:checked) .band{background:var(--akzent)}
.schnitt:has(#art-fenster:checked) .glas{--dk:1.4}
.schnitt:has(#art-fenster:checked) .band{background:#fbfcfc;box-shadow:0 0 0 1px rgba(15,42,46,.4)}

.beschlag,.griff{position:absolute;opacity:0;transition:opacity .35s;background:linear-gradient(135deg,#eef2f2,#8fa2a6);box-shadow:0 0 0 1px rgba(15,42,46,.45)}
.beschlag{left:0;width:26px;height:16px}
.beschlag-u{bottom:24px}
.beschlag-o{top:24px}
.griff{right:9%;top:calc(50% - 15%);width:7px;height:30%}
.schnitt:has(#art-dusche:checked) :is(.beschlag,.griff){opacity:1}
.schnitt:has(#art-fenster:checked) .griff{opacity:1;right:16px;top:calc(50% - 6%);height:12%;width:6px}

/* Ritzlinie über die ganze Tafel und das Schneidrad */
.riss{pointer-events:none}
.riss-v{transform:translateX(calc((var(--bx) - 1) * 100%))}
.riss-h{transform:translateY(calc((1 - var(--hy)) * 100%))}
.ritz,.spur{position:absolute}
.riss-v :is(.ritz,.spur){right:-1px;top:0;bottom:0;width:2px}
.riss-h :is(.ritz,.spur){top:-1px;left:0;right:0;height:2px}
.riss-v .ritz{background:repeating-linear-gradient(180deg,rgba(11,90,99,.55) 0 6px,transparent 6px 11px)}
.riss-h .ritz{background:repeating-linear-gradient(90deg,rgba(11,90,99,.55) 0 6px,transparent 6px 11px)}
.spur{background:#fff;box-shadow:0 0 0 1px rgba(11,90,99,.5);opacity:0}
.riss-v .spur{transform-origin:top}
.riss-h .spur{transform-origin:left}
.lauf{opacity:0}
.rad{position:absolute;width:40px;height:40px}
.riss-v .rad{right:-20px;bottom:-20px}
.riss-h .rad{right:-20px;top:-20px}

/* Maßlinien */
.mass{position:relative;color:var(--tinte)}
.mass .linie,.mass .strich{position:absolute;background:var(--tinte)}
.mass .ende,.mass .wo{position:absolute;inset:0}
.zahl{font-weight:700;font-size:.92rem;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.01em}
.mass-h{grid-column:1;grid-row:1}
.mass-h .linie{right:.7rem;top:0;bottom:0;width:1.5px;transform-origin:bottom;transform:scaleY(var(--hy))}
.mass-h .strich{right:.3rem;width:.9rem;height:1.5px}
.mass-h .strich-fest{bottom:0}
.mass-h .ende{transform:translateY(calc((1 - var(--hy)) * 100%))}
.mass-h .ende .strich{top:0}
.mass-h .wo{right:auto;width:1.5rem;display:grid;place-items:center;transform:translateY(calc((1 - var(--hy)) * 50%))}
.mass-h .zahl{writing-mode:vertical-rl;transform:rotate(180deg)}
.mass-b{grid-column:2;grid-row:2}
.mass-b .linie{left:0;right:0;top:.7rem;height:1.5px;transform-origin:left;transform:scaleX(var(--bx))}
.mass-b .strich{top:.3rem;height:.9rem;width:1.5px}
.mass-b .strich-fest{left:0}
.mass-b .ende{transform:translateX(calc((var(--bx) - 1) * 100%))}
.mass-b .ende .strich{right:0}
.mass-b .wo{display:grid;justify-items:center;align-items:end;transform:translateX(calc((var(--bx) - 1) * 50%))}
.mass-b .zahl{line-height:1.1}

/* Bedienung */
.bedienung{grid-column:1/-1;grid-row:3;display:grid;gap:.6rem 1.5rem;margin-top:1rem}
.regler{display:none}
.js .regler{display:block}
.regler label{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;font-size:.98rem}
.regler output{font-weight:500;color:var(--leise);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:var(--r);background:repeating-linear-gradient(90deg,var(--tinte) 0 1.5px,transparent 1.5px 12.5%) 0 0/100% 100%,var(--kante-hell);box-shadow:inset 0 0 0 1px var(--linie)}
input[type=range]::-moz-range-track{height:6px;border-radius:var(--r);background:var(--kante-hell);box-shadow:inset 0 0 0 1px var(--linie)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-11px;border:0;border-radius:var(--r);background:var(--akzent);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),2px 2px 0 var(--kante)}
input[type=range]::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:var(--r);background:var(--akzent);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),2px 2px 0 var(--kante)}
input[type=range]:focus-visible{outline:3px solid var(--tinte);outline-offset:0}
.arten{border:0;padding:0;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.art{position:relative;display:block}
.art input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.art span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:.3rem .5rem;font-weight:600;font-size:.95rem;white-space:nowrap;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(15,42,46,.3);border-radius:var(--r);transition:background-color .2s,color .2s}
.art input:checked + span{background:var(--tinte);color:#fff;box-shadow:none}
.art input:focus-visible + span{outline:3px solid var(--tinte);outline-offset:3px}
@media (min-width:36rem){
  .bedienung{grid-template-columns:1fr 1fr}
  .arten{grid-column:1/-1;grid-template-columns:repeat(4,auto);justify-content:start}
  .art span{padding-inline:1rem}
}

/* Abschnitte */
.abschnitt{padding:4.5rem 0}
@media (min-width:60rem){.abschnitt{padding:7.5rem 0}}
h2{font-size:clamp(1.8rem,1.2rem + 2.6vw,3rem);line-height:1.06;letter-spacing:-.03em;font-weight:800;text-wrap:balance}
h3{font-size:1.3rem;line-height:1.2;letter-spacing:-.015em;font-weight:700}
.einleitung{margin-top:1rem;color:var(--leise);max-width:46ch;font-size:1.12rem}

/* Glasscheibe als Fläche */
.scheibe,.tuer,.spiegelwand{
  position:relative;overflow:hidden;border-radius:var(--r);
  background:linear-gradient(140deg,rgba(255,255,255,.95),rgba(255,255,255,.55) 48%,rgba(205,232,226,.6));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 0 0 1px rgba(11,90,99,.16),5px 5px 0 0 rgba(121,194,179,.5),0 34px 50px -40px rgba(15,60,66,.5);
}
.scheibe::after,.tuer::after,.spiegelwand::after{
  content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:26%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85) 50%,transparent);
  transform:translateX(-140%) skewX(-16deg);opacity:0;
}

.werk{display:grid;gap:1.25rem;margin-top:2.5rem}
.scheibe{padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem}
.scheibe p{margin-top:.4rem;color:var(--leise)}
.scheibe .bild{width:100%;height:auto;max-height:13rem}
.w-dusche .bild{max-height:17rem}
.s-glas{fill:rgba(121,194,179,.22);stroke:var(--akzent);stroke-width:2}
.s-spiegel{fill:#cfdcdf;stroke:var(--akzent);stroke-width:2}
.s-rahmen{fill:#fff;stroke:var(--tinte);stroke-width:2}
.s-kante{fill:var(--kante);stroke:var(--akzent);stroke-width:1.5;stroke-linejoin:round}
.s-leise{fill:none;stroke:rgba(15,42,46,.45);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.s-tropf{fill:none;stroke:var(--kante);stroke-width:2.5;stroke-linecap:round}
.s-reflex{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round}
.s-voll{fill:var(--tinte)}
.s-griff{fill:none;stroke:var(--tinte);stroke-width:5;stroke-linecap:round}
.w-reparatur{background:var(--akzent-tief);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),5px 5px 0 0 var(--kante)}
.w-reparatur p{color:#d9ebe8;margin-top:0}
.w-reparatur .textlink{color:#fff}
.textlink{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-weight:700}
@media (min-width:44rem){
  .werk{grid-template-columns:repeat(6,minmax(0,1fr));gap:1.5rem}
  .w-dusche{grid-column:span 3;grid-row:span 2;justify-content:space-between}
  .w-spiegel,.w-fenster{grid-column:span 3;flex-direction:row;align-items:center}
  .w-spiegel .bild,.w-fenster .bild{width:42%;flex:none;order:2;margin-left:auto}
  .w-ganzglas,.w-platte,.w-rahmen{grid-column:span 2}
  .w-reparatur{grid-column:1/-1;flex-direction:row;align-items:center;gap:1rem 2.5rem;flex-wrap:wrap;padding:1.75rem 2rem}
  .w-reparatur p{flex:1 1 18rem}
}

/* Ablauf am Maßband */
.massband{
  margin-top:2.5rem;height:2.25rem;border-top:2px solid var(--tinte);
  background:
    repeating-linear-gradient(90deg,var(--tinte) 0 2px,transparent 2px 10%) 0 0/100% 100% no-repeat,
    repeating-linear-gradient(90deg,rgba(15,42,46,.5) 0 1px,transparent 1px 1%) 0 0/100% 45% no-repeat;
}
.schritte{display:grid;gap:2rem;margin-top:1.5rem;align-items:start}
.schritte p{margin-top:.5rem;color:var(--leise);max-width:32ch}
.schritte li{padding-left:1rem;border-left:2px solid var(--kante)}
@media (min-width:48rem){
  .schritte{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem}
  .schritte li:nth-child(2){margin-top:2.5rem}
  .schritte li:nth-child(3){margin-top:5rem}
}

/* Shako */
.abschnitt-shako{padding-block:2rem}
.spiegelwand{
  padding:3rem 1.5rem;
  background:
    linear-gradient(115deg,transparent 0 12%,rgba(255,255,255,.7) 12.1% 19%,transparent 19.1% 23%,rgba(255,255,255,.45) 23.1% 25%,transparent 25.1%),
    linear-gradient(160deg,#e6eeef,#c3d2d6 48%,#edf3f3 66%,#b3c5ca);
}
.spiegelwand h2{font-size:clamp(2rem,1.1rem + 4.2vw,4.25rem);max-width:14ch}
.spiegelwand > p{margin-top:1.25rem;max-width:38ch;font-size:1.15rem;color:#1d3a3e}
.sterne{display:flex;align-items:center;gap:1rem;margin-top:2rem!important}
.sternwert{font-size:3rem;line-height:1;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sterntext{font-size:1rem;line-height:1.4}
.sterntext a{color:var(--akzent-tief);font-weight:700;display:inline-block;padding-block:.7rem}
@media (min-width:48rem){.spiegelwand{padding:5.5rem 4.5rem}}

/* Besuch */
.besuch-raster{display:grid;gap:2.5rem}
.besuch-text address{margin-top:1.5rem;font-size:1.3rem;line-height:1.45;font-weight:500}
.besuch-links{margin-top:.75rem}
.besuch-tel{margin-top:.5rem;font-size:1.15rem}
.besuch-tel a{font-weight:700;display:inline-block;padding-block:.6rem;font-variant-numeric:tabular-nums}
.tuer{padding:2rem 3.25rem 2.25rem 1.75rem;min-height:17rem;display:flex;flex-direction:column;justify-content:center}
.zeiten{margin-top:1.25rem;display:grid;gap:1.1rem}
.zeiten dt{font-weight:500;color:var(--leise)}
.zeiten dd{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tuer-griff{position:absolute;right:1.1rem;top:calc(50% - 3.25rem);width:.6rem;height:6.5rem;background:linear-gradient(90deg,#f1f4f4,#93a6aa);box-shadow:0 0 0 1px rgba(15,42,46,.45);border-radius:var(--r)}
@media (min-width:52rem){
  .besuch-raster{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:4rem;align-items:center}
  .tuer{min-height:22rem;padding-left:3rem}
}

/* Schluss */
.schluss{padding:4.5rem 0 5rem;border-top:1px solid var(--linie);background:linear-gradient(118deg,transparent 0 58%,rgba(255,255,255,.7) 58.1% 76%,transparent 76.1%)}
.schluss h2{font-size:clamp(2.1rem,1.2rem + 4.4vw,4.1rem)}
.schluss p{margin-top:.9rem;color:var(--leise);font-size:1.15rem}
.schluss .knopf{margin-top:1.75rem}
@media (min-width:60rem){.schluss{padding:8rem 0}}

/* Fuß */
.fuss{background:var(--tinte);color:#d5e2e1;padding:2.5rem 0;font-size:.98rem}
.fuss-innen{display:grid;gap:1.25rem}
.fuss .marke-fuss{min-height:0;line-height:1.3;display:block}
.fuss .marke-name{color:#fff}
.fuss .marke-von{color:var(--kante-hell)}
.fuss nav{display:flex;gap:1.5rem}
.fuss a{color:#fff;display:inline-block;padding-block:.65rem}
.vorschau{color:#b4c6c5}
@media (min-width:48rem){.fuss-innen{grid-template-columns:1fr auto;align-items:end}.vorschau{grid-column:1/-1}}

/* Einblenden beim Scrollen (nur mit JavaScript und ohne Ruhe-Wunsch) */
.bewegt [data-zeig]{opacity:0;transform:translateY(18px)}
.bewegt [data-zeig].gezeigt{opacity:1;transform:none;transition:opacity .6s var(--weich),transform .6s var(--weich)}
.bewegt [data-zeig].gezeigt::after{animation:lichtzug 1.1s .25s var(--weich) both}
@keyframes lichtzug{
  0%{opacity:0;transform:translateX(-140%) skewX(-16deg)}
  30%{opacity:1}
  100%{opacity:0;transform:translateX(520%) skewX(-16deg)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* Rechtsseiten */
.recht{padding:2.5rem 0 5rem}
.recht .rand{width:min(100% - 2rem,44rem)}
.recht h1{font-size:clamp(2rem,1.4rem + 2.6vw,3rem)}
.recht h2{font-size:1.35rem;letter-spacing:-.015em;margin-top:2.25rem}
.recht p,.recht address{margin-top:.75rem}
.hinweis{margin-top:1.5rem;padding:.9rem 1.1rem;background:#fff;border-radius:var(--r);font-weight:600}
.offen{background:#fff3c4;color:#3d3000;padding:.05em .4em;border-radius:var(--r);box-shadow:inset 0 0 0 1px rgba(61,48,0,.25);font-weight:600;white-space:nowrap}
.fuss a:hover{color:#fff}
.sprung:hover{color:#fff}