/* Videobuch Studio — gleiche Sprache wie die Landingpage, als ruhiges Werkzeug. */
:root {
  --bone: #efeae2; --bone-2: #e6e0d6; --paper: #fbf9f5; --ink: #151311; --ink-2: #3b3732; --mute: #8a837a;
  --hair: rgba(21, 19, 17, .13); --accent: #7a2a1d; --ok: #3f6b4a; --warn: #a0522d;
  --serif: "Instrument Serif", "Times New Roman", serif; --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace; --hand: "Homemade Apple", cursive;
  --pad: clamp(16px, 3vw, 44px); --ease: cubic-bezier(.22, 1, .36, 1); --bar: 72px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--bone); color: var(--ink); font: 400 15px/1.5 var(--sans); }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.02em; }
em { font-style: italic; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.idx { color: var(--mute); }
.lead { color: var(--ink-2); max-width: 52ch; margin: 18px 0 0; font-size: 16px; }

/* Buttons */
.btn { --h: 48px; flex: none; position: relative; display: inline-flex; align-items: center; gap: 14px; height: var(--h); padding: 0 7px 0 22px; border-radius: 999px; font: 500 14px/1 var(--sans); overflow: hidden; isolation: isolate; white-space: nowrap; transition: color .5s var(--ease), opacity .3s; }
.btn i { flex: none; font-style: normal; width: calc(var(--h) - 14px); height: calc(var(--h) - 14px); border-radius: 50%; display: grid; place-items: center; transition: transform .6s var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: translateY(101%); transition: transform .6s var(--ease); }
.btn:hover::before { transform: none; }
.btn:hover i { transform: rotate(-45deg); }
/* Nur Pfeile drehen sich beim Hover, Symbole wie ◎ bleiben ruhig */
.btn:hover i.i--still { transform: scale(1.08); }
.btn:disabled { opacity: .35; pointer-events: none; }
.btn--dark { background: var(--ink); color: var(--bone); }
.btn--dark i { background: var(--bone); color: var(--ink); }
.btn--dark::before { background: var(--accent); }
.btn--light { background: var(--bone); color: var(--ink); }
.btn--light i { background: var(--ink); color: var(--bone); }
.btn--light::before { background: #fff; }
.btn--line { padding: 0 22px; box-shadow: inset 0 0 0 1px var(--hair); }
.btn--line::before { background: var(--ink); }
.btn--line:hover { color: var(--bone); }
.btn--sm { --h: 40px; padding: 0 18px; }
.link { color: var(--ink-2); padding: 6px 0; border-bottom: 1px solid var(--hair); transition: color .3s, border-color .3s; }
.link:hover { color: var(--accent); border-color: var(--accent); }
.circle { width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hair); transition: background .3s, color .3s; }
.circle:hover:not(:disabled) { background: var(--ink); color: var(--bone); }
.circle:disabled { opacity: .3; cursor: default; }

/* Top bar */
.bar { position: sticky; top: 0; z-index: 30; height: var(--bar); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--pad); background: color-mix(in srgb, var(--bone) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--hair); }
.wordmark { font: italic 400 26px/1 var(--serif); }
.steps { display: flex; gap: 26px; }
.steps button { position: relative; display: flex; gap: 8px; padding: 26px 0; color: var(--mute); transition: color .3s; }
.steps button b { font-weight: 500; }
.steps button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.steps button.is-active { color: var(--ink); }
.steps button.is-active::after { transform: none; }
.steps button.is-done { color: var(--ink-2); }
.steps button:disabled { cursor: default; opacity: .5; }
.bar__right { display: flex; justify-content: flex-end; align-items: center; gap: 20px; }
.bar__total { font: 400 22px/1 var(--serif); }

/* Layout */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 460px); min-height: calc(100vh - var(--bar)); }
.main { padding: 56px var(--pad) 40px; min-width: 0; }
.panel { max-width: 860px; animation: in .8s var(--ease); }
.panel--wide { max-width: none; }
@keyframes in { from { opacity: 0; transform: translateY(18px); } }
.panel__head { margin-bottom: 48px; }
.panel__head h1 { font-size: clamp(44px, 5.4vw, 84px); line-height: .92; margin-top: 14px; }
.panel__head h1 em { color: var(--accent); }
.main__foot { max-width: 860px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--hair); }
.side { position: sticky; top: var(--bar); height: calc(100vh - var(--bar)); border-left: 1px solid var(--hair); background: var(--bone-2); display: flex; flex-direction: column; }
.side__stage { flex: 1; display: grid; place-items: center; perspective: 1600px; padding: 32px; min-height: 0; }
.summary { margin: 0; padding: 22px var(--pad) 26px; border-top: 1px solid var(--hair); display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; }
.summary dt { color: var(--mute); }
.summary dd { margin: 0; text-align: right; font-size: 14px; }
.summary .total { font: 400 28px/1 var(--serif); }

.block { margin-top: 52px; }
.block__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--hair); }
.block__head h2 { font-size: 30px; }
.block__head .mono { color: var(--mute); }
.meter { height: 2px; background: var(--hair); margin: -21px 0 22px; }
.meter i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .6s var(--ease); }
.meter--light { margin: 0; background: rgba(255, 255, 255, .2); }
.meter--light i { background: #fff; }

/* Materialien (Texturen rein in CSS) */
.mat-linen { background-color: var(--c); background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 3px), radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, .14), transparent 60%); }
.mat-velvet { background-color: var(--c); background-image: radial-gradient(120% 90% at 35% 25%, rgba(255, 255, 255, .16), transparent 55%), radial-gradient(90% 70% at 80% 90%, rgba(0, 0, 0, .25), transparent 60%); }
.mat-photo { background: var(--c) center / cover; }

/* 3D-Buch */
.book3d { --w: 300px; --r: 1; --d: 18px; position: relative; width: var(--w); height: calc(var(--w) * var(--r)); transform-style: preserve-3d; transform: rotateX(8deg) rotateY(-30deg); transition: transform 1.2s var(--ease), width .8s var(--ease), height .8s var(--ease); }
.book3d:hover { transform: rotateX(4deg) rotateY(-14deg); }
.book3d > * { position: absolute; }
.book3d .front { inset: 0; border-radius: 2px 5px 5px 2px; transform: translateZ(calc(var(--d) / 2)); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12% 12% 12% 16%; color: var(--ink-c, #f3ece0); box-shadow: inset 5px 0 8px -4px rgba(0, 0, 0, .35); }
.book3d .front::after { content: ""; position: absolute; left: 7%; top: 0; bottom: 0; width: 2px; background: linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(255, 255, 255, .12)); }
.book3d .back { inset: 0; transform: translateZ(calc(var(--d) / -2)) rotateY(180deg); border-radius: 5px 2px 2px 5px; box-shadow: -30px 30px 60px rgba(40, 25, 10, .35); }
.book3d .spine { top: 0; left: calc(var(--d) / -2); width: var(--d); height: 100%; transform: rotateY(-90deg); filter: brightness(.78); }
.book3d .pages { top: 2%; right: calc(var(--d) / -2 + 3px); width: calc(var(--d) - 4px); height: 96%; transform: rotateY(90deg); background: repeating-linear-gradient(90deg, #f4f0e8 0 1px, #dcd5c8 1px 2px); }
.book3d .shadow { left: 8%; right: -6%; bottom: -14%; height: 18%; background: radial-gradient(closest-side, rgba(40, 25, 10, .35), transparent); transform: rotateX(90deg) translateZ(calc(var(--w) * var(--r) * -.5)); filter: blur(6px); }
.cover-small { font: 500 8px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; opacity: .75; position: relative; z-index: 1; }
.cover-title { font: 400 calc(var(--w) * .11)/1 var(--serif); letter-spacing: -.01em; margin: 10px 0 6px; position: relative; z-index: 1; overflow-wrap: anywhere; }
.cover-sub { font: italic 400 calc(var(--w) * .05)/1.2 var(--serif); opacity: .85; position: relative; z-index: 1; }
.cover-window { width: 58%; aspect-ratio: 1; margin: 8% 0; background: #0002 center / cover; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .15); position: relative; z-index: 1; }
.foil-gold .cover-title, .foil-gold .cover-small, .foil-gold .cover-sub { background: linear-gradient(100deg, #9c7a3c, #e9d29a 35%, #b08d4a 55%, #f1dfab 75%, #9c7a3c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .25)); }
.foil-silver .cover-title, .foil-silver .cover-small, .foil-silver .cover-sub { background: linear-gradient(100deg, #8d8f93, #f2f3f5 35%, #a3a6ab 55%, #ffffff 75%, #8d8f93); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .3)); }
.foil-blind .cover-title, .foil-blind .cover-small, .foil-blind .cover-sub { color: transparent; text-shadow: 0 1px 0 rgba(255, 255, 255, .18), 0 -1px 0 rgba(0, 0, 0, .35); -webkit-text-stroke: .3px rgba(0, 0, 0, .1); }

/* 01 Formate */
.formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.format { text-align: left; padding: 22px 20px 20px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .4s var(--ease), background .4s; display: flex; flex-direction: column; }
.format:hover { background: rgba(255, 255, 255, .35); }
.format.is-on { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); }
.format__fig { height: 120px; display: flex; align-items: flex-end; margin-bottom: 18px; }
.format__fig i { display: block; background: linear-gradient(110deg, #c9bda9, #ddd3c2 40%, #cbbfab); border-radius: 1px 3px 3px 1px; box-shadow: inset 3px 0 0 rgba(0, 0, 0, .12), 6px 8px 18px rgba(40, 25, 10, .22); }
.format h3 { font-size: 30px; line-height: 1; }
.format h3 sup { font: 500 9px/1 var(--mono); letter-spacing: .08em; color: var(--accent); vertical-align: top; margin-left: 4px; text-transform: uppercase; }
.format p { margin: 8px 0 16px; color: var(--ink-2); font-size: 13px; }
.format .price { margin-top: auto; font: 400 24px/1 var(--serif); }

/* Videos */
.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.add { aspect-ratio: 4 / 5; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--hair); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: background .3s, box-shadow .3s; text-align: center; padding: 10px; }
.add:hover, .add.is-over { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); }
.add__plus { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--bone); display: grid; place-items: center; font-size: 22px; font-weight: 300; margin-bottom: 6px; }
.add__s { color: var(--mute); font-size: 10px; }
.vtile { position: relative; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: var(--bone-2); animation: in .7s var(--ease); }
.vtile video { width: 100%; height: 100%; object-fit: cover; }
.vtile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 60%, rgba(0, 0, 0, .55)); pointer-events: none; }
.vtile__n { position: absolute; left: 10px; top: 10px; z-index: 2; color: #fff; }
.vtile__meta { position: absolute; left: 10px; right: 10px; bottom: 9px; z-index: 2; color: #fff; display: flex; justify-content: space-between; gap: 6px; }
.vtile__meta span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vtile__rm { position: absolute; right: 8px; top: 8px; z-index: 3; width: 26px; height: 26px; border-radius: 50%; background: rgba(251, 249, 245, .9); font-size: 14px; opacity: 0; transition: opacity .3s; }
.vtile:hover .vtile__rm { opacity: 1; }
.vtile.is-out { opacity: .35; }
#demoBtn { margin-top: 18px; }

/* 02 Gestaltung */
.materials { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; }
.mat { text-align: left; }
.mat i { display: block; aspect-ratio: 1; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); transition: transform .5s var(--ease), box-shadow .3s; }
.mat span { display: block; margin-top: 8px; font-size: 12px; color: var(--ink-2); }
.mat:hover i { transform: translateY(-3px); }
.mat.is-on i { box-shadow: 0 0 0 1.5px var(--bone), 0 0 0 3px var(--ink); }
.mat.is-on span { color: var(--ink); }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair); gap: 2px; flex-wrap: wrap; }
.seg button { padding: 10px 18px; border-radius: 999px; font-size: 13px; transition: background .3s, color .3s; }
.seg button.is-on { background: var(--ink); color: var(--bone); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; }
.field { display: block; }
.field--wide { grid-column: 1 / -1; }
.field > span { display: block; color: var(--mute); margin-bottom: 6px; }
.field input, .field textarea, .field select { width: 100%; padding: 10px 0 12px; border: 0; border-bottom: 1px solid var(--hair); background: transparent; outline: none; font-size: 18px; border-radius: 0; resize: vertical; transition: border-color .3s; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); }
.field textarea { font: 400 22px/1.3 var(--serif); }
.layouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lay { text-align: left; }
.lay__pv { aspect-ratio: 1; background: var(--paper); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--hair); display: grid; place-items: center; padding: 16%; transition: box-shadow .3s; }
.lay.is-on .lay__pv { box-shadow: inset 0 0 0 1.5px var(--ink); }
.lay__pv .pp { width: 100%; }
.lay b { display: block; margin-top: 10px; font: 400 22px/1 var(--serif); }
.lay small { color: var(--mute); }

/* Druckseiten-Layouts (Vorschau + Layout-Kacheln) */
.pp img { width: 100%; object-fit: cover; display: block; }
.l-polaroid .pp { background: #fff; padding: 5% 5% 18%; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 8px 20px -8px rgba(0, 0, 0, .25); position: relative; }
.l-polaroid .pp img { aspect-ratio: 1; }
.l-polaroid .pp figcaption { position: absolute; left: 7%; bottom: 5%; font: 400 clamp(6px, .8vw, 11px)/1 var(--mono); letter-spacing: .02em; text-transform: lowercase; }
.l-journal .pp img { aspect-ratio: 4 / 5; }
.l-journal .pp figcaption { margin-top: 8%; font: 400 clamp(6px, .85vw, 12px)/1.9 var(--hand); color: #2c2a6b; }
.l-gallery .pp img { aspect-ratio: 4 / 3; }
.l-gallery .pp figcaption { margin-top: 7%; text-align: center; font: italic 400 clamp(8px, 1.1vw, 16px)/1.2 var(--serif); color: var(--ink-2); }

/* 03 Momente */
.analysis { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin-bottom: 8px; }
.analysis__t { flex: 1; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--hair); border-top-color: var(--ink); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.moments { display: grid; }
.moment { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--hair); }
.moment__pic { position: relative; align-self: start; background: var(--paper); padding: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 14px 30px -14px rgba(40, 25, 10, .35); }
.moment__pic img { width: 100%; object-fit: cover; background: var(--bone-2); }
.moment__pic.is-loading img { opacity: .25; }
.moment__pic.is-loading::after { content: "Analyse …"; position: absolute; inset: 0; display: grid; place-items: center; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.moment__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; margin-bottom: 18px; }
.moment__top h3 { font-size: 28px; line-height: 1.05; min-width: 0; overflow-wrap: anywhere; }
.score { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.score__bar { width: 90px; height: 2px; background: var(--hair); }
.score__bar i { display: block; height: 100%; }
.score b { font: 400 22px/1 var(--serif); }
.strip { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.strip button { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 2px; opacity: .55; transition: opacity .3s; outline-offset: 2px; }
.strip button:hover { opacity: 1; }
.strip button.is-on { opacity: 1; outline: 1.5px solid var(--ink); }
.strip img { width: 100%; height: 100%; object-fit: cover; }
.strip button.is-best::after { content: ""; position: absolute; right: 4px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--accent); }
.scrub { display: flex; align-items: center; gap: 14px; margin: 18px 0 6px; color: var(--mute); }
.scrub input { flex: 1; accent-color: var(--ink); height: 2px; }
.moment .fields { margin-top: 18px; grid-template-columns: 2fr 1fr; }
.moment .field input { font-size: 16px; }
.note { margin: 16px 0 0; padding: 10px 14px; border-radius: 4px; background: rgba(160, 82, 45, .1); color: var(--warn); font-size: 13px; }

/* 04 Vorschau */
.viewer { display: grid; gap: 22px; justify-items: center; }
.spread { --ratio: 1; width: min(100%, 1000px); display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: calc(2 / var(--ratio)); background: var(--paper); border-radius: 3px; position: relative; box-shadow: 0 1px 1px rgba(0, 0, 0, .04), 0 30px 60px -24px rgba(40, 30, 20, .4), 0 60px 100px -50px rgba(40, 30, 20, .3); }
.spread.is-turn { animation: turn .7s var(--ease); }
@keyframes turn { 0% { opacity: .3; transform: translateX(14px); } }
.spread::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 10%; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(60, 45, 30, .08) 42%, rgba(60, 45, 30, .2) 50%, rgba(60, 45, 30, .08) 58%, transparent); pointer-events: none; }
.page { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 11%; }
.page:first-child { background: linear-gradient(90deg, var(--paper) 70%, #f1ede6); }
.page:last-child { background: linear-gradient(270deg, var(--paper) 70%, #f1ede6); }
.page--empty { background: var(--bone-2) !important; }
.page--cover { padding: 0; display: grid; place-items: center; background: var(--bone-2) !important; perspective: 1400px; }
.page__no { position: absolute; bottom: 4.5%; font: 400 clamp(6px, .6vw, 9px)/1 var(--mono); color: var(--mute); }
.page:first-child .page__no { left: 11%; }
.page:last-child .page__no { right: 11%; }
/* Breite UND Höhe beachten: auf niedrigen Seiten (Layflat quer) bleibt oben und unten Rand. */
/* cqw = Innenbreite der Seite (ohne 11 % Rand). Innenhöhe = (ratio − .22) / .78 Innenbreiten; 92 % davon nutzen. */
.page .pp { width: min(82%, calc((var(--ratio, 1) - .22) * 118cqw / (.9 * var(--a, 1) + .33))); }
.dedication { font: italic 400 clamp(14px, 2vw, 28px)/1.3 var(--serif); text-align: center; white-space: pre-line; max-width: 80%; }
.howto { display: grid; justify-items: center; gap: 8%; text-align: center; }
.howto .qr { width: 34%; aspect-ratio: 1; }
.howto .qr svg { width: 100%; height: 100%; }
.howto p { margin: 0; font: 400 clamp(7px, .8vw, 11px)/1.6 var(--mono); letter-spacing: .04em; text-transform: uppercase; max-width: 70%; color: var(--ink-2); }
.lines { width: 100%; display: grid; gap: 14%; }
.lines i { display: block; border-bottom: 1px solid var(--hair); height: 0; }
.viewer__nav { display: flex; align-items: center; gap: 22px; color: var(--mute); }
.ar-card { margin-top: 48px; display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 34px 36px; border-radius: 6px; background: var(--ink); color: var(--bone); }
.ar-card .mono { opacity: .6; }
.ar-card h3 { font-size: 36px; margin: 8px 0; }
.ar-card p { margin: 0; opacity: .75; max-width: 54ch; }

/* 05 Kasse */
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.opt input, .check input { position: absolute; opacity: 0; }
.opt span { display: block; padding: 18px 20px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--hair); cursor: pointer; transition: box-shadow .3s, background .3s; }
.opt b { display: block; font: 400 22px/1 var(--serif); }
.opt small { display: block; margin-top: 6px; color: var(--mute); }
.opt input:checked + span { box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--paper); }
.opt input:focus-visible + span { outline: 2px solid var(--accent); }
.check { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.check span::before { content: ""; display: inline-block; vertical-align: -3px; width: 16px; height: 16px; margin-right: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--mute); transition: background .2s, box-shadow .2s; }
.check input:checked + span::before { background: var(--ink); box-shadow: inset 0 0 0 1px var(--ink), inset 0 0 0 4px var(--bone); }
.check small { color: var(--mute); margin-left: 6px; }
.dev { margin: 0 0 32px; }
.dev summary { cursor: pointer; color: var(--mute); }
.dev pre { background: var(--ink); color: #e9e2d6; padding: 20px; border-radius: 6px; font-size: 12px; overflow: auto; max-height: 360px; }

/* AR */
.ar { position: fixed; inset: 0; z-index: 60; background: #0b0b0b; }
.ar__stage { position: absolute; inset: 0; }
.ar__hud { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 5; width: min(92vw, 420px); display: grid; justify-items: center; gap: 12px; padding: 18px 22px; border-radius: 14px; background: rgba(21, 19, 17, .7); backdrop-filter: blur(12px); color: var(--bone); text-align: center; }
.ar__hud p { margin: 0; }
.ar__hud .meter { width: 100%; }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 70; transform: translate(-50%, 160%); padding: 14px 20px; border-radius: 999px; background: var(--ink); color: var(--bone); font-size: 14px; transition: transform .6s var(--ease); max-width: calc(100vw - 32px); }
.toast.is-on { transform: translate(-50%, 0); }

@media (max-width: 1100px) {
  .steps button span { display: none; }
  .steps button.is-active span { display: inline; }
}
@media (max-width: 900px) {
  .bar { grid-template-columns: 1fr auto; backdrop-filter: none; background: var(--bone); }
  .steps { position: fixed; left: 0; right: 0; bottom: 0; justify-content: space-around; background: var(--bone); border-top: 1px solid var(--hair); z-index: 30; }
  .steps button { padding: 16px 0; }
  .bar__total { display: none; }
  .layout { grid-template-columns: 1fr; }
  .side { position: static; height: auto; border-left: 0; border-top: 1px solid var(--hair); order: -1; }
  .side__stage { height: 280px; flex: none; }
  .book3d { --w: 170px !important; }
  .main { padding-bottom: 100px; }
  .formats, .layouts { grid-template-columns: 1fr; }
  .format { flex-direction: row; align-items: center; gap: 18px; }
  .format__fig { height: 70px; margin: 0; }
  .moment { grid-template-columns: 1fr; gap: 18px; }
  .moment__pic { max-width: 300px; }
  .strip { grid-template-columns: repeat(5, 1fr); }
  .ar-card { flex-direction: column; align-items: flex-start; }
  .spread { grid-template-columns: 1fr; aspect-ratio: auto; }
  .page { aspect-ratio: calc(1 / var(--ratio)); }
  .fields, .moment .fields, .options { grid-template-columns: 1fr; }
}

/* Sprachnotizen */
.new { font-style: normal; font-size: 9px; color: var(--accent); vertical-align: top; margin-left: 6px; padding: 3px 7px; border-radius: 99px; box-shadow: inset 0 0 0 1px currentColor; }
.hint { margin: -6px 0 20px; color: var(--ink-2); max-width: 60ch; }
.voices { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.rec { height: 96px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--hair); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 14px; padding: 0 20px; text-align: left; cursor: pointer; transition: background .3s, box-shadow .3s; }
.rec:hover { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); }
.rec .add__plus, .rec__dot { grid-row: span 2; margin: 0; width: 40px; height: 40px; }
.rec__dot { border-radius: 50%; background: var(--accent); position: relative; }
.rec__dot::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--bone); transition: inset .3s, border-radius .3s; }
.rec.is-rec .rec__dot { animation: recpulse 1.4s ease-out infinite; }
.rec.is-rec .rec__dot::after { inset: 14px; border-radius: 3px; }
@keyframes recpulse { 0% { box-shadow: 0 0 0 0 rgba(122, 42, 29, .45); } 100% { box-shadow: 0 0 0 16px rgba(122, 42, 29, 0); } }
.rec__t { font-weight: 500; align-self: end; }
.rec__s { color: var(--mute); font-size: 10px; align-self: start; }
.vnote { --p: 0; position: relative; height: 96px; border-radius: 6px; background: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 24px -14px rgba(40, 25, 10, .35); display: flex; align-items: center; gap: 14px; padding: 0 16px; animation: in .7s var(--ease); }
.vnote.is-out { opacity: .35; }
.vnote__play { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; transition: transform .3s var(--ease); }
.vnote__play:hover { transform: scale(1.08); }
.vnote__play i { width: 0; height: 0; border-left: 10px solid var(--bone); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.vnote.is-playing .vnote__play i { width: 10px; height: 12px; border: 0; margin: 0; background: linear-gradient(90deg, var(--bone) 35%, transparent 35% 65%, var(--bone) 65%); }
.vnote__body { flex: 1; min-width: 0; display: grid; gap: 6px; }
.vnote__body b { font: 400 20px/1 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vnote__wave { height: 22px; display: flex; align-items: center; gap: 2px; }
.vnote__wave i { flex: 1; min-height: 2px; border-radius: 2px; background: var(--ink); opacity: .75; transition: background .2s; }
.vnote__d { color: var(--mute); font-size: 10px; }
.vnote .vtile__rm { top: 8px; right: 8px; box-shadow: inset 0 0 0 1px var(--hair); }
.vnote:hover .vtile__rm { opacity: 1; }
.moment--audio { grid-template-columns: 360px minmax(0, 1fr); }
.moment__pic--card { padding: 0; }
.strip--covers { grid-template-columns: repeat(8, 1fr); margin: 8px 0 4px; }
.listen { margin-top: 18px; }
.card-print { margin: 0; width: 92%; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 24px -12px rgba(40, 25, 10, .3); }
.card-print img { width: 100%; }
@media (max-width: 900px) { .moment--audio { grid-template-columns: 1fr; } }
.vnote__wave i.on { background: var(--accent); opacity: 1; }
.format .incl { color: var(--mute); font-size: 9px; margin-left: 6px; }

/* ---------- 3D + Skeuomorphie ---------- */
model-viewer { --poster-color: transparent; --progress-bar-color: transparent; background: transparent; }

/* Seitenleiste: Studio-Bühne mit Spotlicht und Boden */
.side { background: linear-gradient(180deg, #e9dfd1 0%, #dccfbd 100%); }
.side__stage { position: relative; padding: 0; background:
  radial-gradient(60% 45% at 50% 38%, rgba(255, 250, 240, .9), transparent 70%),
  radial-gradient(38% 6% at 50% 63%, rgba(80, 50, 25, .2), transparent 70%); }
#bookMV { width: 100%; height: 100%; min-height: 360px; cursor: grab; }
#bookMV:active { cursor: grabbing; }
.side__hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); color: var(--mute); padding: 7px 12px; border-radius: 99px; background: rgba(255, 255, 255, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(60, 40, 20, .12); pointer-events: none; }

/* Formatkarten: farbige Fotostudio-Hintergründe, 3D-Buch darin */
.format { position: relative; overflow: hidden; padding: 0 0 20px; border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(60, 40, 20, .08), 0 10px 30px -18px rgba(60, 40, 20, .4); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.format > div { padding: 0 20px; }
.formats .format--sage { background: linear-gradient(165deg, #eef0e6 0%, #d3dbc6 100%); }
.formats .format--blush { background: linear-gradient(165deg, #f8e9df 0%, #ebc9b7 100%); }
.formats .format--dusk { background: linear-gradient(165deg, #e8eaf0 0%, #c6ccdb 100%); }
.format:hover { transform: translateY(-4px); background-color: transparent; }
.format.is-on { background-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 0 2px var(--ink), 0 24px 48px -20px rgba(60, 40, 20, .55); transform: translateY(-6px); }
.format.is-on::after { content: "✓"; position: absolute; right: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bone); font-size: 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); }
.format__mv { width: 100%; height: 190px; pointer-events: none; }
.format h3 sup { background: var(--ink); color: var(--bone); padding: 3px 6px; border-radius: 99px; }

/* Haptische Buttons */
.btn--dark { background: linear-gradient(180deg, #3a312b 0%, #1a1512 55%, #0f0c0a 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(0, 0, 0, .5), 0 1px 1px rgba(0, 0, 0, .3), 0 10px 22px -10px rgba(26, 21, 18, .8); }
.btn--dark i { background: linear-gradient(180deg, #fffdf9, #e9e1d5); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .35); }
.btn--dark:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6); }
.btn--light { background: linear-gradient(180deg, #fffdf9, #ebe3d7); box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(60, 40, 20, .12), 0 10px 22px -12px rgba(0, 0, 0, .6); }

/* Schritte als eingelassene Leiste */
.steps { padding: 5px; border-radius: 99px; background: linear-gradient(180deg, #e3dacd, #ece5da); box-shadow: inset 0 2px 4px rgba(60, 40, 20, .16), inset 0 -1px 0 rgba(255, 255, 255, .7); gap: 2px; }
.steps button { padding: 9px 14px; border-radius: 99px; }
.steps button::after { display: none; }
.steps button.is-active { color: var(--ink); background: linear-gradient(180deg, #fffdf9, #f1ebe2); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(60, 40, 20, .2), 0 4px 10px -4px rgba(60, 40, 20, .3); }

/* Stoffmuster wie echte Musterkarten: Fase, Naht, Schatten */
.mat i { position: relative; border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -2px 3px rgba(0, 0, 0, .18), 0 2px 3px rgba(0, 0, 0, .12), 0 10px 18px -10px rgba(40, 25, 10, .5); transform-style: preserve-3d; }
.mat i::after { content: ""; position: absolute; inset: 7px; border-radius: 4px; border: 1.5px dashed rgba(255, 255, 255, .45); mix-blend-mode: overlay; }
.mat:hover i { transform: translateY(-4px) rotateX(10deg); }
.mat.is-on i { box-shadow: 0 0 0 2px var(--bone), 0 0 0 4px var(--ink), 0 14px 22px -10px rgba(40, 25, 10, .6); transform: translateY(-4px); }

/* Segment-Schalter: vertiefte Schiene, erhabener Knopf */
.seg { background: linear-gradient(180deg, #e3dacd, #ece5da); box-shadow: inset 0 2px 4px rgba(60, 40, 20, .18), inset 0 -1px 0 rgba(255, 255, 255, .7); }
.seg button.is-on { background: linear-gradient(180deg, #3a312b, #1a1512); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 6px rgba(0, 0, 0, .35); }
.opt input:checked + span, .lay.is-on .lay__pv { box-shadow: inset 0 0 0 2px var(--ink), 0 14px 26px -16px rgba(40, 25, 10, .5); }

/* Hinzufügen-Kacheln mit 3D-Icons */
.add, .rec { background: linear-gradient(180deg, #fbf8f3, #efe8dd); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(60, 40, 20, .1), 0 12px 24px -16px rgba(60, 40, 20, .45); }
.add:hover, .rec:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 #fff, 0 0 0 1.5px var(--ink), 0 18px 30px -16px rgba(60, 40, 20, .5); }
.add, .rec { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.icon3d { width: 96px; height: 96px; pointer-events: none; }
.icon3d--sm { width: 64px; height: 64px; grid-row: span 2; }
.rec { grid-template-columns: auto 1fr; }
.rec .rec__dot { display: none; }
.rec.is-rec .icon3d { display: none; }
.rec.is-rec .rec__dot { display: block; }
.vtile, .vnote { box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 14px 28px -16px rgba(40, 25, 10, .55); }
@media (max-width: 900px) { #bookMV { min-height: 260px; } .format__mv { height: 110px; width: 130px; flex: none; } }
.side__stage { display: block; } #bookMV { position: absolute; inset: 0; height: auto; }
.spread__mv { width: 100%; height: 100%; min-height: 240px; }
/* Vier Formate */
.formats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.formats .format--sand { background: linear-gradient(165deg, #f6efe2 0%, #e6d6b8 100%); }
.thanks-qr { width: 148px; padding: 12px; background: var(--paper); border-radius: 14px; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 10px 30px -14px rgba(21,19,17,.35); margin: 0 0 28px; }
.thanks-qr svg { display: block; width: 100%; height: auto; }

/* ---------- Extraseiten und Code pro Seite ----------
   Masse in cqw (Prozent der Seitenbreite), damit Vorschau und Druck gleich aussehen. */
.page { container-type: inline-size; }
.page .mono { font: 500 max(6px, 2.1cqw)/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }

/* Code wie ein Stempel in der Polaroid-Leiste. 21 % der Polaroid-Breite: so liest ihn die
   640×480-Kamera von MindAR zuverlässig (RECHERCHE.md). */
.scode { position: absolute; right: 5%; bottom: 3%; width: 21%; aspect-ratio: 1; }
.l-polaroid .pp--code { padding-bottom: 28%; }
.l-polaroid .pp--code figcaption { bottom: 13%; }
.l-journal .pp--code, .l-gallery .pp--code { padding-bottom: 25%; }
.l-journal .pp--code .scode, .l-gallery .pp--code .scode { right: 0; bottom: 0; }
.l-journal .pp--code figcaption, .l-gallery .pp--code figcaption { padding-right: 26%; }
.card-print.pp--code { position: relative; background: #fbf9f5; padding-bottom: 22%; }
.card-print .scode { right: 4%; bottom: 3%; width: 18%; }
.scode svg { display: block; width: 100%; height: 100%; }
.scode svg rect { fill: transparent; }
.scode svg path { fill: #2a2521; }
.page--left .page__no { left: 11%; right: auto; }
.page--right .page__no { right: 11%; left: auto; }

.chapter { text-align: center; display: grid; justify-items: center; gap: 3cqw; }
.chapter h3 { margin: 0; font: 400 13cqw/.95 var(--serif); letter-spacing: -.02em; }
.chapter i { width: 10cqw; height: 1px; background: var(--ink); opacity: .4; }
.chapter p { margin: 0; font: italic 400 5cqw/1.2 var(--serif); color: var(--ink-2); }

.mappage { width: 100%; height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 3cqw; }
.mappage__map { border-radius: 1px; overflow: hidden; background: #fbf9f5; box-shadow: inset 0 0 0 1px rgba(21, 19, 17, .08); }
.mappage__map svg { display: block; width: 100%; height: 100%; }
.mappage p { margin: 0; font: italic 400 4.6cqw/1.2 var(--serif); text-align: center; }

/* Filmrolle: 35-mm-Streifen, randabfallend und leicht schräg, warmes Schwarz wie entwickelter Film */
.page--film { padding: 0; overflow: hidden; }
.film35 { position: absolute; top: -8%; bottom: -8%; left: 50%; width: 46cqw; translate: -54% 0; rotate: -4deg;
  display: grid; grid-template-rows: repeat(3, 1fr); gap: 3.2cqw; padding: 9cqw 8.5cqw; background: #1d1511;
  box-shadow: 0 2cqw 5cqw -1cqw rgba(30, 20, 10, .35);
  /* Perforation links und rechts */
  background-image: repeating-linear-gradient(to bottom, transparent 0 1.6cqw, #f6f1e8 1.6cqw 4cqw, transparent 4cqw 5.4cqw),
                    repeating-linear-gradient(to bottom, transparent 0 1.6cqw, #f6f1e8 1.6cqw 4cqw, transparent 4cqw 5.4cqw);
  background-size: 2.6cqw 100%, 2.6cqw 100%; background-position: 2.4cqw 0, calc(100% - 2.4cqw) 0; background-repeat: no-repeat; }
.film35 figure { margin: 0; position: relative; min-height: 0; }
.film35 img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: .5cqw; filter: saturate(1.05) contrast(1.03); }
.film35 figure span { position: absolute; right: -6.8cqw; top: 50%; translate: 0 -50%; rotate: 90deg; font: 500 1.9cqw/1 "Geist Mono", monospace; color: #e39a4a; letter-spacing: .1em; }
.film35__edge { position: absolute; left: .4cqw; top: 0; bottom: 0; writing-mode: vertical-rl; rotate: 180deg; text-align: center;
  font: 500 1.6cqw/1 "Geist Mono", monospace; color: #e39a4a; letter-spacing: .3em; opacity: .85; }
.film35__cap { position: absolute; right: 9%; bottom: 13%; margin: 0; max-width: 34%; text-align: right; rotate: -4deg;
  font: 400 4.6cqw/1.5 "Homemade Apple", cursive; color: #2c2a6b; }
.film35__cap small { display: block; font: italic 400 3.6cqw/1.2 "Instrument Serif", serif; color: #6c655d; }

.hearnote { text-align: center; display: grid; gap: 3cqw; justify-items: center; }
.hearnote p { margin: 0; font: 400 7.5cqw/1.5 var(--hand); color: #2c2a6b; transform: rotate(-2deg); max-width: 80%; }
.hearnote small { font: italic 400 4.6cqw/1.2 var(--serif); color: var(--ink-2); }

.numbers { width: 100%; display: grid; gap: 6cqw; text-align: center; }
.numbers b { display: block; font: 400 20cqw/.9 var(--serif); letter-spacing: -.03em; }
.numbers small { font: italic 400 4.6cqw/1.2 var(--serif); color: var(--ink-2); }

.quote { margin: 0; max-width: 78%; font: italic 400 7.5cqw/1.25 var(--serif); text-align: center; text-wrap: balance; position: relative; }
.quote::before { content: '“'; display: block; font: 400 22cqw/.6 var(--serif); color: var(--accent); opacity: .5; margin-bottom: 2cqw; }

.lines .mono { margin-bottom: 4cqw; }
.closing { text-align: center; display: grid; gap: 3cqw; }
.closing p { margin: 0; font: italic 400 9cqw/1 var(--serif); }

.nums { display: grid; grid-template-columns: 1fr 2fr; gap: 10px 14px; margin-top: 14px; }

/* Panorama-Doppelseite: ein Standbild läuft über beide Seiten (randlos) */
.page--wide { padding: 0; background-size: 200% 100%; background-repeat: no-repeat; }
.page--wide-left { background-position: 0 0; }
.page--wide-right { background-position: 100% 0; }


/* Mosaik: die ganze Seite aus Einzelbildern des Videos, randlos mit feinen Fugen */
.page--mosaic { padding: 0; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); gap: .7cqw; background: var(--paper); }
.page--mosaic img { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; }
.mosaic__cap { position: absolute; left: 6%; bottom: 5%; padding: 1.4cqw 2.6cqw; background: var(--paper); font: italic 400 max(8px, 4cqw)/1 var(--serif); }

/* Textseite pro Moment */
.textpage { text-align: center; display: grid; justify-items: center; gap: 3.5cqw; max-width: 82%; }
.textpage h3 { margin: 0; font: 400 10cqw/1 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.textpage i { width: 9cqw; height: 1px; background: var(--ink); opacity: .35; }
.textpage p { margin: 0; font: 400 5.4cqw/1.7 var(--hand); color: #2c2a6b; white-space: pre-line; }

/* Auswahl „Gegenüber“ in der Moment-Karte */
.companion { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 4px; }
.seg--sm button { padding: 6px 12px; font-size: 12px; }
#companions { margin: 4px 0 16px; }

/* Gezeichnete Seiten (Filmrolle, Mosaik): das Bild ist die Seite */
.page--img { padding: 0; }
.page--img img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.page--img .page__no { z-index: 1; }
/* Panorama: Papier-Etikett mit Bildunterschrift und Doppelseiten-Code (wie in pages.js gezeichnet) */
.wide__label { position: absolute; right: 6cqw; bottom: 6cqw; display: flex; gap: 2.5cqw; align-items: flex-start; padding: 2.5cqw; background: #fbf9f5; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .25);
  font: italic 400 max(8px, 3.4cqw)/1.2 var(--serif); color: var(--ink); max-width: 46cqw; }
.wide__label span { width: 27cqw; }
.wide__label .scode { position: static; width: 13cqw; flex: none; }

/* Blätterbuch (StPageFlip) */
.flipbook { --ratio: 1; width: min(100%, 1120px); position: relative; }
.flipbook .page { background: var(--paper); box-shadow: inset 0 0 0 1px rgba(21, 19, 17, .03); }
.flipbook .page--hard { padding: 0; background: #d6cab6; }
.flipbook .cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.flipbook .page--back { background: var(--c, #d6cab6); display: grid; place-items: end center; padding-bottom: 8%; }
.flipbook .page--back .mono { color: rgba(0, 0, 0, .35); }
.flipbook .stf__parent { margin: 0 auto; }
.flipbook .stf__block { filter: drop-shadow(0 30px 40px rgba(40, 30, 20, .28)); }
/* Bundsteg: leichter Schatten zur Mitte hin auf beiden Seiten */
.flipbook .page--left::after, .flipbook .page--right::after { content: ""; position: absolute; top: 0; bottom: 0; width: 9%; pointer-events: none; }
.flipbook .page--left::after { right: 0; background: linear-gradient(90deg, transparent, rgba(60, 45, 30, .16)); }
.flipbook .page--right::after { left: 0; background: linear-gradient(270deg, transparent, rgba(60, 45, 30, .16)); }
/* Eselsohr: Grösse kommt aus --s (Nähe der Maus), die Transition macht das langsame Aufrollen */
.flipbook .fold { --s: 0px; position: absolute; width: var(--s); height: var(--s); pointer-events: none; z-index: 5;
  transition: width .55s cubic-bezier(.2, .8, .2, 1), height .55s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(-2px -2px 3px rgba(40, 30, 20, .18)); }
.flipbook .fold--r { transform: translate(-100%, -100%);
  background: linear-gradient(135deg, #fffefb 0%, #ece7de 30%, #cdc6ba 49.6%, var(--bone) 50%); }
.flipbook .fold--l { transform: translate(0, -100%);
  background: linear-gradient(225deg, #fffefb 0%, #ece7de 30%, #cdc6ba 49.6%, var(--bone) 50%); filter: drop-shadow(2px -2px 3px rgba(40, 30, 20, .18)); }
/* Probedruck */
.trial-card { margin-top: 48px; display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 30px 36px; border-radius: 6px;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); }
.trial-card .mono { color: var(--accent); }
.trial-card h3 { font-size: 32px; margin: 8px 0; }
.trial-card p { margin: 0; color: var(--ink-2); max-width: 46ch; }
.trial-card + .ar-card { margin-top: 16px; }
@media (max-width: 720px) { .trial-card { flex-direction: column; align-items: flex-start; } }

/* AR-Vorschau / Probedruck: Dialog mit QR-Code */
.trial-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(21, 19, 17, .55); backdrop-filter: blur(6px); animation: tmIn .3s var(--ease); }
@keyframes tmIn { from { opacity: 0; } }
.tm { position: relative; width: min(100%, 520px); background: var(--paper); border-radius: 10px; padding: 34px 32px 26px; display: grid; gap: 14px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); }
.tm--qr { width: min(100%, 760px); grid-template-columns: 240px 1fr; gap: 32px; align-items: center; }
.tm__qr { padding: 14px; background: #fff; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--hair); }
.tm__qr svg { display: block; width: 100%; height: auto; }
.tm h3 { margin: 6px 0 4px; font: 400 34px/1.05 var(--serif); }
.tm h3 em { color: var(--accent); }
.tm p { margin: 0; color: var(--ink-2); }
.tm__actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.tm__fine { margin-top: 12px !important; color: var(--mute) !important; }
.tm__x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; font-size: 16px; cursor: pointer; color: var(--mute); }
@media (max-width: 720px) { .tm--qr { grid-template-columns: 1fr; } .tm__qr { width: 200px; } }