.reveal-controls{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}.reveal-controls button{border:1px solid #50514d;border-radius:3px;background:transparent;color:#c5c5c1;padding:10px 15px;font-size:14px}.reveal-controls button[aria-pressed=true]{color:#111;background:var(--gold);border-color:var(--gold)}.reveal-hint,.gallery-hint{font-size:13px;color:var(--muted);margin:12px 0 0}.comparison[data-reveal=light] .compare-after,.comparison[data-reveal=full] .compare-after{clip-path:none}.comparison[data-reveal=light] .compare-line,.comparison[data-reveal=full] .compare-line,.comparison[data-reveal=light]>input,.comparison[data-reveal=full]>input{display:none}.comparison[data-reveal=light]{touch-action:pan-y;cursor:crosshair}.project-main .project-image{position:relative}.project-main .iris-color{position:absolute;inset:35px 70px auto;width:calc(100% - 140px);pointer-events:none}.motion-enabled .iris-base{filter:grayscale(1);opacity:.65}.iris-label{position:absolute;left:20px;top:12px;font-size:10px;letter-spacing:.08em;color:#fff;background:#171717ae;padding:4px 8px;pointer-events:none}.project-main:hover .iris-base,.project-main:hover .iris-color{transform:none}.magnetic-cta{transition:transform .4s cubic-bezier(.2,1.3,.4,1),background .2s}.wow{min-width:5.6em}.gallery-hint{margin-top:26px}.gallery-rail{min-width:0}.gallery-rail .project-pair{display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:20px}.gallery-rail .project{flex:0 0 75%;min-width:0;scroll-snap-align:start}.gallery-rail .project-image img{aspect-ratio:1.6}.gallery-rail .project:focus-visible{outline-offset:-3px}.motion-enabled .steps article>span{display:block;will-change:transform}
@media(min-width:801px){.motion-enabled .gallery-rail{height:180vh;position:relative;overflow:clip}.motion-enabled .gallery-rail .project-pair{position:sticky;top:8vh;overflow:visible;padding-top:30px;margin-top:0;will-change:transform}.motion-enabled .gallery-rail .project{flex-basis:68%}}
@media(max-width:1100px){.project-main .iris-color{inset:35px 70px auto;width:calc(100% - 140px)}}
@media(max-width:800px){.project-main .iris-color{inset:23px 33px auto;width:calc(100% - 66px)}.gallery-rail .project{flex-basis:88%}.gallery-rail .project-pair{gap:18px}.iris-label{font-size:8px;top:4px}.wow{min-width:0}}
@media(max-width:480px){.project-main .iris-color{inset:17px 18px auto;width:calc(100% - 36px)}.iris-label{font-size:6px;top:2px;left:10px;padding:2px 4px}.reveal-controls{gap:6px}.reveal-controls button{font-size:12px;padding:9px 11px}.reveal-hint{font-size:12px}.gallery-rail .project-pair{margin-top:17px}}
@media(prefers-reduced-motion:reduce){.iris-base{filter:none!important;opacity:1!important}.iris-color{clip-path:none!important}.comparison[data-reveal=light] .compare-after{mask-image:none!important;-webkit-mask-image:none!important}.gallery-rail{height:auto!important}.gallery-rail .project-pair{transform:none!important;position:static!important;overflow-x:auto!important}.steps article>span,.magnetic-cta{transform:none!important}}

/* 06.09.2026 — Zwei Korrekturen an der Wischreihe.
   1) Sie traegt jetzt vier Arbeiten statt zwei. Am Rechner schiebt sie sich
      ueber den Scrollweg; dafuer braucht sie mehr Hoehe, sonst rauscht sie durch.
   2) Am Handy schob sich nie etwas (das Skript setzt den Versatz erst ab 800 px),
      die Reihe klebte aber trotzdem ueber 180vh fest. Ergebnis war ein langer
      leerer Bereich, durch den man scrollen musste. Am Handy jetzt normale Hoehe. */
@media(min-width:801px){
  .motion-enabled .gallery-rail{height:300vh}
}
@media(max-width:800px){
  .motion-enabled .gallery-rail{height:auto}
  .motion-enabled .gallery-rail .project-pair{position:static;top:auto;padding-top:0}
}

/* 06.09.2026 — Oben stand eine Arbeit gross und ohne Bezeichnung, unten die Reihe
   mit „Weitere Arbeiten". Das wirkte zufaellig. Jetzt ist auch die obere benannt. */
.gallery-hint-oben{margin-top:34px}