/* Teaser site. Each part carries its own rules for narrow screens: up to 860 px one column, up to 560 px phones. */
@font-face { font-family: 'Andada-Regular'; src: url('fonts/Andada-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'OpticianSans-Regular'; src: url('fonts/Optician-Sans.woff2') format('woff2'); font-display: swap; }

:root {
  --ink: #1e1a16;
  --muted: #574f46;
  --paper: #fbf8f1;
  --ground: #f3eee3;
  --line: rgba(30, 26, 22, 0.16);
  --serif: 'Andada-Regular', Georgia, 'Times New Roman', serif;
  --sans: 'OpticianSans-Regular', system-ui, sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Page margin: clear of a phone's notch and round corners when it lies on its side */
  --gutter: max(clamp(18px, 4vw, 40px), env(safe-area-inset-left), env(safe-area-inset-right));
  --wrap: min(1120px, 100% - 2 * var(--gutter));
  /* Smallest height of anything to tap */
  --tap: 44px;
  /* Corner radius of a card: 3 mm on 63.5 × 88.9 mm */
  --card-r: 4.7% / 3.4%;
  --shadow: 0 0 0 0.5px rgba(30, 26, 22, 0.2), 0 1px 2px rgba(30, 26, 22, 0.1), 0 10px 22px -12px rgba(30, 26, 22, 0.32);
  /* Fish scales of the card faces, as the page ground */
  --scales: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cg stroke='%231e1a16' stroke-opacity='.075' stroke-width='.3' fill='none'%3E%3Cpath d='M0,0A5,5 0 0 0 10,0M-5,5A5,5 0 0 0 5,5M5,5A5,5 0 0 0 15,5'/%3E%3C/g%3E%3Cg fill='%231e1a16' fill-opacity='.07'%3E%3Ccircle cx='5' cy='2.25' r='.42'/%3E%3Ccircle cx='0' cy='7.25' r='.42'/%3E%3Ccircle cx='10' cy='7.25' r='.42'/%3E%3C/g%3E%3C/svg%3E");
}

/* Base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--ground) var(--scales) 0 0 / 26px 26px; color: var(--ink); font: 18px/1.6 var(--serif);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-weight: normal; margin: 0; line-height: 1.1; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
/* No grey tap box over rounded cards and buttons, no double-tap zoom on quick taps */
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.wrap { width: var(--wrap); margin-inline: auto; }
@media (max-width: 560px) { body { font-size: 17px; } }

/* Short labels: Optician Sans only has capitals, so these stay in the text face */
.label { font-size: 15px; line-height: 1.2; }
/* Two-colored lozenge as on the card pips */
.gem { display: inline-block; width: 0.62em; height: 0.92em; flex: none; vertical-align: -0.1em;
  background: linear-gradient(90deg, var(--c1, var(--A)) 50%, var(--c2, var(--E)) 50%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
/* Buttons with the card's corner radius and frame line */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 13px 24px; border-radius: 5px; border: 1.5px solid var(--ink);
  cursor: pointer; text-decoration: none; font-size: 17px; line-height: 1; background: var(--paper); transition: background 0.2s, color 0.2s; }
.btn.primary { color: var(--paper); background: var(--ink); }
@media (hover: hover) {
  .btn:hover { color: var(--paper); background: var(--ink); }
  .btn.primary:hover { background: #3a322b; }
}
.btn .play-icon { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
@media (max-width: 560px) { .btn { padding: 12px 20px; font-size: 16px; } }

/* Header: scrolls away with the page */
.top { position: absolute; inset: 0 0 auto; z-index: 20; padding-top: env(safe-area-inset-top); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); font-size: 21px; text-decoration: none; }
.top nav { display: flex; gap: clamp(14px, 2.6vw, 30px); }
/* The line under a link grows on hover; it sits just below the text, whatever the link's height */
.top nav a { display: flex; align-items: center; min-height: var(--tap); text-decoration: none; white-space: nowrap;
  background: linear-gradient(var(--ink), var(--ink)) 0 calc(50% + 0.85em) / 0 1px no-repeat; transition: background-size 0.35s var(--ease); }
@media (hover: hover) { .top nav a:hover { background-size: 100% 1px; } }
/* Phones: the name is the headline right below, so the row goes to the links */
@media (max-width: 640px) {
  .top .brand { display: none; }
  .top nav { flex: 1; justify-content: space-between; gap: 8px; font-size: clamp(14px, 4.2vw, 16px); }
}

/* Hero */
/* The hero fills the first screen: the next section starts below it at any window size. Clipped at the sides, where the
   fan and the band run out of the window. */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding: 90px 0 60px; isolation: isolate; overflow-x: clip; }
/* The band runs on below the hero and fades out there */
.band-clip { position: absolute; inset: 0 0 -40% 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 92%); mask-image: linear-gradient(to bottom, #000 58%, transparent 92%); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: center; }
.hero-text { position: relative; z-index: 2; }
h1 { font-size: clamp(56px, 7.6vw, 104px); letter-spacing: -0.015em; margin: 0 0 18px -0.02em; }
.lead { font-size: clamp(19px, 2.1vw, 23px); max-width: 25em; color: #2e2822; }
.facts { color: var(--muted); font-size: 17px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
@media (max-width: 860px) {
  .hero { padding: 92px 0 30px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 6px; }
  .actions { margin-bottom: 26px; }
}
@media (max-width: 560px) {
  .hero { padding: calc(76px + env(safe-area-inset-top)) 0 4px; }
  h1 { margin-bottom: 12px; }
  .lead { font-size: 18px; }
  .facts { font-size: 15px; }
  .actions { margin: 20px 0 18px; }
}

/* The ribbon of the card faces: checker squares and a chain of lozenges, crossing the hero at the cards' angle */
.band { position: absolute; left: 50%; top: 50%; z-index: -1; width: 2600px; height: 74px; pointer-events: none;
  transform: translate(-50%, -50%) translate(var(--band-x, 22vw), var(--band-y, 11vw)) rotate(-23.68deg) scale(var(--band-s, 1.15)); opacity: 0.95; }
/* Long enough that neither end shows in windows up to about 4000 px */
.hero .band { top: 29%; width: 6000px; }
/* Narrower two-column layouts: lower, so it passes below the button and behind the fan instead of behind the text */
@media (min-width: 861px) and (max-width: 1200px) { .hero .band { top: 45%; } }
@media (max-width: 860px) { .hero .band { --band-x: 0px; --band-y: 0px; top: 52%; --band-s: 0.9; } }

/* Fan of cards in the hero. --w: width of a card */
/* Shifted right, so its left cards keep clear of the text */
.fan-wrap { position: relative; left: 5vw; }
.fan { --w: clamp(160px, 21vw, 300px); position: relative; height: clamp(400px, 52vw, 680px); perspective: 1400px; }
.fan-tilt { position: absolute; inset: 0; transition: transform 0.6s var(--ease);
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); }
.fan .card { position: absolute; left: 50%; bottom: 8%; width: var(--w); margin-left: calc(var(--w) / -2);
  transform-origin: 50% 135%; transform: rotate(0deg) translateY(0); transition: transform 0.9s var(--ease); }
.fan.dealt .card { transform: rotate(var(--a)) translateY(var(--lift, 0%)); transition-delay: var(--d); }
.fan.dealt.settled .card { transition-delay: 0s; transition-duration: 0.45s; }
@media (hover: hover) { .fan.settled .card:hover { --lift: -7%; } }
@media (max-width: 860px) {
  .fan-wrap { left: 0; }
  .fan { --w: clamp(124px, 36vw, 200px); height: clamp(280px, 80vw, 440px); }
}
/* Phones: right under the text, the cards as large as the width allows */
@media (max-width: 560px) {
  .fan { --w: 40vw; height: 70vw; }
  .fan .card { bottom: 4%; }
}

/* A card: front and back, a sheen that follows the pointer. flipCard() turns it edge-on and swaps the faces, so the
   flip doesn't depend on backface-visibility, which Chromium ignores during the animation next to the blended sheen. */
.card { aspect-ratio: 420 / 588; border-radius: var(--card-r); perspective: 1400px; }
.card .flip { display: block; position: relative; width: 100%; height: 100%; border-radius: inherit; }
/* No image menu on a long press, no dragging the picture out of the card */
.card .face { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; box-shadow: var(--shadow); background: var(--paper);
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.card .back, .card.flipped .front { visibility: hidden; }
.card.flipped .back { visibility: visible; }
.card .gloss { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: soft-light; opacity: 0;
  transition: opacity 0.4s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 48%),
    linear-gradient(calc(110deg + var(--sx, 0) * 30deg), transparent 30%, rgba(255, 236, 200, 0.55) 46%, rgba(190, 225, 255, 0.5) 54%, transparent 70%); }
.card.lit .gloss { opacity: 1; }
button.card { display: block; padding: 0; border: 0; background: none; cursor: pointer; }

/* Sections */
section { position: relative; padding: clamp(56px, 10vw, 130px) 0; }
.head { max-width: 640px; margin-bottom: clamp(26px, 5vw, 54px); }
h2 { font-size: clamp(36px, 5.4vw, 60px); letter-spacing: -0.01em; margin-bottom: 18px; }
.head p { font-size: 19px; color: #2e2822; max-width: 34em; }
@media (max-width: 560px) { .head p { font-size: 17px; } }
/* A light panel with round corners and a soft shadow */
.panel { background: rgba(251, 248, 241, 0.78); border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -40px rgba(30, 26, 22, 0.35); }
/* Section layouts: centered, narrow text */
.center .head { margin-inline: auto; text-align: center; }
.center .head p { margin-inline: auto; text-wrap: balance; }
.narrow .wrap { max-width: 34em; text-align: center; }
.narrow .head { margin: 0; }
.narrow .head p { text-wrap: balance; }
/* A row of the card's dots, as a short divider */
.narrow .wrap::before { content: ''; display: block; width: 90px; height: 6px; margin: 0 auto 34px;
  background: radial-gradient(circle, var(--ink) 1.6px, transparent 2px) 0 0 / 9px 6px; }

/* Reading a card */
#karte { overflow: hidden; }
.anatomy { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
/* --w: card width; it reaches a little past the content's right edge, the window cuts it on narrow screens */
.anatomy-card { --w: min(54vw, 680px); position: relative; width: var(--w); justify-self: end; margin-right: calc(var(--w) * -0.12); transform: rotate(4deg); }
.anatomy-card .card { width: 100%; }
/* The card as SVG (site.js). Over it, on a layer of its own, a fine ring on the index glyph of the hovered or tapped
   point, gliding between them: moving it leaves the card with its grain filter as painted. */
.anatomy-card .face { overflow: hidden; }
.anatomy-card .face svg, .anatomy-card .face img { display: block; width: 100%; height: 100%; }
.anatomy-card .mark-layer { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.anatomy-card .mark { transition: transform 0.55s var(--ease); }
.anatomy-card .mark circle { fill: none; stroke: var(--ring, var(--ink)); stroke-width: var(--ring-width, 0.45); opacity: 0; transition: opacity 0.3s; }
.anatomy-card .mark.shown circle { opacity: 1; }
/* Hit areas over the three elements */
.spot { position: absolute; width: 15%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: none; }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.points li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; cursor: pointer; opacity: 0.6; transition: opacity 0.3s; }
.points li.on { opacity: 1; }
@media (hover: hover) { .points li:hover { opacity: 1; } }
.points .key { font: 34px/1 var(--sans); padding-top: 2px; }
.points h3 { font-size: 22px; margin: 0 0 6px; }
.points p { margin: 0; color: #3a332c; font-size: 17px; }
.key u { text-decoration-thickness: 2px; text-underline-offset: 5px; }
/* One column: heading, card, points. The card is large, so its index is easy to read and tap, runs off the right edge
   and shows only its top, where all three marks are, fading out below them: a mark and its text fit on one screen. */
@media (max-width: 860px) {
  .anatomy { grid-template-columns: 1fr; gap: 0; }
  .anatomy-text { display: contents; }
  .anatomy-card { --w: min(120vw, 640px); order: 1; margin: 0 calc(-1 * var(--gutter) - var(--w) * 0.24) calc(var(--w) * -0.8) 0; transform: rotate(2deg);
    -webkit-mask-image: linear-gradient(#000 34%, transparent 44%); mask-image: linear-gradient(#000 34%, transparent 44%); }
  .points { order: 2; position: relative; }
}
/* Phones: card and the selected text on one screen; the other points show their titles only, each a row tall enough to tap */
@media (max-width: 560px) {
  .points { gap: 2px; }
  .points li { grid-template-columns: 34px 1fr; gap: 10px; min-height: var(--tap); padding: 6px 0; }
  .points li:not(.on) { align-items: center; }
  .points li:not(.on) p { display: none; }
  .points li:not(.on) h3 { margin: 0; }
  .points .key { font-size: 28px; }
  .points h3 { font-size: 19px; margin-top: 4px; }
  .points p { font-size: 16px; }
}

/* Choices as underlined words (game, view of the box) */
.picker { display: flex; flex-wrap: wrap; gap: 0 22px; align-items: center; }
.pill { min-height: var(--tap); padding: 0; border: 0; background: none; cursor: pointer; font-size: 18px; line-height: 1.2; color: var(--muted);
  text-decoration: underline transparent 2px; text-underline-offset: 6px; transition: color 0.2s, text-decoration-color 0.2s; }
@media (hover: hover) { .pill:hover { color: var(--ink); } }
.pill[aria-pressed="true"] { color: var(--ink); text-decoration-color: currentColor; }
.center .picker { justify-content: center; }
.series { display: inline-flex; gap: 4px; margin-left: 2px; }
.series button { width: var(--tap); height: var(--tap); border-radius: 50%; border: 0; padding: 0; cursor: pointer; font: 16px/1 var(--sans); background: none;
  display: grid; place-items: center; position: relative; color: var(--ink); }
.series button::before { content: ''; position: absolute; inset: 9px 12px; background: var(--c); opacity: 0.35; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transition: opacity 0.2s, inset 0.2s; }
.series button span { position: relative; }
.series button[aria-pressed="true"]::before { opacity: 1; inset: 5px 9px; }
.series[hidden] { display: none; }
.trumps { color: var(--muted); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trumps b { font: 17px/1 var(--sans); letter-spacing: 0.08em; color: var(--ink); font-weight: normal; }
@media (max-width: 560px) {
  .picker { column-gap: 18px; }
  .pill { font-size: 17px; }
}

/* Who takes the trick */
.table-top { display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: center; justify-content: space-between; margin-bottom: clamp(10px, 3vw, 28px); }
.score { color: var(--muted); margin: 0; }
.score b { font-weight: normal; color: var(--ink); font-variant-numeric: tabular-nums; }
.rulebox { max-width: 640px; margin: 0 auto clamp(18px, 3vw, 30px); color: #3a332c; font-size: 16px; text-align: center; text-wrap: balance; }
.trick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 2.4vw, 28px); max-width: 960px; margin: 0 auto; }
.trick .seat { display: grid; gap: 12px; justify-items: center; }
.trick .seat .label { color: var(--muted); font-size: 14px; }
.trick .card { width: 100%; transition: transform 0.35s var(--ease), opacity 0.35s, filter 0.35s; }
.trick .card .face { transition: box-shadow 0.35s; }
.trick .deal { animation: deal 0.6s var(--ease) backwards; animation-delay: var(--d); }
@keyframes deal { from { transform: translateY(-40px) rotate(-6deg); opacity: 0; } }
@media (hover: hover) { .trick:not(.done) .card:hover { transform: translateY(-8px); } }
.trick.done .card { cursor: default; }
.trick.done .card:not(.win) { opacity: 0.55; filter: saturate(0.6); }
.trick .card.win { transform: translateY(-10px) scale(1.03); }
.trick .card.win .face { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink), 0 0 34px 6px rgba(255, 214, 120, 0.55), var(--shadow); }
.trick .card.wrong { animation: shake 0.45s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
/* scroll-margin: site.js scrolls trick and answer into view, with some air around them */
.trick, .verdict { scroll-margin: 20px; }
.verdict { min-height: 5.2em; max-width: 640px; margin: clamp(16px, 3vw, 34px) auto 0; text-align: center; }
.verdict .result { font-size: clamp(22px, 4vw, 26px); margin-bottom: 6px; text-wrap: balance; }
.verdict p { color: #3a332c; margin-bottom: 18px; }
.verdict .ask { color: var(--muted); }
/* Phones: two rows of two, the cards large enough to read. On short screens they shrink, so the trick and the answer
   below it fit on one screen. */
@media (max-width: 560px) {
  .rulebox { font-size: 15px; }
  .trick { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: min(300px, 44vh); max-width: min(300px, 44svh); gap: 10px 14px; }
  .trick .seat { gap: 6px; }
  .verdict { min-height: 0; }
}

/* The whole deck */
.deck-controls { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-bottom: 14px; }
.deck-note { color: var(--muted); min-height: 1.6em; margin-bottom: clamp(20px, 3vw, 30px); }
.deck { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 16px); }
.slot { position: relative; }
.slot .card { width: 100%; transition: opacity 0.45s, filter 0.45s, transform 0.3s var(--ease); }
@media (hover: hover) { .slot .card:hover { transform: translateY(-5px); } }
.deck.game .slot:not(.trump) .card { opacity: 0.5; filter: saturate(0.55); }
.badge { position: absolute; z-index: 2; top: -9px; left: -7px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; display: grid; place-items: center;
  font: 14px/1 var(--sans); background: var(--ink); color: var(--paper); box-shadow: 0 0 0 2px var(--paper);
  transform: scale(0); transition: transform 0.35s var(--ease); pointer-events: none; }
.deck.game .slot.trump .badge { transform: scale(1); transition-delay: calc(var(--i) * 25ms + 250ms); }
@media (max-width: 760px) { .deck { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .deck-note { font-size: 15px; }
  .badge { min-width: 22px; height: 22px; font-size: 12px; top: -7px; left: -5px; }
}

/* The box in 3D (site/box.js): planes placed by matrix3d, shaded through --s */
.box3d { padding: clamp(10px, 2vw, 22px); }
.box-steps { margin-bottom: clamp(6px, 2vw, 16px); }
/* Never taller than the screen (a phone on its side). A sideways drag turns the box, the page still scrolls and zooms. */
.box-stage { position: relative; height: min(clamp(300px, 50vw, 580px), 80vh); height: min(clamp(300px, 50vw, 580px), 80svh); overflow: hidden; border-radius: 14px;
  cursor: grab; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.box-stage.dragging { cursor: grabbing; }
.box-stage .scene { --S: 8; position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; pointer-events: none; }
.box-stage .q { position: absolute; left: 0; top: 0; transform-origin: 0 0; backface-visibility: hidden; }
.box-stage .q::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgb(46 32 18 / var(--s, 0)); }
/* Soft edge from a static shadow, not a blur filter, which would be redrawn every frame */
.box-stage .q.sh { background: rgb(30 26 22 / 0.2); border-radius: calc(5px * var(--S)); box-shadow: 0 0 calc(7.5px * var(--S)) calc(3.75px * var(--S)) rgb(30 26 22 / 0.2);
  backface-visibility: visible; }
.box-stage .q.sh::after { display: none; }
/* A lying card's shadow: the card's size, just off its edge; box.js fades it into the soft one as the card rises */
.box-stage .q.sh.tight { background: rgb(30 26 22 / 0.13); border-radius: 4.7% / 3.4%; box-shadow: 0 0 calc(1.25px * var(--S)) rgb(30 26 22 / 0.1); }
.box-hint { color: var(--muted); font-size: 15px; text-align: center; margin: 10px 0 0; text-wrap: balance; }
@media (max-width: 560px) { .box-hint { font-size: 14px; margin-bottom: 6px; } }

/* Video */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #ece5d6 var(--scales) 0 0 / 30px 30px;
  box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -50px rgba(30, 26, 22, 0.55); isolation: isolate; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video .band { --band-x: 0px; --band-y: 0px; --band-s: 0.8; opacity: 0.55; }
.video .poster { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 18px; text-align: center; border: 0; padding: 20px;
  width: 100%; background: radial-gradient(50% 60% at 50% 50%, rgba(251, 248, 241, 0.95), rgba(251, 248, 241, 0.2)); cursor: pointer; }
.play { position: relative; width: clamp(74px, 10vw, 104px); aspect-ratio: 5 / 7; display: grid; place-items: center; transition: transform 0.4s var(--ease); }
.play::before { content: ''; position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: linear-gradient(90deg, var(--A) 50%, var(--E) 50%); }
.play::after { content: ''; position: absolute; inset: 31% 18%; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 2px var(--ink); }
.play i { position: relative; z-index: 1; margin-left: 4px; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--ink); }
@media (hover: hover) { .video .poster:hover .play { transform: scale(1.07); } }
.video .poster strong { font-weight: normal; font-size: clamp(22px, 3vw, 30px); }
.video .poster small { color: var(--muted); }
@media (max-width: 560px) { .video { aspect-ratio: 4 / 3; border-radius: 18px; } }

/* Numbers */
.numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.numbers div { padding: clamp(18px, 3vw, 30px) 16px; text-align: center; }
.numbers b { display: block; font: clamp(44px, 6vw, 72px)/1 var(--sans); font-weight: normal; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.numbers span { color: var(--muted); font-size: 16px; }
@media (max-width: 760px) { .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .numbers { gap: 0; }
  .numbers div { padding: 18px 10px; }
  .numbers b { font-size: 40px; margin-bottom: 6px; }
  .numbers span { font-size: 15px; }
}

/* Mailing list */
.signup { max-width: 760px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(18px, 5vw, 56px); text-align: center; position: relative; overflow: hidden; }
.signup h2 { margin-bottom: 14px; }
.signup > p { color: #3a332c; max-width: 30em; margin-inline: auto; }
.signup form { display: flex; max-width: 520px; margin: 26px auto 14px; border: 1.5px solid var(--ink); border-radius: 5px; background: var(--paper); overflow: hidden; }
.signup form:focus-within { box-shadow: inset 0 0 0 1px var(--ink); }
/* 18 px: below 16 px iOS zooms into a focused field */
.signup input[type=email] { flex: 1; min-width: 0; border: 0; background: none; padding: 0 14px; font: 18px var(--serif); color: var(--ink); outline: none; }
.signup input::placeholder { color: #8a8075; }
.signup .btn { flex: none; border: 0; border-radius: 0; }
.signup .trap { position: absolute; left: -9999px; }
.signup small { display: block; color: var(--muted); font-size: 15px; max-width: 32em; margin: 0 auto; }
.signup .done-msg { font-size: 22px; margin: 26px 0 8px; }
@media (max-width: 520px) {
  .signup form { flex-direction: column; }
  .signup input[type=email] { padding: 12px 14px; text-align: center; }
  .signup .btn { justify-content: center; border-top: 1.5px solid var(--ink); }
}

/* Footer */
footer { padding: 40px 0 calc(40px + env(safe-area-inset-bottom)); color: var(--muted); border-top: 1px solid var(--line); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 0 30px; justify-content: space-between; align-items: center; }
footer .brand { color: var(--ink); }
footer a:not(.brand) { display: inline-block; padding: 9px 0; text-underline-offset: 3px; }
@media (max-width: 700px) {
  footer { padding-top: 26px; }
  footer .wrap { flex-direction: column; align-items: flex-start; }
}

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 30; width: max-content; max-width: calc(100% - 2 * var(--gutter)); padding: 12px 22px;
  border-radius: 5px; background: var(--ink); color: var(--paper); font-size: 16px; text-align: center; transform: translate(-50%, 200%); visibility: hidden;
  transition: transform 0.45s var(--ease), visibility 0s 0.45s; pointer-events: none; }
.toast.show { transform: translate(-50%, 0); visibility: visible; transition: transform 0.45s var(--ease); }

/* Legal page (rechtliches.html) */
.legal { max-width: 720px; margin: clamp(18px, 4vw, 40px) auto; padding: clamp(22px, 5vw, 56px); overflow-wrap: break-word; }
.legal h2 { font-size: clamp(30px, 4.4vw, 44px); margin-top: 1.4em; }
.legal h2:first-of-type { margin-top: 0.8em; }
.legal h3 { font-size: 22px; margin: 1.4em 0 0.4em; }
.legal p:last-child { margin-bottom: 0; }
.legal p a { text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}