/* Funkelwichtel – site styles.
   Paper-and-ink look: warm off-white, one accent red for actions, real illustrations,
   thin rules instead of heavy cards. Fonts are SIL OFL, self-hosted. */

@font-face { font-family: "Crimson"; src: url("../fonts/CrimsonText-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Crimson"; src: url("../fonts/CrimsonText-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Crimson"; src: url("../fonts/CrimsonText-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Kalam"; src: url("../fonts/Kalam-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Kalam"; src: url("../fonts/Kalam-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* Caveat Brush is subset to the letters of the logo only ("Funkelwichtel"). */
@font-face { font-family: "Caveat Brush"; src: url("../fonts/CaveatBrush-Regular.woff2") format("woff2"); font-display: swap; }

:root {
  --paper: #fbf8f3;
  --paper-2: #f3ece0;
  --white: #fffdf9;
  --ink: #2b2420;
  --ink-soft: #625649;
  --line: #e2d7c6;
  --line-strong: #cdbfa9;
  --red: #a93226;
  --red-dark: #8c281e;
  --green: #2f5d46;
  --gold: #c9952f;
  --radius: 8px;
  --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 19px/1.55 "Crimson", Georgia, serif;
}
img { max-width: 100%; display: block; }
a { color: var(--green); text-underline-offset: 3px; }
a:hover { color: var(--red); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- header / footer */

.site-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--red); }
.logo svg { width: 22px; height: 22px; }
.logo span { font: 28px/1 "Caveat Brush", cursive; letter-spacing: .01em; }
.nav { display: flex; gap: 28px; font-size: 17px; }
.nav a { color: var(--ink); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--red); color: var(--ink); }

.site-footer { border-top: 1px solid var(--line); margin-top: 96px; padding: 36px 0 48px; font-size: 16px; color: var(--ink-soft); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.site-footer a { color: var(--ink-soft); }

/* ---------- type */

h1, h2, h3 { font-weight: 700; line-height: 1.12; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: clamp(36px, 5vw, 54px); }
h2 { font-size: clamp(28px, 3.4vw, 38px); }
h3 { font-size: 22px; }
p { margin: 0 0 1em; }
.lede { font-size: 21px; color: var(--ink-soft); max-width: 34em; }
.eyebrow {
  font: 700 13px/1 "Crimson", serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green); margin-bottom: 18px; display: inline-block;
}
.hand { font-family: "Kalam", cursive; }
.muted { color: var(--ink-soft); }
.small { font-size: 15px; }

/* ---------- sections */

section { padding: 72px 0; }
section + section { border-top: 1px solid var(--line); }
.section-head { max-width: 640px; margin-bottom: 40px; }

/* ---------- buttons & forms */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 18px/1 "Crimson", serif; text-decoration: none; cursor: pointer;
  border: 1px solid var(--red); background: var(--red); color: #fff;
  padding: 15px 26px; border-radius: var(--radius); transition: background .15s;
}
.btn:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-block { width: 100%; }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); font-weight: 400; padding: 10px 14px; font-size: 16px; }
.btn-quiet:hover { background: var(--paper-2); color: var(--ink); border-color: var(--line-strong); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 16px; color: var(--green); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.field { margin-bottom: 20px; }
.field label, .field legend { display: block; font-weight: 700; font-size: 17px; margin-bottom: 6px; padding: 0; }
.field .hint { font-size: 15px; color: var(--ink-soft); margin: -2px 0 8px; }
fieldset.field { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
input[type=text], input[type=email], select {
  width: 100%; font: 18px/1.3 "Crimson", serif; color: var(--ink);
  background: #fff; border: 1px solid var(--line-strong); border-radius: 6px; padding: 11px 12px;
}
input:focus, select:focus, .seg input:focus-visible + span, .btn:focus-visible, .link-btn:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px;
}
.row { display: flex; gap: 8px; }
.row input { flex: 1; }
.err { color: var(--red); font-size: 15px; margin-top: 6px; min-height: 0; }
.err:empty { display: none; }

.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; background: #fff; }
.seg label { margin: 0; font-weight: 400; cursor: pointer; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: block; padding: 10px 16px; font-size: 17px; border-left: 1px solid var(--line-strong); }
.seg label:first-child span { border-left: 0; }
.seg input:checked + span { background: var(--green); color: #fff; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink-soft); margin: 4px 0 18px; }
.check input { margin-top: 5px; accent-color: var(--green); }

/* ---------- free letter generator (hero) */

.hero { padding: 56px 0 80px; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start;
  grid-template-areas: "intro sheet" "form sheet";
}
.hero-intro { grid-area: intro; }
.hero-form { grid-area: form; }
.hero-sheet { grid-area: sheet; position: sticky; top: 24px; }
/* Compact hero: the whole first screen fits a 13–15" laptop. */
.hero { padding: 40px 0 56px; }
.hero h1 { font-size: clamp(34px, 4vw, 46px); }
.hero .lede { font-size: 19px; margin-bottom: 0; }
.hero .form-card { margin-top: 24px; padding: 22px 24px 18px; }
.hero .field { margin-bottom: 14px; }
.hero .field label, .hero .field legend { font-size: 16px; margin-bottom: 4px; }
.hero input[type=text], .hero input[type=email], .hero select { padding: 8px 11px; font-size: 17px; }
.hero .btn-quiet { padding: 8px 12px; }
.hero .seg span { padding: 8px 12px; font-size: 16px; }
.hero .check { margin: 0 0 14px; font-size: 14px; }
.hero .btn-block { padding: 13px 20px; }
.hero .fineprint { margin-top: 8px; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.label-row .link-btn { font-size: 15px; }
.field-pair { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: end; }

/* The letter preview shows the opening and folds the rest. */
.sheet { max-height: 600px; overflow: hidden; padding: 26px 34px 30px; }
.sheet img { width: 44%; margin-bottom: 14px; }
.sheet .letter { font-size: 16px; }
.sheet::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px;
                background: linear-gradient(rgba(255,255,255,0), #fff 72%); pointer-events: none; }
.sheet.open { max-height: none; }
.sheet.open::after { display: none; }
.sheet-more { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1;
              font: 700 16px/1 "Crimson", serif; background: #fff; border: 1px solid var(--line-strong);
              border-radius: 6px; padding: 10px 14px; cursor: pointer; color: var(--ink); }
.sheet.open .sheet-more { position: static; transform: none; display: block; margin: 8px auto 0; }
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 28px 28px 24px; margin-top: 28px; }
.extra-kids input + input { margin-top: 8px; }
.fineprint { font-size: 14px; color: var(--ink-soft); margin: 12px 0 0; }

.sheet {
  position: relative;
  background: #fff; border-radius: 4px; padding: 34px 40px 40px;
  box-shadow: 0 1px 2px rgba(43,36,32,.06), 0 18px 40px rgba(43,36,32,.10);
  transform: rotate(.6deg);
}
.sheet-top { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-soft); margin-bottom: 8px; }
.sheet-top b { color: var(--red); }
.sheet img { width: 62%; margin: 0 auto 18px; }
.letter { font: 17px/1.6 "Kalam", cursive; color: #3a2e26; }
.letter p { margin: 0 0 .7em; }
.letter ol { margin: 0 0 .7em; padding-left: 1.3em; }
.letter .sig { font-weight: 700; }
.letter .ph { background: #fbefc9; border-radius: 3px; padding: 0 2px; transition: background .4s; }
.letter .ph.empty { color: #a9998a; background: none; }
.sheet-note { text-align: center; font-size: 14px; color: var(--ink-soft); margin-top: 14px; transform: rotate(-.6deg); }

.done { display: none; }
.done.show { display: block; }
.done h3 { color: var(--green); }

/* ---------- steps */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; counter-reset: step; }
.step img { width: 150px; height: 150px; object-fit: contain; margin-bottom: 14px; }
.step h3::before { counter-increment: step; content: counter(step) ". "; color: var(--red); }
.step p { color: var(--ink-soft); font-size: 18px; }

/* ---------- teaser */

.teaser { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; }
.page-stack { position: relative; aspect-ratio: 1 / 1.1; }
.page-stack img {
  position: absolute; width: 64%; background: #fff; border-radius: 3px;
  box-shadow: 0 1px 2px rgba(43,36,32,.08), 0 10px 26px rgba(43,36,32,.12);
}
.page-stack img:nth-child(1) { left: 0; top: 6%; transform: rotate(-4deg); }
.page-stack img:nth-child(2) { right: 0; top: 0; transform: rotate(3deg); }
.price-line { font-size: 20px; margin: 18px 0 24px; }
.price-line b { font-size: 26px; }

/* ---------- free move-in letter box on guide pages (_brief_cta.html) */
.brief-cta-wrap { background: var(--paper-2); border-top: 3px solid var(--red); border-bottom: 1px solid var(--line); }
.brief-cta { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; }
.brief-cta h2 { margin: 10px 0 12px; }
.brief-cta-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.badge { display: inline-block; font-size: 15px; font-weight: 700; padding: 4px 12px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line-strong); color: var(--green); }
.badge-red { background: var(--red); border-color: var(--red); color: #fff; }
.brief-cta-lead { font-size: 20px; }
.brief-cta-list { list-style: none; padding: 0; margin: 0 0 22px; }
.brief-cta-list li { padding-left: 30px; position: relative; margin-bottom: 6px; }
.brief-cta-list li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.brief-cta-form label { font-weight: 700; display: block; margin-bottom: 6px; }
.brief-cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.brief-cta-row input { flex: 1 1 200px; min-height: 48px; font: inherit; padding: 8px 14px; border: 1px solid var(--line-strong);
  border-radius: 8px; background: #fff; }
.brief-cta-row .btn { flex: 0 0 auto; min-height: 48px; }
.brief-cta-pages { max-width: 420px; justify-self: center; width: 100%; }
@media (max-width: 860px) {
  .brief-cta { grid-template-columns: 1fr; gap: 28px; }
  .brief-cta-pages { max-width: 300px; }
  .brief-cta-row .btn { flex: 1 1 100%; }
}

/* ---------- 24-day plan by email (/wichtel-ideen): table | download, then a full-width mail card */
.plan-grid { grid-template-areas: "arten aside" "mail mail"; row-gap: 36px; }
.plan-arten { grid-area: arten; }
.plan-aside { grid-area: aside; }
@media (min-width: 861px) {   /* desktop: the download card is as tall as the table column, button on the bottom line */
  .guide-grid.plan-grid { align-items: stretch; }
  .plan-arten table { margin-bottom: 0; }
  .plan-aside { display: flex; flex-direction: column; margin-top: 6px; }
  .plan-aside .plan-download { margin-top: auto; }
}
.plan-mail { grid-area: mail; display: grid; grid-template-columns: 4fr 7fr; gap: 32px; align-items: start;
  border: 1px solid var(--line); border-radius: 10px; padding: 24px 28px; background: var(--white); }
.plan-mail-intro h3 { margin: 0 0 6px; }
.plan-mail-intro p { margin: 0; color: var(--ink-soft); font-size: 17px; }
.plan-mail label[for] { display: block; font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.plan-mail-row { display: flex; gap: 10px; flex-wrap: wrap; }
.plan-mail-row input { flex: 1 1 220px; min-height: 46px; font: inherit; padding: 8px 12px; border: 1px solid var(--line-strong);
  border-radius: 8px; background: #fff; }
.plan-mail-row .btn { flex: 0 0 auto; }
.plan-mail .check { font-size: 14px; margin: 12px 0 6px; }
.plan-mail .fineprint { margin-top: 4px; }
.plan-mail-done { font-weight: 700; color: var(--green); margin: 0; }
@media (max-width: 860px) {   /* phones: table, then the email option, then the direct download */
  .plan-grid { grid-template-areas: "arten" "mail" "aside"; row-gap: 24px; }
  .plan-mail { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
  .plan-mail-row .btn { flex: 1 1 100%; background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; padding: 13px 22px; }
  .plan-aside .plan-download { background: transparent; color: var(--ink); border-color: var(--line-strong); font-weight: 400; }
}

/* ---------- FAQ */

.faq { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 20px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--red); font-weight: 400; font-size: 26px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 10px 0 0; color: var(--ink-soft); }

/* ---------- product page */

.p-hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: start; }
.ticks { list-style: none; padding: 0; margin: 24px 0 28px; }
.ticks li { padding-left: 30px; position: relative; margin-bottom: 10px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 14px; height: 8px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.price-box { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin-bottom: 22px; }
.price-box .big { font-size: 40px; font-weight: 700; }
.trust { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; color: var(--ink-soft); margin-top: 16px; }
.trust span::before { content: "·"; margin-right: 8px; color: var(--gold); }
.trust span:first-child::before { content: none; }

.viewer { position: sticky; top: 24px; }
.viewer-page { background: #fff; border-radius: 3px; aspect-ratio: 595 / 842; box-shadow: 0 1px 2px rgba(43,36,32,.06), 0 18px 40px rgba(43,36,32,.10); overflow: hidden; position: relative; }
.viewer-page img { width: 100%; height: 100%; object-fit: contain; transition: opacity .25s; }
.viewer-page img.loading { opacity: .35; }
.viewer-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.viewer-tabs button { font: 15px/1 "Crimson", serif; padding: 8px 10px; border: 1px solid var(--line-strong); background: #fff; border-radius: 5px; cursor: pointer; color: var(--ink); }
.viewer-tabs button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.viewer-names { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.viewer-names input { font-size: 16px; padding: 8px 10px; }
.viewer-names label { font-size: 14px; color: var(--ink-soft); display: block; margin-bottom: 2px; }

.contents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.contents div { padding: 22px 22px 22px 0; border-bottom: 1px solid var(--line); }
.contents b { display: block; font-size: 20px; }
.contents span { color: var(--ink-soft); font-size: 17px; }
.contents .n { color: var(--red); font-weight: 700; margin-right: 4px; }

.weeks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.week img { width: 120px; height: 120px; object-fit: contain; margin-bottom: 10px; }
.week .days { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--green); font-weight: 700; }
.week p { font-size: 17px; color: var(--ink-soft); }

.rescue { display: grid; grid-template-columns: 4fr 7fr; gap: 56px; align-items: center; }
.rescue ul { columns: 2; column-gap: 32px; padding-left: 1.1em; margin: 0; }
.rescue li { margin-bottom: 6px; break-inside: avoid; }

.order { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
.plans { display: grid; gap: 14px; }
.plan { border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; background: var(--white); }
.plan.active { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.plan .top { display: flex; justify-content: space-between; align-items: baseline; }
.plan .top b { font-size: 22px; }
.plan .top strong { font-size: 24px; }
.plan p { margin: 6px 0 0; color: var(--ink-soft); font-size: 17px; }
.testmode { background: #fbefc9; border-radius: 6px; padding: 10px 14px; font-size: 15px; margin-bottom: 18px; }

.legal { max-width: 720px; }
.legal .todo { background: #fbefc9; padding: 14px 16px; border-radius: 6px; }

/* ---------- responsive */

@media (max-width: 900px) {
  body { font-size: 18px; }
  .hero-grid, .p-hero, .teaser, .rescue, .order { grid-template-columns: 1fr; gap: 40px; }
  .hero-grid { grid-template-areas: "intro" "form" "sheet"; row-gap: 8px; }
  .hero-sheet, .viewer { position: static; }
  /* On phones the form comes first (the button sits near the first screen); the letter follows, folded shorter. */
  .hero-sheet { margin-top: 24px; }
  .sheet { max-height: 430px; }
  .sheet img { width: 34%; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .step { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: center; }
  .step img { width: 110px; height: 110px; margin: 0; }
  .weeks { grid-template-columns: 1fr 1fr; }
  .contents { grid-template-columns: 1fr 1fr; }
  .rescue ul { columns: 1; }
  .nav { gap: 18px; font-size: 16px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .site-header .wrap { height: 64px; }
  .logo span { font-size: 24px; }
  .nav a.hide-sm { display: none; }
  section { padding: 56px 0; }
  .hero { padding: 32px 0 56px; }
  .form-card { padding: 22px 18px 20px; }
  .sheet { padding: 24px 22px 28px; transform: none; }
  .sheet-note { transform: none; }
  .contents { grid-template-columns: 1fr; }
  .weeks { grid-template-columns: 1fr; }
  .seg span { padding: 10px 12px; font-size: 16px; }
}

/* Illustrations are painted on white paper: multiply them into the warm page colour
   so they sit on the page instead of looking like pasted squares. */
.step img, .week img, .rescue > img { mix-blend-mode: multiply; }

/* =====================================================================
   Tannennacht (chosen 2026-10-16): deep fir-green night with faint stars for
   header, hero and footer; white and pale sage content sections below.
   ===================================================================== */
[data-theme="nacht"] {
  --paper: #ffffff; --paper-2: #f0f4ef; --white: #ffffff;
  --line: #e1e7df; --line-strong: #c9d3c6;
  --night: #1b372d; --night-2: #234436; --cream: #f5eee2; --cream-soft: #c9d4c8; --gold-light: #e2b765;
}
[data-theme="nacht"] .site-header { background: var(--night); border-bottom-color: rgba(255,255,255,.08); }
[data-theme="nacht"] .logo span { color: var(--cream); }
[data-theme="nacht"] .nav a { color: var(--cream-soft); }
[data-theme="nacht"] .nav a:hover, [data-theme="nacht"] .nav a[aria-current="page"] { color: var(--cream); border-bottom-color: var(--gold-light); }
[data-theme="nacht"] .hero {
  background-color: var(--night);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='%23f5eee2'%3E%3Cpath opacity='.22' d='M30 20l2.4 5 5.6.7-4.1 3.9 1 5.4-4.9-2.7-4.9 2.7 1-5.4-4.1-3.9 5.6-.7z'/%3E%3Cpath opacity='.14' d='M130 95l1.6 3.4 3.8.5-2.8 2.6.7 3.7-3.3-1.8-3.3 1.8.7-3.7-2.8-2.6 3.8-.5z'/%3E%3Ccircle opacity='.25' cx='95' cy='40' r='1.3'/%3E%3Ccircle opacity='.18' cx='160' cy='30' r='1'/%3E%3Ccircle opacity='.2' cx='60' cy='120' r='1.1'/%3E%3Ccircle opacity='.15' cx='20' cy='160' r='.9'/%3E%3Ccircle opacity='.22' cx='150' cy='150' r='1.2'/%3E%3Ccircle opacity='.12' cx='100' cy='170' r='.8'/%3E%3C/g%3E%3C/svg%3E");
  color: var(--cream);
}
[data-theme="nacht"] .hero h1 { color: var(--cream); }
[data-theme="nacht"] .hero .lede, [data-theme="nacht"] .hero .muted, [data-theme="nacht"] .hero .ticks li { color: var(--cream-soft); }
[data-theme="nacht"] .hero .eyebrow { color: var(--gold-light); }
[data-theme="nacht"] .hero .ticks li::before { border-color: var(--gold-light); }
[data-theme="nacht"] .hero .price-box .big { color: var(--cream); }
[data-theme="nacht"] .hero .trust { color: var(--cream-soft); }
[data-theme="nacht"] .hero .sheet-note, [data-theme="nacht"] .hero .viewer .small { color: var(--cream-soft) !important; }
[data-theme="nacht"] .hero .form-card { border-color: transparent; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
[data-theme="nacht"] .hero .viewer-names label { color: var(--cream-soft); }
[data-theme="nacht"] .hero .viewer-tabs button { background: transparent; color: var(--cream); border-color: rgba(245,238,226,.35); }
[data-theme="nacht"] .hero .viewer-tabs button[aria-pressed="true"] { background: var(--cream); color: var(--night); border-color: var(--cream); }
[data-theme="nacht"] .hero .sheet, [data-theme="nacht"] .hero .viewer-page { box-shadow: 0 24px 60px rgba(0,0,0,.35); }
[data-theme="nacht"] section:nth-of-type(odd):not(.hero) { background: var(--paper-2); }
[data-theme="nacht"] section + section { border-top: 0; }
[data-theme="nacht"] .site-footer { background: var(--night); color: var(--cream-soft); border-top: 0; margin-top: 0; }
[data-theme="nacht"] .site-footer a { color: var(--cream-soft); }

[data-theme="nacht"] .hero .form-card { color: var(--ink); }
[data-theme="nacht"] .hero .form-card .muted { color: var(--ink-soft); }

/* Hero fine-tuning: wider text column so the headline takes two lines,
   smaller picture in the preview so more of the letter shows. */
@media (min-width: 901px) {
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; }
  .hero { padding: 32px 0 44px; }
  .hero .eyebrow { margin-bottom: 12px; }
  .hero h1 { margin-bottom: .3em; }
  .sheet { max-height: 560px; }
  .sheet img { width: 44%; margin-bottom: 10px; }
}

/* Hero alignment (desktop): the letter card no longer floats or tilts. It fills the
   right column exactly from the top of the headline to the bottom of the form,
   and the letter is clipped inside it. */
@media (min-width: 901px) {
  .hero-grid { align-items: stretch; }
  .hero-sheet { position: relative; top: auto; }
  .hero-sheet .sheet { position: absolute; inset: 0; max-height: none; transform: none; }
  .hero-sheet .sheet.open { position: relative; inset: auto; }
  .hero-sheet .sheet-note { display: none; }
}
.sheet, .sheet-note { transform: none; }
@media (max-width: 560px) {
  .field-pair { grid-template-columns: 1fr; gap: 0; }
}
/* Product page: the page preview scrolls with the page like everything else. */
.viewer { position: static; }
/* When the full letter is open, the extra height goes below the form, not between headline and form. */
@media (min-width: 901px) { .hero-grid { grid-template-rows: auto 1fr; } .hero-form { align-self: start; } }

/* After the free download: letters 2 and 3 with the family's names, then the order button. */
.next { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }
.next-head { font-size: 17px; margin-bottom: 12px; }
.next-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.next-pages img { width: 100%; aspect-ratio: 595 / 842; object-fit: contain; background: var(--paper-2);
                  border-radius: 3px; box-shadow: 0 1px 2px rgba(43,36,32,.08), 0 8px 20px rgba(43,36,32,.10); }

.check-ch { margin-top: -4px; }
.check-ch .muted { font-size: 14px; }

/* Success panel v2: one readable letter instead of two thumbnails. */
.done-ok { font-size: 15px; color: var(--ink-soft); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.done-ok b { color: var(--green); }
.done-title { font-size: 24px; margin: 18px 0 14px; }
.next-peek { display: block; position: relative; aspect-ratio: 595 / 470; overflow: hidden; border-radius: 4px;
             background: var(--paper-2); box-shadow: 0 1px 2px rgba(43,36,32,.08), 0 10px 26px rgba(43,36,32,.12); }
.next-peek img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.next-peek::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px;
                    background: linear-gradient(rgba(255,255,255,0), #fff); }
.next-tag { position: absolute; left: 12px; bottom: 10px; z-index: 1; font-size: 14px; font-weight: 700; color: var(--green); }
.done .ticks { margin: 18px 0 14px; }
.done .ticks li { margin-bottom: 6px; font-size: 17px; }
.done-price { font-size: 17px; margin: 0 0 12px; }
.done-price b { font-size: 22px; }
#done-perday { color: var(--ink-soft); }
[data-theme="nacht"] .hero .done .ticks li { color: var(--ink); }
[data-theme="nacht"] .hero .done .ticks li::before { border-color: var(--green); }
.next-tag { background: #fff; border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 10px; font-size: 13px; }

/* Sibling fields with a remove button */
.kid-row { display: flex; gap: 8px; margin-top: 8px; }
.kid-row input { flex: 1; min-width: 0; }
.kid-remove { flex: 0 0 44px; border: 1px solid var(--line-strong); background: #fff; border-radius: 6px;
              font: 24px/1 "Crimson", serif; color: var(--ink-soft); cursor: pointer; }
.kid-remove:hover { color: var(--red); border-color: var(--red); }
.kid-remove:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Plan cards are buttons now */
button.plan { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
button.plan:hover { border-color: var(--line-strong); }
button.plan.active:hover { border-color: var(--green); }
button.plan:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.plan .top { display: flex; justify-content: space-between; align-items: baseline; }
.plan .desc { display: block; margin-top: 6px; color: var(--ink-soft); font-size: 17px; }

.order-done { background: #e6efe8; border-radius: 6px; padding: 10px 14px; font-size: 16px; }

/* Phones: every tap target at least ~44px high, checkboxes large enough for a thumb. */
@media (max-width: 560px) {
  .link-btn, .label-row .link-btn { padding: 12px 0; }
  .viewer-tabs button { padding: 12px 12px; font-size: 16px; }
  .check input, .check-ch input { width: 22px; height: 22px; margin-top: 1px; flex: 0 0 22px; }
  .check { align-items: flex-start; font-size: 15px; }
  .site-footer nav a { display: inline-block; padding: 10px 0; }
  .nav a { padding: 12px 0; }
}

/* ---------- guide pages (/wichtelstreiche) */
.guide-hero { padding: 48px 0 44px; }
.guide-lede { max-width: 46em; }
.stats { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.stats li { color: var(--cream-soft, var(--ink-soft)); font-size: 17px; }
.stats b { color: var(--gold-light, var(--green)); font-size: 26px; margin-right: 4px; }
.guide-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; align-items: start; }
.rules ol { padding-left: 1.2em; margin: 0; }
.rules li { margin-bottom: 10px; }
.side-cta { border: 1px solid var(--line); border-radius: 10px; padding: 22px; background: var(--white); text-align: center; }
.side-cta img { width: 140px; margin: 0 auto 10px; mix-blend-mode: multiply; }
.side-cta p { color: var(--ink-soft); font-size: 17px; }

.filters { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: var(--white); margin-bottom: 24px; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; }
.filter-label { font-weight: 700; font-size: 15px; width: 44px; color: var(--ink-soft); }
.filter-row button { font: 15px/1 "Crimson", serif; padding: 8px 12px; border: 1px solid var(--line-strong); background: #fff; border-radius: 999px; cursor: pointer; color: var(--ink); }
.filter-row button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.filter-row .check { margin: 0 14px 0 0; font-size: 16px; color: var(--ink); }
.filter-count { margin-left: auto; font-weight: 700; color: var(--green); }

.pranks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.prank { border: 1px solid var(--line); border-radius: 10px; padding: 18px 18px 14px; background: var(--white); display: flex; flex-direction: column; }
.prank[hidden] { display: none; }
.prank-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.prank h3 { font-size: 20px; margin: 0 0 6px; }
.prank-min { flex: none; font-weight: 700; font-size: 14px; color: var(--red); }
.prank p { font-size: 17px; margin: 0 0 8px; }
.prank-meta { color: var(--ink-soft); font-size: 15px !important; }
.prank-tags { margin-top: auto !important; display: flex; flex-wrap: wrap; gap: 6px; }
.prank-tags span, .prank-tags a { font-size: 13px; padding: 3px 8px; border-radius: 999px; background: var(--paper-2); color: var(--ink-soft); text-decoration: none; }
.prank-tags .chaos-0 { background: #e3eee6; color: var(--green); }
.prank-tags .chaos-2 { background: #f6e4df; color: var(--red-dark); }
.prank-tags .tag-pack { background: #fbefc9; color: #6b4e12; }
.prank-tags .tag-pack:hover { text-decoration: underline; }
.empty { text-align: center; color: var(--ink-soft); padding: 30px 0; }

@media (max-width: 900px) {
  .guide-grid { grid-template-columns: 1fr; gap: 32px; }
  .pranks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pranks { grid-template-columns: 1fr; }
  .filter-label { width: 100%; }
  .filter-row button { padding: 11px 14px; }
  .filter-count { margin-left: 0; width: 100%; }
}
.nav a { white-space: nowrap; }
@media (max-width: 560px) {
  .site-header .wrap { gap: 12px; }
  .logo span { font-size: 21px; }
  .logo svg { width: 18px; height: 18px; }
  .nav { gap: 12px; font-size: 15px; }
}
@media (max-width: 360px) { .logo span { display: none; } }
@media (max-width: 560px) {
  .logo span { font-size: 19px; }
  .logo { gap: 5px; }
  .nav { gap: 10px; font-size: 14.5px; }
}

/* Guide header: byline + exact date + Quick Answer (docs/06 §3) */
.byline { font-size: 15px; color: var(--cream-soft, var(--ink-soft)); margin: 0 0 18px; }
.quick-answer { max-width: 46em; border-left: 3px solid var(--gold-light, var(--gold)); padding: 4px 0 4px 18px; }
.quick-answer .qa-label { display: block; font: 700 12px/1 "Crimson", serif; letter-spacing: .12em; text-transform: uppercase;
                          color: var(--gold-light, var(--gold)); margin-bottom: 8px; }
.quick-answer p { font-size: 20px; line-height: 1.5; color: var(--cream, var(--ink)); margin: 0; }
.sources { font-size: 15px; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 14px; margin-top: 28px; }
.faq-group { margin-bottom: 36px; }
.faq-group h2 { font-size: 26px; margin-bottom: 4px; }
.timeline { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 17px; }
.timeline th, .timeline td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.timeline th { width: 9em; color: var(--green); white-space: nowrap; }
@media (max-width: 560px) { .quick-answer p { font-size: 18px; } .timeline th { width: auto; } }

/* Name generator + list (/wichtel-namen) */
.namegen { margin-top: 0; }
.namegen h2 { font-size: 26px; }
.filter-label-inline { display: block; font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { font: 15px/1 "Crimson", serif; padding: 9px 12px; border: 1px solid var(--line-strong); background: #fff; border-radius: 999px; cursor: pointer; color: var(--ink); }
.chips button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.ng-results { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.ng-pick { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.ng-pick b { font-size: 22px; display: block; }
.ng-pick span { font-size: 14px; color: var(--ink-soft); }
.ng-pick .btn-quiet { white-space: nowrap; font-size: 15px; }
.ng-note { font-size: 15px; color: var(--ink-soft); }
.name-group { margin-bottom: 26px; }
.name-group h3 { margin-bottom: 2px; }
.name-group > p { margin-bottom: 8px; font-size: 17px; }
.name-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; }
.name-list span { background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 16px; }
.name-list .name-sub { background: none; border: 0; padding: 0 4px 0 0; font-weight: 700; color: var(--green); }
.site-footer nav[aria-label="Ratgeber"] a { color: var(--cream-soft, var(--ink-soft)); }
@media (max-width: 560px) { .ng-pick { flex-direction: column; align-items: flex-start; } }

/* Wichteltür guide */
.compare { width: 100%; border-collapse: collapse; font-size: 17px; margin: 8px 0 6px; background: var(--white); }
.compare th, .compare td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.compare tbody th { color: var(--green); }
.need { font-size: 14px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.need-ja { background: #e3eee6; color: var(--green); }
.need-nett { background: var(--paper-2); color: var(--ink-soft); }
.need-nein { background: #f3ece0; color: #8a6d3b; }
.do-list { padding-left: 1.1em; }
.do-list li { margin-bottom: 10px; }
.vorlage-thumb { width: 100% !important; max-width: 240px; mix-blend-mode: normal !important; border: 1px solid var(--line); border-radius: 4px; }
@media (max-width: 560px) { .compare { font-size: 15px; } .compare th, .compare td { padding: 9px 6px; } }
@media (max-width: 560px) {
  .compare.stack thead { display: none; }
  .compare.stack tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .compare.stack th, .compare.stack td { display: block; border: 0; padding: 2px 4px; }
  .compare.stack tbody th { font-size: 17px; margin-bottom: 2px; }
  /* Column name in front of each value (set by the small script in base.html). */
  .compare.stack td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--ink-soft); }
}

/* Ausmalbilder grid */
.ausmal-grid { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.ausmal-grid li { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 12px;
  display: flex; flex-direction: column; gap: 4px; }
.ausmal-grid img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; margin-bottom: 6px; }
.ausmal-grid .muted { font-size: 15px; line-height: 1.4; }
@media (max-width: 560px) { .ausmal-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .ausmal-grid li { padding: 8px; } }

/* order / download page */
.order-page { max-width: 44em; padding-top: 56px; padding-bottom: 72px; }
.order-downloads { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }

/* legal pages + contact form */
.legal h2 { font-size: 22px; margin: 32px 0 8px; }
.legal h3 { font-size: 19px; margin: 22px 0 8px; }
.legal .widerruf { border: 1px solid var(--line); border-radius: 8px; padding: 6px 20px 10px; background: var(--white); }
.legal .muster { font-size: 16px; background: var(--paper-2, #f6f6f2); padding: 14px 16px; border-radius: 6px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; }

/* Phones: jump link from the intro down to the letter preview (the preview sits below the form there). */
.sheet-jump { display: none; white-space: nowrap; }
@media (max-width: 900px) { .sheet-jump { display: inline; } }
[data-theme="nacht"] .hero .sheet-jump { color: var(--gold-light); }

/* Product page, phones only: sticky price + button bar. */
.buybar { display: none; }
@media (max-width: 900px) {
  .buybar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; align-items: center;
            justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
            background: var(--white); border-top: 1px solid var(--line-strong); box-shadow: 0 -8px 24px rgba(0,0,0,.10);
            transform: translateY(110%); transition: transform .2s ease; }
  .buybar.show { transform: none; }
  .buybar b { font-size: 22px; }
  .buybar .muted { font-size: 14px; }
  .buybar .btn { padding: 12px 18px; font-size: 17px; white-space: nowrap; }
  body:has(.buybar) .site-footer { padding-bottom: 96px; }
}

/* Prank cards: pranks that come with a letter in the paid pack. */
.prank-tags .paket-tag { background: #fbefc9; color: #6b4e12; font-weight: 700; }
.compare .paket-tag { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 99px; font-size: 13px;
  background: #fbefc9; color: #6b4e12; font-weight: 700; }

/* Related guides at the end of every indexable page (internal links). */
.related h2 { font-size: 26px; margin-bottom: 20px; }
.related-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.related-list a { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line);
                  border-radius: 10px; background: var(--white); color: var(--ink); text-decoration: none; min-height: 44px; }
.related-list a:hover { border-color: var(--line-strong); }
.related-list img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; mix-blend-mode: multiply; flex: none; }
.related-list b { display: block; font-size: 18px; }
.related-list span span { display: block; font-size: 15px; color: var(--ink-soft); }
@media (max-width: 900px) { .related-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .related-list { grid-template-columns: 1fr; } }

.field-hint { display: inline-block; margin-top: 6px; font-size: 15px; color: var(--green); }

/* /wichtel-vorlagen: one card per free printable */
.vorlagen-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vorlagen-grid li { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: start; padding: 16px;
                    border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.vorlagen-grid .vorlage-bild img { width: 120px; aspect-ratio: 595 / 842; object-fit: cover; object-position: top;
                                   border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.vorlagen-grid h3 { font-size: 20px; margin: 2px 0 6px; }
.vorlagen-grid p { font-size: 16px; margin: 0 0 12px; }
.vorlage-wann { font-size: 13px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: .04em; }
.vorlage-mehr { display: inline-block; margin-left: 12px; font-size: 15px; }
@media (max-width: 900px) { .vorlagen-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .vorlagen-grid li { grid-template-columns: 84px 1fr; gap: 12px; } .vorlagen-grid .vorlage-bild img { width: 84px; }
                            .vorlage-mehr { display: block; margin: 10px 0 0; } }

/* /wichtelstreiche: quick lists by set-up time */
.schnell-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.schnell-grid h3 { font-size: 20px; margin-bottom: 8px; }
.schnell-list { padding-left: 1.1em; margin: 0; font-size: 16px; }
.schnell-list li { margin-bottom: 4px; }
.prank:target { box-shadow: 0 0 0 3px var(--gold-light, #e2b765); }
@media (max-width: 900px) { .schnell-grid { grid-template-columns: 1fr; gap: 18px; } }