/* ==========================================================================
   biteme.digital . lab.css (WP-E9) . Werkstatt in der Tiefe
   Seitenspezifisch zu lab.html. Konventioneller Flow (kein ascent, kein
   Breach), Starttiefe -650 m: zweittiefste Seite, also dunkel. Hellt zum
   Seitenende dezent Richtung twilight auf. Tokens/Komponenten aus
   design-system.css (READ-ONLY), hier nur Lab-Layout + dosierte Deko.
   Regeln: keine Initial-States (opacity:0) fuer Inhalte (das macht die
   Engine via JS); Filter NIE tweenen (Performance, WP-Stolperfalle);
   nur transform/opacity animieren.
   ========================================================================== */

/* Lande-Zone: Seitenstart ist die tiefste Zone, damit beim Load nichts
   blitzt (Engine blendet die folgenden Zonen weich auf). */
body { --zone-bg: var(--zone-abyss); }

/* --------------------------------------------------------------------------
   HERO (-650 m) . Werkstatt-Atmosphaere, dunkel
   -------------------------------------------------------------------------- */
.lab-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: clamp(5rem, 14vh, 9rem);
}
.lab-hero__inner { position: relative; z-index: 1; max-width: 46rem; }
.lab-hero h1 { margin-top: 0.875rem; }
.lab-hero .lead { margin-top: 1.75rem; max-width: 34rem; }

/* Schwacher Licht-Kegel als Werkstatt-Atmosphaere (statisch, dezent) */
.lab-hero__glow {
  position: absolute;
  top: 26%;
  left: 38%;
  width: clamp(280px, 36vw, 540px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, var(--caribbean-08) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

/* --------------------------------------------------------------------------
   WERKBANK . "Aktuell laeuft"-Karten mit pulsierenden Status-Dots
   -------------------------------------------------------------------------- */
.werkbank { position: relative; }
.werkbank__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 680px) { .werkbank__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .werkbank__grid { grid-template-columns: repeat(3, 1fr); } }

.work-card { display: flex; flex-direction: column; }
.work-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.work-card h3 { margin-bottom: 0.75rem; }
.work-card p { color: var(--text-muted); margin-bottom: 1.25rem; }
.work-card__foot { margin-top: auto; }
.work-card__hint {
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  color: var(--text-muted);
  opacity: 0.8;
}
.work-card__mark {
  width: 38px; height: 38px;
  opacity: 0.85;
  flex-shrink: 0;
}
.work-card__mark img { width: 100%; height: 100%; }

/* Status-Tag mit pulsierendem Dot (Dot pausiert bei reduced-motion ueber
   design-system Abschnitt 14). Kein Orange. */
.status-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.34rem 0.8rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  background: var(--caribbean-08);
  border: 1px solid var(--caribbean-25);
  color: var(--accent-caribbean);
}
.status-tag .pulse-dot { width: 6px; height: 6px; }
/* Pilot: Purple Turtle (Struktur), kein Orange */
.status-tag--pilot {
  background: var(--purple-soft);
  border-color: rgba(123, 90, 160, 0.45);
  color: #C9B3E4;
}
.status-tag--pilot .pulse-dot { background: #C9B3E4; }
/* Eigenbetrieb: ruhiger, muted */
.status-tag--own {
  background: rgba(155, 163, 181, 0.08);
  border-color: var(--border-subtle);
  color: var(--text-muted);
}
.status-tag--own .pulse-dot { background: var(--text-muted); }

/* --------------------------------------------------------------------------
   WHITEPAPER . 3D-Tilt-Cover (CSS perspective, dezent)
   -------------------------------------------------------------------------- */
.whitepaper__layout {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 880px) {
  .whitepaper__layout { grid-template-columns: 0.85fr 1fr; }
}
.whitepaper__copy h2 { margin-top: 0.875rem; }
.whitepaper__copy .lead { margin-top: 1.25rem; }
.whitepaper__copy .work-card__foot { margin-top: 1.75rem; }

/* Perspektiv-Buehne: dezente Dauer-Neigung, auf Hover/Fokus minimal staerker.
   Nur transform (kein Filter-Tween). Bei reduced-motion legt das Design-
   System die Transition still, die Neigung bleibt als statischer 3D-Look. */
.wp-stage {
  perspective: 1100px;
  display: flex;
  justify-content: center;
}
.wp-cover {
  position: relative;
  width: min(300px, 80%);
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  transform: rotateY(-14deg) rotateX(5deg);
  transform-style: preserve-3d;
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) ease;
  box-shadow: -18px 24px 60px -24px rgba(0, 0, 0, 0.7);
}
.wp-stage:hover .wp-cover,
.wp-cover:focus-within { transform: rotateY(-7deg) rotateX(3deg); }

.wp-cover__face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--caribbean-25);
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(74, 36, 120, 0.45), transparent 60%),
    linear-gradient(160deg, var(--bg-elevated-2), var(--bg-abyss));
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
/* Buchruecken-Andeutung (3D-Tiefe) */
.wp-cover__face::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 12px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent);
}
.wp-cover__kicker {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-caribbean);
}
.wp-cover__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.wp-cover__foot {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--text-muted);
}
/* Caribbean-Lichtkante als Glanz auf dem Cover (statisch) */
.wp-cover__sheen {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(160, 239, 255, 0.12), transparent 42%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   SKILLS & TEMPLATES + NEWSLETTER
   -------------------------------------------------------------------------- */
.skills__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .skills__grid { grid-template-columns: repeat(3, 1fr); } }

.gate-card { display: flex; flex-direction: column; }
.gate-card .kicker { margin-bottom: 0.75rem; }
.gate-card h3 { margin-bottom: 0.75rem; }
.gate-card p { color: var(--text-muted); font-size: 0.9375rem; margin-bottom: 1.5rem; }
.gate-card__btn {
  margin-top: auto;
  width: 100%;
  justify-content: center;
  opacity: 0.5;
  cursor: not-allowed;
}

/* Newsletter-Band (Mock-Submit, kein echter Versand, kein externer Request) */
.newsletter {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
}
@media (min-width: 800px) { .newsletter { grid-template-columns: 1fr 1fr; } }
.newsletter h3 { margin-top: 0.5rem; }
.newsletter__copy p { color: var(--text-muted); margin-top: 0.75rem; }
.newsletter__form { display: flex; flex-direction: column; gap: 0.75rem; }
.newsletter__row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.newsletter__row .input { flex: 1; min-width: 12rem; }
.newsletter__note {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.newsletter__done {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--accent-caribbean);
}
.newsletter.is-done .newsletter__form { display: none; }
.newsletter.is-done .newsletter__done { display: flex; }

/* --------------------------------------------------------------------------
   VERGANGENE EXPERIMENTE . versunkene, entsaettigte/verrostete Artefakte
   CSS-Filter sparsam, NUR statisch (nie animiert, kein Tween).
   -------------------------------------------------------------------------- */
.artifacts__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .artifacts__grid { grid-template-columns: repeat(3, 1fr); } }

.artifact-card {
  position: relative;
  /* statischer Filter: entsaettigt + leicht verrostet, NICHT animiert */
  filter: saturate(0.32) sepia(0.16) brightness(0.92);
  /* Hover veraendert NUR Rahmen/Transform, NIE den Filter (Performance) */
  transition: transform var(--t-med) ease, border-color var(--t-med) ease;
}
.artifact-card:hover {
  transform: translateY(-2px);
  border-color: rgba(155, 163, 181, 0.3);
}
.artifact-card .kicker { color: var(--text-muted); margin-bottom: 0.75rem; }
.artifact-card h3 { margin-bottom: 0.75rem; }
.artifact-card p { color: var(--text-muted); font-size: 0.9375rem; }
/* Rost-Schimmer als statische Ecke (Korrosions-Andeutung) */
.artifact-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 100% 0%, rgba(139, 94, 60, 0.16), transparent 55%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   FINAL CTA . Werkstatt-Tonalitaet, ein CTA, ein Beifang
   -------------------------------------------------------------------------- */
.lab-cta__box {
  position: relative;
  text-align: center;
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 5vw, 3rem);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(140% 120% at 50% 0%, rgba(74, 36, 120, 0.28), transparent 60%),
    linear-gradient(160deg, var(--bg-elevated-2), var(--bg-deep));
  overflow: hidden;
}
.lab-cta__box h2 { max-width: 24ch; margin-inline: auto; }
.lab-cta__box .lead { max-width: 40ch; margin: 1.5rem auto 0; }
.lab-cta__actions {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.lab-cta__mail { color: var(--text-muted); font-size: 0.9375rem; }
.lab-cta__mail a { color: var(--accent-caribbean); }
.lab-cta__mail a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   DOSIERTE OCCLUSION-DEKO (Guide §5a, WP-B1-Patterns, ruhiger als Home)
   L1 ferne Silhouetten (z:-1, Parallax 0.1) . L4 nahe Okkluder (z:3,
   blur, Parallax 0.3): hinter ihnen wendet der Fisch verdeckt.
   -------------------------------------------------------------------------- */
.occluder {
  position: absolute;
  bottom: 0;
  pointer-events: none;
  z-index: 3;
  filter: blur(1.5px);
}
.occluder svg { display: block; width: 100%; height: 100%; }
/* Werkstatt-Geruest rechts (Rohr/Strebe-Silhouette), deckt das obere
   sanfte Pendeln des Fisches */
.occluder--rig {
  right: calc(-1 * clamp(12px, 2.5vw, 36px));
  width: clamp(150px, 15vw, 240px);
  height: min(80vh, 560px);
}
/* Wrack-Kelp links unten in den Vergangenen Experimenten, deckt die
   einzige verdeckte Wende (Crossing) des Fisch-Pfads */
.occluder--wreck {
  left: calc(-1 * clamp(12px, 2.5vw, 32px));
  width: clamp(150px, 17vw, 260px);
  height: min(92vh, 700px);
}

.deco-bg {
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.deco-bg svg { display: block; width: 100%; height: 100%; }
.deco-bg--reef {
  right: -2vw;
  bottom: -8vh;
  width: clamp(140px, 15vw, 230px);
  height: min(60vh, 380px);
}
.deco-bg--grass {
  left: calc(-1 * clamp(8px, 1.5vw, 20px));
  bottom: -8vh;
  width: clamp(120px, 14vw, 210px);
  height: min(52vh, 360px);
}

/* Sanftes Schwanken der Deko-Pflanzen (auf dem inneren <svg>) */
.deko-sway {
  transform-origin: 50% 100%;
  animation: lab-sway 11s ease-in-out infinite alternate;
}
@keyframes lab-sway {
  from { transform: rotate(-1.4deg); }
  to { transform: rotate(1.4deg); }
}

/* Aufsteigende Blasen (rein dekorativ) */
.bubbles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bubbles i {
  position: absolute;
  bottom: -28px;
  display: block;
  border: 1px solid var(--caribbean-25);
  border-radius: 999px;
  opacity: 0;
  animation: lab-bubble-rise linear infinite;
}
.bubbles i:nth-child(1) { left: 12%; width: 6px; height: 6px; animation-duration: 12s; animation-delay: -2s; }
.bubbles i:nth-child(2) { left: 28%; width: 4px; height: 4px; animation-duration: 15s; animation-delay: -8s; }
.bubbles i:nth-child(3) { left: 44%; width: 8px; height: 8px; animation-duration: 11s; animation-delay: -5s; }
.bubbles i:nth-child(4) { left: 63%; width: 5px; height: 5px; animation-duration: 16s; animation-delay: -11s; }
.bubbles i:nth-child(5) { left: 78%; width: 7px; height: 7px; animation-duration: 13s; animation-delay: -3s; }
.bubbles i:nth-child(6) { left: 90%; width: 4px; height: 4px; animation-duration: 17s; animation-delay: -7s; }
@keyframes lab-bubble-rise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: 0.32; }
  80% { opacity: 0.14; }
  100% { transform: translateY(-48vh) translateX(14px); opacity: 0; }
}

/* Ferner Fischschwarm, dezentes Drift-Parallax */
.fish-school {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  animation: lab-school-drift 20s ease-in-out infinite alternate;
}
.fish-school svg { display: block; width: 100%; height: 100%; }
.fish-school--werkbank { right: 6vw; top: 9vh; width: clamp(100px, 12vw, 180px); }
@keyframes lab-school-drift {
  from { transform: translate(0, 0); }
  to { transform: translate(11px, -7px); }
}

/* Seekarten-Labels (mono, dezent) */
.seekarten-label {
  position: absolute;
  z-index: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  opacity: 0.42;
  white-space: nowrap;
  pointer-events: none;
}
.seekarten-label--hero { right: clamp(12px, 3vw, 40px); bottom: 6vh; }
.seekarten-label--wreck { left: clamp(12px, 3vw, 32px); bottom: 5vh; }

/* --------------------------------------------------------------------------
   MOBILE / REDUCED MOTION (Deko reduzieren, kein Overflow)
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  /* z-index:3 → über Content; mobil ganz aus (konsistent zu studio/cases),
     sonst geblurte Rand-Silhouetten über Karten-/Textkanten (Report-Fund #1). */
  .occluder--rig { display: none; }
  .occluder--wreck { display: none; }
  .deco-bg--reef { display: none; }
  .deco-bg--grass { width: 110px; opacity: 0.5; }
  .fish-school--werkbank { display: none; }
  .seekarten-label { display: none; }
  .lab-hero__glow { left: 20%; }
}

@media (prefers-reduced-motion: reduce) {
  .deko-sway { animation: none; }
  .fish-school { animation: none; }
  .bubbles { display: none; }
  .wp-cover { transition: none; }
}