/* ============================================================================
   event.css — Event-Fotos für Kunden (vfxmedia.ch/<event> und /d/<link>)
   CI «Papier und Tinte» (DESIGN.md): hell, schwarze Knöpfe, alle Farbe aus den
   Fotos. Mobile first: die meisten kommen direkt nach dem Rennen vom Handy.
   ========================================================================== */
:root {
  --bg: #F7F7F5; --surface: #FFFFFF; --surface-2: #EFEFEC;
  --ink: #141413; --on-ink: #FFFFFF;
  --text: #0A0A0A; --text-soft: #3D3D3B; --text-dim: #6B6B68;
  --accent: #161616; --accent-hover: #262625;
  --ok: #1F7A4D; --ok-bg: rgba(31,122,77,.10); --warn: #8A5B12; --warn-bg: rgba(180,121,28,.13); --danger: #C2382F;
  --line: rgba(10,10,10,.10); --line-strong: rgba(10,10,10,.18);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -18px rgba(0,0,0,.18);
  --shadow-btn: 0 1px 2px rgba(0,0,0,.10), 0 8px 24px -10px rgba(0,0,0,.35);
  --font: "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.55;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; min-height: 100dvh; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic.sm { width: 15px; height: 15px; } .ic.lg { width: 28px; height: 28px; } .ic.xl { width: 46px; height: 46px; stroke-width: 1.4; }
.ic.bold { stroke-width: 2.4; }
.vh { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wrap { width: 100%; max-width: 560px; margin: 0 auto; padding-inline: 16px; }
.wrap.narrow { max-width: 460px; }
.wrap.wide { max-width: 1180px; padding-inline: 10px; }
.center { text-align: center; }
.strong { font-weight: 600; }
.soft { color: var(--text-soft); }
.dim { color: var(--text-dim); font-size: .86rem; }
.mt6 { margin-top: 6px; } .mt8 { margin-top: 8px; } .mt14 { margin-top: 14px; } .mt22 { margin-top: 22px; }
.mb8 { margin-bottom: 8px; } .mb10 { margin-bottom: 10px; } .mb14 { margin-bottom: 14px; }
.iconline { display: flex; gap: 6px; justify-content: center; align-items: center; }
.eyebrow { display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.eyebrow::before { content: ""; width: 16px; height: 2px; background: currentColor; }
.h2 { font-size: 1.6rem; font-weight: 500; letter-spacing: -.03em; line-height: 1.12; text-wrap: balance; }
.noscript { padding: 40px 20px; text-align: center; }

/* Knöpfe */
.btn { height: 48px; border-radius: 999px; padding: 0 22px; font-weight: 600; font-size: .95rem; display: inline-flex; gap: 8px;
  align-items: center; justify-content: center; border: 0; cursor: pointer; text-decoration: none;
  transition: transform .16s var(--ease), background .18s var(--ease), opacity .18s var(--ease); }
.btn:active { transform: scale(.97); }
.btn-p { background: var(--accent); color: #fff; box-shadow: var(--shadow-btn); }
.btn-g { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-w { background: #fff; color: var(--text); }
.btn-block { width: 100%; }
.btn-sm { height: 40px; padding: 0 16px; font-size: .88rem; }
.btn[aria-disabled="true"] { opacity: .35; box-shadow: none; cursor: not-allowed; }
.btn[aria-disabled="true"]:active { transform: none; }
@media (hover: hover) { .btn-p:hover { background: var(--accent-hover); } .btn-g:hover { background: var(--surface-2); } }
.link { background: none; border: 0; padding: 0; font-weight: 600; font-size: .88rem; color: var(--text); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; }
.link.small { font-weight: 500; font-size: .8rem; color: var(--text-dim); }
.iconbtn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--text); }
@media (hover: hover) { .iconbtn:hover { background: var(--surface-2); } }
.stack { display: grid; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0 24px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--line); font-size: .82rem; color: var(--text-soft); }

/* Kopf und Hero */
.site { position: absolute; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 3; display: flex; align-items: center;
  justify-content: space-between; padding: 14px 16px; color: #fff; }
.site .brand img { width: 112px; height: auto; }
.lang { position: relative; height: 32px; min-width: 44px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.45); background: rgba(0,0,0,.18);
  color: #fff; font-weight: 600; font-size: .8rem; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero { position: relative; height: min(64vh, 520px); min-height: 380px; overflow: hidden; background: #1c1c1b; }
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* Unten schwarz auslaufend: Titel und Angaben bleiben auf jedem Foto lesbar */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.06) 26%, rgba(0,0,0,.14) 44%, rgba(0,0,0,.62) 68%, rgba(0,0,0,.88) 88%, rgba(0,0,0,.94) 100%); }
.hero-txt { position: absolute; left: 0; right: 0; bottom: 48px; z-index: 2; color: #fff; max-width: 560px; margin: 0 auto; padding-inline: 20px; }
.hero-txt .eyebrow { color: rgba(255,255,255,.82); }
.hero-txt h1 { font-size: clamp(2.5rem, 9vw, 3.6rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.02; margin: 10px 0; text-wrap: balance; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .88rem; color: rgba(255,255,255,.88); }
.meta span { display: inline-flex; align-items: center; gap: 6px; }
.meta b { font-weight: 500; }
.offer { position: relative; z-index: 4; margin: -28px 0 0; background: var(--surface); border-radius: 18px; padding: 18px 18px 16px; box-shadow: var(--shadow-soft); }
.offer .row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 6px 0 4px; }
.offer .price { font-size: 1.9rem; font-weight: 500; letter-spacing: -.04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.offer p { font-size: .92rem; color: var(--text-soft); margin-bottom: 14px; }
.offer .below { text-align: center; margin-top: 12px; }
.notice { display: flex; gap: 8px; align-items: flex-start; background: var(--warn-bg); color: var(--warn); border-radius: 12px; padding: 10px 12px;
  font-size: .86rem; margin-bottom: 14px; }
.notice .ic { margin-top: 3px; }
.how { padding: 30px 4px 8px; display: grid; gap: 4px; }
.how .eyebrow { margin-bottom: 8px; }
.how .item { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.how .item:first-of-type { border-top: 0; }
.circle { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; flex: none; }
.how b { display: block; font-size: .95rem; }
.how span { font-size: .86rem; color: var(--text-dim); }
/* Schon gekauft: eigene Zeile statt Fusszeilen-Link, damit man sie auch findet */
.resend { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; width: 100%; margin-top: 18px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-soft); text-align: left; cursor: pointer;
  transition: background .18s var(--ease), transform .16s var(--ease); }
.resend b { display: block; font-size: .95rem; font-weight: 600; color: var(--text); }
.resend span:not(.circle) { font-size: .86rem; color: var(--text-dim); }
.resend > .ic { color: var(--text-dim); }
.resend:active { transform: scale(.985); }
@media (hover: hover) { .resend:hover { background: var(--surface-2); } }
.foot { padding: 26px 4px calc(30px + env(safe-area-inset-bottom, 0px)); font-size: .78rem; color: var(--text-dim); display: grid; gap: 6px;
  border-top: 1px solid var(--line); margin-top: 18px; }
.foot a { color: var(--text-dim); }

/* App-Leiste */
.appbar { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 8px 8px; background: rgba(247,247,245,.9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.appbar .t { text-align: center; font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Selfie und Suche */
.frame { width: clamp(150px, 26svh, 230px); height: clamp(150px, 26svh, 230px); border-radius: 50%; border: 2px dashed var(--line-strong); display: grid; place-items: center;
  margin: clamp(16px, 4svh, 40px) auto clamp(12px, 2.4svh, 24px); color: var(--text-dim); background: var(--surface); }
.spin { width: 84px; height: 84px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--text); margin: 18vh auto 26px;
  animation: sp 1s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
.face-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 22px 0; }
.face-pick button { border: 1px solid var(--line); background: var(--surface); border-radius: 16px; padding: 16px 10px; cursor: pointer;
  display: grid; justify-items: center; gap: 10px; font-weight: 600; font-size: .9rem; }
.face-pick button:hover { border-color: var(--text); }
.face-pick img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line-strong); }
.okc { width: 72px; height: 72px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; margin: 12vh auto 16px; }
.okc.neutral { background: var(--surface-2); color: var(--text); }
.okc.warn { background: var(--warn-bg); color: var(--warn); }

/* Treffer */
.pad-top { padding: 18px 10px 4px; }
.secH { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 22px 6px 10px; }
.secH .l { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; }
.count { font-family: var(--mono); font-size: .78rem; color: var(--text-dim); }
.secN { padding: 0 6px 10px; font-size: .84rem; color: var(--text-dim); margin-top: -4px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }
@media (min-width: 960px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tile { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface-2); margin: 0; }
.tile .ph { display: block; width: 100%; height: 100%; border: 0; padding: 0; background: none; cursor: zoom-in; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s var(--ease), filter .2s var(--ease); }
.tile.out img { opacity: .42; filter: grayscale(.6); }
.pick { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; }
.pick[aria-pressed="true"] { background: var(--text); color: #fff; }
.pick .ic { width: 16px; height: 16px; stroke-width: 2.4; }
/* Kleine runde Knöpfe: sichtbar klein, Tippfläche 44 px */
.pick::after, .dlb::after, .lang::after { content: ""; position: absolute; inset: -6px; }
.series-btn { margin: 4px 6px 8px; }
.empty { padding: 30px 10px; text-align: center; color: var(--text-dim); }
.bar { position: sticky; bottom: 0; z-index: 6; margin-top: 22px; background: rgba(255,255,255,.95); -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  /* Auf breiten Bildschirmen bündig mit der Textspalte (.wrap.wide 1180px + 2 × 10px Einzug) */
  padding-inline: max(16px, calc((100% - 1180px) / 2 + 20px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bar b { display: block; font-size: .95rem; }
.bar > div span { font-size: .8rem; color: var(--text-dim); }

/* Kasse */
/* Personen-Pakete: das Selfie schlägt ganze Pakete vor (Titelbild, zwei Vorschauen, Anzahl, «Das bin ich») */
.pkgs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px 6px 28px; max-width: 980px; }
@media (min-width: 640px) { .pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .pkgs.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pkgs.n1 { max-width: 420px; grid-template-columns: minmax(0, 1fr); }
.pkg { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; margin: 0; }
.pkg.best { border-color: var(--line-strong); }
.pkg .pics { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; aspect-ratio: 4 / 3.4; background: var(--surface-2); }
.pkg .pics .ph { border: 0; padding: 0; margin: 0; background: var(--surface-2); cursor: zoom-in; overflow: hidden; min-width: 0; min-height: 0; }
.pkg .pics .ph:first-child { grid-row: 1 / 3; }
.pkg .pics.one { grid-template-columns: 1fr; } .pkg .pics.one .ph:first-child { grid-row: auto; }
.pkg .pics img { width: 100%; height: 100%; object-fit: cover; }
.pkg .body { padding: 14px 16px 16px; display: grid; gap: 12px; }
.pkg .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pkg .n { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pkg .acts { display: grid; gap: 8px; }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.badge.ok { background: var(--ok-bg); color: var(--ok); } .badge.maybe { background: var(--warn-bg); color: var(--warn); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin: 16px 0; }
.thumbs { display: flex; gap: 6px; margin: 4px 0 14px; flex-wrap: wrap; }
.thumbs img, .thumbs .more-n { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; }
.thumbs .more-n { display: grid; place-items: center; background: var(--surface-2); font-size: .8rem; font-weight: 600; }
.checks { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; font-size: .9rem; color: var(--text-soft); }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks .ic { color: var(--ok); margin-top: 3px; }
.total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 12px; font-weight: 600; }
.total b { font-size: 1.4rem; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.secure { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .8rem; color: var(--text-dim); margin: 10px 0 30px; }
.chk { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--surface-2); border: 0; text-align: left;
  width: 100%; cursor: pointer; margin: 12px 0 14px; font-size: .9rem; line-height: 1.45; }
.chk .box { width: 22px; height: 22px; border-radius: 6px; border: 1.8px solid var(--text); flex: none; display: grid; place-items: center; margin-top: 1px; background: var(--surface); }
.chk .box .ic { opacity: 0; width: 14px; height: 14px; stroke-width: 3; }
.chk[aria-checked="true"] .box { background: var(--text); color: #fff; }
.chk[aria-checked="true"] .box .ic { opacity: 1; }
.ferr { color: var(--danger); font-size: .86rem; font-weight: 500; margin: -6px 0 12px; }
.ferr.box { display: grid; gap: 6px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(194,56,47,.08); }
.ferr.box .link { justify-self: start; color: var(--danger); }
.sheet .ferr { margin: 8px 0 0; }
.chk[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--danger); }
.chk[aria-invalid="true"] .box { border-color: var(--danger); }
.in[aria-invalid="true"], .in[aria-invalid="true"]:focus { border-color: var(--danger); }
.in[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(194,56,47,.16); }
.legal { text-align: center; font-size: .8rem; color: var(--text-dim); margin: -18px 0 30px; }
.legal a { color: var(--text-dim); }
.btn[aria-busy="true"] { cursor: progress; }
.spin.sm { width: 40px; height: 40px; margin: 0; border-width: 3px; }
.boot { min-height: 100dvh; display: grid; place-items: center; }
.boot .spin { margin: 0; }
.info { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-2); border-radius: 14px; padding: 12px 14px; font-size: .86rem;
  color: var(--text-soft); margin-top: 18px; text-align: left; }
.info .ic { margin-top: 3px; }

/* Sheets, Lightbox, Toast */
.ov { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; background: rgba(10,10,10,.44); }
.sheet { width: 100%; max-width: 560px; background: var(--surface); border-radius: 22px 22px 0 0; padding: 10px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  max-height: 92dvh; overflow: auto; animation: up .34s var(--ease); }
@media (min-width: 640px) { .ov { justify-content: center; } .sheet { border-radius: 22px; padding-top: 22px; } .grab { display: none; } }
@keyframes up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 0 auto 16px; }
.sheet h2 { font-size: 1.4rem; font-weight: 500; letter-spacing: -.03em; margin-bottom: 6px; }
.ci { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: .92rem; color: var(--text-soft); align-items: start; }
.ci .circle { width: 34px; height: 34px; }
.more { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.lbl { font-size: .8rem; font-weight: 600; color: var(--text-soft); display: block; margin-bottom: 6px; }
.in { height: 48px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); padding: 0 14px; font: inherit; font-size: 1rem; width: 100%; color: var(--text); }
.in:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px rgba(10,10,10,.16); }
.lb { position: fixed; inset: 0; z-index: 40; background: #0B0B0A; display: flex; flex-direction: column; color: #fff; }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px; font-size: .88rem; font-variant-numeric: tabular-nums; }
.lb-top .iconbtn, .lb-bot .iconbtn { color: #fff; }
.lb-bot .iconbtn { background: rgba(255,255,255,.1); }
.sp40 { width: 40px; }
.lb-mid { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 10px; }
.lb-mid img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.lb-mid img.out { opacity: .45; filter: grayscale(.6); }
/* Download-Seite: erst die kleine Ansicht, die grosse blendet darüber, sobald sie geladen ist */
.lb-mid.dl { position: relative; }
.lb-mid.dl img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; transition: opacity .25s var(--ease); }
.lb-mid.dl img.lb-hi { position: absolute; inset: 0 10px; width: calc(100% - 20px); opacity: 0; }
.lb-mid.dl img.lb-hi.on { opacity: 1; }
.lb-bot .btn .ic { width: 18px; height: 18px; }
.lb-note { text-align: center; font-size: .78rem; color: rgba(255,255,255,.6); padding: 6px 20px 2px; }
.lb-bot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px calc(18px + env(safe-area-inset-bottom, 0px)); max-width: 560px; width: 100%; margin: 0 auto; }
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 16px); opacity: 0; background: var(--ink);
  color: #fff; border-radius: 999px; padding: 11px 18px; font-size: .88rem; font-weight: 500; z-index: 60; pointer-events: none; max-width: calc(100% - 32px);
  text-align: center; transition: opacity .22s var(--ease), transform .22s var(--ease); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
/* Hilfe-Blase unten rechts. Über den Kaufleisten (.bar), unter Overlays und Lightbox. */
.sup { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 20; display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  transition: bottom .2s var(--ease); }
body.has-bar .sup { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
.sup-btn { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--accent); color: var(--on-ink); display: grid; place-items: center;
  box-shadow: var(--shadow-btn); cursor: pointer; transition: transform .16s var(--ease), background .18s var(--ease); }
.sup-btn:hover { background: var(--accent-hover); }
/* Auf dem dunklen Titelbild sichtbar bleiben: feiner heller Rand */
.sup-btn { box-shadow: var(--shadow-btn), 0 0 0 1px rgba(255,255,255,.22); }
.sup-btn:active { transform: scale(.94); }
.sup-btn .ic { width: 24px; height: 24px; }
.sup-card { position: relative; width: min(320px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-soft), 0 18px 40px -20px rgba(0,0,0,.35); padding: 18px 16px 16px; display: grid; gap: 10px; animation: supIn .22s var(--ease); }
.sup-card h2 { font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; padding-right: 36px; }
.sup-card p { font-size: .88rem; color: var(--text-soft); margin-bottom: 4px; }
.sup-x { position: absolute; top: 8px; right: 8px; }
@keyframes supIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* Download-Seite */
.dl-head { padding: calc(env(safe-area-inset-top, 0px) + 18px) 10px 6px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dl-head img { width: 112px; height: auto; }
.valid { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--line); font-size: .8rem; color: var(--text-soft); }
.dl-actions { display: grid; gap: 10px; margin: 16px 0 6px; }
@media (min-width: 640px) { .dl-actions { grid-template-columns: 1fr 1fr; } }
.dlb { position: absolute; bottom: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.94); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.zip-list { display: grid; gap: 8px; margin-top: 10px; }
.progress { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin-top: 10px; }
.progress i { display: block; height: 100%; width: 0; background: var(--text); transition: width .3s var(--ease); }

/* ============================================================================
   Neues Design (13.10.2026): Handy wie «Papier» (Knopf beim Daumen), Laptop wie
   «Startblock» (grosses Titelbild, Übersicht daneben). Zahlen und Zeiten in Monoschrift.
   ========================================================================== */
.num, .board b, .slip .lead b, .slip .sum b, .tile .time { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Anzeigetafel im Titelbild: Datum, Ort, Anzahl Fotos */
.board { display: flex; flex-wrap: wrap; margin-top: 6px; border-top: 1px solid rgba(255,255,255,.28); border-bottom: 1px solid rgba(255,255,255,.28); }
.board > div { padding: 9px 16px 9px 0; display: grid; gap: 2px; }
.board > div + div { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.28); }
.board span { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.board b { font-size: 1rem; font-weight: 600; letter-spacing: -.02em; color: #fff; }
/* Auf jedem Bild lesbar: dunkle, weichgezeichnete Tafel statt Linien direkt auf dem Foto */
.board { border: 0; background: rgba(10,10,10,.55); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  border-radius: 14px; padding: 2px 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.board > div { padding: 10px 14px; }
.board > div + div { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.16); }

/* So geht's: drei Karten nebeneinander */
.steps3 { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.steps3 li { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 11px; display: grid; gap: 6px; align-content: start; }
.steps3 .n { font-family: var(--mono); font-size: .72rem; color: var(--text-dim); }
.steps3 b { font-size: .92rem; }
.steps3 span:not(.n) { font-size: .78rem; color: var(--text-dim); line-height: 1.4; }
/* Gut zu wissen: kurze Fragen, Antwort klappt auf */
.faq { padding: 26px 4px 4px; }
.faq .eyebrow { margin-bottom: 8px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 2px; font-weight: 600; font-size: .95rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { flex: none; color: var(--text-dim); transition: transform .2s var(--ease); }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq summary:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 6px; }
.faq p { padding: 0 2px 16px; font-size: .9rem; color: var(--text-soft); line-height: 1.55; max-width: 62ch; }

/* Laptop: QR-Code führt aufs Handy */
.qr-hint { display: none; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 16px; padding: 12px;
  border-radius: 14px; background: var(--bg); border: 1px solid var(--line); text-align: left; }
.qr-hint .qr svg { width: 92px; height: 92px; display: block; background: #fff; padding: 6px; border-radius: 8px; }
.qr-hint b { display: block; font-size: .92rem; }
.qr-hint span span { font-size: .8rem; color: var(--text-dim); line-height: 1.45; }

/* Daumen-Leiste: «Selfie machen» bleibt erreichbar, wenn der Startknopf weggescrollt ist */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; padding: 18px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(rgba(247,247,245,0), rgba(247,247,245,.94) 32%); animation: dockIn .22s var(--ease); }
.dock .btn { max-width: 528px; margin: 0 auto; display: flex; }
@keyframes dockIn { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
#vLanding .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

/* Treffer: ein sicheres Paket gross, unsichere nur mit Titelbild */
#pkgList.pkgs { display: block; max-width: none; padding: 0; }
.res-one { display: grid; gap: 16px; padding: 14px 6px 8px; }
.pk { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-soft); max-width: 520px; margin: 0; }
.pk .cover { position: relative; display: block; width: 100%; aspect-ratio: 4 / 4.4; border: 0; padding: 0; background: var(--surface-2); cursor: zoom-in; }
.pk .cover > img { width: 100%; height: 100%; object-fit: cover; }
.pk .chip { position: absolute; top: 12px; left: 12px; display: inline-flex; gap: 6px; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px;
  background: rgba(255,255,255,.94); color: var(--text); font-size: .8rem; font-weight: 600; }
.pk .strip { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; }
.pk .all { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 999px;
  background: rgba(255,255,255,.94); color: var(--text); font-size: .84rem; font-weight: 600; }
.pk .strip img, .pk .strip .more-n { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; border: 2px solid rgba(255,255,255,.95); }
.pk .strip .more-n { display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; font-size: .8rem; font-weight: 600; }
.pk .pk-info { padding: 14px 16px 16px; display: grid; gap: 12px; }
.pk .line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pk .line .num { display: block; font-size: 1.05rem; }
.pk .line .sm { display: block; font-size: .8rem; color: var(--text-dim); margin-top: 2px; }
.pk .price { font-size: 1.1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk .acts { display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px; }
.maybes { display: grid; gap: 10px; padding: 18px 6px 24px; max-width: 560px; }
.maybes .eyebrow { margin-bottom: 2px; }
.pk-maybe { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px; margin: 0; }
.pk-maybe .pm-cover { display: block; width: 72px; height: 90px; border: 0; padding: 0; border-radius: 10px; overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
.pk-maybe .pm-cover img { width: 100%; height: 100%; object-fit: cover; }
.pk-maybe .pm-cover:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Keins passt: neues Selfie oder WhatsApp */
.none-fit { margin: 4px 6px 24px; padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: 16px; max-width: 560px; }
.none-fit b { display: block; font-size: .95rem; }
.none-fit p { font-size: .84rem; color: var(--text-dim); margin: 4px 0 0; }
.none-fit .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pk-maybe b { display: block; font-size: .95rem; }
.pk-maybe p { font-size: .84rem; color: var(--text-dim); margin: 4px 0 0; }
.pk-maybe .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Übersicht wie ein Resultatblatt (am Laptop neben dem Paket) */
.side { display: none; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 16px; box-shadow: var(--shadow-soft); }
.slip { background: var(--bg); border-radius: 14px; padding: 14px 14px 12px; }
.slip-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 6px; }
.slip-h b { font-size: 1.05rem; letter-spacing: -.02em; }
.slip .k { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); text-align: right; }
.slip .lead { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; font-size: .82rem; }
.slip .lead span { color: var(--text-soft); white-space: nowrap; }
.slip .lead i { flex: 1; min-width: 12px; border-bottom: 1px dotted var(--line-strong); translate: 0 -4px; }
.slip .lead b { font-weight: 600; text-align: right; }
.slip .sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line-strong); }
.slip .sum b { font-size: 1.45rem; letter-spacing: -.04em; }
.side-acts { display: grid; gap: 8px; margin-top: 14px; }

/* Fokus: auf dunklem Grund weiss, auf Kacheln als Ring innen */
.hero :focus-visible, .site :focus-visible, .lb :focus-visible, .sup-btn:focus-visible { outline-color: #fff; }
.tile .ph:focus-visible, .pk .cover:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; box-shadow: inset 0 0 0 5px #fff; }
.pick:focus-visible, .dlb:focus-visible { outline-offset: 2px; }

/* Paket ansehen: Aufnahmezeit auf jedem Foto */
.tile .time { position: absolute; left: 6px; bottom: 6px; font-size: .72rem; color: #fff; background: rgba(0,0,0,.5); padding: 2px 6px; border-radius: 6px; pointer-events: none; }

/* Handy: nur das Wichtige. Karte = Knopf + Hilfe, Titelbild = Name, Schritte = Nummer + Wort,
   Treffer = Bild + Kaufleiste (Anzahl und Preis stehen in der Leiste) */
@media (max-width: 1023px) {
  #vLanding .board, .offer > .eyebrow, .offer > .row, #vResults.pkgmode #resP, .pk .pk-info { display: none; }
  #vResults.pkgmode.unsure #resP { display: block; }
  .offer .below { margin-top: 10px; }
  /* Ablauf als Liste untereinander: Nummer links, Titel und ein Satz rechts */
  .steps3 { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .steps3 li { grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; row-gap: 3px; padding: 13px 14px; }
  .steps3 .n { grid-row: span 2; padding-top: 2px; }
  .steps3 span:not(.n) { font-size: .84rem; }
  #vResults.pkgmode .pad-top { padding-bottom: 0; }
}
/* Handy: Kaufleiste klebt immer am unteren Rand, auch bei kurzen Seiten */
@media (max-width: 1023px) {
  #vResults.pkgmode .bar, #vPackage .bar { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; }
  #vResults.pkgmode .wrap, #vPackage .wrap { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* Foto-Wand: nur am Laptop, auf dem Handy bleibt das Titelbild */
.wall { display: none; }
.hero.has-wall > img { display: none; }
.wall img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; background: #222; }
.hero.has-wall::after { background: radial-gradient(ellipse at 50% 52%, rgba(10,10,10,.9), rgba(10,10,10,.66) 58%, rgba(10,10,10,.5)),
  linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0) 18%); }
@keyframes wallDrift { to { transform: translateY(-160px); } }
.hero-cta { display: grid; justify-items: center; margin-top: 30px; width: min(460px, 100%); }
.hero-cta .offer { margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; display: grid; justify-items: center; gap: 12px; color: #fff; }
.hero-cta .offer > .eyebrow, .hero-cta .offer > .row { display: none; }
.hero-cta .offer .btn-p { width: auto; height: 56px; padding: 0 36px; font-size: 1rem; background: #fff; color: #0A0A0A; box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 14px 34px -8px rgba(0,0,0,.5); }
.hero-cta .offer .btn-p:hover { background: #EDEDEA; }
.hero-cta .offer .below { margin-top: 0; }
.hero-cta .offer .link { color: rgba(255,255,255,.88); }
.hero-cta .qr-hint { display: grid; margin-top: 10px; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; }
.hero-cta .qr-hint span span { color: rgba(255,255,255,.72); }
.hero-cta .qr-hint { cursor: zoom-in; transition: background .18s var(--ease); }
.hero-cta .qr-hint:hover { background: rgba(255,255,255,.14); }
.qr-hint:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* QR-Code gross */
.qr-ov { justify-content: center; background: rgba(10,10,10,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.qr-big { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; width: min(440px, calc(100vw - 32px));
  background: var(--surface); border-radius: 24px; padding: 40px 28px 30px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); animation: supIn .22s var(--ease); }
.qr-big .qr-svg svg { width: min(320px, 70vw); height: auto; display: block; margin-bottom: 10px; }
.qr-big b { font-size: 1.15rem; letter-spacing: -.02em; }
.qr-big span { font-size: .9rem; color: var(--text-dim); }
.qr-x { position: absolute; top: 10px; right: 10px; }
.hero-cta .notice { text-align: left; }
/* Handy: Startseite wie am Laptop, nur hochkant. Wand oder Titelbild über den ganzen Bildschirm,
   Name gross, weisser Knopf und Hilfe unten im Bild (beim Daumen) */
@media (max-width: 1023px) {
  /* Handy: fünf schmale Spalten, jedes Foto in seinem eigenen Seitenverhältnis (nicht auf 2:3 beschnitten) */
  .hero.has-wall .wall { display: block; position: absolute; inset: -60px -40px; columns: 5; column-gap: 4px;
    rotate: -4deg; animation: wallDrift 90s linear infinite alternate; }
  .wall img { display: block; height: auto; aspect-ratio: auto; margin: 0 0 4px; break-inside: avoid; border-radius: 5px; }
  /* Etwas weniger als die sichtbare Höhe: Safari legt seine Leiste unten über die Seite. So steht der Knopf
     auf jedem Handy über der Leiste und «So läuft's ab» schaut darunter hervor. Obergrenze, damit grosse
     Handys (Pro Max) nicht ein überlanges Bild bekommen (Levin, 19.10.2026). */
  #vLanding .hero { height: calc(100svh - 96px); min-height: 460px; max-height: 760px; }
  /* Grosse Paketkarte: Höhe aus der Bildschirmhöhe statt aus der Breite. So steht sie auf jedem Handy gleich da,
     mit Kaufleiste unten und dem Anfang der weiteren Vorschläge darunter. */
  .pk .cover { aspect-ratio: auto; height: clamp(240px, calc(100svh - 340px), 640px); }
  #vLanding .hero::after { background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.1) 22%, rgba(10,10,10,.35) 45%, rgba(10,10,10,.88) 72%, rgba(10,10,10,.96)); }
  #vLanding .hero-txt { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  #vLanding .hero-txt h1 { font-size: clamp(3rem, 14.5vw, 4rem); font-weight: 600; letter-spacing: -.055em; line-height: .86; text-transform: uppercase;
    margin: 12px 0 24px; text-wrap: balance; overflow-wrap: anywhere; }
  #vLanding .hero.long .hero-txt h1 { font-size: clamp(2.2rem, 10vw, 3.2rem); line-height: .92; }
  .hero-cta { width: 100%; margin-top: 0; justify-items: stretch; }
  .hero-cta .offer { justify-items: stretch; }
  .hero-cta .offer .btn-p { width: 100%; }
  .hero-cta .qr-hint { display: none !important; }
  #vLanding .how { padding-top: 26px; }
  /* Chat-Blase unten im hellen Bereich unter dem Startbild, nicht auf dem Startknopf */
  body.landing .sup { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  body.landing.has-bar .sup { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}

/* Laptop */
@media (min-width: 1024px) {
  .hero.has-wall .wall { display: grid; position: absolute; inset: -80px -60px; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px;
    rotate: -4deg; align-content: start; animation: wallDrift 90s linear infinite alternate; }
  /* Startseite: Wand (oder Titelbild) über den ganzen Bildschirm, alles mittig wie eine Startnummern-Tafel */
  #vLanding .hero { height: 100svh; min-height: 600px; max-height: none; }
  #vLanding .hero-txt { top: 50%; bottom: auto; translate: 0 -46%; max-width: 1200px; padding-inline: 40px; display: grid; justify-items: center; text-align: center; }
  #vLanding .hero-txt h1 { font-size: clamp(4.5rem, 9.4vw, 10rem); font-weight: 600; letter-spacing: -.055em; line-height: .86; text-transform: uppercase;
    white-space: nowrap; margin: 16px 0 24px; }
  #vLanding .hero.long .hero-txt h1 { white-space: normal; text-wrap: balance; font-size: clamp(3.6rem, 6.4vw, 7rem); max-width: 18ch; }
  /* Logo und Sprache bündig mit dem Inhalt darunter, auch auf sehr breiten Bildschirmen */
  .site { padding-inline: max(40px, calc((100% - 1180px) / 2 + 40px)); }
  #vLanding .board { justify-content: center; text-align: left; }
  .board b { font-size: 1.15rem; }
  /* Unter dem Bild: Schritte über die ganze Breite */
  #vLanding .wrap { max-width: 1180px; padding-inline: 40px; }
  #vLanding .how { padding-top: 56px; }
  .steps3 { gap: 14px; }
  .steps3 li { padding: 20px 20px 22px; gap: 8px; }
  .steps3 b { font-size: 1.05rem; }
  .steps3 span:not(.n) { font-size: .88rem; }
  #vLanding .faq { padding-top: 40px; display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 40px; }
  #vLanding .faq .eyebrow { padding-top: 16px; align-self: start; grid-row: 1 / span 5; }
  #vLanding .faq details { grid-column: 2; }
  #vLanding .foot { padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }
  .dock { display: none !important; }
  .res-one { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; gap: 28px; }
  .pk { max-width: none; }
  .pk .cover { aspect-ratio: auto; height: clamp(320px, calc(100svh - 300px), 720px); }
  .pk .pk-info { display: none; }
  .side { display: block; position: sticky; top: 84px; }
  .pkg-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
  .pkg-layout .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #vResults.pkgmode .bar, #vPackage .bar { display: none; }
}

@media (hover: hover) and (pointer: fine) {
  #camBtn { display: none; }
  #fileBtn { background: var(--accent); color: #fff; box-shadow: var(--shadow-btn); }
  #fileBtn:hover { background: var(--accent-hover); }
}

@media (prefers-reduced-motion: reduce) {
  .sheet { animation: none; }
  .spin { animation: none; border-top-color: var(--text-dim); }
  .btn, .toast, .tile img, .sup, .sup-btn, .resend { transition: none; }
  .dock { animation: none; }
  .hero.has-wall .wall { animation: none; }
  .sup-card, .qr-big { animation: none; }
}