/* ============================================================
   KOKOKUSH DISPENSARY — Koh Phangan
   Design System · OLED Black / Weed Green / White
   ============================================================ */

:root {
  --bg: #050505;
  --bg-2: #080c08;
  --panel: rgba(255, 255, 255, 0.03);
  --panel-2: rgba(255, 255, 255, 0.05);
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.05);
  --green: #62e86a;
  --green-deep: #1f7a35;
  --green-glow: rgba(98, 232, 106, 0.55);
  --green-tint: rgba(98, 232, 106, 0.08);
  --amber: #ff9d45;
  --ink: #f2f7f0;
  --muted: rgba(242, 247, 240, 0.55);
  --muted-2: rgba(242, 247, 240, 0.35);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: "Clash Display", sans-serif;
  --font-title: "Lineal", "Clash Display", sans-serif;
  --font-body: "Satoshi", sans-serif;
  --r-xl: 2rem;
  --r-inner: calc(2rem - 0.5rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--green); color: #041007; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Atmosphäre ----------
   Kein Filmkorn: Die Oberfläche bleibt glatt, die Tiefe kommt aus sehr weichen,
   großflächigen Lichtfeldern. Das Korn hat die Seite billig wirken lassen und
   zeichnete außerdem jede Videokante nach (das Video war glatt, der Grund nicht). */
.noise { display: none; }

.orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* Kein filter:blur(200px) mehr — auf einem ohnehin weichen Radial-Gradient
   sieht man den Blur nicht, aber die GPU zahlte ihn bei jedem Scroll-Frame. */
.orb { position: absolute; border-radius: 50%; opacity: 0.42; }
.orb--a { width: 78vw; height: 78vw; top: -38vw; right: -28vw; background: radial-gradient(circle, rgba(98,232,106,0.10), transparent 68%); }
.orb--b { width: 68vw; height: 68vw; bottom: -30vw; left: -24vw; background: radial-gradient(circle, rgba(31,122,53,0.11), transparent 68%); }

main { position: relative; z-index: 1; }

/* ---------- Typography ---------- */
.h-display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-size: clamp(2.8rem, 8vw, 7.5rem);
}
/* Marken-Titel in Lineal (Velvetyne VTF Lineal) */
.hero-title .h-display,
.agegate-box .h-2,
.nav-logo,
.foot-logo,
.foot-giant {
  font-family: var(--font-title);
  font-weight: 800;
  letter-spacing: 0.01em;
}
.h-1 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
}
.h-2 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
}
.h-3 { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; line-height: 1.2; }

.lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--muted); font-weight: 300; max-width: 38em; }
.txt-green { color: var(--green); }
.txt-outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 247, 240, 0.35);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
  backdrop-filter: none;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green-glow);
}

/* ---------- Layout scaffolding ---------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
section { padding: clamp(6rem, 10vw, 10rem) 0; position: relative; }
.section-head { margin-bottom: clamp(3rem, 5vw, 5rem); display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start; }

/* ---------- Double-bezel card ---------- */
.shell {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  padding: 0.5rem;
}
.core {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
  height: 100%;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.9rem;
  border-radius: 999px;
  padding: 0.55rem 0.6rem 0.55rem 1.6rem;
  font-size: 0.95rem; font-weight: 500;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  transition: transform 0.7s var(--ease), background 0.7s var(--ease), border-color 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.btn .btn-ico {
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.9rem;
  transition: transform 0.7s var(--ease), background 0.7s var(--ease);
}
.btn:hover { border-color: rgba(98, 232, 106, 0.4); box-shadow: 0 0 40px rgba(98, 232, 106, 0.12); }
.btn:hover .btn-ico { transform: translate(3px, -1px) scale(1.05); }
.btn:active { transform: scale(0.98); }

.btn--green { background: var(--green); color: #041007; border-color: transparent; font-weight: 600; }
.btn--green .btn-ico { background: rgba(4, 16, 7, 0.15); }
.btn--green:hover { box-shadow: 0 0 60px rgba(98, 232, 106, 0.35); }

.btn--ghost { background: transparent; }

/* ---------- Nav (floating pill) ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: center;
  padding-top: 1.4rem;
  pointer-events: none;
}
.nav-pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: 0.4rem;
  background: rgba(8, 10, 8, 0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 0.5rem 0.45rem 1.2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255,255,255,0.06);
  transition: transform 0.7s var(--ease);
}
.nav-logo {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  letter-spacing: 0.02em; margin-right: 0.8rem; white-space: nowrap;
}
.nav-logo em { font-style: normal; color: var(--green); }
.nav-links { display: flex; gap: 0.2rem; }
.nav-links a {
  padding: 0.5rem 0.95rem; border-radius: 999px;
  font-size: 0.88rem; color: var(--muted); font-weight: 500;
  transition: color 0.5s var(--ease), background 0.5s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.nav-cta { margin-left: 0.6rem; }

/* Sprachumschalter (Flaggen-Dropdown, rechts in der Navbar) */
.lang-switch { position: relative; margin-left: 0.5rem; flex-shrink: 0; }
.lang-btn {
  display: flex; align-items: center; gap: 0.3rem;
  height: 2.6rem; padding: 0 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease);
}
.lang-btn:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(98, 232, 106, 0.4); }
.lang-flag { font-size: 1.05rem; line-height: 1; }
.lang-chev { font-size: 0.6rem; color: var(--muted-2); transition: transform 0.4s var(--ease); }
.lang-switch.open .lang-chev { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 0.6rem); right: 0;
  min-width: 11rem;
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.4rem;
  background: rgba(8, 10, 8, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
  opacity: 0; visibility: hidden;
  transform: translateY(-0.5rem);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
}
.lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu button {
  display: flex; align-items: center; gap: 0.65rem;
  width: 100%; padding: 0.55rem 0.75rem;
  border: none; border-radius: 0.7rem;
  background: transparent; color: var(--muted);
  font-size: 0.86rem; font-weight: 500; text-align: left;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.lang-menu button:hover { background: rgba(255, 255, 255, 0.07); color: var(--ink); }
.lang-menu button.on { color: var(--green); background: rgba(98, 232, 106, 0.1); }

/* hamburger */
.nav-burger {
  display: none;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid var(--line); background: transparent;
  position: relative;
}
.nav-burger span {
  position: absolute; left: 50%; top: 50%;
  width: 16px; height: 1.5px; background: var(--ink);
  transition: transform 0.6s var(--ease);
}
.nav-burger span:nth-child(1) { transform: translate(-50%, calc(-50% - 3.5px)); }
.nav-burger span:nth-child(2) { transform: translate(-50%, calc(-50% + 3.5px)); }
.nav-burger.open span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.nav-burger.open span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

/* fullscreen menu */
.menu {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(4, 5, 4, 0.85);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
.menu.open { opacity: 1; pointer-events: auto; }
.menu ul { list-style: none; text-align: center; display: flex; flex-direction: column; gap: 1rem; }
.menu a {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.2rem, 8vw, 3.6rem);
  line-height: 1.1;
  display: inline-block;
  transform: translateY(3rem); opacity: 0;
  transition: transform 0.8s var(--ease), opacity 0.8s var(--ease), color 0.4s var(--ease);
}
.menu.open a { transform: translateY(0); opacity: 1; }
.menu li:nth-child(1) a { transition-delay: 0.08s; }
.menu li:nth-child(2) a { transition-delay: 0.14s; }
.menu li:nth-child(3) a { transition-delay: 0.2s; }
.menu li:nth-child(4) a { transition-delay: 0.26s; }
.menu a:hover { color: var(--green); }

/* ---------- HERO scroll experience ---------- */
.hero-scroll { height: 520vh; position: relative; padding: 0; }
.hero-sticky {
  position: sticky; top: 0; height: 100dvh;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.hero-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  will-change: transform, opacity;
}
.hero-stage img,
.hero-stage video {
  /* fullscreen, ungemaskt — Videos sind bildschirmgroß animiert */
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-glow {
  position: absolute; left: 50%; top: 50%;
  width: 60vh; height: 60vh; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--green-glow), transparent 60%);
  filter: blur(80px);
  opacity: 0;
  will-change: opacity;
  pointer-events: none;
}
.hero-title {
  position: relative; z-index: 5;
  top: -7vh; /* Textbereich sitzt bewusst höher */
  text-align: center;
  will-change: transform, opacity;
  padding: 0 1rem;
}
.hero-title .h-display { text-shadow: 0 4px 24px rgba(0,0,0,0.95), 0 10px 80px rgba(0,0,0,0.85); }
.hero-title .eyebrow {
  font-family: var(--font-title);
  font-weight: 500;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.9);
}
.hero-title .eyebrow::before { display: none; }
.hero-title .hero-sub {
  margin-top: 1.6rem;
  color: #fff;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.95), 0 0 40px rgba(0,0,0,0.8);
}
.hero-scroll-hint {
  position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
  z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  color: var(--muted-2); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
}
.hero-scroll-hint::after {
  content: ""; width: 1px; height: 3rem;
  background: linear-gradient(180deg, var(--green), transparent);
  animation: drip 2s var(--ease) infinite;
}
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 100% { transform: scaleY(0); transform-origin: bottom; } }

.hero-caption {
  position: absolute; z-index: 6;
  max-width: 22rem;
  opacity: 0;
  will-change: transform, opacity;
}
/* Lesbarkeit über hellem Videomaterial: NUR starke Textschatten, keine Kachel */
.hero-caption h3 {
  text-shadow:
    0 0 6px rgba(0,0,0,1), 0 2px 4px rgba(0,0,0,1),
    0 4px 18px rgba(0,0,0,0.98), 0 10px 50px rgba(0,0,0,0.9);
}
.hero-caption p {
  text-shadow:
    0 0 5px rgba(0,0,0,1), 0 2px 4px rgba(0,0,0,1),
    0 3px 14px rgba(0,0,0,0.98), 0 8px 40px rgba(0,0,0,0.9);
}
.hero-caption .cap-num {
  text-shadow:
    0 0 5px rgba(0,0,0,1), 0 2px 4px rgba(0,0,0,1), 0 3px 12px rgba(0,0,0,0.95);
}
.hero-caption .cap-num {
  font-family: var(--font-display); font-weight: 500;
  color: var(--green); font-size: 0.85rem; letter-spacing: 0.3em;
  display: block; margin-bottom: 0.8rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.95), 0 0 24px rgba(0,0,0,0.85);
}
.hero-caption h3 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 0.8rem; line-height: 1.05;
  color: #fff;
  text-shadow: 0 3px 14px rgba(0,0,0,0.95), 0 8px 40px rgba(0,0,0,0.85);
}
.hero-caption p {
  color: #fff; font-weight: 300; font-size: 0.98rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.95), 0 6px 32px rgba(0,0,0,0.85);
}
.hero-caption--left { left: clamp(1.5rem, 8vw, 9rem); top: 41%; transform: translateY(-50%); }
.hero-caption--right { right: clamp(1.5rem, 8vw, 9rem); top: 41%; transform: translateY(-50%); text-align: right; }

.hero-progress {
  position: absolute; right: 2rem; top: 50%; transform: translateY(-50%);
  z-index: 6; display: flex; flex-direction: column; gap: 0.8rem;
}
.hero-progress span {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}
.hero-progress span.on { background: var(--green); box-shadow: 0 0 12px var(--green-glow); transform: scale(1.4); }

/* ---------- Scroll-Scrub-Hintergrundvideo (Sektionen) ---------- */
.scrub-section { position: relative; overflow: hidden; }
.scrub-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.45;
  pointer-events: none;
}
.scrub-veil {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(5,5,5,0.3) 28%, rgba(5,5,5,0.3) 72%, var(--bg) 100%);
  pointer-events: none;
}
/* Sorten-Sektion: Das Cannabis-Feld läuft unten weiter, damit der Zwischenraum
   bis zur Brownie-Sektion nicht leer schwarz bleibt. */
.scrub-section--deep { padding-bottom: clamp(10rem, 22vh, 18rem); }

.scrub-section .wrap { position: relative; z-index: 1; }
.scrub-section .drift-gallery { position: relative; z-index: 1; }
/* Lesbarkeit über dem Rauch: Texte weiß + Schatten, Kacheln opak */
.scrub-section .lead,
.scrub-section .p-desc,
.scrub-section .stat-l {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.95), 0 6px 28px rgba(0,0,0,0.85);
}
.scrub-section .h-1, .scrub-section .eyebrow {
  text-shadow: 0 2px 12px rgba(0,0,0,0.95), 0 6px 28px rgba(0,0,0,0.85);
}
.scrub-section .shell {
  background: rgba(9, 11, 9, 0.88);
  border-color: rgba(255,255,255,0.12);
}
.scrub-section .core {
  background: linear-gradient(180deg, rgba(18,21,18,0.96), rgba(11,13,11,0.96));
}

/* ---------- Brownie-Bite-Sequenz (Scroll) ---------- */
.bite-seq img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 0.18s linear;
}
.bite-seq img.on { opacity: 1; }

/* ---------- Marquee ---------- */
.marquee {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden; padding: 1.4rem 0;
  background: rgba(255,255,255,0.015);
}
.marquee-track {
  display: flex; gap: 3.5rem; width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee-track span {
  font-family: var(--font-display); font-weight: 500;
  font-size: 0.95rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
  display: flex; align-items: center; gap: 3.5rem;
}
.marquee-track span::after { content: "✦"; color: var(--green); font-size: 0.7rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Bento / cards ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.2rem; }
.b-8 { grid-column: span 8; }
.b-6 { grid-column: span 6; }
.b-4 { grid-column: span 4; }
.b-12 { grid-column: span 12; }

.card-pad { padding: clamp(1.6rem, 3vw, 2.6rem); }

.stat { display: flex; flex-direction: column; gap: 0.3rem; }
.stat .stat-n { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 4vw, 3.4rem); color: var(--green); line-height: 1; }
.stat .stat-l { color: var(--muted); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Product cards (strains & edibles) ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.2rem;
}
.p-card { cursor: pointer; transition: transform 0.7s var(--ease); }
.p-card:hover { transform: translateY(-6px); }
.p-card .core { display: flex; flex-direction: column; }
.p-media { position: relative; aspect-ratio: 1; overflow: hidden; background: #000; }
.p-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.p-card:hover .p-media img { transform: scale(1.06); }
.p-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(5,5,5,0.9));
}
.p-badge {
  position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700;
  padding: 0.35rem 0.7rem; border-radius: 999px;
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
}
.p-badge--sativa { background: rgba(98, 232, 106, 0.15); color: var(--green); }
.p-badge--indica { background: rgba(147, 112, 219, 0.15); color: #b9a5f5; }
.p-badge--hybrid { background: rgba(255, 255, 255, 0.1); color: var(--ink); }
.p-badge--edible { background: rgba(255, 157, 69, 0.15); color: var(--amber); }
.p-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.p-name { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
.p-meta { display: flex; gap: 1rem; font-size: 0.8rem; color: var(--muted); letter-spacing: 0.04em; }
.p-meta b { color: var(--green); font-weight: 600; }
.p-desc { font-size: 0.88rem; color: var(--muted); font-weight: 300; flex: 1; }
.p-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 0.6rem; }
.p-price { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.p-price small { color: var(--muted); font-weight: 400; font-size: 0.75rem; }
.p-more {
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; color: var(--muted);
  transition: transform 0.6s var(--ease), color 0.6s var(--ease), border-color 0.6s var(--ease);
}
.p-card:hover .p-more { transform: rotate(45deg); color: var(--green); border-color: rgba(98,232,106,0.4); }

/* Featured-Galerie: EINE randlose Reihe, manuell per Pfeil vor/zurück */
.drift-gallery {
  overflow: hidden;
  width: 100vw;
  padding-left: max(1.25rem, calc((100vw - 1240px) / 2 + 3rem));
}
.drift-row {
  display: flex; gap: 1.2rem;
  width: max-content;
  will-change: transform;
  transition: transform 0.8s var(--ease);
}
.drift-row .p-card { flex: 0 0 clamp(240px, 23vw, 310px); }
.hs-nav { display: flex; gap: 0.6rem; }
.hs-btn {
  width: 2.8rem; height: 2.8rem; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel-2);
  color: var(--ink); font-size: 1rem;
  transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease), transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.hs-btn:hover { border-color: rgba(98,232,106,0.5); box-shadow: 0 0 24px rgba(98,232,106,0.15); }
.hs-btn:active { transform: scale(0.94); }
.hs-btn[disabled] { opacity: 0.35; pointer-events: none; }

/* filter chips */
.chips { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); background: var(--panel);
  color: var(--muted); border-radius: 999px;
  padding: 0.5rem 1.2rem; font-size: 0.85rem; font-weight: 500;
  transition: all 0.5s var(--ease);
}
.chip:hover { color: var(--ink); }
.chip.on { background: var(--green); color: #041007; border-color: transparent; font-weight: 600; box-shadow: 0 0 30px rgba(98,232,106,0.25); }

/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem;
  background: rgba(3, 4, 3, 0.75);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.modal.open { opacity: 1; pointer-events: auto; }
.modal .shell { max-width: 880px; width: 100%; max-height: 90dvh; overflow: auto; transform: translateY(2rem) scale(0.98); transition: transform 0.6s var(--ease); }
.modal.open .shell { transform: translateY(0) scale(1); }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; }
.modal-media { aspect-ratio: 1; background: #000; }
.modal-media img { width: 100%; height: 100%; object-fit: cover; }
.modal-body { padding: clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: 1rem; }
.modal-close {
  position: absolute; top: 1.4rem; right: 1.4rem; z-index: 5;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: rgba(0,0,0,0.5); border: 1px solid var(--line); color: var(--ink);
  font-size: 1rem;
  transition: transform 0.5s var(--ease);
}
.modal-close:hover { transform: rotate(90deg); }
.spec-rows { display: flex; flex-direction: column; border-top: 1px solid var(--line-soft); }
.spec-rows div { display: flex; justify-content: space-between; padding: 0.65rem 0; border-bottom: 1px solid var(--line-soft); font-size: 0.88rem; }
.spec-rows dt { color: var(--muted); }
.spec-rows dd { font-weight: 500; }
.fx-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.fx-tags span {
  font-size: 0.75rem; padding: 0.3rem 0.8rem; border-radius: 999px;
  border: 1px solid rgba(98,232,106,0.25); color: var(--green);
  background: var(--green-tint);
}

/* ---------- Split sections ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split-media img { border-radius: var(--r-inner); }

/* ---------- Steps / info rows ---------- */
.info-rows { display: flex; flex-direction: column; }
.info-row {
  display: grid; grid-template-columns: 4rem 1fr 2fr; gap: 2rem;
  padding: 2rem 0; border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.info-row .n { font-family: var(--font-display); color: var(--green); font-weight: 500; }
.info-row h4 { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; }
.info-row p { color: var(--muted); font-weight: 300; font-size: 0.95rem; }

/* ---------- FAQ ---------- */
.faq details {
  border-bottom: 1px solid var(--line-soft);
  padding: 1.4rem 0;
}
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display); font-weight: 500; font-size: 1.15rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--green); font-size: 1.4rem; transition: transform 0.5s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); font-weight: 300; padding-top: 0.9rem; max-width: 60ch; }

/* ---------- Edibles-Teaser: gepinnt, der Brownie wird aufgegessen ---------- */
.bite-pin { height: 215vh; padding: 0; }
.bite-sticky {
  position: sticky; top: 0;
  height: 100dvh;
  display: flex; align-items: center;
}
@media (max-width: 960px) {
  .bite-pin { height: 195vh; }
}
/* Falls die Sektion je wieder ein Scrub-Video bekommt: .scrub-section setzt
   overflow:hidden und das hebelt position:sticky aus — dann hier überschreiben. */
.bite-pin.scrub-section { overflow: visible; }

/* ---------- Globus-Karte + Info-Kacheln (Location) ---------- */
.globe-card {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
/* Pin: Sektion rastet ein — Globus-Animation + Scan-/Drohnen-Video laufen über die Scroll-Strecke */
.globe-pin { height: 720vh; padding: 0; }
.globe-sticky {
  position: sticky; top: 0;
  height: 100dvh;
  display: flex; align-items: center;
  overflow: hidden;
  /* Deckender, absolut gleichmäßiger Grund: Sonst scheinen die Lichtfelder
     NEBEN dem Video durch, hinter dem Video aber nicht — genau dadurch
     zeichnete sich das Videoquadrat als Rahmen ab. */
  background: var(--bg);
}
@media (max-width: 960px) {
  .globe-pin { height: 600vh; }
}
/* Film-Layer über dem Globus: Scan startet auf dem identischen Globus-Endframe,
   Drohne übernimmt per Crossfade — beide 1:1 wie die Globus-Karte */
.globe-film {
  position: absolute; inset: -2%;          /* Rand liegt außerhalb der Box */
  width: 104%; height: 104%;
  object-fit: cover;
  opacity: 0;
  border: 0; outline: 0;
  background: transparent;
  pointer-events: none;
  will-change: opacity;
}
.globe-wrap {
  position: relative; width: 100%; aspect-ratio: 1 / 1; margin-top: 0.6rem;
  /* Die Videos werden minimal größer gerendert als die Box (s. .globe-film),
     damit ihre äußerste Pixelreihe außerhalb des sichtbaren Bereichs liegt —
     sonst zeichnet der Browser dort eine hauchdünne Kante gegen den Grund. */
  overflow: hidden;
}
.globe-wrap canvas {
  width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1s ease;
  contain: layout paint size;
  cursor: pointer;
}
.globe-label { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; pointer-events: none; }
.globe-label.on { opacity: 1; }
.globe-ring {
  position: absolute; left: 50%; top: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 1.5px solid var(--green);
  animation: globe-ping 1.6s ease-out infinite;
}
@keyframes globe-ping {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}
.globe-label-text {
  position: absolute;
  left: 50%; top: calc(50% + 2.6rem);
  transform: translateX(-50%);
  background: rgba(4, 7, 4, 0.9);
  border: 1px solid rgba(98, 232, 106, 0.45);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.globe-label-text b { color: var(--green); font-weight: 600; }

/* ---------- Concierge: Live-Status + Detailzeilen ----------
   Keine Kacheln, sondern eine durchgehende Tafel: links der lebende Teil
   (Status, Inselzeit), rechts feine Zeilen auf Haarlinien. */
.concierge {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(2rem, 4vw, 3.4rem);
  border-radius: var(--r-xl);
  /* Frosted Glass — gleiche Machart wie die Kacheln im Jarvis-Interface */
  background: rgba(18, 22, 18, 0.56);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  isolation: isolate;
}
/* Lichtkante oben + diagonaler Glanz über der Glasfläche */
.concierge::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22) 50%, transparent) top 0 left 14px / calc(100% - 28px) 1px no-repeat,
    linear-gradient(112deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 18%, transparent 42%),
    radial-gradient(120% 90% at 50% 118%, rgba(0, 0, 0, 0.45), transparent 60%);
  pointer-events: none;
}
/* schwacher grüner Lichtsaum hinter dem Live-Block */
.cg-glow {
  position: absolute; z-index: -1;
  top: -35%; left: -12%;
  width: 46%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(98, 232, 106, 0.16), transparent 68%);
  filter: blur(60px);
  pointer-events: none;
}
.cg-live {
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  gap: 1.15rem;
}
.cg-status { display: inline-flex; align-items: center; gap: 0.6rem; }
.cg-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 var(--green-glow);
  animation: cg-beat 2.4s var(--ease-out) infinite;
}
@keyframes cg-beat {
  0%   { box-shadow: 0 0 0 0 rgba(98, 232, 106, 0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(98, 232, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(98, 232, 106, 0); }
}
.cg-state {
  font-size: 0.88rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff;
}
/* geschlossen: nur der Punkt nimmt sich zurück, die Schrift bleibt weiß */
.concierge.is-closed .cg-dot {
  background: rgba(255, 255, 255, 0.45);
  animation: none; box-shadow: none;
}

/* senkrechte Haarlinie zwischen Live-Teil und Detailzeilen */
.concierge::after {
  content: ""; position: absolute;
  top: clamp(2rem, 4vw, 3.4rem); bottom: clamp(2rem, 4vw, 3.4rem);
  left: calc(42.5% - 0.5px); width: 1px;
  background: linear-gradient(180deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
  pointer-events: none;
}
@media (max-width: 900px) { .concierge::after { display: none; } }

.cg-clock { display: flex; flex-direction: column; gap: 0.75rem; }
.cg-time {
  font-family: var(--font-title);
  font-size: clamp(3.6rem, 7.4vw, 6rem);
  line-height: 0.86;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  /* sanfter Lichtverlauf über den Ziffern statt flachem Weiß */
  background: linear-gradient(168deg, #ffffff 12%, #eaf3e8 52%, rgba(255, 255, 255, 0.72) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cg-zone {
  font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: #fff; opacity: 0.9;
}
.cg-note {
  font-size: 1.12rem; line-height: 1.45;
  color: #fff; font-weight: 500;
  max-width: 30ch;
}

/* Tagesleiste: 24 Stunden, Füllung bis „jetzt" im Verlauf, Öffnungsfenster als helle Zone */
.cg-bar { width: min(100%, 24rem); margin-top: 0.9rem; }
.cg-bar-track {
  position: relative; height: 8px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}
.cg-bar-window {
  position: absolute; top: 0; bottom: 0;
  left: 45.833%; right: 4.167%; /* 11:00 – 23:00 auf 24 h */
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}
.cg-bar-fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c3aed, #ec4899, #f97316);
  box-shadow: 0 0 18px rgba(236, 72, 153, 0.35);
  transition: width 1.2s var(--ease);
}
.cg-bar-now {
  position: absolute; top: 50%;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(10, 10, 12, 0.85), 0 0 16px rgba(255, 255, 255, 0.65);
  transition: left 1.2s var(--ease);
}
.cg-bar-scale {
  display: flex; justify-content: space-between;
  margin-top: 0.7rem;
  font-size: 0.72rem; letter-spacing: 0.14em;
  color: #fff; opacity: 0.88;
  font-variant-numeric: tabular-nums;
}
/* die 11 sitzt am Beginn des Öffnungsfensters, nicht in der Mitte */
.cg-bar-scale span:nth-child(2) { margin-right: auto; margin-left: 41%; }

.cg-rows { display: flex; flex-direction: column; align-self: center; width: 100%; }
.cg-row {
  position: relative;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 0.4rem 1.15rem 0;
  border-top: 1px solid var(--line-soft);
  transition: background 0.6s var(--ease), padding-left 0.6s var(--ease);
}
.cg-row:last-child { border-bottom: 1px solid var(--line-soft); }
/* grüne Kante, die beim Hover von oben nach unten aufzieht */
.cg-row::before {
  content: ""; position: absolute; left: -0.4rem; top: 0; bottom: 0;
  width: 1px; background: var(--green);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.7s var(--ease);
}
.cg-row:hover { background: linear-gradient(90deg, var(--green-tint), transparent 55%); padding-left: 0.7rem; }
.cg-row:hover::before { transform: scaleY(1); }
.cg-n {
  font-size: 0.7rem; letter-spacing: 0.1em;
  color: #fff; opacity: 0.72;
  font-variant-numeric: tabular-nums;
}
.cg-row dt { font-size: 0.95rem; color: #fff; opacity: 0.92; }
.cg-row dd {
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.7vw, 1.32rem);
  font-weight: 500; text-align: right;
  color: #fff;
  font-variant-numeric: tabular-nums;
  transition: color 0.6s var(--ease);
}
.cg-row:hover dd { color: var(--green); }

@media (max-width: 900px) {
  .concierge { grid-template-columns: 1fr; gap: 2.2rem; }
  .cg-glow { width: 70%; top: -18%; }
  .cg-row { grid-template-columns: 2.2rem minmax(0, 1fr); padding: 0.9rem 0.4rem 0.9rem 0; gap: 0.6rem; }
  .cg-row dt { line-height: 1.3; }
  .cg-row dd { grid-column: 2; text-align: left; margin-top: 0.1rem; line-height: 1.3; }
  .cg-time { font-size: clamp(3rem, 16vw, 4.4rem); }
}

.info-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}
.info-tile {
  display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 1.4rem;
  padding: 1.3rem 1.5rem;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.06);
  transition: border-color 0.6s var(--ease), box-shadow 0.6s var(--ease), transform 0.6s var(--ease);
}
.info-tile:hover {
  border-color: rgba(98, 232, 106, 0.35);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.06), 0 0 30px rgba(98, 232, 106, 0.08);
  transform: translateY(-3px);
}
.info-tile .k {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.info-tile .v { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; }
@media (max-width: 960px) {
  .info-tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .info-tiles { grid-template-columns: 1fr; }
}

/* ---------- Feld-Band (Bild unter der FAQ) ---------- */
.field-band {
  position: relative; width: 100vw; overflow: hidden;
  /* dicht an die FAQ heranrücken */
  margin-top: calc(-1 * clamp(3rem, 7vw, 7rem));
}
.field-band img { width: 100%; display: block; }
.field-band::before,
.field-band::after {
  content: ""; position: absolute; left: 0; right: 0;
  pointer-events: none;
  z-index: 1; /* ÜBER dem Bild, sonst bleibt eine sichtbare Kante */
}
.field-band::before {
  top: 0; height: 55%;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 12%, rgba(5,5,5,0.65) 45%, transparent 100%);
}
.field-band::after {
  bottom: 0; height: 22%;
  background: linear-gradient(0deg, var(--bg), transparent);
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--line-soft);
  padding: clamp(4rem, 7vw, 6rem) 0 2.5rem;
  position: relative; z-index: 1;
}
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 4rem; }
.foot-grid h5 { font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 1.1rem; font-weight: 600; }
.foot-grid ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.foot-grid a { color: var(--muted); font-size: 0.92rem; transition: color 0.4s var(--ease); }
.foot-grid a:hover { color: var(--green); }
.foot-logo { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; margin-bottom: 1rem; }
.foot-logo em { font-style: normal; color: var(--green); }
.foot-note { color: var(--muted-2); font-size: 0.85rem; max-width: 34em; font-weight: 300; }
.foot-bar {
  border-top: 1px solid var(--line-soft); padding-top: 1.8rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  color: var(--muted-2); font-size: 0.78rem;
}
.foot-giant {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3rem, 12vw, 11rem);
  line-height: 0.9; letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(98, 232, 106, 0.25);
  user-select: none;
  margin: 3rem 0 1rem;
  white-space: nowrap;
}

/* ---------- Age gate ---------- */
.agegate {
  position: fixed; inset: 0; z-index: 200;
  background: #030403;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  transition: opacity 0.8s var(--ease);
}
.agegate.off { opacity: 0; pointer-events: none; }
.agegate-box { max-width: 30rem; text-align: center; display: flex; flex-direction: column; gap: 1.4rem; align-items: center; }
.agegate-box .leaf { font-size: 2rem; filter: drop-shadow(0 0 18px var(--green-glow)); }
.agegate-box p { color: var(--muted); font-weight: 300; font-size: 0.95rem; }
.agegate-btns { display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; }

/* ---------- Reveal on scroll ---------- */
.rv {
  opacity: 0;
  transform: translateY(3.5rem);
  filter: blur(8px);
  transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);
}
.rv.in { opacity: 1; transform: translateY(0); filter: blur(0); }
.rv-d1 { transition-delay: 0.1s; }
.rv-d2 { transition-delay: 0.2s; }
.rv-d3 { transition-delay: 0.3s; }

/* ---------- Page hero (subpages) ---------- */
.page-hero { padding: clamp(9rem, 14vw, 13rem) 0 clamp(3rem, 5vw, 5rem); }

/* ---------- Notices ---------- */
.notice {
  display: flex; gap: 1rem; align-items: flex-start;
  border: 1px solid rgba(255, 157, 69, 0.25);
  background: rgba(255, 157, 69, 0.05);
  border-radius: 1.2rem; padding: 1.2rem 1.4rem;
  font-size: 0.88rem; color: var(--muted);
}
.notice b { color: var(--amber); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .bento { grid-template-columns: 1fr; }
  .b-8, .b-6, .b-4, .b-12 { grid-column: span 1; }
  .split { grid-template-columns: 1fr; }
  .modal-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .info-row { grid-template-columns: 3rem 1fr; }
  .info-row p { grid-column: 2; }
  .hero-caption { max-width: 16rem; }
  .hero-caption--left { left: 1.25rem; top: auto; bottom: 6.5rem; transform: none; }
  .hero-caption--right { right: 1.25rem; left: auto; top: auto; bottom: 6.5rem; transform: none; text-align: left; }
  .hero-progress { right: 1rem; }
}
@media (max-width: 768px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: block; }
  .nav-pill { max-width: calc(100vw - 2rem); padding-left: 0.9rem; }
  .nav-logo { font-size: 0.9rem; margin-right: auto; }
  .lang-switch { margin-left: 0.35rem; }
  .lang-btn { height: 2.4rem; padding: 0 0.5rem; }
  .lang-menu { right: -2.6rem; }
  section { padding: 4.5rem 0; }
  .hero-scroll { height: 420vh; }
}