/* Stiftezeit: a white coloring-book page, black ink, and crayon colour only where something is "coloured in". */

@font-face {
  font-family: "Playpen Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("/static/fonts/playpen-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playpen Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("/static/fonts/playpen-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/static/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/static/fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url("/static/fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}

:root {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #1d1d1b;
  --ink-2: #47453f;
  --ink-3: #6f6c64;
  --rule: #e2dfd8;
  --wash: #f6f5f1;          /* the grey of a pencil smudge, used for quiet panels */
  --sun: #ffc83d;           /* crayon yellow: the main action */
  --cherry: #d7263d;        /* crayon red: errors, watermark */
  --sky: #2f6fde;           /* crayon blue: links, focus */
  --leaf: #2a9d58;          /* crayon green: done */
  --plum: #8a55c9;
  --peach: #ff9f7a;
  --pumpkin: #ff8a1f;       /* crayon orange: Halloween (halloween.css) */
  --xmas: #f24f45;          /* crayon red: Christmas (weihnachten.css); ink on it 4.8:1, so text on it stays ink */

  --hand: "Playpen Sans", "Comic Neue", "Segoe Print", system-ui, sans-serif;
  --text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  --step-4: clamp(2.4rem, 1.6rem + 4.2vw, 4.4rem);

  --gutter: 16px;
  --wobble: 14px 18px 12px 20px / 18px 12px 20px 14px;      /* hand-drawn corners */
  --wobble-lg: 26px 10px 30px 12px / 12px 28px 10px 26px;
  --line: 2.5px solid var(--ink);
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--hand); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.005em; }
h1 { font-size: var(--step-4); font-weight: 800; line-height: 1.04; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p { margin: 0 0 1em; }
a { color: var(--ink); text-decoration-color: var(--sky); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; word-break: break-all; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }
.fine { font-size: var(--step--1); color: var(--ink-3); }
.notice { background: var(--wash); border-radius: var(--wobble); padding: 12px 16px; }
/* the pause sign while the image service cannot draw (pause.py): start, create, collect and gift pages, and the book */
.pause-note { margin: 0 0 16px; }
.pause-note p { margin: 0; }
.pause-note .pause-note-h { font-family: var(--hand); font-size: var(--step-1); font-weight: 700; margin: 0 0 4px; }
.status .pause-note { max-width: 760px; margin: 6px 0 18px; }
mark.ph { background: #fff1c2; color: var(--ink); padding: 0 .2em; }

/* --- header & footer --- */
.testbar { margin: 0; background: var(--ink); color: var(--paper); text-align: center; font-size: var(--step--1); padding: 6px var(--gutter); }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--gutter); max-width: 1180px; margin: 0 auto; }
.logo { display: block; flex: none; }
.logo img { display: block; width: auto; height: 36px; }
@media (min-width: 720px) { .logo img { height: 42px; } }
.lang-switch { font-size: var(--step--1); font-weight: 600; padding: 6px 2px; }
.site-footer { border-top: 2px dashed var(--rule); margin-top: 72px; padding: 32px var(--gutter) 48px; text-align: center; }
.footer-claim { font-family: var(--hand); font-size: var(--step-1); margin-bottom: 14px; }
.footer-links, .footer-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; font-size: var(--step--1); }
.footer-more { font-weight: 600; margin: 0 0 12px; }

main { display: block; }

/* --- buttons: the crayon-filled shape is the one bold element --- */
.btn {
  --fill: var(--sun);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 26px;
  font-family: var(--hand); font-weight: 700; font-size: 1.125rem; line-height: 1.2;
  color: var(--ink); text-decoration: none; text-align: center;
  background: var(--paper); border: var(--line); border-radius: var(--wobble);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
}
.btn:hover { transform: rotate(-1deg); }
.btn:active { transform: translateY(1px); }
.btn-crayon::before {
  content: ""; position: absolute; inset: -5px -9px -4px -7px; z-index: -1;
  background: var(--fill);
  -webkit-mask: url("/static/img/scribble.svg") center / 100% 100% no-repeat;
          mask: url("/static/img/scribble.svg") center / 100% 100% no-repeat;
}
.btn-crayon { background: transparent; }
.btn-crayon::after {  /* paper behind the scribble, so gaps in the colouring stay white */
  content: ""; position: absolute; inset: 0; z-index: -2; background: var(--paper); border-radius: inherit;
}
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; color: var(--ink-3); border-color: var(--ink-3); transform: none; }
.btn-crayon[disabled]::before, .btn-crayon[aria-disabled="true"]::before { background: var(--rule); }
.btn-outline { background: var(--paper); }
.btn-compact { min-height: 44px; padding: 6px 16px; font-size: 1rem; border-width: 2px; }
.btn-wide { width: 100%; }
@media (min-width: 560px) { .btn-wide { width: auto; min-width: 300px; } }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-small {
  font: inherit; font-size: var(--step--1); font-weight: 600; color: var(--ink);
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--wobble);
  padding: 6px 12px; min-height: 36px; cursor: pointer;
}
.btn-small:hover { background: var(--wash); }
.btn-small[disabled] { color: var(--ink-3); border-color: var(--rule); cursor: not-allowed; background: var(--paper); }
.btn-quiet { border-color: transparent; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.btn-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); cursor: pointer; }
.btn-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.btn-icon[disabled] { border-color: var(--rule); cursor: not-allowed; }
.btn-icon[disabled] svg { stroke: var(--rule); }

/* --- start page --- */
.home main > section { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.hero { padding-top: 6px !important; padding-bottom: 24px !important; }
.hero h1 { max-width: 11ch; margin-bottom: 12px; }
.lead { font-size: var(--step-1); color: var(--ink-2); max-width: 34ch; }
/* a visit through an influencer's link: the discount in one line */
.partner-line {
  display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin: 0 0 12px; padding: 7px 12px;
  font-size: var(--step--1); line-height: 1.3; background: #fff6dc; border: 2px solid var(--ink); border-radius: 999px;
}
.partner-line .icon { width: 18px; height: 18px; }
/* in an occasion's season: the link to a book without the occasion, right under the occasion's button */
.season-alt { margin: 8px 0 0; font-size: var(--step--1); }
.hero-note { margin: 10px 0 0; font-size: var(--step--1); color: var(--ink-3); }

.compare { position: relative; margin: 0; justify-self: center; width: min(100%, 440px); }
.compare-frame {
  --pos: 50%;
  position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  border: 3px solid var(--ink); border-radius: var(--wobble-lg); background: var(--paper);
  transform: rotate(1.2deg);
  touch-action: pan-y;
}
.compare-frame img { width: 100%; height: 100%; object-fit: cover; }
.compare-photo { position: absolute; inset: 0; }
.compare-drawing { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); background: var(--paper); }
.compare-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; border-left: 3px solid var(--ink); pointer-events: none;
}
.compare-handle::after {   /* a pencil you can drag */
  content: ""; position: absolute; top: 50%; left: -21px; width: 39px; height: 39px; margin-top: -20px;
  background: var(--paper) url("/static/img/favicon.svg") center / 30px 30px no-repeat;
  border: 3px solid var(--ink); border-radius: 50%;
}
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare-range:focus-visible ~ .compare-handle::after, .compare-frame:has(.compare-range:focus-visible) .compare-handle::after { outline: 3px solid var(--sky); outline-offset: 2px; }
.compare-labels { position: relative; z-index: 2; display: flex; justify-content: space-between; font-family: var(--hand); font-size: var(--step--1); color: var(--ink-2); padding: 10px 6px 0; }

/* phone and tablet: headline, picture and the button that starts a book fill the first screen (below the 64 px of the
   header, with the sentence peeking in at the bottom). The picture takes the height that is left, at least 210 px, so
   all three fit on every phone; "Foto" and "Ausmalbild" sit on it */
@media (max-width: 899px) {
  .hero-first { display: flex; flex-direction: column; min-height: calc(100vh - 126px); min-height: calc(100svh - 126px); }
  .hero-first .compare {
    flex: 1 0 auto; display: flex; flex-direction: column; align-self: flex-start; width: min(100%, 520px);
    max-height: min(780px, calc(150vw - 48px)); margin: 0 0 18px;
  }
  .compare-frame { flex: 1 0 auto; min-height: 210px; aspect-ratio: auto; transform: rotate(.8deg); }
  .compare-frame img { object-position: 50% 18%; }          /* the faces stay in the picture */
  .compare-labels { position: absolute; left: 10px; right: 10px; bottom: 12px; padding: 0; pointer-events: none; }
  .compare-labels span { padding: 1px 10px 2px; font-size: .9rem; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; }
  .hero-cta, .hero-gift { display: flex; width: 100%; max-width: 520px; }      /* on a tablet as wide as the picture */
  .hero-cta { padding-inline: 14px; }                        /* "Weihnachts-Malbuch erstellen" in one line on a 360 px phone */
  .hero .lead { margin: 18px 0 14px; font-size: var(--step-0); }
  /* the help button waits until the first screen is scrolled past (help.js), so it covers neither picture nor button */
  .home .helpfab { opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .2s, transform .2s, visibility .2s; }
  .home .helpfab.is-shown { opacity: 1; visibility: visible; transform: none; }
}
/* laptop: the picture on the right; headline, sentence and buttons on the left, in the middle of the picture's height */
@media (min-width: 900px) {
  .hero {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: 48px; padding-top: 40px !important;
    grid-template-rows: 1fr repeat(7, auto) 1fr;
    grid-template-areas: ". pic" "partner pic" "head pic" "lead pic" "cta pic" "alt pic" "gift pic" "note pic" ". pic";
  }
  .hero-first { display: contents; }
  .partner-line { grid-area: partner; }
  .hero-head { grid-area: head; }
  .hero .compare { grid-area: pic; }
  .hero h1 { margin-bottom: .35em; }
  .hero .lead { grid-area: lead; margin: 0; }
  .hero-cta, .hero-gift { justify-self: start; width: 100%; max-width: 400px; }
  .hero-cta { grid-area: cta; margin-top: 26px; }
  .season-alt { grid-area: alt; margin: 6px 0 2px; }
  .hero-gift { grid-area: gift; margin-top: 14px; }
  .hero-note { grid-area: note; margin-top: 12px; }
}

.steps, .examples, .why, .pricing, .privacy, .faq { margin-top: 72px !important; }
.steps ol { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 28px; }
@media (min-width: 820px) { .steps ol { grid-template-columns: repeat(3, 1fr); gap: 36px; } }
.steps li p { color: var(--ink-2); max-width: 36ch; }
.step-n {
  position: relative; isolation: isolate; display: inline-grid; place-items: center;
  width: 56px; height: 56px; margin-bottom: 12px;
  font-family: var(--hand); font-weight: 800; font-size: 1.6rem;
  border: var(--line); border-radius: 52% 48% 50% 46% / 48% 52% 46% 50%;
}
.step-n::before {
  content: ""; position: absolute; inset: 6px; z-index: -1; background: var(--c, var(--sun));
  -webkit-mask: url("/static/img/scribble-round.svg") center / 100% 100% no-repeat;
          mask: url("/static/img/scribble-round.svg") center / 100% 100% no-repeat;
}
.step-n-1 { --c: var(--sun); }
.step-n-2 { --c: #8fc9ff; }
.step-n-3 { --c: #9ee0a8; }

.example-row {
  list-style: none; padding: 4px 2px 18px; margin: 20px calc(var(--gutter) * -1) 6px; padding-inline: var(--gutter);
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 320px); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
/* each drawing as the printed page (pdf.py: 12 mm margin, the caption below, a drawing wider than tall on a landscape
   page) and the photo small beside it, never on the drawing */
.example { display: grid; gap: 6px; align-content: start; scroll-snap-align: start; }
.example-from { display: flex; align-items: flex-end; gap: 4px; padding-left: 4px; }
.example-photo {
  width: 38%; aspect-ratio: 1; object-fit: cover;
  border: 4px solid var(--paper); outline: 2px solid var(--ink); border-radius: 4px; transform: rotate(-3deg);
}
.example-arrow { flex: none; width: 54px; height: 38px; margin-bottom: -6px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.example-page {
  container-type: inline-size; --mm: calc(100cqw / 186);    /* 1 mm of the page: 186 mm between the margins */
  display: flex; flex-direction: column; aspect-ratio: 1 / 1.414; padding: 5.71%;     /* 12 mm of 210 */
  background: var(--paper); border: 2.5px solid var(--ink); border-radius: 6px;
}
.example-page.is-landscape { aspect-ratio: 1.414 / 1; padding: 4.04%; --mm: calc(100cqw / 273); }
.example-drawing { flex: 1 1 0; min-height: 0; width: 100%; height: 100%; object-fit: contain; }
.example-caption { margin: calc(3 * var(--mm)) 0 0; font-family: var(--hand); font-size: max(9px, calc(5.3 * var(--mm))); line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
/* laptop: two per row, photo, arrow and page side by side, every page as high as the others */
@media (min-width: 1000px) {
  .example-row { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; gap: 40px 48px; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .example { display: flex; align-items: center; gap: 2px; }
  .example-from { flex: none; align-items: center; gap: 0; padding-left: 0; }
  .example-photo { width: 124px; }
  .example-arrow { transform: rotate(-32deg); margin: 0 4px 0 2px; }
  .example-page { --h: 256px; flex: none; height: var(--h); padding: calc(var(--h) * 12 / 297); }
  .example-page.is-landscape { padding: calc(var(--h) * 12 / 210); }
}

.why { max-width: 760px !important; }
.why h2 { font-size: var(--step-3); max-width: 20ch; }
.why p { font-size: var(--step-1); color: var(--ink-2); }
.why-break { font-family: var(--hand); color: var(--ink) !important; }

.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: clamp(8px, 2.5vw, 16px); max-width: 560px; margin: 20px 0 28px; }
.tier { border: var(--line); border-radius: var(--wobble); padding: 16px clamp(10px, 3vw, 20px); }
.tier p { margin: 0; }
.tier-pages { color: var(--ink-2); font-size: clamp(.8rem, 3.4vw, 1rem); white-space: nowrap; }
.tier-price { font-family: var(--hand); font-weight: 800; font-size: clamp(1.3rem, 5.6vw, 2rem); white-space: nowrap; }
.includes-h { margin-top: 8px; }
.ticks { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; max-width: 62ch; }
.ticks li { position: relative; padding-left: 34px; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: .2em; width: 20px; height: 14px;
  border-left: 3px solid var(--leaf); border-bottom: 3px solid var(--leaf); transform: rotate(-48deg) skewX(-6deg);
  border-radius: 0 0 0 3px;
}
.privacy .ticks { gap: 14px; }

.faq { max-width: 860px !important; }
.faq details { border-bottom: 2px dashed var(--rule); padding: 4px 0; }
.faq summary {
  cursor: pointer; list-style: none; position: relative; padding: 14px 40px 14px 0;
  font-family: var(--hand); font-weight: 600; font-size: var(--step-1);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 8px; font-size: 1.6rem; font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-2); max-width: 66ch; }

/* --- forms --- */
.narrow { max-width: 760px; margin: 0 auto; padding: 8px var(--gutter) 0; }
.narrow h1 { font-size: var(--step-3); margin-top: 16px; }
.field { display: block; margin: 0 0 22px; }
.field-label { display: block; font-weight: 700; margin-bottom: 6px; }
.field-hint { display: block; font-size: var(--step--1); color: var(--ink-3); margin-top: 6px; }
.input {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); border-radius: var(--wobble); padding: 12px 14px; min-height: 48px;
}
.input::placeholder { color: #9a978f; }
.input-title { font-family: var(--hand); font-size: var(--step-1); font-weight: 600; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; margin: 0 0 10px; }
.check input {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 26px; height: 26px; margin: 1px 0 0;
  border: 2.5px solid var(--ink); border-radius: 6px 8px 5px 7px; background: var(--paper); cursor: pointer; display: grid; place-items: center;
}
.check input::after { content: ""; width: 12px; height: 7px; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(-48deg) translate(1px, -1px); opacity: 0; }
.check input:checked { background: var(--sun); }
.check input:checked::after { opacity: 1; }
.check-inline { margin: 6px 0 22px; }
.consent { margin: 26px 0 22px; }
.trust-note { display: flex; gap: 8px; align-items: flex-start; }
.trust-note .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--ink); }
.icon-lock rect { fill: var(--sun); }

/* drawing style: two side-by-side choices, the checked one coloured in */
.styles { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.styles .field-label { padding: 0; }
.style-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.style-opt { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; border: 2px solid var(--ink); border-radius: var(--wobble); padding: 10px 12px; background: var(--paper); }
.style-opt input { accent-color: var(--ink); width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; }
.style-opt strong { display: block; font-family: var(--hand); }
.style-opt small { display: block; color: var(--ink-2); line-height: 1.4; margin-top: 2px; }
.style-opt:has(input:checked) { background: var(--sun); }
.style-opt:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
/* occasion (Halloween, Christmas): the same tiles, with the occasion's little picture next to its name */
.style-opt .occasion-name { display: flex; align-items: center; gap: 8px; }
.occasion-name img { width: 24px; height: 24px; }
.occasion-opt:has(input[value="halloween"]:checked) { background: var(--pumpkin); }
.occasion-opt:has(input[value="weihnachten"]:checked) { background: var(--xmas); }
.occasion-opt:has(input[value="weihnachten"]:checked) small { color: var(--ink); }
/* drawing style with an example page per style; inside .looks the pages follow the chosen occasion */
.style-pics .style-opts { grid-template-columns: repeat(2, minmax(0, 220px)); }
.style-pic { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 8px 10px; }
.style-pic img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; background: var(--paper); border: 2px solid var(--ink); border-radius: 8px; }
.style-pic .look-season { display: none; }
.looks:has(.occasions input:not([value=""]):checked) .has-season .look-plain { display: none; }
.looks:has(.occasions input:not([value=""]):checked) .has-season .look-season { display: block; }
.style-pic-text { display: flex; gap: 10px; align-items: flex-start; padding: 0 4px; }
.style-note { margin: 10px 0 0; }

/* book page: the book's style, and the same photos as a second book in another style */
.lookbox { background: var(--wash); border-radius: var(--wobble); padding: 14px 16px 16px; margin: 0 0 22px; max-width: 640px; }
.lookbox-h { font-size: var(--step-1); margin: 0 0 6px; }
.lookbox p { font-size: var(--step--1); color: var(--ink-2); margin: 0 0 10px; }
.lookbox p.fine { color: var(--ink-3); }
.lookbox p:last-child { margin-bottom: 0; }
.lookbox .form-error { color: var(--cherry); }
.second-form { border-top: 2px dashed var(--rule); margin-top: 14px; padding-top: 14px; }
.second-form .styles { margin-bottom: 14px; }
.form-error { color: var(--cherry); font-weight: 600; }
.input[aria-invalid="true"] { border-color: var(--cherry); }      /* the field the error at the top means */

.dropzone {
  position: relative; display: grid; justify-items: center; gap: 8px; text-align: center;
  padding: 30px 18px; margin: 8px 0 14px;
  border: 2.5px dashed var(--ink); border-radius: var(--wobble-lg); background: var(--paper);
}
.dropzone.is-over { background: #fff6dc; }
.dropzone-hint { margin: 4px 0 0; color: var(--ink-2); font-size: var(--step--1); }
.dropzone-locked { display: none; margin: 0; font-size: var(--step--1); color: var(--ink-3); }
.dropzone[aria-disabled="true"] { border-color: var(--rule); }
.dropzone[aria-disabled="true"] label.btn { color: var(--ink-3); border-color: var(--ink-3); cursor: not-allowed; }
.dropzone[aria-disabled="true"] .dropzone-locked { display: block; }
@media (hover: none) { .only-pointer { display: none; } }

.count { font-weight: 700; margin: 0 0 10px; }
.thumbs { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.thumb { position: relative; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: var(--wobble); overflow: hidden; background: var(--wash); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-bar { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 8px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--paper); overflow: hidden; }
.thumb-bar span { display: block; height: 100%; width: 0; background: var(--sun); transition: width .2s; }
.thumb-badge { position: absolute; left: 4px; top: 4px; font-size: .7rem; font-weight: 700; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 6px; padding: 0 5px; }
.thumb.is-error { border-color: var(--cherry); }
.thumb.is-error::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; font: 800 2rem var(--hand); color: var(--cherry); background: rgba(255,255,255,.75); }
.thumb-remove { position: absolute; right: 4px; top: 4px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); font-size: 1rem; line-height: 1; cursor: pointer; }
.submit-row { margin-top: 18px; }
.submit-row .fine { margin-top: 10px; }

/* --- book page --- */
/* Stefan's choice of 24.10.2026 ("Übersicht"): the status, then every page small as it is printed; a tap opens the page
   in a sheet with everything it can do (book.js). */
.bookpage .site-footer { padding-bottom: calc(var(--buybar-h, 170px) + 32px); }   /* room for the fixed .buybar (book.js) */
.book { max-width: 1180px; margin: 0 auto; padding: 8px var(--gutter) 0; }
.book-top { max-width: 760px; }
.status { margin: 18px 0 12px; max-width: 70ch; }
.status p { margin: 0 0 8px; }
.status .big { font-family: var(--hand); font-size: var(--step-3); font-weight: 700; line-height: 1.15; color: var(--ink); }
.progress { height: 14px; max-width: 420px; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; background: var(--paper); margin: 4px 0 6px; }
.progress span { display: block; height: 100%; width: 0; background: var(--sun); transition: width .6s ease; }
/* the link to come back later: one line, the address itself only when it cannot be copied */
.savelink { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 22px; color: var(--ink-2); font-size: var(--step--1); }
.savelink p { margin: 0; flex: 1 1 240px; }
.savelink-url { flex-basis: 100%; }
/* a book that collects photos: the owner's own link as a quiet panel, apart from the family's yellow one */
.ownlink { background: var(--wash); border-radius: var(--wobble); padding: 12px 16px 14px; margin: 0 0 22px; max-width: 640px; color: var(--ink-2); font-size: var(--step--1); }
.ownlink p { margin: 0 0 10px; }
.ownlink .ownlink-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--ink); font-size: var(--step-0); }
.ownlink-h .icon { width: 18px; height: 18px; }
/* after buying, a page bought could not be drawn: another photo, or the money back */
.lost-note { background: #fff1ef; border: 2px solid var(--ink); border-radius: var(--wobble); padding: 14px 16px 12px; margin: 0 0 18px; max-width: 640px; }
.lost-note-h { font-size: var(--step-1); margin: 0 0 4px; }
.lost-note p { margin: 0 0 10px; }
.lost-note p:last-child { margin: 0; }
/* a book bought at Etsy (etsy.py): what the buyers can do on the page, and the footer's way to ask */
.etsy-intro { background: #fff6dc; border: 2.5px solid var(--ink); border-radius: var(--wobble); padding: 14px 16px; margin: 6px 0 20px; max-width: 760px; }
.etsy-intro p { margin: 0 0 8px; }
.etsy-intro p:last-child { margin-bottom: 0; }
.etsy-intro-paid { display: flex; gap: 6px; align-items: center; font-weight: 700; color: #1f7a3a; }   /* 5:1 on the yellow */
.etsy-intro-paid .icon { stroke-width: 2.6; }
.etsy-ask { margin: 0 0 12px; }
/* /start: order number and name, then the empty book bought at Etsy is filled like a new one (create.html) */
.start-lead { margin-bottom: 26px; }
.input-number { font-family: var(--hand); font-weight: 700; font-size: var(--step-1); letter-spacing: .06em; }
.start-choices { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.start-choice { display: block; border: 2.5px solid var(--ink); border-radius: var(--wobble); padding: 14px 16px; background: var(--paper); color: var(--ink); text-decoration: none; }
.start-choice:hover { background: var(--wash); }
.start-choice-t { display: block; font-family: var(--hand); font-weight: 700; font-size: var(--step-1); }
.start-choice-s { display: block; color: var(--ink-2); }
.consent .check-waiver { margin-top: 4px; }
.consent .check-waiver span { font-size: var(--step--1); color: var(--ink-2); }
.looks.is-occasion .has-season .look-plain { display: none; }
.looks.is-occasion .has-season .look-season { display: block; }
.add-room { margin: 8px 0 0; }

/* the overview: two pages a row on the phone, more on wide screens; the labels line up under sheets of either shape */
.pages { list-style: none; padding: 0; margin: 4px 0 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; align-items: end; }
@media (min-width: 640px) { .pages { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 26px 20px; } }
.page { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.page.is-removed .sheet { opacity: .35; }
.pages .page-tools, .pages .page-msg:not(.is-error) { display: none; }
.pages .sheet { border-width: 2px; transition: transform .15s ease; }
.pages .page:hover .sheet { transform: rotate(-1deg); }
/* the whole card is the button that opens it */
.page-open { position: absolute; inset: -6px; z-index: 1; margin: 0; padding: 0; border: 0; border-radius: 12px; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.page-open:focus-visible { outline: 3px solid var(--sky); outline-offset: 0; border-radius: 12px; }
.page-n { font-family: var(--hand); font-weight: 700; margin: 0; }
.pages .page-n { font-size: .95rem; }
.pages .page-n::after {       /* a small pencil: this page can be changed */
  content: ""; display: inline-block; width: 13px; height: 13px; margin-left: 7px; vertical-align: -1px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.page-msg { margin: 0; font-size: var(--step--1); color: var(--ink-2); }
.page-msg.is-error { color: var(--cherry); }
.pages .page-msg { font-size: .8rem; line-height: 1.3; }
.pages .cover-title { font-size: clamp(.95rem, 4.2vw, 1.25rem); -webkit-text-stroke-width: 1px; }
.pages .cover-dedication, .pages .cover-owner { font-size: .55rem; }
.pages .sheet-wait-text { font-size: .75rem; }
.pages .pencil { width: 72px; }

.sheet {
  position: relative; aspect-ratio: 1 / 1.414; background: var(--paper);
  border: 2.5px solid var(--ink); border-radius: 6px; padding: 5%;
  display: grid; place-items: center;
}
.sheet.is-landscape { aspect-ratio: 1.414 / 1; }
/* a page as it is printed (pdf.py): 12 mm margin, the caption one narrow line under the drawing; with the photo option a
   30 mm strip with the caption on the left and the photo on the right. --mm: one millimetre of the page as shown. */
.page:not(.cover) .sheet { container-type: inline-size; display: flex; flex-direction: column; align-items: stretch; padding: 5.71%; --mm: calc(100cqw / 186); }
.page:not(.cover) .sheet.is-landscape { padding: 4.04%; --mm: calc(100cqw / 273); }
.sheet-art { position: relative; flex: 1 1 0; min-height: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }
.sheet-art > * { grid-area: 1 / 1; }
.sheet-drawing { width: 100%; height: 100%; object-fit: contain; }
.sheet-foot { flex: none; display: flex; align-items: center; justify-content: center; margin-top: calc(3 * var(--mm)); }
.sheet-caption { margin: 0; font-family: var(--hand); font-size: max(7px, calc(5.3 * var(--mm))); line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.sheet-caption:empty { display: none; }
.sheet.has-strip .sheet-foot { height: calc(30 * var(--mm)); margin-top: calc(5 * var(--mm)); justify-content: space-between; gap: calc(6 * var(--mm)); }
.sheet.has-strip .sheet-caption {
  flex: 1; text-align: left; font-size: max(7px, calc(6 * var(--mm))); padding-left: calc(2 * var(--mm));
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sheet-strip-photo { width: auto; height: auto; max-height: calc(28 * var(--mm)); max-width: calc(55 * var(--mm)); border: 1px solid var(--ink); margin-left: auto; }
.page.is-removed .sheet-foot { visibility: hidden; }
.sheet-wait { display: grid; justify-items: center; gap: 12px; text-align: center; color: var(--ink-2); font-family: var(--hand); padding: 0 8px; }
.sheet-wait.is-overlay { position: absolute; left: 12px; right: 12px; bottom: 12px; background: rgba(255,255,255,.92); border-radius: var(--wobble); padding: 10px; }
/* the photo small at the top right of the drawing: only on /admin, where an Etsy order is checked (admin_etsy_order.html);
   the customer's book page shows it next to the drawing and in the strip */
.sheet-photo {
  position: absolute; right: -10px; top: -14px; width: 30%; aspect-ratio: 1; object-fit: cover;
  border: 4px solid var(--paper); outline: 2px solid var(--ink); border-radius: 3px; transform: rotate(5deg);
}
/* While a page is drawn: a crayon sweeps one yellow swing across the sheet, lifts, and the colour fades before it
   starts again. The swing is straight lines only, so the pencil follows it with plain keyframes (each stop at its
   share of the length) in step with the stroke. Without motion: the finished swing with the pencil at its end. */
.pencil { display: block; width: 128px; }
.pencil svg { display: block; width: 100%; height: auto; overflow: visible; }
.pencil-line { fill: none; stroke: var(--sun); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100 101; animation: pencil-line 2.6s linear infinite; }
.pencil-pen { transform: translate(72px, 27.8px); animation: pencil-move 2.6s linear infinite; }
.pencil-body { fill: var(--sun); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.pencil-groove { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; }
.pencil-wood { fill: var(--paper); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.pencil-lead { fill: var(--sun); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.sheet-wait.is-overlay .pencil { width: 92px; }
@keyframes pencil-line { 0% { stroke-dashoffset: 100; opacity: 1; } 70% { stroke-dashoffset: 0; opacity: 1; } 86% { opacity: 1; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes pencil-move {
  0% { transform: translate(6px, 40px); } 2.7% { transform: translate(8.2px, 43.2px); } 4.86% { transform: translate(10.4px, 45.4px); }
  6.43% { transform: translate(12.6px, 45.9px); } 8.24% { transform: translate(14.8px, 44.5px); } 10.82% { transform: translate(17px, 41.5px); }
  13.93% { transform: translate(19.2px, 37.6px); } 17.04% { transform: translate(21.4px, 33.7px); } 19.52% { transform: translate(23.6px, 30.9px); }
  21.2% { transform: translate(25.8px, 29.9px); } 22.82% { transform: translate(28px, 30.7px); } 25.14% { transform: translate(30.2px, 33.2px); }
  27.89% { transform: translate(32.4px, 36.5px); } 30.53% { transform: translate(34.6px, 39.6px); } 32.55% { transform: translate(36.8px, 41.5px); }
  34.09% { transform: translate(39px, 41.7px); } 36.02% { transform: translate(41.2px, 40px); } 38.77% { transform: translate(43.4px, 36.7px); }
  41.94% { transform: translate(45.6px, 32.7px); } 44.94% { transform: translate(47.8px, 29px); } 47.25% { transform: translate(50px, 26.5px); }
  48.87% { transform: translate(52.2px, 25.7px); } 50.62% { transform: translate(54.4px, 26.9px); } 53.04% { transform: translate(56.6px, 29.6px); }
  55.79% { transform: translate(58.8px, 32.9px); } 58.38% { transform: translate(61px, 35.9px); } 60.31% { transform: translate(63.2px, 37.6px); }
  61.84% { transform: translate(65.4px, 37.4px); } 63.95% { transform: translate(67.6px, 35.3px); } 66.77% { transform: translate(69.8px, 31.9px); }
  70% { transform: translate(72px, 27.8px); } 76% { transform: translate(77px, 20.8px); } 90% { transform: translate(11px, 33px); }
  100% { transform: translate(6px, 40px); }
}
/* in the sheet: what the page can do */
.page-tools { display: grid; gap: 14px; align-content: start; }
.page-move { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.page-move-label { margin-right: 4px; font-size: var(--step--1); color: var(--ink-3); }
.page-compare { display: flex; align-items: center; gap: 14px; }
.page-compare-photo { width: 88px; height: 88px; object-fit: cover; border: 2px solid var(--ink); border-radius: 9px 12px 8px 11px; background: var(--wash); flex: none; }
.page-compare .fine { margin: 0; }
.page-other { margin: 0; }
.versions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--step--1); }
.versions-label { color: var(--ink-3); margin-right: 2px; }
.versions button { font: inherit; font-weight: 700; width: 32px; height: 32px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); cursor: pointer; }
.versions button[aria-pressed="true"] { background: var(--sun); }
.caption { display: block; }
.input-caption { min-height: 42px; padding: 8px 12px; font-size: var(--step--1); }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.page-actions [data-act="remove"] { margin-left: auto; }
/* title, dedication and the photo option, under the cover */
.cover-fields .field { margin: 0 0 14px; }
.cover-fields .field-label { font-size: var(--step--1); }
.cover-fields .input { min-height: 46px; padding: 9px 14px; font-size: 1rem; }
.cover-fields .input-title { font-size: 1.1rem; }
.cover-fields .check-inline { margin: 4px 0 0; }

.cover-sheet { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 10px; padding: 8% 7% 6%; border-radius: 14px; }
.cover-title {
  margin: 0; text-align: center; font-family: var(--hand); font-weight: 800; font-size: clamp(1.4rem, 2.3vw, 1.9rem); line-height: 1.1;
  color: var(--paper); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; overflow-wrap: anywhere;
}
.cover-dedication { margin: -4px 0 0; text-align: center; text-wrap: balance; font-family: var(--hand); font-size: .8rem; line-height: 1.25; overflow-wrap: anywhere; }
.cover-dedication:empty { display: none; }
.cover-title, .cover-dedication, .cover-owner { flex: none; }
/* the first pages small, like sheets lying on a table, each turned a little (pdf.py _mosaic, MOSAIC_TURN); the rows
   lie together in the middle, as in the PDF */
.cover-mosaic {
  flex: 1 1 0; min-height: 0; width: 100%; container-type: size;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 6px 8px; padding: 2px 4px;
}
.cover-mosaic[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
.cover-mosaic img {
  justify-self: center; align-self: center; max-width: 100%; max-height: calc(50cqh - 3px); min-width: 0;
  padding: 3px; background: var(--paper); border: 1px solid var(--ink); border-radius: 3px; transform: rotate(-3deg);
}
.cover-mosaic:not([data-cols="1"]) img:first-child:nth-last-child(-n+2),
.cover-mosaic:not([data-cols="1"]) img:nth-child(2):last-child { max-height: 100cqh; }      /* one row */
.cover-mosaic img:nth-child(2) { transform: rotate(2.5deg); }
.cover-mosaic img:nth-child(3) { transform: rotate(2deg); }
.cover-mosaic img:nth-child(4) { transform: rotate(-2.5deg); }
.cover-mosaic:not([data-cols="1"]) img:nth-child(3):last-child { grid-column: 1 / -1; max-width: calc(50% - 4px); }
/* a book of one page: an empty field to draw yourself in, inside the Alltag frame (or the occasion's) */
.cover-draw-here {
  flex: 1 1 0; min-height: 0; align-self: stretch; margin: 0; padding: 8px; border: 1.5px dashed var(--ink); border-radius: 10px;
  text-align: center; font-family: var(--hand); font-size: .62rem; line-height: 1.3; color: var(--ink-3);
}
.cover-owner { margin: 0; align-self: stretch; font-family: var(--hand); font-size: .8rem; display: flex; gap: 6px; }
.cover-owner span { flex: 1; border-bottom: 1.5px solid var(--ink); }
/* a Halloween or Christmas book, or one of a single page: the frame from the PDF cover, everything else inside its
   window (pdf.py COVER_FRAMES) */
.cover-sheet[data-occasion="halloween"] {
  background: var(--paper) url("/static/img/rahmen-halloween.webp") center / 86.7% 91.9% no-repeat;
  padding: 23% 21.5% 26%;
}
.cover-sheet[data-occasion="weihnachten"] {
  background: var(--paper) url("/static/img/rahmen-weihnachten.webp") center / 86.7% 91.9% no-repeat;
  padding: 27% 20.2% 31%;
}
.cover-sheet[data-frame="alltag"] {
  background: var(--paper) url("/static/img/rahmen-alltag.webp") center / 86.7% 91.9% no-repeat;
  padding: 26% 21% 33%;
}
.add-row { margin: 0 0 18px; }
.preview-note { margin: 0 0 22px; max-width: 70ch; }
.book .lookbox { margin-top: 8px; }

/* one page in a sheet: from below on the phone, in the middle on wide screens; "Fertig" or the back button closes it */
.pagesheet { width: 100%; max-width: 980px; max-height: 92vh; max-height: 92dvh; margin: auto auto 0; padding: 0; border: var(--line); border-bottom: 0;
  border-radius: 24px 24px 0 0; background: var(--paper); color: var(--ink); overscroll-behavior: contain; }
.pagesheet:not([open]) { display: none; }
.pagesheet::backdrop { background: rgba(29, 29, 27, .38); }
/* the book behind it stays where it was; where the scrollbar was (Windows), the page is dimmed like the backdrop */
html:has(.pagesheet[open]) { overflow: hidden; scrollbar-gutter: stable; background: #a9a9a8; }
@media (min-width: 720px) { .pagesheet { width: calc(100% - 2 * var(--gutter)); margin: auto; border-bottom: var(--line); border-radius: 24px; max-height: 90vh; max-height: 90dvh; } }
.pagesheet-inner { padding: 0 18px calc(18px + env(safe-area-inset-bottom)); }
/* the head stays at the top while the page scrolls under it, so "Fertig" is always in reach */
.pagesheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0; padding: 14px 0 12px; background: var(--paper); }
.pagesheet-head h2 { margin: 0; font-size: var(--step-2); }
.pagesheet-head h2:focus-visible { outline: none; }
.pagesheet-body { list-style: none; margin: 0; padding: 0; }
.pagesheet .form-error { margin: 14px 0 0; }
.pagesheet-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1.5px dashed var(--rule); }
.pagesheet .page { display: grid; gap: 14px 26px; }
.pagesheet .page-n, .pagesheet .page-open { display: none; }
.pagesheet .page > .sheet { width: 100%; max-width: min(420px, 37vh); justify-self: center; }
.pagesheet .page > .sheet.is-landscape { max-width: min(100%, 560px); }
@media (min-width: 720px) {
  .pagesheet .page { grid-template: "sheet msg" auto "sheet tools" auto "sheet ." 1fr / minmax(0, 380px) minmax(0, 1fr); align-items: start; }
  .pagesheet .page:has(> .sheet.is-landscape) { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); }
  .pagesheet .page > .sheet { grid-area: sheet; max-width: min(100%, 46vh); }
  .pagesheet .page > .sheet.is-landscape { max-width: 100%; }
  .pagesheet .page > .page-msg { grid-area: msg; }
  .pagesheet .page > .page-tools { grid-area: tools; }
}
/* without <dialog> (old browsers, book.js): every page shows all it can do right in the list */
.no-sheet .pages { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 34px 26px; align-items: start; }
.no-sheet .pages .page-tools { display: grid; }
.no-sheet .pages .page-msg { display: block; }
.no-sheet .page-open, .no-sheet .pages .page-n::after { display: none; }

/* the buy bar; on this page it also holds the help button, so nothing floats over a drawing */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--paper); border-top: 2.5px solid var(--ink); }
.buybar-inner { max-width: 1180px; margin: 0 auto; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.buybar-text { margin: 0; font-weight: 700; }
.buybar-text small { display: block; font-weight: 400; color: var(--ink-3); font-size: var(--step--1); }
.buybar-actions { display: flex; align-items: center; gap: 12px; }
.buybar .btn { min-width: 200px; }
.buybar-help {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 16px 6px 7px; flex: none;
  font: 700 1rem var(--hand); color: var(--ink); text-decoration: none; background: var(--paper); border: var(--line); border-radius: 999px;
}
.buybar-help:hover { background: var(--wash); }
@media (max-width: 520px) {
  .buybar-actions { width: 100%; }
  .buybar .btn { flex: 1 1 auto; min-width: 0; }
}

/* --- checkout --- */
.order-summary { border: var(--line); border-radius: var(--wobble); padding: 18px 20px; margin: 10px 0 24px; }
.order-summary p { margin: 0 0 4px; }
.order-item { font-family: var(--hand); font-weight: 700; font-size: var(--step-1); }
.order-details { color: var(--ink-2); }
.order-price { font-family: var(--hand); font-weight: 800; font-size: 1.8rem; margin-top: 8px !important; }
.order-price .fine { font-family: var(--text); font-weight: 400; display: block; }
.checkout-form .check span { font-weight: 600; }

/* --- giving a book away --- */
.ways { display: grid; gap: 14px; margin: 20px 0 18px; max-width: 640px; }
.way { display: flex; gap: 14px; align-items: flex-start; padding: 16px 16px 18px; border: var(--line); border-radius: var(--wobble); }
.way h2 { font-size: var(--step-1); margin: 4px 0 4px; }
.way p { color: var(--ink-2); margin: 0 0 12px; }
.way-icon { --c: var(--sun); display: grid; place-items: center; width: 44px; height: 44px; flex: none; background: var(--c); border: 2px solid var(--ink); border-radius: 50%; }
.way-icon .icon { width: 22px; height: 22px; }
.way-icon-voucher { --c: #8fc9ff; }
.way-icon-collect { --c: #9ee0a8; }

.note-box { display: flex; gap: 10px; align-items: flex-start; background: #fff6dc; border: 2px solid var(--ink); border-radius: var(--wobble); padding: 12px 14px; margin: 0 0 24px; }
.note-box .icon { width: 22px; height: 22px; margin-top: 1px; }
.status .note-held { margin: 12px 0 0; }
.partner-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 10px 0 18px; }
.partner-form .field { margin: 0; }
.partner-form .input { min-height: 40px; padding: 6px 10px; font-size: var(--step--1); width: 9rem; }
.partner-form .input-pct { width: 5rem; }

.field-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 12px; }
textarea.input { display: block; resize: vertical; line-height: 1.45; }
.input-code { font-family: var(--hand); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tier-choice .style-opts { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.opt-price { font-size: 1.35rem; font-weight: 800; line-height: 1.2; }

/* the yellow box on the book page: gift link and card, or the family link */
.sharebox { background: #fff6dc; border: 2px solid var(--ink); border-radius: var(--wobble); padding: 16px 18px 18px; margin: 0 0 22px; max-width: 640px; }
.sharebox p { color: var(--ink-2); font-size: var(--step--1); }
.sharebox .field { margin-bottom: 14px; }
.sharebox .field-label { font-size: var(--step-0); }
.sharebox-teaser { display: flex; gap: 12px; align-items: flex-start; }
.sharebox-teaser .sharebox-h { font-size: var(--step-1); margin: 0 0 2px; }
.sharebox-h { display: flex; align-items: center; gap: 10px; font-size: var(--step-2); margin: 0 0 6px; }
.sharebox-icon { width: 26px; height: 26px; }
.sharebox-teaser > .sharebox-icon { margin-top: 2px; }
.sharebox-suggested { margin: -8px 0 14px; }
.share-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 10px; }
.share-actions .btn { flex: 1 1 200px; }   /* side by side only where both labels fit on one line */
.share-link { margin: 0 0 8px; font-size: var(--step--1); color: var(--ink-2); }
.sharebox .form-error { color: var(--cherry); }

.page-from { margin: -4px 0 0; font-size: var(--step--1); color: var(--ink-2); }

/* the gift page */
.narrow .gift-h1 { font-size: clamp(2.2rem, 1.5rem + 3.4vw, 3.4rem); font-weight: 800; line-height: 1.04; text-wrap: balance; margin: 18px 0 .2em; }
.gift-from { font-family: var(--hand); font-size: var(--step-1); color: var(--ink-2); margin: 0 0 18px; }
.gift-message { background: var(--wash); border-radius: var(--wobble); padding: 14px 16px; font-family: var(--hand); white-space: pre-line; max-width: 46ch; }
.gift-cover { width: min(62%, 250px); margin: 26px auto 30px; transform: rotate(-1.5deg); }
@media (min-width: 560px) { .gift-cover { margin-left: 6px; } }   /* on wide screens it lines up with the button below */
.gift-cover .cover-title { font-size: 1.15rem; -webkit-text-stroke-width: 1px; }
.gift-cover .cover-dedication { font-size: .62rem; }
.gift-cover .cover-owner { font-size: .58rem; }
.gift-download { margin: 0 0 14px; }
.gift-about { margin-top: 28px; }

/* a voucher, as on the printed card */
.ticket { border: 2px dashed var(--ink-3); border-radius: 12px; padding: 18px 20px; margin: 14px 0 22px; max-width: 520px; }
.ticket p { margin: 0; }
.ticket-for { font-family: var(--hand); font-weight: 700; font-size: var(--step-1); }
.ticket-from { color: var(--ink-2); margin-bottom: 12px !important; }
.ticket-label { font-size: var(--step--1); color: var(--ink-3); margin-top: 6px !important; }
.ticket-code { display: inline-block; white-space: nowrap; font-family: var(--hand); font-weight: 800; letter-spacing: .05em;
  font-size: min(1.7rem, calc((100vw - 104px) / 11));     /* the widest code (11em) on one line, even at 320px */
  border: 2px dashed var(--ink); border-radius: 8px; padding: 0 12px; margin: 2px 0 10px !important; }
.ticket-terms { font-size: var(--step--1); color: var(--ink-2); }

/* checkout with a voucher */
.order-old { font-weight: 400; font-size: 1.15rem; color: var(--ink-3); }
.order-badge { font-family: var(--text); font-size: var(--step--1); font-weight: 600; color: var(--leaf); white-space: nowrap; }
.voucher-box { margin: -8px 0 22px; }
.voucher-box form { margin: 0; }
.voucher-box .btn-quiet { padding-inline: 0; border-inline-width: 0; }
.voucher-ok + form { margin-left: 30px; }   /* under the text, not under the tick */
.voucher-ok { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 4px; }
.icon-ok { width: 22px; height: 22px; margin-top: 1px; color: var(--leaf); stroke-width: 2.5; }
.voucher-open summary { cursor: pointer; display: inline-block; padding: 6px 0; font-weight: 600; text-decoration: underline; text-decoration-color: var(--sky); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.voucher-open[open] summary { margin-bottom: 8px; }
.code-row { display: flex; gap: 10px; align-items: stretch; margin: 0 0 6px; }
.code-row .input { flex: 1; min-width: 0; }

/* helper page */
.thumbs-small { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; margin-bottom: 12px; }
.helper-done { margin: 0 0 16px; }
.helper-done strong { font-family: var(--hand); font-size: var(--step-1); display: block; }
.helper-done span { color: var(--ink-2); }
.helper-until { display: flex; align-items: center; gap: 8px; margin: -4px 0 20px; font-weight: 700; }

/* --- legal & admin --- */
.legal { max-width: 760px; margin: 0 auto; padding: 8px var(--gutter) 0; }
.legal h1 { font-size: var(--step-3); margin-top: 16px; }
.legal h2 { font-size: var(--step-2); margin-top: 1.6em; }
.legal h3 { margin-top: 1.2em; }
.legal p, .legal li { max-width: 70ch; }
.legal address { font-style: normal; margin-bottom: 1em; }
.legal .note { background: #fff1c2; border-radius: var(--wobble); padding: 10px 14px; font-weight: 600; }
.admin { max-width: 1180px; margin: 0 auto; padding: 8px var(--gutter); }
.table { border-collapse: collapse; width: 100%; font-size: var(--step--1); margin-bottom: 32px; display: block; overflow-x: auto; }
.table th, .table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.table form { margin: 0; }
.mail { border-bottom: 1px solid var(--rule); padding: 6px 0; font-size: var(--step--1); }
.mail summary { cursor: pointer; }
.mail pre { white-space: pre-wrap; font-family: inherit; max-width: 80ch; color: var(--ink-2); }
.admin-alert .table { margin: 8px 0 0; }
.table .mail-error { white-space: normal; min-width: 16rem; }
/* admin: the search, its buttons and the question before deleting */
.admin-search { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 10px 0 6px; }
.admin-search .field { margin: 0; flex: 1 1 18rem; max-width: 32rem; }
.admin-search .input { min-height: 44px; padding: 6px 10px; }
.admin-done { border-left: 4px solid var(--leaf); padding: 4px 12px; font-weight: 600; }
.admin-actions form { display: inline-block; margin: 0 0 0 6px; }
.admin-confirm { max-width: 760px; }
.admin-confirm-form { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 18px 0 32px; }
/* admin: giving a voucher away */
.giftbox { border: 2.5px solid var(--ink); border-radius: var(--wobble-lg); padding: 16px 16px 18px; margin: 0 0 24px; max-width: 640px; }
.giftbox h3 { margin-bottom: 4px; }
.giftbox > .fine { margin-top: 0; }
.giftbox .field { margin-bottom: 14px; }
.giftbox .input { min-height: 44px; padding: 8px 12px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0 0 14px; }
.pills legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pill span { display: inline-block; font-size: var(--step--1); font-weight: 700; padding: 7px 14px; border-radius: 999px; border: 2px solid var(--ink); background: var(--paper); }
.pill input:checked + span { background: var(--sun); }
.pill input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
.done-box { background: #f1faf4; border: 2px solid var(--leaf); border-radius: var(--wobble); padding: 14px 16px 6px; margin: 0 0 24px; max-width: 640px; }
.done-box-h { font-weight: 800; margin: 0 0 4px; display: flex; gap: 8px; align-items: center; }
.done-tick { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--leaf); color: #fff; display: grid; place-items: center; font-size: 13px; }
.done-box .ticket { background: var(--paper); margin: 10px 0 12px; }
.reason { display: inline-block; font-size: .78rem; font-weight: 700; padding: 1px 9px; border-radius: 999px; border: 2px solid var(--rule); background: var(--wash); color: var(--ink-2); }
.reason-influencer { background: #efe6fb; border-color: var(--plum); color: #5b2f94; }
.reason-kulanz { background: #fff0e6; border-color: var(--pumpkin); color: #9a4a00; }
.admin-download { font-size: var(--step--1); font-weight: 700; margin: -18px 0 28px; }
.error-page { padding-top: 40px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:hover, .pages .page:hover .sheet { transform: none; }
}

/* an influencer's own page (/partner/...) */
.partner-page { padding-bottom: 40px; }
.partner-page h1 { margin-bottom: 4px; }
.partner-page h2 { font-size: var(--step-2); margin: 30px 0 8px; }
.partner-lead { color: var(--ink-2); margin: 0 0 14px; }
.month-pick { display: inline-block; position: relative; margin: 0; }
.month-pick summary, .month-pick > span { display: inline-block; border: 2px solid var(--ink); border-radius: 999px; padding: 4px 14px; font-weight: 700; font-size: var(--step--1); background: #fff; cursor: pointer; list-style: none; }
.month-pick summary::-webkit-details-marker { display: none; }
.month-pick summary::after { content: " ▾"; }
.month-pick ul { position: absolute; z-index: 5; list-style: none; margin: 6px 0 0; padding: 6px 0; background: #fff; border: 2px solid var(--ink); border-radius: 14px; min-width: 12rem; }
.month-pick li a { display: block; padding: 6px 14px; color: var(--ink); text-decoration: none; }
.month-pick li a[aria-current] { font-weight: 700; }
.partner-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 8px; }
.partner-stats p { margin: 0; border: 2px solid var(--ink); border-radius: var(--wobble); padding: 12px 14px; }
.partner-stats b { display: block; font-family: var(--hand); font-size: 1.7rem; line-height: 1.1; }
.partner-stats span { font-size: var(--step--1); color: var(--ink-2); }
.partner-stats .partner-stat-sun { background: #fff6dc; }
.partner-live { display: flex; gap: 8px; align-items: center; font-size: var(--step--1); color: var(--ink-2); margin: 6px 0 0; }
.partner-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--leaf); flex: 0 0 auto; }
.partner-sales { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.partner-sales th { text-align: left; font-weight: 600; color: var(--ink-2); border-bottom: 2px solid var(--ink); padding: 6px 4px; }
.partner-sales td { border-bottom: 1px solid var(--rule); padding: 7px 4px; vertical-align: top; }
.partner-sales td span { color: var(--ink-3); }
.partner-sales tfoot td { border-bottom: 0; border-top: 2px solid var(--ink); font-weight: 700; }
.partner-payouts { list-style: none; padding: 0; margin: 6px 0 8px; font-size: var(--step--1); }
.partner-payouts li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--rule); padding: 7px 2px; }
.partner-payouts li > span:last-child { display: inline-flex; gap: 6px; align-items: center; }
.partner-payouts .icon-ok { width: 18px; height: 18px; margin: 0; }
.partner-box { border: 2px solid var(--ink); border-radius: var(--wobble); padding: 12px 14px; margin: 10px 0; background: #fff6dc; }
.partner-box p { margin: 0 0 6px; }
.partner-box p:last-child { margin: 0; }
.partner-rules { padding-left: 1.1em; margin: 6px 0 14px; font-size: var(--step--1); }
.partner-rules li { margin-bottom: 6px; }
.partner-code { display: inline-block; font-family: ui-monospace, monospace; font-weight: 700; letter-spacing: .06em; border: 2px dashed var(--ink); border-radius: 10px; padding: 1px 8px; background: #fff; }
.partner-mail { display: flex; gap: 6px; align-items: center; }
.partner-mail .input { min-height: 34px; padding: 4px 8px; font-size: var(--step--1); width: 13rem; }

/* admin: drawing is paused */
.admin-alert { border: 2px solid var(--cherry); background: #fff0ee; border-radius: var(--wobble); padding: 12px 16px; margin: 0 0 22px; overflow-wrap: anywhere; }
.admin-alert p { margin: 0 0 6px; }
.admin-alert p:last-child { margin: 0; }
.admin-alert .admin-alert-h { font-family: var(--hand); font-weight: 700; font-size: var(--step-1); color: var(--cherry); }

/* --- withdrawal online (§ 356a BGB): the button at the bottom of every page, the form and its confirmation --- */
.footer-withdraw { margin: 14px 0 0; }
.footer-withdraw a { display: inline-block; border: 2px solid var(--ink); border-radius: 999px; padding: 6px 16px; font-size: var(--step--1); font-weight: 700; color: var(--ink); text-decoration: none; background: var(--paper); }
.footer-withdraw a:hover { background: var(--wash); }
.withdraw-lead { color: var(--ink-2); }
.withdraw-order { border: 2px solid var(--ink); border-radius: var(--wobble); background: #fff6dc; padding: 12px 16px; margin: 0 0 22px; }
.withdraw-order p { margin: 0 0 4px; }
.withdraw-order p:last-child { margin: 0; }
.withdraw-done { text-align: center; }
.withdraw-done .withdraw-order { text-align: left; }
.withdraw-check { font-size: 3.5rem; line-height: 1; margin: 12px 0 6px; }
.withdraw-box { margin: 22px 0 0; }
.withdraw-box .fine { margin: 0 0 8px; }
a.btn-small { display: inline-flex; align-items: center; text-decoration: none; }

/* --- payment methods before paying, help page, small hints --- */
/* the payment methods of the Stripe checkout (§ 312j BGB): plain words in small outlined chips, no brand logos */
.pay-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 22px; font-size: var(--step--1); }
.pay-label { font-weight: 700; margin-right: 4px; }
.pay-chip { border: 2px solid var(--ink); border-radius: 9px 12px 8px 11px / 11px 8px 12px 9px; padding: 0 9px; line-height: 1.75; font-weight: 600; white-space: nowrap; background: var(--paper); }
.pricing .pay-line { margin: -10px 0 26px; }
.order-summary .pay-line { margin: 14px 0 2px; padding-top: 12px; border-top: 2px dashed var(--rule); }
.faq-more { margin: 18px 0 0; font-weight: 600; }

/* help page: questions like the start page FAQ, a size smaller; topics to jump to; the address at the end */
.qa details { border-bottom: 2px dashed var(--rule); padding: 2px 0; }
.qa summary { cursor: pointer; list-style: none; position: relative; padding: 12px 40px 12px 0; font-family: var(--hand); font-weight: 600; font-size: var(--step-0); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 6px; top: 4px; font-size: 1.6rem; font-weight: 400; }
.qa details[open] summary::after { content: "–"; }
.qa details p { color: var(--ink-2); max-width: 66ch; margin-top: -2px; }
.help-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.help-jump a { border: 2px solid var(--ink); border-radius: 999px; padding: 4px 14px; font-size: var(--step--1); font-weight: 600; color: var(--ink); text-decoration: none; }
.help-jump a:hover { background: var(--wash); }
.help-topic { margin-top: 34px; scroll-margin-top: 16px; }
.help-topic h2 { font-size: var(--step-2); margin-bottom: 2px; }
.help-contact { margin-top: 40px; background: #fff6dc; border: 2px solid var(--ink); border-radius: var(--wobble); padding: 16px 18px 6px; }
.help-contact h2 { display: flex; align-items: center; gap: 10px; font-size: var(--step-2); margin-bottom: 4px; }
.help-contact-icon { width: 26px; height: 26px; }
.help-contact a:not(.btn) { font-weight: 700; }

/* which photos the image service turns down, where photos are picked; the link for the family is private */
.dropzone-tip { margin: 2px auto 0; max-width: 40ch; font-size: var(--step--1); color: var(--ink-3); }
.collect-private { margin: 0 0 8px; }

/* the help button on every page and its sheet (_helpsheet.html, help.js); on the book page it sits in the buy bar */
.helpfab {
  position: fixed; right: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30;
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 16px 6px 7px;
  font: 700 1rem var(--hand); color: var(--ink); text-decoration: none; background: var(--paper); border: var(--line); border-radius: 999px;
}
.helpfab:hover { background: var(--wash); }
.helpfab-q { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sun); border: 2px solid var(--ink); font-weight: 800; font-size: 1.1rem; line-height: 1; }
.has-helpfab .site-footer { padding-bottom: 104px; }      /* at the very end the button never covers "Vertrag widerrufen" */
.helpsheet { width: 100%; max-width: 560px; max-height: 82vh; margin: auto auto 0; padding: 0; border: var(--line); border-bottom: 0; border-radius: 24px 24px 0 0; background: var(--paper); color: var(--ink); overscroll-behavior: contain; }
.helpsheet::backdrop { background: rgba(29, 29, 27, .38); }
.helpsheet-inner { padding: 16px 18px calc(20px + env(safe-area-inset-bottom)); }
.helpsheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.helpsheet-head h2 { margin: 0; font-size: var(--step-2); }
.helpsheet-sub { margin: 4px 0 2px; color: var(--ink-3); font-size: var(--step--1); }
.helpsheet-all { margin: 16px 0 0; }
.helpsheet-all .btn { width: 100%; }
.helpsheet-contact { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; font-size: var(--step--1); color: var(--ink-2); }
.helpsheet-contact .icon { margin-top: 2px; color: var(--ink); }
.helpsheet-contact a { font-weight: 700; }

/* admin: Etsy orders, made into books bought at Etsy (etsy.py) */
.etsy-cards { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; max-width: 760px; }
.etsy-card { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; border: 2px solid var(--ink); border-radius: var(--wobble); padding: 10px 12px; background: var(--paper); color: var(--ink); text-decoration: none; }
.etsy-card:hover { background: var(--wash); }
.etsy-card.is-quiet { border-color: var(--rule); }
.etsy-card img, .etsy-card-empty { width: 64px; height: 80px; object-fit: contain; border: 1.5px solid var(--rule); border-radius: 4px; background: #fff; }
.etsy-card-empty { display: block; background: var(--wash); }
.etsy-card-t { display: block; font-weight: 700; }
.etsy-card-s { display: block; font-size: var(--step--1); color: var(--ink-2); margin-bottom: 6px; }
.etsy-inline { display: inline-block; margin: 0; }
.etsy-card-why { display: block; font-size: var(--step--1); color: var(--cherry); margin-bottom: 6px; }
.etsy-link { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: center; border: 2px solid var(--rule); border-radius: var(--wobble); padding: 12px 14px; margin: 0 0 18px; max-width: 760px; background: var(--paper); }
.etsy-link.is-on { border-color: var(--leaf); background: #f3fbf6; }
.etsy-link p { margin: 0; }
.etsy-link-t { font-weight: 700; display: flex; align-items: flex-start; gap: 8px; line-height: 1.35; }
.etsy-link-s { grid-column: 1; font-size: var(--step--1); color: var(--ink-2); }
.etsy-link form, .etsy-link-go { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.etsy-link .form-error { grid-column: 1 / -1; font-size: var(--step--1); margin-top: 6px; }
.etsy-dot { flex: none; width: 10px; height: 10px; margin-top: .45em; border-radius: 50%; background: var(--leaf); }
.etsy-dot.is-off { background: var(--rule); }
@media (max-width: 560px) { .etsy-link { grid-template-columns: 1fr; } .etsy-link form, .etsy-link-go { grid-column: 1; grid-row: auto; margin-top: 10px; justify-self: start; } }
.etsy-waiting { border-left: 4px solid var(--cherry); background: #fff6f4; padding: 8px 12px; margin: 12px 0; }
.etsy-waiting p { margin: 0 0 8px; }
.etsy-chip { display: inline-block; font-size: .8rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; border: 2px solid var(--ink); background: var(--paper); white-space: nowrap; }
.etsy-chip-check { background: var(--sun); }
.etsy-chip-wait { background: var(--wash); border-color: var(--rule); color: var(--ink-2); }
.etsy-chip-stop { background: #fff0ee; border-color: var(--cherry); color: var(--cherry); }
.etsy-chip-done { background: #e6f5ec; border-color: var(--leaf); color: #1d6e3e; }
.etsy-more { border: 2px dashed var(--rule); border-radius: var(--wobble); padding: 10px 14px; margin: 0 0 18px; max-width: 760px; }
.etsy-more summary { font-weight: 700; cursor: pointer; }
.etsy-more .table { margin: 10px 0 4px; }
.etsy-form { margin-top: 12px; }
.etsy-form .field { margin-bottom: 14px; max-width: 32rem; }
.etsy-style { border: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.etsy-style legend { width: 100%; }
.etsy-form .input-pct { width: 7rem; }
.etsy-sheet { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 18px; max-width: 760px; }
.etsy-start { border-top: 2px solid var(--rule); margin-top: 26px; padding-top: 16px; }
.etsy-start h2 { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.etsy-nudge { border-left: 4px solid var(--rule); background: var(--wash); padding: 10px 12px; margin: 12px 0 16px; max-width: 760px; }
.etsy-nudge.is-due { border-left-color: var(--cherry); background: #fff6f4; }
.etsy-nudge p { margin: 0 0 8px; }
.etsy-nudge textarea { width: 100%; font-size: var(--step--1); margin-bottom: 8px; }
/* admin: one Etsy order, checked page by page and handed over at Etsy */
.etsy-order { max-width: 980px; padding-bottom: 40px; }
.etsy-back { display: inline-block; font-size: var(--step--1); font-weight: 600; margin: 4px 0 12px; }
.etsy-order-h1 { font-size: var(--step-3); margin-bottom: 4px; overflow-wrap: anywhere; }
.etsy-order-meta { color: var(--ink-2); margin: 0 0 14px; }
.etsy-checks { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.etsy-checks li { display: flex; gap: 10px; align-items: flex-start; }
.etsy-tick { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--leaf); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.etsy-tick.is-stop { background: var(--cherry); }
.etsy-tick.is-warn { background: var(--sun); color: var(--ink); }
.etsy-tick.is-wait { background: var(--wash); color: var(--ink); border: 1.5px solid var(--rule); }
.etsy-inline-block { display: block; margin: 10px 0 0; }
.etsy-dedication { background: var(--wash); border-radius: var(--wobble); padding: 10px 14px; margin: 0 0 22px; }
.etsy-occasion { margin: 0 0 22px; }
.etsy-occasion .etsy-style { margin-bottom: 10px; }
.etsy-occasion .fine { margin: 8px 0 0; }
.etsy-dedication b { display: block; font-size: var(--step--1); color: var(--ink-3); font-weight: 700; }
.etsy-dedication span { font-family: var(--hand); font-size: var(--step-1); overflow-wrap: anywhere; }
.etsy-thumbs { list-style: none; padding: 0; margin: 0 0 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; align-items: end; }
@media (min-width: 720px) { .etsy-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.etsy-thumbs li { display: grid; gap: 8px; min-width: 0; scroll-margin-top: 16px; }
.etsy-thumbs form { margin: 0; }
.etsy-thumbs .sheet { padding: 6%; }
.etsy-thumbs .sheet-photo { width: 34%; right: -6px; top: -8px; border-width: 3px; }
.etsy-thumbs .sheet-wait { font-size: var(--step--1); }
.etsy-thumbs .pencil { width: 72px; }
.etsy-thumb-note { margin: 0; font-size: var(--step--1); color: var(--ink-3); }
.etsy-deliver { border: 2.5px solid var(--ink); border-radius: var(--wobble-lg); padding: 16px 16px 6px; margin: 0 0 22px; background: var(--paper); }
.etsy-deliver.is-waiting { border-color: var(--rule); }
.etsy-deliver.is-done { border-color: var(--leaf); background: #f3fbf6; padding-bottom: 12px; }
.etsy-deliver h2 { font-size: var(--step-2); margin-top: 0; }
.etsy-deliver-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 1em; }
.etsy-buyer-link { background: var(--wash); border-radius: var(--wobble); padding: 14px 16px 4px; margin: 0 0 22px; }
.etsy-buyer-link h2 { font-size: var(--step-1); margin: 0 0 6px; }
.etsy-buyer-link code { word-break: break-all; }
.etsy-steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 16px; }
.etsy-steps li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; }
.etsy-steps li::before { content: counter(s); width: 34px; height: 34px; border-radius: 50%; background: var(--sun); border: 2px solid var(--ink); display: grid; place-items: center; font-family: var(--hand); font-weight: 800; }
.etsy-steps p { margin: 0 0 8px; }
.etsy-steps .btn, .etsy-steps form { margin: 0 0 4px; }

/* --- coming-soon page: what visitors see during the private test (coming_soon.html, main.site_lock) --- */
body.soon { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.soon .site-header { width: 100%; }
.soon-login { gap: 6px; }
.soon-login .icon { width: 18px; height: 18px; }
.soon-main { flex: 1 0 auto; display: grid; gap: 26px; align-content: center; width: 100%; max-width: 1180px; margin: 0 auto;
  padding: 6px var(--gutter) 12px; }
.soon-main h1 { max-width: 9ch; margin-bottom: .3em; }
.soon-kicker { margin: 0 0 14px; }
.soon-kicker span { position: relative; isolation: isolate; display: inline-block; padding: 3px 14px; font-family: var(--hand); font-weight: 700; font-size: var(--step--1); }
.soon-kicker span::before {
  content: ""; position: absolute; inset: -2px -6px; z-index: -1; background: var(--sun);
  -webkit-mask: url("/static/img/scribble.svg") center / 100% 100% no-repeat;
          mask: url("/static/img/scribble.svg") center / 100% 100% no-repeat;
}
.soon-text .btn { margin-top: 6px; }
.soon-sheet { margin: 0; justify-self: center; width: min(100%, 620px); }
.soon-sheet-frame { border: 3px solid var(--ink); border-radius: var(--wobble-lg); overflow: hidden; background: var(--paper); transform: rotate(-1.2deg); padding: 3.5%; }
.soon-sheet-frame svg { display: block; width: 100%; height: auto; }
.soon-sheet figcaption { font-family: var(--hand); font-size: var(--step-1); text-align: center; padding-top: 12px; }
.soon-foot { display: flex; justify-content: center; gap: 20px; padding: 28px var(--gutter) 32px; font-size: var(--step--1); }
@media (min-width: 900px) {
  .soon-main { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
}