/* ============================================================
   Pattern Kinship — Clouds Recklinghausen
   ============================================================ */

@font-face { font-family:'Centennial'; src:url('../fonts/Centennial-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Centennial'; src:url('../fonts/Centennial-75Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Centennial SC'; src:url('../fonts/Centennial-55RomanSC.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Centennial SC Light'; src:url('../fonts/Centennial-45LightSC.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Akzidenz Grotesk'; src:url('../fonts/AkzidenzGrotesk-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }

:root { --header-h: 52px; }               /* overridden below in narrow-viewport media query */

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; padding:0; background:#eeece7; }
body {
  font-family:'Akzidenz Grotesk', Helvetica, Arial, sans-serif;
  color:#211e1c;
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img { max-width:100%; display:block; }
a { color:#7E252C; text-decoration:none; }
a:hover { color:#D4652F; }
::selection { background:#D4652F; color:#fff; }
button { font: inherit; }

@keyframes fadeInUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}

/* -----------------------------------------------------------
   Sticky header
   ----------------------------------------------------------- */
.site-header {
  position:fixed; top:0; left:0; right:0;
  height:var(--header-h); z-index:70;
  background:rgba(238,236,231,0.96);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(33,30,28,0.14);
  display:flex; align-items:center; justify-content:center;
}
.site-header .nav {
  display:flex; align-items:center; gap:20px;
  max-width:520px; width:100%; padding:0 20px;
  font-family:'Akzidenz Grotesk', sans-serif;
  font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
}
.site-header .nav-item {
  cursor:pointer; color:#211e1c; background:none; border:none;
  padding:0; font: inherit; letter-spacing:inherit; text-transform:inherit;
  text-decoration:none;
  transition: color 0.2s ease;
}
.site-header .nav-item.is-active { color:#7E252C; }
.site-header .a11y-btn {
  margin-left:auto; cursor:pointer; display:flex; align-items:center;
  color:#13447F; background:none; border:none; padding:0;
}
.site-header .a11y-btn svg { display:block; }

/* -----------------------------------------------------------
   Left-edge color indicator
   ----------------------------------------------------------- */
.side-indicator {
  position:fixed;
  left: max(0px, calc(50% - 260px));  /* hugs left edge of 520px content column on desktop, viewport edge on mobile */
  top:var(--header-h);
  height:calc(100vh - var(--header-h)); width:9px;
  z-index:60; pointer-events:none;
  opacity:0;                          /* revealed once we enter the cloud sections */
  transition: opacity 0.3s ease;
  /* iOS Safari: promote to its own compositor layer so the gradient bitmap
     is cached and doesn't re-rasterize on every scroll frame while top/height change. */
  transform: translateZ(0);
  -webkit-transform: translate3d(0, 0, 0);
  will-change: transform, top, height;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  isolation: isolate;
}
.side-indicator.is-visible { opacity:1; }
.side-indicator .halo,
.side-indicator .dot {
  position:absolute; left:50%; top:2%;
  transform:translate(-50%, -50%) translateZ(0);
  -webkit-transform:translate(-50%, -50%) translate3d(0, 0, 0);
  border-radius:50%;
  transition: top 0.4s ease, background 0.4s ease, opacity 0.3s ease, box-shadow 0.4s ease;
  opacity:0;
  will-change: top, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.side-indicator .halo { width:30px; height:30px; background:#D4652F; filter:blur(9px); }
.side-indicator .dot  { width:12px; height:12px; background:#fff; box-shadow:0 0 0 2px #D4652F; }

/* -----------------------------------------------------------
   Content column
   ----------------------------------------------------------- */
.wrap {
  max-width:520px; margin:0 auto;
  background:#eeece7;
  position:relative; overflow-x:hidden;
  padding-top:var(--header-h);
  transition: filter 0.15s ease;
}

/* Font-size stepper via CSS variable */
:root { --font-zoom: 1; }
.wrap { font-size: calc(1em * var(--font-zoom)); }
@supports (zoom: 1) {
  .wrap { font-size: 1em; zoom: var(--font-zoom); }
}

/* -----------------------------------------------------------
   Opener / hero
   ----------------------------------------------------------- */
.opener { padding:0; }
.opener .hero-frame {
  width:100%; background:#e4e1da;
  aspect-ratio:3/2; overflow:hidden;
}
.opener .hero-frame img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.opener .hero-caption {
  font-family:'Akzidenz Grotesk', sans-serif;
  font-size:11px; color:#6b645e;
  text-align:center; padding:10px 24px;
}
.opener .wandabwicklung {
  width:100%; opacity:0;
  animation:fadeInUp 0.9s ease 0.15s forwards;
}
.opener .wandabwicklung img {
  width:100%; height:auto; display:block; mix-blend-mode:multiply;
}
.opener .intro {
  padding:32px 24px 16px; color:#211e1c;
}
.opener .eyebrow {
  font-family:'Akzidenz Grotesk', sans-serif;
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  opacity:0.6; margin-bottom:14px;
}
.opener h1 {
  font-family:'Centennial', Georgia, serif; font-weight:400;
  font-size:40px; line-height:1.08;
  margin:0 0 16px; text-wrap:balance;
}
.opener .intro-body {
  font-family:'Akzidenz Grotesk', sans-serif;
  font-size:15px; line-height:1.5; color:#5c5652;
}

/* -----------------------------------------------------------
   Sticky horizon bar
   ----------------------------------------------------------- */
.horizon-bar {
  position:sticky; top:var(--header-h); z-index:50;
  background:rgba(238,236,231,0.94);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(33,30,28,0.12);
  padding:10px 14px 8px;
  opacity:0; transform:translateY(-100%);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.horizon-bar.is-visible { opacity:1; transform:translateY(0); }
.horizon-bar .row {
  display:flex; align-items:flex-end; gap:3px; height:34px;
}
.horizon-bar .cloud-btn {
  min-width:16px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:none; padding:0;
}
.horizon-bar .cloud-btn svg {
  width:100%; height:22px; display:block; overflow:visible;
  transition:transform 0.2s ease;
}
.horizon-bar .cloud-btn .cloud-dot {
  width:4px; height:4px; border-radius:50%;
  background:transparent; transition:background 0.2s ease;
}

/* -----------------------------------------------------------
   Portrait
   ----------------------------------------------------------- */
.portrait { padding:8px 24px 48px; }
.portrait .photo {
  width:264px; height:264px; margin:0 auto 28px;
  border-radius:50%; overflow:hidden; background:#e4e1da;
}
.portrait .photo img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.portrait h2 {
  font-family:'Centennial', Georgia, serif; font-weight:400;
  font-size:26px; text-align:center; margin:0 0 12px;
}
.portrait p {
  font-family:'Akzidenz Grotesk', sans-serif;
  font-size:15.5px; line-height:1.65; text-align:center;
  max-width:400px; margin:0 auto; color:#3a3634;
}

/* Kurzvita read-more inside the portrait section */
.portrait .vita { text-align:center; margin-top:20px; }
.portrait .vita-toggle {
  font-family:'Akzidenz Grotesk', sans-serif;
  font-size:13px; letter-spacing:0.06em;
  background:none; border:none;
  border-bottom:1px solid #7E252C; color:#7E252C;
  padding:6px 0 2px; cursor:pointer;
}
.portrait .vita-more { display:none; text-align:left; margin-top:24px; }
.portrait.is-expanded .vita-more { display:block; }
.portrait .vita-more p {
  font-family:'Akzidenz Grotesk', sans-serif;
  font-size:14.5px; line-height:1.65;
  color:#3a3634;
  max-width:none; margin:0 0 14px;
  text-align:left;
}
.portrait .vita-more .exhibitions {
  font-size:13px; line-height:1.6; color:#5c5652;
}
.portrait .vita-more .vita-heading {
  font-family:'Akzidenz Grotesk', sans-serif;
  font-weight:400;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#7E252C;
  margin:22px 0 8px;
}
.portrait .vita-more .vita-heading:first-child { margin-top:0; }
.portrait .vita-more .vita-list {
  list-style:none;
  padding:0;
  margin:0 0 8px;
}
.portrait .vita-more .vita-list li {
  font-family:'Akzidenz Grotesk', sans-serif;
  font-size:13.5px;
  line-height:1.5;
  color:#3a3634;
  padding:6px 0;
  border-bottom:1px solid rgba(33,30,28,0.1);
}
.portrait .vita-more .vita-list li:last-child { border-bottom:none; }

/* -----------------------------------------------------------
   Einordnung
   ----------------------------------------------------------- */
.einordnung { padding:8px 24px 56px; }
.einordnung .kicker {
  font-family:'Akzidenz Grotesk', sans-serif;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:#7E252C; margin-bottom:16px;
}
.einordnung .preamble {
  font-family:'Centennial', Georgia, serif;
  font-style:italic;
  font-size:14px; line-height:1.55;
  color:#5b544f;
  margin-bottom:24px;
}
.einordnung .essay {
  font-family:'Centennial', Georgia, serif;
  font-size:20px; line-height:1.55; color:#211e1c;
}
.einordnung .essay p { margin:0 0 20px; }
.einordnung .essay p:last-child { margin-bottom:0; }
.einordnung .dropcap {
  font-size:44px; float:left; line-height:0.8;
  margin:6px 10px 0 0;
}
.einordnung .more { display:none; }
.einordnung.is-expanded .more { display:block; }
.einordnung .toggle {
  font-family:'Akzidenz Grotesk', sans-serif;
  font-size:13px; letter-spacing:0.06em;
  background:none; border:none;
  border-bottom:1px solid #7E252C; color:#7E252C;
  padding:14px 0 2px; margin-top:8px; cursor:pointer;
}
.einordnung .attribution {
  font-family:'Akzidenz Grotesk', sans-serif;
  font-size:12px; color:#5b544f; margin-top:28px;
}

/* -----------------------------------------------------------
   Wolke sections
   ----------------------------------------------------------- */
.wolke { padding:56px 24px 48px; }
.wolke .head {
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:6px;
}
.wolke .n {
  font-family:'Centennial SC', 'Centennial', serif;
  font-size:13px; letter-spacing:0.1em;
}
.wolke .width {
  font-family:'Akzidenz Grotesk', sans-serif;
  font-size:11px; color:#5b544f;
}
.wolke h2 {
  font-family:'Centennial', Georgia, serif; font-weight:400;
  font-size:30px; margin:0 0 4px; color:#211e1c;
}
.wolke .meta {
  font-family:'Akzidenz Grotesk', sans-serif;
  font-size:13px; letter-spacing:0.04em; color:#5b544f;
  margin-bottom:24px;
}
.wolke .frontal {
  width:100%; margin-bottom:8px;
  border-radius:10px; overflow:hidden;
}
.wolke .frontal img { width:100%; height:auto; display:block; }
.wolke .frontal.placeholder {
  aspect-ratio:4/3;
  background:
    repeating-linear-gradient(45deg, #e4e1da 0 12px, #dcd8cf 12px 24px);
  display:flex; align-items:center; justify-content:center;
  color:#5b544f; font-size:12px; letter-spacing:0.06em;
  text-align:center; padding:16px;
}
.wolke .detail {
  display:flex; gap:8px; margin-bottom:28px;
}
.wolke .detail .photo {
  flex:1; aspect-ratio:1/1;
  border-radius:6px; overflow:hidden; background:#e4e1da;
}
.wolke .detail .photo img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.wolke .detail .photo.placeholder {
  background:
    repeating-linear-gradient(45deg, #e4e1da 0 10px, #dcd8cf 10px 20px);
  display:flex; align-items:center; justify-content:center;
  color:#5b544f; font-size:11px; letter-spacing:0.06em;
  text-align:center; padding:10px;
}
.wolke .detail .text {
  flex:1; display:flex; flex-direction:column;
  justify-content:center; padding:0 4px;
}
.wolke .detail .label {
  font-family:'Akzidenz Grotesk', sans-serif;
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
}
.wolke .detail .spec {
  font-family:'Akzidenz Grotesk', sans-serif;
  font-size:13px; color:#5c5652; margin-top:4px;
}
.wolke .spacer { height:28px; }
.wolke .origins-label {
  font-family:'Akzidenz Grotesk', sans-serif;
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:#5b544f; margin-bottom:4px;
}
.wolke .origins {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  border-top:1px solid rgba(33,30,28,0.14);
}
.wolke .origins .cell {
  display:flex; align-items:center; gap:6px;
  padding:10px 6px 10px 4px;
  border-bottom:1px solid rgba(33,30,28,0.1);
  min-width:0;
}
.wolke .origins .num {
  font-family:'Akzidenz Grotesk', sans-serif;
  font-variant-numeric:tabular-nums;
  font-size:11px; color:#6b645e;
  width:15px; flex-shrink:0;
}
.wolke .origins .place {
  font-family:'Akzidenz Grotesk', sans-serif;
  font-size:12.5px; color:#211e1c;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wolke .legend-card {
  margin-top:20px;
  background:#fff;
  border:1px solid rgba(33,30,28,0.12);
  border-radius:10px;
  padding:14px;
}
.wolke .legend-card img {
  width:100%; height:auto; display:block;
}
.wolke .legend-card .cap {
  font-family:'Akzidenz Grotesk', sans-serif;
  font-size:11px; color:#6b645e;
  margin-top:8px; text-align:center;
}

/* -----------------------------------------------------------
   Lokale Einordnung
   ----------------------------------------------------------- */
.lokale { padding:56px 24px 40px; }
.lokale .kicker {
  font-family:'Akzidenz Grotesk', sans-serif;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:#5b544f; margin-bottom:16px;
}
.lokale p {
  font-family:'Centennial', Georgia, serif;
  font-size:19px; line-height:1.55; margin:0 0 24px;
  color:#211e1c;
}
.lokale .contact {
  font-family:'Akzidenz Grotesk', sans-serif;
  font-size:13.5px; line-height:1.7; color:#5c5652;
}

/* -----------------------------------------------------------
   Footer
   ----------------------------------------------------------- */
.site-footer {
  padding:32px 24px 48px;
  display:flex; flex-direction:column; gap:18px;
}
.site-footer .foot-nav {
  display:flex; gap:20px;
  font-family:'Akzidenz Grotesk', sans-serif;
  font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
}
.site-footer .foot-nav a {
  color:#211e1c; text-decoration:none;
}
.site-footer .foot-nav a:hover { color:#7E252C; }
.site-footer .foot-row {
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid rgba(33,30,28,0.12);
  padding-top:14px;
}
.site-footer .credit {
  font-family:'Akzidenz Grotesk', sans-serif;
  font-size:11px; color:#5b544f;
}
.site-footer .dots { display:flex; gap:3px; }
.site-footer .dots span {
  width:6px; height:6px; border-radius:50%;
}

/* -----------------------------------------------------------
   Legal subpages (Impressum, Datenschutz)
   ----------------------------------------------------------- */
.legal { padding:32px 24px 48px; }
.legal .kicker {
  font-family:'Akzidenz Grotesk', sans-serif;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:#5b544f; margin-bottom:12px;
}
.legal h1 {
  font-family:'Centennial', Georgia, serif; font-weight:400;
  font-size:34px; line-height:1.12;
  margin:0 0 24px;
}
.legal h2 {
  font-family:'Centennial', Georgia, serif; font-weight:400;
  font-size:22px; line-height:1.2;
  margin:32px 0 10px;
}
.legal h3 {
  font-family:'Akzidenz Grotesk', sans-serif; font-weight:400;
  font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  color:#5c5652; margin:22px 0 8px;
}
.legal p,
.legal ul,
.legal address {
  font-family:'Akzidenz Grotesk', sans-serif;
  font-size:14.5px; line-height:1.6; color:#3a3634;
  margin:0 0 14px; font-style:normal;
}
.legal ul { padding-left:20px; }
.legal ul li { margin-bottom:4px; }
.legal a { color:#7E252C; }
.legal a:hover { color:#D4652F; }

/* -----------------------------------------------------------
   Accessibility modal
   ----------------------------------------------------------- */
.a11y-scrim {
  position:fixed; inset:0;
  background:rgba(33,30,28,0.5); z-index:200;
  display:flex; align-items:flex-start; justify-content:flex-end;
  padding: calc(var(--header-h) + 12px) 16px 16px;
}
.a11y-scrim[hidden] { display:none; }
.a11y-panel {
  background:#eeece7; width:100%; max-width:320px;
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,0.35);
  overflow:hidden;
  font-family:'Akzidenz Grotesk', sans-serif;
}
.a11y-panel .head {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; background:#13447F; color:#fff;
}
.a11y-panel .head .title {
  font-family:'Centennial', Georgia, serif; font-size:18px;
}
.a11y-panel .head .close {
  cursor:pointer; font-size:20px; line-height:1;
  background:none; border:none; color:#fff; padding:0;
}
.a11y-panel .body {
  padding:18px; display:flex; flex-direction:column; gap:18px;
}
.a11y-panel .label {
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:#5b544f; margin-bottom:8px;
}
.a11y-panel .stepper {
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px solid rgba(33,30,28,0.14);
  border-radius:10px; padding:6px 10px;
}
.a11y-panel .stepper .btn {
  width:30px; height:30px; border-radius:50%;
  background:#13447F; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; cursor:pointer; border:none;
}
.a11y-panel .stepper .val { font-size:13px; color:#211e1c; }
.a11y-panel .segment { display:flex; gap:8px; }
.a11y-panel .segment .seg {
  flex:1; text-align:center; padding:9px 0;
  border-radius:10px; cursor:pointer; font-size:13px;
  background:#fff; color:#211e1c;
  border:1px solid rgba(33,30,28,0.14);
}
.a11y-panel .segment .seg.is-active { background:#13447F; color:#fff; }
.a11y-panel .row {
  display:flex; align-items:center; justify-content:space-between;
}
.a11y-panel .row .name { font-size:13.5px; color:#211e1c; }
.a11y-panel .switch {
  width:44px; height:26px; border-radius:13px;
  background:#d8d4cd; position:relative; cursor:pointer;
  border:none; padding:0;
  transition:background 0.15s ease;
}
.a11y-panel .switch .knob {
  position:absolute; top:2px; left:2px;
  width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.3);
  transition:left 0.15s ease;
}
.a11y-panel .switch.is-on { background:#13447F; }
.a11y-panel .switch.is-on .knob { left:20px; }
.a11y-panel .reset {
  text-align:center; font-size:12px; color:#7E252C;
  border-top:1px solid rgba(33,30,28,0.12);
  padding-top:14px; cursor:pointer;
  background:none; border-left:none; border-right:none; border-bottom:none;
  width:100%;
}

/* -----------------------------------------------------------
   A11y global overrides (dark, links)
   ----------------------------------------------------------- */
.wrap[data-a11y-theme="dark"] { filter: invert(1) hue-rotate(180deg); }
.wrap[data-a11y-theme="dark"][data-a11y-mono="true"] { filter: invert(1) hue-rotate(180deg) grayscale(1); }
.wrap[data-a11y-mono="true"] { filter: grayscale(1); }
.wrap[data-a11y-theme="dark"] img,
.wrap[data-a11y-theme="dark"] .frontal.placeholder,
.wrap[data-a11y-theme="dark"] .detail .photo.placeholder {
  filter: invert(1) hue-rotate(180deg);
}
body[data-a11y-links="true"] .wrap a {
  background:#ffe680 !important;
  color:#201f1d !important;
  text-decoration:underline !important;
  outline:2px solid #7E252C;
  border-radius:2px;
}

/* -----------------------------------------------------------
   Responsive tweaks — narrow viewports use a 2-row nav
   ----------------------------------------------------------- */
@media (max-width: 520px) {
  :root { --header-h: 74px; }

  .site-header .nav {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    column-gap:14px;
    row-gap:8px;
    max-width:520px;
    width:100%;
    padding: 8px 46px 8px 12px;   /* right room for absolute-positioned a11y icon */
    font-family:'Akzidenz Grotesk', sans-serif;
    font-size:11.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    position:relative;
    justify-content:flex-start;
  }
  .site-header .a11y-btn {
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    margin-left:0;
  }
  .site-header .a11y-btn svg { width:30px; height:30px; }
}
@media (max-width: 360px) {
  .portrait .photo { width:220px; height:220px; }
  .site-header .nav { column-gap:10px; font-size:11px; }
}

/* -----------------------------------------------------------
   Accessibility (WCAG 2.1 AA / EAA / EN 301 549)
   ----------------------------------------------------------- */

/* Skip-to-content link — visible only on keyboard focus */
.skip-link {
  position:absolute; top:0; left:0;
  transform:translateY(-120%);
  background:#13447F; color:#fff;
  padding:10px 16px;
  font-family:'Akzidenz Grotesk', sans-serif;
  font-size:13px; letter-spacing:0.04em;
  text-decoration:none;
  z-index:300;
  border-radius:0 0 8px 0;
  transition: transform 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform:translateY(0);
  color:#fff;
  outline:2px solid #fff;
  outline-offset:2px;
}

/* Keyboard focus indicator — visible only on keyboard interaction */
:focus-visible {
  outline:2px solid #13447F;
  outline-offset:3px;
  border-radius:2px;
}
.site-header .a11y-btn:focus-visible {
  outline:2px solid #13447F;
  outline-offset:4px;
  border-radius:50%;
}
.wolke .frontal img:focus-visible,
img:focus-visible { outline:2px solid #13447F; }

/* Kicker headings — same visual style whether used as div or h2/h3 */
h2.kicker, h3.kicker {
  font-weight:400;
  margin:0 0 16px;
}

/* Screen-reader-only utility */
.sr-only {
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Respect user's motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .opener .wandabwicklung { opacity:1 !important; animation:none !important; }
  .side-indicator .halo,
  .side-indicator .dot { transition:none !important; }
}