/* KACKESTIFT — Edition 2026, verspielt */
@font-face { font-family: 'Bricolage'; src: url('../assets/fonts/bricolage-wght.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../assets/fonts/fraunces-latin-wght.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../assets/fonts/fraunces-latin-wght-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../assets/fonts/outfit-latin-wght.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --paper: #f3ead9;
  --paper-2: #eadcc2;
  --paper-3: #fbf6ec;
  --ink: #2a1810;
  --ink-2: #5d4536;
  --choc: #5a2f1f;
  --choc-2: #7b4a32;
  --banana: #ffc93c;
  --pink: #ff8db4;
  --mint: #b6e3c8;
  --sky: #a9d4f5;
  --line: rgba(42, 24, 16, .14);
  --shadow: 0 1px 1px rgba(42,24,16,.06), 0 6px 14px rgba(42,24,16,.10), 0 22px 48px rgba(42,24,16,.12);
  --r: 22px;
  --display: 'Bricolage', 'Outfit', system-ui, sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Outfit', system-ui, sans-serif;
  --gut: clamp(16px, 4vw, 56px);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 clamp(16px, 1.05vw + 10px, 19px)/1.55 var(--sans);
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); line-height: .95; margin: 0; letter-spacing: -.02em; }
h2 { font-size: clamp(40px, 6.2vw, 96px); font-weight: 800; }
h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 700; }
p { margin: 0 0 1em; }
.hl { color: var(--choc); font-family: var(--serif); font-style: italic; font-weight: 600; letter-spacing: -.01em; }
.kicker { font: 600 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 18px; display: inline-flex; gap: 10px; align-items: center; }
.kicker::before { content: ''; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.sub { color: var(--ink-2); max-width: 46ch; margin-top: 18px; }
.fineprint { font-size: 13px; color: var(--ink-2); opacity: .85; margin-top: 14px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 10px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--banana); outline-offset: 3px; border-radius: 8px; }

/* Papierkorn über allem */
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 60; background: url('../assets/images/grain.png'); opacity: .16; mix-blend-mode: multiply; }

/* 3D-Ebene */
#pen3d { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 2; pointer-events: none; }
body.over-pen { cursor: grab; }
body.grabbing, body.grabbing * { cursor: grabbing !important; user-select: none; }
#labels { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.lbl { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .35s; will-change: transform; }
.lbl .dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--banana); box-shadow: 0 0 0 3px var(--ink); }
.lbl .stem { position: absolute; width: 2px; background: var(--ink); left: -1px; }
.lbl .tag { position: absolute; transform: translateX(-50%); white-space: nowrap; background: var(--paper-3); border: 2px solid var(--ink); border-radius: 999px; padding: 6px 13px 6px; font: 700 14px/1 var(--display); box-shadow: 3px 3px 0 var(--ink); }
.lbl .tag small { display: block; font: 400 11.5px/1.25 var(--sans); color: var(--ink-2); margin-top: 3px; text-align: center; }

/* Ladebildschirm */
.loader { position: fixed; inset: 0; z-index: 90; background: var(--paper); display: grid; place-content: center; justify-items: center; gap: 22px; transition: opacity .6s, visibility .6s; }
.loader.done { opacity: 0; visibility: hidden; }
.loader-pen { display: flex; align-items: center; animation: twirl 1.4s ease-in-out infinite; }
.lp-body { width: 110px; height: 18px; background: linear-gradient(#7b4a32, #5a2f1f 45%, #3b1f14); border-radius: 4px 0 0 4px; }
.lp-ring { width: 10px; height: 20px; background: linear-gradient(#fff, #bbb 50%, #888); }
.lp-tip { width: 22px; height: 12px; background: #3b2516; border-radius: 0 9px 9px 0; }
.loader-text { font: 700 18px var(--display); margin: 0; }
.loader-text .dots::after { content: ''; animation: dots 1.2s steps(4) infinite; }
.loader-bar { width: 180px; height: 6px; border-radius: 6px; background: var(--paper-2); overflow: hidden; }
.loader-bar span { display: block; height: 100%; width: 30%; background: var(--choc); border-radius: 6px; transition: width .3s; }
@keyframes twirl { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) translateY(-6px); } }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

/* Kopf */
.top { position: fixed; top: 12px; left: var(--gut); right: var(--gut); z-index: 50; display: flex; align-items: center; gap: 18px; padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(251, 246, 236, .78); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border: 1px solid var(--line); box-shadow: 0 6px 24px rgba(42,24,16,.08); transition: transform .4s; }
.top.hide { transform: translateY(-120%); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 19px var(--display); letter-spacing: -.02em; }
.logo svg { width: 46px; transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.logo:hover svg { transform: rotate(-12deg) scale(1.1); }
.nav { display: flex; gap: 4px; margin: 0 auto; }
.nav a { text-decoration: none; font-weight: 500; font-size: 15px; padding: 8px 14px; border-radius: 999px; transition: background .2s; }
.nav a:hover, .nav a.on { background: var(--paper-2); }
.top-right { display: flex; align-items: center; gap: 8px; }
.price-chip { text-decoration: none; background: var(--ink); color: var(--paper); font: 700 15px var(--display); padding: 10px 18px; border-radius: 999px; transition: transform .2s; }
.price-chip:hover { transform: rotate(-3deg) scale(1.05); background: var(--choc); }
.fly-toggle { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--paper-3); border-radius: 999px; padding: 7px 12px 7px 9px; font: 700 14px var(--display); color: var(--ink); cursor: pointer; }
.fly-toggle svg { width: 20px; }
.fly-toggle[aria-pressed="false"] { opacity: .45; }
.fly-toggle.bump { animation: bump .5s; }
@keyframes bump { 30% { transform: scale(1.25) rotate(-6deg); } }
.menu-btn { display: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--paper-2); cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.menu-btn span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s; }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-nav { position: fixed; top: 74px; left: var(--gut); right: var(--gut); z-index: 49; background: var(--paper-3); border-radius: 24px; padding: 10px; box-shadow: var(--shadow); display: grid; }
.mobile-nav[hidden] { display: none; }
.mobile-nav a { text-decoration: none; font: 700 24px var(--display); padding: 12px 14px; border-radius: 14px; }
.mobile-nav a:active { background: var(--paper-2); }

/* Knöpfe */
.btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; border: 2px solid var(--ink); font: 700 17px/1 var(--display); padding: 16px 24px; border-radius: 999px; cursor: pointer; transition: transform .2s cubic-bezier(.3,1.6,.5,1), box-shadow .2s, background .2s; background: var(--paper-3); color: var(--ink); }
.btn svg { width: 20px; transition: transform .25s; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translate(1px, 1px); box-shadow: 0 0 0 var(--ink); }
.btn-primary { background: var(--banana); }
.btn-ghost { background: transparent; }
.btn-small { padding: 10px 16px; font-size: 15px; }
.btn-big { font-size: 20px; padding: 20px 30px; }

/* 1 · Bühne */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 120px var(--gut) 80px; background: radial-gradient(120% 90% at 72% 55%, #fbf5ea 0%, var(--paper) 45%, #e9dcc4 100%); overflow: hidden; }
.hero-copy { position: relative; z-index: 4; max-width: 640px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 999px; background: var(--paper-3); border: 1px solid var(--line); }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: #3fb46a; box-shadow: 0 0 0 0 rgba(63,180,106,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(63,180,106,0); } 100% { box-shadow: 0 0 0 0 rgba(63,180,106,0); } }
.mega { font-size: clamp(76px, 13.5vw, 210px); font-weight: 800; line-height: .82; letter-spacing: -.05em; margin: 24px 0 26px; color: var(--ink); }
.mega .row { display: block; white-space: nowrap; }
.mega .row + .row { color: var(--choc); padding-left: .5em; }
.mega .ch { display: inline-block; transition: transform .45s cubic-bezier(.3,1.8,.4,1), color .3s; cursor: default; transform-origin: 50% 90%; }
.mega .ch:hover, .mega .ch.boing { transform: translateY(-.12em) rotate(-8deg) scale(1.08); color: var(--banana); -webkit-text-stroke: 3px var(--ink); }
.mega .ch.in { animation: dropIn .9s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes dropIn { from { transform: translateY(-60%) rotate(-14deg); opacity: 0; } }
.lead { font-size: clamp(18px, 1.4vw, 23px); max-width: 30ch; color: var(--ink-2); }
.lead em { font-family: var(--serif); color: var(--choc); font-weight: 600; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-hint { position: absolute; z-index: 4; right: calc(var(--gut) + 30vw); top: 24%; display: flex; flex-direction: column; align-items: flex-end; color: var(--ink-2); font: 600 20px/1.05 var(--serif); font-style: italic; transform: rotate(-6deg); pointer-events: none; }
.hero-hint svg { width: 110px; color: var(--choc-2); transform: scaleX(-1) rotate(10deg); }
.hero-stamp { position: absolute; z-index: 4; right: var(--gut); bottom: 9%; width: 132px; height: 132px; display: grid; place-items: center; }
.hero-stamp svg { position: absolute; inset: 0; animation: spin 18s linear infinite; }
.hero-stamp text { font: 700 15.5px var(--display); letter-spacing: .12em; text-transform: uppercase; fill: var(--ink); }
.hero-stamp b { width: 62px; height: 62px; border-radius: 50%; background: var(--pink); display: grid; place-items: center; font: 800 22px var(--display); border: 2px solid var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; z-index: 4; width: 28px; height: 46px; border: 2px solid var(--ink); border-radius: 20px; margin-left: -14px; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 9px; margin-left: -2px; background: var(--ink); border-radius: 4px; animation: wheel 1.8s infinite; }
@keyframes wheel { 60% { transform: translateY(14px); opacity: 0; } 61% { transform: none; opacity: 0; } }

/* Laufband */
.ticker { position: relative; z-index: 4; background: var(--ink); color: var(--paper); transform: rotate(-1.6deg); margin: -26px -20px 0; padding: 18px 0; overflow: hidden; box-shadow: 0 10px 30px rgba(42,24,16,.25); }
.ticker-track { display: flex; align-items: center; gap: 28px; width: max-content; animation: tick 34s linear infinite; font: 800 clamp(22px, 2.6vw, 38px) var(--display); white-space: nowrap; letter-spacing: -.01em; }
.ticker i { width: 26px; height: 26px; flex: none; background: var(--banana); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }

/* 2 · Explosion */
.explode { position: relative; height: 340vh; }
.explode-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding: 110px var(--gut) 40px; pointer-events: none; }
.explode-head { position: relative; z-index: 1; }
.explode-head h2 { font-size: clamp(36px, 5vw, 76px); }
.explode-foot { display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-weight: 500; margin: 0; }
.scroll-mini { width: 18px; height: 28px; border: 2px solid currentColor; border-radius: 10px; position: relative; }
.scroll-mini::after { content: ''; position: absolute; left: 50%; top: 5px; width: 3px; height: 6px; margin-left: -1.5px; background: currentColor; border-radius: 2px; animation: wheel 1.8s infinite; }

/* 3 · Härte */
.hard { position: relative; min-height: 130vh; padding: 120px var(--gut) 80px; display: flex; align-items: center; background: radial-gradient(90% 70% at 72% 45%, #fff9ef 0%, var(--paper) 60%); }
.hard-inner { position: relative; z-index: 4; max-width: 560px; }
.grade-card { margin-top: 30px; background: rgba(251,246,236,.92); border: 2px solid var(--ink); border-radius: var(--r); padding: 24px; box-shadow: 6px 6px 0 var(--ink); }
.grade-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.grade-code { width: 70px; height: 70px; flex: none; border-radius: 18px; background: var(--choc); color: var(--paper); display: grid; place-items: center; font: 800 30px var(--display); transition: transform .4s cubic-bezier(.3,1.8,.4,1); }
.grade-code.pop { transform: rotate(-10deg) scale(1.15); }
.grade-use { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.grade-star { margin-left: auto; font: 700 12px var(--display); text-transform: uppercase; letter-spacing: .08em; background: var(--banana); padding: 6px 10px; border-radius: 999px; border: 2px solid var(--ink); transform: rotate(4deg); }
.grade-star[hidden] { display: none; }
.grade-text { margin: 16px 0 18px; min-height: 3.1em; }
.grade-slider input { width: 100%; appearance: none; -webkit-appearance: none; height: 14px; border-radius: 10px; background: linear-gradient(90deg, #2b1a11, #45291a 50%, #8a5a38); outline-offset: 6px; cursor: pointer; }
.grade-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%; background: var(--banana); border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); transition: transform .15s; }
.grade-slider input::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--banana); border: 3px solid var(--ink); }
.grade-slider input:active::-webkit-slider-thumb { transform: scale(1.15); }
.ticks { display: flex; justify-content: space-between; font: 700 12px var(--display); color: var(--ink-2); margin-top: 8px; padding: 0 6px; }
.probe { position: relative; margin-top: 18px; height: 120px; border-radius: 14px; background: #fffdf8; box-shadow: inset 0 0 0 1px var(--line), inset 0 2px 8px rgba(42,24,16,.06); overflow: hidden; }
.probe canvas { width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.probe-hint { position: absolute; right: 14px; bottom: 10px; font: italic 600 15px var(--serif); color: var(--ink-2); opacity: .7; pointer-events: none; transition: opacity .4s; }
.probe.used .probe-hint { opacity: 0; }

/* Abschnitte allgemein */
section { position: relative; z-index: 4; }
.section-head { padding: 0 var(--gut); max-width: 1400px; margin: 0 auto 40px; }

/* 4 · Studio */
.studio { padding: 120px 0 100px; background: var(--paper-2); }
.studio-wrap { max-width: 1400px; margin: 0 auto; padding: 0 var(--gut); }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--ink); padding: 8px; border-radius: 20px 20px 0 0; }
.tool { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: var(--paper); font: 600 15px var(--display); padding: 10px 14px; border-radius: 12px; cursor: pointer; transition: background .2s; }
.tool svg { width: 18px; }
.tool:hover { background: rgba(255,255,255,.1); }
.tool.active { background: var(--banana); color: var(--ink); }
.tool select { font: 700 15px var(--display); background: var(--paper-3); color: var(--ink); border: 0; border-radius: 8px; padding: 4px 6px; }
.tool-save { background: var(--pink); color: var(--ink); }
.tool-save:hover { background: #ffa6c6; }
.spacer { flex: 1; }
.sheet { position: relative; height: min(70vh, 640px); background: #fffdf8; border-radius: 0 0 20px 20px; box-shadow: var(--shadow); overflow: hidden; }
.sheet::before { content: ''; position: absolute; inset: 0; background: url('../assets/images/grain.png'); opacity: .1; mix-blend-mode: multiply; pointer-events: none; z-index: 1; }
.sheet canvas { width: 100%; height: 100%; touch-action: none; cursor: none; }
.sheet-empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; color: var(--ink-2); transition: opacity .5s; }
.sheet-empty b { font: 800 clamp(30px, 4vw, 56px) var(--display); color: rgba(42,24,16,.18); }
.sheet-empty span { font: italic 600 22px var(--serif); color: rgba(42,24,16,.3); }
.sheet.used .sheet-empty { opacity: 0; }
.stroke-meter { position: absolute; z-index: 2; right: 16px; bottom: 14px; font: 600 13px var(--sans); background: var(--paper-3); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
.pen-cursor { position: fixed; z-index: 70; width: 46px; height: 46px; pointer-events: none; margin: -44px 0 0 -2px; display: none; filter: drop-shadow(2px 4px 3px rgba(42,24,16,.3)); }
.pen-cursor.on { display: block; }

/* 5 · Herstellung */
.process { padding: 120px 0; }
.steps { list-style: none; margin: 0 auto; padding: 0 var(--gut); max-width: 1400px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: s; }
.step { position: relative; background: var(--paper-3); border: 2px solid var(--ink); border-radius: var(--r); padding: 26px 22px 22px; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.step:nth-child(1) { transform: rotate(-1.6deg); background: #fff3d1; }
.step:nth-child(2) { transform: rotate(1.2deg); background: #ffe4ee; }
.step:nth-child(3) { transform: rotate(-.8deg); background: #e3f5ea; }
.step:nth-child(4) { transform: rotate(1.8deg); background: #e4f0fb; }
.step:hover { transform: rotate(0) translateY(-8px); box-shadow: 6px 6px 0 var(--ink); }
.step-n { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 800 26px var(--display); margin-bottom: 18px; }
.step h3 { margin-bottom: 10px; }
.step p { font-size: 16px; color: var(--ink-2); }
.step-time { display: inline-block; font: 700 12px var(--display); letter-spacing: .06em; text-transform: uppercase; border-top: 2px dashed var(--line); padding-top: 12px; }

/* 6 · Werktisch */
.table { padding: 120px 0 100px; background: var(--ink); color: var(--paper); }
.table .kicker, .table .sub { color: rgba(243,234,217,.7); }
.table .hl { color: var(--banana); }
.desk { position: relative; margin: 0 var(--gut); height: min(78vh, 760px); border-radius: 28px; overflow: hidden; touch-action: pan-y;
  background: radial-gradient(90% 80% at 50% 40%, rgba(255,214,160,.22), transparent 70%), linear-gradient(180deg, #6b4a33, #4d331f), #5b3d27; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 30px 80px rgba(0,0,0,.35); }
.desk::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(91deg, rgba(0,0,0,.0) 0 22px, rgba(0,0,0,.07) 23px 24px, rgba(255,255,255,.02) 25px 60px), url('../assets/images/grain.png'); opacity: .9; mix-blend-mode: multiply; pointer-events: none; }
.polaroid { position: absolute; left: 0; top: 0; margin: 0; width: clamp(150px, 17vw, 240px); background: #fbfaf6; padding: 10px 10px 0; border-radius: 3px; box-shadow: 0 2px 3px rgba(0,0,0,.25), 0 14px 30px rgba(0,0,0,.35); cursor: grab; user-select: none; touch-action: none; will-change: transform; transition: box-shadow .2s; }
.polaroid img { aspect-ratio: 1; object-fit: cover; width: 100%; pointer-events: none; }
.polaroid figcaption { font: italic 600 clamp(14px, 1.2vw, 18px)/1 var(--serif); color: #3a2a20; padding: 12px 4px 14px; text-align: center; }
.polaroid.lift { cursor: grabbing; box-shadow: 0 4px 6px rgba(0,0,0,.2), 0 34px 60px rgba(0,0,0,.45); }
.polaroid::after { content: ''; position: absolute; top: -10px; left: 50%; width: 70px; height: 22px; margin-left: -35px; background: rgba(255,240,200,.55); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.desk-tidy { position: absolute; right: 16px; bottom: 16px; z-index: 999; font: 700 14px var(--display); padding: 10px 16px; border-radius: 999px; border: 0; background: var(--banana); cursor: pointer; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(20,12,8,.92); display: grid; place-items: center; padding: 20px; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: min(92vw, 900px); animation: pop .35s cubic-bezier(.3,1.5,.5,1); }
.lightbox img { max-height: 80vh; width: auto; margin: 0 auto; border-radius: 6px; }
.lightbox figcaption { color: var(--paper); text-align: center; font: italic 600 20px var(--serif); margin-top: 14px; }
.lightbox button { position: absolute; border: 0; background: var(--paper-3); width: 52px; height: 52px; border-radius: 50%; font: 400 32px/1 var(--sans); cursor: pointer; }
.lb-close { top: 20px; right: 20px; }
.lb-prev { left: 20px; top: 50%; margin-top: -26px; }
.lb-next { right: 20px; top: 50%; margin-top: -26px; }
@keyframes pop { from { transform: scale(.85) rotate(-3deg); opacity: 0; } }

/* 7 · Film */
.film { display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: center; max-width: 1300px; margin: 0 auto; padding: 120px var(--gut); }
.film-frame { position: relative; width: min(360px, 80vw); aspect-ratio: 784 / 1168; border-radius: 34px; padding: 12px; background: #1a120d; box-shadow: var(--shadow), 10px 10px 0 var(--banana); transform: rotate(2.5deg); }
.film-frame video { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; background: #2a1810; }
.rec { position: absolute; top: 26px; left: 26px; display: flex; align-items: center; gap: 6px; font: 700 12px var(--display); color: #fff; letter-spacing: .1em; background: rgba(0,0,0,.4); padding: 5px 9px; border-radius: 999px; }
.rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff4040; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* 8 · Quiz */
.quiz { padding: 120px 0; background: var(--banana); }
.quiz .hl { color: var(--ink); }
.quiz-card { max-width: 820px; margin: 0 auto; padding: 0 var(--gut); }
.q-progress { display: flex; gap: 6px; margin-bottom: 22px; }
.q-progress span { flex: 1; height: 8px; border-radius: 8px; background: rgba(42,24,16,.15); }
.q-progress span.on { background: var(--ink); }
.q-text { font: 800 clamp(28px, 3.4vw, 46px)/1.05 var(--display); margin-bottom: 26px; letter-spacing: -.02em; }
.q-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.q-answers button { text-align: left; font: 600 18px/1.25 var(--sans); background: var(--paper-3); border: 2px solid var(--ink); border-radius: 18px; padding: 18px 20px; cursor: pointer; transition: transform .2s cubic-bezier(.3,1.6,.5,1), box-shadow .2s, background .2s; color: var(--ink); }
.q-answers button:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--ink); }
.q-answers button.picked { background: var(--ink); color: var(--paper); }
.q-anim { animation: qin .45s cubic-bezier(.3,1.4,.5,1); }
@keyframes qin { from { transform: translateX(40px); opacity: 0; } }
.q-result { background: var(--paper-3); border: 2px solid var(--ink); border-radius: 28px; padding: 30px; box-shadow: 8px 8px 0 var(--ink); display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; }
.q-badge { width: 140px; height: 140px; border-radius: 50%; background: var(--choc); color: var(--paper); display: grid; place-items: center; font: 800 54px var(--display); border: 4px solid var(--ink); animation: badge 1s cubic-bezier(.3,1.6,.5,1); }
@keyframes badge { from { transform: scale(0) rotate(-180deg); } }
.q-result h3 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 10px; }
.q-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* 9 · Künstler */
.artist { display: grid; grid-template-columns: minmax(260px, 440px) 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; max-width: 1300px; margin: 0 auto; padding: 130px var(--gut); }
.artist-photo { position: relative; }
.artist-photo img { border-radius: 30px; aspect-ratio: 7/9; object-fit: cover; width: 100%; box-shadow: var(--shadow); transform: rotate(-2deg); }
.sticker { position: absolute; display: grid; place-items: center; text-align: center; font: 800 20px/1 var(--display); border: 2px solid var(--ink); border-radius: 50%; width: 128px; height: 128px; box-shadow: 4px 4px 0 var(--ink); }
.sticker-pink { background: var(--pink); right: -26px; bottom: 40px; transform: rotate(12deg); animation: wobble 4s ease-in-out infinite; }
@keyframes wobble { 50% { transform: rotate(-4deg) scale(1.04); } }
.artist-copy p { max-width: 44ch; color: var(--ink-2); font-size: clamp(18px, 1.3vw, 21px); margin-top: 22px; }
.artist blockquote { margin: 30px 0 0; font: italic 600 clamp(26px, 2.8vw, 40px)/1.12 var(--serif); color: var(--choc); }

/* 10 · Gästebuch */
.guest { padding: 110px 0 120px; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.22), transparent 60%), #cdb48c; }
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px; max-width: 1300px; margin: 0 auto; padding: 0 var(--gut); }
.note { position: relative; background: #fff3a8; padding: 26px 22px 20px; min-height: 210px; box-shadow: 0 1px 1px rgba(0,0,0,.08), 0 12px 24px -8px rgba(60,40,10,.35); transform: rotate(var(--rot, -2deg)); transition: transform .35s cubic-bezier(.3,1.6,.5,1); display: flex; flex-direction: column; justify-content: space-between; }
.note::before { content: ''; position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a8a, #c22 70%); box-shadow: 0 3px 4px rgba(0,0,0,.3); }
.note:hover { transform: rotate(0) scale(1.03); }
.note p { font: italic 600 19px/1.3 var(--serif); margin: 0 0 14px; }
.note span { font: 600 13px var(--sans); color: var(--ink-2); }
.n1 { --rot: -2.5deg; } .n2 { --rot: 1.8deg; background: #ffd1e1; } .n3 { --rot: -1deg; background: #cdeedd; } .n4 { --rot: 2.6deg; background: #cfe5fb; }
.note.fresh { animation: stick .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes stick { from { transform: translateY(-40px) rotate(14deg) scale(1.2); opacity: 0; } }
.note-new { background: var(--paper-3); gap: 8px; --rot: 1deg; }
.note-new label { font: 800 18px var(--display); }
.note-new textarea, .note-new input { font: 500 16px var(--sans); border: 1.5px dashed rgba(42,24,16,.35); border-radius: 10px; padding: 10px; background: transparent; resize: none; color: var(--ink); width: 100%; }
.note-new .btn { align-self: flex-start; }
.guest .fineprint { text-align: center; margin-top: 36px; }

/* 11 · Edition */
.edition { padding: 120px var(--gut); }
.ed-card { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; border: 2px solid var(--ink); border-radius: 34px; overflow: hidden; background: var(--paper-3); box-shadow: 10px 10px 0 var(--ink); }
.ed-visual { position: relative; background: #1d120c; min-height: 420px; }
.ed-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ed-no { position: absolute; left: 20px; top: 20px; background: var(--paper-3); border: 2px solid var(--ink); border-radius: 999px; padding: 8px 14px; font: 600 14px var(--display); }
.ed-copy { padding: clamp(28px, 4vw, 54px); }
.ed-list { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 10px; }
.ed-list li { padding-left: 34px; position: relative; }
.ed-list li::before { content: ''; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12l4 4 8-8' fill='none' stroke='%232a1810' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; border: 1.5px solid var(--ink); }
.ed-price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.ed-price b { font: 800 clamp(48px, 5vw, 72px) var(--display); letter-spacing: -.03em; }
.ed-price span { color: var(--ink-2); font-size: 15px; }

/* 12 · FAQ */
.faq { padding: 60px 0 140px; }
.faq-list { max-width: 900px; margin: 0 auto; padding: 0 var(--gut); display: grid; gap: 12px; }
.faq details { background: var(--paper-3); border: 2px solid var(--ink); border-radius: 20px; padding: 0 22px; transition: box-shadow .2s, transform .2s; }
.faq details[open] { box-shadow: 5px 5px 0 var(--ink); transform: translate(-2px, -2px); }
.faq summary { list-style: none; cursor: pointer; font: 700 clamp(19px, 1.6vw, 23px) var(--display); padding: 20px 40px 20px 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; background: var(--banana); display: grid; place-items: center; font: 700 22px/1 var(--sans); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-2); padding-bottom: 6px; }

/* Fuß */
.foot { position: relative; z-index: 4; background: var(--ink); color: var(--paper); padding: 60px var(--gut) 30px; overflow: hidden; }
.foot-big { font: 800 clamp(64px, 17vw, 300px)/.8 var(--display); letter-spacing: -.06em; color: var(--choc); margin-bottom: 30px; white-space: nowrap; }
.foot-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 14px; color: rgba(243,234,217,.75); }
.foot-row p { margin: 0; }

/* Modal / Zertifikat */
.modal { border: 2px solid var(--ink); border-radius: 28px; padding: 30px; width: min(520px, 92vw); background: var(--paper-3); color: var(--ink); box-shadow: 10px 10px 0 var(--ink); }
.modal::backdrop { background: rgba(30,18,10,.6); backdrop-filter: blur(4px); }
.modal[open] { animation: pop .4s cubic-bezier(.3,1.5,.5,1); }
.modal-x { position: absolute; right: 14px; top: 14px; margin: 0; }
.modal-x button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--paper-2); font-size: 24px; cursor: pointer; color: var(--ink); }
.modal h3 { font-size: 32px; margin-bottom: 10px; padding-right: 40px; }
.modal form#resForm { display: grid; gap: 14px; margin-top: 18px; }
.modal label { display: grid; gap: 6px; font: 600 14px var(--sans); }
.modal input, .modal select { font: 500 17px var(--sans); padding: 12px 14px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; color: var(--ink); }
.modal .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.modal .check input { width: 20px; height: 20px; margin-top: 1px; flex: none; }
.cert-paper { position: relative; text-align: center; padding: 30px 20px; border: 2px solid var(--choc); outline: 6px double var(--choc); outline-offset: -14px; background: radial-gradient(120% 90% at 50% 40%, #fffdf6, #f6ecd8); border-radius: 6px; }
.cert-kicker { font: 600 12px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--choc); margin: 10px 0 6px; }
.cert-paper h3 { font: 800 46px var(--display); padding: 0; color: var(--choc); }
.cert-no { font: 600 15px var(--sans); margin: 8px 0 18px; }
.cert-name { font: italic 700 32px var(--serif); margin: 0; border-bottom: 1px solid var(--line); display: inline-block; padding: 0 20px 4px; }
.cert-date { font-size: 13px; color: var(--ink-2); margin-top: 10px; }
.cert-sign { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 0 16px; }
.cert-sign span { font: italic 600 26px var(--serif); color: var(--choc); transform: rotate(-6deg); }
.cert-sign svg { width: 86px; color: #b0342a; transform: rotate(-14deg); opacity: .85; }
.cert-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 85; transform: translate(-50%, 220%); visibility: hidden; background: var(--ink); color: var(--paper); font: 700 16px var(--display); padding: 14px 22px; border-radius: 999px; box-shadow: var(--shadow); transition: transform .45s cubic-bezier(.3,1.5,.5,1); pointer-events: none; white-space: nowrap; }
.toast.show { transform: translate(-50%, 0); visibility: visible; }

/* Fliege */
.fly { position: fixed; left: 0; top: 0; z-index: 75; width: 34px; height: 34px; margin: -17px 0 0 -17px; cursor: crosshair; will-change: transform; }
.fly[hidden] { display: none; }
.fly svg { width: 100%; height: 100%; overflow: visible; }
.fly .wings ellipse { fill: rgba(220,235,255,.55); stroke: rgba(80,90,100,.5); stroke-width: .8; transform-box: fill-box; }
.fly .w1 { transform-origin: 100% 60%; animation: flapL .05s linear infinite alternate; }
.fly .w2 { transform-origin: 0% 60%; animation: flapR .05s linear infinite alternate; }
@keyframes flapL { to { transform: rotate(28deg) scaleY(.5); } }
@keyframes flapR { to { transform: rotate(-28deg) scaleY(.5); } }
.fly.dead .wings { display: none; }
.splat { position: fixed; z-index: 74; width: 46px; height: 46px; margin: -23px 0 0 -23px; pointer-events: none; animation: splat 2.4s forwards; }
@keyframes splat { 0% { transform: scale(.3); } 10% { transform: scale(1.1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }
.crumb { position: fixed; z-index: 76; width: 7px; height: 7px; border-radius: 40%; pointer-events: none; }

/* Einblenden */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* Responsiv */
@media (max-width: 1100px) {
  .nav { display: none; }
  .menu-btn { display: flex; }
  .top-right { margin-left: auto; }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .top { top: 8px; padding: 6px 6px 6px 14px; gap: 8px; }
  .logo span { display: none; }
  .hero { align-items: flex-start; min-height: 112svh; padding-top: 100px; }
  .mega { margin: 18px 0; }
  .hero-hint { right: auto; left: 56%; top: auto; bottom: 30%; }
  .hero-stamp { width: 96px; height: 96px; bottom: 16%; right: 14px; }
  .hero-stamp text { font-size: 19px; }
  .hero-stamp b { width: 46px; height: 46px; font-size: 17px; }
  .lead { max-width: none; }
  .hard { align-items: flex-end; padding-top: 50vh; }
  .hard-inner { max-width: none; }
  .film { grid-template-columns: 1fr; justify-items: center; text-align: left; }
  .film-copy { justify-self: stretch; }
  .q-answers { grid-template-columns: 1fr; }
  .q-result { grid-template-columns: 1fr; justify-items: start; }
  .q-badge { width: 110px; height: 110px; font-size: 42px; }
  .artist { grid-template-columns: 1fr; }
  .sticker { right: 8px; }
  .ed-card { grid-template-columns: 1fr; }
  .ed-visual { min-height: 300px; }
  .desk { height: 560px; }
  .toolbar .tool { padding: 9px 10px; font-size: 14px; }
  .tool-save span { display: none; }
  .sheet { height: 62vh; }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; }
  .price-chip { padding: 9px 13px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
}
@media print {
  body * { visibility: hidden !important; }
  .modal, .modal * { visibility: visible !important; }
  .modal { position: fixed; inset: 0; box-shadow: none; border: 0; }
  .modal-x, .cert-actions { display: none; }
  .grain { display: none; }
}

/* Ebenen: Bühne, Explosion und Härte lassen den 3D-Stift über ihrem Hintergrund liegen */
.hero, .explode, .hard { z-index: auto; }
.hero-copy, .hero-hint, .hero-stamp, .scroll-cue, .explode-sticky, .hard-inner { z-index: 4; }
.explode-head { transition: opacity .4s; }
@media (max-width: 820px) {
  body.exploded .explode-head { opacity: 0; }
  .hero-hint { left: 20px; bottom: 15%; align-items: flex-start; }
  .hero-hint svg { transform: rotate(150deg) scaleY(-1); order: 2; width: 90px; margin-left: 110px; margin-top: -30px; }
  .hero-stamp { right: auto; left: 140px; bottom: 4%; }
  .mega { font-size: clamp(64px, 22vw, 120px); }
}
@media (max-width: 820px) {
  .hero-stamp { display: none; }
  .hero-hint { flex-direction: row; align-items: center; gap: 6px; bottom: 13%; }
  .hero-hint svg { order: 2; transform: rotate(8deg); margin: 0; width: 80px; }
}

/* Rechtsseiten */
.page-legal { position: relative; z-index: 4; padding: 140px var(--gut) 100px; }
.legal-wrap { max-width: 760px; margin: 0 auto; background: var(--paper-3); border: 2px solid var(--ink); border-radius: 28px; padding: clamp(26px, 5vw, 56px); box-shadow: 8px 8px 0 var(--ink); }
.legal-wrap h1 { font-size: clamp(44px, 6vw, 80px); font-weight: 800; margin-bottom: 30px; }
.legal-wrap h2 { font-size: clamp(22px, 2vw, 28px); margin: 32px 0 10px; }
.legal-wrap p { color: var(--ink-2); }
.legal-wrap .chapter { font: 600 13px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 1100px) { .legal-nav { display: flex; } }
@media (max-width: 600px) { .legal-nav a { padding: 8px 8px; font-size: 13px; } .top .price-chip { display: none; } }

/* Künstler ohne Porträt */
.artist { grid-template-columns: 1fr; max-width: 1000px; }
.artist-copy { position: relative; }
.artist .sticker-pink { right: 0; top: -10px; bottom: auto; }
@media (max-width: 820px) { .artist .sticker-pink { width: 104px; height: 104px; font-size: 16px; top: -78px; } }

/* Netlify-Honeypot */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Biografie */
.artist { display: block; max-width: 1100px; }
.bio-lead { font: italic 600 clamp(24px, 2.4vw, 36px)/1.2 var(--serif) !important; max-width: 30ch !important; color: var(--choc) !important; }
.bio-text { columns: 2 340px; column-gap: 56px; margin-top: 48px; }
.bio-text p { margin: 0 0 1.1em; color: var(--ink-2); font-size: clamp(16px, 1.1vw, 18px); line-height: 1.7; break-inside: avoid; }
.bio-text p:first-child::first-letter { float: left; font: 800 4.2em/.8 var(--display); color: var(--choc); margin: .06em .1em 0 0; }
.bio-cv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 50px; padding-top: 34px; border-top: 2px solid var(--ink); }
.bio-cv h3 { font-size: 18px; margin-bottom: 14px; }
.bio-cv h3 small { font: 500 13px var(--sans); color: var(--ink-2); }
.bio-cv dl { margin: 0; display: grid; grid-template-columns: 44px 1fr; gap: 10px 12px; font-size: 15px; line-height: 1.45; }
.bio-cv dt { font-weight: 700; font-variant-numeric: tabular-nums; }
.bio-cv dd { margin: 0; color: var(--ink-2); }
.bio-quote { margin: 64px 0 0 !important; font: italic 600 clamp(24px, 2.6vw, 38px)/1.2 var(--serif); color: var(--choc); }
@media (max-width: 820px) {
  .bio-cv { grid-template-columns: 1fr; gap: 26px; }
}
.foot-big { font-size: clamp(52px, 13.2vw, 240px); }
.foot-big span { color: var(--banana); }
.artist .bio-quote { text-wrap: balance; font-size: clamp(32px, 4.3vw, 64px); line-height: 1.08; letter-spacing: -.01em; }
.bio-quote br { display: block; }