/* Drop 05 art direction: distressed archive print, sized to work with the live drop fields. */
.drop-section {
  --drop-white: #eceae4;
  --drop-faint: rgba(236,234,228,.57);
  --gap: 16px;
  position: relative;
  display: flex;
  min-height: calc(100svh - 62px);
  overflow: hidden;
  border-bottom: 1px solid rgba(236,234,228,.32);
  color: var(--drop-white);
  background:
    radial-gradient(ellipse at 51% 41%, rgba(229,226,216,.055), transparent 49%),
    #070808;
  isolation: isolate;
}

/* Dust, registration grid and worn edges echo the printed reference without obscuring controls. */
.drop-section::before,
.drop-section::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
}

.drop-section::before {
  background-image:
    linear-gradient(0deg, transparent 0 11%, rgba(236,234,228,.12) 11.1%, transparent 11.2% 24%, rgba(236,234,228,.09) 24.1%, transparent 24.2% 61%, rgba(236,234,228,.11) 61.1%, transparent 61.2% 91%, rgba(236,234,228,.1) 91.1%, transparent 91.2%),
    linear-gradient(90deg, transparent 0 4%, rgba(236,234,228,.16) 4.1%, transparent 4.2% 37%, rgba(236,234,228,.11) 37.1%, transparent 37.2% 54%, rgba(236,234,228,.12) 54.1%, transparent 54.2% 94%, rgba(236,234,228,.14) 94.1%, transparent 94.2%),
    repeating-linear-gradient(0deg, transparent 0 53px, rgba(236,234,228,.025) 54px, transparent 55px),
    repeating-linear-gradient(90deg, transparent 0 67px, rgba(236,234,228,.025) 68px, transparent 69px),
    url("assets/drop-archive-grunge-01.webp");
  background-position: 0 0, 0 0, 0 0, 0 0, center;
  background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat;
  background-size: auto, auto, auto, auto, cover;
  opacity: .48;
  filter: grayscale(1);
  mix-blend-mode: screen;
}

.drop-section::after {
  inset: 0 0 0 0;
  background:
    linear-gradient(90deg, transparent 0 2.8%, rgba(236,234,228,.14) 2.85%, transparent 3.05% 96.8%, rgba(236,234,228,.12) 96.9%, transparent 97.1%),
    linear-gradient(180deg, transparent 0 4%, rgba(236,234,228,.12) 4.1%, transparent 4.25% 94%, rgba(236,234,228,.12) 94.1%, transparent 94.25%),
    radial-gradient(circle at 7% 26%, rgba(236,234,228,.68) 0 .6px, transparent 1px),
    radial-gradient(circle at 17% 76%, rgba(236,234,228,.45) 0 .7px, transparent 1px),
    radial-gradient(circle at 36% 31%, rgba(236,234,228,.4) 0 .6px, transparent 1px),
    radial-gradient(circle at 58% 79%, rgba(236,234,228,.5) 0 .7px, transparent 1px),
    radial-gradient(circle at 78% 19%, rgba(236,234,228,.38) 0 .6px, transparent 1px),
    radial-gradient(circle at 92% 65%, rgba(236,234,228,.52) 0 .8px, transparent 1px);
  opacity: .72;
}

html[data-modus="drop"] .announcement { display: none; }
/* Kopfleiste im Drop-Modus wie im Shop (06.10.2026, vorher 88 px). */
html[data-modus="drop"] .site-header { min-height: 62px; }
.drop-gate {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  max-width: 1720px;
  min-height: calc(100svh - 62px);
  align-items: center;
  margin: 0 auto;
  padding: 34px var(--gutter) 82px;
}

.drop-gate::after {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: 26px;
  left: var(--gutter);
  display: block;
  min-height: 38px;
  padding: 12px 0 0;
  border-top: 1px solid rgba(236,234,228,.48);
  color: rgba(236,234,228,.7);
  /* Kein Strichcode mehr (20.10.2026, Micha: „zweimal dieser Scan-Code, und beim Umdrehen wird er immer ausgeblendet“).
     Rechts bleibt die Leiste seitdem frei (Micha: „lass das einfach frei“). */
  content: "27 / 001      /      NEXT DROP      /      WINTER 24/25";
  font: 8px/1.3 var(--mono);
  letter-spacing: .19em;
  pointer-events: none;
}

.drop-gate::before {
  position: absolute;
  z-index: 3;
  right: var(--gutter);
  bottom: 39px;
  display: block;
  color: rgba(236,234,228,.7);
  content: "[ 27A ]";
  font: 8px/1 var(--mono);
  letter-spacing: .14em;
  pointer-events: none;
}

.drop-gate::before,
.drop-housing,
.drop-opening::before,
.drop-opening::after,
.drop-inside,
.drop-bottom-bar,
.drop-floor,
.drop-sticker,
.drop-tape { display: none; }

.drop-opening { position: relative; overflow: visible; }
.drop-shutter { position: relative; z-index: 1; margin: 0; background: none; box-shadow: none; transition: transform .72s cubic-bezier(.2,.75,.25,1); }
.drop-shutter::before { display: none; }

.drop-face {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(450px, .88fr);
  gap: clamp(28px, 4.5vw, 76px);
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.drop-face::before {
  position: absolute;
  z-index: 0;
  display: block;
  top: 50%;
  left: 51%;
  color: rgba(236,234,228,.055);
  content: "27";
  font: 900 clamp(270px, 35vw, 560px)/.72 var(--display);
  letter-spacing: -.13em;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-2deg);
}

.drop-face::after {
  position: absolute;
  z-index: 0;
  top: 26%;
  left: 51%;
  display: block;
  color: rgba(236,234,228,.3);
  content: "ARCHIVE";
  font: 9px/1 var(--mono);
  letter-spacing: .42em;
  pointer-events: none;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
}

.drop-copy {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  min-height: clamp(640px, 76svh, 760px);
  flex-direction: column;
  justify-content: center;
  padding: 30px 0;
  isolation: auto;
}

.drop-copy::before {
  display: none;
}

.drop-copy::after {
  position: absolute;
  right: 1%;
  bottom: 11%;
  color: rgba(236,234,228,.54);
  content: "FIRST ACCESS.\A NO RESTOCK.";
  font: italic 15px/1.55 Georgia, serif;
  letter-spacing: .015em;
  pointer-events: none;
  transform: rotate(-9deg);
  white-space: pre;
}

.drop-copy > * { position: relative; z-index: 1; }
.drop-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 28px; color: var(--drop-white); font: 10px/1.3 var(--mono); letter-spacing: .18em; }
.drop-eyebrow::before { width: 42px; height: 1px; margin-right: 13px; background: currentColor; content: ""; }
.drop-eyebrow i { width: auto; height: auto; background: none; font-style: normal; opacity: .85; }
.drop-eyebrow i::before { content: "/"; }
.drop-eyebrow b { color: inherit; font-weight: 400; }

.drop-title {
  margin: 0 0 8px -.04em;
  color: var(--drop-white);
  font: 400 clamp(96px, 8.4vw, 170px)/.78 "Rubik Wet Paint", Impact, var(--display);
  letter-spacing: -.045em;
  text-shadow: 0 0 1px rgba(255,255,255,.9), 0 5px 0 rgba(236,234,228,.07);
}

.drop-tag { display: block; white-space: nowrap; }
.drop-tag + .drop-tag { margin: -.015em 0 0; }
.drop-letter { position: relative; display: inline-block; line-height: 1.05; }
.drop-letter-ink { position: relative; display: inline-block; }
.drop-letter::before { display: none; }

.drop-deck {
  max-width: 620px;
  margin: 9px 0 16px;
  color: var(--drop-white);
  font: 11px/1.8 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* Keep the dashboard's optional discount visible as a compact stamped note. */
.drop-rabatt {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 9px;
  margin: 0 0 15px;
  padding: 0;
  border: 0;
  color: var(--drop-faint);
  font: 8px/1.4 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.drop-rabatt b { padding: 5px 8px 4px; color: #101111; background: var(--drop-white); font: 800 10px/1 var(--mono); letter-spacing: .05em; transform: rotate(-2deg); }
.drop-countdown { display: grid; justify-items: start; gap: 0; align-self: flex-start; }
.drop-countdown-label, .drop-when { display: none; }

.drop-clock {
  display: grid;
  width: min(100%, 580px);
  max-width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 16px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.drop-clock:empty { display: none; }
.drop-clock.is-live { grid-template-columns: minmax(0, 1fr); }
.drop-countdown.is-live .drop-countdown-label { display: block; margin: 0 0 10px; color: var(--drop-faint); font: 10px/1.4 var(--mono); letter-spacing: .12em; }
.drop-unit { min-width: 0; min-height: 86px; align-content: center; justify-items: center; gap: 9px; padding: 10px 6px 8px; border: 1px solid rgba(236,234,228,.52); background: rgba(0,0,0,.14); }
.drop-unit small { color: var(--drop-white); font: 9px/1 var(--mono); letter-spacing: .13em; }
.drop-flaps { display: flex; gap: 0; }
.drop-sep { display: none; }

.flap { position: relative; display: inline; width: auto; height: auto; color: var(--drop-white); font: 800 clamp(27px, 2.5vw, 40px)/1 var(--sans); font-variant-numeric: tabular-nums; perspective: none; }
.flap-half { display: none; }
.flap > .flap-top:not(.flap-fold-top) { position: static; display: inline; height: auto; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
.flap > .flap-top:not(.flap-fold-top) b { position: static; display: inline; height: auto; font: inherit; }
.flap::after { display: none; }
.flap.is-flipping .flap-fold-top, .flap.is-flipping .flap-fold-bottom { animation: none; }

.drop-join {
  display: flex;
  width: min(100%, 440px);
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 19px;
  padding: 0 21px 0 25px;
  border: 1px solid var(--drop-white);
  color: #101111;
  background-color: #e9e6de;
  background-image: linear-gradient(115deg, rgba(255,255,255,.16), rgba(15,15,15,.08)), url("assets/rauschen/crt-static.webp");
  background-size: auto, 180px 136px;
  background-blend-mode: normal, multiply;
  box-shadow: 0 0 0 4px rgba(236,234,228,.04), inset 0 0 0 1px rgba(255,255,255,.45);
  font: 700 12px/1 var(--mono);
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .2s, box-shadow .2s;
}

.drop-join:hover { box-shadow: 0 0 0 5px rgba(236,234,228,.1), inset 0 0 0 1px rgba(255,255,255,.45); transform: translateY(-2px); }
.drop-join span:last-child { font: 400 24px/1 var(--sans); transition: transform .2s; }
.drop-join:hover span:last-child { transform: translateX(4px); }

.drop-flyer {
  position: relative;
  z-index: 2;
  justify-self: stretch;
  width: 100%;
  max-width: none;
  align-self: center;
  margin: 0;
  padding: clamp(24px, 2.8vw, 42px);
  border: 1px solid rgba(236,234,228,.62);
  border-radius: 0;
  color: var(--drop-white);
  background: rgba(5,6,6,.38);
  box-shadow: 0 20px 70px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.05);
  transform: none;
}

.drop-flyer::before,
.drop-flyer::after { position: absolute; width: 38px; height: 10px; border-top: 1px solid rgba(236,234,228,.72); content: ""; pointer-events: none; }
.drop-flyer::before { top: -1px; left: 24px; }
.drop-flyer::after { top: -1px; right: 24px; }
.drop-tape { position: absolute; z-index: 4; top: -11px; display: block; width: 74px; height: 20px; background: rgba(216,213,204,.34); box-shadow: 0 0 1px rgba(255,255,255,.28); clip-path: polygon(0 5%, 4% 0, 8% 7%, 12% 1%, 91% 0, 96% 8%, 100% 3%, 98% 96%, 94% 100%, 90% 94%, 9% 100%, 4% 93%, 0 97%); }
.drop-tape-left { left: 31%; transform: rotate(-4deg); }
.drop-tape-right { right: 13%; transform: rotate(3deg); }

.drop-flyer-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding: 0 0 13px;
  border-bottom: 1px solid rgba(236,234,228,.44);
  color: var(--drop-white);
  font: 9px/1.2 var(--mono);
  letter-spacing: .17em;
  text-transform: uppercase;
}

.drop-flyer-head > span:first-child { display: flex; gap: 7px; align-items: center; font-size: 0; }
.drop-flyer-head > span:first-child::before { display: none; }
.drop-flyer-head > span:first-child::after { color: inherit; content: "/ EARLY ACCESS"; font: 9px/1.2 var(--mono); letter-spacing: .17em; }
.drop-flyer-head b { color: inherit; font: inherit; font-size: 9px; font-weight: 400; }
.drop-form, .drop-ticket { display: grid; gap: 0; }
.drop-flyer h3 { margin: 0; color: var(--drop-white); font: 900 clamp(27px, 2.8vw, 44px)/1 var(--display); letter-spacing: -.065em; text-transform: uppercase; }
.drop-form-copy { margin: 10px 0 24px; color: rgba(236,234,228,.86); font: 12px/1.6 var(--sans); }
.drop-label { display: block; }

.drop-email-row {
  position: relative;
  display: flex;
  min-height: 54px;
  align-items: center;
  margin: 0 0 15px;
  border: 1px solid rgba(236,234,228,.59);
  background: rgba(0,0,0,.16);
  transition: border-color .18s, box-shadow .18s;
}

.drop-email-row:focus-within { border-color: var(--drop-white); box-shadow: 0 0 0 2px rgba(236,234,228,.13); }
.drop-envelope { position: relative; display: block; width: 18px; height: 13px; flex: 0 0 18px; margin: 0 17px 0 20px; border: 1px solid currentColor; color: var(--drop-white); }
.drop-envelope::before, .drop-envelope::after { position: absolute; top: 1px; width: 11px; height: 1px; background: currentColor; content: ""; }
.drop-envelope::before { left: 0; transform: rotate(34deg); transform-origin: left; }
.drop-envelope::after { right: 0; transform: rotate(-34deg); transform-origin: right; }

.drop-email {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 0 14px 0 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: var(--drop-white);
  background: transparent;
  font: 10px/1.2 var(--mono);
  letter-spacing: .14em;
}

/* Nur der Platzhalter steht in Großbuchstaben. Die getippte Adresse zeigt Groß- und Kleinschreibung so, wie man sie
   eingibt (28.10.2026, Micha: „da soll man auch den Unterschied sehen“). */
.drop-email::placeholder { color: rgba(236,234,228,.75); opacity: 1; text-transform: uppercase; }
.drop-email:focus { background: transparent; }
.drop-email:focus-visible { outline: none; }
.drop-email[aria-invalid="true"] { box-shadow: inset 0 -2px #d35f51; }

.drop-submit {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  margin: 0 0 24px;
  padding: 0 20px 0 24px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 0;
  color: #101111;
  background-color: #e9e6de;
  background-image: linear-gradient(115deg, rgba(255,255,255,.16), rgba(15,15,15,.08)), url("assets/rauschen/crt-static.webp");
  background-size: auto, 180px 136px;
  background-blend-mode: normal, multiply;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
  font: 700 12px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: transform .18s, box-shadow .18s;
}

.drop-submit > span:last-child { font: 400 23px/1 var(--sans); transition: transform .18s; }
.drop-submit:hover { box-shadow: 0 0 0 3px rgba(236,234,228,.11), inset 0 0 0 1px rgba(255,255,255,.42); transform: translateY(-1px); }
.drop-submit:hover > span:last-child { transform: translateX(4px); }
.drop-submit:active { transform: translateY(1px); }
.drop-submit:disabled { cursor: progress; opacity: .68; }
.drop-submit:focus-visible { outline: 2px solid var(--drop-white); outline-offset: 4px; }

.drop-wish { min-width: 0; margin: 0 0 22px; padding: 0; border: 0; }
.drop-wish legend { margin: 0 0 10px; padding: 0; color: rgba(236,234,228,.75); font: 9px/1.3 var(--mono); letter-spacing: .17em; text-transform: uppercase; }
.drop-wish legend small { margin-left: 5px; color: rgba(236,234,228,.53); font-size: 8px; font-weight: 400; }
/* Unter den Marken-Chips: dass es noch viel mehr gibt (22.10.2026). */
.drop-wish-mehr { margin: 10px 0 0; color: rgba(236,234,228,.6); font: 8px/1.4 var(--mono); letter-spacing: .17em; text-transform: uppercase; }
.drop-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.drop-chip { position: relative; display: inline-flex; }
.drop-chip input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.drop-chip span { display: inline-flex; min-height: 36px; align-items: center; padding: 0 11px; border: 1px solid rgba(236,234,228,.46); border-radius: 0; color: var(--drop-white); background: rgba(0,0,0,.1); font: 9px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; transition: color .16s, background-color .16s, border-color .16s, box-shadow .16s; }
.drop-chip:hover span { border-color: var(--drop-white); background: rgba(236,234,228,.08); }
.drop-chip input:checked + span { border-color: var(--drop-white); color: #080909; background: var(--drop-white); box-shadow: 0 0 12px rgba(236,234,228,.16); }
.drop-chip input:focus-visible + span { outline: 2px solid var(--drop-white); outline-offset: 3px; }

.drop-consent { display: flex; align-items: flex-start; gap: 11px; margin: 1px 0 0; color: rgba(236,234,228,.88); font: 10px/1.45 var(--mono); cursor: pointer; }
.drop-consent input { width: 17px; height: 17px; flex: 0 0 17px; margin: 0; accent-color: var(--drop-white); }
.drop-error { margin: 13px 0 0; color: #f29688; font: 700 11px/1.5 var(--sans); }
.drop-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.drop-ticket-index { margin: 0 0 12px; color: rgba(236,234,228,.68); font: 700 9px/1 var(--mono); letter-spacing: .17em; }
.drop-ticket h3:focus { outline: none; }
.drop-ticket-copy { max-width: 360px; margin: 12px 0 16px; color: rgba(236,234,228,.85); font: 12px/1.6 var(--sans); }
.drop-ticket-rabatt { margin: 0 0 16px; color: rgba(236,234,228,.82); font: 10px/1.6 var(--mono); }
.drop-ticket-rabatt b { padding: 4px 6px 3px; color: #101111; background: var(--drop-white); letter-spacing: .06em; }
.drop-ticket-wishes { display: flex; max-width: calc(100% - 150px); flex-wrap: wrap; gap: 7px; margin: 0 0 22px; }
.drop-ticket-wishes:empty { display: none; }
.drop-ticket-wishes span { padding: 7px 9px; border: 1px solid rgba(236,234,228,.4); color: var(--drop-white); font: 700 9px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.drop-ticket { min-height: 390px; flex-direction: column; align-items: flex-start; }
.drop-again { justify-self: start; margin-top: auto; padding: 4px 0; border: 0; border-bottom: 1px solid currentColor; color: rgba(236,234,228,.75); background: none; font: 10px/1.3 var(--mono); }
.drop-again:hover { color: var(--drop-white); }
.drop-stamp { position: absolute; z-index: 5; right: 25px; bottom: 26px; display: grid; justify-items: center; gap: 6px; padding: 12px 14px; border: 3px double rgba(236,234,228,.65); color: var(--drop-white); font: 800 14px/1 var(--display); letter-spacing: .04em; opacity: 0; pointer-events: none; transform: rotate(-8deg); }
.drop-stamp i { font: 700 10px/1 var(--mono); font-style: normal; letter-spacing: .15em; }
.drop-stamp em { font-size: 17px; font-style: normal; font-weight: 800; }
.drop-flyer.has-ticket .drop-stamp { opacity: 1; }
.drop-flyer.is-stamping .drop-stamp { animation: drop-stamp .42s cubic-bezier(.2,1.35,.35,1) both; }
@keyframes drop-stamp { 0% { opacity: 0; transform: scale(1.5) rotate(-13deg); } 60% { opacity: 1; transform: scale(.96) rotate(-7deg); } 100% { opacity: 1; transform: scale(1) rotate(-8deg); } }
.drop-flyer.is-stamping { animation: drop-thud .3s ease-out; }
@keyframes drop-thud { 0%, 100% { transform: none; } 35% { transform: translateY(2px); } }

.drop-section.is-armed .drop-shutter { transform: translateY(var(--gap)); }
.drop-section.is-armed .drop-letter,
.drop-section.is-armed .drop-flyer,
.drop-section.is-armed .drop-join,
.drop-section.is-armed .drop-rabatt,
.drop-section.is-armed :is(.drop-eyebrow, .drop-deck, .drop-countdown) { opacity: 0; }
.drop-section.is-armed .drop-flyer { transform: translateY(14px); }
.drop-section.is-entering .drop-shutter { animation: drop-lift .72s cubic-bezier(.2,.75,.25,1) both; }
@keyframes drop-lift { from { transform: translateY(var(--gap)); } to { transform: none; } }
.drop-section.is-entering .drop-letter { animation: drop-letter-reveal .34s calc(var(--d) * .34) both; }
@keyframes drop-letter-reveal { from { opacity: 0; filter: blur(4px); transform: translateY(.08em); } to { opacity: 1; filter: none; transform: none; } }
.drop-section.is-entering .drop-flyer { animation: drop-post .55s .1s cubic-bezier(.2,.75,.25,1) both; }
.drop-section.is-entering .drop-join { animation: drop-fade-in .4s .34s both; }
.drop-section.is-entering .drop-rabatt { animation: drop-fade-in .4s .18s both; }
@keyframes drop-post { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.drop-section.is-entering :is(.drop-eyebrow, .drop-deck, .drop-countdown) { animation: drop-fade-in .35s .12s both; }
@keyframes drop-fade-in { from { opacity: 0; } to { opacity: 1; } }
.drop-shutter { transition: transform .72s cubic-bezier(.2,.75,.25,1); }
.drop-section.is-entered .drop-shutter { transform: translateY(calc(var(--gap) * -.62)); }

@media (max-width: 980px) {
  .drop-face { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .drop-copy { min-height: 570px; padding: 24px 0 8px; }
  .drop-title { font-size: clamp(100px, 12vw, 164px); }
  .drop-deck { max-width: 650px; }
  .drop-flyer { width: min(100%, 650px); justify-self: start; margin: 0 0 30px; }
  .drop-face::before { top: 39%; left: 77%; font-size: clamp(260px, 42vw, 510px); }
  .drop-face::after { top: 28%; left: 75%; }
  .drop-copy::after { right: 4%; bottom: 13%; }
}

/* Keep the complete two-column drop composition inside a standard laptop viewport. */
@media (min-width: 981px) and (max-height: 850px) {
  .drop-gate { padding-top: 20px; padding-bottom: 66px; }
  .drop-face { gap: clamp(22px, 3vw, 44px); }
  .drop-copy { min-height: 0; padding: 0; }
  .drop-eyebrow { margin-bottom: clamp(10px, 1.7vh, 15px); }
  .drop-title { font-size: clamp(76px, 7vw, 106px); }
  .drop-deck { margin: 7px 0 10px; font-size: 10px; line-height: 1.5; }
  .drop-rabatt { margin-bottom: 9px; }
  .drop-clock { gap: clamp(6px, .7vw, 10px); }
  .drop-unit { min-height: 68px; gap: 6px; padding: 7px 4px; }
  .drop-unit small { font-size: 8px; }
  .flap { font-size: clamp(24px, 2.1vw, 32px); }
  .drop-join { min-height: 49px; margin-top: 12px; padding-inline: 16px; font-size: 10px; }
  .drop-copy::after { right: 1%; bottom: 4%; font-size: 12px; }
  .drop-flyer { padding: clamp(15px, 2vh, 21px) clamp(16px, 1.8vw, 24px); }
  .drop-flyer-head { margin-bottom: 12px; padding-bottom: 8px; }
  .drop-flyer h3 { font-size: clamp(26px, 2.5vw, 36px); }
  .drop-form-copy { margin: 6px 0 12px; font-size: 11px; }
  .drop-email-row { min-height: 45px; margin-bottom: 9px; }
  .drop-email { min-height: 43px; }
  .drop-submit { min-height: 46px; margin-bottom: 12px; }
  .drop-wish { margin-bottom: 10px; }
  .drop-wish legend { margin-bottom: 6px; }
  .drop-chips { gap: 6px; }
  .drop-chip span { min-height: 31px; padding-inline: 8px; font-size: 8px; }
  .drop-consent { font-size: 9px; }
}

@media (max-width: 680px) {
  .drop-section { --gap: 10px; min-height: auto; }
  html[data-modus="drop"] .site-header { min-height: 54px; }
  .drop-gate { min-height: auto; padding: 24px 20px 76px; }
  .drop-face { gap: 15px; }
  .drop-copy { min-height: 440px; padding: 20px 0 5px; }
  .drop-eyebrow { gap: 6px; margin-bottom: 24px; font-size: 8px; letter-spacing: .13em; }
  .drop-eyebrow::before { width: 22px; margin-right: 5px; }
  .drop-title { font-size: clamp(58px, 15.5vw, 105px); }
  .drop-deck { max-width: 95%; margin: 8px 0 13px; font-size: 9px; line-height: 1.7; letter-spacing: .15em; }
  .drop-rabatt { margin-bottom: 12px; font-size: 7px; }
  .drop-rabatt b { font-size: 9px; }
  .drop-clock { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; width: min(100%, 330px); }
  .drop-unit { min-height: 70px; gap: 7px; }
  .flap { font-size: 29px; }
  .drop-unit small { font-size: 8px; }
  .drop-join { width: min(100%, 360px); min-height: 56px; margin-top: 16px; padding-inline: 16px; font-size: 10px; }
  .drop-copy::after { right: 1%; bottom: 4%; font-size: 12px; }
  .drop-face::before { top: 23%; left: 83%; font-size: 210px; }
  .drop-face::after { top: 19%; left: 83%; font-size: 7px; }
  .drop-flyer { width: 100%; margin: 0 0 24px; padding: 23px 18px; }
  .drop-flyer-head { margin-bottom: 17px; padding-bottom: 11px; font-size: 8px; }
  .drop-flyer-head > span:first-child::before,
  .drop-flyer-head > span:first-child::after { font-size: 8px; letter-spacing: .12em; }
  .drop-flyer h3 { font-size: clamp(27px, 8vw, 34px); }
  .drop-form-copy { margin: 8px 0 18px; font-size: 11px; }
  .drop-email-row { min-height: 50px; margin-bottom: 12px; }
  .drop-email { min-height: 48px; font-size: 9px; }
  .drop-envelope { margin-left: 13px; margin-right: 12px; }
  .drop-submit { min-height: 52px; margin-bottom: 20px; padding-inline: 15px; font-size: 10px; }
  .drop-wish { margin-bottom: 18px; }
  .drop-wish legend { margin-bottom: 8px; font-size: 8px; }
  .drop-chips { gap: 6px; }
  .drop-chip span { min-height: 34px; padding: 0 8px; font-size: 8px; }
  .drop-consent { font-size: 9px; }
  .drop-ticket { min-height: 0; padding-bottom: 84px; }
  .drop-ticket-wishes { max-width: none; }
  .drop-stamp { right: 12px; bottom: 16px; font-size: 12px; }
  .drop-gate::after { right: 20px; bottom: 20px; left: 20px; min-height: 31px; padding-top: 10px; font-size: 6px; letter-spacing: .07em; }
  .drop-gate::before { right: 20px; bottom: 31px; font-size: 6px; }
}

@media (max-width: 380px) {
  .drop-gate { padding-inline: 16px; }
  .drop-copy { min-height: 400px; }
  .drop-title { font-size: 15.5vw; }
  .drop-flyer { padding-inline: 15px; }
  .drop-flyer-head > span:first-child::after { content: "/ EARLY"; }
  .drop-flaps { gap: 0; }
  .drop-chip span { padding-inline: 7px; font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .drop-shutter { transition: none; }
  .drop-section.is-armed .drop-shutter,
  .drop-section.is-entering .drop-shutter,
  .drop-section.is-entering .drop-letter,
  .drop-section.is-entering .drop-flyer,
  .drop-section.is-entering .drop-join,
  .drop-section.is-entering .drop-rabatt,
  .drop-section.is-entering :is(.drop-eyebrow, .drop-deck, .drop-countdown) { animation: none; }
  .drop-section.is-armed .drop-letter,
  .drop-section.is-armed .drop-flyer,
  .drop-section.is-armed .drop-join,
  .drop-section.is-armed .drop-rabatt,
  .drop-section.is-armed :is(.drop-eyebrow, .drop-deck, .drop-countdown) { opacity: 1; }
  .drop-section.is-armed .drop-shutter,
  .drop-section.is-armed .drop-flyer { transform: none; }
  .drop-join, .drop-submit { transition: none; }
  .drop-chip span { transition: none; }
  .drop-chip input:checked + span { animation: none; }
}

:root[data-theme="light"] .drop-section {
  --drop-white: #171817;
  --drop-faint: rgba(23,24,23,.58);
  color: #171817;
  border-color: rgba(23,24,23,.32);
  background:
    radial-gradient(ellipse at 51% 41%, rgba(23,24,23,.045), transparent 49%),
    #efeee9;
}

:root[data-theme="light"] .drop-section::before {
  background-image:
    linear-gradient(0deg, transparent 0 11%, rgba(23,24,23,.1) 11.1%, transparent 11.2% 24%, rgba(23,24,23,.08) 24.1%, transparent 24.2% 61%, rgba(23,24,23,.1) 61.1%, transparent 61.2% 91%, rgba(23,24,23,.08) 91.1%, transparent 91.2%),
    linear-gradient(90deg, transparent 0 4%, rgba(23,24,23,.13) 4.1%, transparent 4.2% 37%, rgba(23,24,23,.09) 37.1%, transparent 37.2% 54%, rgba(23,24,24,.1) 54.1%, transparent 54.2% 94%, rgba(23,24,24,.12) 94.1%, transparent 94.2%),
    repeating-linear-gradient(0deg, transparent 0 53px, rgba(23,24,23,.023) 54px, transparent 55px),
    repeating-linear-gradient(90deg, transparent 0 67px, rgba(23,24,23,.023) 68px, transparent 69px),
    url("assets/rauschen/crt-static.webp");
  opacity: .13;
  filter: grayscale(1);
  mix-blend-mode: multiply;
}

:root[data-theme="light"] .drop-section::after {
  background:
    linear-gradient(90deg, transparent 0 2.8%, rgba(23,24,23,.13) 2.85%, transparent 3.05% 96.8%, rgba(23,24,23,.11) 96.9%, transparent 97.1%),
    linear-gradient(180deg, transparent 0 4%, rgba(23,24,23,.11) 4.1%, transparent 4.25% 94%, rgba(23,24,23,.11) 94.1%, transparent 94.25%),
    radial-gradient(circle at 7% 26%, rgba(23,24,23,.55) 0 .6px, transparent 1px),
    radial-gradient(circle at 17% 76%, rgba(23,24,23,.38) 0 .7px, transparent 1px),
    radial-gradient(circle at 36% 31%, rgba(23,24,23,.34) 0 .6px, transparent 1px),
    radial-gradient(circle at 58% 79%, rgba(23,24,23,.42) 0 .7px, transparent 1px),
    radial-gradient(circle at 78% 19%, rgba(23,24,23,.34) 0 .6px, transparent 1px),
    radial-gradient(circle at 92% 65%, rgba(23,24,23,.45) 0 .8px, transparent 1px);
  opacity: .64;
}
:root[data-theme="light"] .drop-face::before { color: rgba(23,24,23,.07); }
:root[data-theme="light"] .drop-face::after { color: rgba(23,24,23,.38); }
:root[data-theme="light"] .drop-copy::after { color: rgba(23,24,23,.62); }
:root[data-theme="light"] .drop-flyer { border-color: rgba(23,24,23,.66); color: #171817; background: rgba(239,238,233,.54); box-shadow: 0 20px 70px rgba(23,24,23,.08), inset 0 1px rgba(255,255,255,.42); }
:root[data-theme="light"] .drop-flyer::before, :root[data-theme="light"] .drop-flyer::after { border-top-color: rgba(23,24,23,.72); }
:root[data-theme="light"] .drop-flyer-head { color: #171817; border-color: rgba(23,24,23,.42); }
:root[data-theme="light"] .drop-flyer h3 { color: #171817; }
:root[data-theme="light"] .drop-form-copy { color: rgba(23,24,23,.78); }
:root[data-theme="light"] .drop-email-row { border-color: rgba(23,24,23,.59); background: rgba(255,255,255,.18); }
:root[data-theme="light"] .drop-email-row:focus-within { border-color: #171817; box-shadow: 0 0 0 2px rgba(23,24,23,.1); }
:root[data-theme="light"] .drop-envelope { color: #171817; }
:root[data-theme="light"] .drop-email { color: #171817; }
:root[data-theme="light"] .drop-email::placeholder { color: rgba(23,24,23,.72); }
:root[data-theme="light"] .drop-wish legend { color: rgba(23,24,23,.75); }
:root[data-theme="light"] .drop-wish legend small { color: rgba(23,24,23,.53); }
:root[data-theme="light"] .drop-wish-mehr { color: rgba(23,24,23,.6); }
:root[data-theme="light"] .drop-chip span { border-color: rgba(23,24,23,.48); color: #171817; background: rgba(255,255,255,.08); }
:root[data-theme="light"] .drop-chip:hover span { border-color: #171817; background: rgba(23,24,23,.05); }
:root[data-theme="light"] .drop-chip input:checked + span { color: #efeee9; background: #171817; }
:root[data-theme="light"] .drop-chip input:focus-visible + span { outline-color: #171817; }
:root[data-theme="light"] .drop-consent { color: rgba(23,24,23,.82); }
:root[data-theme="light"] .drop-error { color: #9f2720; }
:root[data-theme="light"] .drop-ticket-index, :root[data-theme="light"] .drop-ticket-copy, :root[data-theme="light"] .drop-ticket-rabatt, :root[data-theme="light"] .drop-again { color: rgba(23,24,23,.76); }
:root[data-theme="light"] .drop-ticket-rabatt b { color: #efeee9; background: #171817; }
:root[data-theme="light"] .drop-ticket-wishes span { border-color: rgba(23,24,23,.46); color: #171817; }
:root[data-theme="light"] .drop-stamp { border-color: rgba(23,24,23,.68); color: rgba(23,24,23,.82); }
:root[data-theme="light"] .drop-gate::after { border-top-color: rgba(23,24,23,.46); color: rgba(23,24,23,.72); }
:root[data-theme="light"] .drop-gate::before { color: rgba(23,24,23,.72); }