/* ruhiger-wechsel.css, Baustein des Website-Ateliers, Version 1.1, Stand 19.10.2026
   Zu ruhiger-wechsel.js: Blende für Sprünge ohne Scrollfahrt und Anfrage-Fenster (Hausregel 19.10.2026, Muster Maé Studio).
   Anpassen nur über die Variablen, am besten auf :root der Seite:
     --rw-papier   Grund des Fensters (wie der Formularbereich der Seite)
     --rw-tinte    Schrift im Fenster
     --rw-linie    Trennlinie unter dem Fensterkopf
     --rw-schleier Dämpfung der Seite hinter dem Fenster
     --rw-breite   Breite des Fensters am rechten Rand (Handy: ganze Fläche)
     --rw-ease     Kurve der Übergänge
     --rw-titel    Schrift des Fenstertitels
   Die Blende bekommt ihre Farbe vom Ziel (JS) und liegt eine Ebene unter der Kopfzeile aus data-ruhig-kopf.
   1.1: Fenster 100vw breit, damit es auch über die freigehaltene Bildlaufleiste (scrollbar-gutter) reicht. */
:root{--rw-papier:#fff;--rw-tinte:#14110f;--rw-linie:rgba(0,0,0,.12);--rw-schleier:rgba(20,18,16,.46);--rw-breite:620px;--rw-ease:cubic-bezier(.22,1,.36,1);--rw-titel:inherit}
html{scroll-behavior:auto}
.ruhig-blende{position:fixed;inset:0;z-index:90;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .55s var(--rw-ease),visibility 0s linear .55s}
.ruhig-blende--an{opacity:1;visibility:visible;transition:opacity .28s var(--rw-ease),visibility 0s}
[data-sprungziel]:focus{outline:none}

html.rw-offen{overflow:hidden;scrollbar-gutter:stable}
.rw-fenster{position:fixed;inset:0;width:100vw;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--rw-tinte);overflow:hidden;z-index:1000}
.rw-fenster::backdrop{background:transparent}
.rw-fenster__schleier{position:absolute;inset:0;background:var(--rw-schleier);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .5s var(--rw-ease)}
.rw-fenster__blatt{position:absolute;top:0;right:0;bottom:0;width:min(var(--rw-breite),100%);background:var(--rw-papier);color:var(--rw-tinte);overflow-y:auto;overscroll-behavior:contain;padding:0 clamp(1.25rem,3.4vw,3rem) clamp(2rem,4vw,3rem);box-shadow:-30px 0 80px -40px rgba(0,0,0,.45);opacity:0;transform:translateX(36px);transition:opacity .55s var(--rw-ease),transform .75s cubic-bezier(.16,1,.3,1)}
.rw-fenster--offen .rw-fenster__schleier{opacity:1}
.rw-fenster--offen .rw-fenster__blatt{opacity:1;transform:none}
.rw-fenster--schliesst .rw-fenster__schleier{opacity:0;transition:opacity .4s var(--rw-ease)}
.rw-fenster--schliesst .rw-fenster__blatt{opacity:0;transform:translateX(20px);transition:opacity .35s var(--rw-ease),transform .4s var(--rw-ease)}
.rw-fenster__leiste{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:4.25rem;margin-bottom:.4rem;background:var(--rw-papier)}
.rw-fenster__marke{margin:0;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;opacity:.75}
.rw-fenster__zu{flex:none;display:inline-flex;align-items:center;gap:.6em;min-height:44px;padding:.5em .2em .5em .8em;border:0;background:none;color:inherit;font:inherit;font-size:.82rem;letter-spacing:.08em;cursor:pointer}
.rw-fenster__zu::after{content:"";width:18px;height:18px;background:linear-gradient(45deg,transparent 46%,currentColor 46%,currentColor 54%,transparent 54%),linear-gradient(-45deg,transparent 46%,currentColor 46%,currentColor 54%,transparent 54%)}
.rw-fenster__zu:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.rw-fenster__kopf{padding-bottom:1.4rem;margin-bottom:1.6rem;border-bottom:1px solid var(--rw-linie)}
.rw-fenster__titel{font:400 clamp(1.7rem,3vw,2.4rem)/1.1 var(--rw-titel);margin:0 0 .7rem;color:inherit}
.rw-fenster__titel:focus{outline:none}
.rw-fenster__lead{margin:0;max-width:44ch;line-height:1.6;opacity:.82}
.rw-fenster [data-anfrage-ort]>*{opacity:0;transform:translateY(14px);transition:opacity .6s var(--rw-ease) .2s,transform .8s cubic-bezier(.16,1,.3,1) .2s}
.rw-fenster--offen [data-anfrage-ort]>*{opacity:1;transform:none}
.rw-fenster--schliesst [data-anfrage-ort]>*{opacity:1;transform:none;transition:none}
@media (max-width:640px){.rw-fenster__blatt{transform:translateY(18px)}.rw-fenster--schliesst .rw-fenster__blatt{transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){.ruhig-blende,.rw-fenster__schleier,.rw-fenster__blatt,.rw-fenster [data-anfrage-ort]>*{transition:none!important}}