@font-face {
  font-family: "Rethink Sans";
  src: url("fonts/RethinkSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rethink Sans";
  src: url("fonts/RethinkSans-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #e4e0d6;
  --paper: #f8f5ee;
  --paper-2: #ede7da;
  --ink: #1b1a17;
  --ink-2: #4d4943;
  --muted: #98917f;
  --line: rgba(27, 26, 23, 0.12);
  --accent: #2b44d6;
  --accent-2: #1d32ad;
  --kraft: #c3a57a;
  --kraft-ink: #2a2218;
  --tape: rgba(238, 230, 208, 0.8);
  --tab-1: #d6ddcb;
  --tab-2: #ead9b4;
  --tab-3: #d0d9ea;
  --hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --ratio: 1.42;
  --tab-w: clamp(24px, 2.1vw, 32px);
  --page-h: min(78svh, calc((100vw - 2 * var(--tab-w) - 120px) / 2 * var(--ratio)));
  --page-w: calc(var(--page-h) / var(--ratio));
  --radius: 10px;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
  :root {
    --tab-w: 26px;
    --page-w: min(calc(100vw - var(--tab-w) - 26px), calc(74svh / var(--ratio)));
    --page-h: min(74svh, calc(var(--page-w) * 1.6));
    --radius: 8px;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  background: var(--bg);
}
html::-webkit-scrollbar { display: none; }

body {
  font-family: "Rethink Sans", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 50% 45%, #eeebe3 0%, var(--bg) 60%, #d8d3c7 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; }

/* ── Scroll-Mechanik ─────────────────────────────────────────── */

.scroller {
  position: relative;
  height: calc(var(--steps, 1) * 100svh);
}
.snap {
  position: absolute;
  left: 0;
  width: 1px;
  height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  pointer-events: none;
}
.stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* ── Chrome (fixe UI) ────────────────────────────────────────── */

.chrome {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px clamp(16px, 3vw, 36px);
  pointer-events: none;
}
.chrome > * { pointer-events: auto; }
.chrome--top { top: 0; }
.chrome--bottom { bottom: 0; }

.brand { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }

.nav { display: flex; gap: clamp(14px, 2.4vw, 32px); font-size: 14px; }
.nav a { position: relative; color: var(--muted); transition: color 0.3s; }
.nav a:hover, .nav a.is-active { color: var(--ink); }
.nav a::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav a.is-active::before { transform: scale(1); }

.counter { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 6.5em; }
.counter__total { color: var(--muted); }
.progress {
  position: relative;
  flex: 0 1 160px;
  height: 1px;
  background: var(--line);
  overflow: hidden;
}
.progress i {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: left;
  transform: scaleX(0);
}
.hint {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  min-width: 6.5em;
  text-align: right;
  transition: opacity 0.4s;
}
.hint.is-hidden { opacity: 0; }

@media (max-width: 767px) {
  .chrome { padding: 16px; }
  .nav { gap: 14px; font-size: 13px; }
  .nav a::before { display: none; }
  .nav a.is-active { color: var(--accent); }
  .hint { display: none; }
  .progress { flex-basis: 100px; }
}

/* ── Buch ────────────────────────────────────────────────────── */

.book {
  position: relative;
  height: var(--page-h);
  perspective: calc(var(--page-w) * 4.5);
  will-change: transform;
}
.book.is-spread { width: calc(var(--page-w) * 2); }
.book.is-single {
  width: var(--page-w);
  margin-right: var(--tab-w);
  perspective: calc(var(--page-w) * 3.2);
}

.leaf {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--page-w);
  height: 100%;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  will-change: transform;
}
.is-single .leaf { left: 0; }

.face {
  position: absolute;
  inset: 0;
  container-type: size;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.face--back { transform: rotateY(180deg); }
.face { opacity: var(--fade, 1); }

/* Lichtabfall auf dem Blatt während es sich bewegt */
.face::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.32));
  opacity: var(--sf, 0);
}
.face--back::after {
  border-radius: var(--radius) 0 0 var(--radius);
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.32));
  opacity: var(--sb, 0);
}

/* Unterlage, Schatten, Seitenkanten */
.book__base {
  position: absolute;
  top: 0;
  width: var(--page-w);
  height: 100%;
  background: var(--paper-2);
  box-shadow:
    0 40px 70px -30px rgba(30, 24, 16, 0.45),
    0 14px 24px -14px rgba(30, 24, 16, 0.3);
}
.base--r { left: 50%; border-radius: 0 var(--radius) var(--radius) 0; }
.base--l { left: calc(50% - var(--page-w)); border-radius: var(--radius) 0 0 var(--radius); }
.is-single .base--r { left: 0; }
.is-single .base--l { display: none; }

.edge {
  position: absolute;
  top: 0.8%;
  height: 98.4%;
  width: 0;
  background: repeating-linear-gradient(90deg, #d9d4ca 0 1px, #f4f1eb 1px 2px);
}
.edge--r { left: calc(50% + var(--page-w)); border-radius: 0 3px 3px 0; }
.edge--l { right: calc(50% + var(--page-w)); border-radius: 3px 0 0 3px; }
.is-single .edge--r { left: var(--page-w); }
.is-single .edge--l { display: none; }

.cast {
  position: absolute;
  top: 0;
  width: var(--page-w);
  height: 100%;
  pointer-events: none;
  opacity: 0;
}
.cast--r {
  left: 50%;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.06) 55%, transparent);
}
.cast--l {
  left: calc(50% - var(--page-w));
  border-radius: var(--radius) 0 0 var(--radius);
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.06) 55%, transparent);
}
.is-single .cast--r { left: 0; }
.is-single .cast--l { display: none; }

/* ── Reiter ──────────────────────────────────────────────────── */

.tab {
  position: absolute;
  top: calc(11% + var(--j) * 17%);
  right: calc(var(--tab-w) * -1);
  width: var(--tab-w);
  height: 15%;
  display: grid;
  place-items: center;
  border-radius: 0 7px 7px 0;
  background: var(--tab-bg, var(--paper-2));
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.06), 3px 2px 8px -4px rgba(0, 0, 0, 0.2);
  color: var(--ink-2);
  font-size: clamp(10px, 0.85vw, 12px);
  font-weight: 600;
  letter-spacing: 0.04em;
  writing-mode: vertical-rl;
  transition: background 0.35s, color 0.35s;
  cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab.is-active { background: var(--accent); color: #fff; }
.face--back .tab {
  right: auto;
  left: calc(var(--tab-w) * -1);
  border-radius: 7px 0 0 7px;
  transform: rotate(180deg);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.06), 3px -2px 8px -4px rgba(0, 0, 0, 0.2);
}

/* ── Seite ───────────────────────────────────────────────────── */

.page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 3.2cqw;
  padding: 8cqw 8cqw 10cqw 10cqw;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--grain), var(--paper);
  background-size: 180px, auto;
}
.face--back .page {
  padding: 8cqw 10cqw 10cqw 8cqw;
  border-radius: var(--radius) 0 0 var(--radius);
}

/* Bundsteg-Schatten */
.page::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10cqw;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.11), rgba(0, 0, 0, 0.03) 35%, transparent);
}
.face--back .page::before {
  left: auto;
  right: 0;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.11), rgba(0, 0, 0, 0.03) 35%, transparent);
}

.page--dots {
  background:
    radial-gradient(circle, rgba(20, 20, 20, 0.16) 0.9px, transparent 1.3px) 0 0 / 4.6cqw 4.6cqw,
    var(--grain),
    var(--paper);
  background-size: 4.6cqw 4.6cqw, 180px, auto;
}

.folio {
  position: absolute;
  bottom: 4.6cqw;
  right: 7cqw;
  z-index: 2;
  font-family: var(--mono);
  font-size: max(9px, 2.1cqw);
  color: var(--muted);
}
.face--back .folio { right: auto; left: 7cqw; }

/* Typo */
.kicker {
  font-weight: 400;
  font-family: var(--mono);
  font-size: max(9px, 2.2cqw);
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.row { display: flex; justify-content: space-between; align-items: flex-start; }
.row--end { align-items: flex-end; }
.num { font-family: var(--mono); font-size: max(10px, 2.6cqw); color: var(--accent); }

.display {
  margin-top: auto;
  font-size: 14cqw;
  font-weight: 600;
  line-height: 0.88;
  letter-spacing: -0.055em;
}
.statement {
  margin-top: auto;
  font-size: 9.6cqw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
}
.title {
  font-size: max(16px, 6.4cqw);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.body {
  max-width: 44ch;
  font-size: max(12px, 3cqw);
  line-height: 1.5;
  color: var(--ink-2);
}

/* Cover */
.page--cover {
  color: var(--kraft-ink);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.07), transparent 12%),
    var(--grain),
    var(--grain),
    var(--kraft);
  background-size: auto, 180px, 64px, auto;
  justify-content: space-between;
  padding-right: 19cqw;
}
.face--back .page--cover,
.face--front .page--backcover { padding-right: 8cqw; padding-left: 19cqw; }
.page--cover .kicker { color: rgba(42, 34, 24, 0.6); }
.page--cover::before { background: linear-gradient(90deg, rgba(60, 40, 15, 0.35), transparent); width: 6cqw; }
.cover__name {
  font-size: 17cqw;
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.06em;
  margin-top: auto;
}
.band {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 9cqw;
  width: 3.4cqw;
  z-index: 2;
  background: linear-gradient(90deg, var(--accent-2), var(--accent) 35%, #4c62e8 55%, #2238b8);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.3), 2px 0 6px rgba(0, 0, 0, 0.35);
}
.page--backcover { justify-content: flex-start; }
.page--backcover .band { right: auto; left: 9cqw; }
.page--backcover .statement { color: var(--kraft-ink); }
.again {
  align-self: flex-start;
  margin-top: 4cqw;
  font-family: var(--mono);
  font-size: max(10px, 2.4cqw);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Inhalt */
.toc { list-style: none; margin-top: auto; display: grid; gap: 1.2cqw; }
.toc a {
  display: flex;
  align-items: baseline;
  gap: 3cqw;
  padding: 3cqw 0;
  border-top: 1px solid var(--line);
  transition: color 0.3s;
}
.toc li:last-child a { border-bottom: 1px solid var(--line); }
.toc__n, .toc__p { font-family: var(--mono); font-size: max(9px, 2.2cqw); color: var(--muted); }
.toc__t { font-size: max(16px, 6.4cqw); font-weight: 600; letter-spacing: -0.035em; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.toc__dots { flex: 1; border-bottom: 1px dotted rgba(20, 20, 20, 0.25); transform: translateY(-0.3em); }
.toc a:hover .toc__t { transform: translateX(1.5cqw); }
.toc a:hover .toc__n { color: var(--accent); }

/* Fotos */
.ph { position: relative; overflow: hidden; background: #d8d3c9; }
.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(1.02);
}
.page--bleed { padding: 0; }
.ph--fill { position: absolute; inset: 0; }
.ph--wide { aspect-ratio: 3 / 2; width: 100%; flex-shrink: 0; }
.ph--tall { aspect-ratio: 4 / 5; width: 58%; margin-top: auto; }
.ph--right { align-self: flex-end; }
.ph--square { aspect-ratio: 1; width: 52%; }
.ph-block { display: flex; flex-direction: column; gap: 1.6cqw; }
.ph-block--right { align-self: flex-end; width: 44%; min-height: 0; }
.ph-block--right .ph--tall { width: 100%; margin: 0; }
.ph-block--right .cap { align-self: flex-end; }
.cap {
  font-family: var(--mono);
  font-size: max(9px, 2cqw);
  color: var(--muted);
}
.cap--right { align-self: flex-end; }
.cap--over {
  position: absolute;
  left: 8cqw;
  bottom: 6cqw;
  z-index: 2;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}
.grid4 {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4cqw;
}
.grid4 .ph { aspect-ratio: 1; }

/* Case */
.meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4cqw 4cqw;
  padding: 3cqw 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.meta dt { font-family: var(--mono); font-size: max(8px, 1.9cqw); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.meta dd { font-size: max(11px, 2.8cqw); font-weight: 500; }
.page .title + .meta { margin-top: auto; }

.stats { margin-top: auto; }
.stats div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3cqw 0;
  border-top: 1px solid var(--line);
}
.stats dd { order: -1; white-space: nowrap; font-size: 11.5cqw; font-weight: 500; letter-spacing: -0.055em; line-height: 1; }
.stats dt { max-width: 40%; text-align: right; font-family: var(--mono); font-size: max(9px, 2.1cqw); line-height: 1.4; color: var(--muted); }

.steps { list-style: none; margin-top: auto; }
.steps li {
  display: flex;
  align-items: baseline;
  gap: 4cqw;
  padding: 2.6cqw 0;
  border-top: 1px solid var(--line);
  font-size: max(18px, 8cqw);
  font-weight: 600;
  letter-spacing: -0.045em;
}
.steps span { font-family: var(--mono); font-size: max(9px, 2.1cqw); font-weight: 400; letter-spacing: 0; color: var(--accent); }

.links { display: grid; margin-top: auto; font-style: normal; }
.links a {
  display: flex;
  justify-content: space-between;
  padding: 2.6cqw 0;
  border-top: 1px solid var(--line);
  font-size: max(13px, 3.6cqw);
  font-weight: 500;
}
.links a:last-child { border-bottom: 1px solid var(--line); }
.links a span { color: var(--muted); transition: transform 0.3s, color 0.3s; }
.links a:hover span[aria-hidden] { color: var(--accent); transform: translate(2px, -2px); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Kennzahl zwischen Fotos */
.figure-note {
  display: flex;
  align-items: baseline;
  gap: 2.4cqw;
  margin: auto 0;
}
.figure-note b { font-size: 7.4cqw; font-weight: 500; letter-spacing: -0.05em; }
.figure-note span { font-family: var(--mono); font-size: max(9px, 2.1cqw); color: var(--muted); }

/* Lebenslauf */
.cv { list-style: none; margin-top: auto; }
.cv li {
  display: grid;
  grid-template-columns: 17cqw 1fr;
  gap: 3cqw;
  align-items: baseline;
  padding: 2.3cqw 0;
  border-top: 1px solid var(--line);
}
.cv li:last-child { border-bottom: 1px solid var(--line); }
.cv time { font-family: var(--mono); font-size: max(9px, 2.1cqw); color: var(--muted); white-space: nowrap; }
.cv span { display: grid; gap: 0.4cqw; font-size: max(11px, 2.7cqw); color: var(--ink-2); }
.cv b { font-size: max(13px, 4.2cqw); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }

.ph--color img { filter: none; }
.figure-note--end { margin: auto 0 0; }

/* Analog */
.display--sub { font-size: 12cqw; }
.ph--film img { filter: sepia(0.18) saturate(0.85) contrast(1.08) brightness(1.02); }
.ph--film::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--grain);
  background-size: 140px;
  opacity: 0.9;
  mix-blend-mode: multiply;
}
.ph--tall-full { flex: 1; min-height: 0; width: 100%; }
.ph-block:has(.ph--tall-full) { flex: 1; min-height: 0; }
.ph-block--push { margin-top: auto; }

.ph--square-lg { aspect-ratio: 1; width: 100%; }
.ph-block--low { margin-top: auto; }
.ph-block--center { margin: auto 0; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.duo .ph-block { gap: 1.2cqw; }
.body--end { margin-top: auto; }

/* Kontaktbogen: Filmstreifen mit Perforation */
.sheet {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4cqw;
  padding: 5cqw 3.2cqw;
  background:
    radial-gradient(circle at 50% 50%, #f1ede6 0 0.55cqw, transparent 0.6cqw) 0 1.6cqw / 3.2cqw 100% repeat-y,
    radial-gradient(circle at 50% 50%, #f1ede6 0 0.55cqw, transparent 0.6cqw) 100% 1.6cqw / 3.2cqw 100% repeat-y,
    #141312;
  background-size: 3.2cqw 3.6cqw, 3.2cqw 3.6cqw, auto;
  border-radius: 2px;
}
.sheet__frame { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.sheet__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.18) saturate(0.85) contrast(1.08);
}
.sheet__frame figcaption {
  position: absolute;
  left: 1.2cqw;
  bottom: 0.8cqw;
  font-family: var(--mono);
  font-size: max(8px, 1.8cqw);
  color: #e9d9a8;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}

.cv__link { display: inline-flex; gap: 0.6em; transition: color 0.3s; }
.cv .cv__link span { display: inline; font-size: inherit; font-weight: 400; color: var(--muted); transition: transform 0.3s, color 0.3s; }
.cv__link:hover { color: var(--accent); }
.cv__link:hover span { color: var(--accent); transform: translate(2px, -2px); }

/* ── Scrapbook ───────────────────────────────────────────────── */

::selection { background: var(--accent); color: #fff; }

.sticker {
  position: absolute;
  top: 9cqw;
  right: 22cqw;
  z-index: 3;
  width: 15cqw;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  background: var(--paper);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 2.1cqw;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  transform: rotate(-12deg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 4px 10px -4px rgba(0, 0, 0, 0.35);
}
.sticker b { display: block; font-family: "Rethink Sans", sans-serif; font-size: 5.6cqw; font-weight: 600; letter-spacing: -0.04em; }

.hand { font-family: var(--hand); font-weight: 500; }
.cap--hand {
  font-family: var(--hand);
  font-size: max(14px, 3.6cqw);
  font-weight: 500;
  line-height: 1;
  color: var(--ink-2);
  padding-left: 1cqw;
}

/* Eingeklebter Abzug: weißer Rand, leicht schief, Washi-Tape */
.print {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.6cqw;
  transform: rotate(var(--r, 0deg));
}
.print__photo { position: relative; }
.print__top {
  position: relative;
  padding: 1.6cqw;
  background: #fffdf8;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), 0 8px 18px -10px rgba(40, 30, 10, 0.45);
  transform-origin: 50% 0;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.7s;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%);
}
.print__photo::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: -2.2cqw;
  left: 50%;
  width: 17cqw;
  height: 4.8cqw;
  translate: -50% 0;
  rotate: -3deg;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.25) 0 2px, transparent 2px 6px),
    var(--tape);
  -webkit-mask: linear-gradient(90deg, transparent 0 1%, #000 1% 99%, transparent 99%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  pointer-events: none;
}
.print[data-tape="l"] .print__photo::before { left: 14cqw; rotate: -38deg; top: -1.2cqw; }
.print[data-tape="r"] .print__photo::before { left: auto; right: -5cqw; translate: 0 0; rotate: 36deg; top: -0.6cqw; }
.print .ph { background: #d9d3c7; }
.print .ph img { filter: none; }
.print--push { margin-top: auto; }
.print--low { margin-top: auto; }
.print--center { margin: auto 0; }
.print--small .print__photo::before { width: 12cqw; height: 3.6cqw; }
.print--small .print__top { padding: 1.1cqw; }
.print--portrait { width: 56%; }

/* Druntergucken: Ecke klappt beim Hover hoch, Klick hebt das Foto am Tape an */
@property --c {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
.peel { --c: 0px; transition: --c 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.peel:hover, .peel:focus-within { --c: 13cqw; }
.peel.is-open { --c: 0px; }
.peel__under {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 4cqw;
  background:
    repeating-linear-gradient(180deg, transparent 0 calc(4.6cqw - 1px), rgba(43, 68, 214, 0.18) calc(4.6cqw - 1px) 4.6cqw),
    var(--grain),
    #f3eee2;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.peel__under p {
  font-size: max(15px, 4.2cqw);
  line-height: 4.6cqw;
  color: var(--accent);
  transform: rotate(-1.5deg);
}
.peel__fold {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: var(--c);
  height: var(--c);
  pointer-events: none;
  background: linear-gradient(135deg, #e9e2d3 0%, #fffdf8 38%, #d8cfbd 49.5%, transparent 50%);
  filter: drop-shadow(-3px -3px 4px rgba(0, 0, 0, 0.25));
}
.peel__btn {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  cursor: pointer;
}
.peel__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.peel.is-open .print__top {
  transform: perspective(1200px) rotateX(68deg);
  box-shadow: 0 30px 40px -20px rgba(40, 30, 10, 0.5);
}
.peel.is-open .peel__fold { opacity: 0; }

/* Kleine Abzüge: kleinere Ecke und Notiz */
.print--small.peel:hover, .print--small.peel:focus-within { --c: 8cqw; }
.print--small .peel__under { padding: 2.2cqw; }
.print--small .peel__under p { font-size: max(11px, 2.9cqw); line-height: 3.5cqw; }

/* Marketing */
.skills { list-style: none; margin-top: auto; }
.skills li {
  display: grid;
  grid-template-columns: 7cqw 1fr;
  column-gap: 2cqw;
  padding: 3cqw 0;
  border-top: 1px solid var(--line);
  font-size: max(12px, 3cqw);
  line-height: 1.45;
  color: var(--ink-2);
}
.skills li:last-child { border-bottom: 1px solid var(--line); }
.skills span { grid-row: span 2; font-family: var(--mono); font-size: max(9px, 2.1cqw); color: var(--accent); padding-top: 1.6cqw; }
.skills b { font-size: max(17px, 6.2cqw); font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; color: var(--ink); }

.chips {
  list-style: none;
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2.4cqw 2cqw;
}
.chips li {
  padding: 1.8cqw 3.4cqw 1.6cqw;
  border-radius: 999px;
  background: var(--tab-1);
  font-size: max(12px, 3.4cqw);
  font-weight: 500;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 3px 8px -5px rgba(0, 0, 0, 0.35);
  rotate: -2deg;
}
.chips li:nth-child(3n + 2) { background: var(--tab-2); rotate: 1.5deg; }
.chips li:nth-child(3n) { background: var(--tab-3); rotate: -0.5deg; }
.chips li:nth-child(4n) { rotate: 2.5deg; }
.stats--single { margin-top: 6cqw; }
.links__handle { margin-left: 0.6em; margin-right: auto; font-weight: 400; color: var(--muted); }

/* ── Cursor ──────────────────────────────────────────────────── */

.has-cursor, .has-cursor * { cursor: none !important; }
.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}
.cursor.is-visible { opacity: 1; }
.cursor__dot {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.25s, opacity 0.2s;
}
.cursor__label {
  position: absolute;
  top: 0;
  left: 0;
  translate: -50% -50%;
  padding: 7px 12px 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--hand);
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  scale: 0.6;
  rotate: -4deg;
  transition: opacity 0.25s, scale 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cursor[data-mode="link"] .cursor__dot { transform: scale(3.2); background: rgba(43, 68, 214, 0.18); }
.cursor.has-label .cursor__dot { opacity: 0; transform: scale(0.4); }
.cursor.has-label .cursor__label { opacity: 1; scale: 1; }

/* ── Ohne JavaScript: normale, lesbare Seitenfolge ───────────── */

html:not(.js) { scroll-snap-type: none; }
html:not(.js) .scroller,
html:not(.js) .chrome--bottom { display: none; }
html:not(.js) .pages {
  container-type: inline-size;
  width: min(560px, calc(100vw - 32px));
  margin: 96px auto 64px;
  display: grid;
  gap: 32px;
}
html:not(.js) .page {
  position: relative;
  aspect-ratio: 1 / 1.42;
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -30px rgba(30, 24, 16, 0.4);
}
html:not(.js) .page::before { display: none; }