/* ==========================================================================
   FOODPOINT — "Food. Punkt."  Concept by Claude
   One red point carries the whole site: full stop, price sticker, map pin,
   cursor and the portal the camera flies through.
   ========================================================================== */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-italic-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --red: #d7141c;
  --red-deep: #b41412;
  --ink: #0d0c0c;
  --ink-2: #161413;
  --ink-3: #221f1d;
  --paper: #f3f1ee;
  --stone: #e5e1dc;
  --mute: #8b857e;
  --white: #fff;
  --f-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-snap: cubic-bezier(.76, 0, .24, 1);
  --pad: clamp(20px, 4.4vw, 72px);
  --bar-h: 100px;
  --v: 0;
}

@view-transition { navigation: auto; }

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  color: var(--white);
  background: var(--ink);
  font-family: var(--f-sans);
  font-size: 17px;
  font-stretch: 100%;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ol, ul, figure, blockquote, address { margin: 0; padding: 0; }
ol, ul { list-style: none; }
address { font-style: normal; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }

.sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

.skip {
  position: fixed; left: 16px; top: -80px; z-index: 200;
  padding: 12px 18px; color: var(--white); background: var(--red);
  font-weight: 700; text-decoration: none; transition: top .2s;
}
.skip:focus { top: 16px; }

/* The one idea: a red point. It is always a real circle, never a glyph, so it can grow into a portal. */
.dot {
  display: inline-block;
  width: .2em;
  height: .2em;
  margin-left: .045em;
  border-radius: 50%;
  background: var(--red);
  vertical-align: baseline;
  font-style: normal;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(18px, 2.4vw, 32px);
  font-family: var(--f-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--red);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  font-weight: 700; font-stretch: 88%; letter-spacing: .02em; text-decoration: none;
  border: 1.5px solid currentColor;
  transition: transform .5s var(--ease-out), background-color .25s, color .25s, border-color .25s;
}
.btn:hover { transform: translateY(-3px); }
.btn--red { color: var(--white); background: var(--red); border-color: var(--red); }
.btn--red:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--ghost { color: var(--white); background: transparent; }
.btn--ghost:hover { background: var(--white); color: var(--ink); }

/* ==========================================================================
   Header
   ========================================================================== */

.bar {
  position: fixed; inset: 0 0 auto; z-index: 80;
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: clamp(14px, 2.4vw, 36px);
  height: var(--bar-h);
  padding: 0 var(--pad);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
/* a forgiving hit area: the words in the bar are small, the surface behind them is not */
.bar__nav a { padding: 12px 6px; margin: -12px -6px; }
/* once content scrolls underneath, the bar gets a backdrop so the white logo never
   sits on white photos or partner tiles; the tone JS switches it to the light variant */
.bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(13, 12, 12, .8);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
          backdrop-filter: blur(14px) saturate(1.2);
  opacity: 0; transition: opacity .4s, background-color .35s;
}
.bar.is-compact::before { opacity: 1; }
.bar.on-light::before { background: rgba(243, 241, 238, .86); }
.menu-open .bar::before { opacity: 0; }

/* Inverse logo on dark sections, the original on light ones; both are stacked
   and cross-faded by the tone JS already sets for the navigation. */
.sign {
  position: relative;
  display: block;
  padding: 6px 0;
  transition: transform .6s var(--ease-out);
}
.sign img { width: clamp(184px, 16vw, 252px); height: auto; transition: opacity .35s; }
.sign__light { position: absolute; left: 0; top: 6px; opacity: 0; }
.bar.on-light .sign__dark { opacity: 0; }
.bar.on-light .sign__light { opacity: 1; }
.sign:hover { transform: translateY(-2px); }
.sign__mono { position: absolute; left: 0; top: 6px; opacity: 0; }
/* on the red menu the logo turns all white, so the red phoenix and script never sink into the red */
.menu-open .sign__dark, .menu-open .sign__light { opacity: 0; }
.menu-open .sign__mono { opacity: 1; }

/* The fixed bar is its own stacking context, so blend modes cannot see the page
   behind it; JS flags the tone of the section underneath instead. */
.bar__nav {
  display: flex; justify-content: center; gap: clamp(16px, 2.6vw, 42px);
  color: var(--white);
  transition: color .35s;
}
.bar.on-light .bar__nav { color: var(--ink); }
.bar__nav a {
  position: relative;
  font-size: .92rem; font-weight: 600; font-stretch: 92%; letter-spacing: .02em; text-decoration: none;
}
.bar__nav a::after {
  content: ""; position: absolute; left: 50%; bottom: -9px;
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  transform: translateX(-50%) scale(0); transition: transform .4s var(--ease-out);
}
.bar__nav a:hover::after, .bar__nav a:focus-visible::after { transform: translateX(-50%) scale(1); }

.status {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 38px; padding: 0 15px;
  color: var(--white); background: rgba(13, 12, 12, .86);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 99px;
  backdrop-filter: blur(10px);
  font-family: var(--f-mono); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.status__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mute); }
.status.is-open .status__dot { background: var(--red); animation: beat 1.8s var(--ease-out) infinite; }

@keyframes beat {
  0% { box-shadow: 0 0 0 0 rgba(215, 20, 28, .7); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(215, 20, 28, 0); }
}

.burger {
  display: none; align-items: center; gap: 12px;
  min-height: 46px; padding: 0 6px 0 16px;
  background: var(--white); color: var(--ink); border: 0; border-radius: 99px; cursor: pointer;
  font-family: var(--f-mono); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.burger__lines { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--red); }
.burger__lines i { position: absolute; width: 14px; height: 2px; background: var(--white); transition: transform .45s var(--ease-out); }
.burger__lines i:first-child { transform: translateY(-3px); }
.burger__lines i:last-child { transform: translateY(3px); }
.burger[aria-expanded="true"] .burger__lines i:first-child { transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines i:last-child { transform: rotate(-45deg); }

/* full-screen menu, opened as a red point that swallows the screen */
.menu {
  position: fixed; inset: 0; z-index: 70;
  display: grid; align-content: center; gap: 40px;
  padding: 120px var(--pad) 48px;
  background: var(--red);
  clip-path: circle(0 at var(--mx, 90%) var(--my, 44px));
  transition: clip-path .8s var(--ease-snap);
}
.menu[hidden] { display: grid; visibility: hidden; }
.menu.is-open { clip-path: circle(150vmax at var(--mx, 90%) var(--my, 44px)); visibility: visible; }
.menu nav { display: grid; gap: 4px; }
.menu nav a {
  display: flex; align-items: baseline; gap: 16px;
  font-size: clamp(2.8rem, 13vw, 6.5rem); font-weight: 850; font-stretch: 68%; line-height: .98; letter-spacing: -.02em;
  text-decoration: none;
  transform: translateY(40px); opacity: 0;
  transition: transform .8s var(--ease-out), opacity .6s;
}
.menu.is-open nav a { transform: none; opacity: 1; }
.menu.is-open nav a:nth-child(2) { transition-delay: .06s; }
.menu.is-open nav a:nth-child(3) { transition-delay: .12s; }
.menu.is-open nav a:nth-child(4) { transition-delay: .18s; }
.menu.is-open nav a:nth-child(5) { transition-delay: .24s; }
.menu nav small { font-family: var(--f-mono); font-size: .8rem; font-weight: 600; letter-spacing: .1em; }
.menu__foot { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; }

/* chapter rail: the point travels down the right edge */
.rail {
  position: fixed; top: 50%; right: clamp(14px, 1.6vw, 28px); z-index: 60;
  --rail-ink: #fff;
  transform: translateY(-50%);
}
.rail.on-light { --rail-ink: var(--ink); }
.rail ol { position: relative; display: grid; gap: 22px; }
.rail ol::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; right: 3px; width: 1px;
  background: var(--rail-ink); opacity: .4; transition: background-color .35s;
}
.rail a { position: relative; display: block; width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--rail-ink); transition: background-color .35s; }
.rail a span {
  position: absolute; right: 18px; top: 50%;
  color: var(--rail-ink); font-family: var(--f-mono); font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transform: translate(6px, -50%); transition: opacity .3s, transform .4s var(--ease-out), color .35s;
}
.rail a:hover span, .rail a:focus-visible span, .rail a.is-current span { opacity: 1; transform: translate(0, -50%); }
.rail__dot {
  position: absolute; right: -4px; top: 0;
  width: 15px; height: 15px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 0 4px rgba(215, 20, 28, .2);
  transform: translateY(calc(var(--rp, 0) * (var(--rh, 160px) - 15px)));
  pointer-events: none;
}

/* ==========================================================================
   01 · Prolog / Portal
   ========================================================================== */

.hero { position: relative; height: 270vh; background: var(--ink); }

.hero__stage {
  position: sticky; top: 0;
  display: grid; grid-template-rows: 1fr auto; align-content: end;
  height: 100svh; min-height: 560px;
  padding: calc(var(--bar-h) + 4vh) var(--pad) clamp(26px, 5vh, 56px);
  overflow: hidden;
  isolation: isolate;
}

.hero__grain {
  position: absolute; inset: -50%; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); }
  60% { transform: translate(-6%, -2%); } 80% { transform: translate(5%, 4%); } 100% { transform: translate(0, 0); }
}

.hero__meta {
  position: absolute; top: calc(var(--bar-h) + 18px); right: var(--pad);
  display: flex; gap: 18px;
  color: rgba(255, 255, 255, .55);
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
}
.hero__meta span + span::before { content: "·"; margin-right: 18px; color: var(--red); }

.hero__title {
  align-self: end;
  font-size: clamp(3.1rem, 10vw, 12rem);
  font-weight: 860;
  font-stretch: 66%;
  line-height: .87;
  letter-spacing: -.028em;
  transform-origin: 30% 80%;
  transform: scale(calc(1 + var(--pp, 0) * .1));
  opacity: calc(1 - max(0, var(--pp, 0) - .45) * 2.4);
}
.hero__title .line { display: block; overflow: hidden; padding: 0 .1em .2em 0; margin: 0 -.1em -.155em 0; }
/* the full stop may never be orphaned on a line of its own; the soft hyphen breaks the word instead */
.hero__title .nb { white-space: nowrap; }
.hero__title .line__in {
  position: relative; display: inline-block;
  transform: translateY(105%);
  animation: rise 1.2s var(--ease-out) forwards;
  animation-delay: calc(.25s + var(--n, 0) * .13s);
}
.hero__title .line:nth-child(2) .line__in { --n: 1; }
.hero__title .line:nth-child(3) .line__in { --n: 2; }
@keyframes rise { to { transform: translateY(0); } }

/* motion trail — a Motors-style speed ghost, but made of our own words */
/* At rest the ghosts are invisible; they smear out behind the words on the
   intro and again whenever the page is scrolled fast (--v, --va from JS). */
.hero__title .line__in::before,
.hero__title .line__in::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0; z-index: -1;
  white-space: nowrap; pointer-events: none;
  transform: translateX(calc(var(--v, 0) * var(--k) * -1em));
  opacity: calc(var(--va, 0) * var(--o));
  animation: trail 1.5s var(--ease-out) backwards;
  animation-delay: inherit;
}
.hero__title .line__in::before { color: var(--red); --k: .014; --o: .8; --tx: -.55em; --o0: .6; }
.hero__title .line__in::after { color: rgba(255, 255, 255, .3); --k: .03; --o: .6; --tx: -1.2em; --o0: .4; }
@keyframes trail { from { transform: translateX(var(--tx)); opacity: var(--o0); } }

.hero__title .dot {
  transform: scale(0);
  animation: pop .9s var(--ease-out) forwards;
  animation-delay: calc(.95s + var(--n, 0) * .13s);
}
@keyframes pop {
  0% { transform: scale(0); } 60% { transform: scale(1.35); } 100% { transform: scale(1); }
}
.hero__title .dot--portal { box-shadow: 0 0 0 0 rgba(215, 20, 28, .55); animation: pop .9s var(--ease-out) forwards, lure 2.2s 2.6s var(--ease-out) infinite; }
@keyframes lure {
  0% { box-shadow: 0 0 0 0 rgba(215, 20, 28, .55); }
  70%, 100% { box-shadow: 0 0 0 .5em rgba(215, 20, 28, 0); }
}

.hero__foot {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: clamp(18px, 3vw, 48px);
  margin-top: clamp(26px, 5vh, 52px);
  opacity: calc(1 - var(--pp, 0) * 3);
}
/* the same voice as the status pill in the bar: the mono face, its weight and its letter spacing, only
   left in sentence case - two lines set in capitals would shout louder than the headline above them */
/* exactly the voice of the status pill in the bar - same face, weight, spacing and size - and on one
   line, so it reads as a caption under the headline rather than a paragraph. Only a phone lets it wrap. */
.hero__lead {
  max-width: 44ch;
  color: rgba(255, 255, 255, .78);
  font-family: var(--f-mono); font-weight: 600; letter-spacing: .06em;
  font-size: .72rem; line-height: 1.6;
  animation: fade 1s 1.4s both;
}
/* one line only where the column is actually wide enough for it - below that it wraps instead of running
   under the buttons beside it */
@media (min-width: 1180px) { .hero__lead { max-width: none; white-space: nowrap; } }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; animation: fade 1s 1.55s both; }
.hero__cue {
  display: flex; align-items: center; gap: 12px;
  color: rgba(255, 255, 255, .55);
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  animation: fade 1s 1.8s both;
}
.hero__cue-line { position: relative; width: 44px; height: 1px; overflow: hidden; background: rgba(255, 255, 255, .2); }
.hero__cue-line::after { content: ""; position: absolute; inset: 0; background: var(--red); animation: cue 1.8s var(--ease-snap) infinite; }
@keyframes cue { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.portal {
  position: absolute; inset: 0; z-index: 2;
  clip-path: circle(var(--r, 0px) at var(--px, 80%) var(--py, 70%));
  pointer-events: none;
}
.portal img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%;
  transform: scale(calc(1.5 - var(--pp, 0) * .5));
  transform-origin: var(--px, 80%) var(--py, 70%);
}
.portal__caption {
  position: absolute; left: var(--pad); bottom: clamp(26px, 6vh, 64px);
  display: grid; gap: 10px;
  opacity: clamp(0, (var(--pp, 0) - .78) * 6, 1);
  transform: translateY(calc((1 - clamp(0, (var(--pp, 0) - .78) * 6, 1)) * 30px));
}
.portal__caption strong {
  padding: 14px 22px 16px;
  color: var(--ink); background: var(--white);
  font-size: clamp(1.9rem, 4.6vw, 4.6rem); font-weight: 850; font-stretch: 68%; line-height: .95; letter-spacing: -.02em;
}
/* "> span" matters: without it the small dark tag also styled the <span class="nw"> inside the headline,
   and "FOODPOINT." ended up in a little grey box next to "Willkommen im" */
.portal__caption > span {
  justify-self: start; padding: 6px 10px;
  color: var(--white); background: rgba(13, 12, 12, .7);
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
}

/* ==========================================================================
   02 · Im Laden — stickers on a real photograph
   ========================================================================== */

.shop {
  position: relative;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  min-height: 118vh;
  background: var(--ink);
  overflow: hidden;
}
.shop__photo {
  grid-column: 2; grid-row: 1;
  position: relative; min-height: 100%;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}
.shop__photo img {
  position: absolute; inset: -8% 0; width: 100%; height: 116%;
  object-fit: cover; object-position: 50% 30%;
  transform: translateY(calc((var(--p, 0) - .5) * -8%));
}
.shop__copy {
  grid-column: 1; grid-row: 1; align-self: center;
  padding: 18vh var(--pad);
  position: relative; z-index: 2;
}
.shop__title {
  font-size: clamp(3rem, 6.6vw, 7.6rem); font-weight: 860; font-stretch: 66%; line-height: .9; letter-spacing: -.025em;
}
.shop__text { max-width: 36ch; margin-top: 28px; color: rgba(255, 255, 255, .74); font-size: clamp(1.02rem, 1.2vw, 1.18rem); }

.stickers { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sticker {
  position: absolute;
  display: grid; place-content: center; text-align: center;
  width: clamp(116px, 11vw, 176px); aspect-ratio: 1;
  border-radius: 50%;
  color: var(--white); background: var(--red);
  box-shadow: 0 18px 38px -16px rgba(0, 0, 0, .7), inset 0 0 0 3px rgba(255, 255, 255, .9), inset 0 0 0 5px var(--red);
  transform: translateY(calc(var(--depth, 0) * (var(--p, 0) - .5) * -120px)) rotate(var(--rot, -8deg)) scale(0);
  transition: transform .9s var(--ease-out);
}
.sticker.is-in { transform: translateY(calc(var(--depth, 0) * (var(--p, 0) - .5) * -120px)) rotate(var(--rot, -8deg)) scale(1); }
.sticker small { font-family: var(--f-mono); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sticker b { font-size: clamp(1.25rem, 1.7vw, 1.8rem); font-weight: 850; font-stretch: 70%; line-height: .95; }
.sticker--a { left: 52%; top: 16%; --rot: -9deg; --depth: 1.2; }
.sticker--b { right: 8%; top: 30%; --rot: 7deg; --depth: .6; border-radius: 22px; transition-delay: .12s; }
.sticker--c { left: 60%; bottom: 20%; --rot: -4deg; --depth: 1.6; transition-delay: .24s; background: var(--white); color: var(--ink); box-shadow: 0 18px 38px -16px rgba(0, 0, 0, .7), inset 0 0 0 3px var(--red); }
.sticker--c b { font-size: clamp(1rem, 1.25vw, 1.35rem); }
.sticker--d { right: 12%; bottom: calc(7vw + 150px); --rot: 11deg; --depth: .9; transition-delay: .36s; background: var(--ink); box-shadow: 0 18px 38px -16px rgba(0, 0, 0, .7), inset 0 0 0 3px var(--red); }

.band {
  position: absolute; left: -4vw; right: -4vw; bottom: 7vw; z-index: 4;
  padding: 16px 0 18px;
  background: var(--red);
  transform: rotate(-2.4deg);
  overflow: hidden;
}
.band__track {
  display: flex; gap: 42px; width: max-content;
  font-size: clamp(1.8rem, 3.6vw, 3.6rem); font-weight: 860; font-stretch: 66%; line-height: 1; letter-spacing: -.01em;
  white-space: nowrap;
  animation: marquee 28s linear infinite;
  transform: skewX(calc(var(--v) * -.35deg));
}
.band__track .dot { background: var(--ink); }
@keyframes marquee { to { translate: -50% 0; } }

/* ==========================================================================
   03 · Idee
   ========================================================================== */

.idea {
  position: relative; z-index: 5;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 6vw, 110px);
  padding: clamp(120px, 16vw, 230px) var(--pad) clamp(90px, 12vw, 170px);
  color: var(--ink); background: var(--paper);
  clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0 100%);
  margin-top: -5vw;
}
.idea__title {
  font-size: clamp(4rem, 12vw, 15rem); font-weight: 880; font-stretch: 62%; line-height: .84; letter-spacing: -.035em;
}
.idea__copy { align-self: end; display: grid; gap: 22px; max-width: 58ch; color: #3a3633; font-size: clamp(1.02rem, 1.2vw, 1.16rem); }
.idea__lead { color: var(--ink); font-size: clamp(1.35rem, 2.1vw, 1.9rem); font-weight: 600; font-stretch: 92%; line-height: 1.25; letter-spacing: -.01em; }

.loop {
  grid-column: 1 / -1;
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 48px);
  margin-top: clamp(40px, 7vw, 110px);
  /* the air above the three steps, and the box the red flow line lives in - one value, so the line can
     never grow taller than the space over the rules and cut through them */
  --flow: clamp(80px, 9vw, 140px);
  padding-top: var(--flow);
}
.loop__line { position: absolute; inset: 0 0 auto; width: 100%; height: calc(var(--flow) - 14px); overflow: visible; }
.loop__line path {
  fill: none; stroke: var(--red); stroke-width: 3; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--lp, 0));
}
.loop__step { position: relative; padding-top: 26px; border-top: 2px solid var(--ink); }
.loop__num { display: block; margin-bottom: 18px; font-family: var(--f-mono); font-size: .78rem; font-weight: 700; letter-spacing: .12em; color: var(--red); }
.loop__step h3 { font-size: clamp(2.2rem, 4.4vw, 4.8rem); font-weight: 860; font-stretch: 70%; line-height: .92; letter-spacing: -.02em; }
.loop__step p { max-width: 30ch; margin-top: 16px; color: #3a3633; }

/* ==========================================================================
   04 · Zahlen
   ========================================================================== */

.figures {
  position: relative; z-index: 6;
  padding: clamp(110px, 12vw, 200px) var(--pad) clamp(110px, 12vw, 200px);
  color: var(--white); background: var(--red);
  clip-path: polygon(0 0, 100% 4vw, 100% 100%, 0 calc(100% - 4vw));
  margin: -4vw 0;
}
.figures__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.figure { border-top: 2px solid rgba(255, 255, 255, .5); padding-top: 22px; }
.figure__num {
  display: flex; align-items: baseline;
  font-size: clamp(5rem, 12.5vw, 15rem); font-weight: 900; font-stretch: 62%; line-height: .8; letter-spacing: -.04em;
}
.figure__num .dot { background: var(--ink); }
.figure p { display: grid; gap: 4px; margin-top: 20px; font-size: .98rem; color: rgba(255, 255, 255, .86); }
.figure p b { color: var(--white); font-size: clamp(1.15rem, 1.5vw, 1.4rem); font-stretch: 86%; }

/* clip only vertically: the rolling digits hide above and below, the glyph edges stay whole */
.odo { display: inline-flex; overflow-x: visible; overflow-y: clip; height: .8em; line-height: .8; }
.odo__col { display: flex; flex-direction: column; transform: translateY(0); transition: transform 1.6s var(--ease-out); transition-delay: var(--delay, 0s); }
.odo__col span { height: .8em; }

/* ==========================================================================
   05 · Stadtplan
   ========================================================================== */

.city {
  position: relative;
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 90px); align-items: center;
  padding: clamp(150px, 16vw, 240px) var(--pad) clamp(80px, 9vw, 140px);
  background: var(--ink);
}
.city__title { font-size: clamp(3.4rem, 8vw, 9.6rem); font-weight: 860; font-stretch: 64%; line-height: .86; letter-spacing: -.03em; }
.city__text { max-width: 34ch; margin-top: 26px; color: rgba(255, 255, 255, .72); }
.city__list { display: grid; margin-top: clamp(30px, 4vw, 56px); border-top: 1px solid rgba(255, 255, 255, .16); }
.city__list a {
  display: grid; grid-template-columns: 38px 1fr auto; align-items: baseline; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .12);
  text-decoration: none;
  transition: padding .45s var(--ease-out), color .2s;
}
.city__list a:hover, .city__list a:focus-visible, .city__list a.is-hot { padding-left: 12px; color: var(--red); }
.city__num { font-family: var(--f-mono); font-size: .76rem; color: var(--red); }
.city__name { font-size: 1.14rem; font-weight: 700; font-stretch: 86%; }
.city__code { font-family: var(--f-mono); font-size: .72rem; color: rgba(255, 255, 255, .5); letter-spacing: .06em; text-align: right; }
.city__code em { font-style: normal; color: var(--red); }

.city__map { position: relative; }
.city__map svg { width: 100%; height: auto; overflow: visible; }
.city__map figcaption { margin-top: 10px; color: rgba(255, 255, 255, .45); font-family: var(--f-mono); font-size: .7rem; letter-spacing: .06em; }
.city__rings circle { fill: none; stroke: rgba(255, 255, 255, .08); stroke-dasharray: 2 7; }
.city__route { fill: none; stroke: rgba(215, 20, 28, .55); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.8s var(--ease-out) .4s; }
.city__map.is-in .city__route { stroke-dashoffset: 0; }
.city__north { fill: rgba(255, 255, 255, .4); font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; }

.pin { cursor: pointer; }
.pin__dot { fill: var(--red); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .8s var(--ease-out); transition-delay: calc(var(--d) * .09s + .2s); }
.pin__ring { fill: none; stroke: var(--red); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.city__map.is-in .pin__dot { transform: scale(1); }
.city__map.is-in .pin__ring { animation: ripple 2.6s var(--ease-out) infinite; animation-delay: calc(var(--d) * .23s + .6s); }
@keyframes ripple { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.3); } }
.pin__label { fill: rgba(255, 255, 255, .72); font-family: var(--f-mono); font-size: 13px; letter-spacing: .02em; opacity: 0; transition: opacity .6s, fill .2s; transition-delay: calc(var(--d) * .09s + .5s); }
.city__map.is-in .pin__label { opacity: 1; }
.pin:hover .pin__dot, .pin:focus-visible .pin__dot, .pin.is-hot .pin__dot { transform: scale(1.7); transition-delay: 0s; }
.pin:hover .pin__label, .pin:focus-visible .pin__label, .pin.is-hot .pin__label { fill: var(--white); }
.pin:focus-visible { outline: none; }

/* ==========================================================================
   06 · Track — eleven stops, travelled sideways by ordinary vertical scrolling
   ========================================================================== */

.track { position: relative; height: calc(11 * 82vh); background: var(--ink); }
/* clip, not hidden: a hidden box is still a scroll container, and focusing a link in
   an off-screen panel would make the browser scroll it sideways under the belt */
.track__stage { position: sticky; top: 0; height: 100svh; overflow: clip; }
.track__belt {
  display: flex; width: calc(11 * 100vw); height: 100%;
  transform: translate3d(calc(var(--tp, 0) * (100vw - 100%)), 0, 0);
  will-change: transform;
}

.panel {
  position: relative; flex: 0 0 100vw; height: 100%;
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 70px); align-items: center;
  padding: calc(var(--bar-h) + 30px) calc(var(--pad) + 30px) 130px var(--pad);
  background: var(--ink);
  overflow: clip;
}
.panel--alt { background: var(--ink-2); }

.panel__code {
  position: absolute; left: -.04em; bottom: -.2em; z-index: 0;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .11);
  font-size: 36vw; font-weight: 900; font-stretch: 125%; line-height: 1; letter-spacing: -.05em;
  transform: translateX(calc(var(--lp, 0) * -22vw));
  pointer-events: none; user-select: none;
}
.panel.is-active .panel__code { -webkit-text-stroke-color: rgba(215, 20, 28, .38); transition: -webkit-text-stroke-color 1s; }

.panel__info { position: relative; z-index: 2; transform: translateX(calc(var(--lp, 0) * -6vw)); }
.panel__index { display: flex; align-items: baseline; gap: 6px; font-family: var(--f-mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.panel__index b { color: var(--red); font-size: 1.05rem; }
.panel__index span { margin-right: 12px; }
.panel__name {
  margin-top: 14px;
  font-size: clamp(3rem, 6.8vw, 8.4rem); font-weight: 870; font-stretch: 64%; line-height: .86; letter-spacing: -.03em;
  overflow-wrap: anywhere;
}
.panel__tag {
  display: inline-block; margin-top: 18px; padding: 7px 16px 8px;
  color: var(--white); background: var(--red);
  font-family: var(--f-mono); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  transform: skewX(-12deg);
}
.panel__address { margin-top: 24px; font-size: clamp(1.1rem, 1.4vw, 1.3rem); font-weight: 600; font-stretch: 90%; line-height: 1.4; }
.panel__soon { margin-top: 10px; color: rgba(255, 255, 255, .6); }
.panel__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.chip {
  display: inline-grid; gap: 1px; align-content: center;
  min-height: 54px; padding: 8px 18px;
  color: var(--white); background: var(--red); border: 1.5px solid var(--red); border-radius: 12px;
  font-weight: 700; font-stretch: 90%; text-decoration: none; line-height: 1.2;
  transition: transform .45s var(--ease-out), background-color .25s, color .25s;
}
.chip span { font-family: var(--f-mono); font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.chip:hover { transform: translateY(-3px); background: var(--white); color: var(--ink); border-color: var(--white); }
.chip--ghost { background: transparent; border-color: rgba(255, 255, 255, .4); }

.panel__photos {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 22px);
  height: min(66svh, 640px);
}
.shot {
  position: relative; display: block; width: 100%; height: 100%; min-height: 0;
  padding: 0; border: 0; background: var(--ink-3); cursor: zoom-in; overflow: hidden;
}
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), filter .6s; }
.shot:hover img { transform: scale(1.06); }
.shot--a { grid-row: 1 / 3; clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%); transform: translateY(calc(var(--lp, 0) * 4vh)); }
.shot--b { transform: translateY(calc(var(--lp, 0) * -6vh)); }
.shot--b img, .shot--c img { object-position: 50% 24%; }
.badge-card { position: relative; min-height: 0; transform: translateY(calc(var(--lp, 0) * 7vh)); }
.panel__photos > .shot--c { transform: translateY(calc(var(--lp, 0) * 7vh)); }
.badge {
  position: absolute; left: -18px; bottom: 16px;
  display: grid; gap: 2px; padding: 10px 16px 11px;
  color: var(--ink); background: var(--white);
  border-top: 5px solid var(--red); border-radius: 3px;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .7);
  font-size: 1.32rem; font-weight: 850; font-stretch: 78%; line-height: 1;
  transform: rotate(-3deg);
}
.badge small { font-family: var(--f-mono); font-size: .56rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }

.track__rail {
  position: absolute; left: var(--pad); right: calc(var(--pad) + 30px); bottom: 48px; z-index: 5;
  height: 20px;
}
.track__line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, .22); }
.track__runner {
  position: absolute; top: 50%; left: calc(var(--tp, 0) * 100%);
  width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 6px rgba(215, 20, 28, .22);
}
.track__stop {
  position: absolute; top: 50%; left: calc(var(--at) * 100%);
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  transition: transform .4s var(--ease-out), background-color .3s;
}
.track__stop span {
  position: absolute; bottom: 18px; left: 50%;
  padding: 4px 8px; color: var(--ink); background: var(--white);
  font-family: var(--f-mono); font-size: .66rem; font-weight: 700; letter-spacing: .06em; white-space: nowrap;
  opacity: 0; transform: translate(-50%, 6px); transition: opacity .25s, transform .35s var(--ease-out);
  pointer-events: none;
}
.track__stop:hover { transform: scale(1.8); background: var(--white); }
.track__stop:hover span, .track__stop.is-active span { opacity: 1; transform: translate(-50%, 0); }
.track__stop.is-active { background: var(--white); }

/* ==========================================================================
   07 · Team
   ========================================================================== */

.team {
  position: relative; z-index: 5;
  padding: clamp(120px, 14vw, 220px) 0 clamp(90px, 10vw, 160px);
  color: var(--ink); background: var(--paper);
  clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 100%);
  margin-top: -5vw;
  overflow: clip;
}
.team__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 30px; padding: 0 var(--pad); }
.team__head .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.team__title { font-size: clamp(3.2rem, 8vw, 9.4rem); font-weight: 870; font-stretch: 64%; line-height: .86; letter-spacing: -.03em; }
.team__text { max-width: 26ch; color: #4a4541; font-family: var(--f-mono); font-size: .82rem; letter-spacing: .04em; }
.team__rows { display: grid; gap: clamp(16px, 2vw, 28px); margin-top: clamp(50px, 6vw, 90px); }
.team__row {
  display: flex; gap: clamp(14px, 1.6vw, 24px); width: max-content;
  padding-left: var(--pad);
  transform: translate3d(calc(var(--dir, 1) * (var(--p, 0) - .5) * -26vw), 0, 0);
}
.team__row--b { --dir: -1; margin-left: -18vw; }
.team__row.is-focus { transform: translate3d(var(--focus-x, 0), 0, 0); transition: transform .6s var(--ease-out); }
.team { --fh: clamp(253px, 22.6vw, 360px); }
.face { flex: 0 0 auto; width: calc(var(--fh) * .75); }
.face--wide { width: calc(var(--fh) * 1.4); }
.face__shot { width: 100%; height: var(--fh); aspect-ratio: auto; }
.face__shot img { object-position: 50% 20%; filter: grayscale(.12); }
.face__shot:hover img { filter: none; }
.face__plate { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 12px; border-top: 2px solid var(--ink); padding-top: 9px; }
.face__plate b { font-size: 1.3rem; font-weight: 850; font-stretch: 78%; }
.face__plate span { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .06em; color: #6b655f; text-transform: uppercase; }

/* ==========================================================================
   08 · Öffnungszeiten — a receipt that prints itself
   ========================================================================== */

.hours {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: clamp(30px, 6vw, 110px); align-items: start;
  padding: clamp(110px, 12vw, 190px) var(--pad);
  color: var(--ink); background: var(--stone);
}
.hours__title { font-size: clamp(3.6rem, 9vw, 11rem); font-weight: 880; font-stretch: 62%; line-height: .84; letter-spacing: -.035em; }
.hours__live {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: clamp(40px, 4.4vw, 84px); padding: 12px 20px;
  color: var(--white); background: var(--ink);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-weight: 750; font-stretch: 86%;
}
.hours__live-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--mute); }
.hours__live.is-open .hours__live-dot { background: var(--red); animation: beat 1.8s infinite; }
.hours__note { max-width: 36ch; margin-top: 22px; color: #4a4541; }

.printer { position: relative; padding-top: 14px; }
.printer__slot {
  position: absolute; left: -18px; right: -18px; top: 0; z-index: 2; height: 30px;
  background: linear-gradient(#262321, #0d0c0c); border-radius: 8px;
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .6);
}
.printer__slot::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 7px; height: 3px; border-radius: 3px; background: #000; }
.receipt {
  position: relative; z-index: 1;
  padding: 44px 28px 34px;
  color: #1c1a19; background: #fdfcf9;
  font-family: var(--f-mono); font-size: .86rem; line-height: 1.7;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
  transform: translateY(-104%);
  clip-path: inset(0 0 0 0);
}
.printer.is-in .receipt { animation: print 2.4s steps(14, end) forwards; }
@keyframes print { to { transform: translateY(0); } }
.receipt__head { display: grid; justify-items: center; gap: 2px; text-align: center; letter-spacing: .08em; }
.receipt__head b { font-size: 1.2rem; letter-spacing: .24em; }
.receipt__rule { height: 0; margin: 16px 0; border-top: 1.5px dashed #1c1a19; }
.receipt__table { width: 100%; border-collapse: collapse; }
.receipt__table th { width: 22%; text-align: left; font-weight: 700; }
.receipt__table td { text-align: right; }
.receipt__table tr.is-today { color: var(--red); font-weight: 700; }
.receipt__table tr.is-today th::after { content: " ●"; }
.receipt__table tr.is-closed td { letter-spacing: .06em; }
.receipt__total { display: flex; justify-content: space-between; font-weight: 700; letter-spacing: .06em; }
.receipt__thanks { text-align: center; letter-spacing: .12em; }
.receipt__code {
  height: 54px; margin: 18px auto 8px; width: 84%;
  background: repeating-linear-gradient(90deg, #1c1a19 0 2px, transparent 2px 5px, #1c1a19 5px 6px, transparent 6px 9px, #1c1a19 9px 12px, transparent 12px 14px);
}

/* ==========================================================================
   09 · Verein & Partner
   ========================================================================== */

.club { padding: clamp(110px, 12vw, 200px) var(--pad); color: var(--ink); background: var(--white); }
.club__quote p {
  max-width: 14ch;
  font-size: clamp(3rem, 8vw, 9.6rem); font-style: italic; font-weight: 800; font-stretch: 72%; line-height: .9; letter-spacing: -.03em;
}
.club__quote footer { margin-top: 24px; font-family: var(--f-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.club__grid { display: grid; justify-items: start; gap: 26px; max-width: 62ch; margin-top: clamp(50px, 7vw, 110px); margin-left: auto; }
.club__text { font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.5; color: #2c2927; }
.club__link {
  display: inline-block; padding-bottom: 5px; font-weight: 750; font-stretch: 90%; font-size: 1.1rem; line-height: 1.3; text-decoration: none;
  background: linear-gradient(var(--red), var(--red)) 0 100% / .85em 2px no-repeat;
  transition: background-size .6s var(--ease-out);
}
.club__link:hover, .club__link:focus-visible { background-size: 100% 2px; }
.rail a, .track__stop, .sign, .social { text-decoration: none; }

/* ==========================================================================
   10 · Kooperationspartner — two conveyor belts of logo labels
   ========================================================================== */

.partners {
  position: relative; z-index: 5;
  padding: clamp(120px, 13vw, 210px) 0 clamp(90px, 10vw, 150px);
  background: var(--ink);
  clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%);
  margin-top: -4vw;
  overflow: clip;
}
.partners__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); align-items: end; gap: 30px;
  padding: 0 var(--pad);
}
.partners__head .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.partners__title { font-size: clamp(3.4rem, 9vw, 10.4rem); font-weight: 880; font-stretch: 62%; line-height: .84; letter-spacing: -.035em; }
.partners__side { display: grid; justify-items: start; gap: 16px; color: rgba(255, 255, 255, .74); }
.partners__side a { color: var(--white); font-weight: 750; font-stretch: 90%; }

.logos { display: grid; gap: clamp(12px, 1.4vw, 18px); margin-top: clamp(50px, 6vw, 90px); }
.logos__row {
  display: flex; gap: clamp(12px, 1.4vw, 18px); width: max-content;
  animation: belt 90s linear infinite;
}
.logos__row--b { animation-direction: reverse; animation-duration: 105s; }
.logos:hover .logos__row, .logos:focus-within .logos__row { animation-play-state: paused; }
@keyframes belt { to { translate: -50% 0; } }
.logo {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: clamp(150px, 13vw, 200px); height: clamp(94px, 8.125vw, 125px);
  padding: 16px 20px; overflow: hidden;
  background: var(--white); border-radius: 14px;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.logo img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.logo:hover { transform: translateY(-6px) rotate(-2deg); box-shadow: 0 0 0 4px var(--red); }

/* ==========================================================================
   Footer
   ========================================================================== */

.foot { position: relative; padding: clamp(60px, 8vw, 120px) 0 110px; background: var(--ink); overflow: hidden; }
.foot__shout {
  padding: 0 var(--pad);
  font-size: clamp(4.4rem, 17vw, 20rem); font-weight: 900; font-stretch: 62%; line-height: .8; letter-spacing: -.04em; white-space: nowrap;
}
.foot__shout span { display: inline-block; transform: translateX(calc((1 - var(--fp, 1)) * 30vw)); }

.foot__grid {
  display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: clamp(24px, 4vw, 70px); align-items: start;
  margin-top: clamp(60px, 7vw, 110px); padding: 0 var(--pad);
}
.sign--foot { justify-self: start; padding: 0; }
.sign--foot img { width: clamp(230px, 24vw, 360px); }
.foot__address, .foot__contact, .foot__social { color: rgba(255, 255, 255, .78); line-height: 1.8; }
.foot__contact { display: grid; justify-items: start; gap: 12px; }
/* a red stroke under the first letters that runs out to the full word on hover */
.foot__contact a, .foot__base a, .partners__side a, .legal a.ul {
  text-decoration: none;
  display: inline-block; line-height: 1.3;
  background: linear-gradient(var(--red), var(--red)) 0 100% / .85em 2px no-repeat;
  padding-bottom: 4px;
  transition: background-size .6s var(--ease-out), color .25s;
}
.foot__contact a:hover, .foot__contact a:focus-visible, .foot__base a:hover, .foot__base a:focus-visible,
.partners__side a:hover, .partners__side a:focus-visible, .legal a.ul:hover, .legal a.ul:focus-visible { background-size: 100% 2px; color: var(--white); }
.foot__social { display: flex; flex-wrap: wrap; gap: 12px; align-content: start; }
.social {
  display: grid; place-items: center; width: 52px; height: 52px;
  color: var(--white); border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28);
  transition: background-color .35s, box-shadow .35s, transform .5s var(--ease-out);
}
.social svg { width: 22px; height: 22px; fill: currentColor; }
.social svg .s { fill: none; stroke: currentColor; stroke-width: 1.8; }
.social:hover, .social:focus-visible { background: var(--red); box-shadow: inset 0 0 0 1.5px var(--red); transform: translateY(-3px) rotate(-6deg); }
.foot__base {
  display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: baseline;
  margin: clamp(50px, 6vw, 90px) var(--pad) 0; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .5); font-family: var(--f-mono); font-size: .74rem; letter-spacing: .06em;
}
.foot__base a:last-child { margin-left: auto; }

/* ==========================================================================
   Viewer, cursor, reveals
   ========================================================================== */

.viewer {
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  margin: 0; padding: 70px var(--pad) 40px; border: 0;
  color: var(--white); background: rgba(13, 12, 12, .96);
}
.viewer[open] { display: grid; grid-template-rows: 1fr auto; place-items: center; gap: 16px; animation: fade .5s var(--ease-out); }
.viewer::backdrop { background: transparent; }
.viewer img { max-width: 100%; max-height: calc(100vh - 170px); object-fit: contain; }
.viewer p { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .08em; color: rgba(255, 255, 255, .7); }
.viewer__close {
  position: absolute; top: 18px; right: var(--pad);
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px;
  color: var(--ink); background: var(--white); border: 0; border-radius: 99px; cursor: pointer;
  font-family: var(--f-mono); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.viewer__close span { font-size: 1.3rem; line-height: 1; }

.cursor {
  position: fixed; left: 0; top: 0; z-index: 150;
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--red);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0) scale(var(--cs, 1));
  transition: width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out), background-color .3s, opacity .3s;
}
.cursor.is-link, .cursor.is-photo { opacity: 1; }
.cursor.is-link { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: rgba(215, 20, 28, .22); box-shadow: inset 0 0 0 2px var(--red); }
.cursor.is-photo { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--red); }
.cursor.is-photo::after { content: "Ansehen"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--white); font-family: var(--f-mono); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.cursor.is-hidden, .cursor.is-hidden.is-link, .cursor.is-hidden.is-photo { opacity: 0; }

/* No clip-path here: Chrome counts a target's own clip-path in IntersectionObserver,
   so a fully clipped element would never report itself as visible. */
[data-reveal] { opacity: 0; filter: blur(8px); transform: translateY(46px); transition: opacity .9s var(--ease-out), filter 1s var(--ease-out), transform 1.2s var(--ease-out); }
[data-reveal].is-in { opacity: 1; filter: none; transform: none; }

/* ==========================================================================
   Impressum
   ========================================================================== */

.legal-page { background: var(--ink); }
.legal-page .bar { grid-template-columns: auto 1fr auto; }
.back {
  justify-self: end;
  display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 18px;
  color: var(--ink); background: var(--white); border-radius: 99px; text-decoration: none;
  font-family: var(--f-mono); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  transition: background-color .3s, color .3s;
}
.back:hover, .back:focus-visible { color: var(--white); background: var(--red); }
/* reading progress: a red hairline along the bottom of the bar */
.bar__progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--red); transform-origin: 0 50%; transform: scaleX(var(--read, 0));
}

.legal__hero {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 34px 30px;
  min-height: 100svh;
  padding: calc(var(--bar-h) + clamp(60px, 9vw, 140px)) var(--pad) clamp(90px, 10vw, 150px);
}
.legal__hero .eyebrow { grid-column: 1 / -1; align-self: start; margin-bottom: 0; }
.legal__title { font-size: clamp(4rem, 17vw, 19rem); font-weight: 900; font-stretch: 62%; line-height: .8; letter-spacing: -.04em; }
.legal__title .line { display: block; overflow: hidden; padding: 0 .1em .12em 0; margin: 0 -.1em -.12em 0; }
.legal__title .line__in { display: inline-block; transform: translateY(105%); animation: rise 1.2s var(--ease-out) .2s forwards; }
.legal__title .dot { transform: scale(0); animation: pop .9s var(--ease-out) 1.1s forwards; }
.legal__owner { color: rgba(255, 255, 255, .8); font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.45; padding-left: 22px; border-left: 6px solid var(--red); }
.legal__chapters {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.legal__chapters a {
  position: relative; display: flex; align-items: baseline; gap: 14px;
  padding: 22px 18px 22px 0;
  font-size: clamp(1.2rem, 2.4vw, 2.2rem); font-weight: 850; font-stretch: 70%; text-decoration: none;
  opacity: 0; transform: translateY(24px);
  animation: chapter .9s var(--ease-out) forwards; animation-delay: calc(1.2s + var(--n, 0) * .12s);
}
.legal__chapters a:nth-child(2) { --n: 1; }
.legal__chapters a:nth-child(3) { --n: 2; }
.legal__chapters a::after {
  content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 3px;
  background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out);
}
.legal__chapters a:hover::after, .legal__chapters a:focus-visible::after { transform: scaleX(1); }
.legal__chapters small { font-family: var(--f-mono); font-size: .74rem; font-weight: 700; color: var(--red); letter-spacing: .08em; }
@keyframes chapter { to { opacity: 1; transform: none; } }

.legal__head { display: flex; align-items: flex-start; gap: clamp(16px, 2.4vw, 34px); margin-bottom: clamp(40px, 5vw, 80px); }
.legal__head h2 { font-size: clamp(3.2rem, 9vw, 10rem); font-weight: 880; font-stretch: 62%; line-height: .84; letter-spacing: -.035em; padding-bottom: .08em; overflow-wrap: anywhere; }
.legal__num { padding-top: .6em; font-family: var(--f-mono); font-size: .8rem; font-weight: 700; color: var(--red); letter-spacing: .1em; }

.legal__facts { position: relative; z-index: 2; padding: clamp(110px, 12vw, 190px) var(--pad) clamp(80px, 9vw, 140px); color: var(--ink); background: var(--paper); clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0 100%); margin-top: -5vw; }
.legal__facts dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(30px, 6vw, 100px); margin: 0; }
.legal__facts dl > div { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(0, 1.2fr); gap: 20px; padding: 22px 0; border-top: 1.5px solid var(--ink); }
.legal__facts dl > div:nth-child(even) { transition-delay: .1s; }
.legal__facts dt { font-family: var(--f-mono); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); padding-top: 4px; }
.legal__facts dd { margin: 0; font-size: 1.08rem; font-weight: 600; font-stretch: 92%; }
.legal__facts dd a { color: var(--ink); text-decoration: none; background: linear-gradient(var(--red), var(--red)) 0 100% / .85em 2px no-repeat; padding-bottom: 3px; transition: background-size .6s var(--ease-out); }
.legal__facts dd a:hover, .legal__facts dd a:focus-visible { background-size: 100% 2px; }

.legal__block { padding: clamp(110px, 12vw, 190px) var(--pad) clamp(90px, 10vw, 160px); }
.legal__block--light { color: var(--ink); background: var(--stone); }
.legal__body { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: clamp(30px, 6vw, 110px); align-items: start; }
.legal__index {
  position: sticky; top: calc(var(--bar-h) + 30px);
  display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: idx;
}
.legal__index li { counter-increment: idx; }
.legal__index a {
  display: grid; grid-template-columns: 30px 1fr; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid rgba(128, 128, 128, .3);
  color: inherit; opacity: .55; text-decoration: none; font-weight: 700; font-stretch: 88%;
  transition: opacity .3s, padding .45s var(--ease-out), color .3s;
}
.legal__index a::before { content: counter(idx); font-family: var(--f-mono); font-size: .74rem; color: var(--red); }
.legal__index a:hover, .legal__index a:focus-visible { opacity: 1; }
.legal__index a.is-on { opacity: 1; padding-left: 10px; color: var(--red); }
.legal__text { display: grid; gap: clamp(40px, 5vw, 70px); max-width: 72ch; }
.legal__text article { scroll-margin-top: calc(var(--bar-h) + 30px); }
.legal__text h3 { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 850; font-stretch: 72%; line-height: 1.05; }
.legal__text h3 span { flex: 0 0 auto; display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; color: var(--white); background: var(--red); font-family: var(--f-mono); font-size: .5em; }
.legal__text p { color: rgba(255, 255, 255, .76); font-size: 1.04rem; line-height: 1.7; }
.legal__text p + p { margin-top: 14px; }
.legal__block--light .legal__text p { color: #3d3834; }
.legal__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.legal__block--light .legal__cards p { display: grid; justify-items: start; align-content: start; gap: 4px; padding: 24px; color: var(--ink); background: var(--paper); border-top: 4px solid var(--red); line-height: 1.55; }
.legal__cards small { font-family: var(--f-mono); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.legal__cards b { font-size: 1.3rem; font-weight: 850; font-stretch: 80%; }
.legal .legal__cards a.ul, .legal .legal__cards a.ul:hover, .legal .legal__cards a.ul:focus-visible { color: var(--ink); }

/* cross-document navigation: the next page opens as a growing red point */
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: vt-point .75s var(--ease-snap); }
@keyframes vt-point {
  from { clip-path: circle(0 at 50% 50%); }
  to { clip-path: circle(150vmax at 50% 50%); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .rail { display: none; }
  .figures__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 50px; }
}

@media (max-width: 900px) {
  :root { --bar-h: 76px; }
  .bar { grid-template-columns: auto 1fr auto; }
  .bar__nav { display: none; }
  .status { justify-self: end; padding: 0 12px; font-size: .64rem; }
  .burger { display: inline-flex; }
  .sign img { width: 150px; }

  .hero { height: 200vh; }
  .hero__stage { align-content: center; grid-template-rows: auto auto; padding-top: calc(var(--bar-h) + 60px); }
  .hero__meta { top: calc(var(--bar-h) + 18px); left: var(--pad); right: auto; font-size: .64rem; gap: 10px; }
  .hero__meta span + span::before { margin-right: 10px; }
  .hero__title { font-size: clamp(3rem, 15.5vw, 6.2rem); }
  .hero__foot { grid-template-columns: 1fr; }
  .hero__cue { display: none; }

  .shop { grid-template-columns: 1fr; min-height: 0; }
  .shop__copy { grid-column: 1; grid-row: 1; padding: 110px var(--pad) 50px; }
  .shop__photo { grid-column: 1; grid-row: 2; height: 118vw; min-height: 420px; clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%); }
  .stickers { top: auto; height: 118vw; min-height: 420px; bottom: 0; }
  .sticker { width: 104px; }
  .sticker b { font-size: 1.05rem; }
  .sticker--c b { font-size: .86rem; }
  .sticker--a { left: 6%; top: 12%; }
  .sticker--b { right: 6%; top: 27%; }
  .sticker--c { left: 12%; bottom: 20%; }
  .sticker--d { right: 7%; bottom: calc(7vw + 80px); }

  .idea { grid-template-columns: 1fr; }
  .loop { grid-template-columns: 1fr; --flow: 30px; }
  .loop__line { display: none; }

  .city { grid-template-columns: 1fr; }
  .city__map { order: -1; }

  /* the track becomes a plain vertical list of stops */
  .track { height: auto; }
  .track__stage { position: relative; height: auto; overflow: visible; }
  .track__belt { display: block; width: auto; transform: none; }
  .track__rail { display: none; }
  .panel { display: block; height: auto; padding: 70px var(--pad) 60px; }
  .panel__code { font-size: 52vw; bottom: auto; top: 10px; transform: none; }
  .panel__info, .shot--a, .shot--b, .badge-card, .panel__photos > .shot--c { transform: none; }
  .panel__photos {
    display: flex; gap: 12px; height: auto; margin: 36px calc(var(--pad) * -1) 0; padding: 0 var(--pad) 10px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .panel__photos::-webkit-scrollbar { display: none; }
  .panel__photos > * { flex: 0 0 auto; scroll-snap-align: start; }
  .shot--a { width: 84vw; aspect-ratio: 4 / 3; height: auto; clip-path: none; }
  .shot--b { width: 56vw; aspect-ratio: 4 / 5; height: auto; }
  .badge-card { width: 56vw; }
  .badge-card .shot, .panel__photos > .shot--c { width: 56vw; aspect-ratio: 4 / 5; height: auto; }
  .badge { left: 10px; }

  .team__head { grid-template-columns: 1fr; }
  .team__rows { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .team__row, .team__row--b { transform: none; margin-left: 0; }
  .team { --fh: 58vw; }
  .face { scroll-snap-align: start; }

  .hours { grid-template-columns: 1fr; }
  .club__grid { margin-left: 0; }
  .partners__head { grid-template-columns: 1fr; }
  .logo { width: 132px; height: 83px; padding: 12px 14px; border-radius: 10px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .sign--foot { grid-column: 1 / -1; }
  .foot__base a:last-child { margin-left: 0; }

  .legal__hero { grid-template-columns: 1fr; min-height: auto; }
  .legal__chapters { grid-template-columns: 1fr; }
  .legal__chapters a { padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .legal__facts dl { grid-template-columns: 1fr; }
  .legal__facts dl > div { grid-template-columns: 1fr; gap: 6px; }
  .legal__body { grid-template-columns: 1fr; }
  .legal__index { position: static; }
  .legal__cards { grid-template-columns: 1fr; }
  .legal-page .back { min-height: 40px; padding: 0 14px; font-size: .68rem; }
}

@media (max-width: 540px) {
  body { font-size: 16px; }
  .status { gap: 7px; padding: 0 11px; font-size: .6rem; letter-spacing: .03em; white-space: nowrap; }
  /* ohne das Wort "Menue" bleibt vom weissen Feld nur ein Ring um den roten Punkt - der Knopf ist dann
     der Punkt selbst, nichts darum herum */
  .burger { padding: 0; min-height: 0; background: none; }
  .burger__label { display: none; }
  .figures__list { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .receipt { padding: 40px 18px 30px; font-size: .78rem; }
}

/* too narrow for a live status next to the sign; the hours section carries it */
@media (max-width: 360px) {
  .status { display: none; }
  .bar { grid-template-columns: auto 1fr auto; }
  .burger { grid-column: 3; }
  .hero__title { font-size: 14.2vw; }
}

@media (pointer: coarse) { .cursor { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .hero { height: auto; }
  .hero__stage { position: relative; }
  .hero__title, .hero__foot { transform: none; opacity: 1; }
  .hero__title .line__in::before, .hero__title .line__in::after { display: none; }
  .portal { display: none; }
  .hero__grain { display: none; }
  .band__track { animation: none; transform: none; }
  [data-reveal] { clip-path: none; transform: none; }
  .legal__title .line__in, .legal__chapters a { transform: none; opacity: 1; }
  .legal__title .dot { transform: none; }
  .sticker { transform: rotate(var(--rot)) scale(1); }
  .track { height: auto; }
  .track__stage { position: relative; height: auto; overflow: visible; }
  .track__belt { display: block; width: auto; transform: none; }
  .track__rail { display: none; }
  .panel { height: auto; min-height: 100vh; }
  .panel__code, .panel__info, .shot--a, .shot--b, .badge-card, .panel__photos > .shot--c { transform: none; }
  .team__row, .team__row--b { transform: none; flex-wrap: wrap; width: auto; margin-left: 0; padding-right: var(--pad); }
  .receipt { transform: none; }
  .foot__shout span { transform: none; }
  .cursor { display: none; }
  ::view-transition-new(root) { animation: none; }
  .logos { padding: 0 var(--pad); }
  .logos__row { width: auto; flex-wrap: wrap; animation: none; }
  .logo[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   v2 · Zahlen on stone, the constellation, Mitglied werden, Sortiment,
   Mithelfen and a single partner belt
   ========================================================================== */

/* the figures step out of the dark run: red numbers on stone */
.figures { color: var(--ink); background: var(--stone); }
.figure { border-top-color: var(--ink); }
.figure__num { color: var(--red); }
.figure__num .dot { background: var(--ink); }
.figure p { color: #4a4541; }
.figure p b { color: var(--ink); }

/* the map becomes a night sky: stars twinkle, the eleven points ignite one after another,
   then the constellation lines draw themselves between them */
.star { fill: var(--white); opacity: 0; }
.city__map.is-in .star { animation: twinkle 4.6s ease-in-out infinite; animation-delay: var(--s); }
@keyframes twinkle { 0%, 100% { opacity: .08; } 50% { opacity: .55; } }
.pin__dot { filter: drop-shadow(0 0 6px rgba(215, 20, 28, .9)); transition-delay: calc(var(--d) * .16s + .3s); }
.city__map.is-in .pin__dot { animation: ignite 1s var(--ease-out) backwards; animation-delay: calc(var(--d) * .16s + .3s); }
@keyframes ignite { 0% { transform: scale(0); } 40% { transform: scale(2.4); } 100% { transform: scale(1); } }
.city__route { stroke: rgba(255, 255, 255, .42); stroke-width: 1; transition: stroke-dashoffset 3.2s var(--ease-out) 2s; }
.pin__label { transition-delay: calc(var(--d) * .16s + .6s); }
.city__map.is-in .pin__ring { animation-delay: calc(var(--d) * .16s + 2.2s); }

/* ---------------------------------------------------------------- Mitglied werden */

.join {
  position: relative; z-index: 5;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 5vw, 90px) clamp(30px, 6vw, 110px);
  padding: clamp(130px, 14vw, 220px) var(--pad) clamp(100px, 11vw, 170px);
  color: var(--ink); background: var(--white);
  clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 100%);
  margin-top: -5vw;
}
.join__title { font-size: clamp(4rem, 11vw, 13.4rem); font-weight: 880; font-stretch: 62%; line-height: .84; letter-spacing: -.035em; padding-bottom: .06em; }
.join__lead { max-width: 44ch; margin-top: clamp(24px, 3vw, 40px); color: #2c2927; font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.5; }

.join__card { align-self: center; justify-self: center; perspective: 1200px; }
.card {
  position: relative;
  display: grid; grid-template-rows: auto 1fr auto; width: min(420px, 78vw); aspect-ratio: 1.586;
  padding: clamp(18px, 2vw, 28px);
  color: var(--white); background: radial-gradient(120% 140% at 0% 0%, #e3262d 0%, var(--red) 40%, var(--red-deep) 100%);
  border-radius: 20px;
  box-shadow: 0 40px 60px -30px rgba(13, 12, 12, .55), inset 0 0 0 1px rgba(255, 255, 255, .18);
  transform: rotateY(calc((var(--p, .5) - .5) * -40deg)) rotateX(calc((var(--p, .5) - .5) * 14deg)) rotate(-7deg);
}
.card::after { /* a light sweep crosses the card as the section scrolls */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .28) 45%, transparent 60%) no-repeat;
  background-size: 250% 100%; background-position: calc(160% - var(--p, .5) * 220%) 0;
}
.card__top { display: flex; align-items: center; justify-content: space-between; font-family: var(--f-mono); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.card__top img { width: 44px; height: 44px; padding: 6px; background: var(--white); border-radius: 50%; }
.card__name { align-self: end; font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 880; font-stretch: 64%; line-height: .9; letter-spacing: -.02em; }
.card__foot { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .4); font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.card__chip { position: absolute; right: 26%; top: 40%; width: 46px; height: 34px; border-radius: 7px; background: linear-gradient(135deg, #f4d58d, #c79b3b); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }

.steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 48px); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.step { position: relative; padding-top: 24px; border-top: 2px solid var(--ink); }
.step:nth-child(2) { transition-delay: .12s; }
.step:nth-child(3) { transition-delay: .24s; }
.step__num { display: block; margin-bottom: 16px; font-family: var(--f-mono); font-size: .78rem; font-weight: 700; letter-spacing: .12em; color: var(--red); }
.step h3 { font-size: clamp(2rem, 3.8vw, 4.2rem); font-weight: 860; font-stretch: 68%; line-height: .92; letter-spacing: -.02em; }
.step p { max-width: 32ch; margin-top: 14px; color: #3a3633; }

/* the way to the online registration under the three steps: its own full row, so the proofs and facts keep their cells */
.join__online { grid-column: 1 / -1; margin: 0; }
.proofs { grid-column: 1; }
.proofs__title, .limits summary span { font-family: var(--f-mono); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.proofs__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.proofs__list li { padding: 9px 16px; border: 1.5px solid var(--ink); border-radius: 99px; font-weight: 700; font-stretch: 88%; transition: background-color .3s, color .3s, border-color .3s; }
.proofs__list li:hover { color: var(--white); background: var(--red); border-color: var(--red); }
.proofs__note { max-width: 50ch; margin-top: 18px; color: #4a4541; }

.join__facts { grid-column: 2; display: grid; align-content: start; gap: 22px; }
.limits { border-top: 2px solid var(--ink); border-bottom: 1px solid rgba(13, 12, 12, .2); }
.limits summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 0; cursor: pointer; list-style: none; }
.limits summary::-webkit-details-marker { display: none; }
.limits summary small { font-family: var(--f-mono); font-size: .7rem; color: #6b655f; }
.limits summary::after { content: "+"; font-size: 1.6rem; line-height: .6; color: var(--red); transition: transform .4s var(--ease-out); }
.limits[open] summary::after { transform: rotate(45deg); }
.limits table { width: 100%; border-collapse: collapse; font-family: var(--f-mono); font-size: .8rem; }
.limits th, .limits td { padding: 9px 0; border-top: 1px solid rgba(13, 12, 12, .12); text-align: right; font-weight: 400; }
.limits th[scope="row"], .limits thead th:first-child { text-align: left; font-weight: 700; }
.limits thead th { color: #6b655f; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.limits p { padding: 12px 0 18px; color: #4a4541; font-size: .95rem; }
.join__beitrag, .join__ask { color: #2c2927; }
.join__beitrag b, .join__ask b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 1.15rem; font-stretch: 86%; }
.join__ask a { font-weight: 750; text-decoration: none; background: linear-gradient(var(--red), var(--red)) 0 100% / .85em 2px no-repeat; padding-bottom: 3px; transition: background-size .6s var(--ease-out); }
.join__ask a:hover, .join__ask a:focus-visible { background-size: 100% 2px; }

/* ---------------------------------------------------------------- Sortiment: a fixed window */

.regal {
  position: relative; z-index: 1;
  padding: clamp(120px, 13vw, 210px) var(--pad);
  color: var(--white); background: var(--ink);
  clip-path: inset(0); /* clips the fixed photo to this section, so it reads as a window */
}
.regal__bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.regal__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  filter: grayscale(.55) contrast(1.05) brightness(.62);
  transform: scale(calc(1.12 - var(--p, 0) * .12));
}
.regal__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13, 12, 12, .72), rgba(13, 12, 12, .38) 45%, rgba(13, 12, 12, .8));
}
.regal__head, .regal__grid { position: relative; z-index: 1; }
.regal__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); align-items: end; gap: 30px; }
.regal__head .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.regal__title { font-size: clamp(3.2rem, 8vw, 9.4rem); font-weight: 870; font-stretch: 64%; line-height: .86; letter-spacing: -.03em; }
.regal__lead { color: rgba(255, 255, 255, .82); font-size: clamp(1.05rem, 1.4vw, 1.25rem); }
.regal__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(60px, 7vw, 110px) 0 0; padding: 0; list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .2); border-left: 1px solid rgba(255, 255, 255, .2);
}
.kind {
  display: grid; grid-template-columns: 56px 1fr; gap: 6px 20px; align-content: start;
  padding: clamp(26px, 3vw, 44px);
  border-right: 1px solid rgba(255, 255, 255, .2); border-bottom: 1px solid rgba(255, 255, 255, .2);
  background: rgba(13, 12, 12, .28);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: background-color .5s var(--ease-out), opacity .9s var(--ease-out), filter 1s var(--ease-out), transform 1.2s var(--ease-out);
}
.kind:nth-child(3n + 2) { transition-delay: .1s; }
.kind:nth-child(3n) { transition-delay: .2s; }
.kind:hover { background: rgba(215, 20, 28, .82); }
.kind svg { grid-row: span 2; width: 52px; height: 52px; fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.kind svg path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out) .35s; }
.kind.is-in svg path { stroke-dashoffset: 0; }
.kind:hover svg { stroke: var(--white); }
.kind h3 { font-size: clamp(1.3rem, 1.9vw, 1.7rem); font-weight: 850; font-stretch: 74%; line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; }
.kind p { color: rgba(255, 255, 255, .78); font-size: .98rem; }

/* ---------------------------------------------------------------- Verein & Mithelfen */

.help { margin-top: clamp(90px, 11vw, 170px); padding-top: clamp(50px, 6vw, 90px); border-top: 2px solid var(--ink); }
.help__title { font-size: clamp(3.6rem, 10vw, 12rem); font-weight: 880; font-stretch: 62%; line-height: .84; letter-spacing: -.035em; }
/* the sentence that carries the left column of Mithelfen between the headline and the line for companies */
.help__lead { max-width: 34ch; margin: clamp(20px, 2.6vw, 34px) 0 0; color: #3a3633; font-size: clamp(1.02rem, 1.2vw, 1.18rem); line-height: 1.6; }
/* on a phone the column wrapper disappears again, so the line for companies stays where it reads best:
   after the two ways to help, not before them */
@media (max-width: 900px) {
  .help { display: flex; flex-direction: column; }
  .help__side { display: contents; }
  .help__cards { order: 1; }
  .help__biz { order: 2; }
}
.help__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); margin: clamp(40px, 5vw, 70px) 0 0; padding: 0; list-style: none; }
.help__card {
  position: relative; display: grid; align-content: start; gap: 14px;
  padding: clamp(24px, 2.6vw, 38px);
  color: var(--ink); background: var(--paper); border-top: 5px solid var(--red);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), opacity .9s var(--ease-out), filter 1s var(--ease-out);
}
.help__card:nth-child(2) { transition-delay: .1s; }
.help__card:nth-child(3) { transition-delay: .2s; }
.help__card.is-in:hover { transform: translateY(-8px); box-shadow: 0 30px 50px -30px rgba(13, 12, 12, .5); }
.help__num { font-family: var(--f-mono); font-size: .76rem; font-weight: 700; letter-spacing: .12em; color: var(--red); }
.help__card h3 { font-size: clamp(1.8rem, 2.8vw, 2.8rem); font-weight: 860; font-stretch: 68%; line-height: .95; }
.help__card p { color: #3a3633; }
.help__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.help__tags li { padding: 6px 12px; border-radius: 99px; background: var(--white); font-family: var(--f-mono); font-size: .72rem; letter-spacing: .04em; }
.help__cta {
  justify-self: start; display: inline-grid; gap: 2px; margin-top: 6px; padding: 12px 18px;
  color: var(--white); background: var(--ink); border-radius: 12px; text-decoration: none; font-weight: 750;
  transition: background-color .3s;
}
.help__cta span { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.help__cta:hover, .help__cta:focus-visible { background: var(--red); }
.help__bank { margin-top: clamp(30px, 4vw, 50px); color: #4a4541; font-family: var(--f-mono); font-size: .8rem; letter-spacing: .03em; line-height: 1.7; }
.help__bank b { color: var(--red); margin-right: 10px; letter-spacing: .12em; text-transform: uppercase; }

/* ---------------------------------------------------------------- partners: one compact belt */

.partners { padding: clamp(100px, 10vw, 160px) 0 clamp(60px, 7vw, 100px); }
.partners__title { font-size: clamp(2.8rem, 6vw, 6.6rem); }
.logos { margin-top: clamp(36px, 4vw, 60px); }

@media (max-width: 900px) {
  .join { grid-template-columns: 1fr; }
  .join__card { grid-row: 2; }
  .steps, .help__cards, .regal__grid { grid-template-columns: 1fr; }
  .proofs, .join__facts { grid-column: 1; }
  .regal__head { grid-template-columns: 1fr; }
  .kind { grid-template-columns: 48px 1fr; }
  .kind svg { width: 44px; height: 44px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .regal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .card { transform: rotate(-7deg); }
  .card::after { display: none; }
  .regal__bg img { transform: none; }
  .kind svg path { stroke-dashoffset: 0; }
  .star { opacity: .25; }
}
/* the year needs four digits of room */
@media (min-width: 901px) { .figures__list { grid-template-columns: repeat(3, minmax(0, .8fr)) minmax(0, 1.45fr); } }
/* five navigation links need more room than the tablet widths offer; there the burger takes over */
@media (min-width: 901px) and (max-width: 1100px) {
  .bar { grid-template-columns: auto 1fr auto auto; }
  .bar__nav { display: none; }
  .status { justify-self: end; }
  .burger { display: inline-flex; }
}

/* header: membership is the one call to action, so it gets the red pill */
.bar__nav { align-items: center; }
.bar__nav .bar__cta {
  padding: 11px 18px; color: var(--white); background: var(--red); border-radius: 99px;
  transition: background-color .3s, transform .4s var(--ease-out);
}
.bar__nav .bar__cta::after { display: none; }
.bar__nav .bar__cta:hover, .bar__nav .bar__cta:focus-visible { background: var(--red-deep); transform: translateY(-2px); }

/* ---------------------------------------------------------------- Spenden: the account as a card of its own */
.give {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px clamp(30px, 5vw, 80px); align-items: start;
  margin-top: clamp(40px, 5vw, 70px); padding: clamp(28px, 4vw, 60px);
  color: var(--white); background: var(--ink); border-radius: 4px;
  scroll-margin-top: calc(var(--bar-h) + 20px);
  position: relative; overflow: hidden;
}
.give::before { /* a large red point bleeding off the corner */
  content: ""; position: absolute; right: -9vw; top: -9vw; width: 24vw; height: 24vw; border-radius: 50%;
  background: var(--red); opacity: .92; transform: scale(.2); transition: transform 1.4s var(--ease-out) .3s;
}
.give.is-in::before { transform: scale(1); }
.give > * { position: relative; }
.give__kicker { font-family: var(--f-mono); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.give__title { margin-top: 14px; font-size: clamp(2.4rem, 4.6vw, 5.2rem); font-weight: 880; font-stretch: 64%; line-height: .9; letter-spacing: -.025em; }
.give__text { margin-top: 18px; max-width: 34ch; color: rgba(255, 255, 255, .72); }
.give__bank { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 18px 34px; margin: 0; }
.give__bank div { display: grid; gap: 4px; }
.give__bank dt { font-family: var(--f-mono); font-size: .7rem; font-weight: 700; letter-spacing: .14em; color: rgba(255, 255, 255, .5); }
.give__bank dd { margin: 0; font-weight: 700; font-stretch: 90%; }
.give__bank div:last-child { grid-column: 1 / -1; }
.give__iban { grid-column: 1 / -1; }
.give__iban dd { font-family: var(--f-mono); font-size: clamp(1.4rem, 3vw, 2.8rem); font-weight: 700; letter-spacing: .02em; line-height: 1.1; white-space: nowrap; }
.give__copybtn {
  grid-column: 2; justify-self: start;
  display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 24px;
  color: var(--ink); background: var(--white); border: 0; border-radius: 99px; cursor: pointer;
  font: inherit; font-weight: 750; font-stretch: 90%;
  transition: background-color .3s, color .3s, transform .4s var(--ease-out);
}
.give__copybtn::before { content: ""; width: 14px; height: 16px; border: 2px solid currentColor; border-radius: 3px; box-shadow: 4px -4px 0 -2px var(--white), 4px -4px 0 0 currentColor; transition: box-shadow .3s; }
.give__copybtn:hover, .give__copybtn:focus-visible { transform: translateY(-2px); }
.give__copybtn.is-done { color: var(--white); background: var(--red); }
.give__copybtn.is-done::before { width: 8px; height: 14px; border-width: 0 2.5px 2.5px 0; border-radius: 0; box-shadow: none; transform: rotate(45deg) translateY(-3px); }
@media (max-width: 900px) {
  .give { grid-template-columns: 1fr; }
  .give__copybtn { grid-column: 1; }
  .give__bank { grid-template-columns: 1fr 1fr; }
  .give::before { width: 44vw; height: 44vw; right: -18vw; top: -18vw; }
}
@media (max-width: 380px) { .give__iban dd { font-size: 1.22rem; } }
.give__qr { grid-column: 1; grid-row: 2 / span 2; display: flex; align-items: center; gap: 18px; margin: 0; }
.give__qr img { flex: 0 0 auto; width: clamp(128px, 11vw, 170px); height: auto; padding: 12px; background: var(--white); border-radius: 10px; }
.give__qr figcaption { max-width: 22ch; color: rgba(255, 255, 255, .66); font-size: .9rem; line-height: 1.45; }
@media (max-width: 900px) { .give__qr { grid-row: auto; } }
/* the red point sits bottom right, away from the IBAN; the IBAN always fits on one line */
.give::before { top: auto; bottom: -12vw; }
@media (max-width: 900px) {
  .give::before { top: auto; bottom: -22vw; }
  .give__iban dd { font-size: 4.6vw; }
}

/* the real membership card design (vector, from the member project), still tilting with the scroll */
.join__card { margin: 0; display: grid; justify-items: center; gap: 16px; }
.join__card .card {
  display: block; width: min(500px, 82vw); aspect-ratio: auto; padding: 0;
  background: none; border-radius: 3.2% / 5%; overflow: hidden;
  box-shadow: 0 44px 70px -34px rgba(13, 12, 12, .6), 0 0 0 1px rgba(13, 12, 12, .06);
}
.join__card .card img { display: block; width: 100%; height: auto; }
.card__note { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #6b655f; }

/* Obmann next to the motto: a portrait in the shape of the red point */
.club__lead { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(30px, 5vw, 90px); }
.boss { margin: 0; display: grid; justify-items: center; gap: 18px; text-align: center; }
.boss__photo {
  position: relative; width: clamp(200px, 22vw, 340px); aspect-ratio: 1;
  border-radius: 50%; overflow: hidden; background: var(--paper);
  box-shadow: 0 0 0 6px var(--white), 0 0 0 8px var(--red);
}
.boss__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transform: scale(1.08); transition: transform 1.4s var(--ease-out); }
.boss.is-in .boss__photo img { transform: scale(1); }
.boss::after { /* the full stop after the name */
  content: ""; position: absolute; width: clamp(34px, 3.4vw, 54px); height: clamp(34px, 3.4vw, 54px); border-radius: 50%;
  background: var(--red); transform: translate(clamp(80px, 8.5vw, 132px), clamp(70px, 7.5vw, 116px)) scale(0);
  transition: transform .9s var(--ease-out) .5s;
}
.boss { position: relative; }
.boss.is-in::after { transform: translate(clamp(80px, 8.5vw, 132px), clamp(70px, 7.5vw, 116px)) scale(1); }
.boss figcaption { display: grid; gap: 2px; }
.boss figcaption b { font-size: 1.3rem; font-weight: 850; font-stretch: 80%; }
.boss figcaption span { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
@media (max-width: 900px) {
  .club__lead { grid-template-columns: 1fr; justify-items: start; }
  .boss { justify-items: start; text-align: left; }
  .boss__photo { width: 56vw; }
  .boss::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .boss__photo img, .boss::after { transition: none; } }
/* the red point sits on the ring, bottom right, never over the face */
.boss { --w: clamp(200px, 22vw, 340px); }
.boss__photo { width: var(--w); }
.boss::after, .boss.is-in::after {
  width: calc(var(--w) * .15); height: calc(var(--w) * .15);
  left: calc(50% + var(--w) * .29); top: calc(var(--w) * .79);
  box-shadow: 0 0 0 6px var(--white);
}
.boss::after { transform: scale(0); }
.boss.is-in::after { transform: scale(1); }
@media (max-width: 900px) { .boss { --w: 56vw; } .boss::after { display: block; left: calc(var(--w) * .79); } }

/* Verein: portrait left, motto + text + link as one column right, all on one axis */
@media (min-width: 901px) {
  .club__lead { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .boss { position: sticky; top: calc(var(--bar-h) + 40px); }
}
.club__lead { margin-top: clamp(30px, 4vw, 60px); }
.club__body { display: grid; justify-items: start; gap: clamp(26px, 3vw, 40px); padding-top: clamp(10px, 2vw, 40px); }
.club__body .club__quote p { max-width: 13ch; }
.club__body .club__text { max-width: 58ch; }
@media (max-width: 900px) { .boss { position: static; } }

/* the card: no light sweep over it, the colours stay full */
.join__card .card::after { display: none; }

/* ---------------------------------------------------------------- Spenden: a red chapter of its own */
.donate {
  position: relative; z-index: 5;
  padding: clamp(120px, 13vw, 200px) var(--pad) clamp(120px, 12vw, 190px);
  color: var(--white); background: var(--red);
  clip-path: polygon(0 0, 100% 4vw, 100% 100%, 0 100%);
  margin-top: -4vw;
}
.donate .eyebrow::before { background: var(--white); }
.donate__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); align-items: end; gap: 20px 30px; }
.donate__head .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.donate__title { font-size: clamp(4rem, 13vw, 15rem); font-weight: 900; font-stretch: 62%; line-height: .82; letter-spacing: -.04em; padding-bottom: .04em; }
.donate__title .dot { background: var(--ink); }
.donate__lead { color: rgba(255, 255, 255, .9); font-size: clamp(1.05rem, 1.4vw, 1.25rem); }
.donate .give { margin-top: clamp(40px, 5vw, 70px); box-shadow: 0 50px 80px -40px rgba(13, 12, 12, .7); }
.donate .give::before { background: var(--red); }
@media (max-width: 900px) { .donate__head { grid-template-columns: 1fr; } }

/* the menu list always starts clearly below the bar and scrolls on short screens */
.menu { align-content: start; padding-top: calc(var(--bar-h) + clamp(40px, 7vh, 90px)); overflow-y: auto; overscroll-behavior: contain; }
@media (min-height: 900px) and (min-width: 901px) { .menu { align-content: center; } }
.menu.is-open nav a:nth-child(6) { transition-delay: .3s; }
.menu.is-open nav a:nth-child(7) { transition-delay: .36s; }
.give__actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.give__actions .give__copybtn { grid-column: auto; }
.give__paypal {
  display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 24px;
  color: var(--white); background: transparent; border-radius: 99px; text-decoration: none;
  box-shadow: inset 0 0 0 2px var(--white); font-weight: 750; font-stretch: 90%;
  transition: background-color .3s, color .3s, transform .4s var(--ease-out);
}
.give__paypal:hover, .give__paypal:focus-visible { color: var(--ink); background: var(--white); transform: translateY(-2px); }
@media (max-width: 900px) { .give__actions { grid-column: 1; } }

/* team: a hover loop (--loop) on top of the scroll drift; the cloned half only exists for the loop */
@media (min-width: 901px) {
  .team__row { transform: translate3d(calc(var(--dir, 1) * (var(--p, 0) - .5) * -26vw + var(--loop, 0px)), 0, 0); }
}
@media (max-width: 900px), (prefers-reduced-motion: reduce), (pointer: coarse) {
  .team__row [data-clone] { display: none; }
}

/* six figures from the Verein's key data, three to a row */
.figures__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(50px, 6vw, 90px); }
@media (min-width: 901px) { .figures__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.figures .figure__num { font-size: clamp(4.2rem, 9vw, 11rem); }
.odo__sep { display: inline-block; height: .8em; line-height: .8; }
.figure p { max-width: 32ch; }
.figures__note { margin-top: clamp(40px, 5vw, 70px); font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #6b655f; }
@media (max-width: 900px) { .figures__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .figures .figure__num { font-size: clamp(3rem, 13vw, 6rem); } }
@media (max-width: 540px) { .figures__list { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- the night sky, part two */
/* orbit rings: readable now, with a slow drift of their dashes */
.city__rings circle { stroke: rgba(255, 255, 255, .2); stroke-width: 1.1; stroke-dasharray: 3 7; }
.city__map.is-in .city__rings circle { animation: orbit 60s linear infinite; }
.city__map.is-in .city__rings circle:nth-child(2) { animation-duration: 90s; animation-direction: reverse; }
.city__map.is-in .city__rings circle:nth-child(3) { animation-duration: 120s; }
@keyframes orbit { to { stroke-dashoffset: -200; } }

/* Milky Way: a soft band of light and dust behind everything */
.city__milky { opacity: 0; transition: opacity 3s ease 1s; }
.city__map.is-in .city__milky { opacity: 1; }
.dust { fill: #fff; opacity: .28; }

/* four-point stars: each breathes in its own rhythm (--t), starts at its own time (--w), peaks at its own brightness (--k) */
.spark { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2); filter: drop-shadow(0 0 3px rgba(255, 255, 255, .8)); }
.city__map.is-in .spark { animation: sparkle var(--t, 4s) ease-in-out var(--w, 0s) infinite; }
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  45% { opacity: var(--k, .9); transform: scale(.9) rotate(20deg); }
  55% { opacity: calc(var(--k, .9) * .8); transform: scale(.75) rotate(28deg); }
}

/* a shooting star, rarely: a short flash every 14 seconds */
.city__comet { stroke: url(#comet-tail); stroke-width: 1.6; stroke-linecap: round; opacity: 0; }
.city__map.is-in .city__comet { animation: comet 14s linear 5s infinite; }
@keyframes comet {
  0% { opacity: 0; transform: translate(600px, 30px) rotate(-37.6deg); }
  1% { opacity: 1; }
  6% { opacity: 0; transform: translate(380px, 200px) rotate(-37.6deg); }
  100% { opacity: 0; transform: translate(380px, 200px) rotate(-37.6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .spark { opacity: .6; transform: scale(.7); }
  .city__comet { display: none; }
  .city__milky { opacity: 1; }
}

/* ---------------------------------------------------------------- Mitglied werden, with motion */
/* the title rises line by line, like the headline on the first screen */
.join__title[data-reveal] { opacity: 1; filter: none; transform: none; }
.join__title .line { display: block; overflow: hidden; padding: 0 .1em .14em 0; margin: 0 -.1em -.14em 0; }
.join__title .line__in { display: inline-block; transform: translateY(105%); transition: transform 1.2s var(--ease-out); }
.join__title .line:nth-child(2) .line__in { transition-delay: .12s; }
.join__title.is-in .line__in { transform: none; }

/* the card flies in, settles, then floats; a stamp slaps on; the QR gets scanned now and then */
.join__card { position: relative; }
.join__card[data-reveal] { opacity: 0; filter: none; transform: translate(120px, 60px) rotate(14deg) scale(.9); transition: opacity .8s var(--ease-out), transform 1.4s var(--ease-out); }
.join__card[data-reveal].is-in { opacity: 1; transform: none; }
.join__card .card { width: min(580px, 84vw); animation: float 6s ease-in-out 1.6s infinite; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.card { position: relative; }
.card__scan {
  position: absolute; left: 58.5%; top: 27%; width: 21.5%; height: 36%; z-index: 2; pointer-events: none;
  overflow: hidden;
}
.card__scan::before {
  content: ""; position: absolute; left: -6%; right: -6%; height: 3px; top: 0;
  background: var(--red); box-shadow: 0 0 14px 3px rgba(215, 20, 28, .7);
  opacity: 0; animation: scan 4.5s ease-in-out 2.4s infinite;
}
@keyframes scan {
  0% { top: 0; opacity: 0; } 6% { opacity: 1; } 30% { top: calc(100% - 3px); opacity: 1; }
  36% { top: calc(100% - 3px); opacity: 0; } 100% { top: calc(100% - 3px); opacity: 0; }
}
.card__stamp {
  position: absolute; z-index: 3; right: -2%; top: -9%;
  display: grid; place-content: center; text-align: center;
  width: clamp(96px, 9vw, 132px); aspect-ratio: 1; border-radius: 50%;
  color: var(--white); background: var(--red);
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .55), inset 0 0 0 3px rgba(255, 255, 255, .9), inset 0 0 0 5px var(--red);
  font-size: clamp(1.2rem, 1.7vw, 1.7rem); font-weight: 850; font-stretch: 70%; line-height: .95;
  transform: rotate(12deg) scale(0); transition: transform .7s cubic-bezier(.3, 1.6, .5, 1) 1.2s;
}
.card__stamp small { font-family: var(--f-mono); font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.join__card.is-in .card__stamp { transform: rotate(12deg) scale(1); }

/* a red line runs along the three steps as the section scrolls through */
.steps { position: relative; }
.steps::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; margin-top: -1px; z-index: 1;
  background: var(--red); transform-origin: 0 50%;
  transform: scaleX(min(1, max(0, calc((var(--p, 0) - .32) * 3.4))));
}
.step__num { display: inline-grid; place-items: center; width: 2.4em; height: 2.4em; margin-top: -1.2em; margin-bottom: 14px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2px var(--red); position: relative; z-index: 2; }
.step.is-in .step__num { animation: pop .8s var(--ease-out) backwards; }
.step:nth-child(2).is-in .step__num { animation-delay: .15s; }
.step:nth-child(3).is-in .step__num { animation-delay: .3s; }
@media (max-width: 900px) {
  .steps::before { display: none; }
  .card__stamp { right: 2%; }
}
@media (prefers-reduced-motion: reduce) {
  .join__title .line__in, .join__card[data-reveal] { transform: none; opacity: 1; }
  .join__card .card, .card__scan::before { animation: none; }
  .card__stamp { transform: rotate(12deg) scale(1); }
  .steps::before { transform: scaleX(1); }
}
.card__stamp { right: auto; left: 54%; top: -13%; }
@media (min-width: 901px) { .join { padding-right: calc(var(--pad) + 44px); } }
@media (max-width: 900px) { .card__stamp { left: auto; right: 4%; top: -12%; } }
.card__stamp { top: -19%; left: 50%; }
/* PayPal: its own mark on a white pill, the way PayPal shows it */
.give__paypal { gap: 10px; color: var(--ink); background: var(--white); box-shadow: none; }
.give__paypal span { font-weight: 700; font-stretch: 88%; }
.give__paypal img { width: 78px; height: auto; display: block; }
.give__paypal:hover, .give__paypal:focus-visible { background: #ffc439; color: var(--ink); }

/* ---------------------------------------------------------------- footer: the last point */
.foot__dot {
  position: relative; display: inline-block; vertical-align: baseline;
  width: .2em; height: .2em; margin-left: .045em; border-radius: 50%;
  background: var(--red); text-decoration: none;
  translate: var(--mx, 0) var(--my, 0);
  transition: translate .5s var(--ease-out), transform .5s var(--ease-out), box-shadow .5s;
}
.foot__dot:hover, .foot__dot:focus-visible { transform: scale(1.35); box-shadow: 0 0 0 .02em rgba(215, 20, 28, .35), 0 0 .12em .02em rgba(215, 20, 28, .6); }
.foot__dot:focus-visible { outline: none; }
.foot__ring {
  position: absolute; left: 50%; top: 50%; width: .5em; height: .5em; translate: -50% -50%;
  overflow: visible; pointer-events: none;
  animation: spin 16s linear infinite; opacity: .75; transition: opacity .4s;
}
.foot__ring text { fill: var(--white); font-family: var(--f-mono); font-size: 8.4px; font-weight: 700; letter-spacing: 0; }
.foot__dot:hover .foot__ring, .foot__dot:focus-visible .foot__ring { opacity: 1; animation-duration: 6s; }
@keyframes spin { to { rotate: 360deg; } }
.foot__live {
  display: inline-flex; align-items: center; gap: 12px; margin: clamp(26px, 3vw, 44px) var(--pad) 0;
  padding: 10px 18px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 99px;
  color: rgba(255, 255, 255, .85); font-family: var(--f-mono); font-size: .8rem; letter-spacing: .06em;
}
.foot__live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mute); }
.foot__live.is-open .foot__live-dot { background: var(--red); animation: beat 1.8s infinite; }
@media (prefers-reduced-motion: reduce) { .foot__ring { animation: none; } .foot__dot { translate: none; } }
.foot__dot { margin-left: .17em; }
.foot__ring { width: .56em; height: .56em; }
.foot__ring text { font-size: 8.8px; }
.city { overflow-x: clip; } /* the shooting star starts beyond the map edge */
.join { overflow-x: clip; } /* the card flies in from the right */

/* ---------------------------------------------------------------- the sky spans the whole Standorte chapter */
.city__sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.city__sky svg { width: 100%; height: 100%; display: block; }
.city__copy, .city__map { position: relative; z-index: 1; }
.city .star { fill: #fff; opacity: .1; }
.city:has(.city__map.is-in) .star { animation: twinkle var(--d, 4.6s) ease-in-out var(--s, 0s) infinite; }
.city__milky { opacity: 0; transition: opacity 3s ease .6s; }
.city:has(.city__map.is-in) .city__milky { opacity: 1; }
.dust { fill: #fff; opacity: .26; }

/* bright stars on the map: they breathe (scale + light) and sway gently to and fro, each in its own time */
.spark { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.25); filter: drop-shadow(0 0 3px rgba(255, 255, 255, .85)); }
.city__map.is-in .spark {
  animation: breathe var(--t, 4s) ease-in-out var(--w, 0s) infinite, sway var(--st, 7s) ease-in-out var(--w, 0s) infinite alternate;
}
@keyframes breathe { 0%, 100% { opacity: 0; transform: scale(.25); } 45% { opacity: var(--k, .9); transform: scale(1); } 60% { opacity: calc(var(--k, .9) * .75); transform: scale(.85); } }
@keyframes sway { from { rotate: calc(var(--sw, 8deg) * -1); } to { rotate: var(--sw, 8deg); } }

/* shooting stars: JS picks a new place and angle anywhere in the chapter for every flight */
.city__comet {
  position: absolute; left: 0; top: 0; width: 150px; height: 2px; opacity: 0;
  background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); border-radius: 2px;
  transform-origin: 0 50%; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .8));
}
/* map pins: no browser focus box on click; keyboard focus shows as the grown point */
.pin:focus { outline: none; }
.pin:focus-visible .pin__dot { transform: scale(1.7); }
.pin:focus-visible .pin__label { fill: var(--white); }
@media (prefers-reduced-motion: reduce) { .city .star { opacity: .25; } .spark { opacity: .6; transform: scale(.8); } .city__milky { opacity: 1; } }
/* the label only runs along the right side of the point, so it never touches the headline; it sways instead of spinning */
.foot__ring { animation: ring-sway 5s ease-in-out infinite alternate; opacity: .85; }
.foot__dot:hover .foot__ring, .foot__dot:focus-visible .foot__ring { animation-duration: 2.4s; opacity: 1; }
.foot__ring text { font-size: 10px; letter-spacing: .12em; }
@keyframes ring-sway { from { rotate: -14deg; } to { rotate: 14deg; } }
@media (prefers-reduced-motion: reduce) { .foot__ring { animation: none; } }
.foot__dot { margin-left: .05em; }

/* "seit 2014" as a round stamp beside "Gut bleibt gut." — the year gets its own moment on the light screen */
.idea__head { position: relative; }
.since {
  position: absolute; right: clamp(0px, 4vw, 60px); top: 38%;
  display: grid; place-content: center; text-align: center; gap: 2px;
  width: clamp(120px, 12vw, 180px); aspect-ratio: 1; border-radius: 50%;
  color: var(--white); background: var(--red);
  box-shadow: 0 20px 40px -18px rgba(13, 12, 12, .55), inset 0 0 0 4px rgba(255, 255, 255, .9), inset 0 0 0 6px var(--red);
  rotate: -12deg;
}
.since[data-reveal] { filter: none; transform: scale(.3); }
.since[data-reveal].is-in { transform: none; transition: opacity .6s, transform 1s cubic-bezier(.3, 1.6, .5, 1) .3s; }
.since b { font-size: clamp(2.2rem, 3.6vw, 3.6rem); font-weight: 900; font-stretch: 64%; line-height: .85; }
.since small { font-family: var(--f-mono); font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 900px) { .since { position: relative; right: auto; top: auto; margin-top: 24px; } }
@media (min-width: 901px) { .since { top: auto; bottom: -2%; right: 16%; } }
@media (min-width: 901px) { .since { bottom: -16%; right: 14%; } }

/* a full stop never wraps onto a line of its own */
.nw { white-space: nowrap; }

/* the Milky Way, quieter */
.city__milky { filter: brightness(.55); }
.city:has(.city__map.is-in) .city__milky { opacity: .75; }
.dust { opacity: .13; }

/* step line: three red segments that fill the three black rules one after another, gaps included */
.steps::before { display: none; }
.step::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 4px; z-index: 1;
  background: var(--red); transform-origin: 0 50%;
  transform: scaleX(clamp(0, calc((var(--p, 0) - .3) * 10 - var(--si, 0)), 1));
}
.step:nth-child(2) { --si: 1; }
.step:nth-child(3) { --si: 2; }
@media (max-width: 900px) { .step::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .step::before { transform: none; } }

/* ring round the last point: spins again; over the white letters it turns dark by itself */
.foot__dot { margin-left: .06em; }
.foot__ring { width: .56em; height: .56em; animation: spin 16s linear infinite; opacity: 1; mix-blend-mode: difference; }
.foot__ring text { font-size: 8.8px; letter-spacing: 0; }
.foot__dot:hover .foot__ring, .foot__dot:focus-visible .foot__ring { animation-duration: 6s; }

/* thank-you line under the donation card */
.donate__thanks { display: grid; grid-template-columns: auto minmax(0, 42ch); align-items: end; gap: 14px clamp(20px, 3vw, 40px); margin-top: clamp(40px, 5vw, 70px); }
.donate__big { font-size: clamp(3.4rem, 8vw, 8rem); font-weight: 900; font-stretch: 62%; line-height: .85; letter-spacing: -.035em; }
.donate__big .dot { background: var(--ink); }
.donate__thanks > span:last-child { padding-bottom: .6em; color: rgba(255, 255, 255, .92); font-size: clamp(1.05rem, 1.4vw, 1.25rem); }
@media (max-width: 700px) { .donate__thanks { grid-template-columns: 1fr; } .donate__thanks > span:last-child { padding-bottom: 0; } }

/* the receipt now comes out of a drawn thermal printer: body, grille, LED, feed button, serrated cutter */
.printer { padding-top: 0; }
.printer__slot { position: relative; left: auto; right: auto; top: auto; height: auto; margin: 0 -22px -18px; background: none; box-shadow: none; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .35)); }
.printer__slot::after { display: none; }
.printer__slot svg { display: block; width: 100%; height: auto; }
.printer__led { fill: #5a1112; }
.printer.is-in .printer__led { animation: led .5s steps(2, jump-none) 5, led-on 0s 2.5s forwards; }
@keyframes led { 0% { fill: #5a1112; } 100% { fill: var(--red); } }
@keyframes led-on { to { fill: var(--red); filter: drop-shadow(0 0 4px var(--red)); } }

/* ---------------------------------------------------------------- Geschichte: a line that runs through the years */
.story { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 90px); margin-top: clamp(90px, 11vw, 170px); padding-top: clamp(50px, 6vw, 90px); border-top: 2px solid var(--ink); }
.story__rail { position: relative; }
.story__year {
  position: sticky; top: calc(var(--bar-h) + 40px); display: block;
  font-size: clamp(5rem, 14vw, 16rem); font-weight: 900; font-stretch: 62%; line-height: .8; letter-spacing: -.04em;
  color: var(--red);
}
.story__year.is-flip { animation: year-flip .6s var(--ease-out); }
@keyframes year-flip { from { opacity: 0; transform: translateY(.18em); filter: blur(6px); } }
.story__title { margin: 14px 0 clamp(36px, 4vw, 60px); font-size: clamp(2.4rem, 5vw, 5.4rem); font-weight: 880; font-stretch: 64%; line-height: .9; letter-spacing: -.025em; }
.story__list { position: relative; margin: 0 0 40px; padding: 0 0 0 42px; list-style: none; }
.story__list::before, .story__list::after { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; }
.story__list::before { background: rgba(13, 12, 12, .12); }
.story__list::after { background: var(--red); transform-origin: 50% 0; transform: scaleY(var(--tl, 0)); }
.story__item { position: relative; padding: 0 0 clamp(30px, 3.4vw, 46px); opacity: .45; transition: opacity .5s; }
.story__item.is-passed { opacity: 1; }
.story__item::before {
  content: ""; position: absolute; left: -40px; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--white); box-shadow: inset 0 0 0 3px rgba(13, 12, 12, .25);
  transition: background-color .4s, box-shadow .4s, transform .5s var(--ease-out);
}
.story__item.is-passed::before { background: var(--red); box-shadow: 0 0 0 5px rgba(215, 20, 28, .16); transform: scale(1.15); }
.story__when { font-family: var(--f-mono); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.story__item h4 { margin-top: 4px; font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 850; font-stretch: 72%; line-height: 1.05; }
.story__item p { max-width: 52ch; margin-top: 8px; color: #3a3633; }
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; gap: 0; }
  .story__rail { position: sticky; top: calc(var(--bar-h) - 1px); z-index: 2; background: var(--white); }
  .story__year { position: static; font-size: 18vw; padding: 8px 0; }
}
@media (prefers-reduced-motion: reduce) { .story__item { opacity: 1; } .story__year.is-flip { animation: none; } }
.story__item h4 { margin: 4px 0 0; } .story__item p { margin: 8px 0 0; }
@media (max-width: 900px) { .printer__slot { margin: 0 -12px -14px; } }
/* ring label in brand red: readable on the black ground and on the white letters alike, no blending needed */
.foot__ring { mix-blend-mode: normal; }
.foot__ring text { fill: var(--red); font-weight: 800; }
/* The thank-you stands on the red, under the card, not inside it. In the card it had to share a screen
   with the account, the QR and three buttons, and everything ended up shoulder to shoulder. */
.donate .donate__thanks { margin-top: clamp(26px, 3.4vw, 48px); grid-template-columns: auto minmax(0, 46ch); align-items: center; }
@media (min-width: 701px) {
  .donate .donate__thanks { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px clamp(30px, 5vw, 80px); }
  .donate .donate__thanks > span:last-child { max-width: 44ch; padding-bottom: 0; }
}
/* the new printer body: the receipt slides out right under the slot */
.printer__slot { margin: 0 -26px -22px; }
.printer__led { fill: #4a1416; }
@media (max-width: 900px) { .printer__slot { margin: 0 -12px -16px; } }

/* ---------------------------------------------------------------- the year as a split-flap board */
.story__year { font-size: clamp(4rem, 8.6vw, 10rem); color: var(--white); display: flex; gap: .06em; }
.story__year.is-flip { animation: none; }
.flap {
  position: relative; display: inline-block; width: .66em; height: 1.02em;
  /* the viewer stands eight card-heights away, not three: the turning leaf tilts, it does not flare out.
     Whatever the leaf does, nothing of it is ever painted outside the card itself. */
  perspective: 8em; clip-path: inset(0 round .07em);
  font-weight: 900; font-stretch: 62%; line-height: 1;
}
.flap__top, .flap__bot, .flap__leaf {
  position: absolute; left: 0; right: 0; height: calc(50% - .008em); overflow: hidden;
  background: linear-gradient(#262525, #161515); border-radius: .07em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.flap__top, .flap__leaf--top { top: 0; border-bottom-left-radius: .02em; border-bottom-right-radius: .02em; }
.flap__bot, .flap__leaf--bot { bottom: 0; border-top-left-radius: .02em; border-top-right-radius: .02em; background: linear-gradient(#1b1a1a, #0d0c0c); }
.flap b { display: block; height: 1.02em; line-height: 1.02em; text-align: center; }
.flap__bot b, .flap__leaf--bot b { margin-top: calc(-.51em + .008em); }
/* a thin red hinge across the middle */
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - .006em); height: .012em; background: var(--red); z-index: 4; }
.flap__leaf { z-index: 3; backface-visibility: hidden; visibility: hidden; }
.flap__leaf--top { transform-origin: 50% 100%; }
.flap__leaf--bot { transform-origin: 50% 0; }
.flap__leaf.is-fall { visibility: visible; animation: flap-fall .15s ease-in forwards; }
.flap__leaf.is-land { visibility: visible; animation: flap-land .15s ease-out .075s both; }
@keyframes flap-fall { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes flap-land { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
@media (max-width: 900px) { .story__year { font-size: 15vw; } }

/* ---------------------------------------------------------------- the printer, whole, seen from above */
/* body is 1.22× the receipt width, so its slot (468/560 of the body) is exactly as wide as the paper;
   the receipt starts at the slot (132/560 × 1.22 ≈ 28.8% of its own width) and lies on the body */
.printer { position: relative; padding-top: 0; }
.printer__body { position: absolute; z-index: 0; top: 0; left: -6.5%; right: -6.5%; pointer-events: none; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .28)); }
.printer__body svg { display: block; width: 100%; height: auto; }
.receipt { margin-top: 31.5%; }
/* paper only ever shows below the slot: it slides down while the part still "inside" stays clipped */
.receipt { transform: translateY(-104%); clip-path: inset(104% 0 0 0); }
.printer.is-in .receipt { animation: print2 2.4s steps(14, end) forwards; }
@keyframes print2 { to { transform: translateY(0); clip-path: inset(0 0 0 0); } }
.printer__led { fill: #4a1416; }
@media (max-width: 900px) { .printer { width: 80%; margin-inline: auto; } .receipt { padding: 34px 14px 26px; font-size: .7rem; } }
@media (prefers-reduced-motion: reduce) { .receipt { transform: none; clip-path: none; } }
@media (min-width: 901px) { .hours { padding-right: calc(var(--pad) + 80px); } }

/* donation card: QR and buttons share one row, so no empty band opens under the buttons */
@media (min-width: 901px) {
  .give__qr { grid-row: 2; }
  .give__actions { grid-row: 2; align-self: center; }
}
/* the divider draws itself from the left and stops with a small red point before the big one */
.give .donate__thanks { position: relative; border-top: 0; margin-top: 0; }
.give .donate__thanks::before, .give .donate__thanks::after { content: ""; position: absolute; top: 0; }
.give .donate__thanks::before {
  left: 0; width: calc(100% - 17vw); height: 1px; background: rgba(255, 255, 255, .22);
  transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.4s var(--ease-out) .5s;
}
.give .donate__thanks::after {
  left: calc(100% - 17vw); width: 9px; height: 9px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--red); transform: scale(0); transition: transform .6s cubic-bezier(.3, 1.6, .5, 1) 1.7s;
}
.give.is-in .donate__thanks::before { transform: scaleX(1); }
.give.is-in .donate__thanks::after { transform: scale(1); }
@media (max-width: 900px) { .give .donate__thanks::before { width: 70%; } .give .donate__thanks::after { left: 70%; } }
@media (prefers-reduced-motion: reduce) { .give .donate__thanks::before, .give .donate__thanks::after { transform: none; } }

/* Standorte as one screen: on desktop the title, list and map size themselves by the window height */
@media (min-width: 1100px) and (min-height: 700px) {
  .city { min-height: 100svh; padding-top: calc(var(--bar-h) + 5vh); padding-bottom: 4vh; align-items: center; }
  .city__copy .eyebrow { margin-bottom: 1.6vh; }
  .city__title { font-size: min(7vw, 9.4vh); }
  .city__text { margin-top: 2vh; }
  .city__list { margin-top: 3vh; }
  .city__list a { padding: min(11px, .85vh) 0; }
  .city__map svg { max-height: calc(100svh - var(--bar-h) - 12vh); }
  .city__map figcaption { margin-top: 4px; }
}
@media (min-width: 1100px) and (min-height: 700px) {
  .city { padding-top: calc(var(--bar-h) + 1.5vh); padding-bottom: 3vh; }
  .city__title { font-size: min(7vw, 8.4vh); }
  .city__text { margin-top: 1.4vh; line-height: 1.45; }
  .city__list { margin-top: 2.2vh; }
  .city__list a { padding: min(11px, .7vh) 0; }
  .city__name { font-size: min(1.14rem, 2.35vh); line-height: 1.25; }
  .city__map svg { max-height: calc(100svh - var(--bar-h) - 9vh); }
}

/* The case: a real machine, not a square. It stands taller than the panel above the slot and carries on
   well below the paper, the corners are softer at the top than at the bottom, and the plastic is lit from
   above — one broad sweep across the lid, a hard 1 px edge on the very top, a dark base. */
.printer__body {
  top: -4%; bottom: -7%;
  border-radius: clamp(42px, 5.4vw, 80px) clamp(42px, 5.4vw, 80px) clamp(26px, 3.2vw, 46px) clamp(26px, 3.2vw, 46px);
  background:
    radial-gradient(135% 52% at 50% -14%, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 62%),
    linear-gradient(#2c2b2a, #1d1c1b 34%, #131211 74%, #0c0b0b);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .2),
    inset 0 -2px 6px rgba(0, 0, 0, .5),
    inset 0 0 0 1px rgba(255, 255, 255, .05),
    0 34px 44px -26px rgba(0, 0, 0, .55);
  filter: none;
}
/* a faint inner rim, like the moulded edge of the case */
.printer__body::before {
  content: ""; position: absolute; inset: 2%; border-radius: inherit;
  border: 1.5px solid rgba(255, 255, 255, .06); pointer-events: none;
}
/* the bed the paper lies on, and the shadow the paper throws as it leaves the slot */
.printer__body::after {
  content: ""; position: absolute; left: 5%; right: 5%; top: 30%; bottom: 2.6%;
  border-radius: 12px;
  background: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .1) 9%, rgba(255, 255, 255, .022) 26%);
  pointer-events: none;
}
.printer__body svg { position: relative; z-index: 1; }
/* the machine stands on something: a tight contact shadow under the case */
.printer::after {
  content: ""; position: absolute; z-index: -1; left: 4%; right: 4%; bottom: -17%; height: 26px;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* Standorte title back in the family of the other chapter titles; the list gets a touch tighter instead */
@media (min-width: 1100px) and (min-height: 700px) {
  .city { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .city__title { font-size: min(8vw, 12.4vh); }
  .city__list a { padding: min(11px, .5vh) 0; }
}

/* the printer in the project's black */
.printer__body { background: radial-gradient(135% 52% at 50% -14%, rgba(255, 255, 255, .11), rgba(255, 255, 255, 0) 62%), linear-gradient(#2a2928, #1a1918 35%, #121110 80%, #0d0c0c); }
.printer__body::after { background: rgba(255, 255, 255, .025); }

/* memory and rendering: chapters far off screen are skipped (see main.js, sizeChapters) */
/* The guessed height of a chapter that has not been measured yet: now that a chapter is one screen,
   guessing one screen keeps the page from shifting under the reader while the notches are aiming. */
html.js:not(.cv-off) main > section:not(.hero):not(.track):not(.regal), html.js:not(.cv-off) .foot { content-visibility: auto; contain-intrinsic-size: auto 100svh; }
/* the Sortiment photo window is never rendered while it is far away either */
.regal.is-far .regal__bg { display: none; }
/* no live blur behind the six Sortiment tiles (expensive on phones); the tile is simply darker */
.kind { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(13, 12, 12, .55); }

/* ================================================================ accessibility round (audit W01–W04, W10, W11) */

/* W04 — without JavaScript nothing waits for a reveal: every start state is the finished state */
html:not(.js) [data-reveal],
html:not(.js) .join__card[data-reveal],
html:not(.js) .since[data-reveal] { opacity: 1; filter: none; transform: none; }
html:not(.js) .hero__title .line__in,
html:not(.js) .join__title .line__in,
html:not(.js) .legal__title .line__in { transform: none; animation: none; }
html:not(.js) .hero__title .dot, html:not(.js) .legal__title .dot { transform: none; animation: none; }
html:not(.js) .legal__chapters a { opacity: 1; transform: none; animation: none; }
html:not(.js) .sticker { transform: rotate(var(--rot, -8deg)) scale(1); }
html:not(.js) .receipt { transform: none; clip-path: none; animation: none; }
html:not(.js) .pin__dot { transform: scale(1); }
html:not(.js) .pin__label, html:not(.js) .city__milky { opacity: 1; }
html:not(.js) .city__route { stroke-dashoffset: 0; }
html:not(.js) .kind svg path { stroke-dashoffset: 0; }
html:not(.js) .card__stamp { transform: rotate(12deg) scale(1); }
html:not(.js) .story__list::after { transform: scaleY(1); }
/* the burger needs JS; without it the plain links stay reachable in the bar */
html:not(.js) .burger { display: none; }
html:not(.js) .bar__nav { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; }

/* W01 — focus inside the red menu is white, well away from the red ground */
.menu a:focus-visible, .menu-open .burger:focus-visible { outline: 3px solid var(--white); outline-offset: 6px; border-radius: 4px; }

/* W02 — contrast: milestones stay fully readable, their state is shown by line and point only */
.story__item, .story__item.is-passed { opacity: 1; }
.story__item h4 { color: #4a4541; transition: color .4s; }
.story__item p { color: #57514c; }
.story__item.is-passed h4 { color: var(--ink); }
.story__item.is-passed p { color: #3a3633; }
.chip span { opacity: 1; }
.legal__index a { opacity: .78; }
.donate__lead { color: var(--white); }
.figures__note { color: #4f4a45; }

/* W03 — with text enlarged to 200 %, the rem-based lower bounds must not push words off screen */
.hero__title { font-size: clamp(min(3.1rem, 11vw), 10vw, 12rem); overflow-wrap: anywhere; }
.hero__title .nb { white-space: normal; }
.hero__foot, .hero__actions { min-width: 0; }
.shop__title, .idea__title, .city__title, .join__title, .hours__title, .regal__title, .team__title,
.help__title, .donate__title, .partners__title, .foot__shout, .story__title, .give__title { overflow-wrap: anywhere; }

/* W10 — the logo belt can be stopped for good */
.logos.is-paused .logos__row { animation-play-state: paused; }
.logos__pause {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px;
  color: rgba(255, 255, 255, .85); background: transparent; border: 0; border-radius: 99px; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); font: 700 .72rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
}
.logos__pause::before { content: ""; width: 8px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.logos__pause[aria-pressed="true"]::before { width: 0; height: 0; border: 0; border-left: 9px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.logos__pause:hover, .logos__pause:focus-visible { color: var(--white); box-shadow: inset 0 0 0 1.5px var(--red); }
@media (prefers-reduced-motion: reduce) { .logos__pause { display: none; } }
/* small red text on black needs a lighter red to reach 4.5:1; the brand red stays for large type and shapes */
:root { --red-on-dark: #f0484e; }
.panel__index b { color: var(--red-on-dark); }
.face__plate span { color: #4f4a45; }
/* long uppercase words in the Sortiment grid wrap instead of pushing the page wider at large text sizes */
.regal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kind { min-width: 0; }
.kind h3, .kind p { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 1100px) and (min-width: 901px) { .regal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .regal__grid { grid-template-columns: minmax(0, 1fr); } }
.face__plate span { color: #57514c; } /* 6.6:1 on the paper ground */

/* ================================================================ first screen: membership first, a way in for companies, a scroll hint */
.hero__biz {
  justify-self: start; display: inline-flex; align-items: baseline; gap: 6px; margin-top: 4px;
  color: rgba(255, 255, 255, .78); font-size: .95rem; text-decoration: none;
  animation: fade 1s 1.8s both;
}
.hero__biz b { color: var(--white); background: linear-gradient(var(--red), var(--red)) 0 100% / .85em 2px no-repeat; padding-bottom: 3px; transition: background-size .6s var(--ease-out); }
.hero__biz:hover b, .hero__biz:focus-visible b { background-size: 100% 2px; }
.hero__biz span { color: var(--red); transition: transform .4s var(--ease-out); }
.hero__biz:hover span { transform: translateX(4px); }

/* the ring sits on the portal point (--px/--py come from the portal hook) and fades as the portal opens */
.hero__go {
  position: absolute; z-index: 4; left: var(--px, -200px); top: var(--py, -200px);
  width: clamp(92px, 9vw, 150px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  opacity: calc(1 - var(--pp, 0) * 6); pointer-events: auto;
  animation: fade 1s 2.4s both;
}
.hero__ring { width: 100%; height: 100%; overflow: visible; animation: spin 14s linear infinite; }
.hero__ring text { fill: var(--white); font-family: var(--f-mono); font-size: 8.6px; font-weight: 700; }
.hero__go:hover .hero__ring, .hero__go:focus-visible .hero__ring { animation-duration: 5s; }
.hero__go:hover .hero__ring text, .hero__go:focus-visible .hero__ring text { fill: var(--red); }
.hero__go:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }

/* bottom centre: a thin running line under the word, visible on every screen size */
.hero__cue {
  position: absolute; left: 50%; bottom: clamp(14px, 3vh, 30px); translate: -50% 0;
  display: grid; justify-items: center; gap: 8px; margin: 0;
  color: rgba(255, 255, 255, .6); font-family: var(--f-mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  opacity: calc(1 - var(--pp, 0) * 8); animation: fade 1s 2.6s both;
}
.hero__cue-line { position: relative; width: 1px; height: 46px; overflow: hidden; background: rgba(255, 255, 255, .2); }
.hero__cue-line::after { content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: var(--red); animation: cue-down 1.8s var(--ease-snap) infinite; }
@keyframes cue-down { to { top: 100%; } }
@media (max-width: 900px) { .hero__cue { display: grid; } }

/* one gentle hop when nobody has scrolled yet */
.hero.is-hop .hero__title { animation: hop 1.1s var(--ease-out) 1; }
@keyframes hop { 0%, 100% { translate: 0 0; } 35% { translate: 0 -14px; } 60% { translate: 0 3px; } }

@media (prefers-reduced-motion: reduce) {
  .hero__ring { animation: none; }
  .hero__cue-line::after { animation: none; top: 0; }
  .hero__go { opacity: 1; }
}
html:not(.js) .hero__go { display: none; }
/* keep "Verschwendung." whole at normal size; the vw-capped font already makes it fit at 200 % text */
.hero__title .nb { white-space: nowrap; }
@media (min-width: 901px) { .hero__cue { display: none; } }
@media (max-width: 900px) { .hero__go { width: 78px; } }
/* the ring label in brand red, like the one round the last point: readable on white letters and on black */
.hero__ring text { fill: var(--red); font-weight: 800; }
.hero__go:hover .hero__ring text, .hero__go:focus-visible .hero__ring text { fill: var(--white); }

/* ================================================================ Für Unternehmen */
.biz {
  position: relative; z-index: 5;
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 5vw, 90px) clamp(30px, 6vw, 110px);
  padding: clamp(120px, 13vw, 200px) calc(var(--pad) + 30px) clamp(110px, 12vw, 180px) var(--pad);
  color: var(--ink); background: var(--white);
  clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%);
  margin-top: -4vw;
}
.biz__head { align-self: start; position: sticky; top: calc(var(--bar-h) + 40px); display: grid; justify-items: start; gap: clamp(20px, 2.4vw, 30px); }
.biz__head .eyebrow { margin-bottom: 0; }
.biz__title { font-size: clamp(3.4rem, 8.4vw, 9.6rem); font-weight: 880; font-stretch: 62%; line-height: .86; letter-spacing: -.035em; overflow-wrap: anywhere; }
.biz__lead { max-width: 40ch; color: #2c2927; font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.5; }
/* Three ways to get in touch, three buttons of the same width in one row. The number lives inside the
   call button under its label - the same two-line button the Mithelfen chapter uses - so the row does not
   have to be as wide as a phone number. On a phone they stack. */
.biz__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; align-items: stretch; }
/* a tighter inside margin than a lone button needs: the labels then stay on one line down to a narrow
   column instead of breaking in two and making the row twice as tall */
.biz__actions > * { justify-content: start; text-align: left; padding-inline: clamp(12px, 1.3vw, 24px); }
/* The same two-line button the branch panels use: a small mono word for the action, the channel under it.
   The lower line never breaks in two - it scales with the column, so all three keep one height. */
/* left, like every other two-line button in the project (.chip on the branch panels, .help__cta under
   Mithelfen). Only the single-line .btn centres its label. */
.biz__act { display: grid; gap: 2px; align-content: center; justify-items: start; padding-block: min(14px, 1.6vh);
  line-height: 1.2; white-space: nowrap; font-size: clamp(.74rem, .96vw, 1.02rem); }
.biz__act > span { font-family: var(--f-mono); font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
@media (max-width: 760px) { .biz__actions { grid-template-columns: 1fr; } }
.btn--ink { color: var(--white); background: var(--ink); border-color: var(--ink); }
.btn--ink:hover { color: var(--white); background: var(--red); border-color: var(--red); }
.biz__list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.biz__list li {
  display: grid; grid-template-columns: clamp(64px, 7vw, 110px) minmax(0, 1fr); gap: 4px 20px; align-items: baseline;
  padding: clamp(20px, 2.4vw, 32px) 0; border-bottom: 1px solid rgba(13, 12, 12, .16);
}
.biz__list li:nth-child(2) { transition-delay: .06s; }
.biz__list li:nth-child(3) { transition-delay: .12s; }
.biz__list li:nth-child(4) { transition-delay: .18s; }
.biz__list li:nth-child(5) { transition-delay: .24s; }
.biz__list span { grid-row: span 2; font-size: clamp(2.6rem, 4.4vw, 4.6rem); font-weight: 900; font-stretch: 62%; line-height: .8; color: var(--red); }
.biz__list h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 850; font-stretch: 72%; line-height: 1.05; }
.biz__list p { max-width: 46ch; color: #3a3633; }
.biz__wanted { grid-column: 2; }
.biz__wanted h3 { font-family: var(--f-mono); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.biz__wanted ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.biz__wanted li { padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: 99px; font-weight: 700; font-stretch: 88%; font-size: .95rem; }
.biz__wanted p { max-width: 52ch; margin-top: 16px; color: #3a3633; }
.help__biz { margin-top: clamp(24px, 3vw, 40px); color: #3a3633; }
.help__biz a { color: var(--ink); font-weight: 750; text-decoration: none; background: linear-gradient(var(--red), var(--red)) 0 100% / .85em 2px no-repeat; padding-bottom: 3px; transition: background-size .6s var(--ease-out); }
.help__biz a:hover, .help__biz a:focus-visible { background-size: 100% 2px; }
.help__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .biz { grid-template-columns: 1fr; padding-right: var(--pad); }
  .biz__head { position: static; }
  .biz__wanted { grid-column: 1; }
  .help__cards { grid-template-columns: 1fr; }
}
/* the header now carries one more link: the burger takes over a little earlier */
@media (min-width: 901px) and (max-width: 1280px) {
  .bar { grid-template-columns: auto 1fr auto auto; }
  .bar__nav { display: none; }
  .status { justify-self: end; }
  .burger { display: inline-flex; }
}

/* ================================================================ small design round */
.hero__go { text-decoration: none; }
/* team: the line sits right under the title as its subtitle */
.team__head { grid-template-columns: 1fr; }
.team__sub { max-width: 44ch; margin-top: clamp(14px, 1.8vw, 24px); color: #3a3633; font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.4; }
/* the 2014 stamp is a link to the story */
a.since { text-decoration: none; cursor: pointer; transition: rotate .5s var(--ease-out), scale .5s var(--ease-out); }
a.since:hover, a.since:focus-visible { rotate: -4deg; scale: 1.05; }
/* footer: tighter, with copyright, Datenschutz and the credit */
.foot { padding-bottom: clamp(26px, 3vw, 40px); }
.foot__base { margin-top: clamp(40px, 4.5vw, 64px); gap: 10px 28px; }
.foot__base a:last-child { margin-left: auto; }
.foot__credit { color: rgba(255, 255, 255, .42); }
.foot__credit b { color: rgba(255, 255, 255, .7); font-weight: 700; }
.foot__credit .dot { width: .34em; height: .34em; margin: 0 .08em; vertical-align: .05em; }
@media (max-width: 900px) { .foot__base a:last-child { margin-left: 0; } }
/* the printer in true black; the power key glows red from behind while printing, then stays lit */
.printer__body { background: radial-gradient(135% 52% at 50% -14%, rgba(255, 255, 255, .085), rgba(255, 255, 255, 0) 62%), linear-gradient(#1b1a19, #121111 40%, #0a0909); }
.printer__body::before { border-color: rgba(255, 255, 255, .045); }
.printer__halo { opacity: .35; filter: drop-shadow(0 0 5px rgba(215, 20, 28, .9)); }
.printer__power { stroke: #ff6a6f; filter: drop-shadow(0 0 3px rgba(255, 70, 76, .9)); }
.printer.is-in .printer__halo { animation: halo 1s ease-in-out 3, halo-on .01s 3s forwards; }
@keyframes halo { 50% { opacity: 1; } }
@keyframes halo-on { to { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .printer__halo { opacity: .85; } }

/* ================================================================ Sortiment in the house style */
/* duotone window: the shelf photo in black and brand red, so it belongs to the palette */
.regal__bg img { filter: grayscale(1) contrast(1.15) brightness(.55); }
.regal__bg::after { background: linear-gradient(180deg, rgba(13, 12, 12, .55), rgba(13, 12, 12, .2) 45%, rgba(13, 12, 12, .75)), rgba(215, 20, 28, .38); mix-blend-mode: normal; }
.regal__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--red); mix-blend-mode: multiply; opacity: .55; }
/* no grid of glass tiles: an open list on the photo, with big red numbers like the rest of the site */
.regal__grid { border: 0; gap: clamp(36px, 4vw, 64px) clamp(30px, 4vw, 70px); }
.kind { display: block; padding: 0; border: 0; background: none; border-top: 2px solid rgba(255, 255, 255, .85); padding-top: 20px; }
.kind:hover { background: none; }
.kind__num { display: block; margin-bottom: 14px; font-size: clamp(3rem, 5vw, 5.4rem); font-weight: 900; font-stretch: 62%; line-height: .8; color: var(--red-on-dark); }
.kind h3 { text-transform: none; letter-spacing: -.01em; font-size: clamp(1.7rem, 2.6vw, 2.5rem); font-weight: 860; font-stretch: 68%; line-height: .95; }
.kind p { margin-top: 10px; max-width: 34ch; color: rgba(255, 255, 255, .86); }
/* darker duotone: mostly black with a red cast, so the red numbers stand out */
.regal__bg::before { opacity: .32; }
.regal__bg::after { background: linear-gradient(180deg, rgba(13, 12, 12, .78), rgba(13, 12, 12, .52) 45%, rgba(13, 12, 12, .86)); }

/* Standorte fills exactly one window on desktop: the list stretches over the free height, the map scales with it */
@media (min-width: 1100px) and (min-height: 700px) {
  .city { height: 100svh; min-height: 0; padding-top: calc(var(--bar-h) + 2vh); padding-bottom: 3vh; align-items: stretch; }
  .city__copy { display: flex; flex-direction: column; min-height: 0; }
  .city__list { flex: 1 1 auto; display: grid; grid-auto-rows: 1fr; min-height: 0; }
  .city__list li { display: flex; }
  .city__list a { flex: 1; align-items: center; padding-block: 0; }
  .city__map { display: flex; flex-direction: column; justify-content: center; min-height: 0; }
  .city__map svg { max-height: calc(100svh - var(--bar-h) - 10vh); width: auto; max-width: 100%; margin-inline: auto; }
}

/* ================================================================ Mitglied werden as a short story */
@media (min-width: 901px) {
  .join { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: start; }
  .join__head { grid-column: 1; grid-row: 1; }
  .join__card { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
  .join__card .card { position: sticky; top: calc(50vh - min(580px, 42vw) * .63 / 2 + var(--bar-h) / 2); }
  .card__stamp { position: sticky; }
  .steps { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; gap: 0; }
  .step { min-height: 46vh; padding-top: 26px; display: grid; align-content: start; border-top: 2px solid rgba(13, 12, 12, .18); transition: border-color .5s; }
  .step::before { display: none; }
  .step h3, .step p { transition: color .5s, opacity .5s; }
  .join[data-step="1"] .step:nth-child(1), .join[data-step="2"] .step:nth-child(2), .join[data-step="3"] .step:nth-child(3) { border-top-color: var(--red); }
  .join:not([data-step="1"]) .step:nth-child(1) h3, .join:not([data-step="2"]) .step:nth-child(2) h3, .join:not([data-step="3"]) .step:nth-child(3) h3 { opacity: .35; }
  .proofs { grid-column: 1; grid-row: 3; }
  .join__facts { grid-column: 2; grid-row: 3; }

  /* the card's printed parts are covered until step 3 */
  .card__blank { position: absolute; z-index: 1; background: #fff; transform-origin: 0 50%; transition: transform .9s var(--ease-out) .15s; }
  .card__blank--name { left: 4.5%; top: 31%; width: 42%; height: 21%; }
  .card__blank--qr { left: 56.5%; top: 14%; width: 30%; height: 54%; transform-origin: 50% 0; }
  .join[data-step="3"] .card__blank--name { transform: scaleX(0); }
  .join[data-step="3"] .card__blank--qr { transform: scaleY(0); transition-delay: .5s; }
  /* step 2: two proof slips land on the card, step 3 they are gone */
  .card__doc {
    position: absolute; z-index: 2; padding: .5em .9em; border-radius: 8px;
    color: var(--ink); background: var(--paper); box-shadow: 0 14px 24px -12px rgba(0, 0, 0, .5), inset 0 0 0 2px var(--ink);
    font: 800 clamp(.8rem, 1.1vw, 1rem) var(--f-sans); font-stretch: 80%;
    opacity: 0; transform: translate(40%, -140%) rotate(18deg); transition: opacity .5s, transform .8s cubic-bezier(.3, 1.4, .5, 1);
  }
  .card__doc--a { left: 8%; top: 30%; }
  .card__doc--b { left: 26%; top: 50%; transition-delay: .15s; }
  .join[data-step="2"] .card__doc--a { opacity: 1; transform: rotate(-6deg); }
  .join[data-step="2"] .card__doc--b { opacity: 1; transform: rotate(4deg); }
  /* scan and stamp only belong to the finished card */
  .join:not([data-step="3"]) .card__scan::before { animation: none; opacity: 0; }
  .join:not([data-step="3"]) .card__stamp { transform: rotate(12deg) scale(0); transition-delay: 0s; }
  .join[data-step="3"] .card__stamp { transform: rotate(12deg) scale(1); transition-delay: 1.1s; }
}
@media (max-width: 900px), (prefers-reduced-motion: reduce) { .card__blank, .card__doc { display: none; } }
html:not(.js) .card__blank, html:not(.js) .card__doc { display: none; }
@media (min-width: 901px) {
  .join__card { align-content: start; align-items: start; }
  .join__card .card { align-self: start; height: auto; }
}
/* the stamp lives on the card itself now, so it travels with the pinned card */
.card__stamp { position: absolute; z-index: 3; }
@media (min-width: 901px) { .card__blank--qr { height: 60%; } .card__stamp { left: 62%; top: -14%; } }
/* the stamp may overlap the card's edge: the card no longer clips, the picture keeps its own round corners */
.join__card .card { overflow: visible; }
.join__card .card img { border-radius: 3.2% / 5%; }
.card__blank--name { border-radius: 4px; }
@media (max-width: 900px) { .card__stamp { left: auto; right: -2%; top: -16%; } }
/* inactive steps: readable grey (4.6:1) instead of faded */
@media (min-width: 901px) {
  .join:not([data-step="1"]) .step:nth-child(1) h3, .join:not([data-step="2"]) .step:nth-child(2) h3, .join:not([data-step="3"]) .step:nth-child(3) h3 { opacity: 1; color: #6f6964; }
}
.foot__credit { color: rgba(255, 255, 255, .6); }

/* chapters that are never skipped pause every running animation while far away */
.is-off, .is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }
/* film grain: a much smaller moving layer; on touch devices it stands still (memory and battery) */
.hero__grain { inset: -8%; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-3%, -1%); } 80% { transform: translate(3%, 2%); } 100% { transform: translate(0, 0); } }
@media (pointer: coarse), (max-width: 900px) { .hero__grain { animation: none; inset: 0; } }
/* small red text on black uses the lighter red (≥ 4.5:1); large type and shapes keep the brand red */
.city__num, .city__code em, .city__list a:hover, .city__list a:focus-visible, .city__list a.is-hot,
.legal__chapters small, .legal__block:not(.legal__block--light) .legal__num,
.legal__block:not(.legal__block--light) .legal__index a::before, .legal__block:not(.legal__block--light) .legal__index a.is-on { color: var(--red-on-dark); }
.give .give__bank dt { color: rgba(255, 255, 255, .62); }
/* on the stone ground small red text uses the deeper red (≥ 4.5:1) */
.legal__block--light .legal__num, .legal__block--light .legal__index a::before, .legal__block--light .legal__index a.is-on { color: var(--red-deep); }
.give__qrimg { image-rendering: pixelated; }

/* ================================================================ smoothness: cheap shadows under moving round stamps */
/* a blurred box-shadow on a scaling element is repainted every frame; a static gradient disc underneath is not */
.since, .card__stamp { box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .9), inset 0 0 0 6px var(--red); }
.since::after, .card__stamp::after {
  content: ""; position: absolute; inset: 8% -6% -18% -6%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(13, 12, 12, .35), rgba(13, 12, 12, 0));
}
.since, .card__stamp { isolation: isolate; }
/* branch belt: panels far off to the side are not rendered (memory and speed) */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) { .panel { content-visibility: auto; contain-intrinsic-size: auto 100vw auto 100svh; } }

/* ================================================================ round 3 (owner's 11 remarks) */

/* 1 · the pulse no longer lives on the headline's dot (the line mask cut it off);
   it is a ring on the scroll link, outside the mask */
.hero__title .dot--portal { box-shadow: none; animation: pop .9s var(--ease-out) forwards; }
.hero__go::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; border: 2px solid var(--red); opacity: 0; pointer-events: none;
  animation: lure-ring 2.4s var(--ease-out) 2.8s infinite;
}
@keyframes lure-ring { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(3.4); } }

/* 5 · the fade-in used to hold opacity at 1 forever, so the ring kept turning over the open photo;
   the fade now runs on the drawing inside, and the link itself follows the portal */
.hero__go { animation: none; opacity: calc(1 - var(--pp, 0) * 6); visibility: visible; }
.hero__go .hero__ring { animation: fade 1s 2.4s both, spin 14s linear infinite; }
.hero__go.is-gone { visibility: hidden; }
.hero__cue { animation: none; }
.hero__cue > * { animation: fade 1s 2.6s both; }

/* 4 · hover behaves like the last point in the footer: the label stays red and turns faster, the ring leans in */
.hero__go:hover .hero__ring text, .hero__go:focus-visible .hero__ring text { fill: var(--red); }
.hero__go:hover .hero__ring, .hero__go:focus-visible .hero__ring { animation-duration: 1s, 5s; }
.hero__go { transition: scale .5s var(--ease-out); }
.hero__go:hover, .hero__go:focus-visible { scale: 1.08; }

/* 2 · "Für Unternehmen" in the header: the second door, white with red letters */
.bar__nav .bar__biz {
  padding: 10px 17px; color: var(--red); background: var(--white); border-radius: 99px;
  box-shadow: inset 0 0 0 1.5px var(--white);
  transition: background-color .3s, color .3s, box-shadow .3s, transform .4s var(--ease-out);
}
.bar__nav .bar__biz::after { display: none; }
.bar.on-light .bar__nav .bar__biz { box-shadow: inset 0 0 0 1.5px var(--red); }
.bar__nav .bar__biz:hover, .bar__nav .bar__biz:focus-visible { color: var(--white); background: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); transform: translateY(-2px); }

/* 3 · the companies' line under the buttons, in the site's small mono voice */
.hero__biz {
  grid-column: 2 / -1; justify-self: start; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.hero__biz::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.hero__biz b { font-weight: 700; }
@media (max-width: 900px) { .hero__biz { grid-column: 1; } }

/* 7 · power glows white from behind; PRINT stays the only red lamp */
.printer__halo { stroke: #f4f1ec; filter: drop-shadow(0 0 5px rgba(255, 255, 255, .75)); }
.printer__power { stroke: #fff; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9)); }

/* 9 · the red point on the portrait ring sends a slow ripple now and then */
.boss::before {
  content: ""; position: absolute; z-index: 1; border-radius: 50%; border: 2px solid var(--red); pointer-events: none;
  width: calc(var(--w) * .15); height: calc(var(--w) * .15); left: calc(50% + var(--w) * .29); top: calc(var(--w) * .79);
  opacity: 0;
}
.boss.is-in::before { animation: lure-ring 3.2s var(--ease-out) 1.6s infinite; }
@media (max-width: 900px) { .boss::before { left: calc(var(--w) * .79); } }

/* 11 · the credit: only "Design & Umsetzung" at first; the name slides out on hover or focus, its point pulses */
.foot__credit { display: inline-flex; align-items: baseline; gap: .45em; cursor: default; outline: none; }
.foot__credit b { display: inline-flex; align-items: baseline; max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap; transition: max-width .7s var(--ease-out), opacity .5s; }
.foot__credit:hover b, .foot__credit:focus-visible b, .foot__credit:focus-within b { max-width: 6em; opacity: 1; }
.foot__credit .dot { animation: beat 1.6s ease-in-out infinite; }
.foot__credit:focus-visible { box-shadow: 0 2px 0 var(--red); }
@media (hover: none) { .foot__credit b { max-width: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hero__go::before, .boss::before { animation: none; }
  .foot__credit .dot { animation: none; }
}
/* 6 · Milky Way as one picture; it drifts very slowly (a cheap moved layer, no repaint) */
.city__milky { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; opacity: 0; filter: brightness(.55); transition: opacity 3s ease .6s; }
.city:has(.city__map.is-in) .city__milky { opacity: .75; animation: drift 90s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate3d(-2%, 1%, 0) rotate(-1deg); } to { transform: translate3d(2%, -1%, 0) rotate(1deg); } }
.foot__credit .dot { animation: credit-pulse 1.6s ease-in-out infinite; }
@keyframes credit-pulse { 50% { transform: scale(1.7); } }
@media (prefers-reduced-motion: reduce) { .city__milky { animation: none; opacity: .75; } }
html:not(.js) .city__milky { opacity: .75; }

/* 10 · offer form for companies (builds an e-mail, no server) */
.offer { grid-column: 2; display: grid; gap: 16px; padding: clamp(24px, 3vw, 40px); background: var(--paper); border-top: 5px solid var(--red); }
.offer__title { font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 860; font-stretch: 66%; line-height: .95; }
.offer__intro, .offer__note { color: #4a4541; }
.offer__note { font-size: .88rem; }
.offer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.offer__field { display: grid; gap: 6px; }
.offer__field--wide { grid-column: 1 / -1; }
.offer__field span { font-family: var(--f-mono); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #3a3633; }
.offer__field input, .offer__field textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--white);
  font: inherit; color: var(--ink); resize: vertical;
}
.offer__field input:focus-visible, .offer__field textarea:focus-visible { outline: 3px solid var(--red); outline-offset: 1px; }
.offer__error { color: var(--red-deep); font-weight: 700; }
.offer__send { justify-self: start; }
@media (max-width: 900px) { .offer { grid-column: 1; } .offer__grid { grid-template-columns: 1fr; } }
.foot__credit { gap: 0; } .foot__credit b { padding-left: 0; } .foot__credit b .dot { margin-left: .12em; }

/* ================================================================ round 4 */
/* 6 · no arrow glyphs: a link ends in the site's own point, which moves the way the link goes */
.go {
  display: inline-block; width: .38em; height: .38em; margin-left: .38em; border-radius: 50%;
  background: var(--red); vertical-align: .08em; flex: 0 0 auto;
  transition: transform .5s var(--ease-out);
}
.btn--red .go { background: var(--white); }
a:hover > .go--r, a:focus-visible > .go--r, button:hover > .go--r, button:focus-visible > .go--r { transform: translateX(.35em); }
a:hover > .go--out, a:focus-visible > .go--out { transform: translate(.25em, -.25em); }
a:hover > .go--up, a:focus-visible > .go--up { transform: translateY(-.3em); }
a:hover > .go--l, a:focus-visible > .go--l { transform: translateX(-.35em); }
a:hover .go--down, a:focus-visible .go--down { transform: translateY(.3em); }
.back .go--l { order: -1; margin: 0 .1em 0 0; }
.since .go { background: var(--white); width: .5em; height: .5em; }
/* 9 · the footer separator is a red point too */
.sep { display: inline-block; width: .42em; height: .42em; margin: 0 .6em; border-radius: 50%; background: var(--red); vertical-align: .1em; }
/* 5 · the receipt carries a real, scannable Code 128 (a small wish) instead of decorative stripes */
.receipt__code { background: none; height: 58px; width: 88%; }
.receipt__code svg { display: block; width: 100%; height: 100%; }
/* the rail's chapter name no longer stays on top of the content: it flashes when a chapter starts, and on hover */
.rail a.is-current:not(.is-flash):not(:hover):not(:focus-visible) span { opacity: 0; transform: translate(6px, -50%); }
/* honeypot: invisible to people, tempting to bots */
.offer__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.offer { position: relative; }
.offer__ok { padding: 12px 16px; color: var(--white); background: var(--ink); border-radius: 10px; font-weight: 700; }
.offer__note a { color: inherit; }
.offer__send:disabled { opacity: .6; cursor: progress; }

/* offer form: two ways out — straight through the site, or the same text in the visitor's own mail program */
.offer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.offer__mail {
  padding: 4px 0 3px; color: var(--ink); background: linear-gradient(var(--red), var(--red)) 0 100% / .85em 2px no-repeat;
  border: 0; font: 700 .95rem var(--f-sans); cursor: pointer; transition: background-size .6s var(--ease-out);
}
.offer__mail:hover, .offer__mail:focus-visible { background-size: 100% 2px; }
.offer__mail:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.offer__fail { margin: 0; padding: 12px 16px; color: var(--ink); background: #fbe3e4; border-left: 4px solid var(--red); border-radius: 6px; }

/* the first point answers the pointer like the last one: it grows and leans in (translate is set from JS) */
.hero__title .dot--portal { transition: scale .5s var(--ease-out), box-shadow .5s; }
.hero__title .dot--portal.is-hot { scale: 1.35; box-shadow: 0 0 0 .02em rgba(215, 20, 28, .35), 0 0 .12em .02em rgba(215, 20, 28, .6); }
/* the ring keeps its own layer, so hovering it never re-layers the stage; a closed portal is not painted */
.hero__go { will-change: scale, opacity; }
.portal.is-shut { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .hero__title .dot--portal.is-hot { scale: 1; } }

/* Standorte: the way into the 3D map */
.city__3d {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; color: var(--white); text-decoration: none; font-weight: 750;
  background: linear-gradient(var(--red), var(--red)) 0 100% / .85em 2px no-repeat; padding-bottom: 4px; transition: background-size .6s var(--ease-out);
}
.city__3d:hover, .city__3d:focus-visible { background-size: 100% 2px; }
.city__3d:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }

/* the big see-through postcode belongs to the side with the address, not across the photos:
   it now sits in the text column, low and left, and drifts with the text block, not against it */
@media (min-width: 901px) {
  .panel__code {
    left: var(--pad); bottom: clamp(56px, 7vh, 104px);
    font-size: clamp(64px, 11vw, 200px); letter-spacing: -.04em;
    -webkit-text-stroke-width: 1.5px;
    /* only a hint of drift, so the number can never wander over the photo column */
    transform: translateX(calc(var(--lp, 0) * -2vw));
  }
}




/* WhatsApp for companies: the quickest way to send a photo of a pallet. wa.me opens the app on a phone
   and web.whatsapp.com on a desktop, so both ends of the link work without a second button. */
.biz__wa {
  color: var(--ink); background: transparent; box-shadow: inset 0 0 0 2px var(--ink);
  transition: background-color .4s var(--ease-out), color .4s var(--ease-out);
}
.biz__wa b { display: inline-flex; align-items: center; gap: 9px; font-weight: inherit; }
.biz__wa .wa { width: 19px; height: 19px; fill: #25d366; flex: none; }
.biz__wa:hover, .biz__wa:focus-visible { color: var(--white); background: var(--ink); }


/* ---------------------------------------------------------------- offene Stellen */
/* The page is built empty on purpose: the list comes from assets/data/jobs.json at runtime, because the
   form in jobs.php writes that file and a new vacancy must not wait for a rebuild. */
/* Erster Schirm der Stellenseite: wofuer hier gearbeitet wird, in Worten und in Zahlen. Die Liste
   steht bewusst erst auf dem naechsten Schirm - sonst liest man Stellenbeschreibungen, bevor man weiss,
   um welches Haus es geht. */
.jlead { min-height: 100svh; display: grid; align-content: space-between; gap: clamp(32px, 5vh, 80px);
  padding: calc(var(--bar-h) + clamp(36px, 6vh, 90px)) var(--pad) clamp(34px, 5vh, 68px);
  color: var(--ink); background: var(--paper); }
/* als Raster, damit Pille und Weg-nach-unten untereinander stehen und nicht nebeneinander treiben */
.jlead__wort { display: grid; justify-items: start; max-width: 64ch; }
.jlead__title { margin: 10px 0 0; font-size: clamp(3rem, 8vw, 8.5rem); font-weight: 880; font-stretch: 62%; line-height: .86; letter-spacing: -.035em; }
.jlead__satz { max-width: 52ch; margin: clamp(18px, 2.4vw, 30px) 0 0; color: #3a3633; font-size: clamp(1.02rem, 1.25vw, 1.2rem); line-height: 1.6; }
/* wie viele Stellen gerade offen sind, sagt die Seite hier schon - dieselbe Lampe wie bei den Oeffnungszeiten */
.jlead__jetzt { display: inline-flex; align-items: center; gap: 10px; justify-self: start;
  margin: clamp(20px, 3vh, 32px) 0 0; padding: 9px 16px 9px 14px; border-radius: 99px;
  background: var(--ink); color: var(--white); font-family: var(--f-mono); font-size: .71rem;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.jlead__lampe { width: 9px; height: 9px; border-radius: 50%; background: var(--mute); flex: none; }
.jlead__jetzt.is-offen .jlead__lampe { background: var(--red); animation: beat 1.8s var(--ease-out) infinite; }
.jlead__go { display: inline-flex; align-items: center; gap: 12px; justify-self: start;
  margin-top: clamp(16px, 2.2vh, 26px); font-weight: 700; text-decoration: none; }
.jlead__go:hover { color: var(--red); }
.jlead__zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 54px);
  margin: 0; padding: 0; list-style: none; }
.jlead__zahlen li { border-top: 2px solid var(--ink); padding-top: 16px; }
.jlead__num { display: block; color: var(--red); font-size: clamp(2.4rem, 5.2vw, 4.6rem);
  font-weight: 880; font-stretch: 62%; line-height: .9; letter-spacing: -.03em; }
.jlead__num .dot { background: var(--ink); }
.jlead__zahlen p { display: grid; gap: 3px; margin: 12px 0 0; color: #4a4541; font-size: .93rem; line-height: 1.5; }
.jlead__zahlen p b { color: var(--ink); font-size: clamp(1.02rem, 1.3vw, 1.24rem); font-stretch: 86%; }
@media (max-width: 700px) {
  .jlead { min-height: 0; }
  .jlead__zahlen { grid-template-columns: 1fr; gap: 16px; }
  .jlead__zahlen li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 0 16px; }
  .jlead__num { font-size: 2.4rem; }
  .jlead__zahlen p { margin-top: 0; }
}

.jobs { padding: calc(var(--bar-h) + clamp(30px, 4vw, 64px)) var(--pad) clamp(90px, 10vw, 160px); color: var(--ink); background: var(--paper); }
.jobs__head { max-width: 62ch; }
.jobs__title { margin: 10px 0 0; font-size: clamp(2.3rem, 5.4vw, 5.2rem); font-weight: 880; font-stretch: 62%; line-height: .9; letter-spacing: -.03em; }
.jobs__list { display: grid; gap: clamp(12px, 1.6vw, 18px); margin-top: clamp(40px, 5vw, 76px); }

/* Zugeklappt sieht man nur Bezeichnung und Eckdaten - aufgeklappt wird, was einen wirklich angeht. */
.job { background: var(--white); border-top: 5px solid var(--red); }
.job__kopf { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px);
  padding: clamp(18px, 2.2vw, 30px) clamp(20px, 3vw, 44px); cursor: pointer; list-style: none; }
.job__kopf::-webkit-details-marker { display: none; }
.job__kopf:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
.job__wer { min-width: 0; }
.job__name { margin: 0; font-size: clamp(1.4rem, 2.5vw, 2.2rem); font-weight: 860; font-stretch: 68%;
  line-height: 1.05; transition: color .2s; }
.job__kopf:hover .job__name { color: var(--red); }
.job__meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; padding: 0; }
.job__meta span { padding: 5px 11px; border-radius: 99px; background: var(--paper); font-family: var(--f-mono); font-size: .7rem; letter-spacing: .06em; }
.job__pfeil { margin-left: auto; flex: none; display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--paper); color: var(--ink);
  transition: transform .25s, background-color .2s, color .2s; }
.job__pfeil svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.job__kopf:hover .job__pfeil { background: #ece6e0; }
.job[open] .job__pfeil { transform: rotate(180deg); background: var(--red); color: var(--white); }
.job__mehr { display: grid; gap: clamp(16px, 2vw, 26px); border-top: 1px solid #ede8e2;
  padding: clamp(20px, 2.4vw, 30px) clamp(20px, 3vw, 44px) clamp(24px, 3vw, 40px); }
.job__ab { margin: 0; color: #3a3633; font-size: .94rem; }
@media (prefers-reduced-motion: no-preference) {
  .job[open] .job__mehr { animation: jobauf .3s cubic-bezier(.2, .7, .3, 1) both; }
  @keyframes jobauf { from { opacity: 0; transform: translateY(-8px); } }
}
.job__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 40px); }
.job__col h3 { margin: 0 0 10px; font-family: var(--f-mono); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.job__col ul { margin: 0; padding-left: 1.1em; color: #3a3633; line-height: 1.6; }
.job__col li + li { margin-top: 6px; }
.job__lohn { margin: 0; padding-top: 14px; border-top: 1px solid #ddd8d2; color: #3a3633; font-size: .94rem; }
.job__tun { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.job__tun .btn { min-height: 56px; }

.jobs__leer { padding: clamp(28px, 3.4vw, 50px); background: var(--white); border-top: 5px solid var(--ink); display: grid; gap: 18px; }
.jobs__leer-gross { margin: 0; font-size: clamp(1.8rem, 3.4vw, 3.2rem); font-weight: 860; font-stretch: 68%; line-height: 1; }
.jobs__leer p { max-width: 58ch; margin: 0; color: #3a3633; line-height: 1.6; }
.jobs__plain { margin: 0; padding-left: 1.1em; line-height: 1.7; }
@media (max-width: 760px) { .job__body { grid-template-columns: 1fr; } }


/* ---------------------------------------------------------------- Bewerbung: ein Dialog fuer alle Stellen */
/* Die Unterlagen gehen als Anhang an die zustaendige Person und werden auf dem Server nicht gespeichert -
   deshalb steht der Satz dazu direkt im Formular und nicht nur in der Datenschutzerklaerung. */
.bw { width: min(680px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 0; border: 0;
  border-radius: 16px; background: var(--white); color: var(--ink); box-shadow: 0 40px 90px -30px rgba(13, 12, 12, .6);
  overflow-y: auto; overflow-x: clip; overscroll-behavior: contain; }
.bw::backdrop { background: rgba(13, 12, 12, .68); backdrop-filter: blur(3px); }
/* solange der Dialog offen ist, rollt die Seite dahinter nicht mit - der Platz der Leiste bleibt
   trotzdem reserviert, sonst springt die Seite um ihre Breite */
html.bw-offen { overflow: hidden; scrollbar-gutter: stable; }
.bw__kopf { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; gap: 16px;
  padding: 22px 24px 18px; background: var(--white); border-bottom: 1px solid #e2ddd7; }
.bw__kopf h2 { margin: 2px 0 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 860; font-stretch: 70%; line-height: 1; }
.bw__was { margin: 0; font-family: var(--f-mono); font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--red); }
.bw__zu { margin-left: auto; width: 40px; height: 40px; display: grid; place-items: center; flex: none;
  border: 0; border-radius: 10px; background: none; color: #6b6560; cursor: pointer; }
.bw__zu:hover { background: var(--paper); color: var(--ink); }
.bw__zu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.bw__felder { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; padding: 22px 24px 4px; }
.bw__weit { grid-column: 1 / -1; }
.bw__felder label { display: block; margin: 0 0 16px; font-weight: 700; font-size: .92rem; }
.bw__felder label em { font-weight: 400; font-style: normal; color: #6b6560; }
.bw__felder input, .bw__felder textarea { display: block; width: 100%; margin-top: 7px; padding: 11px 13px;
  font: inherit; color: var(--ink); background: var(--white); border: 1.5px solid #cfc9c3; border-radius: 9px; }
.bw__felder input:focus, .bw__felder textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; border-color: var(--red); }
.bw__felder textarea { resize: vertical; line-height: 1.5; }
 /* Anhaenge: ein eigener Knopf statt des Systemfeldes, jede Datei einzeln wieder wegklickbar. */
.bw__akte { grid-column: 1 / -1; margin: 0 0 16px; padding: 14px; border: 1.5px dashed #cfc9c3;
  border-radius: 12px; background: var(--white); transition: border-color .2s, background-color .2s; }
.bw__akte.zieht { border-color: var(--red); background: #fdf1f1; }
.bw__label { display: block; margin: 0 0 10px; font-weight: 700; font-size: .92rem; }
.bw__felder .bw__versteckt { position: absolute; width: 1px; height: 1px; min-width: 0; margin: 0;
  padding: 0; border: 0; opacity: 0; pointer-events: none; clip-path: inset(50%); }
.bw__akten { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
  margin: 0 0 10px; padding: 0; }
.bw__akten[hidden] { display: none; }
.akte { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 8px 8px 12px;
  background: var(--paper); border: 1px solid #e2ddd7; border-radius: 10px; }
.akte__art { width: 18px; height: 18px; flex: none; fill: none; stroke: #6b6560; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.akte__name { display: flex; min-width: 0; flex: 1 1 auto; font-weight: 600; font-size: .9rem; }
.akte__stamm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akte__endung { flex: none; }
.akte__gr { margin-left: auto; flex: none; font-family: var(--f-mono); font-size: .72rem; color: #6b6560; }
.akte__weg { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 8px; background: none; color: #6b6560; cursor: pointer; }
.akte__weg:hover { background: #f6dcdd; color: var(--red); }
.akte__weg svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.akte--zuviel { border-color: var(--red); background: #fdf1f1; }
.akte--zuviel .akte__gr { color: var(--red); font-weight: 700; }
.bw__waehlen { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; font: inherit;
  font-weight: 700; font-size: .9rem; color: var(--ink); background: var(--paper); border: 1.5px solid #cfc9c3;
  border-radius: 10px; cursor: pointer; transition: border-color .2s, color .2s, background-color .2s; }
.bw__waehlen:hover:not(:disabled) { border-color: var(--red); color: var(--red); background: var(--white); }
.bw__waehlen[hidden] { display: none; }
.bw__waehlen svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; }
.bw__hinweis { margin: 10px 0 0; color: #6b6560; font-size: .82rem; line-height: 1.5; }
.bw__hinweis.zuviel { color: var(--red); font-weight: 700; }
.bw__recht { grid-column: 1 / -1; margin: 0 0 14px; color: #6b6560; font-size: .84rem; line-height: 1.5; }
.bw__falle { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.bw__fuss { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 24px 20px; border-top: 1px solid #e2ddd7; background: var(--paper); border-radius: 0 0 16px 16px; }
.bw__stand { margin: 0; font-size: .9rem; line-height: 1.45; color: #3a3633; }
.bw__stand.gut { color: #1e7a32; font-weight: 700; }
.bw__stand.schlecht { color: var(--red); font-weight: 700; }
.bw__fuss .btn[disabled] { opacity: .55; pointer-events: none; }

@media (max-width: 620px) {
  .bw__felder { grid-template-columns: 1fr; }
  .bw__kopf, .bw__felder, .bw__fuss { padding-inline: 18px; }
}

/* ---------------------------------------------------------------- the whole map, first screen of Standorte */
/* standorte.html loads wien3d.css before this file. That stylesheet is written for a page that is nothing
   but the map: the body does not scroll and a vignette lies over the whole window. Here those few rules go
   back where they belong - the map is one section of a page that scrolls on to the eleven branches. */
body { overflow: visible; height: auto; }
body::after { content: none; }

/* ".spots.spots--map" on purpose: the plain ".spots" rule further down sets the flat ink background, and
   whichever comes last would win. This is the sky of the map - mixed from the real hour in Vienna by
   wien3d.js - and it has to stay. */
.spots.spots--map {
  position: relative; overflow: hidden; min-height: 100svh;
  display: block; padding: 0;
  background: linear-gradient(var(--sky-top, #12141b) 0%, var(--sky-low, #0d0f16) 62%, #0a0b0f 100%);
  transition: background 3s linear;
}
/* the map's own vignette, now over the section instead of the window */
.spots--map::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(130% 95% at 50% 45%, transparent 62%, rgba(0, 0, 0, .3) 100%);
}
/* everything wien3d.css pins to the window is pinned to the section instead */
.spots--map .w3d,
.spots--map .w3d-skywrap,
.spots--map .w3d-intro,
.spots--map .w3d-list,
.spots--map .w3d-labels,
.spots--map .w3d-tip,
.spots--map .w3d-cardwrap,
.spots--map .w3d-tools,
.spots--map .w3d-scale,
.spots--map .w3d-fallback,
.spots--map .w3d-noscript { position: absolute; }
.spots--map .w3d-list { top: 50%; }
/* the way on, under the hint: the wheel zooms the map, so the page needs a door that is not a gesture */
.spots__on {
  display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(14px, 2vh, 24px);
  color: var(--white); font-family: var(--f-mono); font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  padding: 10px 18px; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  pointer-events: auto; transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.spots__on:hover, .spots__on:focus-visible { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
@media (max-width: 900px) {
  /* on a touch screen a swipe over the map already carries the page on, and the two map buttons need the
     room at the bottom edge - so this door is a desktop one */
  .spots__on { display: none; }
  /* the bottom edge of a phone belongs to the two map buttons; the gestures there are the ones every
     finger tries anyway, so the line that spells them out steps aside */
  .spots--map .w3d-hint { display: none; }
}
/* The flat list is only the fallback. Where the map is going to run it is not shown at all - not even for
   the moment before three.js has loaded, which is what made the page open on a black screen with a list. */
/* wien3d.css hides the "no webserver" notice with html.is-live, a class the embedded map does not set
   (it belongs to the map's own page). Here the section carries that state instead. */
.spots--map.is-live .w3d-fallback { display: none; }
html.js .spots--map .spots__list { display: none; }
html.js .spots--map.is-flat .spots__list { display: grid; }
.spots--map .spots__list { position: relative; z-index: 2; margin: 0 var(--pad) 0 auto;
  padding: calc(var(--bar-h) + 12vh) 0 10vh; max-width: min(46ch, 44vw); }
@media (max-width: 900px) {
  .spots--map { min-height: 86svh; }
  .spots--map .spots__list { max-width: none; margin-inline: var(--pad); padding-top: calc(var(--bar-h) + 8vh); }
}

/* ================================================================ the site is more than one page now */
/* The ribbon tells the story once; locations, the association and the way in for companies stand on their
   own pages. These few rules carry the pieces that only exist because of that split. */

/* the current page is marked in the bar, the way the rail marks the current chapter */
.bar__nav a[aria-current="page"] { color: var(--red); }
.bar__nav a[aria-current="page"]::after { transform: translateX(-50%) scale(1); background: var(--red); }
.menu a[aria-current="page"] { color: var(--red); }

/* the live pill is a link now: it leads to the opening hours */
a.status { text-decoration: none; transition: border-color .3s, color .3s; }
a.status:hover, a.status:focus-visible { border-color: currentColor; }

/* Standorte block on the front page: both doors side by side */
.city__doors { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 2vw, 26px); margin: clamp(26px, 3vw, 40px) 0 0; }
/* "Mitglied werden" cuts a diagonal edge and climbs 5vw over whatever stands before it. Since the split
   that neighbour is the Standorte block, its two doors need exactly that much air underneath. */
.city { padding-bottom: calc(clamp(80px, 9vw, 140px) + 5vw); }
@media (min-width: 1100px) and (min-height: 700px) {
  /* On a wide window Standorte is measured to fill exactly one screen, and the list takes whatever height
     is left over. With the second door in that column a short window ran out of room and the rows spilled
     over the buttons — so one screen stays the aim, but the block may grow when the column needs more. */
  .city { height: auto; min-height: 100svh; padding-bottom: calc(3vh + 5vw); }
}

/* "Mithelfen" used to sit inside the association chapter; on its own it needs that chapter's frame */
/* the top padding carries the fixed bar with it, so the headline never sticks to it on a phone either */
.helpsec { padding: calc(var(--bar-h) + clamp(46px, 7vw, 110px)) var(--pad) clamp(110px, 12vw, 200px); color: var(--ink); background: var(--white); }
.helpsec .help { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------------------------------------------------------------- the doors at the end of a page */
.doors { padding: clamp(80px, 9vw, 150px) var(--pad); color: var(--white); background: var(--ink); }
.doors__title { margin: 0; font-size: clamp(3rem, 8vw, 9rem); font-weight: 880; font-stretch: 62%; line-height: .84; letter-spacing: -.035em; }
.doors__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: clamp(40px, 5vw, 70px) 0 0; padding: 0; list-style: none; }
.doors__list li { border-top: 1px solid rgba(255, 255, 255, .18); }
.doors__list li:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .18); }
.doors__list a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 6px 18px;
  padding: clamp(22px, 2.6vw, 34px) clamp(18px, 2vw, 30px) clamp(22px, 2.6vw, 34px) 0;
  color: inherit; text-decoration: none; transition: padding .5s var(--ease-out), background-color .4s;
}
.doors__list li:nth-child(odd) a { padding-right: clamp(18px, 2vw, 30px); }
.doors__num { font-family: var(--f-mono); font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: var(--red); }
.doors__list b { font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 860; font-stretch: 70%; line-height: 1; }
.doors__list small { grid-column: 2; font-size: .92rem; color: rgba(255, 255, 255, .6); }
.doors__list a:hover, .doors__list a:focus-visible { background: rgba(255, 255, 255, .05); padding-left: 14px; outline: none; }
.doors__list a:hover .go, .doors__list a:focus-visible .go { transform: translateX(5px); }
.doors--slim .doors__title { font-size: clamp(2.6rem, 6vw, 6rem); }
@media (max-width: 760px) {
  .doors__list { grid-template-columns: 1fr; }
  .doors__list li:nth-child(odd) { border-right: 0; }
  .doors__list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .18); }
}

/* ---------------------------------------------------------------- the head of the locations page */
.spots {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(30px, 5vw, 90px);
  padding: calc(var(--bar-h) + clamp(60px, 8vw, 130px)) var(--pad) clamp(70px, 8vw, 120px);
  color: var(--white); background: var(--ink);
}
.spots__title { margin: 14px 0 0; font-size: clamp(3.2rem, 7vw, 8rem); font-weight: 900; font-stretch: 62%; line-height: .86; letter-spacing: -.035em; }
.spots__text { max-width: 46ch; margin: clamp(22px, 2.6vw, 34px) 0 0; color: rgba(255, 255, 255, .72); font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.55; }
.spots__doors { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 20px); margin: clamp(26px, 3vw, 40px) 0 0; }
.spots__list { align-self: end; margin-top: 0; }
@media (max-width: 900px) {
  .spots { grid-template-columns: 1fr; padding-top: calc(var(--bar-h) + 40px); }
  .spots__list { align-self: start; }
}


/* ?notch in the address: a short red line at the top edge whenever the page settles into a chapter */
body.is-notch::after { content: ""; position: fixed; z-index: 99; inset: 0 0 auto; height: 3px; background: var(--red); }


/* ================================================================ one chapter, one screen (demo: Spenden) */
/* A chapter that needs "one screen and a bit" is the worst of both: it never lands anywhere and the wheel
   has nothing to click into. Here the Spenden chapter is measured against the window height instead of the
   page width, so on a desktop it fills exactly one screen — paddings, both big words and the QR code all
   scale with the height that is actually there. */
@media (min-width: 901px) and (min-height: 520px) {
  .donate {
    min-height: 100svh; display: grid; align-content: center;
    padding-top: calc(var(--bar-h) + 4vh); padding-bottom: 5vh;
  }
  .donate__title { font-size: min(13vw, 17vh); }
  .donate .give { margin-top: 3.4vh; padding: clamp(22px, 3.2vh, 46px) clamp(24px, 3vw, 54px); }
  .give__title { font-size: min(4.6vw, 6.2vh); }
  .give__text { margin-top: 1.4vh; }
  .give__bank { gap: 1.8vh 34px; }
  .give__qr img { width: min(clamp(128px, 11vw, 170px), 19vh); padding: min(12px, 1.4vh); }
  .give__qr figcaption { font-size: min(.9rem, 1.9vh); }
  .donate__thanks { margin-top: 2.4vh; }
  .donate__big { font-size: min(8vw, 9vh); }
  .donate .give { margin-top: 2.6vh; }
  .give { gap: 2.2vh clamp(30px, 5vw, 80px); }
  .give__iban dd { font-size: min(clamp(1.4rem, 3vw, 2.8rem), 4.6vh); }
  .give__actions { gap: min(14px, 1.6vh); }
  .give__copybtn, .give__paypal { min-height: min(50px, 6vh); }
  .donate { padding-bottom: 3.5vh; }
}


/* ================================================================ one chapter, one screen */
/* The ribbon used to be built of chapters that were "a screen and a bit": never landing anywhere, nothing
   for the wheel to click into. Here the vertical rhythm of every short chapter is measured against the
   window height instead of the page width, so each one fills exactly one screen and the notches in
   main.js have something to settle on. The two long chapters (the prologue and Mitglied werden) stay long
   on purpose — they are rides, not stops. */
@media (min-width: 901px) and (min-height: 520px) {
  .shop { min-height: 100svh; }
  .idea { padding-top: calc(var(--bar-h) + 5vh); padding-bottom: 7vh; }
  .figures { padding-top: calc(var(--bar-h) + 2vh); padding-bottom: 7vh; }
  .hours { padding-top: calc(var(--bar-h) + 3vh); padding-bottom: 5vh; }
  .regal { padding-top: calc(var(--bar-h) + 4vh); padding-bottom: 6vh; }
  /* Spenden climbs 4vw over this chapter with its diagonal: the last line needs to stay above it */
  /* the headline needs air under the bar, not 13 px */
  .helpsec { padding-top: calc(var(--bar-h) + 6vh); padding-bottom: calc(2vh + 4vw); }
  /* Mithelfen was a headline in a corner, two half-empty cards and a line stranded at the bottom, with a
     third of the screen unused. It is a two-column chapter now, like Standorte and Öffnungszeiten: the
     words hold the left column from its top edge to its bottom, the two ways in stand in the right one
     and take the height between them. */
  .helpsec.helpsec { align-content: stretch; }
  .help {
    display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    column-gap: clamp(30px, 5vw, 90px); align-items: stretch; min-height: 0;
  }
  /* the left column is a column: headline at the top, the line for companies on its bottom edge */
  .help__side { display: flex; flex-direction: column; min-height: 0; }
  .help__title { margin: 0; }
  .help__lead { margin-top: clamp(18px, 2.4vh, 32px); }
  .help__biz { margin: auto 0 min(6px, .8vh); max-width: 34ch; }
  .help__cards { grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 2.2vh, 28px); margin: 0; }
  /* the card holds its content apart instead of huddling at the top: heading up, the way in at the foot */
  .help__card { align-content: space-between; padding: min(clamp(24px, 2.6vw, 38px), 3.6vh) clamp(24px, 2.4vw, 38px); }
  .doors { padding-top: calc(var(--bar-h) + 3vh); padding-bottom: 6vh; }

  /* the biggest words and the widest gaps are capped by the height that is really there */
  .idea__title { font-size: min(12vw, 15vh); }
  .since { width: min(clamp(120px, 12vw, 180px), 17vh); right: 4%; bottom: -12%; }
  .since b { font-size: min(clamp(2.2rem, 3.6vw, 3.6rem), 5vh); }
  .idea__copy { gap: 2.2vh; }
  .loop { margin-top: clamp(20px, 4vh, 60px); --flow: clamp(84px, 13.5vh, 160px); }
  .loop__step { padding-top: 2.4vh; }
  .loop__num { margin-bottom: 1.6vh; }
  .loop__step h3 { font-size: min(4.4vw, 6vh); }
  .loop__step p { margin-top: 1.4vh; }

  .city__title { font-size: min(7vw, 7.6vh); }
  .city__name { font-size: min(1.14rem, 2.1vh); }
  .city__doors { margin-top: 2.4vh; }

  .hours__title { font-size: min(9vw, 12vh); }
  .hours { gap: clamp(24px, 4vw, 80px); }

  .regal__title { font-size: min(8vw, 10vh); }
  .regal__grid { margin-top: clamp(30px, 5vh, 70px); }
  .kind { padding-block: clamp(18px, 2.6vh, 38px); }
  .kind__num { margin-bottom: 1.2vh; font-size: min(5vw, 6.4vh); }
  .kind h3 { font-size: min(2.6vw, 3.6vh); }
  .kind p { margin-top: .8vh; font-size: min(1rem, 2.1vh); }

  .donate__title { font-size: min(13vw, 15vh); }
  .give__qr img { width: min(clamp(128px, 11vw, 170px), 17vh); }
}


/* A short desktop window (a laptop, or Windows display scaling) gets the same chapters a little tighter,
   so "one chapter, one screen" still holds there and the notches keep their meaning. */
@media (min-width: 901px) and (min-height: 520px) and (max-height: 830px) {
  .hours { padding-top: calc(var(--bar-h) + 1.5vh); padding-bottom: 2vh; align-items: center; align-content: safe center; }
  /* the printer must sit in the middle of the screen with air above and below, not touch both edges:
     the receipt is measured by the window height so the whole machine fits with room to spare */
  .receipt { padding: 2.2vh 26px 1.8vh; font-size: min(.86rem, 1.62vh); line-height: 1.42; }
  .receipt__head b { font-size: min(1.2rem, 2.2vh); }
  .receipt__rule { margin: 1vh 0; }
  .receipt__code { height: min(54px, 4.2vh); margin: 1.2vh auto .6vh; }

  .regal { padding-top: calc(var(--bar-h) + 2.5vh); padding-bottom: 3.5vh; }

  /* on a wide but short window the display type is measured by the width and blows the chapter open;
     here every one of those sizes is capped by the height that is actually available */
  .figures { padding-top: calc(var(--bar-h) + 1.5vh); padding-bottom: 4vh; }
  .figure__num { font-size: min(12.5vw, 16vh); }
  .figure { padding-top: 2vh; }
  .figure p { margin-top: 1.6vh; }
  .idea { padding-top: calc(var(--bar-h) + 2.5vh); padding-bottom: 4vh; }
  .loop { margin-top: clamp(14px, 2.6vh, 44px); --flow: clamp(70px, 11vh, 130px); }
  .helpsec { padding-top: calc(var(--bar-h) + 6.5vh); padding-bottom: calc(1.5vh + 4vw); }
  .help__title { font-size: min(10vw, 14vh); }
  .help__cards { margin-top: 3vh; }
  .foot { padding-top: calc(var(--bar-h) + 1.5vh); padding-bottom: 3.5vh; }
  .foot__shout { font-size: min(17vw, 32vh); }
  .kind { padding-block: 2vh; }

  .city { padding-bottom: calc(1.5vh + 5vw); }
  .city__text { margin-top: 1.4vh; }

  .donate { padding-top: calc(var(--bar-h) + 2vh); padding-bottom: 2.5vh; }
  .donate .give { margin-top: 2vh; padding-block: 2.4vh; }
  .donate__big { font-size: min(8vw, 5.6vh); }
  .donate__thanks { margin-top: 1vh; }
  .donate .give { padding-bottom: 2vh; }
  /* the thank-you gets a wider measure so it reads in two lines instead of three and the word "Danke" fits */
  .give .donate__thanks { grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); margin-top: 1vh; padding-top: 1.8vh; }
  .give .donate__thanks > span:last-child { max-width: 58ch; padding-bottom: 0; }
  .give__qr figcaption { font-size: min(.9rem, 1.9vh); }
  .donate { padding-bottom: 1.5vh; }
  /* the chapter headline must not end up smaller than the ones around it — the card below is capped instead */
  .donate__title { font-size: min(13vw, 14vh); }
  .give__bank { gap: 1.2vh 34px; }
  .give__qr img { width: min(clamp(128px, 11vw, 170px), 14vh); }
}

/* the chapter rail beats once when the page clicks into a chapter — the detent made visible */
.rail.is-click .rail__dot { animation: rail-click .6s var(--ease-out); }
/* the dot already carries its position in a transform, so the beat is a ring instead of a scale */
@keyframes rail-click {
  0% { box-shadow: 0 0 0 4px rgba(215, 20, 28, .2); }
  30% { box-shadow: 0 0 0 12px rgba(215, 20, 28, .38); }
  100% { box-shadow: 0 0 0 4px rgba(215, 20, 28, .2); }
}
@media (prefers-reduced-motion: reduce) { .rail.is-click .rail__dot { animation: none; } }


/* A really short desktop window (a laptop, or a maximised window at 150 % display scaling, where the
   browser's own bars eat a third of the height) gets a slimmer header and a tighter set of chapters —
   otherwise nothing fits a screen and the notches have nothing to hold on to. */
@media (min-width: 901px) and (max-height: 700px) {
  :root { --bar-h: 76px; }
  /* the shout gives way first: the four doors and the contact block have to stay on the last screen */
  .foot--screen .foot__shout { font-size: min(18.5vw, 30vh); }
  .idea__title { font-size: min(12vw, 13vh); }
  .city__title { font-size: min(7vw, 7vh); }
  .city__list a { padding-block: 0; }
  .hours__title { font-size: min(9vw, 10vh); }
  .regal__title { font-size: min(8vw, 9vh); }
  .donate__title { font-size: min(13vw, 12vh); }
  .doors__title { font-size: min(8vw, 9vh); }
  .help__title { font-size: min(10vw, 11vh); }
  .figures__list { gap: 2vh clamp(20px, 3vw, 60px); }
}


/* Standorte as one screen — now for every desktop window, not only tall ones. The list stretches over the
   height that is left and the schematic map is measured by the window, not by the column width. */
@media (min-width: 901px) and (min-height: 520px) {
  .city {
    height: auto; min-height: 100svh; align-items: stretch;
    /* "Mitglied werden" climbs 5vw over this chapter with its white diagonal. The chapter is therefore one
       window PLUS that overlap: locked into place the reader sees nothing but Standorte, and the white edge
       only appears once they scroll on. */
    min-height: calc(100svh + 5vw);
    padding-top: calc(var(--bar-h) + 2vh); padding-bottom: calc(2.5vh + 5vw);
  }
  .city__copy { display: flex; flex-direction: column; min-height: 0; }
  .city__list { flex: 1 1 auto; display: grid; grid-auto-rows: 1fr; min-height: 0; margin-top: 2.4vh; }
  .city__list li { display: flex; }
  .city__list a { flex: 1; align-items: center; padding-block: 0; }
  .city__map { display: flex; flex-direction: column; justify-content: center; min-height: 0; }
  .city__map svg { max-height: calc(100svh - var(--bar-h) - 14vh); width: auto; max-width: 100%; margin-inline: auto; }
}

/* ?notch: a small badge that says what this window really is */
.w-notchbadge.is-klick { background: var(--red); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 8px rgba(215, 20, 28, .25); }
.w-notchbadge {
  position: fixed; z-index: 99; left: 12px; bottom: 12px; margin: 0; padding: 6px 12px; border-radius: 99px;
  background: rgba(13, 12, 12, .86); color: #fff; font: 700 .72rem var(--f-mono); letter-spacing: .04em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); pointer-events: none;
}


/* ================================================================ every chapter is exactly one screen */
/* A chapter that lands at 0.8 screens leaves a third of the next one hanging below it, and one at 1.08
   shows a sliver of it — both read as "not quite landed". So on a desktop every chapter that is meant to
   be a stop is stretched to exactly one window and its content is centred in it; the two long chapters
   (the prologue and Mitglied werden) are rides and keep their own length. */
@media (min-width: 901px) and (min-height: 520px) {
  .idea, .figures, .hours, .regal, .helpsec, .donate, .doors {
    /* "safe" matters: when a chapter's content is taller than the window after all, centring would cut it
       at both ends — the browser then falls back to the top edge instead, so nothing is lost under the bar */
    min-height: 100svh; display: grid; align-content: safe center;
  }
  /* the grids keep their columns, only the rows are centred in the new height */
  .idea { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-auto-rows: min-content; }
  .hours { grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); grid-auto-rows: min-content; }
  /* the machine has to fit the window with air around it on a tall screen too, so the paper is measured
     against the height and not only against its own type size */
  .receipt { padding: min(44px, 4.2vh) 28px min(34px, 3.4vh); font-size: min(.86rem, 1.55vh); line-height: 1.5; }
  /* The footer is the last screen of the page. It has to be a whole screen: whatever is left over between
     the end of a chapter and the end of the document is shown above it anyway, and a third of the "Weiter"
     chapter hanging under the bar is exactly the ragged edge the page used to end on. So the footer takes
     the screen — but its three blocks stay together and the slack goes outside them, above and below.
     (Spreading them apart with space-between was what tore the hole between the address and the legal line.)
     The top padding also clears the fixed bar, so the shout never starts underneath it. */
  .foot { display: grid; gap: clamp(18px, 2.4vh, 36px); padding-top: clamp(44px, 6vh, 90px); padding-bottom: clamp(22px, 3vh, 44px); }
  /* only the big footer of the ribbon pages takes the whole screen — the slim one under the Impressum has
     half the content and would spend a screen on nothing */
  .foot--screen {
    min-height: 100svh; align-content: safe center;
    /* The four blocks share the last screen evenly: the same step between the shout, the status pill,
       the contact block and the legal line as above the first and below the last of them. The field
       they are centred in starts under the fixed bar, so the air above the shout is air the reader
       actually sees and not the part hidden behind the header. */
    gap: clamp(20px, 4.2vh, 52px);
    padding-top: calc(var(--bar-h) + 18px); padding-bottom: clamp(26px, 3.4vh, 46px);
  }
  /* the block sits on the bottom edge of the screen; the air is above it, where the shout wants room */
  .foot--screen { align-content: safe end; }
  .foot--screen .foot__base { margin-top: 0; padding-top: min(18px, 1.6vh); }
  /* the status pill is a pill, not a rail: as a grid item it would be stretched to the full column */
  .foot__live { justify-self: start; }
  /* the shout runs to the width of the window; its height is what the even rhythm is measured against */
  .foot--screen .foot__shout { font-size: min(18.5vw, 40vh); }
  /* one logo per screen: the bar carries it, so the footer's second one goes on a desktop and the
     contact block closes up into three even columns */
  .foot--screen .sign--foot { display: none; }
  /* address left, phone in the middle, the social buttons on the right edge: the block then has two
     anchored sides, like the legal line under it, instead of trailing off into empty space */
  .foot--screen .foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .foot--screen .foot__social { justify-self: end; }
  .foot__grid { margin-top: 0; }
  .foot__live { margin-top: 0; }
  .foot__base { margin-top: min(clamp(50px, 6vw, 90px), 4vh); padding-top: min(22px, 2vh); }

  /* Every chapter cuts a diagonal into the one before it. A chapter is therefore one window PLUS that
     overlap: locked into place the reader sees nothing but the chapter itself, and the edge of the next
     one only appears once they scroll on. */
  .shop { height: calc(100svh + 5vw); }
  .idea { min-height: calc(100svh + 4vw); padding-bottom: calc(2vh + 4vw); }
  .figures { min-height: calc(100svh + 4vw); padding-bottom: calc(2vh + 4vw); }
  .helpsec { min-height: calc(100svh + 4vw); }
  /* only the vertical padding is capped — narrowing the cards makes the text wrap and grow instead */
  .kind { padding-block: min(clamp(26px, 3vw, 44px), 3.4vh); }
  .donate .give { padding-block: min(clamp(28px, 4vw, 60px), 4vh); }

  /* Sortiment: six cards and a headline have to share one window */
  .regal__title { font-size: min(8vw, 9vh); }
  .regal__head { gap: min(30px, 2.4vh); }
  .regal__grid { margin-top: min(clamp(60px, 7vw, 110px), 4.5vh); }
  .kind__num { font-size: min(5vw, 5.8vh); margin-bottom: min(14px, 1.2vh); }
  .kind h3 { font-size: min(2.6vw, 3.4vh); }
  .kind p { margin-top: min(10px, 1vh); font-size: min(1rem, 2vh); }

  /* Spenden: the card, the QR and the thank-you */
  .give__title { font-size: min(4.6vw, 5.6vh); }
  .give__bank { gap: min(18px, 1.6vh) 34px; }
  .give__qr img { width: min(clamp(128px, 11vw, 170px), 16vh); }
  .donate .donate__thanks { margin-top: min(clamp(26px, 3.4vw, 48px), 2.6vh); }
  .donate__big { font-size: min(8vw, 8vh); }
}