@font-face {
  font-family: "Young Serif";
  src: url("fonts/young-serif-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("fonts/literata-var.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("fonts/literata-var-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --night: #1f3d30;
  --night-deep: #162c23;
  --paper: #f3ead8;
  --paper-dark: #e7dbc2;
  --ink: #2b211b;
  --ink-soft: #5d4f44;
  --red: #a8322a;
  --red-dark: #84261f;
  --gold: #d9a441;
  --bulb-1: #f3c25a;
  --bulb-2: #e0573f;
  --bulb-3: #f6e7b8;
  --bulb-4: #7fb08a;
  --radius: 3px;
  --display: "Young Serif", Georgia, serif;
  --body: "Literata", Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--red); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; margin: 0; }

main { max-width: 980px; margin: 0 auto; padding: 0 16px 48px; overflow-x: clip; }

/* ---------- Lichterkette ---------- */
.lights { position: relative; height: 90px; overflow: hidden; }
.lights__wire { position: absolute; inset: 0; width: 100%; height: 100%; }
.lights__wire path { fill: none; stroke: #0d1a14; stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.lights__bulbs { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.lights__bulbs li {
  position: absolute;
  width: 11px; height: 17px;
  margin-left: -5.5px;
  border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%;
  background: var(--c);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--c) 70%, transparent);
  transform-origin: 50% 0;
  transform: rotate(var(--r, 0deg));
  animation: glow var(--d, 3s) ease-in-out var(--delay, 0s) infinite alternate;
}
.lights__bulbs li::before {
  content: ""; position: absolute; top: -4px; left: 2.5px;
  width: 6px; height: 5px; background: #0d1a14; border-radius: 1px;
}
@keyframes glow {
  from { opacity: .55; box-shadow: 0 0 4px 0 color-mix(in srgb, var(--c) 40%, transparent); }
  to   { opacity: 1;   box-shadow: 0 0 14px 3px color-mix(in srgb, var(--c) 75%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .lights__bulbs li { animation: none; opacity: 1; } }

/* ---------- Hero ---------- */
.hero { text-align: center; color: var(--paper); padding: 24px 0 56px; }
.hero__kicker {
  font-style: italic; letter-spacing: .02em; margin: 0 0 12px; color: var(--gold);
}
.hero__title { font-size: clamp(2.1rem, 11.5vw, 6.2rem); letter-spacing: -.01em; overflow-wrap: anywhere; }
.hero__title span { color: var(--paper); display: inline-block; transform: rotate(-1.5deg); }
.hero__lead { max-width: 36rem; margin: 28px auto 32px; color: #e4dcc8; }
.hero__count { margin: 18px 0 0; font-style: italic; color: var(--gold); }

.ticket {
  display: inline-flex; flex-wrap: wrap; justify-content: center;
  margin-top: 32px;
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius);
  transform: rotate(-1deg);
  box-shadow: 5px 5px 0 var(--night-deep);
}
.ticket__part {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 12px 22px 14px;
  border-left: 2px dashed var(--paper-dark);
}
.ticket__part:first-child { border-left: 0; }
.ticket__label { font-size: .8rem; font-style: italic; color: var(--ink-soft); }
.ticket__big { font-family: var(--display); font-size: 1.7rem; line-height: 1.1; color: var(--red); }

.hero__address { margin: 22px 0 0; font-style: italic; }
.hero__address a { color: var(--paper); text-decoration-color: var(--gold); text-decoration-thickness: 1px; }
.hero__address a::before { content: "⌖"; color: var(--gold); margin-right: 8px; font-style: normal; }
.hero__address a:hover { color: var(--gold); }

/* ---------- Animationen ---------- */
.snow { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.snow span {
  position: absolute; top: -12px;
  width: var(--s); height: var(--s); border-radius: 50%;
  background: #fffaf0; opacity: var(--o);
  animation: fall var(--d) linear var(--delay) infinite;
}
@keyframes fall {
  0%   { transform: translate(0, -10px); }
  50%  { transform: translate(var(--sway), 50vh); }
  100% { transform: translate(0, 105vh); }
}
main, .footer, .lights { position: relative; z-index: 1; }

.anim .reveal { opacity: 0; transform: translateY(28px) rotate(var(--tilt, 0deg)); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1); }
.anim .reveal.is-visible { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); }
.sheet { --tilt: .4deg; transform: rotate(var(--tilt)); }
.sheet--plain { --tilt: -.3deg; }
.menu { --tilt: -.6deg; }

.anim .ticket { animation: swing 1.4s cubic-bezier(.3, 1.6, .5, 1) .2s both; }
@keyframes swing {
  from { transform: rotate(-9deg) translateY(-18px); opacity: 0; }
  to   { transform: rotate(-1deg); opacity: 1; }
}
.anim .hero__title span { animation: settle 1s cubic-bezier(.3, 1.5, .5, 1) .1s both; }
@keyframes settle {
  from { transform: rotate(4deg) translateY(10px); opacity: 0; }
  to   { transform: rotate(-1.5deg); opacity: 1; }
}

.note { transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), box-shadow .35s ease; }
.note:hover { transform: rotate(-2deg) translateY(-4px) scale(1.02); box-shadow: 8px 10px 0 rgba(43, 33, 27, .18); }
.note__seal path { transform-origin: 30px 30px; animation: twinkle 4s ease-in-out infinite; }
@keyframes twinkle { 0%, 85%, 100% { transform: scale(1) rotate(0); } 92% { transform: scale(1.18) rotate(18deg); } }

.thanks:not([hidden]) .stamp { animation: stamp .45s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes stamp {
  from { transform: rotate(-14deg) scale(2.2); opacity: 0; }
  to   { transform: rotate(-6deg) scale(1); opacity: .9; }
}

.menu li { transition: transform .2s ease; }
.menu li:hover { transform: translateX(6px); }

@media (prefers-reduced-motion: reduce) {
  .snow { display: none; }
  .anim .reveal { opacity: 1; transform: rotate(var(--tilt, 0deg)); transition: none; }
  .anim .ticket, .anim .hero__title span, .note__seal path, .thanks:not([hidden]) .stamp { animation: none; }
}

/* ---------- Buttons ---------- */
.button {
  display: inline-block;
  font: inherit; font-weight: 600;
  padding: 10px 20px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--red); color: var(--paper);
  text-decoration: none; cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.button:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.button--big { font-size: 1.15rem; padding: 14px 30px; }
.hero .button { border-color: var(--night-deep); box-shadow: 4px 4px 0 var(--night-deep); }
.button--ghost { background: transparent; color: var(--ink); }
.button[disabled] { opacity: .6; cursor: progress; }

/* ---------- Paper sheets ---------- */
.sheet, .menu, .emmert, .signup, .crew {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 32px clamp(20px, 4vw, 44px);
  position: relative;
  margin-bottom: 40px;
}
.sheet::before, .signup::before {
  content: ""; position: absolute; top: -12px; left: 50%;
  width: 110px; height: 26px; margin-left: -55px;
  background: rgba(243, 234, 216, .55);
  border: 1px solid rgba(255, 255, 255, .35);
  transform: rotate(-2deg);
}
.sheet__title, .signup h2, .menu h2, .emmert h2, .crew h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 18px; }
.sheet__intro { margin-top: 0; max-width: 40rem; }

.program { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.program li {
  display: grid; grid-template-columns: 2.8rem auto minmax(20px, 1fr) auto;
  align-items: baseline; column-gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--paper-dark);
  counter-increment: p;
}
.program li::before {
  content: counter(p, upper-roman) ".";
  font-family: var(--display); color: var(--red);
}
.program span { font-weight: 600; }
.program i { border-bottom: 2px dotted #c8b897; transform: translateY(-5px); }
.program em { color: var(--ink-soft); font-size: .95rem; text-align: right; }
@media (max-width: 560px) {
  .program li { grid-template-columns: 2.8rem 1fr; }
  .program i { display: none; }
  .program em { grid-column: 2; text-align: left; }
}

/* ---------- Menu + Emmert ---------- */
.two { display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; margin-bottom: 40px; }
.two > * { margin-bottom: 0; min-width: 0; }
@media (max-width: 760px) { .two { grid-template-columns: 1fr; } }

.menu { background: var(--red); color: var(--paper); transform: rotate(var(--tilt)); }
.menu ul { list-style: none; padding: 0; margin: 0 0 18px; }
.menu li { font-family: var(--display); font-size: 1.35rem; padding: 4px 0; }
.menu li small { font-family: var(--body); font-style: italic; font-size: .85rem; opacity: .85; }
.menu li::before { content: "✶"; font-size: .8rem; margin-right: 10px; color: var(--gold); vertical-align: 3px; }
.menu__note { margin: 0; font-style: italic; font-size: .95rem; color: #f2d9cf; }

.note {
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
  margin: 4px 0 20px;
  aspect-ratio: 2.1 / 1;
  max-width: 420px;
  background:
    repeating-linear-gradient(45deg, transparent 0 7px, rgba(31, 61, 48, .06) 7px 8px),
    #dfe7d3;
  border: 2px solid var(--night);
  outline: 1px solid var(--night);
  outline-offset: -8px;
  border-radius: 2px;
  color: var(--night);
  transform: rotate(1.5deg);
  box-shadow: 4px 4px 0 rgba(43, 33, 27, .18);
}
.note__corner { font-family: var(--display); font-size: 2rem; text-align: center; align-self: start; padding-top: 10px; }
.note__corner--b { align-self: end; padding: 0 0 10px; }
.note__center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.note__seal { width: 52px; height: 52px; margin-bottom: 4px; }
.note__seal circle { fill: none; stroke: var(--night); stroke-width: 2; stroke-dasharray: 3 3; }
.note__seal path { fill: var(--red); }
.note__name { font-family: var(--display); font-size: clamp(1.6rem, 5vw, 2.2rem); letter-spacing: .06em; text-transform: uppercase; }
.note__sub { font-size: .72rem; font-style: italic; }

/* ---------- Inventory ---------- */
.inventory { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.inventory li {
  border: 2px solid var(--ink); border-radius: 999px;
  padding: 4px 14px 5px; background: #fffaf0;
}
.inventory li b { font-family: var(--display); font-weight: 400; color: var(--red); margin-right: 6px; }
.inventory .inventory__empty { border-style: dashed; color: var(--ink-soft); font-style: italic; background: transparent; }

/* ---------- Form ---------- */
.signup { padding-top: 40px; }
.signup__head p { margin: 0 0 8px; max-width: 36rem; }
fieldset { border: 0; border-top: 2px dashed var(--paper-dark); margin: 24px 0 0; padding: 20px 0 0; min-width: 0; }
legend { font-family: var(--display); font-size: 1.35rem; padding-right: 12px; color: var(--red); }
.hint { margin: 0 0 14px; color: var(--ink-soft); font-size: .95rem; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.field > span { font-weight: 600; font-size: .95rem; }
.field small { font-weight: 400; color: var(--ink-soft); }
input, select, textarea {
  font: inherit; color: var(--ink);
  width: 100%;
  padding: 9px 11px;
  background: #fffaf0;
  border: 2px solid #b9a888;
  border-radius: var(--radius);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 3px 3px 0 var(--gold); }
[aria-invalid="true"] { border-color: var(--red); }

.items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.item {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) 80px minmax(150px, 1.6fr) 74px 32px;
  gap: 10px; align-items: end;
  padding: 12px; background: #fbf4e6;
  border: 2px solid var(--paper-dark); border-radius: var(--radius);
}
.item .field { margin-bottom: 0; }
.item__remove {
  width: 32px; height: 42px; border: 0; background: none;
  font-size: 1.6rem; line-height: 1; color: var(--ink-soft); cursor: pointer;
}
.item__remove:hover { color: var(--red); }
@media (max-width: 700px) {
  .item { grid-template-columns: 1fr 80px; }
  .item .field--grow { grid-column: 1 / -1; }
  .item .photo { grid-column: 1; }
  .item__remove { grid-column: 2; justify-self: end; }
}

.photo { cursor: pointer; }
.photo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.photo__box {
  display: grid; place-items: center;
  width: 74px; height: 66px; overflow: hidden;
  border: 2px dashed #b9a888; border-radius: var(--radius);
  background: #fffaf0; font-size: .85rem; color: var(--ink-soft);
}
.photo__box img { width: 100%; height: 100%; object-fit: cover; grid-area: 1 / 1; }
.photo__box img[hidden] { display: none; }
.photo__box b { font-weight: 600; grid-area: 1 / 1; }
.photo input:focus-visible + .photo__box { border-color: var(--ink); box-shadow: 3px 3px 0 var(--gold); }
.photo__box:has(img:not([hidden])) b { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chips span {
  display: inline-block; padding: 5px 14px;
  border: 2px solid var(--ink); border-radius: 999px; background: #fffaf0;
  transition: background .12s ease;
}
.chips input:checked + span { background: var(--night); color: var(--paper); border-color: var(--night); }
.chips input:focus-visible + span { box-shadow: 3px 3px 0 var(--gold); }

.consent { display: flex; gap: 10px; align-items: flex-start; margin: 22px 0 18px; }
.consent input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--red); }
.consent--soft { margin: 0 0 14px; padding: 12px 14px; background: #fbf4e6; border: 2px dashed var(--gold); border-radius: var(--radius); font-size: .95rem; }
.consent--soft[hidden] { display: none; }

.trap { position: absolute; left: -9999px; }
.form__error { color: var(--red-dark); font-weight: 600; background: #f7dcd6; padding: 10px 14px; border-radius: var(--radius); }

.thanks { text-align: center; padding: 30px 0 10px; }
.thanks h3 { font-size: 2rem; margin: 18px 0 8px; }
.thanks:focus { outline: none; }
.stamp {
  display: inline-block;
  font-family: var(--display); font-size: 1.6rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--red); border: 4px double var(--red); border-radius: 6px;
  padding: 6px 18px; transform: rotate(-6deg);
  opacity: .9;
}

.newsletter-status { max-width: 520px; margin: 80px auto; text-align: center; }
.newsletter-status h1 { font-size: 2.4rem; margin: 22px 0 10px; }
.newsletter-status p { margin: 0 0 24px; }

/* ---------- Crew + Footer ---------- */
.crew { background: transparent; color: var(--paper); border: 2px dashed rgba(243, 234, 216, .35); }
.crew p { margin: 0 0 20px; color: #e4dcc8; }
.button--whatsapp { background: var(--paper); color: var(--night); }
.crew .button--whatsapp { border-color: var(--night-deep); box-shadow: 3px 3px 0 var(--night-deep); }
.thanks__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.footer { max-width: 980px; margin: 0 auto; padding: 0 16px 56px; color: #b9c4bb; font-size: .9rem; }
.footer h2 { font-size: 1.3rem; color: var(--paper); margin-bottom: 10px; }
.footer a { color: var(--gold); }
.footer__small { font-style: italic; color: #8ea197; margin-top: 24px; }