/* txtme.social — holding page until launch, Fassung 4 (Tasty Studios, 16.10.2026)
   System of the website and the RKN page: Space Grotesk (local), black + bone, cyan→pink where the brand speaks.
   Motion: transform + opacity only. Photos and tiles rise with the scroll, pulse once, zoom into their tile.
   Nothing is animated over blur, gradients or shadows while it moves. */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("SpaceGrotesk.woff2") format("woff2"); }
:root {
  --ink: #0b0b0c; --surface: #131315; --surface-2: #1a1a1d;
  --bright: #f4f2ee; --muted: #9d9b96; --faint: #66645f;
  --line: rgba(255,255,255,0.09); --line-strong: rgba(255,255,255,0.22);
  --cyan: #60c4e3; --pink: #eb5986;
  --c-text: #60c4e3; --p-text: #eb5986;
  --grad: linear-gradient(100deg, #60c4e3, #eb5986);
  --grad-soft: linear-gradient(100deg, #9fdcf0, #cfd5ff 55%, #f2a7bf);
  --room: rgba(255,255,255,0.05);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-film: cubic-bezier(0.16, 1, 0.3, 1);
  --feder: cubic-bezier(.28, 1.42, .42, 1);
  --feder-leise: cubic-bezier(.3, 1.22, .42, 1);
  --rund: 28px; --rund-s: 20px;
  --tile-shadow: 0 40px 70px -34px rgba(0,0,0,.85), 0 18px 30px -22px rgba(0,0,0,.6);
  --wrap: 1280px;
  color-scheme: dark;
}
.bone {
  --ink: #efece6; --surface: #e6e2da; --surface-2: #dcd8cf;
  --bright: #0b0b0c; --muted: #5b5954; --faint: #8a8781;
  --line: rgba(11,11,12,0.12); --line-strong: rgba(11,11,12,0.28);
  --c-text: #1f8fb4; --p-text: #d43f72;
  --grad-soft: linear-gradient(100deg, #2a9cc2, #6b6fd8 55%, #d9467a);
  --room: rgba(11,11,12,0.05);
  --tile-shadow: 0 40px 70px -34px rgba(11,11,12,.45), 0 18px 30px -22px rgba(11,11,12,.3);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: #0b0b0c; color: #f4f2ee;
  font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
  overflow-x: clip;
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--cyan); color: #0b0b0c; }
:focus-visible { outline: 1px solid var(--cyan); outline-offset: 3px; }
.soft, em.soft { font-style: normal; background: var(--grad-soft); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Top bar: hides on the way down, comes back on the way up ---------- */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; height: 64px;
  display: flex; align-items: center; gap: 14px; padding: 0 20px;
  background: linear-gradient(90deg, #0e181d, #0b0b0c 45%, #0b0b0c 55%, #17101a);
  transition: transform .6s var(--ease);
}
.top.weg { transform: translate3d(0, -100%, 0); }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(96,196,227,.55), rgba(255,255,255,.12), rgba(235,89,134,.55)); }
@media (min-width: 720px) { .top { padding: 0 40px; } }
.mark { width: 30px; height: 30px; flex: none; background: #f4f2ee; -webkit-mask: url("media/logo-white.svg") center / contain no-repeat; mask: url("media/logo-white.svg") center / contain no-repeat; }
.top .ttl { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.top .ttl i { font-style: normal; color: var(--faint); font-weight: 400; }
.top .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
@media (max-width: 640px) { .top .ttl .word, .top .ttl i, .top .right .btn:not(.brand) { display: none; } }

/* Letter swap on hover (RollText from the website) */
.bst { display: inline-block; overflow: hidden; position: relative; vertical-align: top; line-height: 1.25; }
.bst i { display: block; font-style: normal; transition: transform .55s cubic-bezier(0.2, 0.7, 0.25, 1); }
.bst i.unten { position: absolute; left: 0; top: 100%; width: 100%; }
.roll-host:hover .bst i, .roll-host:focus-visible .bst i { transform: translateY(-100%); }

/* ---------- Shiny button (website / shop) ---------- */
@property --gradient-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gradient-angle-offset { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gradient-percent { syntax: "<percentage>"; initial-value: 5%; inherits: false; }
@property --gradient-shine { syntax: "<color>"; initial-value: white; inherits: false; }
.btn {
  --shiny-bg: linear-gradient(#0b0b0c, #0b0b0c); --shiny-bg-subtle: rgba(255,255,255,.22); --shiny-fg: #f4f2ee;
  --shiny-highlight: #60c4e3; --shiny-highlight-2: #eb5986; --shiny-dots: #f4f2ee;
  --animation: gradient-angle linear infinite; --duration: 3s; --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
  isolation: isolate; position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  height: 54px; padding: 0 30px; cursor: pointer; outline-offset: 4px;
  font: 600 11px/1 "Space Grotesk", sans-serif; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; border-radius: 999px; color: var(--shiny-fg);
  background: var(--shiny-bg) padding-box,
    conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)), transparent, var(--shiny-highlight) var(--gradient-percent), var(--gradient-shine) calc(var(--gradient-percent) * 2), var(--shiny-highlight-2) calc(var(--gradient-percent) * 3), transparent calc(var(--gradient-percent) * 4)) border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-bg-subtle), 0 14px 28px -16px rgba(0,0,0,.7);
  transition: var(--transition); transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine, transform;
}
.btn.brand { --shiny-bg: linear-gradient(100deg, #60c4e3, #eb5986); --shiny-bg-subtle: rgba(11,11,12,.18); --shiny-fg: #0b0b0c; --shiny-highlight: #f4f2ee; --shiny-highlight-2: #f4f2ee; --shiny-dots: rgba(11,11,12,.7); }
.bone .btn:not(.brand) { --shiny-bg: linear-gradient(#0b0b0c, #0b0b0c); }
.btn::before, .btn::after { content: ""; border-radius: inherit; pointer-events: none; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; translate: -50% -50%; z-index: -1; }
.btn::before { --size: calc(100% - 6px); --position: 2px; --space: calc(var(--position) * 2); width: var(--size); height: var(--size);
  background: radial-gradient(circle at var(--position) var(--position), var(--shiny-dots) calc(var(--position) / 4), transparent 0) padding-box; background-size: var(--space) var(--space); background-repeat: space;
  -webkit-mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black); mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black);
  opacity: 0; transition: opacity var(--transition); }
.btn::after { --animation: shimmer linear infinite; width: 100%; aspect-ratio: 1; background: linear-gradient(-50deg, transparent, var(--shiny-highlight), transparent);
  -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, black); mask-image: radial-gradient(circle at bottom, transparent 40%, black); opacity: 0; transition: opacity var(--transition); }
.btn, .btn::before, .btn::after { animation: var(--animation) var(--duration), var(--animation) calc(var(--duration) / 0.4) reverse paused; animation-composition: add; }
.btn::after { animation-play-state: paused; }
.btn:is(:hover, :focus-visible) { --gradient-percent: 20%; --gradient-angle-offset: 95deg; --gradient-shine: var(--shiny-highlight-2); transform: translateY(-2px); }
.btn:is(:hover, :focus-visible), .btn:is(:hover, :focus-visible)::before, .btn:is(:hover, :focus-visible)::after { animation-play-state: running; }
.btn:is(:hover, :focus-visible)::before { opacity: .4; }
.btn:is(:hover, :focus-visible)::after { opacity: .5; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { cursor: progress; opacity: .7; }
@keyframes gradient-angle { to { --gradient-angle: 360deg; } }
@keyframes shimmer { to { rotate: 360deg; } }
.btn .ar { position: relative; transition: transform .5s var(--ease); }
.btn:hover .ar { transform: translateY(3px); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn.sm { height: 38px; padding: 0 18px; font-size: 10px; letter-spacing: .2em; gap: 8px; box-shadow: inset 0 0 0 1px var(--shiny-bg-subtle); }

/* ---------- Sections ---------- */
section { position: relative; background: var(--ink); color: var(--bright); padding-block: 88px; padding-inline: 20px; overflow: clip; scroll-margin-top: 64px; }
@media (min-width: 720px) { section { padding-block: 120px; padding-inline: 40px; } }
@media (min-width: 1100px) { section { padding-block: 136px; } }
.in { position: relative; max-width: var(--wrap); margin: 0 auto; }
.head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; margin-bottom: 48px; }
.head::before { content: ""; width: 112px; height: 3px; border-radius: 2px; background: var(--grad); flex: none; transform-origin: center; }
.head .num { font-size: 15px; letter-spacing: .24em; }
.head .label { font-size: clamp(1.1rem, 2.4vw, 1.9rem); letter-spacing: .34em; padding-left: .34em; font-weight: 500; color: #c9c6c0; line-height: 1.2; }
.bone .head .label { color: #3c3a36; }
.num { font-size: 12.5px; font-weight: 500; letter-spacing: 0.12em; color: var(--c-text); }
.label { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1.0; letter-spacing: -0.032em; max-width: 19ch; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.36rem); line-height: 1.5; color: var(--muted); max-width: 46ch; margin: 28px 0 0; letter-spacing: -0.008em; }
p { margin: 0 0 14px; max-width: 62ch; color: var(--muted); }
.two { display: grid; gap: 32px; }
@media (min-width: 1000px) { .two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 88px; align-items: end; } }
.two.kopf { margin-bottom: 56px; }
.two.kopf .lead { margin-top: 0; }
figure { margin: 0; }

/* Studio floor and wall (website): statik, only lines */
.hero-room { position: absolute; inset: 0; overflow: hidden; pointer-events: none; perspective: 1000px; perspective-origin: 50% 46%; --room-line: rgba(244,242,238,.09);
  -webkit-mask-image: radial-gradient(110% 95% at 50% 55%, #000 50%, transparent 100%); mask-image: radial-gradient(110% 95% at 50% 55%, #000 50%, transparent 100%); }
.hero-room > i { position: absolute; display: block; background-image: linear-gradient(to right, var(--room-line) 1px, transparent 1px), linear-gradient(to bottom, var(--room-line) 1px, transparent 1px); background-size: 40px 40px; }
.hero-room .wall { left: 0; right: 0; top: 0; height: 46%; opacity: .55; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 45%, #000 100%); }
.hero-room .floor { left: -60%; right: -60%; top: 46%; height: 140%; max-height: 2100px; transform-origin: 50% 0; transform: rotateX(72deg); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%); }
.hero-room::after { content: ""; position: absolute; left: 0; right: 0; top: 30%; height: 32%; background: linear-gradient(to bottom, transparent 0%, #0b0b0c 50%, transparent 100%); }
.hero-room.sec { --room-line: rgba(244,242,238,.06); }
.hero-room.sec::after { display: none; }
/* the bone studio: warm cyclorama with a light pool, lines at 4.5 % */
.bone-room { position: absolute; inset: 0; overflow: hidden; pointer-events: none; perspective: 1000px; perspective-origin: 50% 46%; --room-line: rgba(11,11,12,.045);
  background: radial-gradient(60% 40% at 50% 48%, #f3f0ea 0%, rgba(243,240,234,0) 70%), linear-gradient(to bottom, #e9e5de, #efece6 46%, #e3dfd7);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(120% 100% at 50% 50%, #000 55%, transparent 100%); }
.bone-room > i { position: absolute; display: block; background-image: linear-gradient(to right, var(--room-line) 1px, transparent 1px), linear-gradient(to bottom, var(--room-line) 1px, transparent 1px); background-size: 40px 40px; }
.bone-room .wall { left: 0; right: 0; top: 0; height: 46%; opacity: .35; }
.bone-room .floor { left: -60%; right: -60%; top: 46%; height: 140%; max-height: 2100px; transform-origin: 50% 0; transform: rotateX(72deg); opacity: .8; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%); }

/* ---------- Motion: text ---------- */
.rv { opacity: 0; transform: translate3d(0, 30px, 0); transition: opacity 1.5s var(--ease), transform 2.2s var(--ease); }
.rv.on { opacity: 1; transform: none; }
.d1 { transition-delay: .12s; } .d2 { transition-delay: .24s; } .d3 { transition-delay: .36s; }
.head.rv::before { transform: scaleX(0); transition: transform 1.1s var(--ease) .15s; }
.head.rv.on::before { transform: none; }
/* Headlines roll out of a slot, one line after the other (the slot follows the real line break, app.js sets --l) */
.rise .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.08em 0.02em 0.22em; margin: -0.08em -0.02em -0.22em; }
.rise .wi { display: inline-block; transform: translate3d(0, 108%, 0); transition: transform 1.35s var(--ease-film); transition-delay: calc(var(--l, 0) * 95ms); }
.rise.on .wi { transform: none; }

/* ---------- Motion: tiles. Deckend from the first frame. The way up hangs on the scroll, then one springy pulse, the photo zooms into its tile. ---------- */
@keyframes zug { from { translate: 0 var(--weg, 104px); } }
@keyframes puls { from { scale: var(--kl, .93); } }
@keyframes feder { from { translate: 0 var(--weg, 104px); scale: var(--kl, .93); } }
@keyframes zoom { from { transform: scale(1.14); } }
[data-r] { --weg: calc(clamp(72px, 8vw, 118px) + min(var(--i, 0), 4) * 18px); }
[data-gruppe] [data-r] { --weg: clamp(72px, 8vw, 118px); }
@supports (animation-timeline: view()) {
  [data-r] { animation: zug cubic-bezier(.3,.3,.45,1) both; animation-timeline: view(); animation-range: cover 0% cover 58vh; }
  [data-r].da { animation: zug cubic-bezier(.3,.3,.45,1) both, puls 2.6s var(--feder) backwards; animation-timeline: view(), auto; animation-range: cover 0% cover 58vh, normal; animation-delay: 0s, calc(var(--i, 0) * 110ms); }
  [data-gruppe] [data-r].da { animation-delay: 0s, calc(var(--i, 0) * 110ms); }
}
@supports not (animation-timeline: view()) {
  [data-r] { translate: 0 var(--weg); scale: var(--kl, .93); }
  [data-r].da { translate: none; scale: none; animation: feder 2.6s var(--feder) backwards; animation-delay: calc(var(--i, 0) * 110ms); }
}
[data-r] .card > img:first-child { transform: scale(1.14); }
[data-r].da .card > img:first-child { transform: none; animation: zoom 2.8s cubic-bezier(.16,1,.3,1) backwards; animation-delay: calc(var(--i, 0) * 110ms); }
@media (max-width: 700px) { [data-r], [data-gruppe] [data-r] { --weg: calc(52px + min(var(--i, 0), 3) * 10px); } }
@media (prefers-reduced-motion: reduce) {
  [data-r], [data-r].da, [data-r] .card > img:first-child { animation: none !important; translate: none !important; scale: none !important; transform: none !important; }
  .rv, .rise .wi, .intro, .fly2 { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
}

/* ---------- The tile (3D, borderless) with the notch ---------- */
.kachel { position: relative; }
.kachel .card { position: relative; border-radius: var(--rund); overflow: hidden; background: var(--surface); box-shadow: var(--tile-shadow); transform-style: preserve-3d; }
.kachel .card > img:first-child { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; display: block; }
.kachel[data-tilt] .card { transition: transform 1.1s var(--ease); }
.kachel[data-tilt].neigt .card { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
/* the notch: cut out of the tile, in the colour of the section, two concave shoulders */
.kerbe { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 0 18px 0 22px; background: var(--ink); border-top-right-radius: 18px; }
.kerbe .z { display: inline-flex; align-items: center; gap: 10px; padding: 12px 4px 10px 0; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--bright); white-space: nowrap; }
.kerbe::before, .kerbe::after { content: ""; position: absolute; width: 18px; height: 18px; background: radial-gradient(circle at 100% 0, transparent 17.5px, var(--ink) 18.5px); }
.kerbe::before { left: 0; top: -18px; }
.kerbe::after { right: -18px; bottom: 0; }
.kerbe .live { width: 7px; height: 7px; border-radius: 50%; background: var(--grad); animation: lamp 2.4s ease-in-out infinite; }
@keyframes lamp { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ---------- Hero (website, version 5): logo cuts the bar, sentence left, the back with the code right ---------- */
.intro { opacity: 0; transform: translate3d(0, 26px, 0); animation: intro 1.2s var(--ease) forwards; }
.i1 { animation-delay: .05s; } .i2 { animation-delay: .2s; } .i3 { animation-delay: .35s; } .i4 { animation-delay: .5s; }
@keyframes intro { to { opacity: 1; transform: none; } }
html:not(.go) .intro, html:not(.go) .fly2, html:not(.go) [data-flicker] .fl, html:not(.go) .fl-dot { animation-play-state: paused; }
.hero-logo { position: relative; z-index: 60; display: flex; justify-content: center; margin-top: -28px; padding: 0 20px; pointer-events: none; }
@media (min-width: 640px) { .hero-logo { margin-top: -36px; } }
@media (min-width: 1024px) { .hero-logo { margin-top: -40px; } }
.hero-logo > span { position: relative; display: inline-block; }
.hero-logo > span::before { content: ""; position: absolute; left: 14.6%; right: 14.6%; top: 26px; height: 4px; background: #0b0b0c; }
@media (min-width: 640px) { .hero-logo > span::before { top: 34px; } }
@media (min-width: 1024px) { .hero-logo > span::before { top: 38px; } }
.hero-logo img { position: relative; height: 116px; width: auto; }
@media (min-width: 640px) { .hero-logo img { height: 156px; } }
@media (min-width: 1024px) { .hero-logo img { height: 204px; } }
.hero2 { margin-top: -152px; padding: 152px 20px 0; overflow: hidden; }
@media (min-width: 640px) { .hero2 { margin-top: -192px; padding-top: 192px; } }
@media (min-width: 720px) { .hero2 { padding-inline: 40px; } }
@media (min-width: 1024px) { .hero2 { margin-top: -236px; padding-top: 236px; } }
.hero-grid2 { position: relative; max-width: 1480px; margin: 0 auto; display: grid; }
@media (min-width: 1024px) { .hero-grid2 { grid-template-columns: 1.02fr .98fr; align-items: end; min-height: min(80svh, 800px); gap: 32px; } }
.hero-text { position: relative; z-index: 10; padding: 32px 0; }
@media (min-width: 1024px) { .hero-text { padding: 0 0 112px 40px; align-self: center; } }
.loud { font-weight: 700; text-transform: uppercase; line-height: 1.1; letter-spacing: -0.005em; font-size: clamp(2.5rem, 5.6vw, 5.5rem); max-width: 13ch; text-wrap: balance; }
.hero-text .lead { color: rgba(244,242,238,.9); font-size: 1.08rem; line-height: 1.6; max-width: 42ch; margin-top: 28px; }
.hero-text .btns { margin-top: 36px; }
.fl-word { display: inline-block; white-space: nowrap; }
[data-flicker] .fl { display: inline-block; opacity: 0; color: transparent; -webkit-background-clip: text; background-clip: text; padding: .1em 0 .26em; margin: -.1em 0 -.26em;
  background-image: linear-gradient(100deg, color-mix(in srgb, var(--pink) calc(var(--a) * 100%), var(--cyan)), color-mix(in srgb, var(--pink) calc(var(--b) * 100%), var(--cyan))); animation: flicker-in .7s linear both; transform: none; transition: none; }
.fl-dot { display: inline-block; opacity: 0; animation: flicker-in .5s linear 1.9s both; }
@keyframes flicker-in { 0%, 9% { opacity: 0; } 10% { opacity: .9; } 14%, 28% { opacity: .08; } 30% { opacity: 1; } 38% { opacity: .3; } 50% { opacity: 1; } 60% { opacity: .6; } 70%, 100% { opacity: 1; } }

.fig { position: relative; margin: 0 auto; width: 100%; }
.fig.hero-fig { max-width: 460px; height: min(66svh, 620px); margin-top: -8px; }
.hero-stand { bottom: auto; top: 6%; }
@media (min-width: 1024px) { .fig.hero-fig { margin: -40px 0 0; max-width: none; width: 100%; height: min(92svh, 940px); align-self: end; } }
.fig .glow { position: absolute; inset: -30% -25%; z-index: 0; pointer-events: none; background: radial-gradient(45% 45% at 30% 35%, rgba(96,196,227,.22), transparent 70%), radial-gradient(40% 40% at 75% 70%, rgba(235,89,134,.2), transparent 70%); }
/* the figure of the website: comes up from below, visible from the first frame, closes with the bottom of the section */
.figur { position: absolute; inset: 0; z-index: 2; }
.figur img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }
.hero-stand { position: absolute; left: 50%; bottom: 18px; z-index: 3; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(11,11,12,.72); font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--bright); white-space: nowrap; opacity: 0; animation: intro 1.2s var(--ease) 1.1s forwards; }
.hero-stand .live { width: 7px; height: 7px; border-radius: 50%; background: var(--grad); animation: lamp 2.4s ease-in-out infinite; }
@media (min-width: 1024px) { .hero-stand { left: auto; right: 2%; bottom: auto; top: 22%; transform: none; } }
/* Small phones: logo, title, sentence and the first button on the first screen */
@media (max-width: 480px) {
  .hero-logo { margin-top: -22px; } .hero-logo img { height: 92px; } .hero-logo > span::before { top: 20px; }
  .hero2 { margin-top: -120px; padding-top: 120px; }
  .hero-text { padding: 14px 0 24px; }
  .loud { font-size: clamp(2.15rem, 11vw, 2.5rem); line-height: 1.06; }
  .hero-text .lead { font-size: 1rem; line-height: 1.5; margin-top: 18px; }
  .hero-text .btns { margin-top: 24px; gap: 10px; }
  .fig.hero-fig { max-width: 86vw; height: min(56svh, 440px); }
}

/* Marquee on the gradient, runs only in view */
.mq { overflow: hidden; background: var(--grad); color: #0b0b0c; }
.mq-track { display: flex; width: max-content; gap: 48px; padding: 14px 0; animation: mq 30s linear infinite; }
.mq-track[data-paused="true"] { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } }
.mq span { display: flex; align-items: center; gap: 40px; white-space: nowrap; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.mq span i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
@keyframes mq { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* ---------- 01 Where things stand: four tiles, the state in the notch ---------- */
.stand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 900px) { .stand { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } }
.st-k figcaption { padding: 18px 6px 0; }
.st-k figcaption b { display: block; font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--bright); }
.st-k figcaption span { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
@media (max-width: 480px) { .st-k figcaption span { font-size: 13px; } .kerbe .z { font-size: 9.5px; letter-spacing: .16em; padding-bottom: 6px; } .kerbe { padding-right: 12px; padding-left: 16px; } }

/* ---------- Window: the picture stands still, the page slides over it ---------- */
.film { padding: 0; height: clamp(520px, 78svh, 860px); clip-path: inset(0); background: var(--ink); }
.film.short { height: clamp(380px, 56svh, 620px); }
.film .back { position: fixed; inset: 0; }
.film:not(.near) .back, .film:not(.near) .mid, .film:not(.near) .cap { display: none; }
.film .still { width: 100%; height: 100%; object-fit: cover; }
.film .dim { position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 52%, rgba(11,11,12,.62), rgba(11,11,12,.28) 70%, rgba(11,11,12,.2)); }
.film .mid { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 20px; }
.film .say { text-align: center; max-width: 1480px; display: flex; flex-direction: column; align-items: center; }
.film .dash { width: 36px; height: 2px; background: var(--grad); transform: scaleX(0); transition: transform 1.4s var(--ease-film) .2s; }
.film.on .dash { transform: none; }
.film .line { margin: 40px 0 0; font-size: clamp(2.4rem, 5.6vw, 5.6rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.035em; color: var(--bright); max-width: 16ch; text-wrap: balance; }
.film .sub { margin: 36px 0 0; max-width: 44ch; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5; color: rgba(244,242,238,.8); opacity: 0; transform: translate3d(0, 40px, 0); transition: opacity 2s var(--ease-film) .9s, transform 2s var(--ease-film) .9s; }
.film.on .sub { opacity: 1; transform: none; }
.film .cap { position: fixed; left: 20px; bottom: 22px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(244,242,238,.5); font-weight: 600; opacity: 0; transition: opacity 1.4s var(--ease-film) 1.2s; }
@media (min-width: 720px) { .film .cap { left: 40px; } }
.film.on .cap { opacity: 1; }
/* Film sentences: letters roll up, the {marked} part in the gradient */
.roll .rw { display: inline-block; white-space: nowrap; }
.roll .rm { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .06em .01em .2em; margin: -.06em -.01em -.2em; }
.roll .rc { display: inline-block; transform: translate3d(0, 110%, 0); transition: transform .9s var(--ease-film); }
.film.on .roll .rc { transform: none; }
.roll .rb { color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(100deg, color-mix(in srgb, var(--pink) calc(var(--a, 0) * 100%), var(--cyan)), color-mix(in srgb, var(--pink) calc(var(--b, 1) * 100%), var(--cyan))); }

/* ---------- 02 The code ---------- */
.code-grid { display: grid; gap: 44px; }
@media (min-width: 1000px) { .code-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 88px; align-items: center; } }
.code-k { perspective: 1400px; max-width: 520px; }
@media (min-width: 1000px) { .code-k { max-width: none; } }
.code-k .glow2 { position: absolute; inset: -18% -14%; pointer-events: none; background: radial-gradient(40% 40% at 25% 30%, rgba(96,196,227,.16), transparent 70%), radial-gradient(38% 38% at 78% 72%, rgba(235,89,134,.16), transparent 70%); }
.code-text .lead { max-width: 48ch; }
.code-text p:not(.lead) { margin-top: 22px; font-size: 1.02rem; max-width: 52ch; }
/* three numbers between double lines; the big ones count up */
.zahlen { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; padding: 26px 0 28px; border-top: 1px double var(--line-strong); border-bottom: 1px double var(--line-strong); position: relative; }
.zahlen::before, .zahlen::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.zahlen::before { top: 3px; } .zahlen::after { bottom: 3px; }
.zahlen b { display: block; font-size: clamp(2.6rem, 5vw, 4.6rem); font-weight: 600; line-height: .95; letter-spacing: -0.04em; background: var(--grad-soft); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zahlen span { display: block; margin-top: 12px; font-size: 13.5px; line-height: 1.45; color: var(--muted); max-width: 20ch; }
@media (max-width: 560px) { .zahlen { grid-template-columns: 1fr; gap: 22px; } .zahlen span { max-width: none; } }

/* ---------- 03 Inside the app: one phone, four screens by button ---------- */
.app-grid { display: grid; gap: 48px; }
@media (min-width: 1000px) { .app-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 72px; align-items: center; } }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; padding: 6px; border-radius: 999px; background: rgba(11,11,12,.06); width: max-content; max-width: 100%; }
.tab { height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 11px/1 "Space Grotesk", sans-serif; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: background .6s var(--ease), color .6s var(--ease), transform .4s var(--ease); }
.tab:hover { color: var(--bright); }
.tab.on { background: #0b0b0c; color: #f4f2ee; box-shadow: 0 10px 22px -14px rgba(11,11,12,.8); }
.tab:active { transform: translateY(1px); }
@media (max-width: 480px) { .tab { height: 38px; padding: 0 12px; font-size: 9.5px; letter-spacing: .14em; } }
.tab-text { position: relative; margin-top: 28px; min-height: 120px; }
.tt { position: absolute; left: 0; right: 0; top: 0; opacity: 0; pointer-events: none; transform: translate3d(0, 12px, 0); }
.tt.on { position: relative; opacity: 1; pointer-events: auto; transform: none; transition: opacity .4s var(--ease), transform .5s var(--ease); }
.tt b { display: block; font-size: clamp(1.2rem, 1.9vw, 1.55rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--bright); max-width: 26ch; }
.tt p { margin: 12px 0 0; font-size: 1rem; max-width: 46ch; }
.stage { position: relative; display: flex; justify-content: center; padding: 20px 0; }
.stage-glow { position: absolute; inset: 10% 0; pointer-events: none; background: radial-gradient(45% 45% at 40% 40%, rgba(96,196,227,.22), transparent 70%), radial-gradient(40% 40% at 65% 70%, rgba(235,89,134,.2), transparent 70%); }
.ph { position: relative; width: min(62vw, 340px); margin: 0; perspective: 1400px; }
.ph .card { transform-style: preserve-3d; transition: transform 1.1s var(--ease); filter: drop-shadow(0 50px 50px rgba(11,11,12,.32)); }
.ph.neigt .card { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.phone { position: relative; display: block; aspect-ratio: 830 / 1708; width: 100%; }
.phone-screen { position: absolute; left: 4.096%; right: 4.578%; top: 1.756%; bottom: 1.815%; overflow: hidden; border-radius: 11.35% / 5.22%; background: #0b0b0d; }
.phone-screen .scr { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transform: translate3d(0, 6%, 0) scale(1.03); opacity: 0; }
.phone-screen .scr.on { opacity: 1; transform: scale(1.03); transition: transform .5s var(--ease), opacity .25s linear; z-index: 1; }
.phone-screen .scr.war { opacity: 1; transform: scale(1.03); z-index: 0; }
.phone-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }

/* ---------- 04 The beta: photo across the whole width, a bone sheet with the list ---------- */
.beta { padding-block: 0; background: #0b0b0c; }
.beta-back { position: absolute; inset: 0; }
.beta-back img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.beta-back::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(11,11,12,.86) 0%, rgba(11,11,12,.62) 46%, rgba(11,11,12,.3) 100%), linear-gradient(to bottom, rgba(11,11,12,.55), transparent 30%, transparent 70%, rgba(11,11,12,.7)); }
@media (max-width: 999px) { .beta-back::after { background: linear-gradient(to bottom, rgba(11,11,12,.9), rgba(11,11,12,.72) 50%, rgba(11,11,12,.85)); } }
.beta .in { padding-block: 88px; }
@media (min-width: 720px) { .beta .in { padding-block: 120px; } }
@media (min-width: 1100px) { .beta .in { padding-block: 136px; } }
.beta-grid { display: grid; gap: 44px; }
@media (min-width: 1000px) { .beta-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 80px; align-items: center; } }
.beta-text h2 { max-width: 16ch; }
.beta-text .lead { color: rgba(244,242,238,.84); }
.contact { margin-top: 26px; font-size: 14px; color: rgba(244,242,238,.6); }
.contact a { color: var(--bright); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
/* the sheet: bone, rounded, never transparent, rises with the scroll like the tiles */
.blatt { --ink: #efece6; --surface: #e6e2da; --bright: #0b0b0c; --muted: #5b5954; --faint: #8a8781; --line: rgba(11,11,12,0.12); --line-strong: rgba(11,11,12,0.28); --c-text: #1f8fb4; --p-text: #d43f72;
  position: relative; background: #efece6; color: #0b0b0c; border-radius: var(--rund); padding: 36px 28px 32px; box-shadow: 0 50px 90px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.8); --i: 1; color-scheme: light; }
@media (min-width: 720px) { .blatt { padding: 44px 44px 40px; } }
.blatt .label { display: block; margin-bottom: 18px; color: var(--faint); }
.gets { list-style: none; margin: 0 0 8px; padding: 0; }
.gets li { padding: 13px 0; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.45; color: #0b0b0c; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.gets li::before { content: ""; width: 12px; height: 2px; border-radius: 1px; background: var(--grad); align-self: center; }
.gets li:last-child { border-bottom: 1px solid var(--line); }
.field { position: relative; display: block; padding: 18px 0 14px; border-bottom: 1px solid var(--line-strong); }
.field + .field { margin-top: 6px; }
.field span { position: absolute; left: 0; top: 18px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--faint); transition: transform .5s var(--ease), color .5s var(--ease); transform-origin: left top; pointer-events: none; }
.field input { width: 100%; margin: 0; padding: 14px 0 0; border: 0; background: transparent; color: #0b0b0c; font: 500 clamp(1.1rem, 1.6vw, 1.35rem)/1.3 "Space Grotesk", sans-serif; letter-spacing: -0.01em; outline: none; }
.field input::placeholder { color: transparent; }
.field:focus-within span, .field input:not(:placeholder-shown) + span { transform: translateY(-10px) scale(.9); color: var(--c-text); }
.field::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.field:focus-within::after { transform: none; }
.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; margin-top: 26px; font-size: 13.5px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .box { width: 20px; height: 20px; margin-top: 2px; border: 1px solid var(--line-strong); border-radius: 6px; position: relative; transition: border-color .4s var(--ease); background: #fff; }
.check .box::after { content: ""; position: absolute; inset: 4px; border-radius: 3px; background: var(--grad); transform: scale(0); transition: transform .4s var(--ease); }
.check input:checked ~ .box { border-color: transparent; }
.check input:checked ~ .box::after { transform: none; }
.check input:focus-visible ~ .box { outline: 1px solid var(--cyan); outline-offset: 3px; }
.field.bad { border-bottom-color: var(--p-text); } .field.bad span { color: var(--p-text); } .check.bad .box { border-color: var(--p-text); }
.blatt .btns { margin-top: 30px; align-items: center; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.blatt .msg { display: none; margin-top: 22px; font-size: 15px; }
.blatt.err .msg.e { display: block; color: var(--p-text); }
.done { display: none; padding: 10px 0 0; }
.done .big { font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.035em; color: #0b0b0c; }
.done p { margin-top: 18px; font-size: 1.05rem; color: var(--muted); }
.blatt.ok .fields, .blatt.ok .gets { display: none; } .blatt.ok .done { display: block; }

/* ---------- Footer ---------- */
.foot { padding: 56px 20px calc(36px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255,255,255,.08); background: #0b0b0c; position: relative; }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, rgba(96,196,227,.55), rgba(255,255,255,.12), rgba(235,89,134,.55)); }
@media (min-width: 720px) { .foot { padding-inline: 40px; } }
.foot .in { display: grid; gap: 40px; }
@media (min-width: 900px) { .foot .in { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; } }
.foot .brand { display: flex; align-items: center; gap: 18px; }
.foot .brand .mark { width: 44px; height: 44px; }
.foot .brand b { display: block; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.foot .brand span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.foot .claim { margin-top: 28px; font-size: clamp(1.4rem, 2.6vw, 2.2rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; max-width: 18ch; }
.foot .links { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
@media (min-width: 900px) { .foot .links { justify-content: flex-end; } }
.foot .links a { text-decoration: none; color: var(--bright); }
.foot .legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.foot .legal span { max-width: 62ch; }

/* Flat laptops (1366 × 650, 1280 × 620): the whole first screen fits, buttons included */
@media (min-width: 1024px) and (max-height: 760px) {
  .hero-logo { margin-top: -34px; } .hero-logo img { height: 150px; } .hero-logo > span::before { top: 30px; }
  .hero2 { margin-top: -176px; padding-top: 176px; }
  .hero-grid2 { min-height: 0; align-items: center; }
  .hero-text { padding: 0 0 40px 40px; }
  .loud { font-size: clamp(2.4rem, 4.4vw, 4rem); }
  .hero-text .lead { margin-top: 20px; font-size: 1rem; }
  .hero-text .btns { margin-top: 26px; }
  .fig.hero-fig { height: min(82svh, 540px); }
}

/* ---------- 04 A night in three parts: one big picture, two small, a click swaps them (FLIP, transform only) ---------- */
.night-grid { display: grid; gap: 44px; }
@media (min-width: 1000px) { .night-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 72px; align-items: center; } }
.night-text .lead { color: rgba(244,242,238,.86); font-size: clamp(1.15rem, 1.7vw, 1.42rem); max-width: 44ch; }
.teile { margin-top: 40px; border-top: 1px solid var(--line-strong); }
.teil { padding: 22px 0 22px 0; border-bottom: 1px solid var(--line); position: relative; cursor: pointer; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 18px; align-items: baseline; }
.teil::before { content: ""; grid-row: 1; width: 14px; height: 2px; border-radius: 1px; background: var(--line-strong); align-self: center; transition: background .6s var(--ease), transform .6s var(--ease); transform-origin: left; }
.teil.on::before { background: var(--grad); transform: scaleX(2.2); }
.teil b { display: block; grid-column: 2; font-size: clamp(1.5rem, 2.6vw, 2.3rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; color: var(--muted); transition: color .5s var(--ease); }
.teil.on b { color: transparent; background: var(--grad-soft); -webkit-background-clip: text; background-clip: text; }
.teil:hover b { color: var(--bright); }
.teil p { grid-column: 2; margin: 0; font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.55; color: rgba(244,242,238,.82); max-width: 42ch; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .8s var(--ease), opacity .5s var(--ease), margin .6s var(--ease); }
.teil.on p { max-height: 200px; opacity: 1; margin-top: 10px; }
.gruppe { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; }
.g-k.gross { grid-row: 1 / 3; }
.g-k .card > img:first-child { aspect-ratio: 4 / 5; }
.g-k:not(.gross) .card > img:first-child { aspect-ratio: auto; height: 100%; }
.g-k:not(.gross) .card { height: 100%; }
.g-k:not(.gross) { cursor: pointer; }
.g-k figcaption { margin-top: 12px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--faint); }
.g-k.gross figcaption { color: var(--bright); }
.g-k { display: flex; flex-direction: column; }
.g-k .card { flex: 1; }
.gruppe.flip .g-k .card { transition: none; }
.gruppe.flip .g-k { transition: transform .88s cubic-bezier(.36,0,.1,1); }
.gruppe.flip .g-k.weg { transition: none; }
@media (max-width: 560px) { .gruppe { grid-template-columns: 1.4fr 1fr; gap: 10px; } .g-k figcaption { font-size: 9px; letter-spacing: .14em; margin-top: 8px; } }

/* ---------- 05 For places ---------- */
.places-grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .places-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 80px; align-items: center; } }
.pl-k { perspective: 1400px; }
.pl-k .card > img:first-child { aspect-ratio: 3 / 2; }
.places-text .lead { max-width: 46ch; }
.lagen { margin-top: 30px; border-top: 1px solid var(--line); }
.lagen > div { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 8px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.lagen b { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--bright); }
.lagen span { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
@media (max-width: 560px) { .lagen > div { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- 06 Amsterdam ---------- */
.ams-grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .ams-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 88px; align-items: center; } }
.ams-k { perspective: 1400px; max-width: 520px; }
@media (max-width: 999px) { .ams-k { order: -1; } }
.ams-text .lead { max-width: 50ch; }
.fakten { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; padding: 22px 0 24px; border-top: 1px double var(--line-strong); border-bottom: 1px double var(--line-strong); position: relative; }
.fakten::before, .fakten::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.fakten::before { top: 3px; } .fakten::after { bottom: 3px; }
.fakten b { display: block; font-size: clamp(1.15rem, 1.9vw, 1.6rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--bright); }
.fakten span { display: block; margin-top: 8px; font-size: 13px; letter-spacing: .02em; color: var(--muted); }
@media (max-width: 480px) { .fakten { grid-template-columns: 1fr; gap: 16px; } }

/* ======================= Fassung 4c (16.10.2026) ======================= */
/* Groups that come in one after another, after the clock (Robert: «die Bilder sollen alle nacheinander reingeschwebt kommen») */
@keyframes feder-nach { from { translate: 0 var(--weg, 96px); scale: var(--kl, .93); } }
.nacheinander [data-r] { animation: none; translate: 0 var(--weg, 96px); scale: var(--kl, .93); }
.nacheinander [data-r].da { translate: none; scale: none; animation: feder-nach 2.1s var(--feder) backwards; animation-delay: calc(var(--i, 0) * 190ms); }
.nacheinander [data-r].da .card > img:first-child { animation-delay: calc(var(--i, 0) * 190ms); }
@media (prefers-reduced-motion: reduce) { .nacheinander [data-r], .nacheinander [data-r].da { animation: none !important; translate: none !important; scale: none !important; } }

/* ---------- Hero: the phone and the square code (Robert 16.10., 15:59: «statt dem Typen das Handy und den eckigen Code; den runden zurückstellen») ---------- */
@keyframes fly2 { from { transform: translate3d(0, 10%, 0) rotate(-5deg); } to { transform: rotate(-5deg); } }
@keyframes fly4 { from { transform: translate3d(0, 70px, 0) rotate(-9deg); } to { transform: rotate(-9deg); } }
@keyframes schweb { from { translate: 0 -1.2%; } to { translate: 0 1.2%; } }
.hero-phone { position: absolute; left: 24%; bottom: 0; width: 58%; z-index: 3; perspective: 1400px; transform: rotate(-5deg); animation: fly2 1.6s var(--ease-film) .2s both; }
.hero-phone .card { transform-style: preserve-3d; transition: transform 1.1s var(--ease); }
.hero-phone.neigt .card { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.hero-phone img { width: 100%; height: auto; display: block; }
.hero-qr { position: absolute; left: -2%; top: 34%; width: 40%; z-index: 4; perspective: 1200px; transform: rotate(-9deg); animation: fly4 1.6s var(--ease-film) .75s both; }
.hero-qr .card { position: relative; padding: 7%; border-radius: 18px; background: #0b0b0c; box-shadow: 0 0 0 1px rgba(244,242,238,.14), 0 50px 80px -40px rgba(0,0,0,.9); transform-style: preserve-3d; transition: transform 1.1s var(--ease); animation: schweb 7s ease-in-out 2.6s infinite alternate; }
.hero-qr.neigt .card { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.hero-qr img { width: 100%; height: auto; display: block; }
.hero-qr .qr-tag { position: absolute; left: 9%; right: 9%; bottom: -34px; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.fig.hero-fig { max-width: 440px; height: min(64svh, 600px); margin-top: 10px; }
@media (min-width: 1024px) { .fig.hero-fig { margin: -20px 0 0; max-width: none; width: 100%; height: min(90svh, 920px); align-self: end; } .hero-phone { left: 30%; width: 54%; } .hero-qr { left: 2%; top: 30%; width: 38%; } }
@media (max-width: 1023px) { .hero-stand { right: 2%; left: auto; transform: none; top: 10%; } }
html:not(.go) .hero-phone, html:not(.go) .hero-qr { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hero-phone, .hero-qr, .hero-qr .card { animation: none !important; } }

/* ---------- 02 The code: the wall, five backs, the scan on the big one ---------- */
.wand { display: grid; grid-template-columns: 1fr 1fr 1.42fr 1fr 1fr; gap: 16px; align-items: center; }
@media (min-width: 900px) { .wand { gap: 22px; } }
.w-k .card > img:first-child { aspect-ratio: 4 / 5; }
.w-k:nth-child(1), .w-k:nth-child(5) { margin-top: 10%; }
.w-k:nth-child(2), .w-k:nth-child(4) { margin-bottom: 8%; }
@media (max-width: 899px) { .wand { grid-template-columns: 1fr 1fr; } .w-k.w-gross { grid-column: 1 / -1; order: -1; } .w-k:nth-child(n) { margin: 0; } }
.w-k { perspective: 1400px; }
.code-unten { display: grid; gap: 28px; margin-top: 56px; }
@media (min-width: 1000px) { .code-unten { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 88px; align-items: center; margin-top: 72px; } .code-unten .zahlen { margin-top: 0; } }
.code-unten p { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.55; max-width: 46ch; margin: 0; }
/* the scan: one light runs down the code once the tile has arrived, then the notch says «connected» */
@keyframes scan-lauf { 0% { transform: translate3d(0, -110%, 0); } 100% { transform: translate3d(0, 900%, 0); } }
.scan { position: absolute; left: 0; right: 0; top: 0; height: 12%; z-index: 1; pointer-events: none; transform: translate3d(0, -110%, 0);
  background: linear-gradient(to bottom, rgba(96,196,227,0) 0%, rgba(96,196,227,.28) 48%, rgba(244,242,238,.9) 50%, rgba(235,89,134,.28) 52%, rgba(235,89,134,0) 100%); }
[data-scan].da .scan { animation: scan-lauf 1.6s cubic-bezier(.45,0,.2,1) calc(var(--i, 0) * 190ms + 1.4s) both; }
.z-wechsel { display: inline-grid; }
.z-wechsel > span { grid-area: 1 / 1; transition: opacity .3s linear; }
.z-wechsel > span:last-child { opacity: 0; }
[data-scan].da .z-wechsel > span:first-child { animation: z-weg .3s linear calc(var(--i, 0) * 190ms + 3s) forwards; }
[data-scan].da .z-wechsel > span:last-child { animation: z-her .3s linear calc(var(--i, 0) * 190ms + 3s) forwards; }
@keyframes z-weg { to { opacity: 0; } } @keyframes z-her { to { opacity: 1; } }
[data-scan].da .kerbe .live { animation: lamp 2.4s ease-in-out infinite, lampe-an .4s linear calc(var(--i, 0) * 190ms + 3s) forwards; }
@keyframes lampe-an { to { background: #60c4e3; } }

/* ---------- 03 Inside the app: five phones, one in front, the neighbours behind it ---------- */
.app-kopf { margin-bottom: 24px; }
.show { position: relative; }
.show-stage { position: relative; height: clamp(440px, 58vw, 720px); display: flex; align-items: center; justify-content: center; }
.show .stage-glow { inset: 14% 10%; }
.show-track { position: relative; width: 100%; height: 100%; perspective: 1600px; }
.slide { position: absolute; left: 50%; top: 50%; width: min(56vw, 340px); margin: 0; transform: translate(-50%, -50%) translate3d(var(--x, 0), 0, 0) scale(var(--s, 1)); opacity: var(--o, 1); z-index: var(--z, 1); transition: transform 1s var(--ease), opacity .6s var(--ease); cursor: pointer; }
.slide img { width: 100%; height: auto; display: block; }
.slide { transform: translate(-50%, -50%) translate3d(var(--x, 0), 0, 0) scale(var(--s, 1)) rotateY(var(--ry, 0deg)); }
.slide[data-d="0"] { --x: 0; --s: 1; --o: 1; --z: 5; --ry: 0deg; cursor: default; }
.slide[data-d="1"] { --x: 50%; --s: .8; --o: .62; --z: 4; --ry: -14deg; }
.slide[data-d="-1"] { --x: -50%; --s: .8; --o: .62; --z: 4; --ry: 14deg; }
.slide[data-d="2"] { --x: 88%; --s: .64; --o: .34; --z: 3; --ry: -24deg; }
.slide[data-d="-2"] { --x: -88%; --s: .64; --o: .34; --z: 3; --ry: 24deg; }
@media (min-width: 1000px) { .slide { width: 340px; } .slide[data-d="1"] { --x: 74%; } .slide[data-d="-1"] { --x: -74%; } .slide[data-d="2"] { --x: 134%; } .slide[data-d="-2"] { --x: -134%; } }
@media (max-width: 999px) { .slide[data-d="2"], .slide[data-d="-2"] { --o: 0; pointer-events: none; } .slide[data-d="1"], .slide[data-d="-1"] { --s: .72; --o: .5; } }
.show-arrow { position: absolute; top: 50%; z-index: 6; width: 54px; height: 54px; margin-top: -27px; border-radius: 50%; border: 1px solid var(--line-strong); background: #efece6; color: #0b0b0c; font: 500 18px/1 "Space Grotesk", sans-serif; cursor: pointer; display: grid; place-items: center; box-shadow: 0 14px 28px -16px rgba(11,11,12,.6); transition: transform .5s var(--ease), background .5s var(--ease), color .5s var(--ease); }
.show-arrow:hover { transform: translateY(-2px); background: #0b0b0c; color: #f4f2ee; }
.show-arrow:active { transform: translateY(1px); }
.show-arrow.prev { left: 0; } .show-arrow.next { right: 0; }
@media (min-width: 1000px) { .show-arrow.prev { left: 6%; } .show-arrow.next { right: 6%; } }
.show .tabs { margin: 8px auto 0; }
.show .tab-text { text-align: center; min-height: 170px; }
@media (max-width: 600px) { .show .tab-text { min-height: 210px; } }
.show .tt b, .show .tt p { margin-left: auto; margin-right: auto; }
.show .tt p { margin-top: 12px; }
/* slides come in from below, staggered, once the show is near */
.show-track .slide { translate: 0 90px; }
.show.da .slide { translate: none; transition: transform 1s var(--ease), opacity .6s var(--ease), translate 1.9s var(--feder-leise); transition-delay: 0s, 0s, calc(var(--i, 0) * 120ms); }

/* ---------- 05 For places: the band of people, one slow run, never stops ---------- */
.band-wrap { margin-top: 64px; }
.band-row2 { overflow: hidden; margin-inline: calc(-1 * clamp(20px, 4vw, 40px)); }
.band-track2 { display: flex; gap: 14px; width: max-content; animation: bandlauf 70s linear infinite; }
.band-wrap:not(.on) .band-track2 { animation-play-state: paused; }
@keyframes bandlauf { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.bd { margin: 0; width: clamp(150px, 16vw, 240px); flex: none; border-radius: var(--rund-s); overflow: hidden; background: var(--surface); box-shadow: var(--tile-shadow); }
.bd img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.bd:nth-child(even) { margin-top: 24px; }
.band-cap { margin: 18px 0 0; text-align: center; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--faint); }
@media (prefers-reduced-motion: reduce) { .band-track2 { animation: none; } }

/* ---------- 06 Amsterdam: the road so far ---------- */
.strecke { position: relative; margin-top: 72px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding-top: 34px; }
.strecke-linie { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-strong); transform: scaleX(0); transform-origin: left; transition: transform 2.2s var(--ease-film); }
.strecke.da .strecke-linie, .strecke:has(.da) .strecke-linie { transform: none; }
.st2 { position: relative; --weg: 60px; --kl: .96; }
.st2::before { content: ""; position: absolute; left: 0; top: -39px; width: 11px; height: 11px; border-radius: 50%; background: var(--line-strong); }
.st2.hier::before { background: var(--grad); box-shadow: 0 0 0 6px rgba(96,196,227,.14); }
.st2 b { display: block; font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.st2.hier b { background: var(--grad-soft); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st2 em { display: block; font-style: normal; margin-top: 8px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--c-text); }
.st2 span { display: block; margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--muted); max-width: 26ch; }
@media (max-width: 760px) { .strecke { grid-template-columns: 1fr 1fr; gap: 36px 20px; } }
.ams-mehr { margin-top: 20px; font-size: 1.02rem; max-width: 50ch; }

/* ---------- 07 The beta: stickers from the print around the sheet ---------- */
.blatt-wrap { position: relative; }
.sticker { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.stk { position: absolute; height: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); --weg: 54px; --kl: .9; }
.stk.s1 { width: 44%; left: -14%; top: -7%; rotate: -8deg; }
.stk.s2 { width: 40%; right: -14%; top: 26%; rotate: 7deg; }
.stk.s3 { width: 17%; left: -9%; bottom: 16%; rotate: -12deg; }
.stk.s4 { width: 20%; right: -6%; top: -9%; rotate: 9deg; }
.stk.s5 { width: 70%; left: 10%; bottom: -8%; rotate: -3deg; }
.stk.s6 { width: 9%; left: -4%; top: 34%; rotate: 6deg; }
.stk.s7 { width: 11%; right: -5%; bottom: -4%; rotate: 14deg; }
@media (max-width: 999px) { .stk.s2, .stk.s6 { display: none; } .stk.s1 { width: 48%; left: -4%; top: -6%; } .stk.s4 { right: -2%; } .stk.s5 { width: 78%; bottom: -6%; left: 8%; } .stk.s3 { left: -3%; } .stk.s7 { right: -2%; } }
.blatt { z-index: 2; }

/* ---------- 05 For places, Fassung 4d: head, the band of people across the whole width, four layers in a row ---------- */
#places .two.kopf { margin-bottom: 40px; }
.band-wrap { margin-top: 0; }
.band-row2 { overflow: hidden; margin-inline: 0; }
.bd { width: clamp(170px, 19vw, 280px); }
.bd:nth-child(even) { margin-top: 32px; }
.lagen4 { margin-top: 64px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.lage { --weg: 60px; --kl: .96; padding-top: 22px; border-top: 1px solid var(--line-strong); }
.lage b { display: block; font-size: clamp(1.25rem, 1.9vw, 1.6rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--bright); }
.lage span { display: block; margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 28ch; }
@media (max-width: 760px) { .lagen4 { grid-template-columns: 1fr 1fr; gap: 28px 20px; } }
.lagen-fuss { margin: 40px 0 0; font-size: 1.02rem; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; max-width: none; }
.kerbe-pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: #0b0b0c; color: #f4f2ee; font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.kerbe-pill .live { width: 7px; height: 7px; border-radius: 50%; background: var(--grad); animation: lamp 2.4s ease-in-out infinite; }

/* ---------- 06 Amsterdam, Fassung 4d: polaroids land one after another, the logo lands last as a sticker ---------- */
.polas2 { position: relative; height: clamp(420px, 44vw, 640px); }
@media (max-width: 999px) { .polas2 { order: -1; height: clamp(360px, 92vw, 520px); } }
.pola2 { position: absolute; margin: 0; background: #f4f2ee; padding: 3.2% 3.2% 11%; border-radius: 4px; box-shadow: 0 30px 50px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.06); rotate: var(--r, 0deg); --weg: 120px; --kl: .96; }
.pola2 img { width: 100%; height: auto; display: block; }
.pola2 figcaption { position: absolute; left: 7%; right: 7%; bottom: 3.5%; margin: 0; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: #5b5954; font-weight: 600; white-space: nowrap; }
.pola2.p1 { width: 44%; left: 2%; top: 4%; --r: -7deg; z-index: 2; }
.pola2.p2 { width: 50%; right: -2%; top: 0; --r: 6deg; z-index: 1; }
.pola2.p3 { width: 36%; left: 30%; top: 36%; --r: 3deg; z-index: 4; }
.pola2.p4 { width: 34%; left: -2%; bottom: 0; --r: -11deg; z-index: 3; }
.pola2.p5 { width: 34%; right: 2%; bottom: 2%; --r: 9deg; z-index: 2; }
.pola-logo { position: absolute; left: 58%; top: 22%; width: 24%; z-index: 6; rotate: -10deg; --weg: 60px; --kl: .7; }
.pola-logo img { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
.pola2 { transform-origin: center; }
/* Anheben bei Maus entfernt (Prüfung 16.10.: Safari löst :hover beim Scrollen unter der ruhenden Maus aus, Robert: Anheben nie) */

/* Sticker auch links im Abschnitt (Robert 16.10., 16:01: «auf den ganzen Abschnitt verteilt») */
.beta-text { position: relative; }
.sticker-links { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.stk.l1 { width: 34%; left: 58%; top: -22%; rotate: 6deg; }
.stk.l2 { width: 96%; left: 0; bottom: -26%; rotate: -2deg; }
@media (max-width: 999px) { .stk.l1 { left: 56%; top: -14%; width: 40%; } .stk.l2 { display: none; } }
.stk.s2 { width: 44%; right: -16%; top: 22%; }

/* ======================= Fassung 4e (16.10.2026, 16:35–16:40) ======================= */
/* Groups: the way up hangs on the scroll from the moment the piece reaches the screen edge, each piece a little later than the one before (Robert: «direkt hochgescrollt kommen», «nacheinander») */
@supports (animation-timeline: view()) {
  .nacheinander [data-r] { translate: none; scale: var(--kl, .93); animation: zug cubic-bezier(.3,.3,.45,1) both; animation-timeline: view(); animation-range: cover calc(var(--i, 0) * 7vh) cover calc(52vh + var(--i, 0) * 7vh); }
  .nacheinander [data-r].da { translate: none; scale: none; animation: zug cubic-bezier(.3,.3,.45,1) both, puls 2.4s var(--feder) backwards; animation-timeline: view(), auto; animation-range: cover calc(var(--i, 0) * 7vh) cover calc(52vh + var(--i, 0) * 7vh), normal; animation-delay: 0s, calc(var(--i, 0) * 140ms); }
  .nacheinander [data-r].da .card > img:first-child { animation-delay: calc(var(--i, 0) * 140ms); }
}
/* Hero, phone leaning back at the top, the code beside it without overlap */
.hero-phone { left: 34%; bottom: 10%; width: 62%; transform: none; animation-name: fly2b; }
@keyframes fly2b { from { transform: translate3d(0, 10%, 0); } to { transform: none; } }
.hero-qr { left: -6%; top: 36%; width: 34%; }
@media (min-width: 1024px) { .hero-phone { left: 38%; bottom: 12%; width: 60%; } .hero-qr { left: -2%; top: 34%; width: 33%; } .hero-stand { right: auto; left: 2%; top: 18%; } }
@media (max-width: 1023px) { .hero-phone { left: 40%; bottom: 0; width: 58%; } .hero-qr { left: 0; top: 28%; width: 36%; } }
/* 03: the phones behind stay recognisable, the tab bar in colour */
.slide[data-d="1"], .slide[data-d="-1"] { --o: .82; }
.slide[data-d="2"], .slide[data-d="-2"] { --o: .58; }
@media (max-width: 999px) { .slide[data-d="1"], .slide[data-d="-1"] { --o: .7; } }
.show .tabs { background: linear-gradient(#efece6, #efece6) padding-box, var(--grad) border-box; border: 1px solid transparent; box-shadow: 0 18px 40px -24px rgba(11,11,12,.5); }
.show .tab { color: #3c3a36; }
.show .tab:hover { color: #0b0b0c; background: rgba(11,11,12,.05); }
.show .tab.on { background: var(--grad); color: #0b0b0c; box-shadow: 0 10px 24px -12px rgba(235,89,134,.6); }
/* 06: the logo above the headline, centred over it */
.ams-kopf { display: inline-block; }
.ams-logo { display: block; width: clamp(88px, 9vw, 128px); height: auto; margin: 0 auto 22px; }
/* 07: stickers behind the sheet, arranged around it; the sheet on top */
.beta .sticker { z-index: 1; }
.blatt { position: relative; z-index: 2; }
.stk.s2 { width: 46%; right: -18%; top: 6%; rotate: 7deg; }
.stk.s3 { width: 20%; left: -11%; bottom: 10%; rotate: -12deg; }
.stk.s4 { width: 22%; right: -9%; top: -8%; rotate: 9deg; }
.stk.s5 { width: 72%; left: 14%; bottom: -9%; rotate: -2deg; }
.stk.s6 { width: 11%; left: -7%; top: 20%; rotate: -6deg; }
.stk.s7 { width: 12%; right: -8%; bottom: 14%; rotate: 14deg; }
.stk.l1 { width: 30%; left: 62%; top: -24%; rotate: 5deg; }
.stk.l2 { width: 92%; left: 0; bottom: -24%; rotate: -2deg; }
@media (max-width: 999px) { .stk.s2 { display: none; } .stk.s4 { right: -2%; top: -8%; } .stk.s5 { width: 80%; left: 10%; bottom: -7%; } .stk.s3 { left: -3%; } .stk.s7 { right: -3%; } .stk.s6 { display: none; } }

.foot .legal a { color: var(--bright); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }

/* 03 (Robert 16:53): the phones behind clearly visible */
.slide[data-d="1"], .slide[data-d="-1"] { --o: 1; --s: .84; }
.slide[data-d="2"], .slide[data-d="-2"] { --o: .92; --s: .7; }
@media (min-width: 1000px) { .slide[data-d="1"] { --x: 78%; } .slide[data-d="-1"] { --x: -78%; } .slide[data-d="2"] { --x: 142%; } .slide[data-d="-2"] { --x: -142%; } }
@media (max-width: 999px) { .slide[data-d="1"], .slide[data-d="-1"] { --o: .95; } }

/* Hero, Fassung 4f (Robert 16:53): the phone drives in from below, the code stands straight beside it */
@keyframes fly2c { from { transform: translate3d(0, 46%, 0); } to { transform: none; } }
.hero-phone { animation: fly2c 2s var(--ease-film) .15s both; left: 36%; bottom: 8%; width: 64%; }
.hero-qr { transform: none; animation-name: fly4b; left: 0; top: 40%; width: 30%; }
@keyframes fly4b { from { transform: translate3d(0, 70px, 0); } to { transform: none; } }
.hero-qr .card { animation: none; border-radius: 16px; }
.hero-qr .qr-tag { text-align: center; left: 0; right: 0; bottom: -30px; }
.hero-stand { top: auto; bottom: auto; }
@media (min-width: 1024px) { .hero-phone { left: 40%; bottom: 10%; width: 62%; } .hero-qr { left: 1%; top: 38%; width: 29%; } .hero-stand { left: 1%; right: auto; top: 24%; } }
@media (max-width: 1023px) { .hero-phone { left: 42%; bottom: 0; width: 60%; } .hero-qr { left: 2%; top: 30%; width: 34%; } .hero-stand { left: 2%; right: auto; top: 14%; } }
@media (prefers-reduced-motion: reduce) { .hero-phone, .hero-qr { animation: none !important; } }

/* Hero, Fassung 4g (Robert 17:13): phone tipped forward, no glare; the code a little higher and more to the middle */
@media (min-width: 1024px) { .hero-qr { left: 6%; top: 30%; width: 28%; } .hero-stand { left: 6%; top: 18%; } .hero-phone { left: 42%; bottom: 8%; width: 60%; } }
@media (max-width: 1023px) { .hero-qr { left: 4%; top: 24%; width: 32%; } }

/* Hero, Fassung 4h (Robert 17:20): screen more frontal, phone bigger and further left, code further left */
@media (min-width: 1024px) { .hero-phone { left: 26%; bottom: 4%; width: 76%; } .hero-qr { left: -6%; top: 30%; width: 27%; } .hero-stand { left: -6%; top: 18%; } .fig.hero-fig { height: min(94svh, 960px); } }
@media (max-width: 1023px) { .hero-phone { left: 34%; bottom: 0; width: 68%; } .hero-qr { left: 0; top: 22%; width: 30%; } }
@media (min-width: 1024px) { .hero-phone { left: 28%; width: 68%; bottom: 3%; } }

/* ======================= Fassung 4j (16.10.2026, 17:30) ======================= */
/* Hero: the code sits top left above the headline, the phone has the whole right column */
.hero-oben { display: flex; align-items: center; gap: 22px; margin-bottom: 30px; }
.hero-oben .hero-qr { position: static; width: 112px; transform: none; animation: none; flex: none; }
.hero-oben .hero-qr .card { padding: 8px; border-radius: 14px; animation: none; }
.hero-oben .hero-qr .qr-tag { position: static; display: block; margin-top: 8px; text-align: left; font-size: 9.5px; letter-spacing: .18em; }
.hero-oben .hero-stand { position: static; transform: none; animation: none; opacity: 1; }
@media (min-width: 1024px) { .hero-oben .hero-qr { width: 128px; } .hero-phone { left: 14%; width: 74%; bottom: 3%; } }
@media (max-width: 1023px) { .hero-oben { margin-bottom: 20px; gap: 16px; } .hero-oben .hero-qr { width: 92px; } .hero-phone { left: 18%; width: 70%; } }
@media (max-width: 480px) { .hero-oben .hero-stand { font-size: 9px; padding: 8px 12px; } }
/* «Das ganze Programm» on every picture: up with the scroll, one springy pulse, zoom into the frame */
.pola2 img, .g-k .card > img:first-child, .w-k .card > img:first-child, .st-k .card > img:first-child { transform: scale(1.14); }
.pola2.da img, .g-k.da .card > img:first-child, .w-k.da .card > img:first-child, .st-k.da .card > img:first-child { transform: none; animation: zoom 2.8s cubic-bezier(.16,1,.3,1) backwards; animation-delay: calc(var(--i, 0) * 140ms); }
.pola2 { overflow: hidden; }
.show.da .slide { animation: puls 2.4s var(--feder) backwards; animation-delay: calc(var(--i, 0) * 120ms); }
.show.da .slide img { animation: zoom 2.6s cubic-bezier(.16,1,.3,1) backwards; animation-delay: calc(var(--i, 0) * 120ms); }
.band-wrap.on .bd { animation: puls 2.4s var(--feder) backwards; animation-delay: calc(var(--j, 0) * 90ms); }
@media (prefers-reduced-motion: reduce) { .pola2 img, .show.da .slide, .show.da .slide img, .band-wrap.on .bd { animation: none !important; transform: none !important; } }
@media (min-width: 1024px) and (max-height: 760px) { .hero-oben { margin-bottom: 14px; } .hero-oben .hero-qr { width: 88px; } .hero-phone { width: 66%; left: 20%; } }
/* first screen: buttons stay above the fold with the code block on top */
@media (min-width: 1024px) { .hero-oben { margin-bottom: 22px; } .hero-text { padding-bottom: 56px; } .loud { font-size: clamp(2.5rem, 5.1vw, 5rem); } .hero-text .lead { margin-top: 22px; } .hero-text .btns { margin-top: 28px; } }
@media (min-width: 1024px) and (max-height: 760px) { .hero-oben { margin-bottom: 10px; } .hero-oben .hero-qr { width: 76px; } .hero-oben .hero-qr .qr-tag { display: none; } .loud { font-size: clamp(2.2rem, 3.8vw, 3.3rem); } .hero-text { padding-bottom: 24px; } .hero-text .lead { margin-top: 14px; font-size: .96rem; } .hero-text .btns { margin-top: 18px; } .hero2 { margin-top: -150px; padding-top: 150px; } .hero-logo img { height: 120px; } .hero-logo > span::before { top: 24px; } }
@media (min-width: 1024px) { .fig.hero-fig { height: min(78svh, 760px); } .hero-phone { left: 8%; width: 74%; bottom: 2%; } .hero-grid2 { min-height: 0; } }
@media (min-width: 1024px) and (max-height: 760px) { .fig.hero-fig { height: min(74svh, 520px); } .hero-phone { left: 12%; width: 66%; } }
@media (min-width: 1024px) and (max-height: 760px) { .hero-phone { left: 16%; width: 56%; bottom: 0; } }
/* Fassung 4k (Robert 17:47): phone a little smaller, code bigger and higher */
@media (min-width: 1024px) { .hero-phone { left: 12%; width: 66%; } .hero-oben { margin-top: -28px; margin-bottom: 30px; } .hero-oben .hero-qr { width: 164px; } .hero-oben .hero-qr .card { padding: 10px; border-radius: 18px; } }
@media (min-width: 1024px) and (max-height: 760px) { .hero-oben .hero-qr { width: 104px; } .hero-oben { margin-top: -10px; margin-bottom: 14px; } .hero-phone { width: 52%; left: 20%; } }
@media (max-width: 1023px) { .hero-oben .hero-qr { width: 112px; } }
/* the beta sheet can land in the middle of the screen: more room below it, the photo fills it */
@media (min-width: 1024px) { .beta .in { padding-bottom: 300px; } }

/* ======================= Fassung 4m (16.10.2026, 18:10) ======================= */
/* Hero: three phones. The front one carries the newsfeed, two more peek out behind it (Robert: «wie in einer Apple-Werbung») */
.hero-trio { position: absolute; inset: 0; }
.hero-trio .hero-phone { position: absolute; animation: none; }
.hero-trio .hero-phone img { width: 100%; height: auto; display: block; }
.hero-trio .vorn { left: 22%; bottom: 2%; width: 56%; z-index: 3; animation: fly2c 2s var(--ease-film) .15s both; }
.hero-trio .hinten { width: 46%; bottom: 10%; z-index: 2; filter: brightness(.78); }
.hero-trio .hinten.links { left: -2%; animation: fly-l 2s var(--ease-film) .45s both; }
.hero-trio .hinten.rechts { right: -4%; animation: fly-r 2s var(--ease-film) .6s both; }
@keyframes fly-l { from { transform: translate3d(24%, 30%, 0); } to { transform: translate3d(0, 0, 0) rotate(-6deg); } }
@keyframes fly-r { from { transform: translate3d(-24%, 30%, 0); } to { transform: translate3d(0, 0, 0) rotate(7deg); } }
.hero-trio .hinten.links { transform: rotate(-6deg); } .hero-trio .hinten.rechts { transform: rotate(7deg); }
@media (min-width: 1024px) { .hero-trio .vorn { left: 24%; width: 52%; bottom: 0; } .hero-trio .hinten { width: 42%; bottom: 12%; } .hero-trio .hinten.links { left: 0; } .hero-trio .hinten.rechts { right: -2%; } .fig.hero-fig { height: min(80svh, 780px); } }
@media (min-width: 1024px) and (max-height: 760px) { .hero-trio .vorn { width: 44%; left: 28%; } .hero-trio .hinten { width: 36%; bottom: 14%; } }
@media (max-width: 1023px) { .hero-trio .vorn { left: 22%; width: 56%; } .hero-trio .hinten { width: 44%; bottom: 12%; } }
html:not(.go) .hero-trio .hero-phone { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hero-trio .hero-phone { animation: none !important; } }
/* 04: the parts open softly, the line under the open title draws itself */
.teil { transition: padding .6s var(--ease); }
.teil b { position: relative; display: inline-block; padding-bottom: 6px; }
.teil b::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-film); }
.teil.on b::after { transform: none; }
.teil p { transition: max-height 1s var(--ease-film), opacity .7s var(--ease-film) .15s, margin .6s var(--ease); }
.teil:not(.on) p { transition: max-height .6s var(--ease), opacity .25s linear, margin .5s var(--ease); }
/* Footer: calm, with the studio floor, the logo and the sentence of the house, three columns with a round arrow */
.foot { position: relative; padding: 96px 20px calc(40px + env(safe-area-inset-bottom, 0px)); overflow: clip; }
@media (min-width: 720px) { .foot { padding-inline: 40px; } }
.foot .in { position: relative; display: grid; gap: 56px; max-width: var(--wrap); }
@media (min-width: 1000px) { .foot .in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 72px 96px; align-items: start; } }
.foot-kopf { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.foot-logo { width: clamp(110px, 11vw, 150px); height: auto; }
.foot-satz { margin: 6px 0 0; font-size: clamp(1.8rem, 3.2vw, 2.8rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; max-width: 14ch; }
.foot-ort { margin: 0 0 8px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--faint); }
.foot-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 28px; }
@media (max-width: 560px) { .foot-spalten { grid-template-columns: 1fr 1fr; } }
.foot-spalte { display: flex; flex-direction: column; }
.foot-spalte .label { margin-bottom: 14px; }
.foot-spalte a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--bright); text-decoration: none; transition: color .5s var(--ease); }
.foot-spalte a:last-of-type { border-bottom: 1px solid var(--line); }
.foot-spalte a i { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); position: relative; transition: background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease); }
.foot-spalte a i::before { content: "→"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--bright); }
.foot-spalte a:hover i { background: var(--grad); border-color: transparent; transform: translateX(2px); }
.foot-spalte a:hover i::before { color: #0b0b0c; }
.foot-hinweis { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--faint); }
.foot .legal { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px 24px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.foot .legal a { color: var(--bright); text-decoration: none; border: 0; }

/* ======================= Fassung 4n (16.10.2026, 18:30): three phones as one picture, rendered together ======================= */
.hero-fan { position: absolute; left: 50%; bottom: 0; width: 112%; transform: translateX(-50%); perspective: 1600px; animation: fan-rein 2s var(--ease-film) .15s both; }
@keyframes fan-rein { from { transform: translate3d(-50%, 12%, 0); } to { transform: translate3d(-50%, 0, 0); } }
.hero-fan .card { transform-style: preserve-3d; transition: transform 1.2s var(--ease); }
.hero-fan.neigt .card { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.hero-fan img { width: 100%; height: auto; display: block; }
@media (min-width: 1024px) { .fig.hero-fig { height: min(80svh, 780px); } .hero-fan { width: 118%; bottom: -2%; } }
@media (min-width: 1024px) and (max-height: 760px) { .hero-fan { width: 104%; } }
@media (max-width: 1023px) { .fig.hero-fig { height: min(60svh, 460px); } .hero-fan { width: 108%; bottom: 0; } }
html:not(.go) .hero-fan { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hero-fan { animation: none !important; } }
@media (min-width: 1024px) { .hero-fan { width: 110%; bottom: -1%; } }

/* ======================= Fassung 4o (16.10.2026, 18:40): the sheet as a guest list ======================= */
.blatt.gaeste { padding: 0; overflow: hidden; }
.blatt.gaeste .gl-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 24px 28px; background: #0b0b0c; color: #f4f2ee; }
@media (min-width: 720px) { .blatt.gaeste .gl-kopf { padding: 26px 36px; } }
.gl-mark { width: 34px; height: 34px; background: #f4f2ee; -webkit-mask: url("media/logo-white.svg") center / contain no-repeat; mask: url("media/logo-white.svg") center / contain no-repeat; }
.gl-kopf b { display: block; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -0.02em; text-transform: uppercase; line-height: 1; background: var(--grad-soft); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gl-kopf span { display: block; margin-top: 6px; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: #9d9b96; }
.gl-no { font-size: 11px !important; letter-spacing: .22em; color: #9d9b96 !important; margin: 0 !important; white-space: nowrap; }
.gl-no i { font-style: normal; color: #f4f2ee; }
.blatt.gaeste .gets { margin: 0; padding: 10px 28px 0; }
@media (min-width: 720px) { .blatt.gaeste .gets { padding: 12px 36px 0; } }
.blatt.gaeste .gets li { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 15px 0; font-size: 15.5px; border-top: 1px solid var(--line); }
.blatt.gaeste .gets li::before { display: none; }
.blatt.gaeste .gets li > span { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--c-text); align-self: baseline; }
.blatt.gaeste .gets li:first-child { border-top: 0; }
.blatt.gaeste .fields, .blatt.gaeste .done { padding: 6px 28px 32px; }
@media (min-width: 720px) { .blatt.gaeste .fields, .blatt.gaeste .done { padding: 8px 36px 40px; } }
.blatt.gaeste .field { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 16px 0 12px; border-top: 1px solid var(--line); border-bottom: 0; }
.blatt.gaeste .field + .field { margin-top: 0; }
.blatt.gaeste .field span { position: static; order: -1; transform: none !important; font-size: 10.5px; letter-spacing: .2em; color: var(--faint); }
.blatt.gaeste .field:focus-within span { color: var(--c-text); }
.blatt.gaeste .field input { padding: 0; font-size: clamp(1.05rem, 1.5vw, 1.25rem); border-bottom: 1px solid var(--line-strong); padding-bottom: 8px; }
.blatt.gaeste .field::after { display: none; }
.blatt.gaeste .check { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.blatt.gaeste .done .big { padding-top: 24px; }
/* the three phones stay below the logo */
@media (min-width: 1024px) { .hero-fan { width: 96%; bottom: -4%; } .fig.hero-fig { height: min(76svh, 740px); } }
@media (min-width: 1024px) and (max-height: 760px) { .hero-fan { width: 84%; bottom: -2%; } }
@media (max-width: 1023px) { .hero-fan { width: 96%; } }
/* Fassung 4p (Robert 18:55): two phones in a shallow V, a little smaller */
@media (min-width: 1024px) { .hero-fan { width: 82%; bottom: 0; } .fig.hero-fig { height: min(76svh, 740px); } }
@media (min-width: 1024px) and (max-height: 760px) { .hero-fan { width: 70%; } }
@media (max-width: 1023px) { .hero-fan { width: 88%; } }

/* Fassung 4r (Robert 19:10): the pair a little further left */
@media (min-width: 1024px) { .hero-fan { left: 42%; width: 84%; } }
@keyframes fan-rein { from { transform: translate3d(-50%, 12%, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* Fassung 4s (Robert 19:20): phones bigger, the top edge stays, they grow downwards and get cut by the section */
@media (min-width: 1024px) { .hero-fan { top: 13.3%; bottom: auto; width: 112%; } }
@media (min-width: 1024px) and (max-height: 760px) { .hero-fan { top: -13.4%; bottom: auto; width: 94%; } }
@media (max-width: 1023px) { .hero-fan { width: 100%; } }

/* Fassung 4t (Robert 19:30): the phones float in richly on load and lean towards the viewer under the mouse */
.fig.hero-fig { perspective: 1500px; }
@keyframes fan-rein2 { from { transform: translate3d(-50%, 24%, 0) rotateX(18deg) scale(.94); } to { transform: translate3d(-50%, 0, 0) rotateX(0deg) scale(1); } }
.hero-fan { animation: fan-rein2 2.6s cubic-bezier(.16, 1, .3, 1) .2s both; transform-origin: 50% 20%; }
.hero-fan .card { transition: transform 1.3s cubic-bezier(.22, 1, .36, 1); transform-origin: 50% 30%; }
.hero-fan:hover .card, .hero-fan.neigt .card { transform: rotateX(calc(9deg + var(--rx, 0deg))) rotateY(calc(-4deg + var(--ry, 0deg))) translateY(-1.2%) scale(1.02); }
@media (prefers-reduced-motion: reduce) { .hero-fan { animation: none !important; } .hero-fan .card { transform: none !important; } }
/* hover: lean the bottom towards the viewer around the top edge, the top edge stays where it is */
.hero-fan .card { transform-origin: 50% 0%; }
.hero-fan:hover .card, .hero-fan.neigt .card { transform: rotateX(calc(7deg + var(--rx, 0deg) * .5)) rotateY(calc(var(--ry, 0deg) * .5)); }

/* ======================= Fassung 4v (Robert 19:35: «zittrig, warten, gehen kurz runter, fliegen dann hoch») =======================
   One movement only, as a transition (never restarted): every piece comes up from below as soon as it enters the screen,
   grows from its bottom edge (so nothing dips), staggered lightly inside a group. No second stage, no scroll-coupled restart. */
[data-r], .nacheinander [data-r], [data-gruppe] [data-r] {
  animation: none !important;
  translate: 0 var(--weg, 96px); scale: var(--kl, .965); transform-origin: 50% 100%;
  transition: translate 1.9s var(--feder-leise), scale 1.9s var(--feder-leise);
  transition-delay: calc(var(--i, 0) * 90ms);
}
[data-r].da, .nacheinander [data-r].da, [data-gruppe] [data-r].da { translate: 0 0; scale: 1; animation: none !important; }
[data-r] { --weg: clamp(64px, 7vw, 104px); }
@media (max-width: 700px) { [data-r] { --weg: 48px; } }
.stk { --weg: 40px; --kl: .92; }
.st2, .lage { --weg: 48px; --kl: .97; }
.pola2 { --weg: 90px; --kl: .96; }
@media (prefers-reduced-motion: reduce) { [data-r], [data-r].da { translate: none !important; scale: none !important; transition: none !important; } }

/* ======================= Fassung 4w (Robert 19:50): each phone turns to face the viewer under the mouse ======================= */
.hero-fan { aspect-ratio: var(--ar, 1); }
.hero-fan .ph-frame { position: absolute; inset: 0; width: 100%; height: auto; display: block; pointer-events: none; }
/* only the phone itself takes the mouse: two hit areas, left and right half */
.hero-fan::before, .hero-fan::after { content: ""; position: absolute; top: 0; bottom: 0; width: 50%; }
.hero-fan::before { left: 0; } .hero-fan::after { right: 0; }
.hero-fan .card { display: none; }
.hero-fan:hover .card { transform: none; }

.hero-fan { --ar: 0.9403; }

/* ======================= Fassung 4y (Robert: «von ganz unten reingeschwebt, hochschweben bis in die Reihenposition», kein Nach-vorne-Drehen) ======================= */
@keyframes fan-rein3 { from { transform: translate3d(-50%, 100vh, 0); } to { transform: translate3d(-50%, 0, 0); } }
.hero-fan { animation: fan-rein3 2.8s cubic-bezier(.16, 1, .3, 1) .15s both; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: reduce) { .hero-fan { animation: none !important; } }

/* ======================= Fassung 4z (Robert: «Bilder warten, bis ich im Abschnitt bin» → früher los, kürzer, leichter) ======================= */
[data-r], .nacheinander [data-r], [data-gruppe] [data-r] { --weg: 72px; transition-duration: 1.35s, 1.35s; transition-delay: calc(var(--i, 0) * 70ms); }
.show.da .slide { transition-duration: 1s, .6s, 1.35s; transition-delay: 0s, 0s, calc(var(--i, 0) * 90ms); }
/* Phone show: the front phone comes first, then the pair behind it, then the outer pair (Robert 16.10., 21:25) */
.slide[data-d="0"] { --i: 0; } .slide[data-d="1"], .slide[data-d="-1"] { --i: 1; } .slide[data-d="2"], .slide[data-d="-2"] { --i: 2; }

/* Guest list: one line per row, the input carries none of its own (Robert 16.10., 21:28) */
.blatt.gaeste .field input { border-bottom: 0; padding-bottom: 0; }
/* 04: hovering a tab only lights it up, the pictures change on click */
.teil:hover::before { background: var(--grad); }
.teil:hover b { color: var(--bright); }

/* ======================= Fassung 5c (Robert 21:45: «edler reingeschwebt, alle von unten, wie beim Rivage, ohne starkes Federn») =======================
   Longer way, longer time, an ease that settles without bouncing. */
[data-r], .nacheinander [data-r], [data-gruppe] [data-r] { --weg: 120px; --kl: .975; transition: translate 1.7s var(--ease-film), scale 1.7s var(--ease-film); transition-delay: calc(var(--i, 0) * 80ms); }
.show.da .slide { transition: transform 1s var(--ease), opacity .6s var(--ease), translate 1.7s var(--ease-film); transition-delay: 0s, 0s, calc(var(--i, 0) * 100ms); }

/* ======================= Prüfung 16.10.2026, 22:30 (Vollprüfung vor Auslieferung) =======================
   Befunde der eigenen Prüfläufe (_qa/pruefung-1610): Polaroid-Beschriftungen liefen auf 320/375 px über den Rand,
   Tasten unter 44 px auf Touch-Geräten, auf 320 × 640 lag der erste Knopf 31 px unter dem ersten Bildschirm, Laufschrift lief trotz «Bewegung aus». */
@media (max-width: 480px) { .pola2 figcaption { font-size: 8px; letter-spacing: .12em; } }
@media (pointer: coarse) { .tab, .show .tab { height: 44px; } .btn.sm { height: 42px; } .contact a, .foot .legal a { display: inline-block; padding: 8px 0; margin: -8px 0; } }
@media (max-width: 360px) { .hero-logo img { height: 80px; } .hero-logo > span::before { top: 17px; } .hero2 { margin-top: -108px; padding-top: 108px; } .hero-text { padding-top: 6px; } .loud { font-size: clamp(2rem, 10.4vw, 2.3rem); } .hero-text .lead { font-size: .95rem; margin-top: 14px; } .hero-text .btns { margin-top: 18px; } .hero-oben { margin-bottom: 14px; } }
/* Fenster ohne Beschneiden (Bauart Grand Beau-Rivage, 11.10.2026, Safari: «Schatten kommen nicht hinterher, hängen im Fenster, schwarze Balken»).
   Safari schiebt das feste Bild und den Satz beim Scrollen selbst mit, den Ausschnitt (clip-path) aber erst einen Takt später. Jetzt beschneidet
   niemand mehr: Bild, Satz und Zeile liegen ganz unten (z-index −1), die deckenden Nachbarabschnitte verdecken sie, das Fenster selbst ist durchsichtig.
   Bedingung erfüllt: zwischen den beiden Fenstern liegen mehrere Bildschirme, die Nachbarn haben deckende Gründe. Aussehen gleich (Bildvergleich in _qa). */
.film { clip-path: none; overflow: visible; background: transparent; }
.film::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); }
.film .back, .film .mid, .film .cap { z-index: -1; }
main > section:not(.film), .mq, .foot { z-index: 1; }
/* Neigung: beim Scrollen sofort und ohne Nachziehen zurück (app.js setzt .ruhe für einen Takt) */
.kachel[data-tilt].ruhe .card { transition: none; }
/* Sticker: der Schatten steckt jetzt im Bild (media/st-*-s.webp, _bau/sticker_schatten.py), kein filter: drop-shadow mehr auf Stücken,
   die hereinschweben (WebKit am Handy rechnete den Schatten bei jedem Bild neu, Erfahrung GBR-Markenbuch 13.10.). Breiten um den Bildrand
   (28 px am Desktop, 17 px am Handy) hochgerechnet, Lagen um denselben Rand versetzt: der sichtbare Sticker steht, wo er stand. */
.stk { filter: none; }
.stk.s2 { width: 55.7%; right: calc(-18% - 28px); top: calc(6% - 28px); }
.stk.s3 { width: 29.6%; left: calc(-11% - 28px); bottom: calc(10% - 28px); }
.stk.s4 { width: 31.7%; right: calc(-9% - 28px); top: calc(-8% - 28px); }
.stk.s5 { width: 81.7%; left: calc(14% - 28px); bottom: calc(-9% - 28px); }
.stk.s6 { width: 20.7%; left: calc(-7% - 28px); top: calc(20% - 28px); }
.stk.s7 { width: 21.8%; right: calc(-8% - 28px); bottom: calc(14% - 28px); }
.stk.l1 { width: 38.8%; left: calc(62% - 28px); top: calc(-24% - 28px); }
.stk.l2 { width: 100.8%; left: -28px; bottom: calc(-24% - 28px); }
@media (max-width: 999px) { .stk.s4 { right: calc(-2% - 17px); top: calc(-8% - 17px); } .stk.s5 { width: 90.8%; left: calc(10% - 17px); bottom: calc(-7% - 17px); } .stk.s3 { left: calc(-3% - 17px); } .stk.s7 { right: calc(-3% - 17px); } .stk.l1 { width: 51.8%; left: calc(56% - 17px); top: calc(-14% - 17px); } }
/* Tastenreihe der Schau: bricht sie am Handy um, steht die zweite Zeile mittig statt links */
.show .tabs { justify-content: center; }
/* Fenster 2 «Built for people» (Robert 16.10., 23:02, Bildschirmfoto): ein Schatten über das ganze Bild, in der Mitte hinter dem Satz etwas tiefer. Liegt fest wie das Bild, bewegt sich nicht. */
.film.short .dim { background: radial-gradient(70% 62% at 50% 52%, rgba(11,11,12,.7), rgba(11,11,12,.56) 72%, rgba(11,11,12,.6)); }

/* ======================= Fassung 8 (17.10.2026): Hereinschweben wieder wie in 5c (Robert: «warten alle, bis ich komme … vorher viel geiler») ======================= */
/* Polaroids schnell nacheinander (Robert 16.10., 23:14) */
.polas2 [data-r] { transition-delay: calc(var(--i, 0) * 150ms); }
.polas2 [data-r].da img { animation-delay: calc(var(--i, 0) * 150ms); }

/* 03: Handys voll deckend, nicht durchscheinend auf dem hellen Grund (Robert 23:13: «gräulich») */
.slide[data-d="1"], .slide[data-d="-1"], .slide[data-d="2"], .slide[data-d="-2"] { --o: 1; }
@media (max-width: 999px) { .slide[data-d="1"], .slide[data-d="-1"] { --o: 1; } }

/* Fenster 1 wie Fenster 2: ein Schatten über das ganze Bild (Robert 23:13) */
.film .dim { background: radial-gradient(70% 62% at 50% 52%, rgba(11,11,12,.7), rgba(11,11,12,.56) 72%, rgba(11,11,12,.6)); }

/* Hero: ohne Drehen keine Trefferflächen mehr */
.hero-fan::before, .hero-fan::after { display: none; }

/* 02 Der Code, geschärft (Robert 23:14: «den Bereich noch geiler, cooler gestalten»): die Geschichte des Abschnitts wird sichtbar.
   Ein Licht auf dem Studioboden unter dem grossen Rücken, ein Sucher rastet auf den Code ein, das Licht läuft drüber, «connected»,
   dann läuft eine Linie von der Mitte zu den vier anderen Rücken. Alles transform, nichts liegt über einem bewegten Bild. */
.wand { position: relative; }
.wand::before { content: ""; position: absolute; left: 18%; right: 18%; bottom: -16%; height: 46%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(96,196,227,.16), rgba(235,89,134,.08) 55%, transparent 75%); }
.sucher { position: absolute; left: 38.5%; top: 43.8%; width: 33.5%; height: 27.6%; z-index: 2; pointer-events: none; transform: scale(1.5); }
.sucher i { position: absolute; width: 22%; height: 18%; border: 0 solid #f4f2ee; }
.sucher i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; border-top-left-radius: 8px; border-color: var(--cyan); }
.sucher i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; border-top-right-radius: 8px; border-color: var(--pink); }
.sucher i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; border-bottom-left-radius: 8px; border-color: var(--cyan); }
.sucher i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; border-bottom-right-radius: 8px; border-color: var(--pink); }
@keyframes sucher-rast { 0% { transform: scale(1.5); } 70% { transform: scale(.97); } 100% { transform: scale(1); } }
[data-scan].da .sucher { animation: sucher-rast 1.3s var(--schweb) calc(var(--i, 0) * 110ms + .9s) both; }
.wand-netz { position: relative; display: grid; grid-template-columns: 1fr 1fr 1.42fr 1fr 1fr; gap: 22px; height: 12px; margin-top: 46px; }
.wand-netz .nl { position: absolute; top: 5px; height: 1px; background: var(--grad); transform: scaleX(0); transition: transform 1.4s var(--schweb); }
.wand-netz .nl.l { left: 10%; right: 50%; transform-origin: right; }
.wand-netz .nl.r { left: 50%; right: 10%; transform-origin: left; }
.wand-netz i { justify-self: center; width: 11px; height: 11px; border-radius: 50%; background: var(--line-strong); position: relative; z-index: 1; }
.wand-netz i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--grad); transform: scale(0); transition: transform .6s var(--schweb); transition-delay: calc(var(--n) * 520ms); }
.wand-netz.an .nl { transform: none; }
.wand-netz.an i::after { transform: none; }
.wand-netz i.mitte::after { box-shadow: 0 0 0 6px rgba(96,196,227,.14); }
@media (max-width: 899px) { .wand-netz { display: none; } }
@media (prefers-reduced-motion: reduce) { .sucher { transform: none !important; animation: none !important; } .wand-netz .nl, .wand-netz i::after { transition: none !important; } }

/* Fenster: die Sätze schneller (Robert 17.10., 01:30) */
.film .dash { transition: transform .9s var(--ease-film); }
.film .roll .rc { transition: transform .62s var(--ease-film); }
.film .sub { transition: opacity 1.2s var(--ease-film) .32s, transform 1.2s var(--ease-film) .32s; }
.film .cap { transition: opacity 1s var(--ease-film) .55s; }

/* Laufband zwischen Fenster 2 und der Beta (Robert 17.10., 01:32: «dass es nicht Bild auf Bild ist») */
.mq.mq-zwei { position: relative; z-index: 2; }
.mq.mq-zwei .mq-track { animation-direction: reverse; }
/* Schau-Handys: gestaffelt von unten wie abgenommen, ohne Federn (Robert 17.10.: «kein Federn») */
.show.da .slide { animation: none; }

/* ======================= Fassung 13 (17.10.2026, 03:30): die ganze Seite wie der Abschnitt «Wer hier eintritt, soll verwöhnt werden» beim Grand Beau-Rivage =======================
   Robert: «Ich möchte, dass die ganze Seite so reingeflogen kommt wie dieser Abschnitt beim Rivage.» Werte 1:1 aus GBR main.css (Block «Bilder schweben wieder federnd herein»)
   und main.js (Gruppen starten gemeinsam und sofort am Rand +4 %, erst wenn die Bilder bereit sind): jedes Bild aus der Tiefe clamp(80px, 9vw, 140px), Massstab 0,93,
   in 2,1 s mit der Kurve des Hauses cubic-bezier(.28,1.42,.42,1); das Foto darin aus 1,12 zur Ruhe in 2,4 s cubic-bezier(.16,1,.3,1). Immer deckend. Nicht an die Scroll-Zeitachse gekoppelt. */
html body [data-r], html body [data-r].da, html body .nacheinander [data-r], html body .nacheinander [data-r].da, html body [data-gruppe] [data-r], html body [data-gruppe] [data-r].da { animation: none !important; opacity: 1; }
html body [data-r]:not(.da), html body .nacheinander [data-r]:not(.da), html body [data-gruppe] [data-r]:not(.da) { translate: 0 clamp(80px, 9vw, 140px); scale: .93; }
html body [data-r], html body .nacheinander [data-r], html body [data-gruppe] [data-r] { transform-origin: 50% 100%; transition: translate 2.1s cubic-bezier(.28, 1.42, .42, 1), scale 2.1s cubic-bezier(.28, 1.42, .42, 1) !important; transition-delay: 0s !important; }
html body [data-r].da, html body .nacheinander [data-r].da, html body [data-gruppe] [data-r].da { translate: none; scale: none; }
/* Text-Stücke (Stationen, Lagen): kürzerer Weg wie die Lauftexte beim Rivage */
html body .st2:not(.da), html body .lage:not(.da) { translate: 0 clamp(40px, 4.6vw, 70px); scale: 1; }
html body .st2, html body .lage { transition: translate 1.2s cubic-bezier(.16, 1, .3, 1) !important; }
/* das Foto: wie beim Rivage gemessen (#halle .hn-f img): startet bei 1,25, zoomt in 2,4 s auf 1,16 und gleitet danach mit dem Scrollen im Rahmen
   von +7 % auf −7 % (höchstens 58 px), über die ganze Strecke im Bild (GBR glZug). Die Ruhe-Vergrösserung 1,16 gibt dem Gleiten Platz, keine Kante. */
html body [data-r] .card > img:first-child { animation: none !important; translate: none; transform: scale(1.25); transition: transform 2.4s cubic-bezier(.16, 1, .3, 1); transition-delay: 0s; }
html body [data-r].da .card > img:first-child { transform: scale(1.16); }
@keyframes glZug { from { translate: 0 min(58px, 7%); } to { translate: 0 calc(-1 * min(58px, 7%)); } }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  html body [data-r] .card { view-timeline: --gl block; }
  html body [data-r] .card > img:first-child { animation: glZug linear both !important; animation-timeline: --gl !important; animation-range: cover 0% cover 100% !important; }
} }
/* Polaroids: das Foto sitzt im weissen Rand des Abzugs, es zoomt nur zur Ruhe und gleitet nicht */
html body .pola2 img { animation: none !important; translate: none; transform: scale(1.12); transition: transform 2.4s cubic-bezier(.16, 1, .3, 1); }
html body .pola2.da img { transform: none; }
/* Lauftexte wie beim Rivage: steigen auf, sobald sie im Fenster sind, deckend */
html body .rv { opacity: 1; transform: translate3d(0, clamp(40px, 4.6vw, 70px), 0); transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
html body .rv.on { transform: none; }
@media (prefers-reduced-motion: reduce) { html body [data-r], html body [data-r] .card > img:first-child, html body .pola2 img, html body .rv { translate: none !important; scale: none !important; transform: none !important; transition: none !important; } }

/* Reihenfolgen (Robert 17.10.): 01 von links nach rechts · 02 die Mitte zuerst, dann die daneben, dann die äusseren · 06 die Polaroids einzeln nacheinander.
   Bild und Foto-Zoom bekommen dieselbe Verzögerung, die Gruppe startet weiterhin gemeinsam am Rand. */
html body .stand [data-r], html body .stand [data-r] .card > img:first-child { transition-delay: calc(var(--i, 0) * 160ms) !important; }
html body .wand [data-r], html body .wand [data-r] .card > img:first-child { transition-delay: calc(var(--i, 0) * 260ms) !important; }
html body .polas2 [data-r], html body .polas2 [data-r] img { transition-delay: calc(var(--i, 0) * 240ms) !important; }

/* Fassung 16 (17.10.2026, Robert: «die Bilder rasten so komisch ein, zoomen so komisch rein, passt nicht mit dem Effekt»):
   Seit die Gruppen früher starten, sah man vom Flug vor allem das Ende: die Hauskurve schwingt ~10 px über das Ziel und rastet zurück, der Zoom lief 0,3 s länger
   als der Flug. Jetzt eine Bewegung aus einem Guss: Flug, Massstab und Foto-Zoom gleich lang (2,2 s), gleiche weiche Kurve ohne Überschwingen. */
html body [data-r], html body .nacheinander [data-r], html body [data-gruppe] [data-r] { transition: translate 2.2s cubic-bezier(.22, 1, .36, 1), scale 2.2s cubic-bezier(.22, 1, .36, 1) !important; }
html body [data-r] .card > img:first-child, html body .pola2 img { transition: transform 2.2s cubic-bezier(.22, 1, .36, 1); }

/* Feedback Marouan 19.10.2026 */
/* Logo: sitzt unter der Kopfzeile statt über ihrer Linie und läuft beim Scrollen hinter ihr weg; auf dem Handy kleiner */
.hero-logo { z-index: 30; margin-top: 18px; }
.hero-logo > span::before { display: none; }
@media (min-width: 640px) { .hero-logo { margin-top: 22px; } }
@media (min-width: 1024px) { .hero-logo { margin-top: 24px; } }
@media (max-width: 639px) { .hero-logo img { height: 76px; } .hero2 { margin-top: -56px; padding-top: 56px; } }
@media (max-width: 360px) { .hero-logo img { height: 66px; } .hero2 { margin-top: -48px; padding-top: 48px; } }
/* ohne den Satz unter dem Code steht der Status mittig daneben */
.hero-oben .hero-stand { white-space: normal; line-height: 1.5; }
/* Hinweis unter den App-Bildschirmen */
.render-hinweis { margin: 18px auto 0; max-width: 46ch; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* Nacht in drei Teilen auf dem Handy: die Gruppe über die ganze Breite, wie auf dem Rechner ein grosses und zwei kleine Bilder */
@media (max-width: 999px) {
  .gruppe { grid-template-columns: 1.5fr 1fr; gap: 12px; width: 100%; }
  .g-k:not(.gross) .card { position: relative; min-height: 0; }
  .g-k:not(.gross) .card > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}
/* Knopf-Beschriftung steht auch dann, wenn app.js (Buchstaben-Tausch) nicht geladen ist */
[data-bst]:empty::before { content: attr(data-bst); }

/* Prüfung 19.10.2026: Hinweis unter den Bildschirmen rückt an den Text (die fünf Texte liegen übereinander, der längste gibt die Höhe vor, kein fester Mindestwert mehr) */
.show .tab-text { display: grid; min-height: 0; }
.show .tab-text .tt { grid-area: 1 / 1; position: relative; top: auto; }
/* Prüfung 19.10.2026: niedriger Rechner-Bildschirm, Logo stösst nicht mehr ins Telefon */
@media (min-width: 1024px) and (max-height: 760px) { .hero-logo img { height: 100px; } .hero2 { margin-top: -130px; padding-top: 130px; } .hero-fan { top: 6%; width: 86%; } }

/* ===== Feedback Marouan 19.10.2026 abends (Handy) ===== */
/* 1. Die fünf Reiter unter den Bildschirmen in einer Reihe */
@media (max-width: 480px) {
  .show .tabs { flex-wrap: nowrap; gap: 0; padding: 4px; width: 100%; justify-content: space-between; }
  .show .tab { flex: 0 1 auto; min-width: 0; padding: 0 8px; font-size: 8.5px; letter-spacing: .08em; white-space: nowrap; }
}
@media (max-width: 360px) { .show .tab { padding: 0 6px; font-size: 7.5px; letter-spacing: .05em; } }
/* 2. Logo oben grösser (Marouan 20.10. nochmals), damit das kleine Logo im QR-Code nicht grösser wirkt */
@media (max-width: 639px) { .hero-logo img { height: 136px; } }
@media (max-width: 360px) { .hero-logo img { height: 116px; } }
/* 3. Handy: die Böden als flache Zeichnung statt als 3D-Fläche mit Maske (dieselben Linien, vorab berechnet: rotateX 72°, Perspektive 1000 px).
   Die 3D-Böden machten jeden Raum zu einer grossen eigenen Grafik-Ebene; acht davon brachten Safari auf dem iPhone zum Absturz. */
@media (max-width: 820px) {
  .hero-room, .bone-room { perspective: none; }
  .hero-room .floor, .bone-room .floor { left: 0; right: 0; top: 46%; bottom: 0; height: auto; max-height: none; transform: none;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'><path d='M0 12.8H1200M0 26.8H1200M0 41.9H1200M0 58.3H1200M0 76.3H1200M0 96.1H1200M0 117.9H1200M0 142.1H1200M0 169.2H1200M0 199.5H1200M0 233.8H1200M0 272.9H1200M0 317.9H1200M0 370.2H1200M0 431.8H1200M0 505.4H1200M0 594.8H1200M0 705.8H1200M0 847.2H1200M0 1033.7H1200M-29.0 0L-2352.0 1200M11.0 0L-2164.3 1200M51.0 0L-1976.6 1200M91.0 0L-1788.8 1200M131.0 0L-1601.1 1200M171.0 0L-1413.4 1200M211.0 0L-1225.7 1200M251.0 0L-1037.9 1200M291.0 0L-850.2 1200M331.0 0L-662.5 1200M371.0 0L-474.7 1200M411.0 0L-287.0 1200M451.0 0L-99.3 1200M491.0 0L88.4 1200M531.0 0L276.2 1200M571.0 0L463.9 1200M611.0 0L651.6 1200M651.0 0L839.4 1200M691.0 0L1027.1 1200M731.0 0L1214.8 1200M771.0 0L1402.5 1200M811.0 0L1590.3 1200M851.0 0L1778.0 1200M891.0 0L1965.7 1200M931.0 0L2153.5 1200M971.0 0L2341.2 1200M1011.0 0L2528.9 1200M1051.0 0L2716.6 1200M1091.0 0L2904.4 1200M1131.0 0L3092.1 1200M1171.0 0L3279.8 1200M1211.0 0L3467.6 1200' stroke='rgba(244,242,238,.09)' stroke-width='1' fill='none'/></svg>"); background-size: 1200px 1200px; background-position: center top; background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 110px); mask-image: linear-gradient(to bottom, transparent 0, #000 110px); }
  .hero-room.sec .floor { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'><path d='M0 12.8H1200M0 26.8H1200M0 41.9H1200M0 58.3H1200M0 76.3H1200M0 96.1H1200M0 117.9H1200M0 142.1H1200M0 169.2H1200M0 199.5H1200M0 233.8H1200M0 272.9H1200M0 317.9H1200M0 370.2H1200M0 431.8H1200M0 505.4H1200M0 594.8H1200M0 705.8H1200M0 847.2H1200M0 1033.7H1200M-29.0 0L-2352.0 1200M11.0 0L-2164.3 1200M51.0 0L-1976.6 1200M91.0 0L-1788.8 1200M131.0 0L-1601.1 1200M171.0 0L-1413.4 1200M211.0 0L-1225.7 1200M251.0 0L-1037.9 1200M291.0 0L-850.2 1200M331.0 0L-662.5 1200M371.0 0L-474.7 1200M411.0 0L-287.0 1200M451.0 0L-99.3 1200M491.0 0L88.4 1200M531.0 0L276.2 1200M571.0 0L463.9 1200M611.0 0L651.6 1200M651.0 0L839.4 1200M691.0 0L1027.1 1200M731.0 0L1214.8 1200M771.0 0L1402.5 1200M811.0 0L1590.3 1200M851.0 0L1778.0 1200M891.0 0L1965.7 1200M931.0 0L2153.5 1200M971.0 0L2341.2 1200M1011.0 0L2528.9 1200M1051.0 0L2716.6 1200M1091.0 0L2904.4 1200M1131.0 0L3092.1 1200M1171.0 0L3279.8 1200M1211.0 0L3467.6 1200' stroke='rgba(244,242,238,.06)' stroke-width='1' fill='none'/></svg>"); }
  .bone-room .floor { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'><path d='M0 12.8H1200M0 26.8H1200M0 41.9H1200M0 58.3H1200M0 76.3H1200M0 96.1H1200M0 117.9H1200M0 142.1H1200M0 169.2H1200M0 199.5H1200M0 233.8H1200M0 272.9H1200M0 317.9H1200M0 370.2H1200M0 431.8H1200M0 505.4H1200M0 594.8H1200M0 705.8H1200M0 847.2H1200M0 1033.7H1200M-29.0 0L-2352.0 1200M11.0 0L-2164.3 1200M51.0 0L-1976.6 1200M91.0 0L-1788.8 1200M131.0 0L-1601.1 1200M171.0 0L-1413.4 1200M211.0 0L-1225.7 1200M251.0 0L-1037.9 1200M291.0 0L-850.2 1200M331.0 0L-662.5 1200M371.0 0L-474.7 1200M411.0 0L-287.0 1200M451.0 0L-99.3 1200M491.0 0L88.4 1200M531.0 0L276.2 1200M571.0 0L463.9 1200M611.0 0L651.6 1200M651.0 0L839.4 1200M691.0 0L1027.1 1200M731.0 0L1214.8 1200M771.0 0L1402.5 1200M811.0 0L1590.3 1200M851.0 0L1778.0 1200M891.0 0L1965.7 1200M931.0 0L2153.5 1200M971.0 0L2341.2 1200M1011.0 0L2528.9 1200M1051.0 0L2716.6 1200M1091.0 0L2904.4 1200M1131.0 0L3092.1 1200M1171.0 0L3279.8 1200M1211.0 0L3467.6 1200' stroke='rgba(11,11,12,.045)' stroke-width='1' fill='none'/></svg>"); }
}