/* Drop: Bewegung, Tafel und Hintergrund (06.10.2026, Michas „beeindruckende Animationen, Zeit soll animiert runterticken,
   Hintergrund und die 27 besser“). Liegt über drop.css und drop-reference.css; jede Regel beginnt mit #drop, damit sie
   deren Klassenregeln sicher überstimmt, ohne dort etwas zu ändern.
   - Countdown = Klapptafel wie die Abfahrtsanzeige an der Talstation. Beim Ankommen rattert jede Klappe durch und bleibt
     von links nach rechts auf der Restzeit stehen (store.js revealDropClock), danach klappt jede Sekunde um.
   - Die 27 ist das Logo selbst (assets/27-archive-logo.svg als Maske) mit einem langsam darüberziehenden Lichtschimmer.
   - Hintergrund: Kratzer nur noch am Rand, in der Mitte ein atmendes Licht, feines Filmkorn.
   Ruhende Bewegung läuft nur, solange der Bereich im Bild ist (.is-visible), bei reduzierter Bewegung gar nicht. */

#drop {
  --board-ink: #f1efe8;
  --board-top: #1d1e1c;
  --board-bottom: #181917;
  --board-frame: #0b0c0b;
  --flap-size: clamp(36px, 3.4vw, 56px);
}

/* ---------- Hintergrund ---------- */
#drop::before {
  opacity: .34;
  -webkit-mask-image: radial-gradient(ellipse 72% 66% at 50% 46%, transparent 38%, #000 100%);
  mask-image: radial-gradient(ellipse 72% 66% at 50% 46%, transparent 38%, #000 100%);
}
#drop .drop-atmo { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
#drop .drop-glow {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 130vmax;
  height: 90vmax;
  background: radial-gradient(closest-side, rgba(236,234,228,.11), rgba(236,234,228,.045) 42%, transparent 74%);
  transform: translate(-50%, -50%);
  animation: drop27-atmen 11s ease-in-out infinite alternate;
}
@keyframes drop27-atmen {
  from { opacity: .55; scale: .94; }
  to { opacity: 1; scale: 1.04; }
}
#drop .drop-grain {
  position: absolute;
  inset: -40%;
  background: url("assets/rauschen/crt-static.webp") 0 0 / 220px 165px;
  opacity: .06;
  mix-blend-mode: screen;
  filter: grayscale(1);
  animation: drop27-korn .9s steps(1, end) infinite;
}
@keyframes drop27-korn {
  0% { transform: translate(0, 0); }
  17% { transform: translate(-4%, 3%); }
  33% { transform: translate(3%, -5%); }
  50% { transform: translate(-2%, 6%); }
  67% { transform: translate(5%, 2%); }
  83% { transform: translate(-6%, -3%); }
}

/* ---------- Die 27: das Logo als Chrom-Abdruck mit Lichtschimmer ---------- */
#drop .drop-face::before,
#drop .drop-face::after { content: none; }
#drop .drop-27 {
  --logo-x: -50%;
  --logo-y: -50%;
  --logo-r: -4deg;
  position: absolute;
  z-index: 0;
  top: 40%;
  left: 47%;
  display: block;
  width: min(56vw, 880px);
  aspect-ratio: 600 / 240;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(236,234,228,.12), rgba(236,234,228,.05) 58%, rgba(236,234,228,.09));
  -webkit-mask: url("assets/27-archive-logo.svg?v=2") center / contain no-repeat;
  mask: url("assets/27-archive-logo.svg?v=2") center / contain no-repeat;
  pointer-events: none;
  transform: translate(var(--logo-x), var(--logo-y)) rotate(var(--logo-r));
}
#drop .drop-27 i {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 30%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 35%, rgba(255,255,255,.42) 50%, rgba(255,255,255,.08) 65%, rgba(255,255,255,0) 100%);
  transform: translateX(-130%);
  animation: drop27-schimmer 9s cubic-bezier(.45,0,.3,1) 2.4s infinite;
}
@keyframes drop27-schimmer {
  0% { transform: translateX(-130%); }
  26%, 100% { transform: translateX(440%); }
}

/* ---------- Countdown: Klapptafel ---------- */
#drop .drop-countdown {
  display: grid;
  width: max-content;
  max-width: 100%;
  grid-template-columns: auto auto;
  align-items: end;
  justify-content: space-between;
  column-gap: 24px;
  row-gap: 9px;
  margin-top: 6px;
}
#drop .drop-countdown-label,
#drop .drop-when { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--drop-faint); font: 9px/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
#drop .drop-countdown-label { grid-row: 1; grid-column: 1; }
#drop .drop-when { grid-row: 1; grid-column: 2; justify-content: flex-end; color: var(--drop-white); }
/* Ein Lämpchen, das im Sekundentakt glimmt: die Tafel lebt. */
#drop .drop-countdown-label::before { width: 6px; height: 6px; border-radius: 50%; background: var(--drop-white); box-shadow: 0 0 8px rgba(236,234,228,.7); content: ""; animation: drop27-lampe 1s steps(1, end) infinite; }
@keyframes drop27-lampe { 50% { opacity: .18; box-shadow: none; } }

#drop .drop-clock {
  position: relative;
  display: grid;
  width: auto;
  grid-row: 2;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: clamp(10px, 1.1vw, 18px);
  padding: clamp(12px, 1.2vw, 18px) clamp(14px, 1.4vw, 20px) clamp(10px, 1vw, 14px);
  border: 1px solid rgba(236,234,228,.2);
  border-radius: 6px;
  background:
    radial-gradient(circle at 9px 9px, rgba(236,234,228,.28) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 9px) 9px, rgba(236,234,228,.28) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 9px calc(100% - 9px), rgba(236,234,228,.28) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), rgba(236,234,228,.28) 0 1.6px, transparent 2.2px),
    linear-gradient(180deg, #121312, var(--board-frame));
  box-shadow: 0 24px 60px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.06), inset 0 -10px 24px rgba(0,0,0,.35);
}
#drop .drop-clock.is-live { grid-template-columns: auto; }
#drop .drop-unit { display: grid; min-width: 0; min-height: 0; justify-items: center; gap: 8px; padding: 0; border: 0; background: none; }
#drop .drop-unit small { color: rgba(241,239,232,.62); font: 8px/1 var(--mono); letter-spacing: .24em; }
#drop .drop-flaps { display: flex; gap: .07em; font-size: var(--flap-size); }

#drop .flap {
  position: relative;
  display: block;
  width: .84em;
  height: 1.3em;
  color: var(--board-ink);
  font: 700 1em/1 var(--sans);
  font-variant-numeric: tabular-nums;
  perspective: 4.5em;
}
#drop .flap .flap-half {
  position: absolute;
  right: 0;
  left: 0;
  display: block;
  height: 50%;
  overflow: hidden;
  border: 0;
  background: var(--board-top);
  box-shadow: inset 0 1px rgba(255,255,255,.07);
}
#drop .flap .flap-top { top: 0; border-radius: .07em .07em 0 0; }
#drop .flap .flap-bottom { bottom: 0; border-radius: 0 0 .07em .07em; background: var(--board-bottom); box-shadow: inset 0 -1px rgba(0,0,0,.4); }
#drop .flap .flap-half b { position: absolute; right: 0; left: 0; display: grid; height: 200%; place-items: center; color: inherit; font: inherit; }
#drop .flap .flap-top b { top: 0; }
#drop .flap .flap-bottom b { top: auto; bottom: 0; }
#drop .flap .flap-fold-top { z-index: 2; transform-origin: 50% 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
#drop .flap .flap-fold-bottom { z-index: 2; transform: rotateX(90deg); transform-origin: 50% 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* Scharnier: dunkle Fuge mit zwei Achsstiften. */
#drop .flap::after {
  position: absolute;
  z-index: 3;
  top: calc(50% - .75px);
  right: 2px;
  left: 2px;
  display: block;
  height: 1.5px;
  background: rgba(5,5,5,.92);
  box-shadow: 0 1px rgba(255,255,255,.04);
  content: "";
}
#drop .flap::before {
  position: absolute;
  z-index: 4;
  top: calc(50% - 2px);
  right: 0;
  left: 0;
  display: block;
  height: 4px;
  background:
    linear-gradient(90deg, #4a4b48 0 2px, transparent 2px calc(100% - 2px), #4a4b48 calc(100% - 2px));
  content: "";
}
#drop .flap.is-flipping .flap-fold-top { animation: drop27-fallen .2s cubic-bezier(.55,0,.9,.45) forwards; }
#drop .flap.is-flipping .flap-fold-bottom { animation: drop27-landen .32s .18s cubic-bezier(.2,1.45,.45,1) forwards; }
#drop .flap.is-fast.is-flipping .flap-fold-top { animation-duration: .05s; animation-timing-function: linear; }
#drop .flap.is-fast.is-flipping .flap-fold-bottom { animation-duration: .055s; animation-delay: .045s; animation-timing-function: linear; }
@keyframes drop27-fallen {
  from { transform: rotateX(0); filter: brightness(1); }
  to { transform: rotateX(-90deg); filter: brightness(1.6); }
}
@keyframes drop27-landen {
  from { transform: rotateX(90deg); filter: brightness(.55); }
  to { transform: rotateX(0); filter: brightness(1); }
}

/* Der linke Knopf hatte knochenweiße Schrift auf knochenweißem Grund. */
#drop .drop-join,
#drop .drop-join span { color: #101111; }

/* ---------- Auftritt ---------- */
#drop.is-armed .drop-27 { opacity: 0; }
#drop.is-entering .drop-27 { animation: drop27-logo-rein 1.5s cubic-bezier(.16,.84,.24,1) both; }
@keyframes drop27-logo-rein {
  from { opacity: 0; scale: 1.14; filter: blur(10px); }
  to { opacity: 1; scale: 1; filter: blur(0); }
}
#drop.is-entering .drop-27 i { animation: drop27-schimmer-rein 1.3s .5s cubic-bezier(.45,0,.3,1) both; }
@keyframes drop27-schimmer-rein {
  from { transform: translateX(-130%); }
  to { transform: translateX(440%); }
}
/* Die Buchstaben fallen herein und federn nach: ein Drop. */
#drop.is-entering .drop-letter { animation: drop27-buchstabe .62s calc(var(--d) * .45) cubic-bezier(.3,1.45,.5,1) both; }
@keyframes drop27-buchstabe {
  0% { opacity: 0; transform: translateY(-.7em) rotate(-5deg); }
  45% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
#drop.is-entering .drop-clock { animation: drop27-tafel-rein .7s .15s cubic-bezier(.2,.8,.25,1) both; }
@keyframes drop27-tafel-rein {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* Ruhende Bewegung nur, solange der Drop im Bild ist. */
#drop:not(.is-visible) :is(.drop-glow, .drop-grain, .drop-27 i),
#drop:not(.is-visible) .drop-countdown-label::before { animation-play-state: paused; }

/* ---------- Kleinere Bildschirme ---------- */
@media (min-width: 981px) and (max-height: 850px) {
  #drop { --flap-size: clamp(30px, 2.7vw, 44px); }
  #drop .drop-countdown { row-gap: 7px; }
}
@media (max-width: 980px) {
  #drop .drop-27 { --logo-r: -6deg; top: 30%; left: 50%; width: min(118vw, 900px); }
}
@media (max-width: 680px) {
  #drop { --flap-size: clamp(28px, 8.2vw, 42px); }
  #drop .drop-27 { top: 15%; width: 150vw; }
  #drop .drop-clock { gap: clamp(7px, 2.4vw, 12px); padding: 12px 12px 10px; }
  #drop .drop-countdown { column-gap: 14px; }
  #drop .drop-countdown-label, #drop .drop-when { font-size: 8px; letter-spacing: .14em; }
  #drop .drop-unit small { font-size: 7px; letter-spacing: .18em; }
}
/* Ohne den zweiten „Auf die Liste“-Knopf links (06.10.2026) würde der schräge Schriftzug am Handy unter der Tafel liegen. */
@media (max-width: 520px) {
  #drop .drop-copy { padding-bottom: 72px; }
}
@media (max-width: 380px) {
  #drop { --flap-size: 7.6vw; }
  #drop .drop-clock { gap: 6px; padding-inline: 10px; }
}

/* ---------- Formular (06.10.2026): erst E-Mail, dann Wünsche und Einwilligung, Knopf zuletzt ---------- */
#drop .drop-email-row { position: relative; }
#drop .drop-email-ok {
  flex: 0 0 auto;
  width: 13px;
  height: 7px;
  margin: -3px 18px 0 6px;
  border: solid var(--drop-white);
  border-width: 0 0 2px 2px;
  opacity: 0;
  transform: rotate(-45deg) scale(.2);
  transition: opacity .2s, transform .32s cubic-bezier(.3,1.7,.5,1);
}
#drop .drop-email:not(:placeholder-shown):valid + .drop-email-ok { opacity: 1; transform: rotate(-45deg) scale(1); }
#drop .drop-chip span { transition: background-color .18s, color .18s, border-color .18s, transform .14s; }
#drop .drop-chip span::before {
  display: inline-block;
  width: 0;
  height: .42em;
  margin: -.2em 0 0;
  border: solid currentColor;
  border-width: 0 0 1.5px 1.5px;
  opacity: 0;
  content: "";
  transform: rotate(-45deg);
  transition: width .2s cubic-bezier(.3,1.4,.5,1), margin .2s, opacity .15s;
}
#drop .drop-chip input:checked + span::before { width: .85em; margin-right: .55em; opacity: 1; }
#drop .drop-chip:active span { transform: scale(.95); }
/* „Andere“ (29.10.2026, Micha: „sollen ein bisschen anders aussehen“): gestrichelter Rahmen und ein Plus vorn. Angehakt
   füllt es sich wie die anderen, das Plus macht dem Haken Platz. */
#drop .drop-chip-andere span { border-style: dashed; color: rgba(236,234,228,.8); }
#drop .drop-chip-andere span::after {
  display: inline-block;
  order: -1;
  width: .8em;
  margin-right: .45em;
  overflow: hidden;
  content: "+";
  font-weight: 400;
  text-align: center;
  transition: width .2s, margin .2s, opacity .15s;
}
#drop .drop-chip-andere input:checked + span { border-style: solid; color: #080909; }
#drop .drop-chip-andere input:checked + span::after { width: 0; margin-right: 0; opacity: 0; }
:root[data-theme="light"] #drop .drop-chip-andere span { color: rgba(23,24,23,.75); }
:root[data-theme="light"] #drop .drop-chip-andere input:checked + span { color: #efeee9; }
#drop .drop-consent { align-items: center; margin-top: 4px; }
#drop .drop-consent input {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  border: 1px solid rgba(236,234,228,.62);
  border-radius: 5px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color .18s, border-color .18s;
}
#drop .drop-consent input::after {
  width: 9px;
  height: 5px;
  margin-top: -2px;
  border: solid #0b0c0b;
  border-width: 0 0 2px 2px;
  content: "";
  transform: rotate(-45deg) scale(0);
  transition: transform .26s cubic-bezier(.3,1.7,.5,1);
}
#drop .drop-consent input:checked { border-color: var(--drop-white); background: var(--drop-white); }
#drop .drop-consent input:checked::after { transform: rotate(-45deg) scale(1); }
#drop .drop-consent input:focus-visible { outline: 2px solid var(--drop-white); outline-offset: 3px; }
/* Haken bei „Ja, schreibt mir …“ (29.10.2026, Micha: „animier mal, wenn man den Haken macht“): Kästchen springt auf,
   ein Ring läuft nach außen, acht Funken stieben weg, der Haken zeichnet sich von links nach rechts. Der Satz daneben wird
   nur heller (keine bewegte Schrift), über „Auf die Liste“ läuft einmal ein Lichtstreif: jetzt kann es losgehen. */
#drop .drop-consent input::before {
  grid-area: 1 / 1;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  color: var(--drop-white);
  box-shadow: 0 -15px, 11px -11px, 15px 0, 11px 11px, 0 15px, -11px 11px, -15px 0, -11px -11px;
  content: "";
  opacity: 0;
  transform: scale(.4);
  pointer-events: none;
}
#drop .drop-consent input::after { grid-area: 1 / 1; }
#drop .drop-consent input:checked { animation: drop27-haken-kasten .46s cubic-bezier(.3,1.6,.5,1); }
#drop .drop-consent input:checked::before { animation: drop27-haken-funken .55s .05s cubic-bezier(.2,.7,.3,1); }
#drop .drop-consent input:checked::after { animation: drop27-haken-strich .3s .12s ease-out both; }
@keyframes drop27-haken-kasten {
  0% { transform: scale(.7); box-shadow: 0 0 0 0 rgba(236,234,228,.6); }
  55% { transform: scale(1.14); }
  100% { transform: none; box-shadow: 0 0 0 14px rgba(236,234,228,0); }
}
@keyframes drop27-haken-funken {
  0% { opacity: 0; transform: scale(.55); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.5); }
}
@keyframes drop27-haken-strich {
  from { clip-path: inset(0 100% 0 0); transform: rotate(-45deg) scale(1); }
  to { clip-path: inset(0 0 0 0); transform: rotate(-45deg) scale(1); }
}
#drop .drop-consent { -webkit-tap-highlight-color: transparent; }
#drop .drop-consent > span { transition: color .3s; }
#drop .drop-consent:has(input:checked) > span { color: var(--drop-white); }
#drop .drop-form:has(.drop-consent input:checked) .drop-submit::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.8) 50%, rgba(255,255,255,0) 70%);
  content: "";
  transform: translateX(-110%);
  animation: drop27-bereit .9s .25s cubic-bezier(.4,0,.2,1) both;
  pointer-events: none;
}
@keyframes drop27-bereit { to { transform: translateX(110%); } }
@media (prefers-reduced-motion: reduce) {
  #drop .drop-consent input:checked, #drop .drop-consent input:checked::before, #drop .drop-consent input:checked::after,
  #drop .drop-form:has(.drop-consent input:checked) .drop-submit::before { animation: none; }
}
#drop .drop-submit { position: relative; overflow: hidden; margin: 18px 0 0; }
/* Eine alte Hover-Regel aus drop.css machte den Knopf durchsichtig mit dunkler Schrift: Grund und Schrift bleiben. */
#drop .drop-submit:hover { color: #101111; background-color: #e9e6de; }
/* Beim Absenden laufen Streifen durch den Knopf. */
#drop .drop-submit:disabled { opacity: 1; }
#drop .drop-submit:disabled::after {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg, rgba(16,17,17,0) 0 10px, rgba(16,17,17,.13) 10px 20px);
  background-size: 28.3px 28.3px;
  content: "";
  animation: drop27-laden .6s linear infinite;
}
@keyframes drop27-laden { to { background-position: 28.3px 0; } }
#drop .is-wackeln { animation: drop27-wackeln .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes drop27-wackeln {
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}

/* ---------- Danke-Auftritt: Drop-Pass ---------- */
#drop .drop-ticket { display: grid; min-height: 0; gap: 16px; padding: 0; }
#drop .drop-ticket[hidden] { display: none; }
#drop .drop-pass {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 20px 20px 0;
  overflow: hidden;
  border: 1px solid rgba(236,234,228,.36);
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(236,234,228,.075), rgba(236,234,228,.015) 60%);
}
#drop .drop-pass-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--drop-faint); font: 9px/1 var(--mono); letter-spacing: .2em; }
#drop .drop-pass-head .drop-ticket-index { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--drop-white); font: inherit; letter-spacing: inherit; }
#drop .drop-pass-head .drop-ticket-index::before { width: 7px; height: 7px; border-radius: 50%; background: var(--drop-white); box-shadow: 0 0 10px rgba(236,234,228,.75); content: ""; }
#drop .drop-pass h3 { margin: 0; font-size: clamp(30px, 3vw, 46px); line-height: .95; }
#drop .drop-pass .drop-ticket-copy { max-width: 38ch; margin: 0; }
/* Hinweis „Mail bestätigen / Nichts da? Schau im Spam nach.“ (28.10.2026), nur solange die Adresse unbestätigt ist. */
#drop .drop-pass-mail { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border: 1px solid rgba(236,234,228,.6); border-radius: 8px; background: rgba(236,234,228,.08); }
#drop .drop-pass-mail[hidden] { display: none; }
#drop .drop-pass-mail-zeichen { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--drop-white); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#drop .drop-pass-mail > span { display: grid; gap: 4px; }
#drop .drop-pass-mail b { color: var(--drop-white); font: 700 12px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
#drop .drop-pass-mail b + span { color: rgba(236,234,228,.8); font: 12.5px/1.4 var(--sans); }
#drop .drop-flyer.is-celebrating .drop-pass-mail-zeichen { animation: drop27-brief .7s 1.15s cubic-bezier(.3,.7,.3,1) both; }
@keyframes drop27-brief { 0%, 100% { transform: none; } 30% { transform: rotate(-12deg) translateY(-2px); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-3deg); } }
:root[data-theme="light"] #drop .drop-pass-mail { border-color: rgba(23,24,23,.45); background: rgba(23,24,23,.04); }
:root[data-theme="light"] #drop .drop-pass-mail-zeichen { stroke: #171817; }
:root[data-theme="light"] #drop .drop-pass-mail b { color: #171817; }
:root[data-theme="light"] #drop .drop-pass-mail b + span { color: rgba(23,24,23,.76); }
#drop .drop-pass-nummer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(236,234,228,.2);
  border-radius: 6px;
  background: linear-gradient(180deg, #121312, var(--board-frame));
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 14px 34px rgba(0,0,0,.35);
}
#drop .drop-pass-label { color: rgba(241,239,232,.66); font: 9px/1.3 var(--mono); letter-spacing: .22em; }
#drop .drop-pass-flaps { display: flex; gap: .07em; font-size: clamp(32px, 2.8vw, 44px); }
#drop .drop-pass .drop-ticket-rabatt { margin: 0; }
#drop .drop-pass .drop-ticket-wishes { max-width: none; margin: 0; }
#drop .drop-pass-stub {
  display: grid;
  gap: 8px;
  margin: 2px -20px 0;
  padding: 14px 20px 16px;
  border-top: 1px dashed rgba(236,234,228,.38);
}
#drop .drop-pass-code {
  display: block;
  width: min(58%, 260px);
  height: 30px;
  background:
    repeating-linear-gradient(90deg, var(--drop-white) 0 1px, transparent 1px 3px, var(--drop-white) 3px 5px, transparent 5px 7px, var(--drop-white) 7px 8px, transparent 8px 11px, var(--drop-white) 11px 14px, transparent 14px 16px);
  opacity: .82;
}
#drop .drop-pass-serial { color: var(--drop-faint); font: 8px/1 var(--mono); letter-spacing: .24em; }
#drop .drop-again { justify-self: start; margin: 0; }
#drop .drop-flyer.has-ticket .drop-stamp { right: clamp(26px, 3vw, 40px); bottom: 70px; }
/* Die Fußleiste des Tors trägt seit 20.10.2026 keinen Strichcode mehr und rechts bleibt sie leer (Michas Wunsch).
   Das frühere Ausblenden bei .has-ticket ist weg. */
@media (max-width: 680px) {
  #drop .drop-flyer.has-ticket .drop-stamp { right: 26px; bottom: 74px; padding: 9px 10px; font-size: 11px; }
  #drop .drop-pass { padding: 18px 16px 0; }
  #drop .drop-pass-stub { margin-inline: -16px; padding-inline: 16px; }
  #drop .drop-pass-nummer { padding: 10px 12px; }
}

/* Umdrehen in 3D (06.10.2026, store.js turnDropFlyer): Während der Drehung liegt über der Karte eine Bühne mit zwei
   Kopien Rücken an Rücken (.flip-vorn = alter Zustand, .flip-hinten = neuer), die echte Karte ist unsichtbar (.flip-echt).
   Die Bewegung (Karte, Schatten, Licht, Glanz) läuft per WAAPI in store.js, hier stehen nur Aufbau und Aussehen.
   Die alte Klapp-Animation der ganzen Karte bei .is-celebrating ist damit weg, nur der Stoß beim Stempeln bleibt. */
#drop .drop-flyer.flip-echt { visibility: hidden; overflow: hidden; overflow: clip; }
#drop .flip-buehne { position: absolute; z-index: 6; perspective: 1700px; perspective-origin: 50% 42%; pointer-events: none; }
#drop .flip-karte { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
#drop .drop-flyer.flip-flaeche { position: absolute; top: 0; left: 0; width: 100%; max-width: none; margin: 0; animation: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
#drop .drop-flyer.flip-vorn { transform: translateZ(1.5px); }
#drop .drop-flyer.flip-hinten { transform: rotateY(180deg) translateZ(1.5px); }
/* Licht: Die Seite, die sich abwendet, wird zur fernen Kante hin dunkel. */
#drop .flip-licht, #drop .flip-glanz { position: absolute; z-index: 9; inset: -1px; border-radius: inherit; pointer-events: none; }
#drop .flip-licht { background: linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,.88)); opacity: 0; }
#drop .flip-buehne[data-turn="zurueck"] .flip-licht { background: linear-gradient(270deg, rgba(0,0,0,.25), rgba(0,0,0,.88)); }
#drop .flip-glanz { overflow: hidden; }
#drop .flip-glanz b { position: absolute; top: -20%; bottom: -20%; left: 0; width: 42%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.1) 40%, rgba(255,255,255,.24) 50%, rgba(255,255,255,.1) 60%, rgba(255,255,255,0)); opacity: 0; }
/* Die Kartenkante, nur auf der Kante zu sehen. */
#drop .flip-kante { position: absolute; top: 0; width: 3px; background: linear-gradient(180deg, rgba(236,234,228,.6), rgba(236,234,228,.32)); }
#drop .flip-kante-links { left: -1.5px; transform: rotateY(90deg); }
#drop .flip-kante-rechts { right: -1.5px; transform: rotateY(90deg); }
/* Schatten auf der Wand hinter der angehobenen Karte. Seit 20.10.2026 ein weicher Verlauf statt filter: blur(24px):
   Der Weichzeichner musste in jedem Bild der Drehung neu gerechnet werden (store.js macht ihn dafür 56 px höher). */
#drop .flip-schatten { position: absolute; top: -28px; left: 0; width: 100%; background: radial-gradient(closest-side, rgba(0,0,0,.8) 55%, rgba(0,0,0,.42) 78%, rgba(0,0,0,0)); opacity: 0; }
#drop .drop-flyer.is-celebrating.is-stamping { animation: drop27-stoss .34s ease-out; }
@keyframes drop27-stoss { 35% { transform: translateY(3px) scale(.996); } }
:root[data-theme="light"] #drop .flip-licht { background: linear-gradient(90deg, rgba(23,24,23,.06), rgba(23,24,23,.5)); }
:root[data-theme="light"] #drop .flip-buehne[data-turn="zurueck"] .flip-licht { background: linear-gradient(270deg, rgba(23,24,23,.06), rgba(23,24,23,.5)); }
:root[data-theme="light"] #drop .flip-kante { background: rgba(23,24,23,.38); }
:root[data-theme="light"] #drop .flip-schatten { background: radial-gradient(closest-side, rgba(23,24,23,.5) 55%, rgba(23,24,23,.26) 78%, rgba(23,24,23,0)); }
#drop .drop-flyer.is-celebrating .drop-pass > *,
#drop .drop-flyer.is-celebrating .drop-again { animation: drop27-zeile .5s cubic-bezier(.2,.8,.25,1) both; }
#drop .drop-flyer.is-celebrating .drop-pass > :nth-child(1) { animation-delay: .25s; }
#drop .drop-flyer.is-celebrating .drop-pass > :nth-child(2) { animation-delay: .32s; }
#drop .drop-flyer.is-celebrating .drop-pass > :nth-child(3) { animation-delay: .39s; }
#drop .drop-flyer.is-celebrating .drop-pass > :nth-child(4) { animation-delay: .46s; }
#drop .drop-flyer.is-celebrating .drop-pass > :nth-child(5) { animation-delay: .53s; }
#drop .drop-flyer.is-celebrating .drop-pass > :nth-child(6) { animation-delay: .6s; }
#drop .drop-flyer.is-celebrating .drop-pass > :nth-child(7) { animation-delay: .67s; }
#drop .drop-flyer.is-celebrating .drop-pass > :nth-child(8) { animation-delay: .74s; }
#drop .drop-flyer.is-celebrating .drop-again { animation-delay: .8s; }
@keyframes drop27-zeile {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
/* Der Barcode druckt sich zeilenweise wie aus dem Ticketdrucker. */
#drop .drop-flyer.is-celebrating .drop-pass-code { animation: drop27-druck .8s .95s steps(20, end) both; }
@keyframes drop27-druck {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
/* Ein Glanz zieht einmal über den fertigen Pass. */
#drop .drop-flyer.is-celebrating .drop-pass::after {
  position: absolute;
  inset: -20% auto -20% 0;
  width: 40%;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.12) 45%, rgba(255,255,255,.3) 50%, rgba(255,255,255,.12) 55%, rgba(255,255,255,0));
  content: "";
  pointer-events: none;
  transform: translateX(-120%) rotate(8deg);
  animation: drop27-pass-glanz 1.1s 2.6s cubic-bezier(.45,0,.3,1) both;
}
@keyframes drop27-pass-glanz { to { transform: translateX(330%) rotate(8deg); } }
/* Der Stempel erscheint erst mit dem Aufprall. */
#drop .drop-flyer.is-celebrating:not(.is-stamping) .drop-stamp { opacity: 0; }
#drop .drop-flyer.is-stamping .drop-stamp { animation: drop27-stempel .46s cubic-bezier(.2,1.35,.35,1) both; }
@keyframes drop27-stempel {
  0% { opacity: 0; transform: scale(2.1) rotate(-16deg); filter: blur(3px); }
  55% { opacity: 1; transform: scale(.93) rotate(-7deg); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(-8deg); }
}
#drop .drop-schnee { position: absolute; z-index: 6; inset: -90px; width: calc(100% + 180px); height: calc(100% + 180px); pointer-events: none; }

/* ---------- Heller Modus: die Tafel bleibt dunkel wie eine echte Anzeige ---------- */
:root[data-theme="light"] #drop .drop-glow { background: radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,.2) 45%, transparent 74%); }
:root[data-theme="light"] #drop .drop-grain { opacity: .05; mix-blend-mode: multiply; }
:root[data-theme="light"] #drop .drop-27 { background: linear-gradient(180deg, rgba(23,24,23,.1), rgba(23,24,23,.05) 58%, rgba(23,24,23,.08)); }
:root[data-theme="light"] #drop .drop-27 i { background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 35%, rgba(255,255,255,.95) 50%, rgba(255,255,255,.3) 65%, rgba(255,255,255,0) 100%); }
:root[data-theme="light"] #drop .drop-countdown-label::before { box-shadow: none; }
:root[data-theme="light"] #drop .drop-face { background: transparent; box-shadow: none; }
:root[data-theme="light"] #drop .drop-consent input { border-color: rgba(23,24,23,.6); }
:root[data-theme="light"] #drop .drop-consent input::after { border-color: #efeee9; }
:root[data-theme="light"] #drop .drop-consent input::before { color: #171817; }
:root[data-theme="light"] #drop .drop-pass { border-color: rgba(23,24,23,.4); background: linear-gradient(160deg, rgba(255,255,255,.6), rgba(255,255,255,.2) 60%); }
:root[data-theme="light"] #drop .drop-pass-head .drop-ticket-index::before { box-shadow: none; }
:root[data-theme="light"] #drop .drop-pass-stub { border-top-color: rgba(23,24,23,.4); }
:root[data-theme="light"] #drop .drop-pass-nummer { border-color: rgba(23,24,23,.5); }
:root[data-theme="light"] #drop .drop-copy::before { display: none; }
:root[data-theme="light"] #drop .drop-rabatt b { color: #efeee9; background: #171817; }
:root[data-theme="light"] #drop .drop-clock { border-color: rgba(23,24,23,.5); box-shadow: 0 22px 50px rgba(23,24,23,.22), inset 0 1px rgba(255,255,255,.06); }

@media (prefers-reduced-motion: reduce) {
  #drop .drop-glow,
  #drop .drop-grain,
  #drop .drop-27,
  #drop .drop-27 i,
  #drop .drop-letter,
  #drop .drop-clock,
  #drop .drop-countdown-label::before { animation: none !important; }
  #drop .drop-flyer,
  #drop .drop-flyer *,
  #drop .drop-flyer *::before,
  #drop .drop-flyer *::after,
  #drop .drop-pass::after { animation: none !important; transition: none !important; }
  #drop .drop-27 i { display: none; }
  #drop.is-armed .drop-27 { opacity: 1; }
}

/* ---------- Knopf „Umdrehen“ oben auf der Karte (06.10.2026) ----------
   store.js baut ihn in den Kopf der Karte; sichtbar, sobald es einen Pass gibt. Farben aus currentColor,
   damit er im hellen Modus von selbst dunkel ist. */
#drop .drop-flyer-head.has-turn { align-items: center; justify-content: flex-start; }
#drop .drop-flyer-head.has-turn > span:nth-child(2) { margin-left: auto; }
#drop .drop-turn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  margin: -7px -6px -7px 4px;
  padding: 6px 11px 6px 8px;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 700 9px/1 var(--mono);
  letter-spacing: .17em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .18s, background-color .18s;
}
#drop .drop-turn[hidden] { display: none; }
#drop .drop-turn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: rotate .5s cubic-bezier(.3,1.4,.5,1); }
#drop .drop-turn:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 9%, transparent); }
#drop .drop-turn:hover svg { rotate: 180deg; }
#drop .drop-turn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 440px) {
  #drop .drop-turn { margin-left: 2px; padding: 6px; }
  #drop .drop-turn span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #drop .drop-turn svg { transition: none; }
}