/* ====================================================================
   BudBorn — pages/jamaika.php Stylesheet
   Ausgelagert 2026-04-20 P1.4 · Revision 5
   Vorher: 4 inline <style>-Blöcke in jamaika.php (Z. 334-1070)
   Geändert: Flagge-CSS entfernt (P1.1), jm-flag-stage + canvas#rastafariFlag raus
   Bilingual DE+EN wird im HTML-Content von jamaika.php gesteuert.
   Scroll-Reveal-Mechanik bleibt unverändert (Constraint G.5 Tech-Stack).
==================================================================== */

/* Rev.10g (2026-04-20): "Zurück zu BudBorn" im Rasta-Gradient-Text-Style.
   Dennis-Feedback: vorheriger monospace-gold-Link-Look bricht aus der
   Neon-Glow-Sprache der Jamaika-Page aus. Redesign:
     - Rasta-Gradient-Text (Rot→Gold→Grün) via background-clip:text
       (matcht die Kontakt-Mail-Link-Optik im Pseudo-Footer Rev. 12)
     - Dezente text-shadow-Glow-Schicht hinter dem Gradient-Text
     - Subtle underline-on-hover
     - Passt in Slim-Header (kein dominanter Button-Rand)
   A11y: Gradient-Text ist schlecht lesbar gegen manche Backgrounds →
   text-shadow sorgt für Kontrast-Halo. Focus-Visible hat explizites Outline. */
.jm-back-to-platform {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin-right: clamp(8px, 1.5vw, 16px);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  /* Rasta-Gradient-Text — identisch zu mailto-Link im Pseudo-Footer */
  background: linear-gradient(90deg, #e63946 0%, #f4a01c 50%, #2d9e4f 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Halo für Kontrast gegen dunklen Slim-Header-BG */
  text-shadow: 0 0 12px rgba(244, 160, 28, 0.25);
  /* Animated underline */
  position: relative;
  transition: text-shadow 0.25s ease, transform 0.2s ease;
}
.jm-back-to-platform::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 2px;
  height: 1px;
  background: linear-gradient(90deg, #e63946, #f4a01c, #2d9e4f);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}
.jm-back-to-platform:hover,
.jm-back-to-platform:focus-visible {
  text-shadow: 0 0 18px rgba(244, 160, 28, 0.5);
  transform: translateX(-2px);
}
.jm-back-to-platform:hover::after,
.jm-back-to-platform:focus-visible::after {
  transform: scaleX(1);
}
.jm-back-to-platform:focus-visible {
  outline: 2px solid #f4a01c;
  outline-offset: 3px;
  border-radius: 3px;
}
/* Der Pfeil &larr; erbt via text-fill die Gradient-Farbe — OK. */
@media (max-width: 480px) {
  .jm-back-to-platform {
    padding: 4px 6px;
    margin-right: 6px;
    font-size: 12px;
  }
  .jm-back-to-platform .jm-back-label {
    display: none;  /* Mobile: nur Pfeil + Gradient */
  }
}

/* P3 Rev.7: smooth scroll für Anker-Klicks (Scroll-Cue → #jmContentWrap).
   Scoped auf .jm-slot/.jm-theater-item-Parent statt global html{}, damit andere
   Plattform-Seiten unverändert bleiben. prefers-reduced-motion hebt's auf. */
@media (prefers-reduced-motion: no-preference) {
  :root:has(#flagSection) { scroll-behavior: smooth; }
}

/* Rev. 10h (2026-04-20): Slim-Header-Overlap-Fix.
   .navbar ist position:fixed top:0 height:var(--nav-h) z-index:1000 (style.css).
   Beim Klick auf Anker-Links (z. B. #jm-upload-section via .jm-jump-mini oder
   Hero-Chevron) scrollt der Browser das Target auf y=0 des Viewports — direkt
   UNTER die Navbar, Button/Content nicht erreichbar ohne weiteres Scrollen.
   Fix: scroll-margin-top auf allen Jamaika-Anker-Targets, sodass der Browser
   oben Platz für die Navbar lässt. Klappt automatisch für href="#..." Clicks
   und element.scrollIntoView().
   nav-h ist normalerweise ~60px (style.css) — wir rechnen mit 80px Puffer. */
#jm-upload-section,
#jm-waitlist-section,
#jm-budguard-section,
#jmContentWrap,
.jm-slot,
.jm-theater-item {
  /* Rev.35: #jm-pseudofooter entfernt (Selector weg, jm-pseudofooter existiert nicht mehr). */
  scroll-margin-top: 80px;
}

/* Zusätzlich: Lesbar-Bereich der Navbar bleibt klickbar (Logo, Back-Link,
   Lang-Switch). Reine Whitespace-Bereiche OK zu durchklicken-machen wäre
   riskant weil Navbar visuell solide ist (backdrop-blur). Dennis' Vorschlag
   pointer-events:none auf der Navbar selbst deaktiviert aber die obigen
   Klick-Targets — daher bewusst NICHT umgesetzt. Der scroll-margin-top-Fix
   oben löst den konkreten Overlap-Bug (Button liegt danach UNTER der Navbar).
   Falls später ein Scroll-Cue o.ä. unter der Navbar hängt: dort gezielt
   pointer-events:none auf konkrete Pseudo-Spans setzen. */

/* Rev.10e (2026-04-20) Variante (iii) Kombi — Hero-Chevron + Mini-Chevron
   Dennis-Wunsch: bestehende eckige Spitze im Hero BEHALTEN (position:
   absolute, bounce), dazu dezenter fixed Mini rechts unten. BEIDE teilen
   sich denselben Rainbow-Glow-Keyframe (DRY). */

/* Rasta-Rainbow-Glow-Cycle: color + drop-shadow synchron, 4.5s pro Zyklus.
   Stops bei 0/33/66/100 sorgen für weiche Fades zwischen den Rasta-Farben.
   color treibt currentColor im SVG-path, drop-shadow erzeugt den Glow um
   den Chevron (nicht um den Container — Spitze selbst leuchtet). */
@keyframes jmRastaGlowCycle {
  0%, 100% {
    color: #e63946;
    filter: drop-shadow(0 0 6px rgba(230, 57, 70, 0.85))
            drop-shadow(0 0 16px rgba(230, 57, 70, 0.55));
  }
  33% {
    color: #f4a01c;
    filter: drop-shadow(0 0 6px rgba(244, 160, 28, 0.85))
            drop-shadow(0 0 16px rgba(244, 160, 28, 0.55));
  }
  66% {
    color: #2d9e4f;
    filter: drop-shadow(0 0 6px rgba(45, 158, 79, 0.85))
            drop-shadow(0 0 16px rgba(45, 158, 79, 0.55));
  }
}
/* Dezentere Variante für den Mini — kleinerer Glow-Radius, nicht dominant */
@keyframes jmRastaGlowCycleMini {
  0%, 100% {
    color: #e63946;
    filter: drop-shadow(0 0 4px rgba(230, 57, 70, 0.75))
            drop-shadow(0 0 10px rgba(230, 57, 70, 0.35));
  }
  33% {
    color: #f4a01c;
    filter: drop-shadow(0 0 4px rgba(244, 160, 28, 0.75))
            drop-shadow(0 0 10px rgba(244, 160, 28, 0.35));
  }
  66% {
    color: #2d9e4f;
    filter: drop-shadow(0 0 4px rgba(45, 158, 79, 0.75))
            drop-shadow(0 0 10px rgba(45, 158, 79, 0.35));
  }
}

/* Rev.10e-A: Rainbow-Glow an der bestehenden Hero-Spitze. Die ursprüngliche
   Position, Größe, Background, Border bleibt (Definition bei Block 2 Z.~1037).
   Wir overriden NUR die SVG-Farbe + drop-shadow-filter via Rainbow-Cycle.
   Der Container-color aus dem Basis-Block wird auf transparent gesetzt, damit
   nur der Path über currentColor die Farbe trägt. */
.jm-hero-scroll-cue .jm-scroll-cue-svg {
  width: 22px;
  height: 22px;
  display: block;
  animation: jmRastaGlowCycle 4.5s ease-in-out 1.4s infinite;
}

/* Rev.10e-B: Mini-Jump-Chevron fixed bottom-right ──────────────────────── */
.jm-jump-mini {
  position: fixed;
  right: clamp(14px, 2.5vw, 22px);
  bottom: clamp(14px, 2.5vh, 22px);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #f4a01c;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1.5px solid rgba(244, 160, 28, 0.35);
  border-radius: 6px; /* eckig-kantig, matcht "eckige Spitze"-Terminologie */
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  /* P3 (2026-04-20): Fade weicher. 0.4s ease → 0.55s cubic-bezier(0.22,1,0.36,1)
     (out-expo-ähnlich), sanfter statt schnappend. transform-Distanz 6px → 8px
     für mehr wahrnehmbaren Slide-Anteil. */
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.25s ease,
              background 0.25s ease;
}
.jm-jump-mini .jm-scroll-cue-svg {
  width: 22px;
  height: 22px;
  display: block;
  animation: jmRastaGlowCycleMini 4.5s ease-in-out infinite;
}
.jm-jump-mini.jm-mini-visible {
  opacity: 0.92;
  pointer-events: auto;
  transform: translateY(0);
}
.jm-jump-mini.jm-mini-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(8px) !important;
}
.jm-jump-mini:hover,
.jm-jump-mini:focus-visible {
  opacity: 1;
  border-color: rgba(244, 160, 28, 0.75);
  background: rgba(10, 8, 2, 0.65);
}
.jm-jump-mini:focus-visible {
  outline: 2px solid #f4a01c;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .jm-hero-scroll-cue .jm-scroll-cue-svg,
  .jm-jump-mini .jm-scroll-cue-svg {
    animation: none !important;
    color: #f4a01c;
    filter: drop-shadow(0 0 4px rgba(244, 160, 28, 0.55));
  }
}

@media (max-width: 480px) {
  .jm-jump-mini {
    width: 40px;
    height: 40px;
    right: 12px;
    bottom: 12px;
  }
  .jm-jump-mini .jm-scroll-cue-svg {
    width: 20px;
    height: 20px;
  }
}


/* ── Block 1 (ehem. jamaika.php Z. 334-716) ─────────────────────────── */
/* ── SVG Icon Basis ─────────────────────────────────────────────────── */
/* P5: Platform Font — identisch mit style.css --font-body / --font-display */
body,.jr-story-section,section{font-family:'DM Sans',sans-serif;}
h1,h2,h3,.jr-neon-title{font-family:'Playfair Display',serif;}

/* P6: Melissa-Headline — explizit weiß, verhindert Gradient-Override */
#melissaHeading,
#melissaHeading span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  filter: none !important;
}

/* P7: Page Load Fade-In Keyframes */
@keyframes jmFadeIn        {from{opacity:0;}to{opacity:1;}}
@keyframes jmFadeInDown    {from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}}
@keyframes jmFadeInUp      {from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
/* Legacy jrFadeSlideIn/jrFadeIn entfernt 2026-04-20 P1.1 — nur für Flagge genutzt */

/* P7: Hero/Sky-Section — opacity 0→1, 1.2s ease-out */
/* P2.2 Rev.7 (2026-04-20): clouds-bg.png komplett aus Jamaika entfernt.
   Hero hat keinen Background-Image mehr, Body-BG trägt die Fläche. */
#flagSection{position:relative;opacity:0;animation:jmFadeIn 1.2s ease-out forwards;}

/* P7: Haupt-Headline (erste Story-Section) — translateY(-20px) + opacity, 0.8s, delay 0.3s */
.jm-fadein-headline{opacity:0;animation:jmFadeInDown 0.8s ease-out 0.3s forwards;}
/* P7: Erster Grid-Card-Block — translateY(30px) + opacity, 0.6s, delay 0.5s */
.jm-fadein-card{opacity:0;animation:jmFadeInUp 0.6s ease-out 0.5s forwards;}
/* P7: Basisklasse .jm-fadein — allgemeines sanftes Einblenden */
.jm-fadein{opacity:0;animation:jmFadeIn 0.8s ease-out 0.2s forwards;}
@media(prefers-reduced-motion:reduce){
  #flagSection,.jm-fadein-headline,.jm-fadein-card,.jm-fadein{
    animation:none!important;opacity:1!important;transform:none!important;
  }
}
@media(prefers-reduced-motion:reduce){#flagSection,.jr-reveal,.jr-fly-in{animation:none!important;transition:none!important;opacity:1!important;transform:none!important;}}
.jr-icon{width:20px;height:20px;display:inline-block;vertical-align:middle;}
.jr-icon.jr-lg { width:28px; height:28px; }
.jr-spin { animation: jrSpin 1s linear infinite; }
@keyframes jrSpin { to { transform: rotate(360deg); } }

/* ── PUNKT 1: Neon Rasta Glow ─────────────────────────────────────────
   Farbpalette:
   Neon-Grün:  #2d9e4f  Glow: rgba(45,158,79,0.4)
   Neon-Gold:  #f4a01c  Glow: rgba(244,160,28,0.5)
   Neon-Rot:   #e63946  Glow: rgba(230,57,70,0.4)
   Glass-BG:   rgba(0,0,0,0.45)  blur(14px)
──────────────────────────────────────────────────────────────────────── */

/* Glass-Cards: Neon-Border + Glow */
.jr-glass-card {
  background: rgba(10,10,10,0.50);
  border: 3px solid rgba(45,158,79,0.6);
  border-radius: 16px;
  padding: 32px;
  will-change: transform;
  box-shadow:
    0 0 24px rgba(45,158,79,0.12),
    0 0 48px rgba(244,160,28,0.06),
    inset 0 1px 0 rgba(255,255,255,0.06);
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
.jr-glass-card:hover {
  border-color: rgba(244,160,28,0.55);
  box-shadow:
    0 0 32px rgba(244,160,28,0.22),
    0 0 60px rgba(45,158,79,0.10),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Section Titles: Neon-Gradient + Glow */
.jr-neon-title {
  background: linear-gradient(90deg, #e63946 0%, #f4a01c 50%, #2d9e4f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(244,160,28,0.55));
}

/* Radiale Neon-Akzente hinter Sections */
.jr-section-glow {
  position: relative;
}
.jr-section-glow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 60%;
  background: transparent;
  pointer-events: none;
  z-index: 0;
}
.jr-section-glow > * { position: relative; z-index: 1; }

/* Stats-Grid Karten (Hurricane-Section): Neon-Glow */
.jr-stat-card {
  border-top: 1px solid rgba(244,160,28,0.4);
  padding-top: 20px;
  position: relative;
  transition: transform 0.2s ease;
}
.jr-stat-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, #e63946 0%, #f4a01c 50%, #2d9e4f 100%);
  box-shadow: 0 0 8px rgba(244,160,28,0.7);
}
.jr-stat-card:hover { transform: translateY(-3px); }

/* Upload Drop-Zone: leuchtend */
.jm-file-zone {
  border: 2px dashed rgba(244,160,28,0.45);
  border-radius: 10px;
  padding: 28px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
  background: rgba(244,160,28,0.03);
}
.jm-file-zone:hover, .jm-file-zone.drag {
  border-color: rgba(244,160,28,0.85);
  background: rgba(244,160,28,0.06);
  box-shadow: 0 0 22px rgba(244,160,28,0.18), inset 0 0 20px rgba(244,160,28,0.04);
}

/* Form Inputs: Neon-Focus */
.jm-form-row { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.jm-form-row label { font-size:12px; letter-spacing:2px; text-transform:uppercase; color:#8a7a68; font-family:monospace; }
.jm-input {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(45,158,79,0.3);
  border-radius: 8px;
  padding: 12px 16px;
  color: #f0e6d0;
  font-size: 14px;
  outline: none;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.jm-input:focus {
  border-color: rgba(45,158,79,0.75);
  box-shadow: 0 0 0 3px rgba(45,158,79,0.12), 0 0 14px rgba(45,158,79,0.18);
}
.jm-select { background: rgba(10,8,2,0.9); }

/* Submit-Buttons — Rev.10 (2026-04-20) BudBorn-Neon-Glow-Standard in Rasta-Palette:
   Radial-Gradient von innen (warmes Gold) nach außen (dunkler Rand) + Multi-Layer
   Outer-Glow (Gold → Rot → Grün). Pattern lehnt sich an .btn-upload-submit
   (style.css) an, aber mit Rasta-Farben statt Plattform-Grün. */
.jm-btn-upload {
  display: block;
  width: 100%;
  padding: 16px;
  /* Rev.10b: Farbreihenfolge laut Constraint G.3 = ROT → GOLD → GRÜN (inside-out).
     Rot-Opacity leicht reduziert (.45) damit es innen nicht zu knallig wird. */
  background: radial-gradient(circle at center,
    rgba(230, 57, 70, 0.45) 0%,
    rgba(244, 160, 28, 0.38) 40%,
    rgba(45, 158, 79, 0.25) 72%,
    rgba(10, 8, 2, 0.85) 100%);
  color: #fff8e0;
  font-weight: 800;
  font-size: 15px;
  border: 1px solid rgba(244, 160, 28, 0.45) !important;
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: 1px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.3s ease, transform 0.15s ease, background 0.3s ease;
  margin-top: 8px;
  /* Outer-Glow ebenfalls ROT → GOLD → GRÜN Layer-Reihenfolge */
  box-shadow:
    0 0 14px rgba(230, 57, 70, 0.30),
    0 0 28px rgba(244, 160, 28, 0.28),
    0 0 50px rgba(45, 158, 79, 0.15);
  animation: jmBtnNeonPulse 2.8s ease-in-out infinite;
}
.jm-btn-upload:hover,
.jm-btn-upload:focus-visible {
  /* Rev.10c (2026-04-20): !important zur Specificity-Überwindung.
     Scroll-Theater-Stagger-Animations ".jm-theater-item.jm-active > *:nth-child(N)"
     haben Specificity (0,3,1) > :hover (0,2,0). Die Stagger-Animation setzt
     via animation-fill-mode:forwards ein transform:translateX(0) translateY(0)
     als finalen Value, was :hover-transform sonst nicht überschreiben konnte.
     Dennis' Bug: obere/untere Buttons hatten inkonsistenten Hover — Root-Cause
     war Specificity-Konflikt, nicht Button-Config. */
  transform: translateY(-2px) !important;
  background: radial-gradient(circle at center,
    rgba(230, 57, 70, 0.62) 0%,
    rgba(244, 160, 28, 0.55) 40%,
    rgba(45, 158, 79, 0.38) 72%,
    rgba(10, 8, 2, 0.80) 100%) !important;
  box-shadow:
    0 0 22px rgba(230, 57, 70, 0.55),
    0 0 44px rgba(244, 160, 28, 0.45),
    0 0 72px rgba(45, 158, 79, 0.28) !important;
  animation: none !important;
}
.jm-btn-upload:focus-visible {
  outline: 2px solid #f4a01c;
  outline-offset: 3px;
}
.jm-btn-upload:active {
  transform: translateY(0);
  box-shadow:
    0 0 8px rgba(244, 160, 28, 0.35),
    0 0 18px rgba(230, 57, 70, 0.20);
}
.jm-btn-upload:disabled {
  animation: none;
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(244,160,28,0.35), 0 4px 16px rgba(230,57,70,0.25);
  }
  50% {
    box-shadow: 0 0 38px rgba(244,160,28,0.65), 0 6px 26px rgba(230,57,70,0.45);
  }
}

/* Upload Grid */
.jm-upload-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:2.5rem; margin-top:40px; }
.jm-media-card { position:relative; border-radius:12px; overflow:hidden; background:rgba(10,10,10,0.50); backdrop-filter:blur(6px); aspect-ratio:4/3; border:3px solid rgba(45,158,79,0.2); will-change:transform; transition:border-color 0.3s, box-shadow 0.3s; }
.jm-media-card:hover { border-color:rgba(244,160,28,0.45); box-shadow:0 0 18px rgba(244,160,28,0.15); }
.jm-media-card img, .jm-media-card video { width:100%; height:100%; object-fit:cover; }
.jm-badge { position:absolute; top:8px; right:8px; font-size:10px; font-weight:700; padding:3px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:1px; display:flex; align-items:center; gap:4px; }
.jm-badge-grow { background:rgba(45,90,39,0.9); color:#4ade80; border:1px solid rgba(45,158,79,0.4); }
.jm-badge-goodiebag { background:rgba(90,74,16,0.9); color:#ffd700; border:1px solid rgba(244,160,28,0.4); }
.jm-badge-hello_world { background:rgba(26,58,90,0.9); color:#60b4ff; border:1px solid rgba(96,180,255,0.4); }

/* Fly-in Animationen: sanfter, lebendiger */
.jr-fly-in{opacity:0;transform:translateY(40px) scale(0.97);transition:opacity 0.7s cubic-bezier(0.34,1.56,0.64,1),transform 0.7s cubic-bezier(0.34,1.56,0.64,1);}
.jr-fly-in.visible{opacity:1;transform:translateY(0) scale(1);}
/* P2: Scroll-Reveal jr-reveal */
.jr-reveal{opacity:0;transform:translateY(40px);transition:opacity 0.75s cubic-bezier(0.34,1.20,0.64,1),transform 0.75s cubic-bezier(0.34,1.20,0.64,1);}
.jr-reveal.jr-visible{opacity:1;transform:translateY(0);}
/* P2: Glow-Border Klassen */
section.jr-glow-red{background:rgba(10,10,10,0.50);border:3px solid #e63946;box-shadow:0 0 22px rgba(230,57,70,0.45),inset 0 0 12px rgba(230,57,70,0.06);border-radius:16px;margin-bottom:5rem !important;padding-top:2rem;padding-bottom:2rem;will-change:transform;}
section.jr-glow-gold{background:rgba(10,10,10,0.50);border:3px solid #f4a01c;box-shadow:0 0 22px rgba(244,160,28,0.45),inset 0 0 12px rgba(244,160,28,0.06);border-radius:16px;margin-bottom:5rem !important;padding-top:2rem;padding-bottom:2rem;will-change:transform;}
section.jr-glow-green{background:rgba(10,10,10,0.50);border:3px solid #2d9e4f;box-shadow:0 0 22px rgba(45,158,79,0.45),inset 0 0 12px rgba(45,158,79,0.06);border-radius:16px;margin-bottom:5rem !important;padding-top:2rem;padding-bottom:2rem;will-change:transform;}

/* Leerer Grid-State: Neon-Nachricht */
.jr-empty-state {
  grid-column: 1/-1;
  text-align: center;
  padding: 60px 20px;
  border: 2px dashed rgba(45,158,79,0.3);
  border-radius: 16px;
  background: rgba(45,158,79,0.04);
  color: #2d9e4f;
  font-size: 16px;
  text-shadow: 0 0 14px rgba(45,158,79,0.4);
}

/* ── Mobile CSS ───────────────────────────────────────────────────────── */
/* -- Video-Overlay-Fix: kein Overlay ueber Storm-Video -------------------- */
#stormWrap { z-index: 1 !important; background: transparent !important; }
#jmContentWrap { z-index: 30; }  /* Rev.40.1: Skala-Update (war 10) — siehe Kommentar oben */

/* P1: Video Container - full height to fill sticky stormWrap */
#stormVideoContainer {
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: hidden;
}
/* P2: Mobile Video-Overlay */
@media (max-width: 768px) {
  #stormVideoContainer { width: 100%; height: 100%; }
  #stormWrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    pointer-events: none;
    z-index: 2;
  }
}
/* P4: BudGuard Badge */
.jm-budguard-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(45,158,79,0.08);
  border: 1px solid rgba(45,158,79,0.35);
  border-radius: 40px;
  padding: 8px 18px;
  font-size: 12px;
  font-family: monospace;
  letter-spacing: 1.5px;
  color: #2d9e4f;
  text-transform: uppercase;
  box-shadow: 0 0 14px rgba(45,158,79,0.18);
}

/* -- jr-grid Container ----------------------------------------------------- */
.jr-grid {
  background: rgba(10,10,10,0.50);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  will-change: transform;
}

/* -- Uploads Gallery Grid (Aufgabe 2) -------------------------------------- */
.jr-uploads-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 40px;
}
.jr-gallery-card {
  background: rgba(10,10,10,0.50);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  will-change: transform;
  transition: transform 0.25s ease, box-shadow 0.35s ease;
}
.jr-gallery-card:hover { transform: translateY(-4px); }
.jr-gallery-card img,
.jr-gallery-card video {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.jr-gallery-card .jr-card-info {
  padding: 12px 14px;
  background: rgba(0,0,0,0.65);
}
/* Farbreihenfolge: Rot->Gold->Gruen (3n+1 / 3n+2 / 3n) */
.jr-gallery-card:nth-child(3n+1) {
  border: 3px solid #e63946;
  box-shadow: 0 0 22px rgba(230,57,70,0.45);
}
.jr-gallery-card:nth-child(3n+2) {
  border: 3px solid #f4a01c;
  box-shadow: 0 0 22px rgba(244,160,28,0.45);
}
.jr-gallery-card:nth-child(3n) {
  border: 3px solid #2d9e4f;
  box-shadow: 0 0 22px rgba(45,158,79,0.45);
}
@media (max-width: 900px) {
  .jr-uploads-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .jr-uploads-gallery { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  html, body { font-size: 16px; }
  #flagSection { height: 38vh !important; min-height: 200px !important; }
  .jr-story-section, section { padding: 40px 16px !important; max-width: 100% !important; }
  .jr-glass-card { padding: 20px 14px; border-radius: 12px; }
  #jmUploadForm > div[style*="grid-template-columns"] { display: block !important; }
  #jmUploadForm > div[style*="grid-template-columns"] > .jm-form-row { margin-bottom: 16px; }
  #jmWaitlistForm > div[style*="grid-template-columns"] { display: block !important; }
  #jmWaitlistForm > div[style*="grid-template-columns"] > .jm-form-row { margin-bottom: 16px; }
  .jm-input { font-size: 16px !important; padding: 14px 16px; width: 100%; box-sizing: border-box; }
  .jm-file-zone { padding: 36px 16px; font-size: 16px; }
  .jm-btn-upload { padding: 18px 16px; font-size: 16px; min-height: 52px; border-radius: 12px; }
  .jm-upload-grid { grid-template-columns: 1fr !important; }
  div[style*="repeat(auto-fit,minmax(200px"] { grid-template-columns: 1fr 1fr !important; }
  form[style*="display:flex;gap:12px"] { flex-direction: column !important; max-width: 100% !important; }
  form[style*="display:flex;gap:12px"] input[type="email"],
  form[style*="display:flex;gap:12px"] button { width: 100% !important; min-height: 48px; font-size: 16px !important; }
  footer[style*="padding"] { padding: 28px 16px !important; }
  /* wSpacer auto-height for content layers */
  .navbar .nav-actions { padding-right: 4px; }
  section.jr-glow-red, section.jr-glow-gold, section.jr-glow-green { margin-bottom: 3rem !important; }
  footer { display: flex !important; flex-direction: column !important; align-items: center !important; }
  footer p, footer a { display: block !important; }
}

@media (max-width: 480px) {
  html, body { font-size: 15px; }
  #flagSection { height: 30vh !important; min-height: 160px !important; }
  .jr-story-section, section { padding: 28px 12px !important; }
  .jr-glass-card { padding: 16px 10px; border-radius: 10px; }
  .jr-neon-title { font-size: clamp(1.4rem,7vw,2rem) !important; }
  .jm-file-zone { padding: 24px 10px; font-size: 14px; }
  .jm-btn-upload { padding: 16px 12px; font-size: 15px; min-height: 48px; border-radius: 10px; }
  .jm-input { padding: 12px 12px; font-size: 15px !important; }
  div[style*="repeat(auto-fit,minmax(200px"] { grid-template-columns: 1fr !important; }
  .jr-stat-card { padding: 14px 8px !important; }

  .jr-section-glow { padding: 20px 8px !important; }
}

/* P8: Mobile Section-Hintergrund 0.45 */
@media (max-width: 768px) {
  section.jr-glow-red, section.jr-glow-gold, section.jr-glow-green {
    background: rgba(10,10,10,0.45) !important;
    padding: 1.5rem 1rem !important;
  }
}
/* P7: Mobile Grid-Bereiche kompakter */
@media (max-width: 768px) {
  .jm-sections-wrapper section { padding: 1rem !important; }
  .jm-sections-wrapper { gap: 3rem !important; }
}
/* P2: BudGuard immer sichtbar */
#jm-budguard-section {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Block 2 (ehem. jamaika.php Z. 718-770) ─────────────────────────── */
/* ── Scroll-Theater ─────────────────────────────────────────────────────── */
.jm-slot {
  height: 100vh;
  position: relative;
}
@media (max-width: 768px) {
  .jm-slot { height: 100svh; }
}
/* Content-Grids: reines Opacity-Fade, kein translateX
   P6 G.8 Rev.7 (2026-04-20): max-height + overflow-y entfernt.
   Keine inneren Scroll-Container mehr — lange Content-Slots laufen in voller
   Höhe aus, Page scrollt natürlich tiefer. Begründung: Konflikt mit Scroll-
   Video-Mechanik (#stormV currentTime) + iOS Nested-Scroll-Snapping. */
.jm-theater-item {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  /* P3 (2026-04-20): Opacity-Transition weicher. 0.6s ease → 0.65s
     cubic-bezier(0.22,1,0.36,1) (out-expo). Wirkt weniger "schnapp". */
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  width: min(88vw, 860px);
  margin: 0 auto;
  box-sizing: border-box;
}
.jm-theater-item.jm-active {
  opacity: 1;
}
.jm-theater-item.jm-past {
  opacity: 0;
  /* P3: Out-Transition 0.3s → 0.5s mit easing, damit der Übergang nicht hart
     abbricht. Noch schneller als In (0.65s) damit Content-Wechsel crisp bleibt. */
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.jm-theater-item.jm-static-last {
  position: relative;
  top: auto;
  transform: none !important;
  max-height: none;
  overflow-y: visible;
}
.jm-theater-item.jm-static-last.jm-active {
  opacity: 1;
}
/* Upload-Karten (DB-gerendert): fly-in mit translateX.
   Rev. 10d (2026-04-20): Grid-Reveal "zu hoch" Fix.
   Vorher: translateY(-50%) zentrierte die Karte relativ zu ihrer eigenen
   Höhe — bei tall content (lange captions/Videos) wurde die obere Hälfte
   über den Viewport-Rand geschoben und hinter andere Sections versteckt.
   Fix: top-anchored statt center-anchored via clamp, kein translateY mehr.
   Tall content fliesst natürlich nach unten raus; Scroll-Theater stellt
   sicher dass nur ein Slot gleichzeitig jm-active ist. */
.jm-upload-card-item {
  top: clamp(4vh, 8vh, 12vh);
  transform: translateX(-60px);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease;
}
.jm-upload-card-item.jm-active { transform: translateX(0); opacity: 1; }
.jm-upload-card-item.jm-past   { opacity: 0; transform: translateX(0); }
.jm-slot section.jr-glow-red,
.jm-slot section.jr-glow-gold,
.jm-slot section.jr-glow-green {
  margin-bottom: 0 !important;
}

/* ── Block 3 (ehem. jamaika.php Z. 772-808) ─────────────────────────── */
/* #flagSection overlays removed — sky gradient handles fade via mask-image */

/* P8: Mobile Section-Hintergrund 0.45 */
@media (max-width: 768px) {
  section.jr-glow-red, section.jr-glow-gold, section.jr-glow-green {
    background: rgba(10,10,10,0.45) !important;
    padding: 1.5rem 1rem !important;
  }
}
/* P7: Mobile Grid-Bereiche kompakter */
@media (max-width: 768px) {
  .jm-sections-wrapper section { padding: 1rem !important; }
  .jm-sections-wrapper { gap: 3rem !important; }
}
/* P2: BudGuard immer sichtbar */
#jm-budguard-section {
  opacity: 1 !important;
  transform: none !important;
}
/* P2: jm-sections-wrapper Mobile margin-top 8rem */
@media (max-width: 768px) {
  .jm-sections-wrapper { margin-top: 8rem !important; }
}

/* Scroll-Theater: Storm-Video sticky full-height, Content overlay */
#stormWrap {
  position: sticky !important;
  top: 0 !important;
  transform: none !important;
  height: 100svh !important;
}
#jmContentWrap { margin-top: -100svh !important; }
@media (max-width: 768px) {
  #stormWrap { height: 100svh !important; }
}

/* ── Block 4 (ehem. jamaika.php Z. 810-1070, Hero/Theater/Mobile/RM) ── */
/* ╔══════════════════════════════════════════════════════════════════╗
   ║  REDESIGN v2 — Hero + Stagger + Glassmorphism + Mobile-First   ║
   ║  Skills: ui-ux-pro-max, ux-designer, frontend-design           ║
   ║  NUR CSS/HTML/1×JS — keine PHP/Formular-Handler geändert       ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── 1. HERO: #flagSection → Viewport-füllend ──────────────────────
   Überschreibt alle inline-styles via !important
   frontend-design: "one well-orchestrated page load"
   ux-designer: "pleasurable first impression critical"           */
#flagSection {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  /* Rev.40.1 (2026-04-22) Phase 3b Follow-up: Z-Index-Skala umgezogen auf
     Projekt-Tokens (5/10/20/30/40/1000). War 5, jetzt 10. Lasst Raum fuer
     Overlays zwischen 40 und 100 (Modals/Toasts). */
  z-index: 10 !important;
  height: 100vh !important;
  height: 100svh !important;       /* iOS safe-area */
  min-height: 100svh !important;
  max-height: none !important;
  /* P2.2 Rev.7 (2026-04-20): Content nach oben verankert, clouds-bg entfernt.
     Rev.8 (2026-04-20): padding-top clamp erhöht für mehr Atem um Titel,
     mask-image-Fade-Boundary von 55% auf 85% → Hero bleibt visuell länger
     sichtbar beim Scrollen, erzeugt "verankert"-Effekt ohne Struktur-Umbau. */
  align-items: flex-start !important;
  padding-top: clamp(16vh, 22vh, 28vh) !important;
  padding-bottom: 6vh !important;
  -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%) !important;
  mask-image:         linear-gradient(to bottom, black 85%, transparent 100%) !important;
  overflow: hidden !important;
}

/* Hero → Video: nahtloser Übergang ────────────────────────────────── */
#flagSection::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30vh;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.93) 100%);
  pointer-events: none;
  z-index: 6;
}

/* Flag-Stage + Rastafari-Flag-Canvas CSS komplett entfernt 2026-04-20 P1.1 */

/* ── 3. VIDEO: mehr Raum + Glassmorphism ────────────────────────────
   Video als atmosphärischer Layer — scheint durch Glass-Cards durch
   ui-ux-pro-max §3 Performance: backdrop-filter GPU-beschleunigt   */
#wSpacer {
  height: auto !important;
  padding-top: 100svh !important; /* push below fixed #flagSection */
}

/* Video-Buffer: garantierter sichtbarer Bereich vor Content */
.jm-video-buffer {
  height: 55vh !important;
}

/* Theater-Sections über Video: Glassmorphism
   Video scheint durch backdrop-filter durch (blurred, atmospheric) */
.jm-slot section.jr-glow-red,
.jm-slot section.jr-glow-gold,
.jm-slot section.jr-glow-green {
  background: rgba(5, 3, 1, 0.62) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
}

/* Upload-Section (static-last): voll opak — kein Video dahinter */
#jm-upload-section {
  background: rgba(8, 5, 2, 0.90) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── 4. STAGGER-KEYFRAMES ───────────────────────────────────────────
   frontend-design: "staggered reveals (animation-delay) creates delight"
   ui-ux-pro-max §7: "Motion conveys meaning, spatial continuity"  */
@keyframes jmFlyLeft {
  from { opacity: 0; transform: translateX(-58px) translateY(6px); }
  to   { opacity: 1; transform: translateX(0) translateY(0); }
}
@keyframes jmFlyRight {
  from { opacity: 0; transform: translateX(58px) translateY(6px); }
  to   { opacity: 1; transform: translateX(0) translateY(0); }
}
@keyframes jmFlyUp {
  from { opacity: 0; transform: translateY(46px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Spring-Easing Variable */
:root { --jm-spring: cubic-bezier(0.34, 1.28, 0.64, 1); --jm-dur: 0.68s; }

/* Kinder vor Aktivierung versteckt ─────────────────────────────── */
.jm-theater-item:not(.jm-active) > * {
  opacity: 0;
}

/* ── 5. STAGGER nth-child: jedes Kind fliegt einzeln rein ──────────
   Richtungs-Schema: Links / Unten / Rechts / Links / Unten / Rechts
   ui-ux-pro-max §7: "Animation duration 150–300ms"
   (wir nutzen 680ms — gerechtfertigt für cinematic landing page)  */
.jm-theater-item.jm-active > *:nth-child(1) {
  animation: jmFlyLeft  var(--jm-dur) var(--jm-spring)   0ms forwards;
}
.jm-theater-item.jm-active > *:nth-child(2) {
  animation: jmFlyUp    var(--jm-dur) var(--jm-spring) 115ms forwards;
}
.jm-theater-item.jm-active > *:nth-child(3) {
  animation: jmFlyRight var(--jm-dur) var(--jm-spring) 230ms forwards;
}
.jm-theater-item.jm-active > *:nth-child(4) {
  animation: jmFlyLeft  var(--jm-dur) var(--jm-spring) 345ms forwards;
}
.jm-theater-item.jm-active > *:nth-child(5) {
  animation: jmFlyUp    var(--jm-dur) var(--jm-spring) 460ms forwards;
}
.jm-theater-item.jm-active > *:nth-child(n+6) {
  animation: jmFlyRight var(--jm-dur) var(--jm-spring) 555ms forwards;
}

/* Past: schnell raus, kein Delay, keine Richtung ───────────────── */
.jm-theater-item.jm-past > * {
  opacity: 0 !important;
  transform: translateY(-14px) !important;
  transition: opacity 0.27s ease, transform 0.27s ease !important;
  animation: none !important;
}

/* Rev.30 (2026-04-21) Smooth Block-Reveal fuer Pre-Upload-Grids ──────
   UX-Spec aus design:design-critique Prinzipien:
     - Monolithischer Reveal (kein multi-direction Stagger) → keine Shake-
       Wahrnehmung, Aufmerksamkeit bleibt auf Content.
     - Easing easeOutQuint cubic-bezier(0.22,1,0.36,1) → simuliert
       "aus der Tiefe reingezogen" (Start mit Tempo, sanfte Landung).
     - Duration 1s fuer grosse Content-Bloecke.
     - translateY 80px → deutlich von unten, noch natuerlich.
     - prefers-reduced-motion: Animation off, Content sofort sichtbar.
   Target: Sections mit zusaetzlicher Klasse .jm-smooth-in.
   Kinder-Stagger (jmFlyLeft/Up/Right) wird fuer diese Sections deaktiviert. */
.jm-smooth-in {
  opacity: 0;
  transform: translateY(80px);
  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.jm-smooth-in.jm-active {
  opacity: 1;
  transform: translateY(0);
}
/* Kinder sind bei smooth-in-Sections IMMER sichtbar relativ zur Section -- der
   Reveal passiert am Section-Level, nicht per Kind. Ueberschreibt Stagger UND
   den .jm-past-Zuck (translateY(-14px)) der urspruenglichen .jm-theater-item-Regel. */
.jm-smooth-in > *,
.jm-smooth-in:not(.jm-active) > *,
.jm-smooth-in.jm-active > *,
.jm-smooth-in.jm-past > * {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
/* Rev.31 (2026-04-21) Past-State fuer smooth-in-Sections: Section selbst fadet
   sanft aus (kein Zuck der Kinder). Schnelleres easing als beim reveal (user
   scrollt weg -- nicht warten lassen). */
.jm-smooth-in.jm-past {
  opacity: 0;
  transform: translateY(0);
  transition:
    opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .jm-smooth-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .jm-smooth-in.jm-past {
    opacity: 0 !important;
  }
}

/* Rev.32 (2026-04-21) Compact-Slot fuer Empty-State (oder andere kurze Grids).
   Normale .jm-slot ist 100vh hoch (Scroll-Theater-Stage fuer sticky-items).
   .jm-slot-compact: slot schrumpft auf Content-Hoehe, sticky wird deaktiviert.
   Empty-State sitzt dann direkt unter Upload-Form ohne Leerraum. */
.jm-slot-compact {
  height: auto !important;
  min-height: auto !important;
}
.jm-slot-compact .jm-theater-item {
  position: static !important;
  top: auto !important;
  transform: none !important;
}
/* jm-smooth-in soll auch hier greifen: opacity-Shift erhaelt Animation. */
.jm-slot-compact .jm-theater-item.jm-smooth-in {
  transform: translateY(80px);
}
.jm-slot-compact .jm-theater-item.jm-smooth-in.jm-active {
  transform: translateY(0);
}

/* ── 6. MOBILE-FIRST BASE (375px) ──────────────────────────────────
   ui-ux-pro-max §5: "Mobile-first breakpoints"
   ui-ux-pro-max §2: "Touch targets min 44×44px"                   */

/* Stagger auf Mobile: NUR von unten (kein translateX → kein overflow) */
.jm-theater-item.jm-active > *:nth-child(1),
.jm-theater-item.jm-active > *:nth-child(2),
.jm-theater-item.jm-active > *:nth-child(3),
.jm-theater-item.jm-active > *:nth-child(4),
.jm-theater-item.jm-active > *:nth-child(5),
.jm-theater-item.jm-active > *:nth-child(n+6) {
  animation-name: jmFlyUp;
}
/* Delays halbiert für Mobile (schnellere Wahrnehmung) */
.jm-theater-item.jm-active > *:nth-child(1)  { animation-delay:   0ms; }
.jm-theater-item.jm-active > *:nth-child(2)  { animation-delay:  75ms; }
.jm-theater-item.jm-active > *:nth-child(3)  { animation-delay: 150ms; }
.jm-theater-item.jm-active > *:nth-child(4)  { animation-delay: 225ms; }
.jm-theater-item.jm-active > *:nth-child(5)  { animation-delay: 300ms; }
.jm-theater-item.jm-active > *:nth-child(n+6){ animation-delay: 360ms; }

/* Flag-Stage Mobile-Base entfernt 2026-04-20 P1.1 */

/* Video kleiner auf Mobile */
#wSpacer        { height: auto !important; }
.jm-video-buffer{ height: 32vh !important; }

/* Glassmorphism auf Mobile: weniger Blur (Performance §3) */
.jm-slot section.jr-glow-red,
.jm-slot section.jr-glow-gold,
.jm-slot section.jr-glow-green {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Touch-Targets: min 44×44px (ui-ux-pro-max §2 CRITICAL) */
.jm-btn-upload { min-height: 52px !important; }
.jm-input      { min-height: 48px !important; }
.jm-file-zone  { min-height: 80px !important; }

/* Hero padding kleiner auf Mobile */
#flagSection { padding-bottom: 3vh !important; }

/* ── 7. TABLET: 768px ───────────────────────────────────────────────
   Direktionale Stagger reaktivieren, Blur erhöhen                  */
@media (min-width: 768px) {
  /* Richtungen wieder aktivieren */
  .jm-theater-item.jm-active > *:nth-child(1) {
    animation-name: jmFlyLeft;
    animation-delay:   0ms;
  }
  .jm-theater-item.jm-active > *:nth-child(2) {
    animation-name: jmFlyUp;
    animation-delay: 115ms;
  }
  .jm-theater-item.jm-active > *:nth-child(3) {
    animation-name: jmFlyRight;
    animation-delay: 230ms;
  }
  .jm-theater-item.jm-active > *:nth-child(4) {
    animation-name: jmFlyLeft;
    animation-delay: 345ms;
  }
  .jm-theater-item.jm-active > *:nth-child(5) {
    animation-name: jmFlyUp;
    animation-delay: 460ms;
  }
  .jm-theater-item.jm-active > *:nth-child(n+6) {
    animation-name: jmFlyRight;
    animation-delay: 555ms;
  }

  #wSpacer         { height: auto !important; }
  .jm-video-buffer { height: 45vh !important; }

  .jm-slot section.jr-glow-red,
  .jm-slot section.jr-glow-gold,
  .jm-slot section.jr-glow-green {
    backdrop-filter: blur(14px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
  }
  #flagSection { padding-bottom: 5vh !important; }
}

/* ── 8. DESKTOP: 1024px ─────────────────────────────────────────── */
@media (min-width: 1024px) {
  #wSpacer         { height: auto !important; }
  .jm-video-buffer { height: 55vh !important; }

  .jm-slot section.jr-glow-red,
  .jm-slot section.jr-glow-gold,
  .jm-slot section.jr-glow-green {
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  }
  #flagSection { padding-bottom: 6vh !important; }
}

/* ── 9. WIDE DESKTOP: 1440px ───────────────────────────────────── */
@media (min-width: 1440px) {
  /* Letztes Kind nie länger als 580ms warten (UX-Regel: max 700ms) */
  .jm-theater-item.jm-active > *:nth-child(n+6) {
    animation-delay: 580ms !important;
  }
}

/* ── 10. prefers-reduced-motion (CRITICAL: ui-ux-pro-max §1+§7) ───
   Alle Animationen deaktivieren, sofort sichtbar                   */
@media (prefers-reduced-motion: reduce) {
  #flagSection,
  #flagSection::after,
  .jm-theater-item:not(.jm-active) > *,
  .jm-theater-item.jm-active > *,
  .jm-theater-item.jm-past > *,
  .jr-fly-in,
  .jr-reveal,
  .jm-fadein-headline,
  .jm-fadein-card,
  .jm-fadein {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .jm-theater-item:not(.jm-active) > * { opacity: 1 !important; }
  .jm-theater-item.jm-past > * {
    opacity: 0 !important;
    transform: none !important;
  }
  /* Flag-Blend-Override entfernt 2026-04-20 P1.1 */
}
/* ╚══════════════════════════════════════════════════════════════════╝ */


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  P2.2 Hero-Neugestaltung · Revision 6 · 2026-04-20               ║
   ║  Skills: ui-ux-pro-max, ux-designer, frontend-design             ║
   ║  Rasta R→G→G Gradient auf Titel-Akzent, clamp() Mobile-First.    ║
   ║  Vollständige Mobile-Breakpoints folgen in P4.                   ║
   ╚══════════════════════════════════════════════════════════════════╝ */

.jm-hero-inner {
  position: relative;
  z-index: 20;  /* Rev.40.1: Skala-Update (war 3), liegt sauber ueber flagSection:10 */
  /* Rev.23 (2026-04-21): space-between -- above oben, below unten, Flagge in der Mitte. */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 860px;
  /* Rev.23 (2026-04-21): min-height 100% -- inner fuellt container exakt,
     space-between kann above/below an die Kanten druecken. */
  min-height: 100%;
  /* Rev.22: Top-Padding reduziert damit Block dichter an Hero-Oberkante sitzt. */
  padding: clamp(12px, 2vw, 24px) clamp(20px, 4vw, 48px);
  text-align: center;
  opacity: 0;
  animation: jmFadeIn 1.2s ease-out 0.2s forwards;
}
.jm-hero-above,
.jm-hero-below {
  width: 100%;
  text-align: center;
  /* Rev.40 (2026-04-22) Phase 3b: sanfte opacity-Transition fuer scroll-
     linked Fade am Seiten-Ende (JS setzt style.opacity in jamaika.php).
     Rev.40.3: will-change entfernt — Perf-Audit zeigte 4/60 bad frames am
     Seiten-Ende (22ms p95). Dauerhaftes will-change auf sichtbarem Element
     ist Browser-Hint-Budget-Smell; Browser compositort Opacity-only-
     Transitions automatisch. */
  transition: opacity 0.3s ease-out;
}
.jm-hero-above {
  margin-bottom: 0;
  /* Rev.24 (2026-04-21) Desktop Vertikal-Shift nach Dennis-Mass: 2cm hoch. */
  transform: translateY(-3cm);
}
.jm-hero-below {
  /* Rev.20: H1 sitzt im below. padding-bottom fuer Abstand zum Scroll-Cue.
     margin-top entfaellt, space-between regelt Vertikal-Position. */
  padding-bottom: clamp(8px, 1.5vw, 16px);
  /* Rev.24: Desktop One-Love 8cm hoch. Rev.27: -6cm. Rev.28: -9cm (deutlich hoeher). */
  transform: translateY(-12cm);
}

.jm-hero-label {
  font-family: 'Courier New', monospace;
  /* Rev. 15 (2026-04-21) Kicker Contrast+Spacing (Dennis Visual-Feedback #3):
     Problem: Kicker "PROJECT JAMAICA" geht auf dem Wolken-Frame des scroll-scrubbed
     Storm-Videos unter UND der H1 "One Love." klebt optisch am Flaggen-Moment.
     Fix (Variante A „Gold+Shadow stärker", CSS-only, minimal-invasiv):
       — font-size   clamp(16,3vw,22)       -> clamp(19,3.4vw,26)       (~+18% Top-End)
       — color       #c8922a                -> #E8B94E                   (wärmeres Gold, AA-tauglich)
       — font-weight 600                    -> 700                       (klarere Kantenkontur)
       — margin-top  -32px                  -> -32px                     (Rev.14b Pull-Up bleibt)
       — margin-bot  clamp(18,2.4vw,32)     -> clamp(44,4.5vw,72)        (~1.5-2 Zeilen mehr Luft zu H1)
       — text-shadow single                 -> dual (Inner-Outline + Soft-Halo)
     NICHT die Rückgängigmachung von Rev.14b: kombiniert Pull-Up (margin-top:-32) MIT
     wiedervergrößerten Bottom-Spacing, sodass der H1 nach unten flowt (weg vom
     Flaggen-Moment) UND der Kicker oben "schwebt".
     Keine Markup-Änderung. Cache-Buster via filemtime() in jamaika.php Z.433 auto. */
  /* Rev.18 (2026-04-21): Kicker bedeutend groesser -- clamp(19,3.4vw,26) -> clamp(30,5vw,42) (~+60% Top-End). */
  font-size: clamp(30px, 5vw, 42px);
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #E8B94E;
  opacity: 1;
  font-weight: 700;
  /* Rev.23 (2026-04-21): margin-top -32px (Rev.14b-Hack) ENTFERNT -- zog Kicker
     ueber Container-Top raus, landete in Flaggen-Zone. Jetzt 0. */
  margin-top: 0;
  /* Rev.19: margin-bottom klein -- Tagline direkt drunter, nicht H1. */
  margin-bottom: clamp(14px, 1.8vw, 22px);
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.9),
    0 0 2px rgba(0, 0, 0, 0.75),
    0 0 12px rgba(0, 0, 0, 0.55);
  animation: jmFadeInDown 0.8s ease-out 0.3s both;
}

.jm-hero-title {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(44px, 8vw, 96px);
  line-height: 1.1; /* Rev.7: von 1.0 auf 1.1 — verhindert Descender-/Italic-Clipping */
  color: #f0e6d0;
  margin: 0 0 clamp(14px, 2vw, 28px) 0;
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.9); /* Rev.7: stärker für Kontrast ohne clouds-bg */
  animation: jmFadeInUp 0.9s ease-out 0.45s both;
  overflow: visible; /* Rev.7: kein unerwartetes Clipping */
}

.jm-hero-title .jm-hero-w1 {
  color: #f0e6d0;
}

.jm-hero-title .jm-hero-w2 {
  /* Rev.7: filter: drop-shadow entfernt (erzeugte Render-Clipping auf Italic-Descender).
     display:inline-block + padding-right expandiert die background-clip-Paintbox
     sodass der letzte Italic-Glyph nicht mehr rechts abgeschnitten wird. */
  display: inline-block;
  padding-right: 0.14em;
  background: linear-gradient(90deg, #e63946 0%, #f4a01c 50%, #2d9e4f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}

.jm-hero-title .jm-hero-w-dot {
  color: #f4a01c;
  text-shadow: 0 0 18px rgba(244, 160, 28, 0.45); /* Rev.7: Dot-Glow statt Filter-Blur */
}

.jm-hero-tagline {
  font-family: 'DM Sans', sans-serif;
  /* Rev.18 (2026-04-21): Tagline wieder klein gezogen -- clamp(15,1.9vw,19) -> clamp(12,1.3vw,14).
     Der kraeftige Kicker uebernimmt jetzt die Aufmerksamkeit, Tagline ist nur Kontext. */
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.6;
  /* Rev.16: Color + Shadow auf Kicker-Gold angeglichen. */
  /* Rev.20: Tagline in above neben Kicker. */
  /* Rev.29 (2026-04-21): margin-top negativ statt transform -- umgeht Kollision
     mit jmFadeInUp-Animation, die den transform-Wert auf 0 zurueckfaehrt. */
  color: #E8B94E;
  max-width: 540px;
  margin: -1cm auto 0;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.9),
    0 0 2px rgba(0, 0, 0, 0.75),
    0 0 12px rgba(0, 0, 0, 0.55);
  animation: jmFadeInUp 0.9s ease-out 0.6s both;
}

/* Rev.7 Update (Tagline-Kürzung): Echo-Klasse entfernt, da „from grower to
   grower." rausgeflogen ist und der Community-Satz jetzt alleinige primäre
   Tagline ist. Einzeilige Tagline = klareres Statement. */

.jm-hero-scroll-cue {
  position: absolute;
  bottom: clamp(14px, 3vw, 28px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #c8922a;
  text-decoration: none;
  background: rgba(10, 10, 10, 0.35);
  border: 1px solid rgba(200, 146, 42, 0.25);
  opacity: 0;
  animation:
    jmFadeIn 1s ease-out 0.9s forwards,
    jmScrollCueBob 2.4s ease-in-out 1.5s infinite;
  z-index: 3;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.jm-hero-scroll-cue svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jm-hero-scroll-cue:hover {
  color: #f4a01c;
  border-color: rgba(244, 160, 28, 0.55);
  background: rgba(20, 15, 5, 0.55);
}

.jm-hero-scroll-cue:focus-visible {
  outline: 2px solid #f4a01c;
  outline-offset: 3px;
}

@keyframes jmScrollCueBob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}

/* Rev.10: Neon-Pulse-Animation für jm-btn-upload (Rasta-Layer-Glow breathing).
   Ersetzt generisches glowPulse-Keyframe für Jamaika-spezifische Button-Variante. */
@keyframes jmBtnNeonPulse {
  /* Rev.10b: Shadow-Layer-Reihenfolge ROT → GOLD → GRÜN laut Constraint G.3 */
  0%, 100% {
    box-shadow:
      0 0 14px rgba(230, 57, 70, 0.30),
      0 0 28px rgba(244, 160, 28, 0.28),
      0 0 50px rgba(45, 158, 79, 0.15);
  }
  50% {
    box-shadow:
      0 0 22px rgba(230, 57, 70, 0.48),
      0 0 40px rgba(244, 160, 28, 0.42),
      0 0 64px rgba(45, 158, 79, 0.22);
  }
}

/* Rev.10b: Shake-Animation bei invalid-Submit (bilingual form feedback) */
@keyframes jmFormShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
.jm-form-shake { animation: jmFormShake 0.45s ease-in-out; }
.jm-input.jm-invalid,
.jm-select.jm-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

/* Mobile: reduzierter Glow-Stack für GPU-Entlastung */
@media (max-width: 480px) {
  .jm-btn-upload {
    box-shadow:
      0 0 10px rgba(244, 160, 28, 0.35),
      0 0 20px rgba(230, 57, 70, 0.22) !important;
  }
  .jm-btn-upload:hover {
    box-shadow:
      0 0 16px rgba(244, 160, 28, 0.55),
      0 0 28px rgba(230, 57, 70, 0.35) !important;
  }
}

/* Reduced Motion: kein Pulse-Breathing */
@media (prefers-reduced-motion: reduce) {
  .jm-btn-upload { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .jm-hero-inner,
  .jm-hero-label,
  .jm-hero-title,
  .jm-hero-tagline,
  .jm-hero-scroll-cue {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .jm-hero-scroll-cue { transform: translateX(-50%) !important; }
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  P4 Mobile-CSS-Block · Revision 7 · 2026-04-20                   ║
   ║  Skills: ui-ux-pro-max, ux-designer, frontend-design             ║
   ║  Top-Priorität (Constraint G.2). Touch-Targets ≥ 44×44, Focus-   ║
   ║  visible, Mobile-Hero-Tuning, Event-Delegation-Klassen.          ║
   ║  Slim-Header bleibt bewusst (Constraint G.7). Keine Übernahme    ║
   ║  von Standard-BudBorn-Chrome-Mobile-Pattern.                     ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── P4.1 Breakpoint-Strategie ──────────────────────────────────────
   Base                0–480px   Single-Column, Typo-Skaling via clamp
   Small Phone/Tablet  481–768   2-Column wo sinnvoll
   Desktop             769–1023  Volle Layouts, Glassmorphism voll
   Wide Desktop       1024–1439  Großzügigere Paddings
   Ultra-Wide         1440+      Max-Width-Caps, kein Stretch
   Vorhandene Breakpoints in Block 1-4 bleiben; dieser P4-Block setzt
   nur ergänzende/präzisierende Regeln für die neuen Rev.7-Klassen.  */

/* ── P4.2 Hero auf Mobile: Padding-Top reduzieren damit Title passt */
@media (max-width: 768px) {
  #flagSection {
    padding-top: clamp(8vh, 12vh, 16vh) !important;
  }
  .jm-hero-title { font-size: clamp(36px, 10vw, 56px) !important; }
  /* Rev.20: Mobile Tagline -- margin-bottom aus Rev.19 wieder weg (H1 im below). */
  /* Rev.41.1 Dennis: Tagline war zu dicht am Kicker (-0.6cm -> 0.3cm).
     Rev.51 (2026-04-22) REVERT Portrait-Change von Rev.50: Dennis bestaetigt
     dass die Ausgangsposition (0.3cm) korrekt war. Mein -0.4cm-Aenderung war
     falsch, hat Tagline ueber Kicker gezogen. Zurueck auf 0.3cm. */
  .jm-hero-tagline { font-size: clamp(12px, 3.3vw, 15px) !important; margin-top: 0.3cm !important; }
  /* Rev. 15 (2026-04-21) Kicker Mobile Scale-Up (Dennis Visual-Feedback #3):
     Folgt Desktop-Faktor aus Basis-Block:
       — font-size   clamp(12,3vw,15)    -> clamp(14,3.4vw,18)   (+18% Top-End)
       — margin-bot  clamp(14,2.4vw,20)  -> clamp(28,4vw,44)     (~1.5-2 Zeilen mehr)
     letter-spacing 4px + margin-top -20px bleiben. Color/Weight/Shadow erben aus Basis. */
  .jm-hero-label {
    /* Rev.18: Mobile Kicker +60% -- clamp(14,3.4vw,18) -> clamp(20,4.5vw,28). */
    font-size: clamp(20px, 4.5vw, 28px) !important;
    letter-spacing: 4px !important;
    /* Rev.23: margin-top Mobile -20 -> 0 (kein Container-Ueberstand). */
    margin-top: 0 !important;
    /* Rev.19: Mobile Tagline direkt unter Kicker. */
    margin-bottom: clamp(10px, 1.8vw, 16px) !important;
  }
  /* Rev.24: Mobile translateY-Werte (60% Desktop -- kleinere Hero). */
  .jm-hero-above { transform: translateY(-1.8cm) !important; }
  /* Rev.55 (2026-04-22) Dennis "one love muss insgesamt runter (handyversion)":
     Portrait One Love wieder tiefer. -8.7cm (Rev.54) -> -7cm (0.3cm unter
     urspruenglicher -7.2cm Basis, bewusst etwas tiefer als Original). */
  .jm-hero-below { transform: translateY(-7cm) !important; }
}
@media (max-width: 480px) {
  #flagSection {
    padding-top: clamp(6vh, 10vh, 12vh) !important;
  }
  .jm-hero-title { font-size: clamp(30px, 11vw, 44px) !important; }
  .jm-hero-tagline { line-height: 1.5 !important; }
  .jm-hero-scroll-cue { bottom: 12px; }
}

/* ── P4.3 Touch-Targets für neue P2.6 Event-Delegation-Klassen ───── */
@media (max-width: 768px) {
  /* Emoji-Items: ≥44×44 min, spacing für fat-fingers */
  .jm-emoji-item {
    display: inline-block !important;
    min-width: 44px !important;
    min-height: 44px !important;
    text-align: center !important;
    line-height: 40px !important;
    padding: 0 !important;
    margin: 2px !important;
    font-size: 24px !important;
  }
  #emojiPicker {
    max-width: 100% !important;
    line-height: 1.4 !important;
  }
  /* Delete-Upload-Link: ≥40px Hit-Box + ausreichend Padding */
  .jm-delete-upload {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 40px !important;
    padding: 8px 14px !important;
  }
  /* Upload-Form-Grid stackt bereits in Block 2; zusätzlich: */
  #jmUploadForm > div[style*="grid-template-columns"] {
    display: block !important;
  }
  #jmUploadForm > div[style*="grid-template-columns"] > .jm-form-row {
    margin-bottom: 16px !important;
  }
}

/* ── P4.4 Focus-Visible Keyboard-Nav (A11y für alle neuen Klassen) */
.jm-emoji-item:focus-visible,
.jm-delete-upload:focus-visible,
.jm-hero-scroll-cue:focus-visible,
#jmWaitlistForm input:focus-visible,
#jmWaitlistForm select:focus-visible,
#jmWaitlistForm textarea:focus-visible,
#jmWaitlistForm button:focus-visible {
  outline: 2px solid #f4a01c !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* ── P4.5 Scroll-Performance: will-change gezielt + Mobile-backdrop-
   filter-Reduktion wegen GPU-Kosten auf Mid-Range-Androiden.
   Bereits in Block 2/4 Mobile-@media-blocks teilweise gesetzt,
   hier konsolidiert für P2.6-Hover-Video-Cards.                    */
.jm-upload-video-hover {
  will-change: auto; /* Default, play-on-hover ist nur kurz aktiv */
}
@media (max-width: 480px) {
  /* Mobile: Video-Hover-Play macht wenig Sinn (kein Hover-State) —
     Browser rendern auf Touch-Tap-Play einmal an, ok so. */
}

/* ── P4.6 Waitlist-Form Mobile Stacking (präzisiert bestehendes
   Block-2 Pattern für die merged Section in P2.5)                 */
@media (max-width: 640px) {
  #jmWaitlistForm .jm-input,
  #jmWaitlistForm .jm-select {
    min-height: 48px;
    font-size: 16px; /* ≥16px verhindert iOS-Zoom-on-Focus */
  }
  #jmWaitlistForm button.jm-btn-upload {
    width: 100%;
    min-height: 52px;
  }
  #jm-waitlist-section {
    padding: 60px 20px !important;
  }
}

/* ── P4.7 Hero auf sehr kleinen Phones (≤360px): Scroll-Cue
   nicht mehr als Circle, sondern als dezenter Text-Hint.        */
@media (max-width: 360px) {
  .jm-hero-scroll-cue {
    width: 40px;
    height: 40px;
    bottom: 10px;
  }
  .jm-hero-scroll-cue svg {
    width: 18px;
    height: 18px;
  }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  Rev. 12 (2026-04-20) Pseudo-Footer                              ║
   ║  Dennis-Brief: "breiter und flacher, Kante-zu-Kante,             ║
   ║  keine Card-Optik mehr." 3-Column-Layout (Badge | Quote/         ║
   ║  Copyright | Contact), Rasta-Accent border-top ersetzt           ║
   ║  den vollen Green-Glow-Rand. Alle vormaligen Inline-Styles       ║
   ║  des BudGuard-Section aus jamaika.php hierher extrahiert.        ║
   ╚══════════════════════════════════════════════════════════════════╝ */
/* Rev.35: Custom-Footer entfernt, Plattform-Footer uebernimmt. */
body:has(#flagSection) {
  overscroll-behavior-y: none;
}

/* Rev.37 (2026-04-21) Fix 1: .page-content aus style.css hatte padding-bottom
   60px (Mobile 100px) — das war die grosse schwarze Zeile. */
body:has(#flagSection) .page-content {
  padding-bottom: 0 !important;
}
/* Rev.37 Fix 2: .site-footer hatte padding:24px 0 + border-top — der padding-
   top erzeugte eine ~5mm schwarze Zeile oberhalb des Copyright-Texts. Auf
   Jamaika flach gestellt damit der Plattform-Footer direkt an den
   Final-Claim andockt. Border-top weg (wir haben schon die Rasta-Linie am
   Final-Claim-Top als optischer Separator). */
body:has(#flagSection) .site-footer {
  padding-top: 12px !important;
  border-top: none !important;
  margin-top: 0 !important;
  /* Rev.40 (2026-04-22) Phase 3b Footer-Backdrop: erhoehter z-index + Blur-
     Background damit der Plattform-Footer sauber ueber der fixed flagSection
     liegt und Lesbarkeit gegen den Rasta-Gradient-Background sichergestellt
     ist. Ergaenzung zu Option A (Hero-Fade via JS) — cosmetische Abdeckung
     am unteren Viewport-Rand. */
  position: relative;
  z-index: 40;  /* Rev.40.1: Skala-Update (war 10) — oberste Jamaika-Layer */
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Rev.36 (2026-04-21) Final-Claim -- Abschluss-Block oberhalb Plattform-Footer.
   NICHT jr-glow-* / jr-section-glow um die Rasta-Rotation der Upload-Cards
   nicht zu stoeren. Eigener Namespace .jm-final-claim.
   UX-Spec: Playfair Italic + Gold #E8B94E = Hero-Echo; Signatur in Kicker-
   Typografie; dezente Rasta-Linie oben als Brand-Klammer. */
.jm-final-claim {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  /* Rev.40.2 (2026-04-22) Dennis-Feedback visual:
     (1) Rasta-Linie oben entfernt — war border-top + border-image gradient,
         hat optisch als horizontale Linie quer durchs Palmen-Bild gewirkt.
     (2) padding-top deutlich erhoeht (war clamp(32,5vw,64)), damit das Gold-
         Zitat tiefer sitzt und nicht direkt unter der Flagge klebt.
     Rev.40.3: Nochmal ~1cm tiefer (Dennis-Feedback zwei). */
  padding: clamp(100px, 13vw, 180px) clamp(20px, 4vw, 40px) clamp(24px, 3vw, 40px);
  text-align: center;
}
.jm-final-claim-quote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(17px, 2.3vw, 26px);
  line-height: 1.5;
  color: #E8B94E;
  margin: 0 0 18px;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.85),
    0 0 12px rgba(0, 0, 0, 0.45);
}
.jm-final-claim-signature {
  font-family: 'Courier New', monospace;
  /* Rev.40.3 (2026-04-22) Dennis-Feedback: dominanter. War font-size
     clamp(10,1vw,12), color #c8922a (dunkles Gold), opacity 0.85 — ging
     optisch unter. Jetzt groesser, bold, helles Gold #E8B94E, voll deckend. */
  font-size: clamp(12px, 1.2vw, 15px);
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #E8B94E;
  margin: 0;
  opacity: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
@media (max-width: 768px) {
  .jm-final-claim { padding: 72px 20px 24px; }  /* Rev.40.2: war 36px top */
  .jm-final-claim-quote { font-size: clamp(15px, 4vw, 20px); }
  .jm-final-claim-signature { letter-spacing: 4px; }
}
@media (max-width: 480px) {
  .jm-final-claim { padding: 56px 16px 20px; }  /* Rev.40.2: war 28px top */
  .jm-final-claim-quote { font-size: clamp(14px, 4.5vw, 17px); }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  P4 Mobile-Polish · Revision 8 · 2026-04-20                      ║
   ║  Zielgerichtete Mobile-Verbesserungen (zusätzlich zum P4-Block   ║
   ║  ab Z.1152). Fokus: Touch-Targets ≥44×44, Hero sub-380px,        ║
   ║  Neon-Glow-GPU-Reduktion, Mini-Chevron-Kompakt-Mode.             ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* P4.8 Hero sub-380px — aggressiveres clamp-floor damit Kicker/Title/Tagline
   sich nicht mehr überlappen oder über Hero-Ränder laufen.
   Rev. 14b: Kicker-Mindestgröße 11px + letter-spacing 3px + margin-top -14px.
   Rev. 15 (2026-04-21): Kicker-Mindestgröße 11 -> 13px (+18% folgt Desktop-Faktor),
     letter-spacing 3px bleibt, margin-top -14px bleibt (Pull-Up unverändert),
     margin-bottom 14 -> 22px (mehr Luft zu H1 auch auf kleinsten Phones). */
@media (max-width: 380px) {
  .jm-hero-label {
    /* Rev.18: Sub-380 Kicker 13 -> 18. Rev.27: 18 -> 24 (dominanter). */
    font-size: 24px !important;
    letter-spacing: 3px !important;
    /* Rev.23: margin-top Sub-380 -14 -> 0. */
    margin-top: 0 !important;
    /* Rev.19: Sub-380 Kicker mb klein. */
    margin-bottom: 10px !important;
    padding: 0 4px;
  }
  /* Rev.24: Sub-380 translateY-Werte (40% Desktop). */
  .jm-hero-above { transform: translateY(-1.2cm) !important; }
  .jm-hero-below { transform: translateY(-4.8cm) !important; }
  .jm-hero-title {
    font-size: clamp(26px, 12vw, 36px) !important;
    line-height: 1.05 !important;
    padding: 0 4px;
  }
  .jm-hero-tagline {
    /* Rev.20: Sub-380 Tagline. Rev.27: 11->13. Rev.29: margin-top statt transform. */
    font-size: 13px !important;
    margin-top: -0.4cm !important;
    line-height: 1.45 !important;
    padding: 0 8px;
    margin: 0 auto;
  }
  #flagSection {
    padding-top: 14vh !important;
    padding-bottom: 4vh !important;
  }
  /* Scroll-Cue noch kompakter — Tap-Target bleibt 40×40 aus P4.7 */
}

/* P4.9 Touch-Targets ≥44×44 für alle interaktiven Jamaika-Elemente im
   Slim-Header + Chevrons auf Mobile (Apple A11y Minimum). */
@media (max-width: 768px) {
  /* Lang-Switch-Buttons vergrößern auf Jamaika-Kontext */
  body:has(#flagSection) .lang-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
  body:has(#flagSection) .lang-switch {
    padding: 4px;
    gap: 4px;
  }
  /* Back-Link-Container: Tap-Area garantieren (Gradient-Text bleibt klein,
     aber klickbarer Bereich ≥44px via min-height + padding). */
  .jm-back-to-platform {
    min-height: 44px;
    min-width: 44px;
    align-items: center;
    justify-content: center;
  }
  /* Mini-Chevron ist schon 44px — aber auf Phone noch kleiner erlauben
     (Rev. 10e ist auf 40px in @media 480) — OK wie es ist. */
  /* Hero-Chevron: bestehende Regel Z.1379 setzt 40×40 unter 360px. */
}

/* P4.10 Neon-Glow GPU-Reduktion Mobile — <768px reduzieren wir die
   Multi-Layer-Box-Shadows auf jm-btn-upload und section.jr-glow-*
   auf 1-2 Layer, um GPU-Layer-Compositing-Load auf Low/Mid-Range
   Androiden zu senken. Visuell weniger dominant aber immer noch Rasta-
   Neon. Animation jmBtnNeonPulse bleibt an (pulsiert nur einen Layer). */
@media (max-width: 768px) {
  .jm-btn-upload {
    box-shadow:
      0 0 14px rgba(244, 160, 28, 0.35),
      0 0 26px rgba(45, 158, 79, 0.14) !important;
  }
  .jm-btn-upload:hover,
  .jm-btn-upload:focus-visible {
    box-shadow:
      0 0 18px rgba(244, 160, 28, 0.5),
      0 0 32px rgba(45, 158, 79, 0.22) !important;
  }
  section.jr-glow-red,
  section.jr-glow-gold,
  section.jr-glow-green {
    box-shadow: 0 0 14px rgba(244,160,28,0.2) !important;
    border-width: 2px !important;
  }
  /* Mini-Chevron Glow weniger dominant */
  .jm-jump-mini .jm-scroll-cue-svg {
    animation-duration: 5.5s !important; /* langsamer = weniger Repaints */
  }
}

/* P4.11 Grid-Cards auf Mobile max 1-Column (bereits via
   minmax(220px,1fr) mit 1fr Fallback, aber explizit forcen auf ≤480px
   damit Cards sauber stacken ohne zu schmal zu werden). */
@media (max-width: 480px) {
  .jm-upload-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    margin-top: 24px !important;
  }
}

/* P4.12 Form-Field Tastatur-Auto-Scroll-Fix (iOS):
   Wenn User in ein Input im Upload-/Waitlist-Form tippt, iOS scrollt
   oft den Header über das Feld. scroll-margin-top hilft hier ebenfalls. */
@media (max-width: 768px) {
  #jmUploadForm input,
  #jmUploadForm select,
  #jmUploadForm textarea,
  #jmWaitlistForm input,
  #jmWaitlistForm select,
  #jmWaitlistForm textarea {
    scroll-margin-top: 90px;
  }
}

/* P4.13 Mini-Chevron: sub-380px Tap-Target bei 40x40 (WCAG-A11y-Konsistenz
   mit Hero-Scroll-Cue). Nur Offset-Feintuning. Vorher 36x36 verletzte A11y. */
@media (max-width: 380px) {
  .jm-jump-mini {
    width: 40px;
    height: 40px;
    right: 12px;
    bottom: 12px;
  }
  .jm-jump-mini .jm-scroll-cue-svg {
    width: 20px;
    height: 20px;
  }
}

/* -------------------------------------------------------------------
   Rev.40 (2026-04-22) Phase 3b - Hero-Fade + Spacer-Clamp + A11y
   ------------------------------------------------------------------- */

/* Spacer: clamp() statt reinem vh (Cross-Device-Stabilitaet). Inline-
   Style in jamaika.php Z.869 wurde entfernt, damit diese Rule greift. */
.jm-spacer {
  height: clamp(140px, 24vh, 320px);
}
@media (max-width: 640px) {
  .jm-spacer {
    height: 18vh;
  }
}

/* Reduced-Motion-Override fuer Hero-Fade (Defense-in-Depth - das JS
   selbst bricht bei prefers-reduced-motion am Anfang ab). */
@media (prefers-reduced-motion: reduce) {
  .jm-hero-above,
  .jm-hero-below {
    transition: none !important;
    will-change: auto !important;
  }
}



/* -------------------------------------------------------------------
   Rev.40.1 (2026-04-22) Phase 3b Follow-up: Backdrop-Fallbacks +
   Mobile-Blur-Tuning. Empfehlungen: ui-ux-pro-max + ux-designer.
   ------------------------------------------------------------------- */

/* Fallback wenn backdrop-filter nicht supported (Firefox <103, Safari <9). */
@supports not ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
  body:has(#flagSection) .site-footer {
    background: rgba(0, 0, 0, 0.92);
  }
}

/* User-Preference: reduzierte Transparenz - solid Footer ohne Blur. */
@media (prefers-reduced-transparency: reduce) {
  body:has(#flagSection) .site-footer {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, 0.95);
  }
}

/* Mobile: Blur reduzieren (GPU-Budget auf Mid-Tier-Devices, z.B. Snapdragon 6xx). */
@media (max-width: 640px) {
  body:has(#flagSection) .site-footer {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}


/* -------------------------------------------------------------------
   Rev.41 (2026-04-22) Phase 3b.4 - Mobile Issues Fix
   ------------------------------------------------------------------- */

/* Fix 1: Navbar-Gap — auf Mobile ueberlagert die fixed Navbar (height 60
   z-index 1000) den Hero-Content beim Pageload, bevor der User gescrollt
   hat. padding-top auf .jm-hero-inner schiebt den Hero unter die Navbar. */
@media (max-width: 768px) {
  .jm-hero-inner {
    padding-top: calc(var(--nav-h, 60px) + 8px);
  }
}


/* -------------------------------------------------------------------
   Rev.44 (2026-04-22) Phase 3b.7 - Paint-Isolation fuer Mobile-Video-
   Smoothness. Ursache-Diagnose: beim Scrollen durch die Upload-Card-
   Grids feuert updateTheater() classList.toggle (jm-active/jm-past),
   was Layout + Paint + Composite auf Main-Thread triggert und den
   Video-Decoder genau im selben Frame blockiert -> sichtbar als
   "Springerei im Hintergrund ab dem dritten Grid" (Dennis 2026-04-22).
   Fix: contain: layout paint + backface-visibility: hidden erzeugen
   einen eigenen Compositor-Layer pro Card/Item. Layout-Changes
   propagieren dann nicht mehr zum Haupt-Thread/Video-Layer.
   ------------------------------------------------------------------- */
.jm-theater-item,
.jm-upload-card-item {
  contain: layout paint;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Rev.44.1 (2026-04-22) Review-Korrektur: translateZ(0) war CRITICAL
     weil es bestehende transform: translateY(-50%) (Theater-Sticky-Zentrierung)
     + translateY(80px) (jm-smooth-in Reveal) ueberschrieben haette.
     Ersatz: will-change + isolation = gleicher Compositor-Layer-Effekt
     OHNE transform-Override. */
  will-change: transform;
  isolation: isolate;
}


/* -------------------------------------------------------------------
   Rev.46 (2026-04-22) Phase 3b.9 - Loop-Restart weicher Uebergang.
   Aktiviert via JS addEventListener(play, ...) - feuert bei jedem Play,
   also auch bei jedem Loop-Restart. Kurzer Fade-in + Blur-dim verdeckt
   den Frame-Switch zwischen letztem und erstem Frame.
   ------------------------------------------------------------------- */
@keyframes jmLoopFadeIn {
  from {
    opacity: 0.4;
    filter: blur(6px) brightness(0.7);
  }
  to {
    opacity: 1;
    filter: none;
  }
}


/* -------------------------------------------------------------------
   Rev.48 (2026-04-22) Phase 3b.10 - Landscape-Mobile Navbar-Overlap.
   Dennis-Symptom: im Querformat (Landscape, max-height ~414) ueberlagert
   die fixed Navbar (60px, z-index:1000) den "PROJEKT JAMAIKA"-Kicker.
   Ursache: Mobile-Rule translateY(-1.8cm) zieht above in Navbar-Zone,
   padding-top kompensiert nicht. Fix: mildere translateY + groesseres
   padding im Landscape.
   ------------------------------------------------------------------- */
@media (max-width: 900px) and (orientation: landscape) {
  /* Rev.55 (2026-04-22) Dennis-Feedback:
     "landscape ist der kicker wegen des headers zu tief im video" -> Kicker
     hoeher (mehr negative translateY). above -1.8cm -> -2.5cm (0.7cm hoeher).
     "one love muss insgesamt runter" -> below tiefer. below -2.5cm -> -1.5cm
     (1cm tiefer). padding-top entsprechend groesser (kompensiert den
     erhoehten translateY auf above). */
  .jm-hero-inner {
    padding-top: calc(var(--nav-h, 60px) + 2.5cm + 12px) !important;
  }
  .jm-hero-above {
    transform: translateY(-2.5cm) !important;
    margin-top: 0 !important;
  }
  .jm-hero-below {
    transform: translateY(-1.5cm) !important;
  }
}


/* -------------------------------------------------------------------
   Rev.57 (2026-04-22) Dennis: Mobile-Version — funktionierenden Mini
   (eckig, mit Hide-Logik) mittig unten platzieren statt Hero-Cue.
   Hero-Cue weg auf Mobile, Mini bleibt wie er ist (Design unveraendert).
   Wenn Upload-Section in View: Mini zeigt nach OBEN (rotate SVG 180deg)
   und scrollt bei Click zurueck zum Seitenanfang — statt hidden.
   Desktop (>900px): alles unveraendert.
   ------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Hero-Scroll-Cue unsichtbar auf Mobile (pulsierende Klammer in Mitte) */
  .jm-hero-scroll-cue {
    display: none !important;
  }
  /* Mini-Chevron von rechts in die Mitte verlagern — Design unveraendert */
  .jm-jump-mini {
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .jm-jump-mini.jm-mini-visible {
    transform: translateX(-50%) translateY(0) !important;
  }
}

/* Rev.67 (2026-04-22) Dennis: SVG-Rotation bei jm-mini-up aus der Mobile-
   Media-Query raus, damit sie auf Desktop genauso greift. Zuvor drehte der
   Pfeil nur auf Mobile — Desktop blieb immer auf "down". */
.jm-jump-mini.jm-mini-up .jm-scroll-cue-svg {
  transform: rotate(180deg);
  transition: transform 0.3s ease-out;
}


/* Rev.65 (2026-04-22) Dennis: Mini soll nicht in den schwarzen Footer
   hineinlaufen. Hide-Class ueber IntersectionObserver (JS Z.1715+). */
.jm-jump-mini.jm-mini-footer-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(30px) !important;
}
@media (max-width: 900px) {
  .jm-jump-mini.jm-mini-footer-hidden {
    transform: translateX(-50%) translateY(30px) !important;
  }
}


/* Rev.69 (2026-04-22) Custom Video-Controls-Strip unter Upload-Videos. */
.jm-vid-ctrl {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
}
.jm-vid-btn {
  background: rgba(20, 15, 5, 0.7);
  border: 1px solid rgba(200, 146, 42, 0.35);
  color: #E8B94E;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 0.5px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  min-width: 44px;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.jm-vid-btn:hover,
.jm-vid-btn:focus-visible {
  background: rgba(200, 146, 42, 0.2);
  border-color: rgba(200, 146, 42, 0.7);
}
.jm-vid-btn:active {
  transform: scale(0.95);
}
@media (max-width: 640px) {
  .jm-vid-btn { padding: 8px 10px; font-size: 13px; min-width: 48px; }
}