/* BDX Experience – the production binder. One face, brand inks, paper with real edges. */

@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/hanken-grotesk-latin-400-italic.woff2") format("woff2"); }

:root {
  /* inks */
  --ink: #0E0F11;
  --ink-soft: #3E4044;
  --paper: #EDECE7;
  --paper-2: #E1E0DA;
  --paper-3: #D5D4CD;
  --graphite: #232428;
  --graphite-2: #2F3035;
  --stone: #A9A9B0;
  --paper-dark: #CFCDC5;
  --brass: #D8BD8A;
  --bronze: #7A5B28;
  --on-dark: #EDECE7;
  --on-dark-soft: #C9C8C2;

  /* type: five steps */
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.125rem, 1rem + 3.3vw, 4rem);
  --step-display: clamp(3.75rem, 0.6rem + 8.2vw, 8rem);

  /* frame */
  --margin: clamp(16px, 2.2vw, 32px);
  --folder-inset: 7vw;
  --gap: clamp(16px, 1.6vw, 24px);
  --section: clamp(88px, 9vw, 150px);

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --stagger-item: 70ms;

  color-scheme: dark;
  accent-color: var(--bronze);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ink);
  color: var(--on-dark);
  font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--step-body);
  line-height: 1.45;
  letter-spacing: -0.005em;
  font-feature-settings: "kern", "liga";
  overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
::selection { background: var(--brass); color: var(--ink); }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
/* on light grounds the focus ring turns ink */
.sheet-front :focus-visible, .menu :focus-visible, .terms :focus-visible, .letter :focus-visible, .guests__card :focus-visible, .coupon :focus-visible,
.section--paper :focus-visible, .section--paperdark :focus-visible, .section--stone :focus-visible, .file--paper :focus-visible, .file--stone :focus-visible, .file--paperdark :focus-visible { outline-color: var(--ink); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--margin); top: -80px; z-index: 50; background: var(--brass); color: var(--ink); padding: 12px 18px; text-decoration: none; font-weight: 500; }
.skip:focus { top: 12px; }

.tnum { font-variant-numeric: tabular-nums; }
.head { font-size: var(--step-head); font-weight: 500; line-height: 0.92; letter-spacing: -0.04em; text-wrap: balance; }
.lead { font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.01em; text-wrap: pretty; }
p { text-wrap: pretty; }
.small { font-size: var(--step-small); }

/* buttons: one shape, square, flat */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 52px; padding: 0 24px;
  background: var(--ink); color: var(--paper);
  border: 0; border-radius: 0; cursor: pointer;
  font-size: var(--step-body); font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.button:active { transform: scale(0.97); }
.button svg { width: 18px; height: 18px; flex: none; transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--bronze); color: var(--paper); }
  .button:hover svg { transform: translateX(4px); }
}
.link { text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.22em; text-decoration-color: currentColor; transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: var(--brass); } }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; background: var(--ink); padding-top: 22px; }
.topbar { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--margin); min-height: 56px; }
.topbar__logo { grid-column: 2; display: block; width: clamp(150px, 13vw, 200px); }
.topbar__logo img { width: 100%; }
.topbar__link { grid-column: 3; justify-self: end; font-size: var(--step-body); font-weight: 500; text-decoration: none; padding: 10px 0; }
@media (hover: hover) and (pointer: fine) { .topbar__link:hover { color: var(--brass); } }
/* language switch DE | EN: label size, quiet; the language you are reading is the brighter one */
.topbar__end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: clamp(18px, 2vw, 32px); }
.lang { display: flex; align-items: center; gap: 2px; font-size: var(--step-small); font-weight: 500; letter-spacing: 0.04em; color: var(--on-dark-soft); }
.lang a { text-decoration: none; padding: 10px 4px; color: var(--on-dark-soft); transition: color var(--t-hover) ease; }
.lang a[aria-current] { color: var(--on-dark); text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.3em; }
.lang__sep { opacity: 0.55; }
@media (hover: hover) and (pointer: fine) { .lang a:hover { color: var(--brass); } }
.footer__end { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.footer__row .lang { gap: 2px; }
.footer__row .lang a { padding: 0 4px; }

.hero__title { margin-top: clamp(24px, 2.6vw, 40px); text-align: center; padding: 0 var(--margin); }
.hero__title h1 { font-size: var(--step-display); font-weight: 500; line-height: 0.9; letter-spacing: -0.04em; }
.hero__title h1 .line { display: inline-block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; vertical-align: top; }
.hero__title h1 .line > span { display: inline-block; }
.hero__sub { max-width: 46ch; margin: clamp(16px, 1.8vw, 28px) auto 0; font-size: var(--step-lead); line-height: 1.3; color: var(--on-dark); }

/* the folder stack */
.binder { position: relative; margin-top: clamp(32px, 3vw, 44px); }
.folders { position: relative; height: calc(4 * var(--fold-step)); --fold-step: clamp(28px, 2.3vw, 34px); }
.folder {
  position: absolute; left: var(--folder-inset); right: var(--folder-inset);
  height: calc(var(--fold-step) + 40px);
  background: var(--fc); color: var(--fi);
}
.folder:nth-child(1) { top: 0; }
.folder:nth-child(2) { top: calc(1 * var(--fold-step)); }
.folder:nth-child(3) { top: calc(2 * var(--fold-step)); }
.folder:nth-child(4) { top: calc(3 * var(--fold-step)); }
.tab {
  position: absolute; bottom: 100%; left: var(--tx);
  display: flex; align-items: center; height: 40px; padding: 0 30px;
  background: var(--fc); color: var(--fi);
  font-size: var(--step-body); font-weight: 500; text-decoration: none; white-space: nowrap;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 100%, 0 100%);
  transition: transform var(--t-ui) var(--ease-out);
}
.folder > .tab { bottom: auto; top: -40px; }
@media (hover: hover) and (pointer: fine) { .tab:hover { transform: translateY(-6px); } }
.tab:focus-visible { outline-offset: -6px; outline-color: var(--fi); }
.folder--graphite { --fc: var(--graphite-2); --fi: var(--on-dark); }
.folder--stone { --fc: var(--stone); --fi: var(--ink); }
.folder--bronze { --fc: var(--bronze); --fi: var(--paper); }
.folder--paperdark { --fc: var(--paper-dark); --fi: var(--ink); }
.folder--paper { --fc: var(--paper); --fi: var(--ink); }

/* the open front folder: the Regieplan */
.sheet-front {
  position: relative; margin: 0 var(--folder-inset);
  background: var(--paper); color: var(--ink);
  color-scheme: light;
  padding: clamp(20px, 2.2vw, 32px) clamp(20px, 2.4vw, 40px) clamp(40px, 5vw, 72px);
}
.sheet-front > .tab { --fc: var(--paper); --fi: var(--ink); top: -40px; bottom: auto; }
.plan__bar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 12px; }
.plan__bar .button { order: -1; }
.field { display: grid; gap: 4px; }
.field label, .field .label { font-size: var(--step-small); color: var(--ink-soft); }
.field select, .field input {
  height: 52px; min-width: 0; padding: 0 14px; border: 0; border-radius: 0;
  background: var(--paper-2); color: var(--ink); font-size: var(--step-body); font-weight: 500;
  transition: background-color var(--t-hover) ease;
}
.field select { padding-right: 36px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E0F11' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; }
.field input[type="number"] { width: 6.2em; }
.field input[type="date"] { width: 10.4em; }
@media (hover: hover) and (pointer: fine) { .field select:hover, .field input:hover { background-color: var(--paper-3); } }

.plan__title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-top: clamp(18px, 1.8vw, 26px); }
.plan__title h2 { font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.01em; }
.plan__title p { font-size: var(--step-small); color: var(--ink-soft); }
.plan__sent { margin-top: 10px; font-size: var(--step-small); color: var(--ink-soft); }
.plan__sent:empty { margin: 0; }
.plan__main > .motion { margin-top: 4px; }
.motion { min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font-size: var(--step-small); font-weight: 500; cursor: pointer; text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.22em; }

.plan__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 29%); gap: clamp(20px, 3vw, 48px); align-items: start; }
.watch { position: relative; margin-top: -8px; aspect-ratio: 1; }
.watch__stage { position: absolute; inset: -6%; }
.watch__stage canvas { width: 100% !important; height: 100% !important; }
.watch__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.watch.is-live .watch__poster { opacity: 0; transition: opacity 400ms ease; }
.watch__caption { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; text-align: center; font-size: var(--step-small); color: var(--ink-soft); }

.plan { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: var(--step-body); }
.plan caption { text-align: left; }
.plan th { text-align: left; font-size: var(--step-small); font-weight: 500; color: var(--ink-soft); padding: 0 12px 8px 0; border-bottom: 2px solid var(--ink); }
.plan td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--paper-3); vertical-align: top; }
.plan td:first-child { width: 6.2em; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan td:last-child { color: var(--ink-soft); width: 28%; }
.plan .cue { font-weight: 500; }
.plan .cue-note { color: var(--ink-soft); font-size: var(--step-small); margin-left: 10px; }
.plan td { padding-top: 9px; padding-bottom: 9px; }
.plan tr.is-past-hidden { display: none; }
.plan tr.plan__earlier td { padding: 6px 10px; display: table-cell; color: var(--ink); }
.plan__more { border: 0; background: var(--paper-2); color: var(--ink); font: inherit; font-size: var(--step-small); font-weight: 500; padding: 8px 12px; cursor: pointer; transition: background-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .plan__more:hover { background: var(--paper-3); } }
.plan tr.is-now td { background: var(--brass); }
.plan tr.is-now td:first-child { position: relative; }
.mark { display: none; }
.plan tr.is-now .mark { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-size: var(--step-small); font-weight: 500; vertical-align: 1px; }
.mark svg { width: 16.5px; height: 15px; max-width: none; flex: none; }
.plan tr.is-now td:first-child, .plan tr.is-now td:last-child { color: var(--ink); }
.plan th:first-child, .plan td:first-child { padding-left: 10px; }
.plan td:last-child { padding-right: 10px; }

.plan__lead { margin-top: clamp(28px, 3vw, 44px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: var(--paper-2); }
.plan__lead div { padding: 18px 20px; }
.plan__lead dd { font-size: var(--step-body); }
.plan__lead dt { font-size: var(--step-small); color: var(--ink-soft); }
.plan__lead dd { font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 4px; }
.plan__lead-note { margin-top: 12px; font-size: var(--step-small); color: var(--ink-soft); max-width: 70ch; }

/* intro, printed on the same sheet */
.intro-sheet { padding-top: 0; }
.js .intro-sheet { animation: none; opacity: 1; transform: none; }
.intro-sheet .intro { margin-top: 0; padding-top: clamp(48px, 5vw, 80px); }
.intro { margin-top: clamp(96px, 10vw, 150px); }
.intro__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gap); align-items: end; }
.intro__row h2 { grid-column: 1 / span 7; font-size: var(--step-head); font-weight: 400; line-height: 0.92; letter-spacing: -0.04em; }
.intro__row p { grid-column: 9 / span 4; max-width: 34ch; }
.intro__picture { margin-top: clamp(40px, 4vw, 64px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.intro__picture figure:first-child { grid-column: 1 / span 7; }
.intro__picture figure:last-child { grid-column: 8 / span 5; }
.intro__picture figure { display: flex; flex-direction: column; }
.intro__picture img, .intro__picture video { width: 100%; height: auto; object-fit: cover; background: var(--paper-3); }
.intro__picture video { height: auto; }
.intro__picture figure:first-child img { aspect-ratio: 7 / 6; }
.intro__picture figure:last-child video { aspect-ratio: 5 / 6; }
figcaption { margin-top: 10px; font-size: var(--step-small); color: inherit; opacity: 0.8; }
.sheet-front figcaption { color: var(--ink-soft); opacity: 1; }

/* ------------------------------------------------------------- sections */
.section { position: relative; padding: var(--section) var(--margin); }
.section--graphite { background: var(--graphite); color: var(--on-dark); }
.section--stone { background: var(--stone); color: var(--ink); }
.section--ink { background: var(--ink); color: var(--on-dark); }
.section--bronze { background: var(--bronze); color: var(--paper); }
.section--paperdark { background: var(--paper-dark); color: var(--ink); }
.section--paper { background: var(--paper); color: var(--ink); }

/* moments: drag row */
.moments__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: end; }
.moments__top h2 { grid-column: 1 / span 5; }
.moments__top p { grid-column: 7 / span 4; max-width: 40ch; color: var(--on-dark-soft); }
.moments__nav { grid-column: 11 / span 2; justify-self: end; }
.moments__nav { display: flex; gap: 8px; flex: none; }
.moments__nav[hidden] { display: none; }
.square { width: 52px; height: 52px; display: grid; place-items: center; background: var(--paper); color: var(--ink); border: 0; cursor: pointer; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.square svg { width: 20px; height: 20px; }
.square:active { transform: scale(0.94); }
.square[aria-disabled="true"] { background: var(--graphite-2); color: var(--on-dark-soft); cursor: default; }
@media (hover: hover) and (pointer: fine) { .square:not([aria-disabled="true"]):hover { background: var(--brass); } }
.progress { position: relative; height: 6px; margin-top: 28px; background: var(--graphite-2); }
.progress span { position: absolute; left: 0; top: 0; bottom: 0; width: 20%; background: var(--paper); transition: width 120ms linear; }
.moments__row {
  display: flex; gap: 32px; margin: 40px calc(-1 * var(--margin)) 0; padding: 0 var(--margin) 8px; scroll-padding-inline: var(--margin);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.moments__row::-webkit-scrollbar { display: none; }
.moment { flex: 0 0 300px; scroll-snap-align: start; display: flex; flex-direction: column; }
.moment h3 { font-size: var(--step-body); font-weight: 500; letter-spacing: -0.005em; }
.moment h3 .tnum { display: block; font-size: var(--step-lead); color: var(--paper); margin-bottom: 4px; font-weight: 500; }
.moment p { margin-top: 10px; font-size: var(--step-small); line-height: 1.5; color: var(--on-dark-soft); }
.moment figure { margin-top: calc(var(--air, 96px) * 0.45); }
.moment img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--graphite-2); }
/* a moment without a picture carries a cue card at print size: time, cue, who */
.moment__card { margin-top: calc(var(--air, 96px) * 0.45); aspect-ratio: 4 / 5; display: flex; flex-direction: column; padding: 22px 22px 20px; background: var(--paper-2); color: var(--ink); }
.moment__card .tnum { font-size: var(--step-head); font-weight: 500; line-height: 0.92; letter-spacing: -0.04em; }
.moment__card b { margin-top: auto; font-size: var(--step-lead); font-weight: 500; line-height: 1.15; }
.moment__card small { margin-top: 8px; font-size: var(--step-small); color: var(--ink-soft); }
/* drawn examples keep their whole sheet in view */
img.is-drawing { object-fit: contain; background: var(--graphite-2); }

/* capabilities as a printed menu, with a preview frame */
.menu-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.menu {
  grid-column: 1 / span 8; position: relative; background: var(--paper); color: var(--ink);
  padding: 64px clamp(28px, 3.4vw, 56px) 72px;
}
.menu__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 3vw, 48px); }
.menu h2 { text-align: center; font-size: var(--step-head); font-weight: 500; line-height: 0.92; letter-spacing: -0.04em; }
.menu__note { text-align: center; margin: 18px auto 0; max-width: 34ch; color: var(--ink-soft); }
.menu__group { margin-top: 40px; }
.menu__group h3 { font-size: var(--step-lead); font-weight: 500; margin-bottom: 14px; }
.menu__item { display: block; padding: 9px 0; color: inherit; text-decoration: none; transition: opacity var(--t-hover) ease; }
.menu__line { display: flex; align-items: baseline; gap: 10px; }
.menu__name { font-size: var(--step-body); font-weight: 500; flex: none; max-width: 60%; }
.menu__dots { flex: 1 1 auto; min-width: 24px; border-bottom: 4px dotted var(--paper-3); transform: translateY(-5px); }
.menu__value { flex: none; text-align: right; font-size: var(--step-small); max-width: 40%; }
.menu__desc { display: block; margin-top: 4px; font-size: var(--step-small); line-height: 1.45; color: var(--ink-soft); max-width: 44ch; }
.menu__thumb { display: none; }
.preview { grid-column: 9 / span 4; position: sticky; top: 12vh; }
.preview__frame { position: relative; aspect-ratio: 4 / 5; background: var(--graphite); overflow: hidden; }
.preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 240ms ease; }
.preview img.is-on { opacity: 1; }
.preview img.is-drawing { object-fit: contain; }
.preview figcaption { color: var(--ink); opacity: 1; min-height: 2.9em; }
@media (hover: hover) and (pointer: fine) {
  .menu:has(.menu__item:hover) .menu__item:not(:hover) { opacity: 0.45; }
}


/* references as stacked folders */
.files__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.files__head p { max-width: 42ch; color: var(--paper); }
.files { margin-top: 112px; margin-bottom: calc(-1 * var(--section)); }
.file { position: sticky; top: calc(var(--i) * 64px + 44px); min-height: 0; background: var(--fc); color: var(--fi); padding: 0 var(--margin) clamp(48px, 5vw, 80px); margin: 0 calc(-1 * var(--margin)); }
.file + .file { margin-top: 0; }
.file__strip { display: flex; align-items: center; justify-content: flex-end; gap: 16px; height: 64px; }
.file__body figcaption { font-size: var(--step-small); }
.file__tab {
  position: absolute; bottom: 100%; left: calc(var(--margin) + var(--i) * clamp(120px, 17vw, 260px));
  display: flex; align-items: center; height: 44px; padding: 0 34px; min-width: 200px;
  background: var(--tc); color: var(--ti);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 100%, 0 100%);
}
.file__tab h3 { font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
.file__cat { font-size: var(--step-small); text-align: right; }
.file__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); margin-top: 0; align-items: start; }
.file__body figure { grid-column: 1 / span 7; }
.file__body img, .file__body video { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--graphite-2); }
.file__text { grid-column: 9 / span 4; }
.file__text p + p { margin-top: 1em; }
.file__facts { margin-top: 28px; display: grid; gap: 12px; }
.file__facts div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; }
.file__facts dt { opacity: 0.85; }
.file__facts dd { font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.file__text .button { margin-top: 32px; }
/* the stacked folders only where a whole folder fits under the stack */
@media (min-width: 1101px) and (max-height: 759px) { .file { position: relative; top: 0; } .file + .file { margin-top: 56px; } }
.file__mark { grid-column: 1 / span 7; display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--paper); }
.file--paper .file__mark { background: var(--paper-2); }
.file__mark img { width: 52%; height: auto; aspect-ratio: auto; object-fit: contain; background: none; }
.file__mark--letterhead img { width: 26%; }
.file--paper { --fc: var(--paper); --fi: var(--ink); --tc: var(--ink); --ti: var(--paper); }
.file--graphite { --fc: var(--graphite-2); --fi: var(--on-dark); --tc: var(--ink); --ti: var(--paper); }
.file--stone { --fc: var(--stone); --fi: var(--ink); --tc: var(--paper); --ti: var(--ink); }
.file--paperdark { --fc: var(--paper-dark); --fi: var(--ink); --tc: var(--ink); --ti: var(--paper); }

/* guest list card */
.guests { overflow: visible; }
.guests__card {
  width: min(56vw, 860px); margin: 0 auto; background: var(--paper); color: var(--ink);
  padding: 64px 56px 72px;
}
.guests__card h2 { text-align: center; font-size: var(--step-head); font-weight: 500; line-height: 0.92; letter-spacing: -0.04em; }
.guests__card > p { text-align: center; margin: 18px auto 0; max-width: 40ch; color: var(--ink-soft); }
.guests__card figure { margin-top: 40px; }
.guests__card figure + .guestlist { margin-top: 56px; }
.guests__card figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.guestlist { margin-top: 48px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 34px 54px; }
.guestlist li { display: flex; align-items: center; height: 56px; }
.guestlist .logo-img { width: auto; max-width: 240px; filter: brightness(0); opacity: 0.92; }
.guestlist .logo-word { font-size: var(--step-lead); font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; }

/* agencies sheet */
.agencies { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.agencies__intro { grid-column: 1 / span 5; position: sticky; top: 14vh; }
.agencies__intro p { margin-top: 24px; max-width: 34ch; }
.agencies__intro .button { margin-top: 32px; }
.terms { grid-column: 7 / span 6; background: var(--paper); color: var(--ink); padding: 64px clamp(28px, 3.4vw, 64px) 80px; }
.terms h3.terms__name { text-align: center; font-size: var(--step-head); font-weight: 500; letter-spacing: -0.04em; line-height: 0.92; }
.terms__note { text-align: center; margin-top: 12px; font-size: var(--step-small); color: var(--ink-soft); }
.terms__group { margin-top: 40px; }
.terms__group h4 { text-align: center; font-size: var(--step-lead); font-weight: 500; margin-bottom: 18px; }
.terms__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 20px; padding: 6px 0; }
.terms__item b { font-weight: 500; }
.terms__item span { text-align: right; }
.terms__item small { grid-column: 1 / -1; font-size: var(--step-small); color: var(--ink-soft); }
.terms__close { margin-top: 44px; text-align: center; font-size: var(--step-lead); line-height: 1.3; }

/* founders' letter */
.letter-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.letter-side { grid-column: 1 / span 4; }
.letter-side p { margin-top: 20px; color: var(--on-dark-soft); max-width: 30ch; }
.letter { grid-column: 6 / span 6; background: var(--paper); color: var(--ink); max-width: 680px; }
.letter__body { padding: 60px clamp(28px, 4vw, 60px) 48px; }
.letter__head { display: flex; align-items: center; gap: 14px; }
.letter__head img { width: 44px; height: 44px; }
.letter h3 { font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.letter__text { margin-top: 28px; line-height: 1.6; }
.letter__text p + p { margin-top: 1.1em; }
.letter__sign { margin-top: 36px; }
.letter__sign strong { display: block; font-style: italic; font-weight: 400; font-size: var(--step-lead); }
.letter__sign span { display: block; margin-top: 4px; font-size: var(--step-small); color: var(--ink-soft); }
.tear { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px clamp(28px, 4vw, 60px); background: var(--paper-2); border-top: 5px dotted var(--ink); }
.tear a.link { font-size: var(--step-lead); font-weight: 500; text-decoration-color: transparent; }
@media (hover: hover) and (pointer: fine) { .tear a.link:hover { text-decoration-color: currentColor; } }

/* the brief coupon */
.coupon-wrap { padding-top: clamp(96px, 10vw, 140px); padding-bottom: clamp(96px, 10vw, 140px); }
.coupon {
  position: relative; display: grid; grid-template-columns: 46fr 54fr; max-width: 1240px; margin: 0 auto;
  background: var(--bronze); color: var(--paper); border-radius: 0;
}
.coupon__left::before, .coupon__left::after { content: ""; position: absolute; right: -16.5px; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); }
.coupon__left::before { top: -14px; }
.coupon__left::after { bottom: -14px; }
.coupon__left { position: relative; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; border-right: 5px dotted var(--paper); }
.coupon__left h2 { font-size: var(--step-head); font-weight: 500; line-height: 0.92; letter-spacing: -0.04em; text-wrap: balance; }
.coupon__left p { max-width: 38ch; }
.coupon__right { padding: 48px; display: grid; gap: 10px; align-content: start; }
.coupon__right .field label { color: var(--paper); }
.coupon__right .field select, .coupon__right .field input, .coupon__right .field textarea { width: 100%; background-color: var(--paper); color: var(--ink); color-scheme: light; height: 52px; border: 0; padding: 0 14px; }
.coupon__right .field textarea { height: 96px; padding: 12px 14px; resize: vertical; }
.coupon__two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.coupon__right .button { width: 100%; min-height: 56px; margin-top: 6px; background: var(--ink); color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .coupon__right .button:hover { background: var(--brass); color: var(--ink); } }
.coupon__fine { font-size: var(--step-small); opacity: 0.9; margin-top: 4px; }
.coupon__fine:empty { margin: 0; }
.coupon ::placeholder { color: var(--ink-soft); opacity: 1; }
.contact-rows { max-width: 1240px; margin: 72px auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.contact-rows__note { font-size: var(--step-small); font-weight: 400; color: var(--ink-soft); }
.contact-rows dt { font-size: var(--step-small); color: var(--ink-soft); }
.contact-rows dd { margin-top: 6px; font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.01em; overflow-wrap: anywhere; }
@media (max-width: 1240px) { .contact-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--gap); } }

/* footer: the back of the binder */
.footer { background: var(--ink); color: var(--on-dark); padding: clamp(72px, 8vw, 120px) var(--margin) 32px; }
.footer__mark { width: 100%; }
.footer__mark img { width: 100%; height: auto; }
.footer__row { margin-top: 48px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; font-size: var(--step-small); color: var(--on-dark-soft); }
.footer__row nav { display: flex; gap: 24px; flex-wrap: wrap; }
.footer__row a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer__row a:hover { color: var(--brass); } }

/* ------------------------------------------------------------- motion */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__title [data-line] { transform: translateY(105%); animation: line-up 900ms var(--ease-expo) forwards; animation-delay: calc(120ms + var(--i, 0) * 90ms); }
  .js .hero-body [data-load],
  .js .hero [data-load] { opacity: 0; transform: translateY(14px); animation: rise 600ms var(--ease-out) forwards; animation-delay: var(--d, 400ms); }
  .js .folder, .js .sheet-front:not(.intro-sheet) { transform: translateY(40px); opacity: 0; animation: slide-in 900ms var(--ease-expo) forwards; animation-delay: calc(300ms + var(--n, 0) * 70ms); }
  /* content is never pre-hidden: the entrance starts just before an element scrolls into view */
  .js [data-reveal].is-arriving { animation: arrive 900ms var(--ease-expo) both; animation-delay: calc(var(--r, 0) * var(--stagger-item)); }
  .plan tr { transition: background-color 300ms ease; }
  .plan tbody.is-changing { animation: flicker 420ms var(--ease-out); }
}
@keyframes line-up { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes slide-in { to { opacity: 1; transform: none; } }
@keyframes arrive { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes flicker { 0% { opacity: 0.35; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- tablet */
@media (max-width: 1100px) {
  :root { --folder-inset: 4vw; }
  .plan__bar, .plan__title { padding-right: 0; }
  .plan__grid { grid-template-columns: 1fr; }
  .watch { order: 2; width: min(300px, 46%); margin: 36px auto 24px; }
  .plan__bar { display: grid; grid-template-columns: 1.25fr 1.25fr 0.8fr; gap: 10px 8px; }
  .plan__bar .button { grid-column: 1 / -1; width: 100%; }
  .plan__bar .field input[type="number"], .plan__bar .field input[type="date"], .plan__bar .field select { width: 100%; }
  .menu__thumb.is-drawing { aspect-ratio: 4 / 5; width: min(100%, 360px); }
  .file { position: relative; top: 0; min-height: 0; margin-top: 56px; }
  .menu { grid-column: 1 / span 12; }
  .preview { display: none; }
  .menu__thumb { display: block; margin: 10px 0 6px; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
  .agencies__intro { grid-column: 1 / span 12; position: static; }
  .terms { grid-column: 1 / span 12; margin-top: 48px; }
  .letter-side { grid-column: 1 / span 12; }
  .letter { grid-column: 1 / span 12; margin-top: 40px; max-width: none; }
  .file__body figure, .file__mark { grid-column: 1 / span 12; }
  .file__text { grid-column: 1 / span 12; margin-top: 24px; }
  .guests__card { width: min(80vw, 860px); }
}

/* ------------------------------------------------------------- phone */
@media (max-width: 700px) {
  :root { --folder-inset: 0px; --section: 96px; }
  .topbar { grid-template-columns: auto 1fr; }
  .topbar__logo { grid-column: 1; width: 132px; }
  .topbar__link { grid-column: 2; }
  .topbar__end { grid-column: 2; gap: 16px; }
  .hero__title { margin-top: 28px; }
  .hero__title h1 { font-size: 13.4vw; }
  .hero__sub { font-size: var(--step-lead); max-width: 30ch; }
  .folders { --fold-step: 26px; }
  .binder { margin-top: 44px; }
  .plan__title p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .plan .cue-note { display: block; margin-left: 0; }
  .folder .tab, .sheet-front > .tab { font-size: var(--step-small); height: 32px; padding: 0 20px; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%); }
  .folder > .tab, .sheet-front > .tab { top: -32px; }
  .sheet-front > .tab { left: auto; right: 8px; }
  .folder:nth-child(4) > .tab { left: 52%; }
  .folder { height: calc(var(--fold-step) + 32px); }
  .sheet-front { padding: 20px 16px 56px; }
  .plan__bar { display: grid; grid-template-columns: 1.25fr 1.25fr 0.8fr; gap: 10px 8px; }
  .plan__bar .button { grid-column: 1 / -1; width: 100%; }
  .plan__bar .field select, .plan__bar .field input { height: 46px; padding: 0 10px; font-size: 16px; }
  .plan__bar .field select { padding-right: 26px; background-position: right 9px center; }
  .plan__bar .field input[type="date"] { padding-right: 4px; }
  .field input[type="number"], .field input[type="date"], .field select { width: 100%; }
  .plan__grid { grid-template-columns: 1fr; }
  .watch { order: 2; width: 56%; margin: 28px auto 8px; }
  .plan td:last-child, .plan th:last-child { display: none; }
  .plan td:first-child { width: 4.6em; }
  .plan tr.is-now .mark { display: flex; margin: 4px 0 0; }
  .plan__lead { grid-template-columns: 1fr 1fr; }
  .intro__row h2, .intro__row p { grid-column: 1 / -1; }
  .intro__row p { margin-top: 20px; }
  .intro__picture figure:first-child, .intro__picture figure:last-child { grid-column: 1 / -1; }
  .moments__nav { display: none; }
  .moments__row { gap: 16px; }
  .moment { flex-basis: 72vw; }
  .moments__top { display: block; }
  .moments__top p { margin-top: 18px; }
  .moment figure { margin-top: calc(var(--air, 96px) / 2.4); }
  .menu-wrap { display: block; }
  .menu { padding: 48px 20px 60px; }
  .menu__groups { display: block; }
  .menu__name { max-width: 52%; }
  .menu__value { max-width: 38%; white-space: normal; line-height: 1.25; }
  .menu__dots { min-width: 10px; }
  .menu__thumb { display: block; margin: 10px 0 6px; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
  .menu__thumb.is-drawing { aspect-ratio: 4 / 5; width: min(100%, 360px); }
  .preview { display: none; }
  .files__head { display: block; }
  .files__head p { margin-top: 20px; }
  .files { margin-top: 64px; }
  .file { position: relative; top: 0; min-height: 0; padding-bottom: 56px; }
  .file__strip { flex-wrap: wrap; height: auto; padding-top: 0; }
  .file__tab { left: var(--margin); height: 40px; min-width: 0; padding: 0 24px; }
  .file__strip { justify-content: flex-start; height: 56px; }
  .file__cat { text-align: left; }
  .file__body img, .file__body video { aspect-ratio: 4 / 3; }
  .file { margin-top: 56px; }
  .guests__card { width: 100%; padding: 40px 22px 48px; }
  .guestlist { gap: 22px 30px; }
  .guestlist li { height: 40px; }
  .guestlist .logo-img { transform: scale(0.74); transform-origin: center; max-width: 200px; }
  .terms { padding: 44px 20px 56px; }
  .letter__body { padding: 40px 24px 36px; }
  .tear { padding: 20px 24px; }
  .tear .button { width: 100%; }
  .coupon { grid-template-columns: 1fr; }
  .coupon__left::before, .coupon__left::after { top: auto; bottom: -16.5px; right: auto; }
  .coupon__left::before { left: -14px; } .coupon__left::after { right: -14px; left: auto; }
  .coupon__left { border-right: 0; border-bottom: 5px dotted var(--paper); padding: 32px 22px; }
  .coupon__right { padding: 28px 22px 32px; }
  .coupon__two { grid-template-columns: 1fr; }
  .contact-rows { grid-template-columns: 1fr; margin-top: 48px; }
}

/* Spam-Falle im Briefing: für Menschen unsichtbar */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }