@font-face { font-family: "Pen"; src: url(fonts/pen.ttf) format("truetype"); font-display: block; }
@font-face { font-family: "Archivo"; src: url(fonts/archivo.ttf) format("truetype"); font-weight: 100 900; font-stretch: 62% 125%; font-display: block; }

:root {
  --navy: #1d2a4d;
  --navy-ink: #24345e;
  --red: #c4262e;
  --paper: #f7f3ea;
  --paper-2: #fffdf6;
  --sticky: #f4dd6b;
  --cork: #a87a4b;
  --tape: rgba(236, 226, 196, .78);
  --ink: #1c1a17;
  --shadow: 0 2px 3px rgba(40, 22, 6, .28), 0 14px 26px -8px rgba(40, 22, 6, .45);
  --shadow-lift: 0 6px 8px rgba(40, 22, 6, .2), 0 34px 50px -12px rgba(40, 22, 6, .5);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #0f1528; overflow: hidden; }
body { font-family: "Archivo", sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }
::selection { background: var(--red); color: var(--paper); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* stage: fixed 1920x1080 scaled to the viewport */
.deck {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  background:
    radial-gradient(ellipse at 15% 10%, #2c3d6b 0%, transparent 55%),
    radial-gradient(ellipse at 90% 100%, #121a33 0%, transparent 60%),
    var(--navy);
  overflow: hidden;
}
.deck::before, .deck::after {
  content: ""; position: absolute; pointer-events: none;
}
.deck::before {
  width: 1100px; height: 996px; right: -140px; bottom: -120px;
  background: url(img/logo-watermark.webp) center / contain no-repeat;
  opacity: .08;
  transform: rotate(-6deg);
}
.deck::after {
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1.5px, transparent 1.5px);
  background-size: 36px 36px;
}

.slide { position: absolute; inset: 0; visibility: hidden; z-index: 1; }
.slide.active { visibility: visible; }
.slide > * { position: absolute; }

/* paper things */
.paper, .print, .sticky, .label-strip, .slip, .rosette {
  transform: rotate(var(--r, 0deg));
  box-shadow: var(--shadow);
}
.rosette { box-shadow: none; filter: drop-shadow(0 6px 8px rgba(40, 22, 6, .45)); overflow: visible; }
.paper { background: var(--paper); }
.pin { position: absolute; width: 46px; height: 46px; color: var(--pc); z-index: 3; overflow: visible; }
.tape {
  position: absolute; width: 150px; height: 40px; z-index: 3;
  background: var(--tape);
  transform: rotate(var(--tr, 0deg));
  clip-path: polygon(2% 8%, 6% 0, 12% 10%, 20% 2%, 30% 9%, 42% 1%, 55% 8%, 68% 0, 80% 9%, 90% 2%, 98% 10%, 100% 92%, 94% 100%, 86% 90%, 74% 100%, 60% 92%, 48% 100%, 36% 90%, 24% 99%, 12% 91%, 4% 100%, 0 90%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.hand { font-family: "Pen", cursive; font-weight: 400; line-height: .9; }

.print { background: #fff; padding: 12px; cursor: zoom-in; }
.print img, .print video { display: block; width: 100%; height: auto; }
.print.video { cursor: auto; padding: 14px; }
.print.video video { background: #000; aspect-ratio: 848 / 464; object-fit: cover; }

.sticky {
  width: 400px; padding: 34px 30px 40px;
  background: linear-gradient(180deg, #f0d55c 0 24px, var(--sticky) 24px);
}
.sticky.wide { width: 560px; }
.sticky.wide p { font-size: 70px; }
.sticky p { font-size: 84px; color: var(--navy); }

.label-strip {
  background: var(--paper-2); color: var(--navy);
  font-size: 140px; padding: 4px 44px 22px;
  border-bottom: 6px solid var(--red);
}

/* 1 title */
.title-sheet { left: 90px; top: 90px; width: 940px; padding: 60px 70px 70px; }
.hand-sm { font-size: 76px; color: var(--red); margin-bottom: 8px; }
.title { font-size: 186px; color: var(--navy); line-height: .8; letter-spacing: -.01em; }
.lead { font-size: 50px; font-weight: 600; font-stretch: 85%; line-height: 1.15; margin-top: 34px; max-width: 20ch; color: var(--navy-ink); }
.logo-card { padding: 18px 24px; width: 400px; }
.logo-card img { width: 100%; display: block; mix-blend-mode: multiply; }

/* 3 */
.headline-sheet { padding: 26px 48px 34px; }
.h2 { font-size: 128px; color: var(--navy); white-space: nowrap; }
.card { padding: 40px 56px 46px; }
.ruled {
  background:
    linear-gradient(90deg, transparent 38px, rgba(196, 38, 46, .45) 38px 40px, transparent 40px),
    repeating-linear-gradient(180deg, transparent 0 68px, rgba(29, 42, 77, .16) 68px 70px),
    var(--paper-2);
  background-position: 0 0, 0 32px, 0 0;
}
.card h3 { font-family: "Pen", cursive; font-weight: 400; font-size: 104px; color: var(--red); line-height: 1; margin-bottom: 14px; }
.card ul { list-style: none; }
.card li { font-size: 44px; line-height: 70px; padding-left: 34px; position: relative; color: var(--navy-ink); }
.card li::before { content: ""; position: absolute; left: 4px; top: 33px; width: 18px; height: 4px; background: var(--red); border-radius: 2px; transform: rotate(-8deg); }
.card strong { font-weight: 750; color: var(--navy); }
.s-ablauf .card { padding: 34px 40px 38px; }
.s-ablauf .card h3 { font-size: 84px; margin-bottom: 0; }
.s-ablauf .day-sub { font-size: 34px; font-weight: 750; color: var(--navy); margin-bottom: 14px; }
.s-ablauf .card li { font-size: 30px; line-height: 44px; margin-bottom: 10px; }
.s-ablauf .card li::before { top: 21px; }
.note-inline { font-size: 66px; color: var(--red); margin-top: 12px; padding-left: 34px; }

/* 4 slips */
.slips { left: 110px; top: 270px; width: 1100px; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 44px 44px; }
.slips .slip { position: relative; background: var(--paper-2); padding: 34px 40px 40px; min-height: 190px; justify-content: center; border-top: 14px solid var(--navy); display: flex; flex-direction: column; gap: 4px; }
.slip b { font-weight: 800; font-stretch: 75%; font-size: 76px; line-height: 1; color: var(--navy); letter-spacing: -.01em; text-transform: uppercase; }
.slip span { font-size: 38px; color: #4a4642; font-weight: 500; }
.slip.soft { border-top-color: var(--red); }

/* 5 */
.rosette text { font-family: "Archivo"; font-weight: 800; font-stretch: 75%; font-size: 30px; fill: var(--navy); }
.rosette text.small { font-size: 22px; font-weight: 600; }
.rosette { height: auto; aspect-ratio: 2 / 3; }

/* galleries */
.s-gallery .label-strip { left: 90px; top: 34px; font-size: 116px; z-index: 60; }
.wall { left: 70px; top: 190px; width: 1780px; height: 840px; }
.wall .print { position: absolute; padding: 9px; }
.wall .print img { width: 100%; height: 100%; object-fit: cover; }
.wall[data-overlap] { top: 175px; height: 870px; left: 60px; width: 1800px; }
.wall .print { transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.wall .print:hover { z-index: 50 !important; transform: rotate(0deg) scale(1.04); box-shadow: var(--shadow-lift); }

/* 11 */
.big-sheet { left: 220px; top: 170px; width: 1100px; padding: 90px 110px 110px; }
.mega { font-size: 300px; color: var(--navy); line-height: .78; }
.scribble { width: 640px; height: 64px; margin-top: 20px; display: block; }

/* 12 */
.flyer { left: 100px; top: 110px; width: 900px; min-height: 760px; padding: 70px 80px 60px; box-shadow: none; filter: drop-shadow(0 3px 2px rgba(40, 22, 6, .25)) drop-shadow(0 16px 18px rgba(40, 22, 6, .35)); background: var(--paper-2); }
.flyer .h2 { white-space: normal; line-height: 1; }
.flyer-copy { font-size: 46px; line-height: 1.3; color: var(--navy-ink); margin-top: 26px; max-width: 30ch; text-wrap: pretty; }
.flyer-copy.small { font-size: 36px; color: #5a5450; margin-top: 30px; }
.flyer-copy strong { color: var(--red); font-weight: 750; }
.tabs { list-style: none; position: absolute; top: 0; bottom: 0; left: 100%; width: 380px; display: flex; flex-direction: column; border-left: 3px dashed rgba(29, 42, 77, .35); }
.tabs li { flex: 1; background: var(--paper-2); border-bottom: 3px dashed rgba(29, 42, 77, .35); display: flex; flex-direction: column; justify-content: center; padding-left: 36px; gap: 4px; transform-origin: left center; }
.tabs li:last-child { border-bottom: none; }
.tabs b { font-family: "Pen"; font-weight: 400; font-size: 72px; line-height: 1; color: var(--red); }
.tabs span { font-size: 34px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--navy); letter-spacing: .02em; }
.tabs li:nth-child(1) { transform: rotate(-1.2deg); }
.tabs li:nth-child(2) { transform: translateX(4px) rotate(1.6deg); clip-path: polygon(0 0, 100% 0, 97% 35%, 100% 65%, 96% 100%, 0 100%); }
.tabs li:nth-child(3) { transform: rotate(-2deg); }
.qr { padding: 16px; cursor: zoom-in; }
.scan-note { left: 1480px; top: 740px; font-size: 110px; color: var(--paper-2); transform: rotate(var(--r)); text-shadow: 0 3px 6px rgba(30, 15, 3, .55); }

/* 13 */
.ausschreibung { left: 150px; top: 260px; width: 1300px; padding: 56px 80px 64px; background: var(--paper-2); }
.aus-head { font-weight: 700; font-stretch: 70%; text-transform: uppercase; letter-spacing: .14em; font-size: 34px; color: var(--red); padding-bottom: 18px; border-bottom: 4px solid var(--navy); }
.ausschreibung table { width: 100%; border-collapse: collapse; }
.ausschreibung td { font-size: 60px; padding: 30px 0 26px; border-bottom: 2px solid rgba(29, 42, 77, .18); color: var(--navy); vertical-align: baseline; }
.ausschreibung tr:last-child td { border-bottom: none; }
.ausschreibung td:first-child { width: 430px; font-weight: 750; font-stretch: 75%; font-variant-numeric: tabular-nums; }
.ausschreibung td:last-child { font-weight: 500; }

/* 14 */
.end-card { left: 50%; top: 50%; width: 900px; padding: 50px 60px; translate: -50% -58%; }
.end-card img { width: 100%; display: block; mix-blend-mode: multiply; }
.end-note { left: 0; right: 0; text-align: center; top: 800px; font-size: 150px; color: var(--paper-2); transform: rotate(var(--r)); text-shadow: 0 3px 8px rgba(30, 15, 3, .55); }

/* the one motion: things get pinned to the board */
@media (prefers-reduced-motion: no-preference) {
  .slide.active > :is(.paper, .print, .sticky, .label-strip, .rosette, .slips, .hand),
  .slide.active .wall .print {
    animation: settle .7s cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
}
@keyframes settle {
  from { opacity: 0; transform: rotate(calc(var(--r, 0deg) * 2.2)) translateY(-26px) scale(1.04); box-shadow: var(--shadow-lift); }
}
.slide.active .rosette { animation-name: settle-r; }
@keyframes settle-r { from { opacity: 0; transform: rotate(calc(var(--r) - 25deg)) scale(.8); } }

/* hud */
.hud { position: fixed; right: 18px; bottom: 14px; display: flex; align-items: center; gap: 4px; z-index: 20; opacity: 0; transition: opacity .3s; }
body:hover .hud, .hud:focus-within { opacity: 1; }
.hud button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(247, 243, 234, .92); cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.hud button:hover { background: #fff; }
.hud button:disabled { opacity: .4; cursor: default; }
.hud svg { width: 20px; height: 20px; fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.count { font: 600 15px/1 "Archivo"; font-variant-numeric: tabular-nums; color: var(--paper); padding: 0 8px; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }

.lightbox { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(26, 16, 8, .82); backdrop-filter: blur(6px); cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 92vw; max-height: 90vh; background: #fff; padding: 12px; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
@media (prefers-reduced-motion: no-preference) {
  .lightbox:not([hidden]) img { animation: pop .45s cubic-bezier(.16, 1, .3, 1); }
  @keyframes pop { from { transform: scale(.9) rotate(-2deg); opacity: 0; } }
}