/* Erklärung zum Drop (27.10.2026, Micha: „wenn man das nicht so ganz versteht: gerade ausverkauft, mit dem Drop kommen
   alle neuen Klamotten, eintragen und schon Favoriten auswählen; geil animiert, wenn man das aufklappt“).
   Markup in index.html (.drop-info unter dem Rabatt), Logik in drop-erklaerung.js, wird nach allen Drop-Stilen geladen.
   Ein heller Papier-Flyer mit drei Feldern:
   Rechner (ab 981 px): Dreifach-Faltblatt, das Feld für Feld nach rechts aufklappt und über dem Countdown schwebt
   (kein Verrutschen der Seite). Passt es unten nicht mehr in den Bereich, klappt es nach oben (data-richtung, JS).
   Handy/Tablet: Die Felder klappen nacheinander nach unten auf, der Bereich wächst mit (Höhe per JS).
   In den Feldern: leere Stange mit schwingenden Bügeln + AUSVERKAUFT-Stempel, ein kleines Rolltor fährt hoch und zeigt
   Jacken im Licht, ein Zeiger tippt drei Wünsche an. Zeiten hängen an --f (Feld 0–2). */

.drop-copy > .drop-info { z-index: 6; }
.drop-info { position: relative; margin: 0 0 16px; }

/* ---------- Knopf ---------- */
.drop-info-knopf {
  position: relative; display: inline-flex; min-height: 44px; align-items: center; gap: 12px; padding: 0 18px 0 12px;
  overflow: hidden; border: 1px solid rgba(236, 234, 228, .5); color: var(--drop-white, #eceae4); background: rgba(7, 8, 8, .35);
  font: 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; isolation: isolate;
  transition: color .25s .05s, border-color .25s; -webkit-tap-highlight-color: transparent;
}
/* Papier streicht sich von links hinein, die Schrift dreht in die Gegenfarbe */
.drop-info-knopf::before {
  position: absolute; z-index: -1; inset: 0; background: var(--drop-white, #eceae4); content: "";
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .38s cubic-bezier(.7, 0, .2, 1);
}
.drop-info.ist-offen .drop-info-knopf::before { transform: scaleX(1); }
.drop-info.ist-offen .drop-info-knopf { border-color: var(--drop-white, #eceae4); color: #0b0b0b; }
@media (hover: hover) and (pointer: fine) {
  .drop-info-knopf:hover::before { transform: scaleX(1); }
  .drop-info-knopf:hover { border-color: var(--drop-white, #eceae4); color: #0b0b0b; }
}
.drop-info-knopf:focus-visible { outline: 2px solid var(--drop-white, #eceae4); outline-offset: 3px; }
/* Das Zeichen (27.10.2026, Micha: „kein Plus, ein Fragezeichen, ein richtig geiles Symbol“): Das Fragezeichen ist
   ein Kleiderbügel-Haken, wie im Bügel von „SHOP ANSEHEN“. In Ruhe pendelt es ab und zu wie ein Bügel an der Stange,
   unter der Maus wird es angeschubst. Beim Öffnen wirbelt der Haken weg, der Punkt fällt aus dem Kreis und ein ✕ zeichnet
   sich hinein; beim Schließen zeichnet sich das Fragezeichen zurück und pendelt aus (.ist-frisch, JS). */
.drop-info-zeichen { position: relative; display: grid; width: 26px; height: 26px; flex: none; place-items: center; border: 1px solid currentColor; border-radius: 50%; }
.drop-info-zeichen > * { grid-area: 1 / 1; }
/* Haken samt Punkt sind eine eigene Ebene und drehen sich als Ganzes: Dreht man Teile innerhalb einer SVG-Grafik,
   vermisst der Browser die Grafik in jedem Bild neu (28.10.2026, „ruckelig“). */
.drop-info-zeichen .frage { position: relative; display: block; width: 22px; height: 22px; }
.drop-info-zeichen svg { display: block; width: 22px; height: 22px; overflow: visible; }
.drop-info-zeichen :is(.frage-bogen, .kreuz) { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; }
/* Strich 1, Lücke 2, und versteckt immer ein Stück über das Ende hinaus: Sonst malt der Browser die runden Enden eines
   Strichs der Länge null trotzdem als Punkte (sah aus wie „·?·“). */
.drop-info-zeichen .frage-punkt { position: absolute; top: calc(77.5% - 1.15px); left: calc(50% - 1.15px); width: 2.3px; height: 2.3px; border-radius: 50%; background: currentColor; }
/* Drehpunkt oben am Haken, wie ein Bügel an der Stange */
.drop-info-zeichen .frage { transform-origin: 50% 21%; }
.frage-bogen { stroke-dashoffset: 0; transition: stroke-dashoffset .26s .18s cubic-bezier(.3, .7, .3, 1); }
.frage-punkt { transition: transform .42s .3s cubic-bezier(.3, 1.7, .5, 1), opacity .15s .3s; }
.drop-info-zeichen .kreuz { stroke-dashoffset: 1.05; transition: stroke-dashoffset .16s cubic-bezier(.6, 0, .8, .4); }
.drop-info.ist-offen .frage-bogen { stroke-dashoffset: -1.05; transition: stroke-dashoffset .2s .06s cubic-bezier(.6, 0, .8, .4); }
.drop-info.ist-offen .frage-punkt { opacity: 0; transform: translateY(9px); transition: transform .26s cubic-bezier(.5, 0, .9, .5), opacity .12s .14s; }
.drop-info.ist-offen .kreuz-a { stroke-dashoffset: 0; transition: stroke-dashoffset .2s .22s cubic-bezier(.2, .8, .2, 1); }
.drop-info.ist-offen .kreuz-b { stroke-dashoffset: 0; transition: stroke-dashoffset .2s .32s cubic-bezier(.2, .8, .2, 1); }
.drop-info.ist-offen .frage { animation: frage-wirbel .3s cubic-bezier(.5, 0, .8, .6) both; }
.drop-info.ist-offen .drop-info-zeichen { animation: zeichen-pop .5s cubic-bezier(.3, 1.6, .5, 1) .18s; }
.drop-info.ist-frisch:not(.ist-offen) .frage { animation: frage-pendel-aus 1.1s cubic-bezier(.3, .6, .4, 1) .3s; }
.drop-info-knopf:active .drop-info-zeichen { scale: .86; transition: scale .1s; }
/* Von sich aus pendelt es alle paar Sekunden kurz, dazu läuft ein Ring vom Kreis weg, damit man den Knopf bemerkt */
.drop-section.is-entered .drop-info:not(.ist-offen):not(.ist-frisch) .frage { animation: frage-pendel 6s 1.4s infinite; }
/* Unter der Maus angeschubst (steht nach der Ruhe-Regel und wiegt schwerer, damit es sie ablöst) */
@media (hover: hover) and (pointer: fine) {
  .drop-section .drop-info:not(.ist-offen) .drop-info-knopf:hover .frage,
  .drop-section.is-entered .drop-info:not(.ist-offen):not(.ist-frisch) .drop-info-knopf:hover .frage { animation: frage-schubs .9s cubic-bezier(.3, .6, .4, 1); }
}
.drop-info-zeichen::after { position: absolute; inset: -1px; border: 1px solid currentColor; border-radius: 50%; content: ""; opacity: 0; }
.drop-section.is-entered .drop-info:not(.ist-offen) .drop-info-zeichen::after { animation: drop-info-ruf 6s 1.4s infinite; }
@keyframes drop-info-ruf {
  0% { opacity: .85; transform: scale(1); }
  16%, 100% { opacity: 0; transform: scale(2.4); }
}
@keyframes frage-pendel {
  0%, 66%, 100% { transform: rotate(0); }
  72% { transform: rotate(16deg); }
  79% { transform: rotate(-11deg); }
  86% { transform: rotate(6deg); }
  93% { transform: rotate(-2deg); }
}
@keyframes frage-schubs {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-20deg); }
  45% { transform: rotate(13deg); }
  68% { transform: rotate(-6deg); }
  86% { transform: rotate(2deg); }
}
@keyframes frage-wirbel { to { transform: rotate(140deg) scale(.6); } }
@keyframes frage-pendel-aus {
  0% { transform: rotate(-24deg); }
  30% { transform: rotate(15deg); }
  55% { transform: rotate(-7deg); }
  78% { transform: rotate(3deg); }
  100% { transform: rotate(0); }
}
@keyframes zeichen-pop { 0% { scale: 1; } 35% { scale: .82; } 70% { scale: 1.14; } 100% { scale: 1; } }

/* Einblenden zusammen mit dem übrigen Drop-Text (drop-reference.css) */
.drop-section.is-armed .drop-info { opacity: 0; }
.drop-section.is-entering .drop-info { animation: drop-fade-in .4s .24s both; }

/* ---------- Das Faltblatt ---------- */
.drop-info-blatt { --papier: #ecebe5; --tinte: #101010; position: relative; display: grid; color: var(--tinte); perspective: 1600px; }
.drop-info-blatt[hidden] { display: none; }
.drop-info-feld {
  position: relative; display: grid; align-content: start; padding: 18px 18px 20px;
  /* Papier als feiner Verlauf: Die Kornstruktur mit Überblendmodus (overlay) kostete beim ersten Zeichnen am Handy
     spürbar Zeit (28.10.2026), ein Hauch Fleckigkeit kommt aus zwei weichen Lichtflecken. */
  background:
    radial-gradient(120% 80% at 18% 12%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(90% 70% at 85% 95%, rgba(0, 0, 0, .05), transparent 70%),
    linear-gradient(170deg, #f2f1eb, #e1dfd7);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* Schatten je Feld: er klappt mit auf, unter noch gefalteten Feldern liegt keiner */
.drop-info-feld { box-shadow: 0 16px 30px -8px rgba(0, 0, 0, .62); }
/* Faltschatten: schräg gestellt dunkel, flach liegend weg */
.drop-info-feld::before {
  position: absolute; z-index: 3; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .12)); content: "";
  opacity: 0; pointer-events: none;
}
/* Schatten unter dem ganzen Blatt, blendet mit dem Aufklappen ein */
/* Klebestreifen oben, wie am Flyer */
.drop-info-tape {
  position: absolute; z-index: 4; top: -9px; left: 50%; width: 84px; height: 20px; margin-left: -42px;
  background: rgba(205, 203, 196, .62); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transform: rotate(-3deg); opacity: 0;
  clip-path: polygon(2% 10%, 98% 0, 100% 88%, 96% 100%, 4% 94%, 0 18%);
}

.drop-info-blatt .drop-info-bild { position: relative; display: block; width: 100%; max-width: 116px; height: auto; margin: 0 0 12px; aspect-ratio: 120 / 76; }
.drop-info-bild > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.drop-info-bild .zug { fill: none; stroke: var(--tinte); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.drop-info-blatt .drop-info-nr { margin: 0 0 7px; color: rgba(16, 16, 16, .55); font: 9px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.drop-info-blatt h3 { margin: 0 0 7px; color: var(--tinte); font: 900 16px/1.04 var(--display); letter-spacing: -.02em; text-transform: uppercase; }
.drop-info-blatt .drop-info-text { margin: 0; color: rgba(16, 16, 16, .8); font: 12px/1.45 var(--sans); letter-spacing: 0; text-transform: none; }
.drop-info-text b { color: var(--tinte); font-weight: 800; }

/* Feld 1: AUSVERKAUFT-Stempel */
.drop-info-stempel {
  position: absolute; z-index: 2; top: 18px; right: 12px; padding: 6px 8px 5px; border: 2px solid rgba(16, 16, 16, .86);
  color: rgba(16, 16, 16, .86); font: 900 12px/1 var(--display); letter-spacing: .04em; transform: rotate(-9deg); opacity: 0;
  pointer-events: none;
}
/* Feld 1: die Bügel hängen als eigene Ebenen an der gezeichneten Stange (Haken bei y 12 von 76, x aus --x von 120) */
.drop-info-stange .buegel { position: absolute; top: 10.526%; left: calc((var(--x) - 12) / 120 * 100%); width: 20%; height: 31.58%; transform-origin: 50% 16.67%; }
.drop-info-stange .buegel svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Feld 2: Rolltor. Innenraum mit Jacken ist Zeichnung; Licht und Tor sind Ebenen im Schacht (Innenmaß 96 × 60 bei 12/10) */
.drop-info-tor .jacke { fill: #181818; }
.drop-info-tor .tor-schacht { position: absolute; top: 13.158%; left: 10%; width: 80%; height: 78.947%; overflow: hidden; }
.drop-info-tor .tor-licht { position: absolute; inset: 0; background: #0b0b0b; opacity: .65; }
.drop-info-tor .tor-lamellen {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, #2b2b2a 0 10%, rgba(236, 234, 228, .3) 10% 11.67%), #2b2b2a;
}
/* Feld 3: Wünsche und Zeiger */
.drop-info-wahl .chip rect { fill: rgba(16, 16, 16, 0); stroke: var(--tinte); stroke-width: 1.2; }
.drop-info-wahl .chip text { fill: var(--tinte); font: 6.4px var(--mono); letter-spacing: .1em; text-anchor: middle; text-transform: uppercase; }
/* Der Zeiger fährt als eigene Ebene: die Bahn ist so groß wie die Zeichnung, verschoben wird sie in Prozent davon */
.drop-info-wahl .zeiger-bahn { position: absolute; inset: 0; opacity: 0; transform: translate(86.67%, 86.84%); transform-origin: 0 0; }
.drop-info-wahl .zeiger-bahn svg { display: block; width: 100%; height: 100%; overflow: visible; }
.drop-info-wahl .zeiger { fill: #fff; stroke: var(--tinte); stroke-width: 1.1; stroke-linejoin: round; }

/* „Zur Liste“: springt zum Formular */
.drop-info-los {
  display: inline-flex; width: max-content; min-height: 40px; align-items: center; gap: 12px; margin: 14px 0 0; padding: 0 14px;
  border: 0; color: var(--papier); background: var(--tinte); font: 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
}
.drop-info-los i { position: relative; width: 16px; height: 1px; background: currentColor; transition: translate .2s; }
.drop-info-los i::after { position: absolute; top: -3px; right: 0; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; content: ""; transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .drop-info-los:hover i { translate: 4px 0; } }
.drop-info-los:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; }

/* Das Formular leuchtet kurz auf, wenn man über „Zur Liste“ kommt */
.drop-flyer.ist-gerufen { animation: drop-info-gerufen 1.1s cubic-bezier(.2, .8, .2, 1); }
@keyframes drop-info-gerufen {
  0% { box-shadow: 0 0 0 0 rgba(236, 234, 228, .75); }
  18% { box-shadow: 0 0 0 10px rgba(236, 234, 228, .32); translate: 0 -3px; }
  40% { translate: 0 0; }
  100% { box-shadow: 0 0 0 26px rgba(236, 234, 228, 0); }
}

/* ---------- Rechner: Dreifach-Faltblatt über dem Countdown ---------- */
@media (min-width: 981px) {
  .drop-info-blatt { position: absolute; top: calc(100% + 16px); left: 0; width: min(780px, 100%); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Flach genug, dass es auf üblichen Laptops (1440 × 900) unter dem Knopf in den Drop-Bereich passt */
  .drop-info-feld { padding: 15px 16px 16px; }
  .drop-info-blatt .drop-info-bild { max-width: 84px; margin-bottom: 8px; }
  .drop-info-los { min-height: 36px; margin-top: 10px; }
  .drop-info[data-richtung="oben"] .drop-info-blatt { top: auto; bottom: calc(100% + 16px); }
  .drop-info-feld { transform-origin: 0 50%; }
  .drop-info-tape { left: calc(100% / 6); }
  /* Knicke zwischen den Feldern */
  .drop-info-feld + .drop-info-feld { box-shadow: inset 1px 0 0 rgba(0, 0, 0, .12), inset 12px 0 16px -12px rgba(0, 0, 0, .2), 0 16px 30px -8px rgba(0, 0, 0, .62); }
  .drop-info-los i { transform: none; }
}
/* Laptop mit wenig Höhe: etwas kompakter */
@media (min-width: 981px) and (max-height: 850px) {
  .drop-info { margin-bottom: 12px; }
  .drop-info-feld { padding: 15px 15px 16px; }
  .drop-info-blatt .drop-info-bild { max-width: 86px; margin-bottom: 8px; }
  .drop-info-blatt h3 { font-size: 15px; }
  .drop-info-blatt .drop-info-text { font-size: 11.5px; }
}

/* ---------- Handy und Tablet: Felder klappen nach unten auf ---------- */
@media (max-width: 980px) {
  /* Schwebt wie am Rechner über dem Inhalt (28.10.2026, Micha: „am Handy ruckelig“): Vorher wuchs die Höhe Bild für
     Bild mit und schob alles darunter mit, das hieß rund 400 Layout-Berechnungen pro Auf und Zu. Jetzt bewegen sich nur
     noch die Felder (transform/opacity, Grafikchip). */
  .drop-info-blatt { position: absolute; z-index: 30; top: calc(100% + 14px); left: 0; width: min(100%, 560px); grid-template-columns: minmax(0, 1fr); }
  .drop-info-feld { grid-template-columns: 92px minmax(0, 1fr); column-gap: 16px; padding: 18px 16px 18px; transform-origin: 50% 0; }
  .drop-info-feld > :not(.drop-info-bild):not(.drop-info-stempel) { grid-column: 2; }
  .drop-info-blatt .drop-info-bild { grid-row: 1 / span 4; max-width: none; margin: 4px 0 0; }
  .drop-info-feld + .drop-info-feld { box-shadow: inset 0 1px 0 rgba(0, 0, 0, .12), inset 0 12px 16px -12px rgba(0, 0, 0, .2), 0 16px 30px -8px rgba(0, 0, 0, .62); }
  .drop-info-feld::before { background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .12)); }
  .drop-info-blatt h3 { font-size: 17px; }
  .drop-info-blatt .drop-info-text { font-size: 13px; }
  .drop-info-stempel { top: auto; right: auto; bottom: 14px; left: 10px; font-size: 10px; }
  /* Das Formular liegt darunter: der Pfeil zeigt nach unten */
  .drop-info-los i { transform: rotate(90deg); margin: 0 4px; }
}
@media (max-width: 380px) {
  .drop-info-feld { grid-template-columns: 74px minmax(0, 1fr); column-gap: 12px; }
}

/* Flüssig (28.10.2026): Während es auf- und zuklappt, liegt jedes Feld, sein Faltschatten und jede kleine Szene auf
   einer eigenen Ebene. Sonst müsste der Browser das ganze Feld in jedem Bild neu zeichnen, weil sich darin etwas
   bewegt. Danach (ohne .ist-offen/.ist-zu) fallen die Ebenen wieder weg. Der Drop-Text liegt solange über dem
   Formular, damit das schwebende Blatt am Handy nicht darunter rutscht. */
.drop-copy:has(.drop-info:is(.ist-offen, .ist-zu)) { z-index: 20; }
.drop-info:is(.ist-offen, .ist-zu) .drop-info-feld { will-change: transform, opacity; }
.drop-info:is(.ist-offen, .ist-zu) .drop-info-feld::before { will-change: opacity; }
.drop-info.ist-offen :is(.drop-info-bild, .drop-info-stempel, .drop-info-nr, .drop-info-feld h3, .drop-info-text, .drop-info-los, .buegel, .tor-lamellen, .tor-licht, .zeiger-bahn) { will-change: transform, opacity; }
.drop-info:is(.ist-offen, .ist-zu, .ist-frisch) .frage, .drop-info-knopf:hover .frage { will-change: transform; }

/* ---------- Auf: Schritt für Schritt (27.10.2026, Micha: „nicht alle gleichzeitig, erst 1, dann 2, dann 3, damit man
   mitkommt“). Jeder Schritt hat --schritt Zeit: aufklappen, Text, seine eigene kleine Szene; erst dann der nächste.
   drop-erklaerung.js liest --schritt für die Höhe am Handy. ---------- */
.drop-info-blatt { --schritt: 1.9s; }
.drop-info.ist-offen .drop-info-tape { animation: drop-info-tape .45s cubic-bezier(.3, 1.6, .5, 1) .45s both; }
.drop-info.ist-offen .drop-info-feld { animation: drop-info-auf-x .62s cubic-bezier(.2, .85, .3, 1) calc(var(--f) * var(--schritt)) both; }
.drop-info.ist-offen .drop-info-feld::before { animation: drop-info-schatten .62s ease-out calc(var(--f) * var(--schritt)) both; }
/* Die Wartezeiten darunter müssen mindestens so schwer wiegen wie diese Regel (:is zählt wie „.drop-info-feld h3“) */
.drop-info.ist-offen :is(.drop-info-nr, .drop-info-feld h3, .drop-info-text, .drop-info-los) { animation: drop-info-zeile .45s cubic-bezier(.2, .8, .2, 1) both; }
.drop-info.ist-offen .drop-info-feld .drop-info-nr { animation-delay: calc(var(--f) * var(--schritt) + 300ms); }
.drop-info.ist-offen .drop-info-feld h3 { animation-delay: calc(var(--f) * var(--schritt) + 380ms); }
.drop-info.ist-offen .drop-info-feld .drop-info-text { animation-delay: calc(var(--f) * var(--schritt) + 460ms); }
.drop-info.ist-offen .drop-info-feld .drop-info-los { animation-delay: calc(2 * var(--schritt) + 560ms); }
/* Schritt 1: Bügel schwingen, dann knallt der Stempel */
.drop-info.ist-offen .buegel { animation: drop-info-buegel 1.5s cubic-bezier(.3, .6, .4, 1) calc(520ms + var(--b) * 90ms) both; }
.drop-info.ist-offen .drop-info-stempel { animation: drop-info-stempel .5s cubic-bezier(.2, 1.4, .35, 1) 1.2s both; }
.drop-info.ist-offen .drop-info-stange { animation: drop-info-wumm .3s ease-out 1.4s; }
/* Schritt 2: Tor fährt hoch, Licht geht an */
.drop-info.ist-offen .tor-lamellen { animation: drop-info-tor 1.1s cubic-bezier(.6, 0, .25, 1) calc(var(--schritt) + 700ms) both; }
.drop-info.ist-offen .tor-licht { animation: drop-info-licht 1s ease-out calc(var(--schritt) + 950ms) both; }
/* Schritt 3: Zeiger tippt drei Wünsche an */
.drop-info.ist-offen .zeiger-bahn { animation: drop-info-zeiger 1.7s cubic-bezier(.45, 0, .3, 1) calc(2 * var(--schritt) + 600ms) both; }
.drop-info.ist-offen .chip rect { animation: drop-info-chip .22s ease-out calc(2 * var(--schritt) + 1030ms + var(--c) * 420ms) both; }
.drop-info.ist-offen .chip text { animation: drop-info-chip-text .22s ease-out calc(2 * var(--schritt) + 1030ms + var(--c) * 420ms) both; }

@keyframes drop-info-auf-x {
  0% { opacity: 0; transform: rotateY(-104deg); }
  14% { opacity: 1; }
  72% { transform: rotateY(5deg); }
  100% { opacity: 1; transform: rotateY(0); }
}
@keyframes drop-info-schatten { 0% { opacity: .95; } 100% { opacity: 0; } }
@keyframes drop-info-tape { from { opacity: 0; transform: rotate(-12deg) scale(1.35); } to { opacity: 1; transform: rotate(-3deg) scale(1); } }
@keyframes drop-info-zeile { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes drop-info-buegel {
  0% { transform: rotate(0); }
  14% { transform: rotate(16deg); }
  36% { transform: rotate(-11deg); }
  56% { transform: rotate(6deg); }
  76% { transform: rotate(-3deg); }
  100% { transform: rotate(0); }
}
@keyframes drop-info-stempel {
  0% { opacity: 0; transform: scale(2.6) rotate(-22deg); }
  55% { opacity: 1; transform: scale(.92) rotate(-8deg); }
  100% { opacity: 1; transform: scale(1) rotate(-9deg); }
}
@keyframes drop-info-wumm { 0%, 100% { transform: none; } 40% { transform: translateY(2px) scale(.985); } }
@keyframes drop-info-tor { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes drop-info-licht { from { opacity: .65; } to { opacity: 0; } }
/* Lage der Zeigerspitze in Prozent der Zeichnung (x von 120, y von 76) */
@keyframes drop-info-zeiger {
  0% { opacity: 0; transform: translate(86.67%, 86.84%); }
  8% { opacity: 1; }
  24% { transform: translate(25.00%, 28.95%); }
  27% { transform: translate(25.00%, 28.95%) scale(.85); }
  30% { transform: translate(25.00%, 28.95%); }
  49% { transform: translate(61.67%, 28.95%); }
  52% { transform: translate(61.67%, 28.95%) scale(.85); }
  55% { transform: translate(61.67%, 28.95%); }
  74% { transform: translate(31.67%, 63.16%); }
  77% { transform: translate(31.67%, 63.16%) scale(.85); }
  80% { transform: translate(31.67%, 63.16%); }
  100% { opacity: 1; transform: translate(81.67%, 78.95%); }
}
@keyframes drop-info-chip { from { fill: rgba(16, 16, 16, 0); } to { fill: rgba(16, 16, 16, 1); } }
@keyframes drop-info-chip-text { from { fill: #101010; } to { fill: #ecebe5; } }

/* Handy: Felder klappen nach unten statt zur Seite */
@media (max-width: 980px) {
  .drop-info.ist-offen .drop-info-feld { animation-name: drop-info-auf-y; }
  @keyframes drop-info-auf-y {
    0% { opacity: 0; transform: rotateX(-100deg); }
    14% { opacity: 1; }
    72% { transform: rotateX(5deg); }
    100% { opacity: 1; transform: rotateX(0); }
  }
}

/* ---------- Zu: in umgekehrter Reihenfolge zusammenfalten ---------- */
.drop-info.ist-zu .drop-info-feld { animation: drop-info-zu-x .3s cubic-bezier(.6, 0, .8, .4) calc((2 - var(--f)) * 70ms) both; }
.drop-info.ist-zu .drop-info-tape { animation: drop-info-weg .2s ease both; }
@keyframes drop-info-zu-x { from { opacity: 1; transform: rotateY(0); } to { opacity: 0; transform: rotateY(-100deg); } }
@keyframes drop-info-weg { from { opacity: 1; } to { opacity: 0; } }
@media (max-width: 980px) {
  .drop-info.ist-zu .drop-info-feld { animation-name: drop-info-zu-y; }
  @keyframes drop-info-zu-y { from { opacity: 1; transform: rotateX(0); } to { opacity: 0; transform: rotateX(-100deg); } }
}

/* Weniger Bewegung: geht ohne Fahrt auf und zu, alles steht gleich da */
@media (prefers-reduced-motion: reduce) {
  .drop-info *, .drop-info *::before, .drop-info *::after, .drop-flyer.ist-gerufen { animation: none !important; transition: none !important; }
  .drop-info.ist-offen .drop-info-stempel, .drop-info.ist-offen .drop-info-tape { opacity: 1; }
  .drop-info.ist-offen .tor-lamellen { transform: translateY(-100%); }
  .drop-info.ist-offen .tor-licht { opacity: 0; }
  .drop-info.ist-offen .chip rect { fill: #101010; }
  .drop-info.ist-offen .chip text { fill: #ecebe5; }
}