/* ==========================================================================
   DESIGN TOKENS & CUSTOM PROPERTIES
   ========================================================================== */
:root {
  /* Colors */
  --color-obsidian: #000000;
  --color-paper-white: #ffffff;
  --color-ash-gray: #eeeeee;
  --color-smoke: #888888;
  --color-bone: #cacaca;
  --color-brand: #ffd900;
  --color-brand-dim: rgba(255, 217, 0, 0.4);

  /* Typography — Font Families */
  --font-primary: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-klee: 'Klee One', cursive, sans-serif;
  --font-zen: 'Zen Kaku Gothic New', sans-serif;
  --font-steps: var(--font-klee);
  --font-murmure: 'Le Murmure', sans-serif;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Spacing Scale */
  --spacing-4: 4px;
  --spacing-9: 9px;
  --spacing-18: 18px;
  --spacing-22: 22px;
  --spacing-24: 24px;
  --spacing-36: 36px;
  --spacing-56: 56px;
  --spacing-96: 96px;
  --spacing-120: 120px;

  /* Layout Widths */
  --content-max-width: 1200px;
  --menu-width: 380px;
}

@media (max-width: 768px) {
  :root {
    --menu-width: 100%;
  }
}

/* Local Fonts Self-Hosting (DSGVO compliant) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/inter-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/inter-500.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-400.woff2') format('woff2');
}

/* Velvetyne Open-Source Fonts */
@font-face {
  font-family: 'Le Murmure';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/velvetyne/lemurmure-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Steps Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/velvetyne/steps-mono-mono.woff2') format('woff2');
}

@font-face {
  font-family: 'Steps Mono';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('../fonts/velvetyne/steps-mono-thin.woff2') format('woff2');
}

/* ==========================================================================
   LOCAL SELF-HOSTED GOOGLE FONTS (100% DSGVO & TDDDG COMPLIANT)
   ========================================================================== */
/* Space Grotesk */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/google/SpaceGrotesk-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/google/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
}

/* Klee One */
@font-face {
  font-family: 'Klee One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/google/KleeOne-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Klee One';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/google/KleeOne-SemiBold.ttf') format('truetype');
}

/* Zen Kaku Gothic New */
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/google/ZenKakuGothicNew-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/google/ZenKakuGothicNew-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/google/ZenKakuGothicNew-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/google/ZenKakuGothicNew-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/google/ZenKakuGothicNew-Black.ttf') format('truetype');
}

/* Caveat */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/google/Caveat-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/google/Caveat-VariableFont_wght.ttf') format('truetype');
}

/* Kalam */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/google/Kalam-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/google/Kalam-Bold.ttf') format('truetype');
}

/* Patrick Hand */
@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/google/PatrickHand-Regular.ttf') format('truetype');
}

/* Architects Daughter */
@font-face {
  font-family: 'Architects Daughter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/google/ArchitectsDaughter-Regular.ttf') format('truetype');
}

/* ==========================================================================
   BASE STYLES & RESET
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.5;
  background-color: var(--color-obsidian, #000000);
  color: var(--color-paper-white, #ffffff);
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   SMOOTH ANIMATED DYNAMIC SVG CURSOR SYSTEM (120FPS GPU ACCELERATED)
   ========================================================================== */

html, body, *, *::before, *::after {
  cursor: none !important;
}

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  pointer-events: none !important;
  z-index: 2147483647 !important;
  opacity: 0;
  will-change: transform;
  transition: opacity 0.15s ease;
  transform: translate3d(-100px, -100px, 0);
  transform-origin: 16px 2px;
}

body.cursor-active .custom-cursor {
  opacity: 1;
}

.cursor-svg {
  width: 32px;
  height: 32px;
  overflow: visible;
  display: block;
  transform-origin: 16px 2px;
  transform: rotate(0deg);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.cursor-outer-chevron {
  stroke: #ffd900;
  stroke-width: 2.4;
  fill: none;
}

.cursor-outer-base {
  stroke: #ffd900;
  stroke-width: 2.4;
  opacity: 0;
  transition: opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover over clickable elements: bottom line closes into a crisp triangle Δ and tilts 45° to the left */
.custom-cursor.cursor-hover .cursor-svg {
  transform: rotate(-45deg);
}

.custom-cursor.cursor-hover .cursor-outer-base,
.custom-cursor.cursor-clicking .cursor-outer-base {
  opacity: 1;
}

/* Inner Concentric Triangle */
.cursor-inner-triangle {
  fill: #ffd900;
  transform-origin: 16px 28px;
  transform: scale(1);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ACTIVE CLICK EXPANSION: Smoothly grows from the baseline upwards to fill the whole triangle */
.custom-cursor.cursor-clicking .cursor-inner-triangle,
body.is-clicking .custom-cursor .cursor-inner-triangle {
  transform: scale(1.9231);
  transition: transform 0.12s cubic-bezier(0.08, 0.82, 0.17, 1);
}

html {
  overflow-x: hidden;
  background-color: #ffffff;
}

body {
  /* Removed overflow-x hidden to prevent double scrollbar bug */
  background-color: #ffffff;
}

img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

button, input, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  border-radius: 0;
}

/* Accessibility Focus Outline */
*:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
}

/* Skip Link for Accessibility */
.skip-link {
  position: absolute;
  top: -100px;
  left: 20px;
  background: var(--color-brand);
  color: var(--color-obsidian);
  padding: 10px 20px;
  z-index: 10001;
  font-weight: var(--font-weight-medium);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 20px;
  outline: none;
}

/* ==========================================================================
   GLOBAL LAYOUT STRUCTURE
   ========================================================================== */
section {
  position: relative;
  width: 100%;
  padding: var(--spacing-96) 0;
  overflow: hidden;
}

.section-dark {
  background-color: var(--color-obsidian);
  color: var(--color-paper-white);
}

.section-light {
  background-color: var(--color-paper-white);
  color: var(--color-obsidian);
}

.section-gray {
  background-color: var(--color-paper-white);
  color: var(--color-obsidian);
}

.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-56);
}

@media (max-width: 768px) {
  section {
    padding: var(--spacing-56) 0;
  }
  .container {
    padding: 0 var(--spacing-24);
  }
}

/* ==========================================================================
   TYPOGRAPHY UTILITIES
   ========================================================================== */
.text-display {
  font-size: clamp(36px, 8vw, 74px);
  font-weight: var(--font-weight-regular);
  line-height: 0.92;
  letter-spacing: clamp(-1.44px, -0.4vw, -2.96px);
  text-transform: uppercase;
  font-feature-settings: "cpsp";
}

.text-heading-lg {
  font-size: clamp(26px, 4vw, 42px);
  font-weight: var(--font-weight-regular);
  line-height: 1.1;
  letter-spacing: -1.5px;
}

.text-heading-sm {
  font-size: clamp(18px, 2.5vw, 21px);
  font-weight: var(--font-weight-regular);
  line-height: 1.3;
  letter-spacing: -0.18px;
}

.text-subheading {
  font-size: clamp(15px, 2vw, 18px);
  font-weight: var(--font-weight-regular);
  line-height: 1.33;
  letter-spacing: -0.09px;
}

.text-body {
  font-size: 15px;
  line-height: 1.5;
  font-weight: var(--font-weight-regular);
}

.text-caption {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.14px;
  text-transform: uppercase;
  color: var(--color-smoke);
}

.section-title {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-9);
  margin-bottom: var(--spacing-36);
}

.section-title .divider {
  width: 100%;
  height: 1px;
}

.section-dark .section-title .divider {
  background-color: var(--color-smoke);
}

.section-light .section-title .divider,
.section-gray .section-title .divider {
  background-color: var(--color-bone);
}

/* ==========================================================================
   NAVIGATION BAR
   ========================================================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1002;
  background-color: transparent;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, color 0.3s ease, border-color 0.3s ease;
  padding: 40px 0 var(--spacing-24) 0;
  pointer-events: none; /* Lässt Maus-Hover durch die obere transparente Leiste auf "A TOAST TO AI" hindurchgreifen! */
}

.header-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: 0 var(--spacing-36);
  pointer-events: none;
}

.header-left,
.header-center,
.header-right {
  pointer-events: auto; /* Interaktive Navigations-Buttons bleiben zu 100% klickbar */
}

.header-left {
  justify-self: start;
}

.header-center {
  justify-self: center;
}

.header-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
}

/* Menu Toggle Button */
.menu-trigger {
  position: relative !important;
  display: flex;
  align-items: center;
  gap: var(--spacing-9);
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 7px;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}

body:not(.menu-open) .menu-trigger:hover .hamburger span:first-child {
  transform: translateY(-2px);
}

body:not(.menu-open) .menu-trigger:hover .hamburger span:last-child {
  transform: translateY(2px);
}

.menu-label,
.menu-label-menu,
.menu-label-close {
  font-family: var(--font-klee, 'Klee One', sans-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 1.2px;
  transform: translateY(-0.5px);
}

.menu-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1ch;
  text-align: center;
  position: relative;
  will-change: transform;
}

/* Optical kerning compensation for open glyph shapes in horizontal MENÜ */
.menu-label-menu .letter-n {
  margin-left: -0.8px;
}

/* Logo Sizing & Dynamic Coloring */
.nav-logo {
  display: inline-block;
  height: 28px;
  aspect-ratio: 3370.82 / 2384.24;
}

/* Symbol-only mode: crop to just the icon mark (left portion of SVG) */
.nav-logo--symbol {
  height: 48px;
  width: 48px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible; /* Allow slogans to slide out */
  transform-origin: center center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(1.2) rotate(0deg); /* 20% larger in idle state */
}

/* Hover-Drehung: Dreht das gesamte Logo um 90° im Uhrzeigersinn auf Hover (behält scale 1.2 bei), und bei mouseleave geschmeidig zurück auf 0° */
.nav-logo--symbol:hover,
body.menu-open-at-top .nav-logo--symbol,
body.header-active .nav-logo--symbol:hover {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(1.2) rotate(90deg);
}

.nav-logo--symbol svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Individual parts inside SVG symbol */
.nav-logo .logo-part {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translate(0, 0) scale(1);
  transform-origin: center;
}

/* Drift apart diagonally on hover by equal X and Y amounts in local SVG space, and shrink to 75% */
.nav-logo--symbol:hover .part-tl {
  transform: translate(-180px, -180px) scale(0.75);
}
.nav-logo--symbol:hover .part-tr {
  transform: translate(180px, -180px) scale(0.75);
}
.nav-logo--symbol:hover .part-bl {
  transform: translate(-180px, 180px) scale(0.75);
}
.nav-logo--symbol:hover .part-br {
  transform: translate(180px, 180px) scale(0.75);
}

/* Slogan text absolute styles */
.logo-slogan {
  position: absolute;
  font-family: var(--font-primary);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-brand);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  transform-origin: center center;
}

.slogan-n {
  bottom: 100%;
  left: 50%;
  width: 60px;
  margin-left: -30px;
  text-align: center;
  transform: translateY(12px) rotate(90deg) scale(0.3);
}

.slogan-s {
  top: 100%;
  left: 50%;
  width: 60px;
  margin-left: -30px;
  text-align: center;
  transform: translateY(-12px) rotate(90deg) scale(0.3);
}

.slogan-w {
  right: 100%;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 0.95;
  transform: translateY(-2.5px) translateX(12px) rotate(90deg) scale(0.3);
}

.slogan-e {
  left: 100%;
  top: 50%;
  width: 24px;
  height: 50px;
  margin-top: -25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 0.95;
  transform: translateY(-2.5px) translateX(-12px) rotate(90deg) scale(0.3);
}

/* Hover active states (slide out radially, fade in, rotate to -90deg and scale to 0.9 for 10% smaller words) */
.nav-logo--symbol:hover .logo-slogan {
  opacity: 1;
}
.nav-logo--symbol:hover .slogan-n {
  transform: translateY(-8px) rotate(-90deg) scale(0.9);
}
.nav-logo--symbol:hover .slogan-s {
  transform: translateY(0px) rotate(-90deg) scale(0.9);
}
.nav-logo--symbol:hover .slogan-w {
  transform: translateY(-2.5px) translateX(10px) rotate(-90deg) scale(0.9);
}
.nav-logo--symbol:hover .slogan-e {
  transform: translateY(-2.5px) translateX(6px) rotate(-90deg) scale(0.9);
}

.nav-logo svg {
  width: 100%;
  height: 100%;
}

.nav-logo svg path,
.nav-logo svg use,
.footer-logo svg path,
.footer-logo svg use {
  fill: currentColor !important;
}

.nav-logo svg use[stroke],
.footer-logo svg use[stroke] {
  stroke: currentColor !important;
}


/* Header Socials */
.header-socials {
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
}

.social-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand);
  width: 24px;
  height: 24px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center center;
}

.social-icon-btn svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5px;
}

.social-icon-btn:hover {
  transform: scale(1.2);
}

/* Language Toggle Button */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-klee, 'Klee One', sans-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: currentColor;
  transform: translateY(-0.5px);
}

.lang-btn {
  padding: 2px 1px;
  opacity: 0.45;
  font-weight: 400;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.lang-btn.active {
  font-weight: 400;
  opacity: 1;
}

.lang-btn:hover {
  opacity: 1;
}

.lang-separator {
  opacity: 0.5;
  margin: 0 1px;
}

/* ==========================================================================
   DYNAMIC BACKGROUND-AWARE THEMES (DATA-BG-THEME)
   ========================================================================== */

/* Gold theme (unscrolled top of the page) */
[data-bg-theme="gold"] {
  color: var(--color-brand) !important;
}
[data-bg-theme="gold"].nav-logo,
[data-bg-theme="gold"] .nav-logo {
  color: var(--color-brand) !important;
}
[data-bg-theme="gold"] .logo-slogan {
  color: var(--color-brand) !important;
}
[data-bg-theme="gold"] .lang-btn.active {
  color: var(--color-brand) !important;
  opacity: 1;
}
[data-bg-theme="gold"].social-icon-btn,
[data-bg-theme="gold"] .social-icon-btn {
  color: var(--color-brand) !important;
}
[data-bg-theme="gold"].menu-trigger,
[data-bg-theme="gold"] .menu-trigger {
  color: var(--color-brand) !important;
}

/* Dark background theme (white elements, gold hover) */
[data-bg-theme="dark-bg"] {
  color: var(--color-paper-white) !important;
}
[data-bg-theme="dark-bg"].nav-logo,
[data-bg-theme="dark-bg"] .nav-logo {
  color: var(--color-paper-white) !important;
}
[data-bg-theme="dark-bg"] .logo-slogan {
  color: var(--color-paper-white) !important;
}
[data-bg-theme="dark-bg"] .lang-btn.active {
  color: var(--color-paper-white) !important;
  opacity: 1;
}
[data-bg-theme="dark-bg"].social-icon-btn,
[data-bg-theme="dark-bg"] .social-icon-btn {
  color: var(--color-paper-white) !important;
}
[data-bg-theme="dark-bg"].menu-trigger,
[data-bg-theme="dark-bg"] .menu-trigger {
  color: var(--color-paper-white) !important;
}

/* Light background theme (black elements, gold hover) */
[data-bg-theme="light-bg"] {
  color: var(--color-obsidian) !important;
}
[data-bg-theme="light-bg"].nav-logo,
[data-bg-theme="light-bg"] .nav-logo {
  color: var(--color-obsidian) !important;
}
[data-bg-theme="light-bg"] .logo-slogan {
  color: var(--color-obsidian) !important;
}
[data-bg-theme="light-bg"] .lang-btn.active {
  color: var(--color-obsidian) !important;
  opacity: 1;
}
[data-bg-theme="light-bg"].social-icon-btn,
[data-bg-theme="light-bg"] .social-icon-btn {
  color: var(--color-obsidian) !important;
}
[data-bg-theme="light-bg"].menu-trigger,
[data-bg-theme="light-bg"] .menu-trigger {
  color: var(--color-obsidian) !important;
}

@media (max-width: 768px) {
  .header-container {
    padding: 0 var(--spacing-24);
  }
  .menu-label {
    display: none; /* Hide 'MENU' text on mobile, hamburger only */
  }
  .header-socials {
    display: none; /* Move socials to hamburger menu on mobile */
  }
}

/* ==========================================================================
   MENU OVERLAY (HAMBURGER OPEN STATE)
   ========================================================================== */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--menu-width);
  height: 100vh;
  background-color: var(--color-obsidian);
  color: var(--color-paper-white);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--spacing-120) var(--spacing-36) var(--spacing-56) var(--spacing-36);
  transform: translateX(-100%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s;
  box-shadow: none !important;
  visibility: hidden;
  overflow-x: hidden; /* Clips any indicator parts extending past the right sidebar border line */
}

.menu-overlay.open {
  transform: translateX(0);
  visibility: visible;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5) !important;
}

.menu-background-video {
  position: absolute;
  top: -60px; /* shift up to crop out top black bars from the video export */
  left: 0;
  width: 100%;
  height: calc(100% + 120px); /* expand height to cover the vertical offset */
  object-fit: cover;
  object-position: center top; /* align video to the top edge to avoid cropping the header */
  opacity: 0;
  transition: none !important; /* Instant snap on show and hide */
  z-index: 1; /* In front of canvas (z-0) when playing */
  pointer-events: none;
}

#menu-services-video {
  transform: scaleX(-1); /* mirror horizontally */
}

.menu-nav,
.menu-footer {
  position: relative;
  z-index: 2;
}

/* Sidebar Right Border and Indicator */
.menu-border-line {
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: var(--color-paper-white);
  transition: background-color 0.3s ease, width 0.3s ease;
  z-index: 10;
}

.menu-indicator {
  position: absolute;
  top: 0; /* Fixed reference at vertical top of overlay */
  right: 0;
  width: 24px;
  height: 24px;
  margin-top: -12px; /* Center vertically on 24px height */
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0px, 0px, 0) scaleX(0);
  transform-origin: right center;
  transition: none !important; /* Instant color & transform without delay */
  color: var(--color-paper-white);
  z-index: 11;
}

.menu-indicator svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Interactive Menu Matrix Logo Grid Canvas Overlay */
.menu-logo-grid-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0; /* Behind background videos (z-1) and menu-nav/menu-footer (z-2) */
  opacity: 1;
  transition: opacity 0.35s ease;
}

/* Fade out ghost stamp canvas when a menu item is hovered (video animation playing) */
.menu-overlay.menu-hovered .menu-logo-grid-canvas {
  opacity: 0 !important;
}

.menu-indicator-line {
  position: absolute;
  top: 3px; /* Center vertically on 24px indicator height (base height 18px) */
  left: 25px; /* Exactly 1px gap from triangle base at 24px */
  width: 0;
  height: 18px; /* Matches the vertical base height of the flatter triangle */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='18' viewBox='0 0 19 18'%3E%3Csvg x='0' y='0' width='18' height='18' viewBox='281.8 622 1120 1120'%3E%3Cg fill='%23ffd900'%3E%3Cpath d='M322.096 623.455L322.096 623.455C343.379 623.455 360.632 640.709 360.632 661.992L360.632 1162.97L283.559 1162.97L283.559 661.992C283.559 640.709 300.812 623.455 322.096 623.455Z'/%3E%3Cpath d='M281.837 1238.66L281.837 1238.66C281.837 1259.94 299.091 1277.19 320.374 1277.19L821.352 1277.19L821.352 1200.12L320.374 1200.12C299.091 1200.12 281.837 1217.37 281.837 1238.66Z'/%3E%3Cpath d='M898.425 1739.64L898.425 1739.64C919.709 1739.64 936.962 1722.38 936.962 1701.1L936.962 1200.12L859.889 1200.12L859.889 1701.1C859.889 1722.38 877.142 1739.64 898.425 1739.64Z'/%3E%3Cpath d='M1400.86 1123.05L1400.86 1123.05C1400.86 1101.76 1383.6 1084.51 1362.32 1084.51L861.342 1084.51L861.342 1161.58L1362.32 1161.58C1383.6 1161.58 1400.86 1144.33 1400.86 1123.05Z'/%3E%3Cpath d='M476.243 623.455L476.243 623.455L514.779 623.455L514.779 1124.43C514.779 1145.72 497.526 1162.97 476.243 1162.97L476.243 1162.97C454.959 1162.97 437.706 1145.72 437.706 1124.43L437.706 623.455L476.243 623.455Z'/%3E%3Cpath d='M281.837 1392.8L281.837 1392.8L281.837 1431.34L782.815 1431.34C804.098 1431.34 821.352 1414.09 821.352 1392.8L821.352 1392.8C821.352 1371.52 804.098 1354.27 782.815 1354.27L281.837 1354.27L281.837 1392.8Z'/%3E%3Cpath d='M1052.57 1739.64L1052.57 1739.64L1091.11 1739.64L1091.11 1238.66C1091.11 1217.37 1073.86 1200.12 1052.57 1200.12L1052.57 1200.12C1031.29 1200.12 1014.04 1217.37 1014.04 1238.66L1014.04 1739.64L1052.57 1739.64Z'/%3E%3Cpath d='M1400.86 968.9L1400.86 968.9L1400.86 930.364L899.879 930.364C878.596 930.364 861.342 947.617 861.342 968.9L861.342 968.9C861.342 990.184 878.596 1007.44 899.879 1007.44L1400.86 1007.44L1400.86 968.9Z'/%3E%3Cpath d='M668.927 623.455L630.39 661.992L668.927 623.455L668.927 1124.43C668.927 1145.72 651.673 1162.97 630.39 1162.97L630.39 1162.97C609.106 1162.97 591.853 1145.72 591.853 1124.43L591.853 623.455L668.927 623.455Z'/%3E%3Cpath d='M281.837 1585.49L320.374 1546.95L281.837 1585.49L782.815 1585.49C804.098 1585.49 821.352 1568.24 821.352 1546.95L821.352 1546.95C821.352 1525.67 804.098 1508.42 782.815 1508.42L281.837 1508.42L281.837 1585.49Z'/%3E%3Cpath d='M1245.26 1739.64L1206.72 1701.1L1245.26 1739.64L1245.26 1238.66C1245.26 1217.37 1228 1200.12 1206.72 1200.12L1206.72 1200.12C1185.44 1200.12 1168.18 1217.37 1168.18 1238.66L1168.18 1739.64L1245.26 1739.64Z'/%3E%3Cpath d='M1400.86 776.217L1362.32 814.753L1400.86 776.217L899.879 776.217C878.596 776.217 861.342 793.47 861.342 814.753L861.342 814.753C861.342 836.037 878.596 853.29 899.879 853.29L1400.86 853.29L1400.86 776.217Z'/%3E%3Cpath d='M784.498 623.455L784.575 623.455C805.837 623.455 823.074 640.692 823.074 661.954L823.074 1162.97L746 1162.97L746 661.954C746 640.692 763.236 623.455 784.498 623.455Z'/%3E%3Cpath d='M281.837 1701.06L281.837 1701.14C281.837 1722.4 299.073 1739.64 320.335 1739.64L821.352 1739.64L821.352 1662.56L320.335 1662.56C299.073 1662.56 281.837 1679.8 281.837 1701.06Z'/%3E%3Cpath d='M1360.83 1739.64L1360.91 1739.64C1382.17 1739.64 1399.4 1722.4 1399.4 1701.14L1399.4 1200.12L1322.33 1200.12L1322.33 1701.14C1322.33 1722.4 1339.57 1739.64 1360.83 1739.64Z'/%3E%3Cpath d='M1400.86 660.645L1400.86 660.568C1400.86 639.306 1383.62 622.07 1362.36 622.07L861.342 622.07L861.342 699.143L1362.36 699.143C1383.62 699.143 1400.86 681.907 1400.86 660.645Z'/%3E%3Cpath d='M322.096 623.455L476.243 623.455C497.526 623.455 514.779 640.709 514.779 661.992L514.779 661.992C514.779 683.275 497.526 700.529 476.243 700.529L322.096 700.529C300.812 700.529 283.559 683.275 283.559 661.992L283.559 661.992C283.559 640.709 300.812 623.455 322.096 623.455Z'/%3E%3Cpath d='M281.837 1238.66L281.837 1392.8C281.837 1414.09 299.091 1431.34 320.374 1431.34L320.374 1431.34C341.657 1431.34 358.911 1414.09 358.911 1392.8L358.911 1238.66C358.911 1217.37 341.657 1200.12 320.374 1200.12L320.374 1200.12C299.091 1200.12 281.837 1217.37 281.837 1238.66Z'/%3E%3Cpath d='M898.425 1739.64L1052.57 1739.64C1073.86 1739.64 1091.11 1722.38 1091.11 1701.1L1091.11 1701.1C1091.11 1679.82 1073.86 1662.56 1052.57 1662.56L898.425 1662.56C877.142 1662.56 859.889 1679.82 859.889 1701.1L859.889 1701.1C859.889 1722.38 877.142 1739.64 898.425 1739.64Z'/%3E%3Cpath d='M1400.86 1123.05L1400.86 968.9C1400.86 947.617 1383.6 930.364 1362.32 930.364L1362.32 930.364C1341.04 930.364 1323.78 947.617 1323.78 968.9L1323.78 1123.05C1323.78 1144.33 1341.04 1161.58 1362.32 1161.58L1362.32 1161.58C1383.6 1161.58 1400.86 1144.33 1400.86 1123.05Z'/%3E%3Cpath d='M476.243 1085.9L630.39 1085.9C651.673 1085.9 668.927 1103.15 668.927 1124.43L668.927 1124.43C668.927 1145.72 651.673 1162.97 630.39 1162.97L476.243 1162.97C454.959 1162.97 437.706 1145.72 437.706 1124.43L437.706 1124.43C437.706 1103.15 454.959 1085.9 476.243 1085.9Z'/%3E%3Cpath d='M744.278 1392.8L744.278 1546.95C744.278 1568.24 761.532 1585.49 782.815 1585.49L782.815 1585.49C804.098 1585.49 821.352 1568.24 821.352 1546.95L821.352 1392.8C821.352 1371.52 804.098 1354.27 782.815 1354.27L782.815 1354.27C761.532 1354.27 744.278 1371.52 744.278 1392.8Z'/%3E%3Cpath d='M1052.57 1277.19L1206.72 1277.19C1228 1277.19 1245.26 1259.94 1245.26 1238.66L1245.26 1238.66C1245.26 1217.37 1228 1200.12 1206.72 1200.12L1052.57 1200.12C1031.29 1200.12 1014.04 1217.37 1014.04 1238.66L1014.04 1238.66C1014.04 1259.94 1031.29 1277.19 1052.57 1277.19Z'/%3E%3Cpath d='M938.416 968.9L938.416 814.753C938.416 793.47 921.162 776.217 899.879 776.217L899.879 776.217C878.596 776.217 861.342 793.47 861.342 814.753L861.342 968.9C861.342 990.184 878.596 1007.44 899.879 1007.44L899.879 1007.44C921.162 1007.44 938.416 990.184 938.416 968.9Z'/%3E%3Cpath d='M630.39 623.455L784.537 623.455C805.82 623.455 823.074 640.709 823.074 661.992L823.074 661.992C823.074 683.275 805.82 700.529 784.537 700.529L630.39 700.529C619.467 700.529 609.606 695.985 602.594 688.684C595.942 681.759 591.853 672.353 591.853 661.992L591.853 661.992C591.853 640.709 609.106 623.455 630.39 623.455Z'/%3E%3Cpath d='M281.837 1546.95L281.837 1701.1C281.837 1722.38 299.091 1739.64 320.374 1739.64L320.374 1739.64C341.657 1739.64 358.911 1722.38 358.911 1701.1L358.911 1546.95C358.911 1536.03 354.367 1526.17 347.066 1519.16C340.141 1512.5 330.735 1508.42 320.374 1508.42L320.374 1508.42C299.091 1508.42 281.837 1525.67 281.837 1546.95Z'/%3E%3Cpath d='M1206.72 1739.64L1360.87 1739.64C1382.15 1739.64 1399.4 1722.38 1399.4 1701.1L1399.4 1701.1C1399.4 1679.82 1382.15 1662.56 1360.87 1662.56L1206.72 1662.56C1195.8 1662.56 1185.94 1667.11 1178.92 1674.41C1172.27 1681.33 1168.18 1690.74 1168.18 1701.1L1168.18 1701.1C1168.18 1722.38 1185.44 1739.64 1206.72 1739.64Z'/%3E%3Cpath d='M1400.86 814.753L1400.86 660.606C1400.86 639.323 1383.6 622.07 1362.32 622.07L1362.32 622.07C1341.04 622.07 1323.78 639.323 1323.78 660.606L1323.78 814.753C1323.78 825.676 1328.33 835.537 1335.63 842.549C1342.55 849.201 1351.96 853.29 1362.32 853.29L1362.32 853.29C1383.6 853.29 1400.86 836.037 1400.86 814.753Z'/%3E%3Cpath d='M470.587 854.676L647.155 854.676L647.155 931.749L470.587 931.749L470.587 854.676Z'/%3E%3Cpath d='M513.058 1387.15L513.058 1563.72L590.131 1563.72L590.131 1387.15L513.058 1387.15Z'/%3E%3Cpath d='M1046.92 1508.42L1223.48 1508.42L1223.48 1431.34L1046.92 1431.34L1046.92 1508.42Z'/%3E%3Cpath d='M1169.64 974.556L1169.64 797.988L1092.56 797.988L1092.56 974.556L1169.64 974.556Z'/%3E%3C/g%3E%3C/svg%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 19px 18px;
  background-position: left center;
  transform-origin: left;
  z-index: -1;
}

.menu-overlay.menu-hovered .menu-border-line {
  background-color: var(--color-brand);
  width: 3px;
}

.menu-overlay.menu-hovered .menu-indicator {
  color: var(--color-brand);
}

/* Sidebar Preview Accordion Sibling Description */
.menu-link-desc {
  font-family: var(--font-klee, 'Klee One', sans-serif);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-brand);
  line-height: 1.5;
  text-transform: none; /* Keep natural casing for description text */
  letter-spacing: 0.01em;
  height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0px;
  margin-bottom: 0px;
  transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.3s ease, 
              margin-top 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              margin-bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.menu-nav-link.active {
  color: var(--color-brand) !important;
}

/* Off-canvas page content and header shifting */
#main,
.header-center,
.header-right {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

/* 1. At top of page (scrollY < 10): Shift entire #main and blur ONLY .hero-overlay BEHIND .hero-content so central logo stays 100% CRISP! */
body.menu-open-at-top #main {
  transform: translateX(var(--menu-width));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

body.menu-open-at-top .hero-overlay {
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  background: rgba(0, 0, 0, 0.5) !important;
  transition: backdrop-filter 0.6s cubic-bezier(0.16, 1, 0.3, 1), -webkit-backdrop-filter 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.menu-open-at-top .hero-brand-group {
  transform: scale(2);
  position: relative;
  z-index: 10 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* 2. Scrolled down (scrollY >= 10): Base transition for smooth return when menu closes */
#hero,
#work,
#work.section-work-skizze,
#services,
#contact,
.faq-branch-answer-layer,
.faq-omikuji-particle-canvas,
#faq-contact-transition-overlay {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.menu-open:not(.menu-open-at-top) #main {
  transform: none !important;
  filter: none !important;
}

/* Shift active visible sections to the right */
body.menu-open:not(.menu-open-at-top) #hero,
body.menu-open:not(.menu-open-at-top) #work,
body.menu-open:not(.menu-open-at-top) #services,
body.menu-open:not(.menu-open-at-top) #contact,
body.menu-open:not(.menu-open-at-top) .faq-branch-answer-layer,
body.menu-open:not(.menu-open-at-top) .faq-omikuji-particle-canvas,
body.menu-open:not(.menu-open-at-top) #faq-contact-transition-overlay {
  transform: translateX(var(--menu-width)) !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Fixed viewport pinning for Services & FAQ while menu is open or closing to prevent position:sticky collapse */
body.menu-open-services #services {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  box-sizing: border-box !important;
  z-index: 10 !important;
  overflow: visible !important;
  padding: 95px 0 50px 0 !important;
}

/* Hide all section indicator badges when menu is open so they never poke through or attach to the menu drawer */
body.menu-open .work-section-badge-wrapper,
body.menu-open .about-section-badge-wrapper,
body.menu-open .services-section-badge-wrapper,
body.menu-open .contact-section-badge-wrapper {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* 3. Dedicated Scrolled Menu Glass Backdrop Blur & 20% Black Overlay */
.menu-scrolled-blur-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(0, 0, 0, 0.2);
  z-index: 1000; /* Behind .menu-overlay (1001) & .header (1002), above shifted page sections */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s ease;
}

body.menu-open:not(.menu-open-at-top) .menu-scrolled-blur-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Guarantee Work and About sections retain their full visible backgrounds when menu is opened while scrolled down */
body.menu-open:not(.menu-open-at-top) #work {
  background-color: #ffffff !important;
}

body.menu-open:not(.menu-open-at-top) #work .work-main-frame:not(.about-active) {
  background-color: #ffffff !important;
}

/* 4. Central Logo Fly-In Overlay when Menu is opened while scrolled down */
.menu-scrolled-logo-overlay {
  position: fixed;
  top: 50%;
  left: calc(50% + (var(--menu-width) / 2)); /* Centered in the remaining view area right of the menu! */
  transform: translate(-50%, -50%) translateX(100vw);
  width: clamp(520px, 80vw, 960px); /* 1:1 identical to Startseite scale(2) menu size! */
  height: auto;
  z-index: 10005; /* Above backdrop blur and menu overlay */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, visibility 0.4s ease;
  filter: none !important;
  -webkit-filter: none !important;
}

.menu-scrolled-brand-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px; /* Scale-2 parity with 6px Startseite gap */
  align-items: center;
  justify-content: center;
}

.menu-scrolled-logo-wrap {
  width: 100%;
  height: auto;
  display: block;
}

.menu-scrolled-logo-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

.menu-scrolled-subtitle {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Active state when menu is opened while scrolled down: flies in from outside right screen edge into exact center! */
body.menu-open:not(.menu-open-at-top) .menu-scrolled-logo-overlay {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) translateX(0);
}

/* 5. Header Bar Evasion & Delayed Return with 90° Clockwise Spin */
@media (min-width: 769px) {
  body.menu-open-at-top .header-center {
    transform: translateX(calc(var(--menu-width) / 2));
  }
  body.menu-open-at-top .header-right {
    transform: none; /* Keep socials/switcher fixed on the right on Startseite */
  }

  body.menu-open:not(.menu-open-at-top) .header-right {
    transform: translateX(calc(100% + 80px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease !important;
  }

  body.menu-open:not(.menu-open-at-top) .header-center {
    transform: translateX(240px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease !important;
  }

  /* Delayed smooth return when menu closes in scrolled state */
  body:not(.menu-open).header-active .header-center {
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.12s, opacity 0.4s ease 0.12s !important;
  }

  body:not(.menu-open).header-active .header-right {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease !important;
  }
}



@media (max-width: 768px) {
  body.menu-open .header-center,
  body.menu-open .header-right {
    opacity: 0;
    pointer-events: none;
  }
}

/* Hamburger lines turn into a cross */
body.menu-open .hamburger span:first-child {
  transform: translateY(3px) rotate(45deg);
}

body.menu-open .hamburger span:last-child {
  transform: translateY(-3px) rotate(-45deg);
}

/* Hover-Reaktion im geöffneten Menü: Jeder Strich des X dreht sich geschmeidig und minimal nach innen (von 45° auf 38°) */
body.menu-open .menu-trigger:hover .hamburger span:first-child {
  transform: translateY(3px) rotate(38deg);
}

body.menu-open .menu-trigger:hover .hamburger span:last-child {
  transform: translateY(-3px) rotate(-38deg);
}

/* Turn trigger color white when menu is open, brand yellow on hover */
body.menu-open .menu-trigger {
  color: var(--color-paper-white) !important;
  transition: color 0.3s ease;
}

body.menu-open .menu-trigger:hover,
body.menu-open.contact-section-active .menu-trigger:hover,
body.menu-open.transition-dark-active .menu-trigger:hover {
  color: var(--color-brand, #ffd900) !important;
}

body.menu-open .menu-trigger:hover .hamburger span,
body.menu-open.contact-section-active .menu-trigger:hover .hamburger span,
body.menu-open.transition-dark-active .menu-trigger:hover .hamburger span {
  background-color: var(--color-brand, #ffd900) !important;
}

/* Toggle menu and close labels */
.menu-label-close {
  display: none !important;
}

body.menu-open .menu-label-menu {
  display: none !important;
}

/* 1. Horizontal Close Label (when menu is opened at the top of the page) */
body.menu-open .menu-label-close {
  display: inline-flex !important;
  align-items: center !important;
  position: static !important;
  transform: none !important;
  margin: 0 !important;
}

body.menu-open .menu-label-close .menu-letter {
  display: inline !important;
  transform: none !important;
}

/* 2. Vertical Close Label (ONLY when menu is opened in scrolled vertical state) */
body.menu-open.header-active .menu-label-close {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  position: absolute !important;
  top: 20px !important;
  left: 14px !important; /* Centered under the 28px wide X icon */
  transform: translateX(-50%) !important;
  margin: 0 !important;
  width: max-content !important;
}

body.menu-open.header-active .menu-label-close .menu-letter {
  display: block !important;
  text-align: center !important;
  transform: none !important;
}

/* Guarantee header-left is pinned at fixed position without evasion shifts when menu is open */
body.menu-open .header-left {
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.menu-nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  margin-top: auto;
  margin-bottom: auto;
  transform: translateY(10vh); /* 10% tiefer auf der Y-Achse zur Entzerrung unter dem Schließen-Button */
  padding-left: 0; /* Prevents user-agent styling indents */
  margin-left: 0;
}

.menu-nav-item {
  list-style: none;
  padding-left: 0; /* Prevents user-agent styling indents */
  margin-left: 0;
  position: relative;
}

.menu-nav-item::before {
  content: "";
  position: absolute;
  top: -22px; /* Symmetrical top gap (24px) above menu title */
  bottom: -2px; /* Snug bottom gap framing description */
  left: -36px;
  width: calc(var(--link-width, 200px) + 56px); /* dynamic width matching link text + padding */
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 80%, rgba(0, 0, 0, 0) 100%); /* opacity reduced to 0.6 (25% lower than 0.8) */
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-left: none;
  border-right: none;
  border-image: linear-gradient(90deg, var(--color-brand) 0%, var(--color-brand) 85%, rgba(255, 217, 0, 0) 100%) 1;
  z-index: -1;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease; /* snappy reset on mouseleave */
}

.menu-nav-item.menu-item-active::before,
.menu-nav-item.menu-item-preview::before {
  opacity: 1;
  transform: scaleX(1);
  transition: opacity 0.35s ease, transform 0.98s cubic-bezier(0.16, 1, 0.3, 1) 0.15s; /* delayed slide-out on hover, ending 16 frames later */
}

.menu-nav-link {
  display: inline-block;
  font-family: var(--font-murmure);
  font-size: clamp(46px, 7.8vw, 68px);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 400;
  line-height: 1.02;
  transition: color 0.25s ease, -webkit-text-stroke 0.25s ease, transform 0.25s ease;
}

.menu-nav-link.menu-hover-active {
  color: var(--color-brand) !important;
  -webkit-text-stroke: 0px transparent !important;
  transform: translateX(4px);
}

/* Hover-Fokus: Alle unberührten Menüpunkte werden zu 100% weißer Text-Outline (hohle Buchstaben) */
.menu-overlay.menu-hovered .menu-nav-item:not(.menu-item-active) .menu-nav-link:not(.menu-hover-active) {
  color: transparent !important;
  -webkit-text-stroke: 1.5px #ffffff !important;
}

.menu-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.menu-socials-mobile {
  display: none;
}

@media (max-width: 768px) {
  .menu-overlay {
    padding: var(--spacing-96) var(--spacing-24) var(--spacing-24) var(--spacing-24);
  }
  .menu-close {
    left: var(--spacing-24);
  }
  .menu-socials-mobile {
    display: flex;
    gap: var(--spacing-18);
    margin-bottom: var(--spacing-24);
  }
  .menu-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-18);
  }
}

/* ==========================================================================
   SECTION 1 — HERO / OPENING TITLE
   ========================================================================== */
/* Hero Pin Container (Gibt der Scroll-Animation 1700px gepinnte Scroll-Tiefe) */
.hero-pin-container {
  position: relative;
  z-index: 50;
  height: calc(13040px + 100vh);
  width: 100%;
  background-color: transparent !important;
  transition: none !important;
}

/* ==========================================================================
   SECTION 4 — SERVICES
   ========================================================================== */
.services-pin-container {
  position: relative;
  z-index: 10;
  height: calc(14000px + 100vh + 480px);
  width: 100%;
  padding-top: 480px;
  background-color: #ffffff;
}

.services-pin-container #services {
  position: sticky;
  top: 0;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  overflow: visible !important;
  padding: 95px 0 50px 0 !important;
  background-color: #ffffff;
}

/* Linksbündiger Sektions-Indikator Badge ("ARBEITEN" / "WORK") */
.work-section-badge-wrapper {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 70px;
  height: auto;
  padding: 32px 0;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000 !important; /* HARTE FIX: Liegt VOR .hero-pin-container (z-index 50), genau wie das Header-Logo (z-index 1002)! */
  pointer-events: auto !important;
  cursor: pointer;
  overflow: visible;
  border-radius: 0 !important; /* 100% scharfe, rechtwinklige Ecken laut Wunsch! */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.work-section-badge-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-top: 3px solid #000000;
  border-right: 3px solid #000000;
  border-bottom: 3px solid #000000;
  border-left: none;
  box-sizing: border-box;
  transform: translateX(-100%);
  transition: transform 0.05s linear, border-color 0.25s ease;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.work-section-badge-text-box,
.about-section-badge-text-box {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transform: translateX(-100%);
  transition: transform 0.05s linear;
  pointer-events: none;
}

.work-section-badge-text {
  position: relative;
  writing-mode: vertical-rl;
  transform: rotate(180deg); /* Perfekt vertikal lesbar von oben nach unten */
  font-family: var(--font-murmure, 'Le Murmure', sans-serif);
  font-size: 1.65rem;
  font-weight: 700;
  -webkit-text-stroke: 0.65px currentColor;
  paint-order: stroke fill;
  letter-spacing: 0.14em;
  color: #000000; /* Schwarze Schrift! */
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  line-height: 1;
  transition: color 0.25s ease, text-shadow 0.25s ease, -webkit-text-stroke 0.25s ease;
}

/* Linksbündiges Sektions-Indikator Badge für Sektion 3 ("ÜBER MICH" / "ABOUT ME") */
.about-section-badge-wrapper {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 70px;
  height: auto;
  padding: 32px 0;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000 !important;
  pointer-events: auto !important;
  cursor: pointer;
  overflow: visible;
  border-radius: 0 !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.about-section-badge-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-top: 3px solid #000000;
  border-right: 3px solid #000000;
  border-bottom: 3px solid #000000;
  border-left: none;
  box-sizing: border-box;
  transform: translateX(-100%);
  transition: transform 0.05s linear, border-color 0.25s ease;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.about-section-badge-text {
  position: relative;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-murmure, 'Le Murmure', sans-serif);
  font-size: 1.65rem;
  font-weight: 700;
  -webkit-text-stroke: 0.65px currentColor;
  paint-order: stroke fill;
  letter-spacing: 0.14em;
  color: #000000; /* Schwarze Schrift! */
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  line-height: 1;
  transition: color 0.25s ease, text-shadow 0.25s ease, -webkit-text-stroke 0.25s ease;
}

/* Work Badge Hover Video (100% Original & Unmodified) */
.work-section-badge-bg .badge-hover-video {
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: translate(-50%, -50%) scale(2.5) !important;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 1;
}

/* About Badge Hover Video (3.1x Zoom & Right-Shifted Picture Frame Focus, 10px lower position) */
.about-section-badge-bg .badge-hover-video {
  position: absolute;
  top: calc(50% + 10px) !important;
  left: 50% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 95% 15% !important;
  transform: translate(-50%, -50%) scale(3.1) !important;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 1;
}

/* Linksbündiges Sektions-Indikator Badge für Sektion 4 ("LEISTUNGEN" / "SERVICES") */
.services-section-badge-wrapper {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 70px;
  height: auto;
  padding: 32px 0;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000 !important;
  pointer-events: auto !important;
  cursor: pointer;
  overflow: visible;
  border-radius: 0 !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.services-section-badge-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-top: 3px solid #000000;
  border-right: 3px solid #000000;
  border-bottom: 3px solid #000000;
  border-left: none;
  box-sizing: border-box;
  transform: translateX(-100%);
  transition: transform 0.05s linear, border-color 0.25s ease;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.services-section-badge-text-box {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transform: translateX(-100%);
  transition: transform 0.05s linear;
  pointer-events: none;
}

.services-section-badge-text {
  position: relative;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-murmure, 'Le Murmure', sans-serif);
  font-size: 1.65rem;
  font-weight: 700;
  -webkit-text-stroke: 0.65px currentColor;
  paint-order: stroke fill;
  letter-spacing: 0.14em;
  color: #000000; /* Schwarze Schrift! */
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  line-height: 1;
  transition: color 0.25s ease, text-shadow 0.25s ease, -webkit-text-stroke 0.25s ease;
}

/* Services Badge Hover Video (HARD-LOCKED APPROVED VALUES v=quad-v1650) */
.services-section-badge-bg .badge-hover-video {
  position: absolute;
  top: var(--services-badge-top, 36%) !important;
  left: var(--services-badge-left, 50%) !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--services-badge-obj-pos, 50% 50%) !important;
  transform: translate(-50%, -50%) scale(var(--services-badge-scale, 2.95)) translate(var(--services-badge-x, 20px), var(--services-badge-y, -21px)) !important;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 1;
}

/* Interaktiver Maus-Hover Zustand: Zeigt das Standbild des letzten Video-Frames, Rahmen & Schrift werden Gelb (#ffd900) */
.work-section-badge-wrapper:hover .badge-hover-video,
.about-section-badge-wrapper:hover .badge-hover-video,
.services-section-badge-wrapper:hover .badge-hover-video,
body.services-badge-hover-pinned .services-section-badge-wrapper .badge-hover-video {
  opacity: 1 !important;
}

.work-section-badge-wrapper:hover .work-section-badge-bg,
.about-section-badge-wrapper:hover .about-section-badge-bg,
.services-section-badge-wrapper:hover .services-section-badge-bg,
body.services-badge-hover-pinned .services-section-badge-wrapper .services-section-badge-bg {
  border-color: #ffd900 !important;
  border-left: none !important;
  box-shadow: none !important;
}

.work-section-badge-wrapper:hover .work-section-badge-text,
.about-section-badge-wrapper:hover .about-section-badge-text,
.services-section-badge-wrapper:hover .services-section-badge-text,
body.services-badge-hover-pinned .services-section-badge-wrapper .services-section-badge-text {
  color: #ffd900 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 1) !important;
}

/* Linksbündiges Sektions-Indikator Badge für Sektion 5 ("KONTAKT" / "CONTACT") — Inverted Dark Theme */
.contact-section-badge-wrapper {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 70px;
  height: auto;
  padding: 32px 0;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000 !important;
  pointer-events: auto !important;
  cursor: pointer;
  overflow: visible;
  border-radius: 0 !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.contact-section-badge-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000000; /* Schwarzer Innenhintergrund */
  border-top: 3px solid #ffffff; /* Weißer Rahmen */
  border-right: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  border-left: none;
  box-sizing: border-box;
  transform: translateX(-100%);
  transition: transform 0.05s linear, border-color 0.25s ease;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.contact-section-badge-text-box {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transform: translateX(-100%);
  transition: transform 0.05s linear;
  pointer-events: none;
}

.contact-section-badge-text {
  position: relative;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-murmure, 'Le Murmure', sans-serif);
  font-size: 1.65rem;
  font-weight: 700;
  -webkit-text-stroke: 0.65px currentColor;
  paint-order: stroke fill;
  letter-spacing: 0.14em;
  color: #ffffff; /* Weiße Schrift */
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  line-height: 1;
  transition: color 0.25s ease, text-shadow 0.25s ease, -webkit-text-stroke 0.25s ease;
}

.contact-section-badge-wrapper:hover .contact-section-badge-bg {
  border-color: #ffd900 !important;
  border-left: none !important;
  box-shadow: none !important;
}

/* Contact Badge Hover Video (2.5x Zoom & Centered on Bowing Heads & Faces) */
.contact-section-badge-bg .badge-hover-video {
  position: absolute;
  top: var(--contact-badge-top, -20.0%) !important;
  left: var(--contact-badge-left, 46.0%) !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--contact-badge-obj-pos, 46.0% -20.0%) !important;
  transform: translate(-50%, -50%) scale(var(--contact-badge-scale, 2.50)) !important;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 1;
}

.contact-section-badge-wrapper:hover .badge-hover-video {
  opacity: 1 !important;
}

.contact-section-badge-wrapper:hover .contact-section-badge-text {
  color: #ffd900 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 1) !important;
}

/* Freeze all mouse hover interactions in Section 2 during zoom-out phase */
#work.zooming-out,
#work.zooming-out * {
  pointer-events: auto !important;
}

.hero-section {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
  background: #000 url('../assets/hero-bg.png') no-repeat;
  background-size: cover;
  background-position: 30% center;
  transition: background-size 0.6s cubic-bezier(0.16, 1, 0.3, 1), background-position 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 5;
}

@media (min-aspect-ratio: 1/1) {
  .hero-section {
    background-size: 110% auto;
    background-position: 10% center;
  }
}

@media (min-width: 769px) {
  body.menu-open .hero-section {
    background-size: calc(100vw - var(--menu-width)) auto !important;
    background-position: left center !important;
  }
}

/* Dark overlay for text readability over background image */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.4) 40%,
    rgba(0, 0, 0, 0.6) 100%
  );
  z-index: 6;
  pointer-events: none;
  transition: backdrop-filter 0.6s cubic-bezier(0.16, 1, 0.3, 1), -webkit-backdrop-filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
}

body.menu-open .hero-overlay {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Group containing logo and subtitle to match their widths precisely */
.hero-brand-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px; /* Tight, crisp alignment directly underneath the logo */
  width: clamp(260px, 40vw, 480px);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center center;
}

/* Hero shear effect canvas overlay (Covers Subtitle, Wordmark & Header Landing across full viewport) */
.hero-shear-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1005; /* On top of header (1002) and hero stage (50) for crystal clear particle visibility */
}

body.menu-open .hero-brand-group {
  transform: scale(2);
}

@media (min-width: 769px) {
  body.menu-open .hero-brand-group {
    transform: translateX(calc(-1 * var(--menu-width) / 2)) scale(2);
  }
}

/* Hero logo expands to full container width */
.hero-logo {
  display: block;
  width: 100%;
  height: auto;
}

/* Stämmiger gelber Marken-Balken mit eingestanzter Schrift & abgerundeten Ecken unten */
.hero-subtitle {
  position: relative;
  z-index: 25;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0 0 10px 10px; /* Oben eckig (0px), unten knackig abgerundet (10px) */
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Scroll indicator with custom longer-tail SVG arrow */
.scroll-indicator {
  position: absolute;
  bottom: var(--spacing-36);
  right: var(--spacing-56);
  width: 16px;
  height: 52px;
  color: var(--color-brand);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}

.scroll-indicator:hover {
  color: var(--color-brand) !important;
}

.scroll-arrow {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.arrow-shaft {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: 12px 58px;
}

.arrow-tip {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: 12px 58px;
}

.scroll-indicator:hover .scroll-arrow {
  transform: translateY(6px);
}

.scroll-indicator:hover .arrow-shaft {
  transform: scaleY(0.5);
}

.scroll-indicator:hover .arrow-tip {
  transform: scale(1.5);
}

@media (max-width: 768px) {
  .scroll-indicator {
    right: var(--spacing-24);
    bottom: var(--spacing-24);
    height: 44px;
  }
  .hero-brand-group {
    width: clamp(200px, 65vw, 320px);
  }
}

/* ==========================================================================
   SECTION 2 — PORTFOLIO / WORK
   ========================================================================== */
/* ==========================================================================
   SECTION 2 — WORK (EIN HAUPT-RECHTECK LAUT SKIZZE AUF WEISSEM GRUND)
   ========================================================================== */
#work.section-work-skizze {
  position: relative;
  z-index: 10;
  background-color: #ffffff !important;
  color: #000000;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 50px 60px; /* Generous padding so expanding outer border never clips! */
  box-sizing: border-box;
  overflow: visible;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.work-container {
  width: 100%;
  height: 100%;
  max-width: 1650px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible !important;
}

/* Das Haupt-Rechteck: BLEIBT 100% UNVERÄNDERT GLEICH GROSS & DIENT ALS SCHILD! */
.work-main-frame {
  position: relative; /* CRITICAL: Anchor clapperboard overlay across both left & right halves! */
  display: grid;
  grid-template-columns: 0.38fr 1.62fr;
  border: 3px solid #000000;
  background-color: #ffffff;
  flex-grow: 1;
  overflow: visible !important; /* ERMÖGLICHT SCHALTKREIS-LINIEN DAS DURCHSCHIESSEN DIREKT INS AUSSERE WEISS! */
  box-sizing: border-box;
  z-index: 20; /* Liegt VOR dem ausfahrbaren äußeren Rahmen! */
  transform: scale(1) !important; /* Bleibt felsenfest gleich groß! */
  transition: background-color 0.4s ease !important;
}

/* MOVIE CARD HOVER & ACTIVE & INLINE VIDEO: OBSIDIAN BLACK BACKGROUND */
.work-main-frame.card-hovered,
.work-main-frame.has-active,
.work-main-frame.inline-video-playing,
.work-main-frame.inline-video-closing {
  background-color: #000000 !important;
}

/* WORK LOGO RAIN CANVAS OVERLAY */
.work-logo-rain-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15 !important; /* Above dark dim overlay (z=10), BEHIND movie cards grid (z=20) */
  pointer-events: none;
  opacity: 0;
  filter: blur(0px); /* Startet beim Erstkontakt 100% gestochen scharf */
  transition: opacity 0.35s ease, filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-main-frame.card-hovered .work-logo-rain-canvas {
  opacity: 1;
}

.work-main-frame.video-hover-active .work-logo-rain-canvas,
.work-frame-right.video-hover-active .work-logo-rain-canvas {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Butterweicher, fließender Übergang auf 6px Unschärfe beim Start */
.work-logo-rain-canvas.is-blurred {
  filter: blur(6px) !important;
  transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* VORHANG-FALL OVERLAY INSIDE .WORK-MAIN-FRAME */
.work-curtain-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5000 !important; /* HARTE ABSICHERUNG: Liegt IMMER ÜBER dem About-Inhalt (z=1000)! */
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: none !important;
}

.work-curtain-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
}

.work-curtain-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* EINGEBETTETER ABOUT-ME INHALT INSIDE .WORK-MAIN-FRAME */
.work-frame-about {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 35; /* Liegt unter dem Vorhang-Overlay (z-index 5000) */
  isolation: isolate; /* ISOLIERT DEN STACKING CONTEXT: Kein Kind-Element (z-1000) schießt über den Vorhang! */
  background-color: #000000 !important; /* Solid Obsidian Black */
  color: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 20px 24px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: visible !important; /* UNTERBINDET JEGLICHE ABSCHNEIDUNG VON SCHALTKREIS-LINIEN INS WEISS! */
  transition: none !important;
}

.work-frame-about.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* STRIKTE SEKTIONS-ISOLIERUNG: Wenn die About-Me Sektion aktiv ist, werden ALLE Work-Sektion Hover-Effekte, 
   Play-Buttons und fliegenden Logos 100% unterbunden und deaktiviert! */
.work-frame-about.active ~ .work-frame-left,
.work-frame-about.active ~ .work-puzzle-bg-logo,
.work-frame-about.active ~ .work-outer-track,
.work-main-frame.about-active .work-frame-left,
.work-main-frame.about-active .work-puzzle-bg-logo,
.work-main-frame.about-active .work-logo-flyout,
.work-main-frame.about-active .movie-card-play-btn,
.work-main-frame.about-active .work-cards-grid,
.work-main-frame:has(.work-frame-about.active) .work-frame-left,
.work-main-frame:has(.work-frame-about.active) .work-puzzle-bg-logo,
.work-main-frame:has(.work-frame-about.active) .work-logo-flyout,
.work-main-frame:has(.work-frame-about.active) .movie-card-play-btn,
.work-main-frame:has(.work-frame-about.active) .work-cards-grid {
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.about-logo-grid-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* SVG CIRCUIT LINES OVERLAY LAYER (Extends outside top and bottom frame boundaries into white background!) */
.about-circuit-svg {
  position: absolute;
  top: -100px !important;
  left: 0;
  width: 100%;
  height: calc(100% + 200px) !important;
  pointer-events: none;
  z-index: 1000 !important; /* SCHIESST DURCH DAS SCHWARZE PADDING MIT FREIER SICHT DIRECT INTO WHITE! */
  overflow: visible !important;
}

.about-circuit-svg path,
.about-circuit-svg line {
  stroke: #ffffff;
  stroke-width: 1.5px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   SCROLL-DRIVEN CIRCUIT WIRE TRACING & WHITE-TO-BLACK FRAME REVEAL STYLES
   ========================================================================== */
.about-box,
.about-tag-item {
  transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
              color 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* INITIALER WEISSER ZUSTAND: Rein weiße Box, Schrift unsichtbar */
.about-box.about-unrevealed:not(#box-logo):not(#box-kintsugi):not(#box-headline),
.about-tag-item.about-unrevealed {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: transparent !important;
}

.about-box.about-unrevealed:not(#box-logo):not(#box-kintsugi):not(#box-headline) *:not(.sketch-label),
.about-tag-item.about-unrevealed *:not(.sketch-label) {
  color: transparent !important;
  opacity: 0 !important;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#box-image.about-unrevealed img,
#box-image.about-unrevealed video {
  opacity: 0 !important;
}

#box-image.about-revealed img,
#box-image.about-revealed video {
  opacity: 1 !important;
  object-fit: contain !important; /* HARTE PROFILBILD ZERO-CROP REGEL! */
}

/* SKIZZENHAFTE BLEISTIFT-SCHREIBMUTTER (SKETCH PENCIL LABELS) */
.sketch-label {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) rotate(-1.5deg) !important;
  font-family: 'Caveat', 'Patrick Hand', 'Architects Daughter', cursive !important;
  font-size: 29px !important;
  font-weight: 600 !important;
  color: #1e1e1e !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  opacity: 1 !important;
  z-index: 10 !important;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#box-cta .sketch-label {
  font-size: 16.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  transform: translate(-50%, -50%) rotate(-1deg) !important;
}

.about-tag-item .sketch-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  transform: translate(-50%, -50%) rotate(-0.5deg) !important;
}

.about-revealed .sketch-label,
.about-box.about-revealed .sketch-label,
.about-tag-item.about-revealed .sketch-label {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(0.85) !important;
  pointer-events: none !important;
}

/* CTA BUTTON WEISSER UNENTHÜLLTER ZUSTAND: Schrift unsichtbar */
#box-cta.about-unrevealed .cta-reload-inner {
  color: transparent !important;
  opacity: 0 !important;
}

/* ENTHÜLLTER ZUSTAND: Umschalten auf Obsidian-Schwarz & weiße Schrift */
.about-box.about-revealed:not(#box-cta):not(#box-logo):not(#box-kintsugi),
.about-tag-item.about-revealed {
  background: #000000 !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

.about-box.about-revealed:not(#box-cta):not(#box-logo):not(#box-kintsugi) *:not(.sketch-label),
.about-tag-item.about-revealed *:not(.sketch-label) {
  color: inherit;
  opacity: 1 !important;
}

#box-cta.about-revealed {
  background: #ffffff !important;
}

#box-cta.about-revealed .cta-reload-inner {
  color: #000000 !important;
  opacity: 1 !important;
}

/* LOGO STONE SCROLL-DRIVEN ANIMATION CONTAINER & WRAPPER */
.about-logo-stone-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 50;
}

.about-logo-stone {
  position: absolute;
  pointer-events: none;
  object-fit: contain !important;
  transform-origin: center center !important; /* Pure geometric center rotation: eliminates pendulum half-circle wobble */
  transition: none !important; /* Driven 100% deterministically by JS scroll frame math! */
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
  opacity: 0;
}

/* LOGO & KINTSUGI CLOCKWISE & COUNTER-CLOCKWISE DIRECT HTML BORDER CLIP-PATH REVEAL & 3D Y-AXIS ROTATION */
#box-logo {
  perspective: 1000px !important;
  transform-style: preserve-3d !important;
  border-color: #ffffff !important;
  background-color: #000000 !important;
  background: #000000 !important;
}

#box-kintsugi {
  perspective: 1000px !important;
  border-color: #ffffff !important;
}

.box-perimeter-unrevealed {
  border: 1px solid #ffffff !important;
}

#box-kintsugi.box-perimeter-unrevealed {
  background: rgba(0, 0, 0, 0.95) !important;
}

/* UNREVEALED 3D Y-AXIS FLIP STATE (Gekippt auf 90 Grad, völlig unsichtbar) */
#box-logo svg,
#box-logo .about-logo-svg,
#box-kintsugi .kintsugi-col-kanji,
#box-kintsugi .kintsugi-col-def,
.box-perimeter-unrevealed svg,
.box-perimeter-unrevealed .about-logo-svg,
.box-perimeter-unrevealed .kintsugi-col-kanji,
.box-perimeter-unrevealed .kintsugi-col-def {
  transform-origin: center center !important;
  transform: rotateY(90deg) !important;
  opacity: 0 !important;
  transition: transform 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease !important;
  backface-visibility: hidden !important;
}

.box-perimeter-revealed {
  clip-path: none !important;
  border-color: #ffffff !important;
  transition: background-color 0.4s ease-out, border-color 0.4s ease-out !important;
}

#box-kintsugi.box-perimeter-revealed {
  background: rgba(0, 0, 0, 0.95) !important;
}

#box-logo.box-perimeter-revealed {
  background-color: #000000 !important;
  background: #000000 !important;
}

/* REVEALED STATE: Logo dreht auf 0deg. Kintsugi-Text wechselt auf transform: none und backface-visibility: visible für gestochen scharfes 2D-Vektor-Rendering! */
.box-perimeter-revealed svg,
.box-perimeter-revealed .about-logo-svg,
#box-logo.box-perimeter-revealed svg,
#box-logo.box-perimeter-revealed .about-logo-svg {
  transform: rotateY(0deg) !important;
  opacity: 1 !important;
}

.box-perimeter-revealed .kintsugi-col-kanji,
.box-perimeter-revealed .kintsugi-col-def,
#box-kintsugi.box-perimeter-revealed .kintsugi-col-kanji,
#box-kintsugi.box-perimeter-revealed .kintsugi-col-def {
  transform: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  opacity: 1 !important;
}

/* SVG CIRCUIT WIRE PATH ANIMATION STYLES */
.wire-path {
  transition: stroke-dashoffset 0.05s linear;
}

.hover-circuit-wire {
  stroke: #ffffff !important;
  stroke-width: 1px !important;
  stroke-linecap: square !important;
  fill: none !important;
  transition: stroke-dashoffset 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease-out !important;
  pointer-events: none !important;
}

/* SCHEMATIC GRID CONTAINER (100% SPACE UTILIZATION) */
.about-schematic-grid {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
}

/* ALL FRAMED SCHEMATIC BOXES */
.about-box {
  border: 1px solid #ffffff !important;
  background-color: #000000 !important;
  box-sizing: border-box;
  position: relative;
}

/* TOP ROW */
.about-row-top {
  display: flex !important;
  flex-direction: row !important;
  gap: 20px;
  align-items: stretch;
  height: 232px;
  width: 100%;
  flex-shrink: 0;
}

.about-box-headline {
  width: 445px;
  height: 100%;
  flex-shrink: 0;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  position: relative !important;
  overflow: hidden !important; /* Clipped strictly within this box frame! */
  background: #000000 !important;
  isolation: isolate !important;
  border: none !important; /* Kein doppelter Rahmen auf Layer 0 — Rahmen wird exklusiv von ::after auf z-index 5 gezeichnet! */
}

/* PHYSISCHER WEISSER RAHMEN: Liegt in der Layer-Hierarchie vor Foto (z-index 1) und Text (z-index 2) */
.about-box-headline::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border: 1px solid #ffffff !important;
  pointer-events: none !important;
  z-index: 5 !important;
  box-sizing: border-box !important;
}

/* DIE ECHTE PHYSISCHE WEISSE FRONT: Liegt vor Foto und Text (z-index 10) */
.about-box-white-cover {
  position: absolute !important;
  inset: 0 !important;
  background: #ffffff !important;
  z-index: 10 !important;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: none !important;
}

#box-headline.about-unrevealed .about-box-white-cover {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

#box-headline.about-revealed .about-box-white-cover {
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
  transition: none !important;
}

#box-headline.about-revealed .sketch-label,
#box-headline.about-revealed .about-box-white-cover .sketch-label {
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
  transition: none !important;
}

.about-header-photo-wrapper {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  pointer-events: auto;
  z-index: 1 !important;
}

.about-header-photo {
  position: absolute !important;
  left: 119px !important;
  top: -4px !important;
  width: 100% !important;
  height: 100% !important;
  transform: scale(1.05);
  object-fit: contain !important;
  pointer-events: none;
  user-select: none;
  transform-origin: center center;
  mask-image: linear-gradient(to right, transparent 0%, black 18%, black 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 18%, black 97%, transparent 100%);
  filter: invert(0) !important;
  transition: filter 0.25s ease !important;
}

.about-headline-text-wrapper {
  position: relative !important;
  z-index: 2 !important;
  padding: 18px 22px !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  pointer-events: auto;
  perspective: 1000px;
}

.about-box-headline .text-display {
  font-family: var(--font-murmure, 'Le Murmure', sans-serif);
  font-weight: 400;
  font-size: 68px !important;
  line-height: 0.92 !important;
  letter-spacing: 0.02em !important;
  text-align: left !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  margin: 0;
  white-space: normal !important;
  text-transform: uppercase;
  transform: translate(0px, 6px);
  position: relative;
  text-shadow: none !important;
  transform-style: preserve-3d;
  transition: color 0.35s ease, -webkit-text-fill-color 0.35s ease !important;
}

@keyframes headline-text-diverge-reveal {
  0% {
    transform: translate(33px, 6px) rotateY(6.5deg);
    opacity: 1;
  }
  100% {
    transform: translate(0px, 6px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes headline-photo-diverge-reveal {
  0% {
    transform: scale(0.984) translateX(-33px);
    opacity: 1;
  }
  100% {
    transform: scale(1.05) translateX(0px);
    opacity: 1;
  }
}

/* HEADER BOX REVEAL DIVERGENCE ANIMATION:
   Im unrevealed Zustand verdeckt die weiße Front (.about-box-white-cover auf z-index 10) Foto & Text vollständig.
   Beim Reveal blendet die weiße Front sanft auf 0 ab, wodurch Text und Foto dahinter enthüllt werden
   und synchron mit noch dezenterer 66px-Gesamtauslenkung (je 33px) von innen nach außen in ihre Endpositionen gleiten! */
#box-headline.about-unrevealed {
  border-color: #ffffff !important;
}

#box-headline.about-unrevealed .about-header-photo {
  transform: scale(0.984) translateX(-33px) !important;
  opacity: 1 !important;
  animation: none !important;
  transition: none !important;
}

#box-headline.about-unrevealed .text-display {
  transform: translate(33px, 6px) rotateY(6.5deg) !important;
  opacity: 1 !important;
  animation: none !important;
  transition: none !important;
}

#box-headline.about-revealed {
  border-color: #ffffff !important;
}

#box-headline.about-revealed .about-header-photo {
  animation: headline-photo-diverge-reveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  transition: none !important;
}

#box-headline.about-revealed:hover .about-header-photo {
  filter: invert(0) !important;
}

#box-headline:hover .text-display,
#box-headline.about-revealed:hover .text-display {
  color: #ffd900 !important;
  -webkit-text-fill-color: #ffd900 !important;
  transition: color 0.15s ease, -webkit-text-fill-color 0.15s ease !important;
}

#box-headline.about-revealed .text-display {
  transform-origin: left center !important;
  animation: headline-text-diverge-reveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  transition: none !important;
}

.about-box-subtitle {
  width: calc(80% - 465px); /* HARTE REGEL: ENDET EXAKT BÜNDIG BEI 80 % DER GESAMTBREITE! */
  height: 110px;
  margin-left: auto; /* Garantiert 100 % bündiges Kantenende bei 80 %! */
  align-self: flex-start;
  flex-shrink: 0;
  padding: 18px 22px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  perspective: 1000px !important;
}

.about-box-subtitle .about-tagline {
  font-family: var(--font-zen, 'Zen Kaku Gothic New', sans-serif) !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: #ffffff;
  margin: 0;
  border-left: none !important; /* GELBEN QUERBALKEN DURCHGESTRICHEN UND ENTFERNT! */
  padding-left: 0 !important;
  transform-style: preserve-3d;
}

/* SUBTITLE REVEAL: Impuls von LINKS (aus Header Box) -> Drift nach rechts mit 3D-Kippen */
@keyframes subtitle-text-flow-reveal {
  0% {
    transform: translateX(-28px) rotateY(-6deg);
  }
  100% {
    transform: translateX(0px) rotateY(0deg);
  }
}

#box-subtitle.about-unrevealed .about-tagline {
  transform: translateX(-28px) rotateY(-6deg) !important;
  animation: none !important;
}

#box-subtitle.about-revealed .about-tagline {
  transform-origin: left center !important;
  animation: subtitle-text-flow-reveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.about-box-logo {
  width: 75px;
  height: 75px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin-left: auto;
}

.about-logo-svg {
  width: 40px;
  height: 40px;
}

/* MIDDLE ROW */
.about-row-middle {
  display: flex !important;
  flex-direction: row !important;
  gap: 20px;
  flex: 1;
  width: 100%;
  min-height: 0;
}

.about-col-left {
  width: 530px;
  flex-shrink: 0;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
}

.about-col-right {
  width: calc(80% - 550px); /* HARTE REGEL: EXAKT BÜNDIG BEI DER 80 % GRENZE! KEIN ÜBERSTAND! */
  margin-left: auto; /* Endet exakt auf derselben vertikalen 80 % Linie wie der Subtitle! */
  flex-shrink: 0;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start;
  gap: 16px;
  height: 100%;
}

.about-box-bio1 {
  padding: 16px 20px;
  height: 220px;
  width: 100%;
  flex-shrink: 0;
  display: flex !important; /* ZENTRAL IM RAHMEN! */
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  perspective: 1000px !important;
}

.about-box-bio2 {
  padding: 16px 20px;
  height: 220px;
  width: 100%;
  flex-shrink: 0;
  display: block;
  box-sizing: border-box;
  perspective: 1000px !important;
}

.about-box-bio1 .about-bio,
.about-box-bio2 .about-bio {
  font-family: var(--font-klee, 'Klee One', cursive, sans-serif) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  transform-style: preserve-3d;
}

/* BIO 1 REVEAL: Impuls von RECHTS (aus Profilfoto) -> Drift nach links */
@keyframes bio1-text-flow-reveal {
  0% {
    transform: translateX(28px) rotateY(6deg);
  }
  100% {
    transform: translateX(0px) rotateY(0deg);
  }
}

#box-bio1.about-unrevealed .about-bio {
  transform: translateX(28px) rotateY(6deg) !important;
  animation: none !important;
}

#box-bio1.about-revealed .about-bio {
  transform-origin: right center !important;
  animation: bio1-text-flow-reveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* BIO 2 REVEAL: Impuls von OBEN (aus Bio 1) -> Drift nach unten */
@keyframes bio2-text-flow-reveal {
  0% {
    transform: translateY(-20px) rotateX(10deg);
  }
  100% {
    transform: translateY(0px) rotateX(0deg);
  }
}

#box-bio2.about-unrevealed .about-bio {
  transform: translateY(-20px) rotateX(10deg) !important;
  animation: none !important;
}

#box-bio2.about-revealed .about-bio {
  transform-origin: center top !important;
  animation: bio2-text-flow-reveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.about-box-lead {
  width: 100%;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-top: 0;
  align-self: flex-start;
  perspective: 1000px !important;
}

.about-box-lead .about-lead {
  font-family: var(--font-klee, 'Klee One', cursive, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important; /* BOLD / DICKER! */
  line-height: 1.55 !important;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  transform-style: preserve-3d;
}

/* LEAD REVEAL: Impuls von LINKS (aus Subtitle) -> Drift nach rechts */
@keyframes lead-text-flow-reveal {
  0% {
    transform: translateX(-28px) rotateY(-6deg);
  }
  100% {
    transform: translateX(0px) rotateY(0deg);
  }
}

#box-lead.about-unrevealed .about-lead {
  transform: translateX(-28px) rotateY(-6deg) !important;
  animation: none !important;
}

#box-lead.about-revealed .about-lead {
  transform-origin: left center !important;
  animation: lead-text-flow-reveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.about-box-image {
  width: 100% !important;
  max-width: 380px !important;
  aspect-ratio: 3 / 4 !important;
  flex: 0 0 380px !important; /* HARTE REGEL: IMMOVABLE FLEX BOUNDS ELIMINATE 100% OF CONTAINER SHAKE! */
  padding: 0px !important;
  overflow: hidden !important;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  box-sizing: border-box !important;
  position: relative !important;
  transform: translateZ(0);
}

.about-box-image canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* STATIC COVER OBJECT-FIT PREVENTS ALL REFLOW WOBBLING! */
  display: block;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  transform: scale(0.92) translateZ(0);
  transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
  will-change: transform;
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* BEIM HOVERN: HARDWARE-ACCELERATED GPU SCALE (5 % WENIGER HOVER-VERGRÖSSERUNG WIE GEWÜNSCHT) */
.about-box-image:hover canvas,
.about-box-image.is-hovered canvas {
  transform: scale(0.99) translateZ(0) !important;
}

/* UNCLIPPED FULL-SECTION WAVING & CLIMBING VIDEO OVERLAY CANVASES */
#waving-canvas,
#climbing-canvas {
  position: absolute !important;
  top: -200px !important;
  left: -200px !important;
  width: calc(100% + 400px) !important;
  height: calc(100% + 400px) !important;
  pointer-events: none !important;
  z-index: 90 !important;
  overflow: visible !important;
}

#climbing-canvas {
  z-index: 91 !important;
}

/* BOTTOM ROW */
.about-row-bottom {
  display: flex !important;
  flex-direction: row !important;
  gap: 18px;
  align-items: center;
  height: 44px;
  width: 100%;
  flex-shrink: 0;
}

.about-tags-chain {
  position: absolute !important;
  left: 48px !important; /* LINKS EXAKT BÜNDIG MIT PARAGRAPH 2 / HEADLINE! */
  top: calc(50% + 374.5px) !important; /* 27-ZOLL VERTIKAL ZENTRIERT (EXAKT BÜNDIG MIT CTA-UNTERKANTE) */
  width: 1265px !important; /* RECHTS EXAKT BÜNDIG MIT DEM PROFILBILD-RAHMEN (1313px)! */
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important; /* EXAKT GLEICHER ABSTAND ZWISCHEN JEDEM SKILLTAG! */
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.wire-segment-handle {
  display: none !important; /* GELBE KREISE AUF DEN VERBINDUNGSLINIEN VOLLSTÄNDIG ENTFERNT! */
}

.about-tag-item {
  border: 1px solid #ffffff !important;
  padding: 4px 8px;
  font-family: var(--font-zen, 'Zen Kaku Gothic New', sans-serif);
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.05em;
  background: #000000 !important;
  white-space: nowrap;
  box-sizing: border-box;
}

.about-box-cta {
  border: 1px solid #ffffff !important;
  background: transparent;
  color: #ffffff;
  font-family: var(--font-zen, 'Zen Kaku Gothic New', sans-serif);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
  flex-shrink: 0;
  margin-left: auto;
}

/* MARCUS SAVED CUSTOM DRAG & DROP LAYOUT (27-ZOLL VERTIKAL ZENTRIERT!) */
#box-headline {
  position: absolute !important;
  left: 48px !important;
  top: calc(50% - 401.5px) !important;
  width: 340px !important;
  height: 228px !important;
  margin: 0 !important;
}

#box-subtitle {
  position: absolute !important;
  left: 452px !important;
  top: calc(50% - 402.5px) !important;
  width: 417px !important;
  height: 231px !important;
  margin: 0 !important;
}

#box-bio1 {
  position: absolute !important;
  left: 48px !important;
  top: calc(50% - 137.5px) !important;
  width: 825px !important;
  height: 233px !important;
  margin: 0 !important;
}

#box-bio2 {
  position: absolute !important;
  left: 47px !important;
  top: calc(50% + 145.5px) !important;
  width: 829px !important;
  height: 210px !important;
  margin: 0 !important;
}

#box-lead {
  position: absolute !important;
  left: 928px !important;
  top: calc(50% - 404.5px) !important;
  width: 384px !important;
  height: 232px !important;
  margin: 0 !important;
}

#box-image {
  position: absolute !important;
  left: 929px !important;
  top: calc(50% - 139.5px) !important;
  width: 384px !important;
  height: 496px !important;
  margin: 0 !important;
}

#box-cta {
  position: absolute !important;
  left: 1397px !important; /* BÜNDIG FLUCHTEND UNTER KINTSUGI UND LOGO-RAHMEN! */
  top: calc(50% + 285.5px) !important; /* UNTERE KANTE BEI calc(50% + 404.5px) — 100% DECKUNGSGLEICH MIT OBERKANTE! */
  width: 140px !important; /* HARTE REGEL: EXACT SAME 140px BREITE WIE DER LOGO-RAHMEN! */
  height: 119px !important; /* UM 15 % VERKÜRZT (VON 140px AUF 119px)! */
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 6px !important;
  box-sizing: border-box !important;
  background: #ffffff !important; /* AM ANFANG WEISSER HINTERGRUND WIE GEWÜNSCHT! */
  border: 1px solid #ffffff !important;
  overflow: hidden !important; /* CLIPPING FÜR DIE SCHNELLE NACHLADE-SLIDE-ANIMATION! */
  transition: background-color 0.22s ease, border-color 0.22s ease !important;
}

#box-cta:hover {
  background: #000000 !important; /* BEIM HOVERN SCHWARZER HINTERGRUND! */
  border-color: #ffffff !important; /* HARTE REGEL: RAHMEN BLEIBT WEISS BEIM HOVERN! */
}

#box-cta:hover .cta-reload-inner,
#box-cta:hover .cta-reload-inner *,
#box-cta.about-revealed:hover .cta-reload-inner,
#box-cta.about-revealed:hover .cta-reload-inner * {
  color: #ffd900 !important; /* AM ENDE BEIM HOVERN TRANSITION ZU GELBER SCHRIFT! */
}

.cta-reload-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  font-family: var(--font-zen, 'Zen Kaku Gothic New', sans-serif);
  font-size: 16px !important; /* NOCHMALS UM 20 % VERGRÖSSERT (VON 13.2px AUF 15.8px)! */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #000000 !important; /* AM ANFANG SCHWARZER TEXT AUF WEISSEM HINTERGRUND! */
  transition: transform 0.12s cubic-bezier(0.7, 0, 0.84, 0), color 0.15s ease;
}

.cta-reload-inner.is-part-2 {
  color: #ffd900 !important; /* MAGES BRAND GOLD FÜR TEIL 2 BEIM HOVERN! */
}

.cta-reload-inner.slide-out {
  transform: translateX(-140%); /* Katapult-Nachladen ganz schnell nach links! */
}

.cta-reload-inner.slide-in {
  transform: translateX(0); /* Zurückschnappen in die Ausgangsposition! */
  transition: transform 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.25) !important;
}

#box-logo {
  position: absolute !important;
  left: 1397px !important; /* SKALIERT: 2 % NACH RECHTS VERSCHOBEN WIE GEWÜNSCHT! */
  top: calc(50% - 404.5px) !important; /* 27-ZOLL VERTIKAL ZENTRIERT (EXAKT BÜNDIG MIT LEAD-OBERKANTE)! */
  width: 140px !important; /* NOCHMALS UM 25 % VERGRÖSSERT (VON 112px AUF 140px)! */
  height: 140px !important; /* NOCHMALS UM 25 % VERGRÖSSERT (VON 112px AUF 140px)! */
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  background-color: #000000 !important;
  background: #000000 !important;
}

#box-logo svg,
#box-logo .about-logo-svg {
  width: 101px !important; /* NOCHMALS UM 15 % VERGRÖSSERT (VON 88px AUF 101px)! */
  height: 101px !important;
  transform: rotate(0deg);
  /* HOVER-OUT: ELASTISCHER BOUNCE-EFFEKT NUR BEIM ZURÜCKDREHEN WENN MOUSELEAVE PASSIERT! */
  transition: transform 0.45s cubic-bezier(0.175, 1.3, 0.32, 1.275) !important;
}

#box-logo:hover svg,
#box-logo:hover .about-logo-svg,
#box-logo.is-logo-active svg,
#box-logo.is-logo-active .about-logo-svg {
  transform: rotate(90deg) !important;
  /* HOVER-IN: PRÄZISE 90-GRAD-DREHUNG BEIM RAUFGEHEN — EXAKT AUF 90° OHNE BOUNCE-EFFEKT! */
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

#box-kintsugi {
  position: absolute !important;
  left: 1397px !important; /* EXAKT BÜNDIG ZUM DARÜBER STEHENDEN LOGO-RAHMEN (1397px)! */
  top: calc(50% - 139.5px) !important; /* 27-ZOLL VERTIKAL ZENTRIERT (EXAKT FLUCHTEND MIT PROFILFOTO)! */
  width: 140px !important; /* EXAKT DIESELBE BREITE WIE DER LOGO-RAHMEN (140px)! */
  height: 279px !important; /* ORIGINAL-HÖHE FÜR KINTSUGI-DEFINITION (279px)! */
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: rgba(0, 0, 0, 0.95) !important;
  border: 1px solid #ffffff !important;
  perspective: 1000px !important;
  transition: height 0.55s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s ease-out, border-color 0.4s ease-out !important;
  z-index: 15 !important;
}

#box-kintsugi.is-marcus-active {
  height: var(--kintsugi-active-height, 338px) !important; /* GERMAN (DE): Exakt identischer Abstand wie bei der Kintsugi-Definition! */
}

html[lang="en"] #box-kintsugi.is-marcus-active {
  height: var(--kintsugi-active-height, 344px) !important; /* ENGLISH (EN): Feiner, kompakterer Abschluss unter 'impact.'! */
}

.kintsugi-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}

#box-kintsugi.is-marcus-active .kintsugi-flipper {
  transform: rotateY(180deg);
}

.kintsugi-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 14px 10px !important;
  gap: 10px !important;
  box-sizing: border-box !important;
  background: rgba(0, 0, 0, 0.95) !important;
  backface-visibility: hidden;
}

.kintsugi-face-front {
  transform: none;
  z-index: 2;
}

#box-kintsugi.is-marcus-active .kintsugi-face-front {
  transform: rotateY(0deg);
}

.kintsugi-face-back {
  transform: rotateY(180deg);
  z-index: 1;
}

.marcus-col-logo-parts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px !important;
  flex-shrink: 0;
  width: 20px;
  margin-top: -3px !important;
  padding-top: 0 !important;
  align-self: flex-start !important;
}

.logo-part-img {
  width: 18px;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 !important;
}

.kintsugi-col-kanji {
  font-family: 'Playfair Display', 'Hiragino Mincho ProN', 'MS Mincho', serif;
  font-size: 15px;
  line-height: 1.45;
  color: #ffd900; /* Kintsugi Gold-Akzent! */
  flex-shrink: 0;
  text-align: center;
  user-select: text;
  align-self: flex-start !important; /* KANJI AUF EXAKT GLEICHER HÖHE WIE DIE ERSTE ZEILE! */
  margin-top: 0;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

.kintsugi-col-def {
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 10.5px;
  line-height: 1.34;
  color: rgba(255, 255, 255, 0.92);
  white-space: normal;
  user-select: text;
  word-break: break-word;
  align-self: flex-start !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* TEXT-BOXEN & TAGS BLEIBEN IM OBSIDIAN-SCHWARZEN DESIGN — KEIN WEISSER HOVER-WECHSEL */
.about-tag-item {
  position: relative !important;
  cursor: default !important;
}

/* LAYOUT LOCK DIRECTIVE (GELOCKT — KEIN UNBEABSICHTIGTES VERSCHIEBEN MEHR MÖGLICH!) */
.about-box {
  resize: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  user-select: text !important;
  touch-action: auto !important;
}

.custom-resize-handle {
  display: none !important;
}

.about-box:active {
  box-shadow: 0 0 16px rgba(255, 217, 0, 0.6) !important;
  z-index: 1000 !important;
}

/* PHYSICAL CUSTOM RESIZE HANDLE (Ein echter DOM-Griff, der NIEMALS verschwindet!) */
.custom-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, transparent 50%, #ffd900 50%);
  cursor: nwse-resize !important;
  z-index: 9999;
  border-bottom-right-radius: 2px;
  touch-action: none;
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.custom-resize-handle:hover {
  opacity: 1;
  transform: scale(1.2);
}

/* MAGNETIC ALIGNMENT SNAP GUIDELINES (Magnetische Hilfslinien!) */
.snap-guide-line {
  position: absolute;
  background-color: #ffd900;
  z-index: 99999;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(255, 217, 0, 0.9);
}

.snap-guide-line.v-line {
  width: 2px;
  top: 0;
  height: 100%;
}

/* IN-PAGE LAYOUT EXPORT MODAL (Fehlersicherer Export direkt auf der Seite!) */
.layout-export-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.layout-export-card {
  background: #111111;
  border: 1px solid #ffd900;
  box-shadow: 0 0 30px rgba(255, 217, 0, 0.4);
  width: 100%;
  max-width: 620px;
  padding: 24px;
  border-radius: 8px;
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.layout-export-card h3 {
  margin: 0 0 8px 0;
  color: #ffd900;
  font-size: 18px;
}

.layout-export-textarea {
  width: 100%;
  height: 240px;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffd900;
  font-family: monospace;
  font-size: 13px;
  padding: 12px;
  box-sizing: border-box;
  margin: 16px 0;
  border-radius: 4px;
  resize: vertical;
}

.layout-modal-btns {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.layout-editor-bar {
  display: none !important; /* HIDE FLOATING TOOLBAR WHEN LAYOUT IS LOCKED! */
  position: fixed !important;
  top: 100px;
  right: 24px;
  z-index: 999999 !important;
  gap: 10px !important;
  align-items: center !important;
  background: rgba(20, 20, 20, 0.85) !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 217, 0, 0.4) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

.layout-bar-grip {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffd900 !important;
  font-size: 18px !important;
  cursor: grab !important;
  padding: 0 4px !important;
  user-select: none !important;
}

.layout-bar-grip:active {
  cursor: grabbing !important;
}

.layout-editor-btn {
  background: #ffd900 !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(255, 217, 0, 0.4) !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}

.layout-editor-btn:hover {
  transform: translateY(-2px) !important;
  background: #ffe54c !important;
}

/* HEADER LIVE-EDITOR FLOATING CONTROL PANEL */
.header-live-editor-panel {
  display: none !important; /* HIDE LIVE EDITOR PANEL WHEN LAYOUT IS LOCKED! */
  position: fixed !important;
  top: 90px;
  left: 30px;
  width: 370px !important;
  background: rgba(14, 14, 14, 0.96) !important;
  border: 1px solid #ffd900 !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 217, 0, 0.2) !important;
  z-index: 1000000 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: #ffffff !important;
  padding: 0 !important;
  overflow: hidden !important;
  backdrop-filter: blur(16px) !important;
  flex-direction: column !important;
}

.hle-header {
  background: #1a1a1a !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid #333333 !important;
  cursor: grab !important;
  user-select: none !important;
}

.hle-header:active {
  cursor: grabbing !important;
}

.hle-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffd900 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 0 !important;
}

.hle-drag-grip {
  font-size: 16px !important;
  color: #ffd900 !important;
  cursor: grab !important;
  margin-right: 4px !important;
  user-select: none !important;
}

.hle-close-btn {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 16px !important;
  cursor: pointer !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s, background 0.2s !important;
}

.hle-close-btn:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.hle-tabs {
  display: flex !important;
  background: #111111 !important;
  border-bottom: 1px solid #222222 !important;
}

.hle-tab-btn {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  color: #888888 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 10px 6px !important;
  cursor: pointer !important;
  transition: color 0.2s, background 0.2s, border-color 0.2s !important;
  border-bottom: 2px solid transparent !important;
}

.hle-tab-btn.active {
  color: #ffd900 !important;
  background: rgba(255, 217, 0, 0.08) !important;
  border-bottom: 2px solid #ffd900 !important;
}

.hle-body {
  padding: 16px !important;
  max-height: 480px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.hle-tab-content {
  display: none;
  flex-direction: column !important;
  gap: 12px !important;
}

.hle-tab-content.active {
  display: flex !important;
}

.hle-control-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.hle-label-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #cccccc !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

.hle-val-badge {
  color: #ffd900 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
}

.hle-slider-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.hle-slider {
  flex: 1 !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: #333333 !important;
  outline: none !important;
  accent-color: #ffd900 !important;
  cursor: pointer !important;
}

.hle-num-input {
  width: 62px !important;
  background: #222222 !important;
  border: 1px solid #444444 !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  padding: 3px 6px !important;
  text-align: right !important;
}

.hle-btn-group {
  display: flex !important;
  gap: 6px !important;
}

.hle-option-btn {
  flex: 1 !important;
  background: #222222 !important;
  border: 1px solid #444444 !important;
  border-radius: 4px !important;
  color: #aaaaaa !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 6px 4px !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
  text-align: center !important;
}

.hle-option-btn.active {
  background: #ffd900 !important;
  color: #000000 !important;
  border-color: #ffd900 !important;
}

.hle-drag-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(255, 217, 0, 0.1) !important;
  border: 1px solid rgba(255, 217, 0, 0.3) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #ffd900 !important;
  cursor: pointer !important;
}

.hle-footer {
  padding: 12px 16px !important;
  background: #151515 !important;
  border-top: 1px solid #282828 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.hle-primary-btn {
  background: #ffd900 !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  transition: background 0.15s, transform 0.1s !important;
}

.hle-primary-btn:hover {
  background: #ffe54c !important;
  transform: translateY(-1px) !important;
}

.hle-secondary-btn {
  background: #282828 !important;
  color: #ffffff !important;
  border: 1px solid #444444 !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}

.hle-secondary-btn:hover {
  background: #383838 !important;
}

/* ==========================================================================
   ZEN SERVICE NUMBERS LIVE-EDITOR FLOATING PANEL (.zen-num-editor-panel)
   ========================================================================== */
.zen-num-editor-panel {
  display: none;
  position: fixed !important;
  top: 100px;
  right: 30px;
  width: 380px !important;
  background: rgba(14, 14, 14, 0.96) !important;
  border: 1px solid #ffd900 !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 25px rgba(255, 217, 0, 0.25) !important;
  z-index: 1000000 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #ffffff !important;
  padding: 0 !important;
  overflow: hidden !important;
  backdrop-filter: blur(20px) !important;
  flex-direction: column !important;
}

.zne-header {
  background: #1c1c1c !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid #333333 !important;
  cursor: grab !important;
  user-select: none !important;
}
.zne-header:active {
  cursor: grabbing !important;
}
.zne-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffd900 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 0 !important;
}
.zne-close-btn {
  background: transparent !important;
  border: none !important;
  color: #888888 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  transition: all 0.15s !important;
}
.zne-close-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.zne-curve-selector {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 16px !important;
  background: #141414 !important;
  border-bottom: 1px solid #282828 !important;
  overflow-x: auto !important;
}
.zne-curve-btn {
  background: #222222 !important;
  border: 1px solid #3a3a3a !important;
  color: #aaaaaa !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s !important;
}
.zne-curve-btn:hover, .zne-curve-btn.active {
  background: #ffd900 !important;
  color: #000000 !important;
  border-color: #ffd900 !important;
}

.zne-body {
  padding: 16px !important;
  max-height: 460px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.zne-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.zne-label-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 11.5px !important;
  color: #cccccc !important;
  font-weight: 600 !important;
}
.zne-badge {
  background: rgba(255, 217, 0, 0.15) !important;
  color: #ffd900 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-family: monospace !important;
  font-weight: 700 !important;
}

.zne-slider {
  width: 100% !important;
  height: 5px !important;
  border-radius: 3px !important;
  background: #333333 !important;
  outline: none !important;
  accent-color: #ffd900 !important;
  cursor: pointer !important;
}

.zne-footer {
  padding: 12px 16px !important;
  background: #151515 !important;
  border-top: 1px solid #282828 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.zne-btn-primary {
  background: #ffd900 !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
.zne-btn-primary:hover {
  background: #ffe54c !important;
  transform: translateY(-1px) !important;
}
.zne-btn-row {
  display: flex !important;
  gap: 8px !important;
}
.zne-btn-secondary {
  flex: 1 !important;
  background: #252525 !important;
  color: #ffffff !important;
  border: 1px solid #444444 !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 6px 10px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}
.zne-btn-secondary:hover {
  background: #353535 !important;
}
.zne-btn-secondary.active {
  background: #ffd900 !important;
  color: #000000 !important;
  border-color: #ffd900 !important;
  font-weight: 700 !important;
}

/* Floating Trigger Button on #services (Ausgeblendet per User-Wunsch) */
.zen-num-floating-trigger {
  display: none !important;
  align-items: center !important;
  gap: 7px !important;
  background: #121212 !important;
  color: #ffd900 !important;
  border: 1.5px solid #ffd900 !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  cursor: pointer !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 16px rgba(255, 217, 0, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
}
.zen-num-floating-trigger:hover {
  background: #ffd900 !important;
  color: #000000 !important;
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.8), 0 0 24px rgba(255, 217, 0, 0.6) !important;
}

/* ==========================================================================
   CONTACT BADGE LIVE-EDITOR FLOATING CONTROL PANEL & PIN OVERRIDES
   ========================================================================== */
.contact-badge-live-editor-panel {
  display: none;
  position: fixed !important;
  top: 90px;
  right: 30px;
  width: 360px !important;
  background: rgba(14, 14, 14, 0.96) !important;
  border: 1px solid #ffd900 !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 217, 0, 0.2) !important;
  z-index: 1000000 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: #ffffff !important;
  padding: 0 !important;
  overflow: hidden !important;
  backdrop-filter: blur(16px) !important;
  flex-direction: column !important;
}

.contact-badge-live-editor-panel.open {
  display: flex !important;
}

.cble-header {
  background: #1a1a1a !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid #333333 !important;
  cursor: grab !important;
  user-select: none !important;
}

.cble-header:active {
  cursor: grabbing !important;
}

.cble-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffd900 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 0 !important;
}

.cble-drag-grip {
  font-size: 16px !important;
  color: #ffd900 !important;
  cursor: grab !important;
  margin-right: 4px !important;
  user-select: none !important;
}

.cble-close-btn {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 16px !important;
  cursor: pointer !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s, background 0.2s !important;
}

.cble-close-btn:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.cble-body {
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
}

.cble-control-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.cble-label-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 12px !important;
  color: #bbbbbb !important;
  font-weight: 500 !important;
}

.cble-val-badge {
  background: #262626 !important;
  color: #ffd900 !important;
  font-family: monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 217, 0, 0.3) !important;
}

.cble-slider-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.cble-slider {
  flex: 1 !important;
  -webkit-appearance: none !important;
  height: 6px !important;
  border-radius: 3px !important;
  background: #333333 !important;
  outline: none !important;
  cursor: pointer !important;
}

.cble-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #ffd900 !important;
  cursor: pointer !important;
  box-shadow: 0 0 8px rgba(255, 217, 0, 0.6) !important;
  border: 2px solid #000000 !important;
}

.cble-btn-row {
  display: flex !important;
  gap: 8px !important;
  margin-top: 6px !important;
}

.cble-btn {
  flex: 1 !important;
  background: #222222 !important;
  border: 1px solid #444444 !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
}

.cble-btn:hover {
  background: #333333 !important;
  border-color: #ffd900 !important;
  color: #ffd900 !important;
}

.cble-btn-primary {
  background: #ffd900 !important;
  border-color: #ffd900 !important;
  color: #000000 !important;
  font-weight: 700 !important;
}

.cble-btn-primary:hover {
  background: #ffe640 !important;
  color: #000000 !important;
}

.cble-toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  background: #1c1c1c !important;
  border-radius: 6px !important;
  border: 1px solid #333333 !important;
  cursor: pointer !important;
}

.cble-toggle-row input[type="checkbox"] {
  accent-color: #ffd900 !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
}

/* FLOATING LAUNCHER BUTTON */
.contact-badge-floating-launcher {
  position: fixed !important;
  bottom: 24px !important;
  left: 24px !important;
  background: rgba(20, 20, 20, 0.9) !important;
  border: 1.5px solid #ffd900 !important;
  color: #ffd900 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 10px rgba(255, 217, 0, 0.2) !important;
  cursor: pointer !important;
  z-index: 999990 !important;
  display: none !important; /* Live-Editor Launcher ausgeblendet */
  align-items: center !important;
  gap: 6px !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.25s ease !important;
}

.contact-badge-floating-launcher:hover {
  background: #ffd900 !important;
  color: #000000 !important;
  box-shadow: 0 6px 20px rgba(255, 217, 0, 0.4) !important;
  transform: translateY(-2px) !important;
}

/* OVERRIDE WHEN BADGE IS PINNED IN EDITOR */
body.contact-badge-editor-pinned .contact-section-badge-wrapper {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-50%) translateX(0%) !important;
}

body.contact-badge-editor-pinned .contact-section-badge-bg {
  transform: translateX(0%) !important;
  border-color: #ffd900 !important;
}

body.contact-badge-editor-pinned .contact-section-badge-text-box {
  transform: translateX(0%) !important;
}

body.contact-badge-editor-pinned .contact-section-badge-text {
  color: #ffd900 !important;
}

body.contact-badge-editor-pinned .contact-section-badge-bg .badge-hover-video {
  opacity: 1 !important;
}

/* INVISIBLE THICK HIT-AREA FOR EASY LINE DRAGGING (REIN ORTHOGONAL — NIEMALS SCHRÄG!) */
.wire-hit-area {
  stroke: transparent !important;
  stroke-width: 18px !important;
  cursor: ew-resize !important;
  pointer-events: auto !important;
}

.wire-hit-area.h-wire {
  cursor: ns-resize !important;
}

.wire-segment-handle {
  fill: #ffd900 !important;
  stroke: #000000 !important;
  stroke-width: 1.5px !important;
  cursor: grab !important;
  z-index: 100001 !important;
  pointer-events: auto !important;
  transition: transform 0.15s ease, fill 0.15s ease;
}

.wire-segment-handle:hover {
  transform: scale(1.3);
  fill: #ffffff !important;
}

.about-circuit-svg {
  position: absolute;
  top: -30px;
  left: 0;
  width: 100%;
  height: calc(100% + 60px);
  pointer-events: none !important;
  z-index: 99999;
}

.about-circuit-svg path,
.about-circuit-svg circle {
  pointer-events: auto !important;
}

/* ==========================================================================
   WORK YELLOW RUNNER FRAME WITH INTEGRATED BLACK LOGOS & 4 CORNER LOGOS
   - Continuous 20px yellow band sliding from under .work-main-frame
   - 16px solid black vector logos inside, perfectly balanced
   - 4 synchronized corner blocks (TL, TR, BL, BR) moving diagonally
   - 0.90s cubic-bezier(0.16, 1, 0.3, 1) synchronized slide-out
   ========================================================================== */
.runner-track {
  position: absolute;
  pointer-events: none;
  z-index: 5; /* Behind .work-main-frame (z-index 20) */
  opacity: 1 !important;
  overflow: visible !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-brand, #ffe600);
  box-sizing: border-box;
  will-change: transform;
}

.runner-corner {
  position: absolute;
  pointer-events: none;
  z-index: 5; /* Behind .work-main-frame (z-index 20) */
  opacity: 1 !important;
  overflow: visible !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-brand, #ffe600);
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  will-change: transform;
}

.runner-logo {
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0;
  display: block;
  fill: #000000 !important;
  color: #000000 !important;
  transform: scale(1.30);
  transition: transform 0.25s ease-out;
  will-change: transform;
}

/* Oben: Ruhezustand (sitzt bei top: -20px, um 24px nach unten hinter den 3px Rahmen geschoben) */
.runner-track-top {
  top: -20px;
  left: 0px;
  right: 0px;
  height: 20px;
  flex-direction: row;
  border-top: 3px solid #000000;
  transform: translateY(24px);
  transition: transform 0.25s ease-out !important;
}

/* Unten: Ruhezustand (sitzt bei bottom: -20px, um 24px nach oben hinter den 3px Rahmen geschoben) */
.runner-track-bottom {
  bottom: -20px;
  left: 0px;
  right: 0px;
  height: 20px;
  flex-direction: row;
  border-bottom: 3px solid #000000;
  transform: translateY(-24px);
  transition: transform 0.25s ease-out !important;
}

/* Rechts: Ruhezustand (sitzt bei right: -20px, um 24px nach links hinter den 3px Rahmen geschoben) */
.runner-track-right {
  right: -20px;
  top: 0px;
  bottom: 0px;
  width: 20px;
  flex-direction: column;
  border-right: 3px solid #000000;
  transform: translateX(-24px);
  transition: transform 0.25s ease-out !important;
}

/* Links: Ruhezustand (sitzt bei left: -20px, um 24px nach rechts hinter den 3px Rahmen geschoben) */
.runner-track-left {
  left: -20px;
  top: 0px;
  bottom: 0px;
  width: 20px;
  flex-direction: column;
  border-left: 3px solid #000000;
  transform: translateX(24px);
  transition: transform 0.25s ease-out !important;
}

/* 4 Ecken: Ruhezustand (sitzen jeweils um 24px diagonal hinter die Ecken des Rahmens geschoben) */
.runner-corner-tl {
  top: -20px;
  left: -20px;
  border-top: 3px solid #000000;
  border-left: 3px solid #000000;
  transform: translate(24px, 24px);
  transition: transform 0.25s ease-out !important;
}

.runner-corner-tr {
  top: -20px;
  right: -20px;
  border-top: 3px solid #000000;
  border-right: 3px solid #000000;
  transform: translate(-24px, 24px);
  transition: transform 0.25s ease-out !important;
}

.runner-corner-bl {
  bottom: -20px;
  left: -20px;
  border-bottom: 3px solid #000000;
  border-left: 3px solid #000000;
  transform: translate(24px, -24px);
  transition: transform 0.25s ease-out !important;
}

.runner-corner-br {
  bottom: -20px;
  right: -20px;
  border-bottom: 3px solid #000000;
  border-right: 3px solid #000000;
  transform: translate(-24px, -24px);
  transition: transform 0.25s ease-out !important;
}

/* AKTIVIERUNG: GELBER RAHMEN MIT SCHWARZEN LOGOS GLEITET BEI TITEL-HOVER & KARTEN-KLICK SYNCHRON HERVOR */
.work-container.has-active .runner-track-top {
  transform: translateY(0px) !important;
  transition: transform 0.90s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.work-container.has-active .runner-track-bottom {
  transform: translateY(0px) !important;
  transition: transform 0.90s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.work-container.has-active .runner-track-right {
  transform: translateX(0px) !important;
  transition: transform 0.90s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.work-container.has-active .runner-track-left {
  transform: translateX(0px) !important;
  transition: transform 0.90s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.work-container.has-active .runner-corner-tl,
.work-container.has-active .runner-corner-tr,
.work-container.has-active .runner-corner-bl,
.work-container.has-active .runner-corner-br {
  transform: translate(0px, 0px) !important;
  transition: transform 0.90s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* SANFTE ATEM-ANIMATION: Startet beim Ausfahren bereits groß (130%) und atmet permanent
   geschmeidig zwischen 130% und Normalgröße (100%), solange eine Movie Card aktiv ist */
@keyframes runner-logo-breathe {
  0% {
    transform: scale(1.30);
  }
  50% {
    transform: scale(1.0);
  }
  100% {
    transform: scale(1.30);
  }
}

.work-container.has-active .runner-logo {
  animation: runner-logo-breathe 2.8s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

/* Ausblenden bei About-Section Aktivierung */
.work-main-frame.about-active ~ .runner-track,
.work-container.about-active .runner-track,
.work-frame-about.active ~ .runner-track,
.work-main-frame.about-active ~ .runner-corner,
.work-container.about-active .runner-corner,
.work-frame-about.active ~ .runner-corner {
  display: none !important;
}

/* Linkes Feld mit schwarzer Trennlinie rechts */
.work-frame-left {
  position: relative;
  border-right: 3px solid #000000;
  padding: 24px 20px;
  display: block; /* Direct block layout for 100% seamless top-to-bottom text grid */
  background-color: #ffffff;
  overflow: hidden;
  box-sizing: border-box;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s ease-in-out;
  will-change: transform;
}

/* Wasserzeichen Firmenlogo-Hintergrund im linken Titelfeld (Um 20% verkleinert auf 600%!) */
/* Wasserzeichen Firmenlogo-Hintergrund im linken Titelfeld */
.work-puzzle-bg-logo {
  position: absolute;
  top: 50%;
  left: 78%;
  width: 600%;
  height: 600%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  display: block;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.work-puzzle-bg-logo svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-puzzle-bg-logo svg.work-logo-solid path {
  fill: #FFE600 !important;
  stroke: none !important;
}

.work-puzzle-bg-logo svg.work-logo-wireframe path {
  fill: transparent !important;
  stroke: #FFE600 !important;
  stroke-width: var(--work-wire-stroke, 1.5px) !important;
  vector-effect: non-scaling-stroke;
}

/* Scrim Overlay im linken Feld */
.work-scrim-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Default CSS-Variablen für das aktive Konzept auf .work-frame-left (APPROVED & HARD-LOCKED: Blueprint Wireframe) */
.work-frame-left {
  --work-logo-opacity: 0.40;
  --work-wire-stroke: 1px;
  --work-wire-glow: 0px;
  --work-scrim-top: 0.98;
  --work-scrim-stop: 52%;
  --work-scrim-bottom: 0.05;
  --work-hybrid-split: 48%;
}

/* Idle-Status: Solid-Logo voll sichtbar, Wireframe & Scrim unsichtbar */
.work-frame-left:not(.has-active):not(.force-active-preview) .work-puzzle-bg-logo {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}
.work-frame-left:not(.has-active):not(.force-active-preview) .work-logo-solid {
  opacity: 1 !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}
.work-frame-left:not(.has-active):not(.force-active-preview) .work-logo-wireframe {
  opacity: 0 !important;
}
.work-frame-left:not(.has-active):not(.force-active-preview) .work-scrim-overlay {
  opacity: 0 !important;
}

/* AKTIVER STATUS (Hover über Buchstabensalat, aktive Movie-Card oder Editor Freeze-Test):
   APPROVED BLUEPRINT WIREFRAME (Opacity: 40%, Stroke: 1px, Glow: 0px) */
.work-frame-left.has-active,
.work-frame-left.force-active-preview {
  background-color: #000000 !important;
}

/* Standard-Verhalten für has-active & Konzept 2 (Blueprint Wireframe) */
.work-frame-left.has-active .work-puzzle-bg-logo,
.work-frame-left.force-active-preview .work-puzzle-bg-logo,
.work-frame-left.has-active.concept-2 .work-puzzle-bg-logo,
.work-frame-left.force-active-preview.concept-2 .work-puzzle-bg-logo {
  opacity: var(--work-logo-opacity, 0.40) !important;
  visibility: visible !important;
  filter: none !important; /* 0px Glow laut Approved Settings */
}

.work-frame-left.has-active .work-logo-solid,
.work-frame-left.force-active-preview .work-logo-solid,
.work-frame-left.has-active.concept-2 .work-logo-solid,
.work-frame-left.force-active-preview.concept-2 .work-logo-solid {
  opacity: 0 !important;
}

.work-frame-left.has-active .work-logo-wireframe,
.work-frame-left.force-active-preview .work-logo-wireframe,
.work-frame-left.has-active.concept-2 .work-logo-wireframe,
.work-frame-left.force-active-preview.concept-2 .work-logo-wireframe {
  opacity: 1 !important;
}

.work-frame-left.has-active .work-logo-wireframe path,
.work-frame-left.force-active-preview .work-logo-wireframe path,
.work-frame-left.has-active.concept-2 .work-logo-wireframe path,
.work-frame-left.force-active-preview.concept-2 .work-logo-wireframe path {
  fill: transparent !important;
  stroke: #FFE600 !important;
  stroke-width: var(--work-wire-stroke, 1px) !important;
  vector-effect: non-scaling-stroke;
}

.work-frame-left.has-active .work-scrim-overlay,
.work-frame-left.force-active-preview .work-scrim-overlay,
.work-frame-left.has-active.concept-2 .work-scrim-overlay,
.work-frame-left.force-active-preview.concept-2 .work-scrim-overlay {
  opacity: 0 !important;
}

/* ==========================================================================
   OPTIONALES KONZEPT 1: CINEMATIC SCRIM & SMOKED GOLD (Nur aktiv wenn explizit .concept-1 gesetzt)
   ========================================================================== */
.work-frame-left.has-active.concept-1 .work-puzzle-bg-logo,
.work-frame-left.force-active-preview.concept-1 .work-puzzle-bg-logo {
  opacity: var(--work-logo-opacity, 0.35) !important;
  visibility: visible !important;
  filter: drop-shadow(0 0 12px rgba(255, 230, 0, 0.15)) !important;
}
.work-frame-left.has-active.concept-1 .work-logo-solid,
.work-frame-left.force-active-preview.concept-1 .work-logo-solid {
  opacity: 1 !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}
.work-frame-left.has-active.concept-1 .work-logo-wireframe,
.work-frame-left.force-active-preview.concept-1 .work-logo-wireframe {
  opacity: 0 !important;
}
.work-frame-left.has-active.concept-1 .work-scrim-overlay,
.work-frame-left.force-active-preview.concept-1 .work-scrim-overlay {
  opacity: 1 !important;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, var(--work-scrim-top, 0.98)) 0%,
    rgba(0, 0, 0, var(--work-scrim-top, 0.95)) var(--work-scrim-stop, 52%),
    rgba(0, 0, 0, var(--work-scrim-bottom, 0.05)) 100%
  ) !important;
}

/* ==========================================================================
   KONZEPT 4: HYBRID (WIREFRAME OBEN, SOLID UNTEN)
   ========================================================================== */
.work-frame-left.has-active.concept-4 .work-puzzle-bg-logo,
.work-frame-left.force-active-preview.concept-4 .work-puzzle-bg-logo {
  opacity: var(--work-logo-opacity, 0.45) !important;
  visibility: visible !important;
  filter: drop-shadow(0 0 var(--work-wire-glow, 4px) rgba(255, 230, 0, 0.25));
}
.work-frame-left.has-active.concept-4 .work-logo-wireframe,
.work-frame-left.force-active-preview.concept-4 .work-logo-wireframe {
  opacity: 1 !important;
}
.work-frame-left.has-active.concept-4 .work-logo-solid,
.work-frame-left.force-active-preview.concept-4 .work-logo-solid {
  opacity: 1 !important;
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent var(--work-hybrid-split, 48%),
    rgba(0, 0, 0, 0.8) calc(var(--work-hybrid-split, 48%) + 18%),
    black 100%
  ) !important;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent var(--work-hybrid-split, 48%),
    rgba(0, 0, 0, 0.8) calc(var(--work-hybrid-split, 48%) + 18%),
    black 100%
  ) !important;
}
.work-frame-left.has-active.concept-4 .work-scrim-overlay,
.work-frame-left.force-active-preview.concept-4 .work-scrim-overlay {
  opacity: 0.65 !important;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.45) var(--work-hybrid-split, 48%),
    transparent 100%
  ) !important;
}

/* ==========================================================================
   WORK BUCHSTABENSALAT LOGO-EXPLORER HUD STYLING
   ========================================================================== */
#work-concept-live-editor {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 320px;
  background: rgba(18, 18, 20, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 230, 0, 0.35);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75), 0 0 16px rgba(255, 230, 0, 0.15);
  border-radius: 10px;
  color: #f4f4f5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  z-index: 100000;
  box-sizing: border-box;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

#work-concept-launcher {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 99999;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(18, 18, 20, 0.92);
  border: 1px solid #ffd900;
  border-radius: 20px;
  color: #ffd900;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 217, 0, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#work-concept-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7), 0 0 18px rgba(255, 217, 0, 0.5);
}

.wcle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: grab;
  user-select: none;
}

.wcle-header:active {
  cursor: grabbing;
}

.wcle-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.wcle-badge {
  background: #ffd900;
  color: #000;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}

.wcle-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.wcle-btn-icon {
  background: transparent;
  border: none;
  color: #a1a1aa;
  cursor: pointer;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 13px;
  transition: background 0.15s, color 0.15s;
}

.wcle-btn-icon:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.wcle-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 80vh;
  overflow-y: auto;
}

.wcle-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #a1a1aa;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.wcle-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wcle-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #d4d4d8;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.wcle-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 217, 0, 0.4);
}

.wcle-tab.active {
  background: rgba(255, 217, 0, 0.12);
  border-color: #ffd900;
  color: #ffd900;
}

.wcle-tab strong {
  font-size: 12px;
}

.wcle-tab small {
  font-size: 10px;
  opacity: 0.75;
}

.wcle-toggles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.wcle-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 11px;
  color: #e4e4e7;
  user-select: none;
}

.wcle-toggle-row input[type="checkbox"] {
  accent-color: #ffd900;
  cursor: pointer;
  width: 14px;
  height: 14px;
}

.wcle-sliders {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wcle-slider-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wcle-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #a1a1aa;
}

.wcle-slider-header strong {
  color: #ffd900;
  font-family: monospace;
}

.wcle-slider-group input[type="range"] {
  width: 100%;
  accent-color: #ffd900;
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.wcle-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

.wcle-btn-action {
  flex: 1;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #d4d4d8;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.wcle-btn-action:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.wcle-btn-primary {
  background: rgba(255, 217, 0, 0.15);
  border-color: rgba(255, 217, 0, 0.4);
  color: #ffd900;
}

.wcle-btn-primary:hover {
  background: rgba(255, 217, 0, 0.25);
  border-color: #ffd900;
  color: #ffd900;
}

/* Buchstabensalat liegt messerscharf über dem gelben Wasserzeichen-Hintergrund (z-index 10 für unblockierten Erstkontakt!) */
.work-title-puzzle {
  position: relative;
  z-index: 10;
  display: block;
  text-align: justify;
  text-align-last: justify;
  font-family: var(--font-klee, 'Klee One', cursive, sans-serif);
  font-size: clamp(1.0rem, 1.8vw, 2.2rem);
  font-weight: 600;
  -webkit-text-stroke: 0.25px currentColor;
  paint-order: stroke fill;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #000000;
  user-select: none;
  word-break: break-all;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: visible !important;
}

.puzzle-title {
  display: inline;
  color: #000000;
  font-size: 1em;
  transition: font-size 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* Farbe schaltet instant um */
}

/* Jedes Wort wird am Stück geschützt und darf NIEMALS mitten im Wort trennen */
.puzzle-word {
  white-space: nowrap !important;
  display: inline-block;
}

/* Nur die exklusiv von JS gesteuerte .active Klasse färbt gelb */
.puzzle-title.active {
  color: var(--color-brand, #FFE600) !important;
  font-weight: 600;
}

/* Alle inaktiven Buchstaben schlagen im Schwarz-Modus auf schneeweiß um */
.work-title-puzzle.has-active .puzzle-title:not(.active),
.work-title-puzzle.force-active-preview .puzzle-title:not(.active) {
  color: #ffffff;
}

/* Rechtes Feld: Frame mit dynamischem Hintergrund (Weiß im Idle, Tiefschwarz bei Selektion) & Overflow hidden */
.work-frame-right {
  padding: 0;
  background-color: #ffffff;
  box-sizing: border-box;
  overflow: hidden !important; /* Inaktive Karten & Marquee fliegen sauber am Rand ab */
  width: 100%;
  height: 100%;
  position: relative; /* WASSERDICHTER ANKER für absolute Positionierung von .work-cards-grid */
  perspective: 1200px;
  perspective-origin: center center;
  transform-style: preserve-3d;
  transition: background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Bei direktem Hovern über eine Movie-Card (.card-hovered) oder aktivem Projekt schaltet der Hintergrund des rechten Feldes auf Tiefschwarz um! */
.work-frame-right.card-hovered,
.work-frame-right.has-active,
.work-frame-right.inline-video-playing,
.work-frame-right.inline-video-closing {
  background-color: #000000 !important;
}

/* ============================================================================
   160-SPALTEN MOSAIK GRID ARCHITEKTUR (6 ZEILEN, 3 SETS DIREKT GEFÜGT)
   position: absolute + height: 300% garantiert exakt 3 Rahmenhöhen ohne Flexbox-Clamping!
   ============================================================================ */
.work-cards-grid {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20 !important; /* Placed ERHABEN on top of the raindrop canvas (z=15) */
  display: grid;
  grid-template-columns: repeat(160, 1fr);
  grid-template-rows: repeat(3, 1fr 1.03fr);
  gap: 4px; /* Winzige, schmale weiße Abstände laut Referenzbild */
  width: 100%;
  height: 300%; /* Exakt 300% der Rahmenhöhe (3 vollständige Sets untereinander) */
  box-sizing: border-box;
  align-items: stretch;
  justify-items: stretch;
  transform-origin: 0 0;
  transform-style: preserve-3d;
  will-change: transform;
  transition: none !important; /* Keine CSS-TransitionInterferenz beim Keyframe-Reset! */
}

/* SPALTEN- UND ZEILENVERTEILUNG SET 1 (Zeilen 1 & 2) */
.card-toast-to-ai:not(.card-set-2):not(.card-set-3) {
  grid-column: 1 / 114;
  grid-row: 1 / 2;
  transform-origin: left center !important;
}

.card-basque-country:not(.card-set-2):not(.card-set-3) {
  grid-column: 114 / 161;
  grid-row: 1 / 2;
  transform-origin: left center !important;
}

.card-life-repetition:not(.card-set-2):not(.card-set-3) {
  grid-column: 1 / 38;
  grid-row: 2 / 3;
  transform-origin: left center !important;
}

.card-just-a-bite:not(.card-set-2):not(.card-set-3) {
  grid-column: 38 / 124;
  grid-row: 2 / 3;
  transform-origin: left center !important;
}

.card-gave-up-drawing:not(.card-set-2):not(.card-set-3) {
  grid-column: 124 / 161;
  grid-row: 2 / 3;
  transform-origin: left center !important;
}

/* SPALTEN- UND ZEILENVERTEILUNG SET 2 (Zeilen 3 & 4) */
.card-toast-to-ai.card-set-2 {
  grid-column: 1 / 114;
  grid-row: 3 / 4;
  transform-origin: left center !important;
}

.card-basque-country.card-set-2 {
  grid-column: 114 / 161;
  grid-row: 3 / 4;
  transform-origin: left center !important;
}

.card-life-repetition.card-set-2 {
  grid-column: 1 / 38;
  grid-row: 4 / 5;
  transform-origin: left center !important;
}

.card-just-a-bite.card-set-2 {
  grid-column: 38 / 124;
  grid-row: 4 / 5;
  transform-origin: left center !important;
}

.card-gave-up-drawing.card-set-2 {
  grid-column: 124 / 161;
  grid-row: 4 / 5;
  transform-origin: left center !important;
}

/* SPALTEN- UND ZEILENVERTEILUNG SET 3 (Zeilen 5 & 6) */
.card-toast-to-ai.card-set-3 {
  grid-column: 1 / 114;
  grid-row: 5 / 6;
  transform-origin: left center !important;
}

.card-basque-country.card-set-3 {
  grid-column: 114 / 161;
  grid-row: 5 / 6;
  transform-origin: left center !important;
}

.card-life-repetition.card-set-3 {
  grid-column: 1 / 38;
  grid-row: 6 / 7;
  transform-origin: left center !important;
}

.card-just-a-bite.card-set-3 {
  grid-column: 38 / 124;
  grid-row: 6 / 7;
  transform-origin: left center !important;
}

.card-gave-up-drawing.card-set-3 {
  grid-column: 124 / 161;
  grid-row: 6 / 7;
  transform-origin: left center !important;
}
/* ============================================================================
   WORK SECTION — FULL-WIDTH INLINE VIDEO & CARDS CHOREOGRAPHY
   ============================================================================ */
.work-main-frame.inline-video-playing,
.work-main-frame.inline-video-closing {
  background-color: #000000 !important;
  overflow: hidden !important;
}

.work-main-frame.inline-video-playing .work-frame-left {
  transform: translateX(-100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.work-main-frame.inline-video-closing .work-frame-left {
  z-index: 1 !important;
}

.work-main-frame.inline-video-playing .work-frame-right,
.work-main-frame.inline-video-closing .work-frame-right {
  overflow: visible !important;
  z-index: 50 !important;
}

.work-main-frame.inline-video-playing .work-cards-grid,
.work-main-frame.inline-video-closing .work-cards-grid {
  overflow: visible !important;
  z-index: 50 !important;
}

.movie-card.inline-active {
  z-index: 999999 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.movie-card.inline-active img {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  filter: none !important;
}

/* ============================================================================
   INLINE VIDEO PLAYBACK CONTAINER
   JS sets left/width dynamically after card animation.
   ============================================================================ */
.inline-video-container {
  position: absolute;
  top: 0;
  left: 0;      /* overridden by JS */
  width: 100%;  /* overridden by JS */
  height: 100%;
  z-index: 9500 !important;
  background-color: #000000;
  display: none;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s ease;
}

.inline-video-container.active {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* WICHTIG: Sobald das Video geschlossen wird, verschwindet der Container SOFORT in 0ms,
   damit die zurückgleitende Movie Card NIEMALS unter ein ausfadendes schwarzes Overlay gerät! */
.inline-video-container:not(.active),
.work-main-frame.inline-video-closing ~ .inline-video-container,
.work-container:has(.work-main-frame.inline-video-closing) .inline-video-container {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transition: none !important;
}

/* Vertikaler Poster-Titelbanner an der linken Trennlinie */
.inline-poster-strip {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--banner-width, clamp(60px, 9.5vw, 135px));
  background-color: #000000;
  border-right: 3px solid #000000;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 2;
  transition: width 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.inline-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right top; /* Zeigt EXAKT den gelb-roten vertikalen Titel-Banner der RECHTEN Poster-Seite! */
  display: block;
}

/* Das YouTube Video-Fenster auf der verbliebenen Rechteckfläche */
.inline-video-screen {
  position: absolute;
  top: 0;
  left: 0 !important;
  width: 100% !important;
  height: 100%;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: left 0.85s cubic-bezier(0.16, 1, 0.3, 1), width 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================================
   INLINE VIDEO PLAYBACK: UNHINDERED VIDEO CONTROLS & CLEAN CINEMA VIEW
   ============================================================================ */

/* 1. Stacking-Context-Elevation: Hebt die Work-Sektion physisch über den fixen Header (z=1002) */
body.inline-video-active #work.section-work-skizze {
  z-index: 1005 !important;
}

/* 2. Header-Abschirmung: Blendet angedocktes Logo & Social-Icons aus, damit Klicks oben rechts 100% frei zum YouTube-Player durchgehen */
body.inline-video-active .header {
  pointer-events: none !important;
}

body.inline-video-active .header-center,
body.inline-video-active .header-right {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease !important;
}

body.inline-video-active .header-center *,
body.inline-video-active .header-right *,
body.inline-video-active .nav-logo {
  pointer-events: none !important;
}

/* 3. Nativer OS-Mauszeiger während der Videowiedergabe (kein Umspringen auf Website-SVG-Maus!) */
body.inline-video-active #custom-cursor,
body:has(.lightbox.open) #custom-cursor,
.lightbox.open ~ #custom-cursor {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.inline-video-active,
body.inline-video-active *,
body:has(.lightbox.open),
body:has(.lightbox.open) * {
  cursor: auto !important;
}

body.inline-video-active button,
body.inline-video-active a,
body.inline-video-active [role="button"],
body.inline-video-active .inline-video-close {
  cursor: pointer !important;
}

.inline-video-container.active,
.inline-video-screen,
.inline-video-iframe-wrapper,
.inline-video-iframe-wrapper iframe {
  pointer-events: auto !important;
}

.inline-video-iframe-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 10 !important;
}

.inline-video-iframe-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  z-index: 10 !important;
}

/* Close-Button am Video-Screen: 100% Scharfkantiges Rechteck, Strichstärke 2px (schmal & hoch-elegant), mittig rechts! */
.inline-video-close {
  position: absolute;
  top: 50%;
  right: 0;
  width: 48px;
  height: 56px;
  background: #000000;
  border: 2px solid var(--color-brand, #FFE600);
  border-right: none;
  color: var(--color-brand, #FFE600);
  border-radius: 0px !important; /* 100% Scharfkantiges Rechteck ohne Rundung! */
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: right center;
  transform: translateY(-50%) scaleX(0); /* Entfaltet sich von rechts nach links */
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, background 0.2s ease;
}

.inline-video-close svg {
  width: 28px;
  height: 28px;
  stroke: var(--color-brand, #FFE600);
  stroke-width: 2px;
  stroke-linecap: square !important;
  stroke-linejoin: miter !important;
  transform-origin: center center;
  transform: scale(0); /* Vergrößert das X von der Mitte heraus */
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, stroke 0.2s ease;
}

/* Entfaltet sich geschmeidig von rechts nach links, wenn die Maus das Video befährt! */
.inline-video-container:hover .inline-video-close,
.inline-video-screen:hover .inline-video-close {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) scaleX(1.0);
}

.inline-video-container:hover .inline-video-close svg,
.inline-video-screen:hover .inline-video-close svg {
  transform: scale(1.0);
}

.inline-video-close:hover {
  background: var(--color-brand, #FFE600);
}

.inline-video-close:hover svg {
  stroke: #000000;
}

/* ============================================================================
   ABOUT EASTER EGGS: 16MM HISTORICAL ARCHIVAL & CANVAS PROJECTION SHADER
   ============================================================================ */
.interlude-canvas {
  width: auto;
  height: auto;
  max-width: 59.5vw;
  max-height: 59.5vh;
  object-fit: contain;
  pointer-events: none;
  background: transparent;
  will-change: transform, filter;
  animation: interlude-projector-shutter 0.22s infinite steps(3), interlude-gate-drift 0.6s infinite ease-in-out;
}

/* Echtes historisches Bogenlampen-Flimmern (±4-6% Helligkeits- & Kontrast-Sprünge) */
@keyframes interlude-projector-shutter {
  0%   { filter: brightness(0.96) contrast(1.08) saturate(1.04); }
  33%  { filter: brightness(1.05) contrast(1.12) saturate(1.06); }
  66%  { filter: brightness(0.98) contrast(1.09) saturate(1.05); }
  100% { filter: brightness(1.04) contrast(1.11) saturate(1.06); }
}

/* Sanfter, organischer 16mm Bildstand-Schlupf (Gate Drift ±0.20px - kein nerviges Ruckeln) */
@keyframes interlude-gate-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25%      { transform: translate3d(-0.20px, 0.15px, 0); }
  50%      { transform: translate3d(0.15px, -0.20px, 0); }
  75%      { transform: translate3d(-0.10px, -0.15px, 0); }
}

/* ============================================================================
   A TOAST TO AI - BACKGROUND VIDEO FRAMES MOSAIC OVERLAY (POLYGON-SPLIT SYSTEM)
   ============================================================================ */
.toast-frames-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 6 !important; /* VOR .movie-card-hover-bg (z=3), HINTER .toast-dim-overlay (z=10) & Cards (z=20) */
  isolation: isolate;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease-out, visibility 0.25s;
}

.work-frame-right.toast-p1-active .toast-p1-overlay,
.work-frame-right.toast-p2-active .life-p2-overlay,
.work-frame-right.toast-p3-active .drawing-p3-overlay,
.work-frame-right.toast-p4-active .bite-p4-overlay,
.work-frame-right.toast-p5-active .basque-p5-overlay {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Dunkles Opacity-Overlay über den Shots */
.toast-dim-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45); /* Edle 45% Verdunklung für hervorragenden Kontrast */
  z-index: 10 !important; /* ERHABEN VOR ALLEN 6 FLIEGENDEN KACHELN (z-index 6) & HOVER-VIDEO (z-index 3)! */
  pointer-events: none;
  opacity: 0;
  /* UN-HOVER / MOUSELEAVE: Opacity verschwindet AUGENBLICKLICH & KNACKIG (0.1s, 0s Delay)! */
  transition: opacity 0.15s ease-out 0s;
}

/* DUNKLES OVERLAY: Bleibt nahtlos aktiv bei Hover (.card-hovered), aktivem Projekt (.has-active, .toast-active) & Wellenbewegung (.info-wave-active) - ZERO FLICKER! */
.work-frame-right.card-hovered .toast-dim-overlay,
.work-frame-right.info-wave-active .toast-dim-overlay,
.work-frame-right.toast-active .toast-dim-overlay,
.work-frame-right.has-active .toast-dim-overlay {
  opacity: 1 !important;
  transition: opacity 0.35s ease-out !important;
}

/* ============================================================================
   MOVIE CARD HOVER: DYNAMIC LOOPING BLURRED VIDEO BACKGROUND
   ============================================================================ */
.movie-card-hover-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 3 !important; /* Hinter .toast-frames-overlay (z=6) & .toast-dim-overlay (z=10) */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.30s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.30s ease;
  background-color: #000000;
}

.movie-card-hover-bg.is-active {
  opacity: 1;
  visibility: visible;
}

.movie-card-hover-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) scale(1.05); /* Leichter Overscan gegen Rand-Bleeding */
  object-fit: cover;
  filter: blur(2.5px); /* Ganz seichter, filmischer Bokeh-Blur */
  will-change: transform, filter;
  pointer-events: none;
  transition: filter 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Klick auf Movie-Card: Video wird SOFORT zum riesengroßen, atmosphärischen Blur-Brei (45px Bokeh-Mash) */
.movie-card-hover-bg.blur-mash .movie-card-hover-video {
  filter: blur(45px) brightness(0.85) !important;
  transform: translate(-50%, -50%) scale(1.30) !important;
  transition: filter 0.18s ease-out, transform 0.25s ease-out !important;
}

/* SVG Schnittlinien-Overlay (3px massives Schwarz, schießt aus den Rändern heraus!) */
.toast-cut-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 12 !important; /* Vor den Fotos (1) & vor dem Dim-Overlay (10), hinter der Movie-Card (100) */
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease-out, visibility 0.25s;
}

.toast-cut-lines .cut-line {
  stroke: #000000;
  stroke-width: 3px;
  stroke-linecap: square;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  transition: stroke-dashoffset 0.65s cubic-bezier(0.05, 0.95, 0.05, 1.0);
}

/* Vor dem Einfliegen: Schnittlinien sind in die Ränder zurückgezogen */
.toast-cut-lines .cut-h { stroke-dashoffset: 1500; }
.toast-cut-lines .cut-top-1 { stroke-dashoffset: 1500; }
.toast-cut-lines .cut-top-2 { stroke-dashoffset: 1500; }
.toast-cut-lines .cut-bot-1 { stroke-dashoffset: 1500; }
.toast-cut-lines .cut-bot-2 { stroke-dashoffset: 1500; }

/* Bei Aktivierung: Sichtbar & Schnittlinien schießen blitzschnell aus den 4 Außenrändern heraus! */
.work-frame-right.toast-active .toast-cut-lines {
  opacity: 1 !important;
  visibility: visible !important;
}

.work-frame-right.toast-active .toast-cut-lines .cut-line {
  stroke-dashoffset: 0 !important;
}

/* ============================================================================
   WELLENARTIGE PROJECT INFO (BESCHREIBUNG UNTEN + VERTIKALE METADATEN OBEN RECHTS)
   ============================================================================ */
.movie-card.active,
.work-cards-grid .movie-card.active,
.work-cards-grid .movie-card.active:not(#dummy):not(#dummy2) {
  z-index: 100 !important; /* Poster liegt physikalisch VOR ALLEN 6 Frames und Hintergründen! */
  transform-style: preserve-3d !important;
  transform-origin: center center !important;
  will-change: transform;
}

/* Keim gelber Konturrahmen um die zentrierte Movie Card (Testaufbau) */
.movie-card.active img {
  filter: none !important;
}

.movie-card-info-bottom {
  position: absolute;
  z-index: 120 !important; /* IMMER ERHABEN VOR ALLEN EBENEN (z-index 120)! */
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
  box-sizing: border-box;
  font-weight: 700 !important;
  transform-style: preserve-3d;
  transform-origin: top center;
  will-change: transform;
}

.movie-card-info-bottom .wave-line {
  font-family: var(--font-zen, 'Zen Kaku Gothic New', sans-serif) !important;
  font-size: 10.5px;
  font-weight: 700 !important; /* Komplett fettgedruckt für maximale Lesbarkeit! */
  line-height: 1.25;
  color: var(--color-brand, #ffd900) !important; /* 100% reine Marken-Gelb Schrift! */
  text-shadow: none !important;
  text-align: left !important; /* Ur-Zustand für A Toast to AI und alle anderen Karten! */
}

/* Spezifische Schriftanpassung für flüssige Beschreibungen (p1, p2, p3, p4 & p5) */
.work-frame-right.toast-p1-active .movie-card-info-bottom .wave-line,
.work-frame-right.toast-p2-active .movie-card-info-bottom .wave-line,
.work-frame-right.toast-p3-active .movie-card-info-bottom .wave-line,
.work-frame-right.toast-p4-active .movie-card-info-bottom .wave-line,
.work-frame-right.toast-p5-active .movie-card-info-bottom .wave-line {
  font-size: 10.5px !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

.movie-card-info-bottom .bold-lead {
  font-weight: 900 !important;
}

/* DYNAMISCHE WORT-ZEILEN-WELLE: Wörter gleiten als inline-block Zeile für Zeile wellenförmig heraus */
.movie-card-info-bottom .wave-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(-80px);
  transition: transform 0.1s ease-out 0s, opacity 0.08s ease-out 0s !important;
  white-space: pre;
  font-weight: 700 !important;
}

/* AB 80% DER KARTENBEWEGUNG: Wellenartiges Herausfahren Zeile für Zeile unter der Karte hervor! */
.work-frame-right.info-wave-active .movie-card-info-bottom .wave-line,
.work-frame-right.info-wave-active .movie-card-info-bottom .wave-word {
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.75s cubic-bezier(0.05, 0.95, 0.05, 1.0), opacity 0.60s ease-out !important;
}

/* Wellen-Stagger-Timing Zeile für Zeile (Wasserfall-Effekt) */
.work-frame-right.info-wave-active .movie-card-info-bottom .wave-line:nth-child(1) { transition-delay: 0.00s !important; }
.work-frame-right.info-wave-active .movie-card-info-bottom .wave-line:nth-child(2) { transition-delay: 0.08s !important; }
.work-frame-right.info-wave-active .movie-card-info-bottom .wave-line:nth-child(3) { transition-delay: 0.16s !important; }
.work-frame-right.info-wave-active .movie-card-info-bottom .wave-line:nth-child(4) { transition-delay: 0.24s !important; }
.work-frame-right.info-wave-active .movie-card-info-bottom .wave-line:nth-child(5) { transition-delay: 0.32s !important; }
.work-frame-right.info-wave-active .movie-card-info-bottom .wave-line:nth-child(6) { transition-delay: 0.40s !important; }
.work-frame-right.info-wave-active .movie-card-info-bottom .wave-line:nth-child(7) { transition-delay: 0.48s !important; }
.work-frame-right.info-wave-active .movie-card-info-bottom .wave-line:nth-child(8) { transition-delay: 0.56s !important; }
.work-frame-right.info-wave-active .movie-card-info-bottom .wave-line:nth-child(9) { transition-delay: 0.64s !important; }
.work-frame-right.info-wave-active .movie-card-info-bottom .wave-line:nth-child(10) { transition-delay: 0.72s !important; }
.work-frame-right.info-wave-active .movie-card-info-bottom .wave-line:nth-child(11) { transition-delay: 0.78s !important; }
.work-frame-right.info-wave-active .movie-card-info-bottom .wave-line:nth-child(12) { transition-delay: 0.84s !important; }
.work-frame-right.info-wave-active .movie-card-info-bottom .wave-line:nth-child(13) { transition-delay: 0.90s !important; }
.work-frame-right.info-wave-active .movie-card-info-bottom .wave-line:nth-child(14) { transition-delay: 0.96s !important; }
.work-frame-right.info-wave-active .movie-card-info-bottom .wave-line:nth-child(15) { transition-delay: 1.02s !important; }
.work-frame-right.info-wave-active .movie-card-info-bottom .wave-line:nth-child(16) { transition-delay: 1.08s !important; }

/* ==========================================================================
   3D 180° MOVIE CARD FLIP ENGINE (CINEASTISCHES POSTKARTEN PRODUCTION MEMO)
   ========================================================================== */
.work-frame-right.has-active .movie-card-info-bottom,
.work-frame-right.toast-active .movie-card-info-bottom,
.work-frame-right.info-wave-active .movie-card-info-bottom {
  pointer-events: auto !important;
  cursor: pointer !important;
  transition: opacity 0.35s ease;
}

/* Strikter Text-Trigger: Bei Hover über den unteren Text dimmt dieser auf 25% Opacity */
.work-frame-right.postcard-flipped .movie-card-info-bottom {
  opacity: 0.25 !important;
}

/* Schwarzes Video-Overlay: Bleibt während der 180°-Drehung (0–640ms) voll schwarz */
.work-frame-right.postcard-flipped .toast-dim-overlay {
  opacity: 1 !important;
}

/* Exakt nach 640ms (180°-Drehung vollendet): Kurzes sanftes Ausblenden (300ms Ease-Out Fade) */
.work-frame-right.dim-overlay-snapped .toast-dim-overlay {
  opacity: 0 !important;
  transition: opacity 0.3s ease-out !important;
}

/* Play-Button: Während des 3D-Flips (Hin- & Rückdrehung) strikt ausgeblendet! */
.work-frame-right.postcard-flipped .movie-card-play-btn,
.work-frame-right.postcard-flipped-returning .movie-card-play-btn {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}

/* ABSOLUTER SCHUTZ: Wenn keine Movie Card aktiv zentriert ist, darf der Play-Button NIEMALS im Grid sichtbar sein! */
.work-frame-right:not(.has-active) .movie-card-play-btn,
.work-main-frame:not(.has-active) .movie-card-play-btn {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) scale(0) !important;
  animation: none !important;
}

/* Play-Button Emergence: Sanftes, elegantes Einblenden & Wachsen aus kleinerer Skalierung (reines Ease-Out, Null Bounce!) */
@keyframes playBtnPopIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.70);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.0);
  }
}

.work-frame-right.has-active .movie-card-play-btn.play-btn-pop-in {
  animation: playBtnPopIn 0.40s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.work-frame-right.has-active:not(.postcard-flipped):not(.postcard-flipped-returning) .movie-card-play-btn:not(.play-btn-pop-in) {
  transition: opacity 0.3s ease 0.15s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 3D-Replik des Play-Buttons auf der Vorderseite der Flipper-Bühne (dreht physikalisch 1:1 mit!) */
.movie-card-3d-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(8px);
  pointer-events: none;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  will-change: opacity;
}

.movie-card-3d-play-btn svg {
  display: block;
  overflow: visible;
}

/* Play-Button Fade: Dreht sich bis 90° voll sichtbar mit, blendet zwischen 90° und 120° geschmeidig aus */
@keyframes playBtnFlipFade {
  0%   { opacity: 1; }
  50%  { opacity: 1; }
  67%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes playBtnReturnFade {
  0%   { opacity: 0; }
  100% { opacity: 0; }
}

.work-frame-right.postcard-flipped .movie-card-3d-play-btn {
  animation: playBtnFlipFade 0.64s cubic-bezier(0.42, 0.0, 0.22, 1) forwards !important;
}

.work-frame-right.postcard-flipped-returning .movie-card-3d-play-btn {
  animation: playBtnReturnFade 0.64s linear forwards !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* 3D-Bühne exakt auf die Dimensionen und Position der aktiven Movie Card ausgerichtet:
   Kein Opacity-Delay/Fade mehr beim Umschalten (verhindert das kurze Verschwinden/Flackern bei Text-Hover!) */
.movie-card-3d-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 105 !important; /* Vor der aktiven Movie Card (z=50) & Play-Button (z=100) */
  pointer-events: none;
  perspective: 2000px;
  perspective-origin: center center;
  transform-style: preserve-3d;
  opacity: 0;
  visibility: hidden;
}

.work-frame-right.postcard-flipped .movie-card-3d-stage,
.work-frame-right.postcard-flipped-returning .movie-card-3d-stage {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: none !important;
}

/* Z-Depth Layer: Steuert rein die Tiefen-Auslenkung auf der Z-Achse nach hinten (-W/2),
   damit die zur Kamera zeigende Kante bei 90° exakt auf Z=0 bleibt und die Karte in der Höhe nie gestretcht wird! */
.movie-card-3d-z-depth {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform;
}

@keyframes cardFlipZDepth {
  0% {
    transform: translateZ(0px);
    animation-timing-function: cubic-bezier(0.42, 0.0, 0.22, 1);
  }
  50% {
    transform: translateZ(var(--card-z-recess, -300px));
    animation-timing-function: cubic-bezier(0.42, 0.0, 0.22, 1);
  }
  100% {
    transform: translateZ(0px);
  }
}

@keyframes cardFlipZDepthReturn {
  0% {
    transform: translateZ(0px);
    animation-timing-function: cubic-bezier(0.42, 0.0, 0.22, 1);
  }
  50% {
    transform: translateZ(var(--card-z-recess, -300px));
    animation-timing-function: cubic-bezier(0.42, 0.0, 0.22, 1);
  }
  100% {
    transform: translateZ(0px);
  }
}

.work-frame-right.postcard-flipped .movie-card-3d-z-depth {
  animation: cardFlipZDepth 0.64s cubic-bezier(0.42, 0.0, 0.22, 1) forwards !important;
}

.work-frame-right.postcard-flipped-returning .movie-card-3d-z-depth {
  animation: cardFlipZDepthReturn 0.64s cubic-bezier(0.42, 0.0, 0.22, 1) forwards !important;
}

/* Flipper: Führt die 180° Y-Rotation 100% UNTERBRECHUNGSFREI von 0% bis 100% aus.
   KEIN 50%-Keyframe -> Null Stopp bei 90°, echte geschmeidige Beschleunigung (Ease-In)
   und sanftes Ausbremsen (Ease-Out / Pace-Out)! */
.movie-card-3d-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform;
}

@keyframes cardFlipRotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

@keyframes cardFlipRotateReturn {
  0% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

.work-frame-right.postcard-flipped .movie-card-3d-flipper {
  animation: cardFlipRotate 0.64s cubic-bezier(0.42, 0.0, 0.22, 1) forwards !important;
}

.work-frame-right.postcard-flipped-returning .movie-card-3d-flipper {
  animation: cardFlipRotateReturn 0.64s cubic-bezier(0.42, 0.0, 0.22, 1) forwards !important;
}

/* Front & Back Faces */
.movie-card-3d-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 2px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.movie-card-3d-front {
  z-index: 2;
  transform: rotateY(0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  /* backface-visibility: hidden — inherited from .movie-card-3d-face */
}

.movie-card-3d-front img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block;
}

/* POSTKARTEN-RÜCKSEITE: Komplett tiefschwarz (#000000), alpha-kanal-kontur übernommen via JS mask-image */
.movie-card-3d-back {
  z-index: 1;
  transform: rotateY(180deg);
  background: #000000 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
  padding: 10px;
  display: flex;
  flex-direction: column;
  /* mask-image wird via JS auf dieselbe PNG-URL wie die Vorderseite gesetzt */
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

/* Zarter gelber Innenrahmen mit Abstand zum Außenrand */
.postcard-inner-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 217, 0, 0.45);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 16px;
  overflow: hidden;
  background: #000000;
}

/* 4 Feine Eckmarkierungen (Corner Registration Ticks) */
.corner-tick {
  position: absolute;
  width: 7px;
  height: 7px;
  pointer-events: none;
}
.corner-tick.tick-tl {
  top: -1px;
  left: -1px;
  border-top: 2px solid #ffd900;
  border-left: 2px solid #ffd900;
}
.corner-tick.tick-tr {
  top: -1px;
  right: -1px;
  border-top: 2px solid #ffd900;
  border-right: 2px solid #ffd900;
}
.corner-tick.tick-bl {
  bottom: -1px;
  left: -1px;
  border-bottom: 2px solid #ffd900;
  border-left: 2px solid #ffd900;
}
.corner-tick.tick-br {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid #ffd900;
  border-right: 2px solid #ffd900;
}

/* Film-Poststempel-Briefmarke oben rechts mit Marcus' 4-teiligem Logo */
.postcard-stamp {
  position: absolute;
  top: 9px;
  right: 11px;
  display: flex;
  align-items: center;
  padding: 3px 6px;
  border: 1px dashed rgba(255, 217, 0, 0.65);
  background: rgba(255, 217, 0, 0.04);
  border-radius: 2px;
  pointer-events: none;
  z-index: 10;
}

.postcard-stamp-box {
  display: flex;
  align-items: center;
  gap: 6px;
}

.postcard-stamp-logo {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.postcard-stamp-logo svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 3px rgba(255, 217, 0, 0.4));
}

.postcard-stamp-label {
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono, monospace);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  line-height: 1.15;
  color: #ffd900;
  text-transform: uppercase;
}

/* Postkarten-Header / Memo Kennzeichnung */
.postcard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 120px);
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 217, 0, 0.25);
}

.postcard-memo-tag {
  font-family: var(--font-mono, monospace);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #ffd900;
  text-transform: uppercase;
}

.postcard-project-tag {
  font-family: var(--font-mono, monospace);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: rgba(255, 217, 0, 0.7);
}

/* Monolithischer Blocksatz in reinem Marken-Gelb (#ffd900) */
.postcard-text-body {
  flex: 1;
  font-family: var(--font-zen, 'Zen Kaku Gothic New', sans-serif);
  font-weight: 700;
  color: var(--color-brand, #ffd900) !important;
  text-align: justify !important;
  text-justify: inter-word !important;
  hyphens: auto;
  word-break: normal;
  letter-spacing: -0.01em;
  line-height: 1.34;
  width: 100%;
  box-sizing: border-box;
  user-select: none;
  display: block !important;
  overflow: hidden;
  margin: 6px 0;
}

.postcard-text-body .postcard-lead {
  font-weight: 900 !important;
  color: #ffd900 !important;
  text-shadow: 0 0 1px rgba(255, 217, 0, 0.8);
}

/* Postcard Footer Line */
.postcard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 217, 0, 0.25);
  font-family: var(--font-mono, monospace);
  font-size: 7.5px;
  letter-spacing: 0.10em;
  color: rgba(255, 217, 0, 0.65);
  text-transform: uppercase;
}

/* VERTIKALE METADATEN OBEN RECHTS (Buchstaben untereinander mit 90° gedrehtem Doppelpunkt!) */
.movie-card-meta-topright {
  position: absolute;
  z-index: 30 !important; /* ERHABEN VOR DEM SCHWARZEN OVERLAY (z-index 10) & HINTER DER MOVIE CARD (z-index 100)! */
  pointer-events: none;
  display: flex;
  flex-direction: row; /* 3 Spalten (1. RUNTIME, 2. ASPECT, 3. YEAR) nebeneinander */
  gap: 14px;
  align-items: flex-start;
  transform-style: preserve-3d;
  transform-origin: top left;
  will-change: transform;
}

.movie-card-meta-topright .meta-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-klee, 'Klee One', cursive, sans-serif) !important;
  font-size: 11.5px;
  font-weight: 600 !important;
  -webkit-text-stroke: 0.35px currentColor;
  letter-spacing: 0px;
  text-transform: uppercase;
  color: var(--color-brand, #ffd900) !important; /* 100% Marken-Gelb! */
  text-shadow: 0 0 0.5px var(--color-brand, #ffd900) !important; /* Maximale Sättigung und definierte Dicke! */
  opacity: 0;
  /* Versteckt HINTER dem Poster-Cover */
  transform: translateX(-140px);
  transition: transform 0.1s ease-out 0s, opacity 0.08s ease-out 0s !important;
  transition-delay: 0s !important;
}

.movie-card-meta-topright .meta-column .meta-label-stack,
.movie-card-meta-topright .meta-column .meta-val-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.movie-card-meta-topright .meta-column .meta-label-stack {
  margin-bottom: 6px;
  opacity: 0.9;
}

.movie-card-meta-topright .meta-column .meta-char {
  display: block;
  line-height: 1.05;
  text-align: center;
}

.movie-card-meta-topright .meta-column .meta-colon {
  display: inline-block !important;
  transform: rotate(90deg) !important;
  line-height: 0.8 !important;
  margin: 2px 0 !important;
}

/* AB 80% DER KARTENBEWEGUNG: 3 Spalten fahren wellenartig rechts hinter der Karte hervor! */
.work-frame-right.info-wave-active .movie-card-meta-topright .meta-column {
  opacity: 1;
  transform: translateX(0);
  transition: transform 0.75s cubic-bezier(0.05, 0.95, 0.05, 1.0), opacity 0.60s ease-out !important;
}

/* Wellen-Stagger-Timing Spalte für Spalte (1. RUNTIME, 2. ASPECT, 3. YEAR) */
.work-frame-right.info-wave-active .movie-card-meta-topright .meta-column:nth-child(1) { transition-delay: 0.05s !important; }
.work-frame-right.info-wave-active .movie-card-meta-topright .meta-column:nth-child(2) { transition-delay: 0.15s !important; }
.work-frame-right.info-wave-active .movie-card-meta-topright .meta-column:nth-child(3) { transition-delay: 0.25s !important; }

/* ZENTRIERTER PLAY-BUTTON ÜBER DER MOVIE CARD */
.movie-card-play-btn {
  position: absolute;
  z-index: 9999 !important; /* Thronet physikalisch ganz oben ÜBER DEM GESAMTEN GRID! */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: auto;
  cursor: none !important;
  transform-style: preserve-3d;
  filter: blur(0px) brightness(1);
  will-change: transform, opacity, filter;
  transition: transform 0.15s ease-out 0s, opacity 0.30s ease, filter 0.30s ease !important;
}

.movie-card-play-btn svg {
  display: block;
  overflow: visible;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Gelbe Laser-Kontur für scharfkantiges Dreieck (Umfang ca. 200px) */
.play-laser-path {
  stroke-dasharray: 0 200;
  stroke-dashoffset: 200;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
/* AB 80% DER KARTENBEWEGUNG: Play-Button wächst von 0 auf seine Originalgröße heran! */
.work-frame-right.info-wave-active .movie-card-play-btn {
  opacity: 1;
  filter: blur(0px) brightness(1);
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease-out, filter 0.35s ease-out !important;
}

/* Massiver, gestanzter schwarzer Drop-Shadow NUR für die weiße Dreieckskontur & NUR bei Hover (ohne verschwommenen Blur!) */
.play-base-triangle {
  filter: none;
  transition: filter 0.2s ease;
}

.movie-card-play-btn:hover .play-base-triangle {
  filter: drop-shadow(0px 5px 1px rgba(0, 0, 0, 1.0)) drop-shadow(0px 3px 0px rgba(0, 0, 0, 1.0));
}

/* Der gelbe Farbverlauf besitzt absolut KEINEN Drop-Shadow! */
.play-laser-path {
  filter: none !important;
  stroke-dasharray: 0 200;
  stroke-dashoffset: 0;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

/* 100% Opacity: 1-fach lang (1 Seite), Kopf schießt ohne Ease-Out durch, Schwanz hat starkes Ease-In am Ziel */
.movie-card-play-btn:hover .laser-100 {
  opacity: 1.0;
  animation: playLaser100 1.8s cubic-bezier(0.5, 0, 0.75, 1) infinite;
  animation-delay: 0s;
}

/* 80% Opacity: 2-fach lang (2 Seiten), geringeres Easing */
.movie-card-play-btn:hover .laser-80 {
  opacity: 0.80;
  animation: playLaser80 1.8s cubic-bezier(0.3, 0, 0.45, 1) infinite;
  animation-delay: 0.06s;
}

/* 60% Opacity: 3-fach lang (alle 3 Seiten), kaum Ease-Out, volle Beschleunigung beim Aufholen */
.movie-card-play-btn:hover .laser-60 {
  opacity: 0.60;
  animation: playLaser60 1.8s cubic-bezier(0.1, 0, 0.15, 1) infinite;
  animation-delay: 0.12s;
}

/* 100% Opacity Keyframes (1-fach lang = 1 Seite / ~66px) */
@keyframes playLaser100 {
  0% {
    stroke-dasharray: 0 200;
    stroke-dashoffset: 0;
  }
  12% {
    stroke-dasharray: 20 180; /* Startet sanft mit kleinem gelben Funken (20px) an der Spitze */
    stroke-dashoffset: 0;
  }
  55% {
    stroke-dasharray: 66 134; /* Schießt durchgehend bis zum ENDE (200px) ohne Zwischenstopp */
    stroke-dashoffset: -134;
  }
  85% {
    stroke-dasharray: 0 200; /* Schwanz staucht sich am Ziel zusammen */
    stroke-dashoffset: -200;
  }
  100% {
    stroke-dasharray: 0 200; /* WEISSER RUHEZUSTAND */
    stroke-dashoffset: -200;
  }
}

/* 80% Opacity Keyframes (2-fach lang = 2 Seiten / ~133px) */
@keyframes playLaser80 {
  0% {
    stroke-dasharray: 0 200;
    stroke-dashoffset: 0;
  }
  12% {
    stroke-dasharray: 15 185; /* Startet ebenfalls sanft mit kleinem Funken (15px) */
    stroke-dashoffset: 0;
  }
  55% {
    stroke-dasharray: 133 67; /* Schießt durchgehend bis zum ENDE (200px) ohne Zwischenstopp */
    stroke-dashoffset: -67;
  }
  85% {
    stroke-dasharray: 0 200; /* Geringeres Easing */
    stroke-dashoffset: -200;
  }
  100% {
    stroke-dasharray: 0 200; /* WEISSER RUHEZUSTAND */
    stroke-dashoffset: -200;
  }
}

/* 60% Opacity Keyframes (3-fach lang = alle 3 Seiten / ~200px) */
@keyframes playLaser60 {
  0% {
    stroke-dasharray: 0 200;
    stroke-dashoffset: 0;
  }
  12% {
    stroke-dasharray: 10 190; /* Startet mit feinstem 10px Schweif */
    stroke-dashoffset: 0;
  }
  55% {
    stroke-dasharray: 200 0; /* Schießt durchgehend über alle 3 Seiten bis zum ENDE (200px) */
    stroke-dashoffset: 0;
  }
  85% {
    stroke-dasharray: 0 200; /* Holt ohne Ease-Out sausend auf & trifft alle gleichzeitig am Ziel! */
    stroke-dashoffset: -200;
  }
  100% {
    stroke-dasharray: 0 200; /* WEISSER RUHEZUSTAND */
    stroke-dashoffset: -200;
  }
}

/* Organische Foto-Kacheln (Präzise polygon-geschnittene Kacheln, 100% bündig an den Rändern) */
.toast-frame-tile {
  position: absolute;
  overflow: hidden;
  background-color: #111111;
  border-radius: 0px;
  border: none !important; /* Keine störenden 4-Seiten-Borders */
  box-shadow: none !important; /* Keine störenden Eck-Schlagschatten */
  opacity: 1 !important;
  /* Ursprungsposition: Fahren direkt aus den schwarzen Außenrändern des Frames heraus */
  transform: translate(var(--dir-x, 0px), var(--dir-y, 0px)) scale(0.85);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) 0s;
  box-sizing: border-box !important;
}

.toast-frame-tile img,
.toast-frame-tile video.toast-video-loop {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.toast-frame-tile video.toast-video-loop {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
  z-index: 2;
}

.toast-frame-tile.is-video-playing video.toast-video-loop {
  opacity: 1;
}

/* Bei Aktivierung von p1, p2, p3, p4 oder p5 fliegen alle 6 Fotos mit 100% Opacity herein! */
.work-frame-right.toast-p1-active .toast-p1-overlay .toast-frame-tile,
.work-frame-right.toast-p2-active .life-p2-overlay .toast-frame-tile,
.work-frame-right.toast-p3-active .drawing-p3-overlay .toast-frame-tile,
.work-frame-right.toast-p4-active .bite-p4-overlay .toast-frame-tile,
.work-frame-right.toast-p5-active .basque-p5-overlay .toast-frame-tile {
  opacity: 1 !important;
  transform: translate(0px, 0px) scale(1) !important;
  transition: transform 0.75s cubic-bezier(0.05, 0.95, 0.05, 1.0) !important;
}

/* TOP ROW (Höhe: 50%, top: 0 — 100% bündig mit oberem Rahmen!) */
.toast-frame-tile.tile-1 {
  top: 0;
  left: 0;
  width: 37.5%;
  height: 50%;
  clip-path: polygon(0% 0%, 100% 0%, 81.33% 100%, 0% 100%);
  --dir-x: -450px;
  --dir-y: -350px;
  z-index: 1;
}

.toast-frame-tile.tile-2 {
  top: 0;
  left: 30.5%;
  width: 39%;
  height: 50%;
  clip-path: polygon(15.38% 0%, 100% 0%, 84.62% 100%, 0% 100%);
  --dir-x: 0px;
  --dir-y: -450px;
  z-index: 2;
}

.toast-frame-tile.tile-3 {
  top: 0;
  left: 63.5%;
  width: 36.5%;
  height: 50%;
  clip-path: polygon(16.44% 0%, 100% 0%, 100% 100%, 0% 100%);
  --dir-x: 450px;
  --dir-y: -350px;
  z-index: 3;
}

/* BOTTOM ROW (Höhe: 50%, top: 50% — 100% bündig mit unterem Rahmen!) */
.toast-frame-tile.tile-4 {
  top: 50%;
  left: 0;
  width: 37.5%;
  height: 50%;
  clip-path: polygon(0% 0%, 81.33% 0%, 100% 100%, 0% 100%);
  --dir-x: -450px;
  --dir-y: 350px;
  z-index: 4;
}

.toast-frame-tile.tile-5 {
  top: 50%;
  left: 30.5%;
  width: 39%;
  height: 50%;
  clip-path: polygon(0% 0%, 84.62% 0%, 100% 100%, 15.38% 100%);
  --dir-x: 0px;
  --dir-y: 450px;
  z-index: 5;
}

.toast-frame-tile.tile-6 {
  top: 50%;
  left: 63.5%;
  width: 36.5%;
  height: 50%;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 16.44% 100%);
  --dir-x: 450px;
  --dir-y: 350px;
  z-index: 6;
}



/* Toast to AI (p1) - Unten Mitte (tile-5): Kräftig herangezoomt (1.42x), sodass der weiße Tisch und Tellerstapel die gesamte Kachel lückenlos ausfüllen */
.work-frame-right .toast-p1-overlay .toast-frame-tile.tile-5 img,
.work-frame-right .toast-p1-overlay .toast-frame-tile.tile-5 video.toast-video-loop {
  object-fit: cover !important;
  object-position: center 60% !important;
  transform: scale(1.42) !important;
  transform-origin: center center !important;
}

/* The Day I Gave Up Drawing (p3) - Unten Rechts (tile-6): Oberer Bereich freigelegt & nach unten positioniert */
.work-frame-right .drawing-p3-overlay .toast-frame-tile.tile-6 img,
.work-frame-right .drawing-p3-overlay .toast-frame-tile.tile-6 video.toast-video-loop {
  object-fit: cover !important;
  object-position: center top !important;
}


/* NUR BEIM EINFLIEGEN (Hover): Stagger-Delays aktivieren! */
.work-frame-right.toast-active .toast-frame-tile.tile-1 { transition-delay: 0.00s !important; }
.work-frame-right.toast-active .toast-frame-tile.tile-2 { transition-delay: 0.04s !important; }
.work-frame-right.toast-active .toast-frame-tile.tile-3 { transition-delay: 0.08s !important; }
.work-frame-right.toast-active .toast-frame-tile.tile-4 { transition-delay: 0.06s !important; }
.work-frame-right.toast-active .toast-frame-tile.tile-5 { transition-delay: 0.10s !important; }
.work-frame-right.toast-active .toast-frame-tile.tile-6 { transition-delay: 0.14s !important; }

/* IDLE-ZUSTAND: Absolut sprungsfreie, lückenlose vertikale Endlos-Schleife via JS rAF Ticker */
.work-cards-grid {
  will-change: transform;
  z-index: 20 !important; /* Schwebt unanfechtbar vor dem Dim-Overlay (10) und vor allen 6 Frames (1)! */
}

.work-cards-grid.has-active {
  transition: transform 0.75s cubic-bezier(0.05, 0.95, 0.05, 1.0) !important;
}

.movie-card {
  position: relative;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  overflow: visible !important;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.75s cubic-bezier(0.05, 0.95, 0.05, 1.0), opacity 0.4s ease, filter 0.4s ease;
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
  cursor: none !important;
}

/* UNBEDINGTE EISERNE REGEL: 100% VOLLSTÄNDIGE UNBESCHNITTENE IMAGES (object-fit: contain!) */
.movie-card img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  background-color: transparent !important;
  display: block;
  filter: none !important;
  box-shadow: none !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}


/* ==========================================================================
   HOVER / SELEKTION: DIE GEWÄHLTE KARTE DOCKT EXAKT FLÜSSIG (0PX GAP) AN DER LINKEN TRENNLINIE AN
   ALLE ANDEREN KARTEN SCHIEBEN SICH HERAUS AUS DEM RECHTECK (HERAUSFLIEGEN)
   ========================================================================== */

/* INAKTIVE KARTEN: Bewegen sich dynamisch in JS nach außen weg von der aktiven Karte (vollständig ausgeblendet!) */
.work-cards-grid.has-active .movie-card:not(.active) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease-out, visibility 0.3s !important;
}

/* GEWÄHLTE / AKTIVE KARTE: Positioniert sich exakt zentriert in der Mitte des rechten Rahmens mit gelbem Marken-Rahmen */
.movie-card.active,
.movie-card:hover {
  z-index: 50 !important;
  opacity: 1 !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.movie-card img {
  transition: filter 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  filter: none !important;
}

/* Zustand A: Titel-Hover im Buchstabensalat (Karte fliegt puristisch OHNE gelben Rahmen zur Mitte) */
.movie-card.active img {
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Grundlegender Transform-Origin für alle Movie Cards: Zentriert aus der eigenen Mitte heraus! */
.movie-card {
  transform-origin: center center !important;
}

/* Zustand B: Direkt-Hover mit der Maus über eine Movie Card im Marquee (NUR WENN KEIN TITEL IM BUCHSTABENSALAT GEHOVERT IST!) */
.work-frame-right:not(.has-active) .movie-card:hover {
  transform: scale(1.0) !important;
  transform-origin: center center !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 60 !important;
}

.work-frame-right:not(.has-active) .movie-card:hover img {
  outline: none !important;
  box-shadow: none !important;
  filter: url(#yellow-png-outline) drop-shadow(0 0 2px var(--color-brand, #ffd900)) !important;
}

/* ALLE ANDEREN Movie Cards schrumpfen um 5% (scale 0.95) zentriert (NUR WENN KEIN TITEL GEHOVERT IST!) */
.work-frame-right:not(.has-active) .work-cards-grid:has(.movie-card:hover) .movie-card:not(:hover) {
  transform: scale(0.95) !important;
  transform-origin: center center !important;
  opacity: 1 !important; /* KEINE ABDUNKLUNG! */
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* KEINE Overlays / Text / Gradienten auf den Bildern! */
.card-overlay {
  display: none !important;
}

@media (max-width: 900px) {
  #work.section-work-skizze {
    height: auto;
    min-height: auto;
    padding: 30px 20px;
  }
  
  .work-main-frame {
    grid-template-columns: 1fr;
  }
  
  .work-frame-left {
    border-right: none;
    border-bottom: 3px solid #000000;
  }

  .work-cards-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .card-just-a-bite,
  .card-basque-country,
  .card-toast-to-ai,
  .card-life-repetition,
  .card-gave-up-drawing {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 768px) {
  .project-block {
    grid-template-columns: 1fr;
    gap: var(--spacing-18);
    padding: var(--spacing-24) 0;
  }
  .project-thumbnail {
    width: 100%;
    order: -1; /* Image on top in mobile */
  }
}

/* ==========================================================================
   SECTION 3 — ABOUT / THE ORGANIZED CREATIVE
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: center;
}

.about-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.about-text .text-display {
  font-family: var(--font-serif);
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.about-header-flex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
  margin-bottom: 4px;
}

@media (max-width: 900px) {
  .about-header-flex {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.about-tagline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-style: normal;
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-paper-white, #ffffff);
  border-left: 3px solid #ffd900;
  padding-left: 14px;
  margin: 0;
}

.about-lead {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.05rem, 1.35vw, 1.15rem);
  font-weight: 500;
  line-height: 1.5;
  color: #ffffff;
  margin: 2px 0 6px 0;
}

.about-bio {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--color-smoke, #a0a0a0);
  max-width: 100%;
  font-size: 0.95rem;
  line-height: 1.55;
}

.about-cta {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-style: normal;
  font-size: 1.08rem;
  font-weight: 600;
  color: #ffd900;
  margin: 6px 0 2px 0;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   ABOUT SECTION DIGITAL READER (KINETIC GOLD MARKER ON DARK CARDS)
   ========================================================================== */
.about-box-subtitle,
.about-box-lead,
.about-box-bio1,
.about-box-bio2 {
  position: relative;
  box-shadow: inset 0 0 0 0px #ffffff;
  transition: box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease !important;
}

/* Inward Border Thickening on Hover (No Layout Shift, Safe Distance from Text) */
.about-box-subtitle:hover,
.about-box-lead:hover,
.about-box-bio1:hover,
.about-box-bio2:hover {
  box-shadow: inset 0 0 0 3px #ffffff !important;
}

.about-box-subtitle .about-tagline,
.about-box-lead .about-lead,
.about-box-bio1 .about-bio,
.about-box-bio2 .about-bio {
  position: relative;
}

/* KINETIC BRAND YELLOW GOLD MARKER (TRANSPARENT INNEN + 1PX GOLDRAND + KANTIGE ECKEN) */
.about-reader-pill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  background-color: transparent !important;
  border: 1px solid #ffd900 !important;
  box-sizing: border-box !important;
  border-radius: 0px !important;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-9999px, -9999px, 0);
  box-shadow: 0 0 10px rgba(255, 217, 0, 0.25);
  transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.3, 1),
              width 0.16s cubic-bezier(0.2, 0.9, 0.3, 1),
              height 0.16s cubic-bezier(0.2, 0.9, 0.3, 1),
              opacity 0.25s ease-out;
  will-change: transform, width, height, opacity;
}

.about-word {
  display: inline-block;
  white-space: pre-wrap;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-weight: inherit !important;
  box-sizing: border-box;
  vertical-align: baseline;
  position: relative;
  z-index: 10;
  transition: color 0.42s ease, -webkit-text-fill-color 0.42s ease;
}

/* 1. CURRENT ACTIVE WORD INSIDE GOLD MARKER (100% MARKEN-GELB) */
.about-word.reader-active,
.about-box .about-word.reader-active,
.about-box:hover .about-word.reader-active,
.about-box.is-reading .about-word.reader-active,
.about-box:hover .about-tagline .about-word.reader-active,
.about-box:hover .about-lead .about-word.reader-active,
.about-box:hover .about-bio .about-word.reader-active,
#box-subtitle .about-word.reader-active,
#box-lead .about-word.reader-active,
#box-bio1 .about-word.reader-active,
#box-bio2 .about-word.reader-active {
  color: #ffd900 !important;
  -webkit-text-fill-color: #ffd900 !important;
  font-weight: inherit !important;
  z-index: 15 !important;
  position: relative !important;
  display: inline-block !important;
  background: transparent !important;
  background-color: transparent !important;
  transition: color 0.05s ease, -webkit-text-fill-color 0.05s ease !important;
}

/* 2. GLOW TRAIL STAGE 1 (1 Wort hinter dem Marker: Strahlendes Gold) */
.about-word.trail-1,
.about-box:hover .about-word.trail-1,
.about-box.is-reading .about-word.trail-1 {
  color: #ffd900 !important;
  -webkit-text-fill-color: #ffd900 !important;
  font-weight: inherit !important;
  z-index: 12 !important;
}

/* 3. GLOW TRAIL STAGE 2 (2 Worte hinter dem Marker: Helles Gold) */
.about-word.trail-2,
.about-box:hover .about-word.trail-2,
.about-box.is-reading .about-word.trail-2 {
  color: #ffe666 !important;
  -webkit-text-fill-color: #ffe666 !important;
  font-weight: inherit !important;
  z-index: 11 !important;
}

/* 4. GLOW TRAIL STAGE 3 (3 Worte hinter dem Marker: Sanftes Cremegold) */
.about-word.trail-3,
.about-box:hover .about-word.trail-3,
.about-box.is-reading .about-word.trail-3 {
  color: #fff2b3 !important;
  -webkit-text-fill-color: #fff2b3 !important;
  font-weight: inherit !important;
  z-index: 10 !important;
}

/* 5. GLOW TRAIL STAGE 4 (4 Worte hinter dem Marker: Nahezu Weiß) */
.about-word.trail-4,
.about-box:hover .about-word.trail-4,
.about-box.is-reading .about-word.trail-4 {
  color: #f5f5f5 !important;
  -webkit-text-fill-color: #f5f5f5 !important;
  font-weight: inherit !important;
  z-index: 10 !important;
}

.about-tags {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--color-smoke, #a0a0a0);
  text-transform: uppercase;
  margin-top: 6px;
}

.about-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: var(--color-obsidian);
  overflow: hidden;
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}

.about-image:hover img {
  filter: grayscale(0%);
}

@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-36);
  }
  .about-image {
    max-width: 400px;
    margin: 0 auto;
  }
}

/* ==========================================================================
   SECTION 4 — SERVICES
   ========================================================================== */
.zen-bed-canvas {
  position: absolute;
  top: -480px;
  left: 0;
  width: 100%;
  height: calc(100% + 480px);
  pointer-events: none;
  z-index: 1; /* Lies directly on paper-white background, behind all elements */
}

.zen-logo-sand-canvas {
  position: absolute;
  top: -480px;
  left: 0;
  width: 100%;
  height: calc(100% + 480px);
  pointer-events: none;
  z-index: 2; /* In front of zen-bed-canvas (z-1), behind text */
}

.zen-trail-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 550px);
  pointer-events: none;
  z-index: 25; /* Paints ABOVE section text/lines & BEHIND Logo Stone (z-index 100) */
}

.zen-trail-canvas.is-falling {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: calc(100vh + 300px) !important;
  z-index: 25 !important; /* BEHIND meditation-man-canvas (z-index 30) */
  pointer-events: none !important;
}

.zen-trail-fg-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 550px);
  pointer-events: none;
  z-index: 35 !important; /* IN FRONT OF meditation-man-canvas (z-index 30), BEHIND stone (z-100) & badge (z-1000) */
  display: none;
}

.zen-trail-fg-canvas.is-falling {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: calc(100vh + 300px) !important;
  z-index: 35 !important;
  pointer-events: none !important;
}

#about-logo-stone.is-falling {
  position: fixed !important;
  z-index: 100 !important;
  pointer-events: none !important;
}

.services-sand-mound-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3; /* Behind text (z-index 5), in front of background canvases (z-index 2) */
}

.pouring-water-canvas {
  position: absolute;
  top: -480px;
  left: 0;
  width: 100%;
  height: calc(100% + 480px);
  pointer-events: none;
  z-index: 2; /* In front of pure white background (#ffffff at z-index 10 of container), behind text */
}

.rake-sand-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2; /* Behind service text and zen sand trail */
}

.cut-leaves-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2; /* Behind service text and zen sand trail */
}

.meditation-man-canvas {
  position: absolute;
  top: -240px;
  left: 0;
  width: 100%;
  height: calc(100% + 480px);
  pointer-events: none;
  z-index: 30 !important; /* Above falling sand (z-index 25), behind Service Badge (z-index 1000) */
}

.services-list {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  width: 100%;
}

.service-block {
  position: relative;
  z-index: 5; /* In FRONT of rake sand & pouring water canvas, so text is 100% readable! */
  display: grid;
  grid-template-columns: 1.25fr 1.75fr;
  padding: 32px 0;
  gap: 40px;
  text-align: left;
  min-height: 160px;
  box-sizing: border-box;
  align-items: center;
  transition: padding 0.3s ease;
  cursor: pointer;
}

.service-title {
  font-family: var(--font-zen, 'Zen Kaku Gothic New', sans-serif) !important;
  text-transform: uppercase;
  font-weight: 800 !important;
  font-size: 20px;
  letter-spacing: 0.5px;
  line-height: 1.35;
  color: #ffffff !important;
  text-shadow: none !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform-origin: center center !important;
  display: inline-block;
  justify-self: start;
  will-change: transform;
}

.service-desc {
  font-family: var(--font-klee, 'Klee One', cursive, sans-serif) !important;
  font-weight: 1000 !important;
  -webkit-text-stroke: 0.35px #ffffff !important;
  color: #ffffff !important;
  font-size: 15.5px;
  line-height: 1.6;
  text-shadow: none !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), -webkit-text-stroke 0.35s ease !important;
  transform-origin: center center !important;
  display: inline-block;
  will-change: transform;
}

.service-title.is-title-hovered {
  transform: scale(1.05);
  color: #ffffff !important;
  text-shadow: none !important;
}

.service-desc.is-desc-hovered {
  transform: scale(1.03);
  color: #ffffff !important;
  -webkit-text-stroke: 0.42px #ffffff !important;
  text-shadow: none !important;
}

@media (max-width: 768px) {
  #services {
    padding: 70px 0 90px 0 !important;
    min-height: auto;
  }
  .service-block {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 26px 0;
  }
  .service-title {
    font-size: 18px;
  }
  .service-desc {
    font-size: 15px;
  }
}

/* FAQ Cards Light Mode Overrides */
.faq-card {
  background: #f7f7f7 !important;
  border: 1px solid var(--color-bone, #cacaca) !important;
  border-radius: 8px;
  padding: 1.5rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.faq-card:hover {
  border-color: #999999 !important;
  transform: translateY(-2px);
}

.faq-card h3 {
  color: var(--color-obsidian, #000000) !important;
}

.faq-card p {
  color: #444444 !important;
}

/* ==========================================================================
   SECTION 5 — CONTACT
   ========================================================================== */
#contact {
  position: relative;
  z-index: 1; /* Below .services-pin-container (z-index 10) so falling sand bed overlaps the black background */
  padding-bottom: 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-56);
  align-items: start;
}

.contact-left {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  text-align: left;
}

.contact-left .text-display {
  font-family: var(--font-zen, 'Zen Kaku Gothic New', sans-serif) !important;
  font-weight: 900 !important;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.15;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-paper-white);
  margin-bottom: 0;
}

.contact-headline-anim {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  opacity: 0 !important;
  pointer-events: none !important;
  min-height: calc(23 * 16px + 44px); /* 412px: leaves ~44px clear breathing room below Line 4 HERE. */
  margin-bottom: 0;
}

#contact.is-transition-settled .contact-headline-anim {
  pointer-events: auto !important;
}

.contact-title-line {
  display: block;
}

.contact-email,
.contact-address,
.contact-left-footer,
.form-section-title,
.form-group,
.custom-option-label,
.form-submit-solid-btn {
  transform-origin: center center;
  will-change: transform, opacity;
}

#contact.is-transition-pinned,
#contact.is-transition-settled {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  z-index: 90 !important;
  background-color: var(--color-obsidian, #0a0a0a) !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  padding-top: calc(5 * 16px + 36px) !important;
  padding-bottom: calc(5 * 16px + 20px) !important;
  box-sizing: border-box !important;
}

#contact.is-transition-pinned .contact-grid,
#contact.is-transition-settled .contact-grid {
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  align-items: stretch;
}

#contact.is-transition-pinned .contact-right,
#contact.is-transition-settled .contact-right {
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 8px 32px 8px;
  box-sizing: border-box;
}

#contact.is-transition-pinned .contact-right::-webkit-scrollbar,
#contact.is-transition-settled .contact-right::-webkit-scrollbar {
  display: none;
}

#contact.is-transition-settled,
#contact.is-transition-pinned.is-transition-settled {
  pointer-events: auto !important;
}

#contact.is-transition-settled .contact-headline-anim,
#contact.is-transition-settled .contact-email,
#contact.is-transition-settled .contact-address,
#contact.is-transition-settled .contact-left-footer,
#contact.is-transition-settled .contact-left-footer a,
#contact.is-transition-settled .contact-legal-link,
#contact.is-transition-settled .contact-form,
#contact.is-transition-settled .form-section,
#contact.is-transition-settled .form-group,
#contact.is-transition-settled .contact-input-underline,
#contact.is-transition-settled .custom-option-label,
#contact.is-transition-settled .custom-option-label *,
#contact.is-transition-settled .form-submit-solid-btn {
  pointer-events: auto !important;
}

#contact,
#contact *,
#contact.is-transition-settled,
#contact.is-transition-settled *,
#contact input,
#contact textarea,
#contact a,
#contact button,
#contact label {
  cursor: none !important;
}

#contact.is-transition-pinned .footer,
#contact.is-transition-settled .footer {
  opacity: 0 !important;
  pointer-events: none !important;
}

.contact-char {
  display: inline-block;
  color: var(--color-paper-white);
  -webkit-text-stroke: 1.5px var(--color-paper-white);
  transition: none;
  will-change: color, -webkit-text-stroke, transform, text-shadow;
}

.contact-char.contact-char-space {
  width: 0.26em;
}

.contact-period-anchor,
.contact-period-logo {
  display: none !important;
}

.contact-logo-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.contact-logo-white {
  opacity: 1;
}

.contact-logo-yellow {
  opacity: 0;
}

/* Sequential letter-by-letter fill wave when line lands in position */
.contact-title-line.is-landed .contact-char {
  color: var(--color-paper-white);
  -webkit-text-stroke: 1.5px var(--color-paper-white);
  transition: none;
}

/* ==========================================================================
   WARM GOLDEN SHIMMER WAVE ON HOVER (25% faster: paced over ~1.54s, zero glow)
   ========================================================================== */
.contact-headline-anim.hover-wave-active .contact-char:not(.contact-char-space):not(.contact-period-logo) {
  animation: contact-char-wave 0.49s cubic-bezier(0.2, 0.8, 0.25, 1) var(--wave-delay, 0s) forwards;
}

@keyframes contact-char-wave {
  0% {
    color: var(--color-paper-white);
    -webkit-text-stroke: 1.5px var(--color-paper-white);
    text-shadow: none;
  }
  40% {
    color: var(--char-gold-color, #FFE600);
    -webkit-text-stroke: 1.5px var(--char-gold-color, #FFE600);
    text-shadow: none;
  }
  80% {
    color: var(--color-paper-white);
    -webkit-text-stroke: 1.5px var(--color-paper-white);
    text-shadow: none;
  }
  100% {
    color: var(--color-paper-white);
    -webkit-text-stroke: 1.5px var(--color-paper-white);
    text-shadow: none;
  }
}

.contact-title-line-1,
.contact-title-line-2,
.contact-title-line-3 {
  transform: none;
}

.contact-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0;
  gap: 24px;
  position: relative;
  width: 100%;
}

.contact-email {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-family: var(--font-zen, 'Zen Kaku Gothic New', sans-serif);
  font-size: clamp(15px, 2.2vw, 22px);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--color-paper-white);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transform-origin: left center;
  will-change: transform;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
  cursor: pointer;
  z-index: 10;
}

.email-text {
  display: inline-block;
  transition: color 0.3s ease;
}

.email-bracket {
  position: absolute;
  top: 50%;
  color: var(--color-brand, #FFE600);
  font-family: inherit;
  font-size: inherit;
  font-weight: 500 !important;
  -webkit-text-stroke: 0px !important;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.25s ease, transform 0s 0.25s;
}

.email-bracket-left {
  right: 100%;
  margin-right: 8px;
  transform: translateY(-50%) translateX(-30px);
}

.email-bracket-right {
  left: 100%;
  margin-left: 8px;
  transform: translateY(-50%) translateX(30px);
}

.contact-email:hover,
.contact-email.is-centered {
  transform: translate3d(var(--target-x, 0px), var(--target-y, 0px), 0) scale(1.20);
  color: var(--color-paper-white);
}

.contact-email:hover .email-bracket,
.contact-email.is-centered .email-bracket {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.contact-address {
  font-family: var(--font-klee, 'Klee One', cursive, sans-serif) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.5;
  letter-spacing: 0.2px;
  color: var(--color-smoke);
  margin: 0;
  text-align: left;
}

/* Contact Left Column Footer & Legal Links */
.contact-left-footer {
  margin-top: auto;
  width: 100%;
  max-width: 420px;
  padding-top: 24px;
  box-sizing: border-box;
}

.contact-left-divider {
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.4);
  margin-bottom: 14px;
}

.contact-left-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.contact-left-links {
  display: flex;
  gap: 18px;
}

.contact-legal-link {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-smoke);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-legal-link:hover {
  color: var(--color-brand, #FFE600);
}

.contact-copyright {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--color-smoke);
  margin: 0;
}

/* Custom Brutalist Extended Contact Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-section-title {
  font-family: var(--font-zen, 'Zen Kaku Gothic New', sans-serif) !important;
  font-size: 12px;
  font-weight: 800 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-paper-white);
  margin: 0;
}

.form-group {
  display: flex;
  flex-direction: column;
  position: relative;
}

.contact-input-underline {
  width: 100%;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 0 !important;
  color: var(--color-paper-white) !important;
  padding: 9px 0 !important;
  font-size: 13.5px !important;
  font-family: var(--font-klee, 'Klee One', cursive, sans-serif) !important;
  font-weight: 500 !important;
  outline: none !important;
  transition: border-color 0.25s ease !important;
}

.contact-input-underline::placeholder {
  color: var(--color-smoke) !important;
  text-transform: none !important;
  font-family: var(--font-klee, 'Klee One', cursive, sans-serif) !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  letter-spacing: 0.2px;
  opacity: 0.85;
}

.contact-input-underline:focus {
  border-bottom-color: var(--color-brand) !important;
}

textarea.contact-input-underline {
  min-height: 56px;
  resize: vertical;
}

/* OPTIONS GRID (Checkboxes & Radios - Flush 2-Column Grid Layout) */
.options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
  align-items: start;
}

@media (max-width: 640px) {
  .options-grid {
    grid-template-columns: 1fr;
  }
}

.custom-option-label {
  display: inline-flex;
  align-items: flex-start; /* Align top flush with line 1 of text */
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.35;
  font-family: var(--font-klee, 'Klee One', cursive, sans-serif) !important;
  font-weight: 600 !important;
  -webkit-text-stroke: 0.2px #ffffff;
  color: var(--color-paper-white);
  user-select: none;
  transition: color 0.2s ease;
  word-break: break-word;
}

.custom-option-label:hover {
  color: var(--color-brand);
}

.custom-option-label:hover .option-box {
  border-color: var(--color-brand);
}

.custom-option-label input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.option-box {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--color-paper-white);
  border-radius: 2px; /* ALL BOXES ARE CRISP SQUARES */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px; /* Perfectly centers box against line 1 of text */
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.option-box.option-radio {
  border-radius: 2px; /* Uniform square boxes for all options */
}

.custom-option-label input:checked + .option-box {
  border-color: var(--color-brand);
  background-color: var(--color-brand);
}

.custom-option-label input:checked + .option-box::after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  background-color: var(--color-obsidian);
  border-radius: 1px;
}

.custom-option-label input:checked ~ .option-text {
  color: var(--color-brand);
  font-weight: 500;
}

/* SOLID FULL-WIDTH SUBMIT BUTTON */
.form-submit-solid-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background-color: var(--color-paper-white, #ffffff);
  color: #000000;
  font-family: var(--font-zen, 'Zen Kaku Gothic New', sans-serif) !important;
  font-size: 13px;
  font-weight: 700 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 13px 24px;
  border: 1.5px solid var(--color-paper-white, #ffffff);
  border-radius: 0;
  box-sizing: border-box;
  text-align: center;
  width: 100%;
  margin-top: 10px;
  cursor: pointer;
  outline: none;
  overflow: visible;
  transition: background-color 0.25s ease-out,
              border-color 0.25s ease-out,
              color 0.25s ease-out,
              transform 0.2s ease-out;
}

/* Floating delicate outer thin yellow frame sliding out on hover */
.form-submit-solid-btn::after {
  content: "";
  position: absolute;
  inset: 0px;
  border: 1px solid var(--color-brand, #ffd900);
  pointer-events: none;
  opacity: 0;
  border-radius: 0;
  box-sizing: border-box;
  transition: inset 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-submit-solid-btn .btn-text {
  display: inline-block;
  color: #000000 !important;
  font-weight: 700 !important;
  -webkit-text-stroke: 0px transparent;
  transform-origin: center center;
  transition: -webkit-text-stroke 0.12s ease-out,
              font-weight 0.12s ease-out;
}

.form-submit-solid-btn .btn-arrow {
  display: inline-block;
  line-height: 1;
  font-size: 15px;
  color: #000000 !important;
  transform: translateX(0) scale(1);
  transform-origin: left center;
  transition: transform 0.22s ease-out;
}

.form-submit-solid-btn:hover {
  background-color: var(--color-brand, #ffd900) !important;
  border-color: var(--color-brand, #ffd900) !important;
  color: #000000 !important;
  transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-submit-solid-btn:hover::after {
  inset: -6px;
  opacity: 1;
}

.form-submit-solid-btn:hover .btn-text {
  color: #000000 !important;
  font-weight: 900 !important;
  -webkit-text-stroke: 0.5px #000000;
  transition: -webkit-text-stroke 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              font-weight 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-submit-solid-btn:hover .btn-arrow {
  color: #000000 !important;
  transform: translateX(16px) scale(2.0);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-submit-solid-btn:active {
  transform: scale(0.96) !important;
  transition: transform 0.08s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.form-submit-solid-btn:active::after {
  inset: -6px !important;
  transform: scale(1.04167) !important;
  transition: transform 0.08s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Instant Hardware Submission State */
.form-submit-solid-btn.is-submitting {
  pointer-events: none !important;
  background-color: var(--color-brand, #ffd900) !important;
  border-color: var(--color-brand, #ffd900) !important;
  color: #000000 !important;
  cursor: wait !important;
}

.form-submit-solid-btn.is-submitting::after {
  inset: -6px !important;
  opacity: 1 !important;
  border-color: var(--color-brand, #ffd900) !important;
}

.form-submit-solid-btn.is-submitting .btn-text {
  color: #000000 !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em;
}

.form-submit-solid-btn.is-submitting .btn-arrow {
  display: inline-block;
  color: #000000 !important;
  transform-origin: center center;
  animation: btnSpinner 0.7s linear infinite !important;
}

@keyframes btnSpinner {
  0% { transform: scale(1.4) rotate(0deg); }
  100% { transform: scale(1.4) rotate(360deg); }
}

/* AJAX Form Status Messaging */
.form-status-msg {
  font-family: var(--font-klee, 'Klee One', cursive, sans-serif) !important;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 5px;
  color: #ffd900;
  text-shadow: none !important;
  box-shadow: none !important;
}

.form-status-msg.success {
  color: #ffd900 !important;
}

.form-status-msg.error {
  color: #ff3344 !important;
}

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-36);
  }
}

/* ==========================================================================
   FOOTER (AT THE BOTTOM OF SECTION 5)
   ========================================================================== */
.footer {
  margin-top: 48px;
  border-top: 1px solid var(--color-smoke);
  padding-top: var(--spacing-36);
  padding-bottom: var(--spacing-36);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-logo {
  display: inline-block;
  height: 20px;
  aspect-ratio: 3370.82 / 2384.24;
  color: var(--color-brand);
}

.footer-logo svg {
  width: 100%;
  height: 100%;
}


.footer-links {
  display: flex;
  gap: var(--spacing-18);
}

.footer-link {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--color-smoke);
}

.footer-link:hover {
  color: var(--color-paper-white);
}

.copyright {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-smoke);
}

@media (max-width: 768px) {
  .footer {
    margin-top: 36px;
    flex-direction: column;
    gap: var(--spacing-22);
    align-items: flex-start;
  }
  .footer-links {
    flex-wrap: wrap;
    gap: var(--spacing-18) var(--spacing-24);
  }
}

/* ==========================================================================
   LIGHTBOX / PORTFOLIO MODAL OVERLAY
   ========================================================================== */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: var(--spacing-24);
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  color: var(--color-paper-white);
  font-size: 36px;
  line-height: 1;
  font-weight: 300;
  z-index: 10001;
  transition: color 0.2s ease;
}

.lightbox-close:hover {
  color: var(--color-brand);
}

.lightbox-content {
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  background-color: var(--color-obsidian);
  position: relative;
}

.lightbox-content iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ==========================================================================
   REDUCED MOTION SUPPORT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .menu-overlay,
  .lightbox,
  .project-thumbnail img,
  .project-thumbnail::after,
  .about-image img {
    transition: none !important;
  }
  .project-thumbnail img:hover {
    transform: none !important;
  }
}

/* ==========================================================================
   LEGAL PAGES ADDITIONAL CUSTOM STYLES
   ========================================================================== */
.legal-page-body {
  background-color: var(--color-obsidian);
  color: var(--color-paper-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.legal-container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 56px var(--spacing-36) 80px var(--spacing-36);
  flex: 1;
}

.legal-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-smoke);
  text-decoration: none;
  margin-bottom: 40px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.legal-back-btn:hover {
  color: var(--color-brand);
  transform: translateX(-4px);
}

.legal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 28px;
  margin-bottom: 40px;
}

.legal-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-brand);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.legal-title {
  font-family: var(--font-zen, 'Zen Kaku Gothic New', sans-serif);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--color-paper-white);
  margin: 0 0 12px 0;
  line-height: 1.1;
}

.legal-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-smoke);
  letter-spacing: 0.05em;
}

.legal-bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 48px;
}

@media (max-width: 768px) {
  .legal-bento-grid {
    grid-template-columns: 1fr;
  }
}

.legal-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  padding: 24px;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.legal-card:hover {
  border-color: rgba(255, 217, 0, 0.35);
  background: rgba(255, 255, 255, 0.035);
}

.legal-card-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.legal-card-tag::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--color-brand);
}

.legal-card-body {
  font-size: 14px;
  line-height: 1.65;
  color: #cccccc;
}

.legal-card-body strong {
  color: var(--color-paper-white);
  font-size: 15px;
}

.legal-card-body a {
  color: var(--color-paper-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.legal-card-body a:hover {
  color: var(--color-brand);
}

.legal-code {
  display: inline-block;
  font-family: var(--font-mono);
  background: rgba(255, 255, 255, 0.06);
  padding: 4px 8px;
  border-radius: 2px;
  color: var(--color-brand);
  font-size: 13px;
  margin-top: 6px;
  letter-spacing: 0.05em;
}

.legal-note {
  display: block;
  font-size: 12px;
  color: var(--color-smoke);
  margin-top: 8px;
  line-height: 1.4;
}

.legal-disclaimer-section {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.legal-block {
  text-align: left;
}

.legal-block h2 {
  font-family: var(--font-zen, 'Zen Kaku Gothic New', sans-serif);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-paper-white);
  margin: 0 0 12px 0;
}

.legal-block p {
  font-size: 14px;
  line-height: 1.7;
  color: #999999;
  margin: 0 0 12px 0;
  max-width: 80ch;
}

.legal-block a {
  color: var(--color-paper-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-block a:hover {
  color: var(--color-brand);
}

.legal-highlight-box {
  background: rgba(255, 217, 0, 0.05);
  border: 1px solid rgba(255, 217, 0, 0.4);
  border-left: 4px solid var(--color-brand);
  padding: 22px 24px;
  margin: 24px 0;
  border-radius: 2px;
}

.legal-highlight-box h3 {
  color: var(--color-brand);
  font-family: var(--font-zen, 'Zen Kaku Gothic New', sans-serif);
  font-size: 14.5px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.legal-highlight-box p {
  color: #e5e5e5 !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  margin-bottom: 10px !important;
}

.legal-highlight-box p:last-child {
  margin-bottom: 0 !important;
}

.legal-page-header {
  border-bottom: 1px solid var(--color-smoke);
  padding: 80px 0 var(--spacing-24) 0;
}

.legal-content-container {
  padding: var(--spacing-56) 0;
}

.legal-content {
  text-align: left;
  max-width: 80ch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.legal-content h2 {
  font-size: 21px;
  text-transform: uppercase;
  margin-top: var(--spacing-24);
  color: var(--color-paper-white);
}

.legal-content p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-smoke);
}

.legal-content ul {
  padding-left: var(--spacing-24);
  color: var(--color-smoke);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-9);
}

.back-to-home {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-9);
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-size: 10px;
  margin-bottom: var(--spacing-24);
}

.back-to-home:hover {
  color: var(--color-brand);
}

/* Custom Scrollbar & Vignette Overlay */
::-webkit-scrollbar {
  display: none;
}
html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.custom-scroll-vignette {
  position: fixed;
  top: 0;
  right: 0;
  width: 20px;
  height: 100vh;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
body.is-scrolling .custom-scroll-vignette {
  opacity: 1;
}

.custom-scrollbar-track {
  position: fixed;
  top: 0;
  right: 2px;
  width: 16px;
  height: 100vh;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
body.anim-complete .custom-scrollbar-track {
  opacity: 1;
  pointer-events: auto;
}
.custom-scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 100px;
  background-color: var(--color-brand);
  border-radius: 4px;
  opacity: 0.4;
  transition: opacity 0.3s ease, width 0.3s ease, background-color 0.3s ease;
  cursor: grab;
}
.custom-scrollbar-thumb:active {
  cursor: grabbing;
}
body.is-scrolling .custom-scrollbar-thumb,
.custom-scrollbar-track:hover .custom-scrollbar-thumb {
  opacity: 1;
  width: 5px;
}

/* --- SERVICES & ABOUT BADGE HOVER LIVE EDITOR TOOL --- */
#badge-live-editor {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 340px;
  max-height: 85vh;
  overflow-y: auto;
  background: rgba(18, 18, 18, 0.96);
  backdrop-filter: blur(14px);
  border: 2px solid #ffd900;
  border-radius: 8px;
  padding: 16px;
  color: #ffffff;
  font-family: monospace, sans-serif;
  font-size: 12px;
  z-index: 999999;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.85);
  user-select: none;
}
#badge-live-editor::-webkit-scrollbar {
  width: 6px;
}
#badge-live-editor::-webkit-scrollbar-thumb {
  background: #ffd900;
  border-radius: 3px;
}
#badge-live-editor h4 {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: #ffd900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#badge-live-editor .editor-row {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#badge-live-editor label {
  display: flex;
  justify-content: space-between;
  color: #cccccc;
  font-size: 11px;
}
#badge-live-editor input[type="range"] {
  width: 100%;
  accent-color: #ffd900;
  cursor: pointer;
}
#badge-live-editor .editor-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 12px;
  background: rgba(255, 217, 0, 0.1);
  padding: 8px;
  border-radius: 4px;
  border: 1px dashed #ffd900;
}
#badge-live-editor .btn-capture-scroll {
  width: 100%;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffd900;
  border: 1px solid rgba(255, 217, 0, 0.4);
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 2px;
  transition: all 0.2s ease;
}
#badge-live-editor .btn-capture-scroll:hover {
  background: #ffd900;
  color: #000000;
}
#badge-live-editor code {
  display: block;
  background: #000000;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #333333;
  color: #4af626;
  font-size: 11px;
  word-break: break-all;
  margin-top: 10px;
  white-space: pre-wrap;
  line-height: 1.4;
}
#badge-live-editor button.btn-copy-settings {
  width: 100%;
  padding: 10px;
  background: #ffd900;
  color: #000000;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.2s ease;
}
#badge-live-editor button.btn-copy-settings:hover {
  background: #ffffff;
}

/* --- RAKE THE SAND LIVE EDITOR TOOLBAR --- */
#rake-sand-live-editor {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 340px;
  max-height: 85vh;
  overflow-y: auto;
  background: rgba(14, 14, 14, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 230, 0, 0.4);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 230, 0, 0.2);
  color: #ffffff;
  font-family: monospace, sans-serif;
  font-size: 12px;
  z-index: 999999;
  user-select: none;
  padding: 16px;
}
#rake-sand-live-editor::-webkit-scrollbar {
  width: 6px;
}
#rake-sand-live-editor::-webkit-scrollbar-thumb {
  background: #ffd900;
  border-radius: 3px;
}
#rake-sand-live-editor h4 {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: #ffd900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#rake-sand-live-editor .editor-row {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#rake-sand-live-editor label {
  display: flex;
  justify-content: space-between;
  color: #cccccc;
  font-size: 11px;
}
#rake-sand-live-editor input[type="range"] {
  width: 100%;
  accent-color: #ffd900;
  cursor: pointer;
}
#rake-sand-live-editor .btn-capture-scroll {
  width: 100%;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffd900;
  border: 1px solid rgba(255, 217, 0, 0.4);
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 2px;
  transition: all 0.2s ease;
}
#rake-sand-live-editor .btn-capture-scroll:hover {
  background: #ffd900;
  color: #000000;
}
#rake-sand-live-editor code {
  display: block;
  background: #000000;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #333333;
  color: #4af626;
  font-size: 11px;
  word-break: break-all;
  margin-top: 10px;
  white-space: pre-wrap;
  line-height: 1.4;
}
#rake-sand-live-editor button.btn-copy-settings {
  width: 100%;
  padding: 10px;
  background: #ffd900;
  color: #000000;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.2s ease;
}
#rake-sand-live-editor button.btn-copy-settings:hover {
  background: #ffffff;
}

/* --- CUT LEAVES LIVE EDITOR TOOLBAR (Centered so right side remains open) --- */
#cut-leaves-live-editor {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 350px;
  max-height: 85vh;
  overflow-y: auto;
  background: rgba(14, 14, 14, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 230, 0, 0.5);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 230, 0, 0.25);
  color: #ffffff;
  font-family: monospace, sans-serif;
  font-size: 12px;
  z-index: 999999;
  user-select: none;
  padding: 16px;
}
#cut-leaves-live-editor::-webkit-scrollbar {
  width: 6px;
}
#cut-leaves-live-editor::-webkit-scrollbar-thumb {
  background: #ffd900;
  border-radius: 3px;
}
#cut-leaves-live-editor h4 {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: #ffd900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: move;
}
#cut-leaves-live-editor .editor-row {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#cut-leaves-live-editor label {
  display: flex;
  justify-content: space-between;
  color: #cccccc;
  font-size: 11px;
}
#cut-leaves-live-editor input[type="range"] {
  width: 100%;
  accent-color: #ffd900;
  cursor: pointer;
}
#cut-leaves-live-editor .btn-capture-scroll {
  width: 100%;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffd900;
  border: 1px solid rgba(255, 217, 0, 0.4);
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 2px;
  transition: all 0.2s ease;
}
#cut-leaves-live-editor .btn-capture-scroll:hover {
  background: #ffd900;
  color: #000000;
}
#cut-leaves-live-editor code {
  display: block;
  background: #000000;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #333333;
  color: #4af626;
  font-size: 11px;
  word-break: break-all;
  margin-top: 10px;
  white-space: pre-wrap;
  line-height: 1.4;
}
#cut-leaves-live-editor button.btn-copy-settings {
  width: 100%;
  padding: 10px;
  background: #ffd900;
  color: #000000;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.2s ease;
}
#cut-leaves-live-editor button.btn-copy-settings:hover {
  background: #ffffff;
}

/* ==========================================================================
   SERVICES UNIFIED VIDEO LIVE EDITOR (Services Section)
   ========================================================================== */
#services-unified-live-editor,
#meditation-man-live-editor {
  position: fixed;
  top: 80px;
  right: 28px;
  width: 350px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  background: rgba(15, 15, 15, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 217, 0, 0.45);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 0 0 25px rgba(255, 217, 0, 0.2);
  color: #fff;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  font-size: 12px;
  z-index: 999999;
  user-select: none;
  transition: max-height 0.25s ease;
}

#services-unified-live-editor.is-minimized,
#meditation-man-live-editor.is-minimized {
  max-height: 52px;
  overflow: hidden;
}

#services-unified-live-editor::-webkit-scrollbar,
#meditation-man-live-editor::-webkit-scrollbar { width: 4px; }
#services-unified-live-editor::-webkit-scrollbar-thumb,
#meditation-man-live-editor::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }

#services-unified-live-editor h4,
#meditation-man-live-editor h4 {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: 700;
  color: #ffd900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: move;
}

.sle-tabs-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 12px;
}

.sle-tab-btn {
  background: transparent;
  border: none;
  color: #888;
  padding: 6px 2px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.sle-tab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.sle-tab-btn.active {
  background: #ffd900;
  color: #000;
  box-shadow: 0 2px 8px rgba(255, 217, 0, 0.35);
}

.sle-tab-icon {
  font-size: 13px;
  line-height: 1;
}

#services-unified-live-editor .editor-row,
#meditation-man-live-editor .editor-row {
  margin-bottom: 10px;
}

#services-unified-live-editor label,
#meditation-man-live-editor label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  color: #ccc;
  font-size: 11px;
}

#services-unified-live-editor input[type="range"],
#meditation-man-live-editor input[type="range"] {
  width: 100%;
  accent-color: #ffd900;
  cursor: pointer;
}

#services-unified-live-editor .btn-capture-scroll,
#meditation-man-live-editor .btn-capture-scroll {
  width: 100%;
  margin-top: 4px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffd900;
  border: 1px solid rgba(255, 217, 0, 0.4);
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

#services-unified-live-editor .btn-capture-scroll:hover,
#meditation-man-live-editor .btn-capture-scroll:hover {
  background: #ffd900;
  color: #000000;
}

#services-unified-live-editor code,
#meditation-man-live-editor code {
  display: block;
  background: #000000;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #333333;
  color: #4af626;
  font-size: 11px;
  word-break: break-all;
  margin-top: 10px;
  white-space: pre-wrap;
  line-height: 1.4;
}

#services-unified-live-editor button.btn-copy-settings,
#meditation-man-live-editor button.btn-copy-settings {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  background: #ffd900;
  border: none;
  color: #000;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}

#services-unified-live-editor button.btn-copy-settings:hover,
#meditation-man-live-editor button.btn-copy-settings:hover {
  background: #ffffff;
}

/* ==========================================================================
   SECTION 4.5 — FAQ BONSAI TREE STAGE & CURVED TYPOGRAPHY
   ========================================================================== */
.faq-bonsai-stage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 28; /* Above zen-trail-canvas (z-25), below logo stone (z-100) */
  opacity: 0;
  display: none;
}

.faq-bonsai-stage.is-active {
  display: block;
  opacity: 1;
}

#faq-bonsai-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

#faq-curved-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 25;
  pointer-events: none;
}

.branch-curved-text {
  font-family: "Space Grotesk", -apple-system, sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  fill: #121212;
  pointer-events: auto;
  user-select: none;
  transition: fill 0.25s ease, opacity 0.3s ease;
  opacity: 0;
}

.branch-curved-text.visible {
  opacity: 1;
}

.branch-curved-text:hover {
  fill: #000000;
  filter: drop-shadow(0 2px 8px rgba(255, 230, 0, 0.7));
}

.branch-curved-text.active {
  fill: #121212;
  font-weight: 800;
}

#faq-cards-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 120; /* Above logo stone (z-100) */
  pointer-events: none;
}

.branch-answer-card {
  position: absolute;
  width: 410px;
  max-width: 88vw;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(18, 18, 18, 0.14);
  border-radius: 8px;
  padding: 22px 26px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: none;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  pointer-events: auto;
}

.branch-answer-card.open {
  display: block;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.card-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(18, 18, 18, 0.08);
}

.card-topic-tag {
  font-family: "Space Grotesk", -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #121212;
  display: flex;
  align-items: center;
  gap: 6px;
}

.card-num-badge {
  background: #ffe600;
  color: #121212;
  padding: 1px 6px;
  border-radius: 3px;
}

.card-close-btn {
  background: transparent;
  border: none;
  font-size: 16px;
  color: #666666;
  line-height: 1;
  padding: 2px 4px;
}

.card-close-btn:hover {
  color: #121212;
}

.card-full-question {
  font-family: "Space Grotesk", -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: #121212;
  margin-bottom: 10px;
}

.card-answer-text {
  font-family: "Zen Kaku Gothic New", -apple-system, sans-serif;
  font-size: 13.5px;
  line-height: 1.7;
  color: #2b2b2b;
  margin-bottom: 14px;
}

.card-footer-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-family: "Space Grotesk", -apple-system, sans-serif;
  color: #666666;
  border-top: 1px dashed rgba(18, 18, 18, 0.1);
  padding-top: 8px;
}

.card-pill-tag {
  font-weight: 700;
  color: #121212;
  background: rgba(255, 230, 0, 0.25);
  padding: 2px 8px;
  border-radius: 4px;
}

.faq-stage-dimmed .branch-curved-text:not(.active) {
  opacity: 0.20 !important;
}

@media (max-width: 768px) {
  .branch-answer-card {
    width: calc(100vw - 32px);
    left: 16px !important;
    right: 16px !important;
  }
}

/* ==========================================================================
   SECTION 4.10 — FAQ BONSAI BRANCH QUESTIONS & DOMINO LETTER EMERGENCE
   - Diagonal pointer lines (2px black) from branch tips to question shelves
   - Symmetrical horizontal baselines (2px black) expanding from center
   - Masked domino letter drop (Zen Kaku Gothic New) emerging from underside of lines
   ========================================================================== */
.faq-branch-questions-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 125;
  overflow: visible;
}

.faq-branch-questions-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

#faq-bubble-pointer-line,
.faq-q-pointer-line {
  stroke: #000000 !important;
  stroke-width: 1.5px !important;
  stroke-linecap: round;
  fill: none;
  vector-effect: non-scaling-stroke;
  transition: stroke-dashoffset 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-branch-questions-layer.is-active .faq-q-pointer-line {
  stroke-dashoffset: 0 !important;
}

.faq-q-base-line {
  stroke: #000000 !important;
  stroke-width: 1.5px !important;
  stroke-linecap: round;
  fill: none;
  vector-effect: non-scaling-stroke;
  transform-origin: center;
  transform: scaleX(0);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}

.faq-branch-questions-layer.is-active .faq-q-base-line {
  transform: scaleX(1);
}

.faq-branch-questions-dom {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.faq-q-item {
  position: absolute;
  pointer-events: auto;
  transform: translate(-50%, 0);
  white-space: nowrap;
}

.faq-q-text-mask {
  overflow: hidden;
  padding-top: 1px;
  padding-bottom: 2px;
  margin-top: 0px;
  line-height: 1.05;
}

.faq-q-char {
  display: inline-block;
  white-space: pre;
  font-family: var(--font-zen, 'Zen Kaku Gothic New', sans-serif);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  color: #000000;
  letter-spacing: 0.04em;
  transform: translateY(-135%);
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.faq-q-char.is-revealed {
  transform: translateY(0);
  opacity: 1;
}

/* ==========================================================================
   SECTION 4.10 — JAPANESE OMIKUJI (おみくじ) WITH SHRINE KNOT (おみくじ結び)
   ========================================================================== */
.faq-banderole-item {
  position: absolute;
  pointer-events: auto;
  transform: translate(-50%, 0);
  user-select: none;
  z-index: 130;
}

/* Authentic Japanese Shinto Shrine Paper Knot (Omikuji-Musubi) tied to branch */
.faq-omikuji-knot {
  position: relative;
  width: 28px;
  height: 14px;
  margin: 0 auto;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.2);
  pointer-events: none;
}

.faq-omikuji-knot-svg {
  width: 28px;
  height: 14px;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15));
}

/* Knot Entrance: Pops / ties into place with gentle spring overshoot */
.faq-branch-questions-layer.is-active .faq-omikuji-knot {
  animation: omikuji-knot-appear 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  pointer-events: auto;
}

/* Knot Exit: Unties and shrinks away in reverse */
.faq-branch-questions-layer.is-exiting .faq-omikuji-knot {
  animation: omikuji-knot-disappear 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.08s forwards !important;
  pointer-events: none !important;
}

@keyframes omikuji-knot-appear {
  0% {
    opacity: 0;
    transform: scale(0.2) rotate(-15deg);
  }
  65% {
    opacity: 1;
    transform: scale(1.15) rotate(4deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes omikuji-knot-disappear {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  35% {
    opacity: 1;
    transform: scale(1.15) rotate(4deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.2) rotate(-15deg);
  }
}

/* Guaranteed Inactive Hide: Knots and Strips must NEVER be visible before Bonsai is 100% grown */
.faq-branch-questions-layer:not(.is-active):not(.is-exiting) .faq-omikuji-knot,
.faq-branch-questions-layer:not(.is-active):not(.is-exiting) .faq-omikuji-strip {
  opacity: 0 !important;
  transform: scale(0) !important;
  pointer-events: none !important;
  animation: none !important;
}

/* Pendulum & Wind Container */
.faq-omikuji-sway-body {
  transform-origin: top center;
  margin-top: -2px;
  will-change: transform;
  perspective: 600px;
}

/* The Slender Vertical Omikuji Paper Strip */
.faq-omikuji-strip {
  position: relative;
  transform-origin: top center;
  transform: scaleY(0);
  opacity: 0;
  background: #ffffff;
  border: 1.5px solid #000000;
  border-radius: 2px;
  width: 26px;
  margin: 0 auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease;
}

/* Base and Ink Paper Layers */
.faq-omikuji-paper {
  width: 100%;
  padding: 8px 0 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
}

.faq-omikuji-paper-base {
  position: relative;
  background: #ffffff;
}

/* Magic Ink Overlay Layer (Zaubertinte) */
.faq-omikuji-paper-ink {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  z-index: 2;
  pointer-events: none;
  clip-path: ellipse(160% 0% at 50% 0%);
  transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover: Elegant Scale & Black Paper Depth without yellow glow */
.faq-banderole-item:hover .faq-omikuji-strip,
.faq-omikuji-strip:hover {
  border-color: #000000 !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  transform: scale(1.06) translateY(-2px) !important;
}

/* Hover: Magic Ink Wave spreads downward over the strip */
.faq-banderole-item:hover .faq-omikuji-paper-ink,
.faq-omikuji-strip:hover .faq-omikuji-paper-ink {
  clip-path: ellipse(160% 130% at 50% 0%);
  transition: clip-path 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Entrance Animation: 3D Flutter and Settle */
.faq-branch-questions-layer.is-active .faq-omikuji-strip {
  animation: omikuji-flutter-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Exit Animation: 3D Flutter and Fold-Up in Reverse */
.faq-branch-questions-layer.is-exiting .faq-omikuji-strip {
  animation: omikuji-flutter-out 0.48s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
  pointer-events: none !important;
}

/* Settled state once entrance flutter has settled */
.faq-omikuji-strip.is-settled {
  opacity: 1 !important;
  transform: translateY(0) rotateY(0deg) scaleY(1);
  animation: none !important;
}

@keyframes omikuji-flutter-in {
  0% {
    transform: translateY(-20px) rotateY(80deg) scaleY(0.4);
    opacity: 0;
  }
  45% {
    transform: translateY(5px) rotateY(-18deg) scaleY(1.06);
    opacity: 1;
  }
  75% {
    transform: translateY(-2px) rotateY(6deg) scaleY(0.98);
  }
  100% {
    transform: translateY(0) rotateY(0deg) scaleY(1);
    opacity: 1;
  }
}

@keyframes omikuji-flutter-out {
  0% {
    transform: translateY(0) rotateY(0deg) scaleY(1);
    opacity: 1;
  }
  25% {
    transform: translateY(-2px) rotateY(6deg) scaleY(0.98);
    opacity: 1;
  }
  55% {
    transform: translateY(5px) rotateY(-18deg) scaleY(1.06);
    opacity: 0.85;
  }
  100% {
    transform: translateY(-20px) rotateY(80deg) scaleY(0.4);
    opacity: 0;
  }
}

/* Retract lines during Omikuji exit */
.faq-branch-questions-layer.is-exiting .faq-q-pointer-line {
  stroke-dashoffset: 400 !important;
  transition: stroke-dashoffset 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.08s !important;
}

.faq-branch-questions-layer.is-exiting .faq-q-base-line {
  transform: scaleX(0) !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Language Change 3D Flip (Front -> Edge-on -> Back) around vertical center axis */
.faq-omikuji-strip.is-flipping-out {
  animation: omikuji-flip-out 0.28s cubic-bezier(0.35, 0.2, 0.45, 1) forwards !important;
}

.faq-omikuji-strip.is-flipping-in {
  animation: omikuji-flip-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes omikuji-flip-out {
  0% {
    transform: translateY(0) rotateY(0deg);
  }
  100% {
    transform: translateY(-3px) rotateY(90deg);
  }
}

@keyframes omikuji-flip-in {
  0% {
    transform: translateY(-3px) rotateY(-90deg);
  }
  100% {
    transform: translateY(0) rotateY(0deg);
  }
}

/* Ambient Wind Sway (after settle) */
.faq-branch-questions-layer.is-active .faq-omikuji-sway-body {
  animation: omikuji-wind-sway 4.2s ease-in-out infinite alternate;
}

.faq-branch-questions-layer.is-exiting .faq-omikuji-sway-body {
  animation: none !important;
}

@keyframes omikuji-wind-sway {
  0% {
    transform: rotate(-2.8deg) skewX(-0.5deg);
  }
  50% {
    transform: rotate(0.4deg) skewX(0.1deg);
  }
  100% {
    transform: rotate(2.6deg) skewX(0.5deg);
  }
}

/* Vertical Upright Typography (Letter-Under-Letter) */
.faq-omikuji-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5px;
}

.faq-omikuji-char {
  font-family: var(--font-zen, 'Zen Kaku Gothic New', sans-serif);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0;
  display: block;
}

/* Base State: Black text */
.faq-omikuji-paper-base .faq-omikuji-char {
  color: #000000;
}

/* Base State: Golden separator dot */
.faq-omikuji-paper-base .faq-omikuji-dot {
  width: 3.5px;
  height: 3.5px;
  background: #ffd900;
  border-radius: 50%;
  margin: 3px 0;
  display: block;
}

/* Ink State (Magic Ink): Radiant Yellow text */
.faq-omikuji-paper-ink .faq-omikuji-char {
  color: #ffd900;
}

/* Ink State (Magic Ink): Pure White separator bead for high-contrast legibility */
.faq-omikuji-paper-ink .faq-omikuji-dot {
  width: 3.5px;
  height: 3.5px;
  background: #ffffff;
  border-radius: 50%;
  margin: 3px 0;
  display: block;
}

/* ==========================================================================
   SECTION 4.12 — OMIKUJI WIND GUST TEAR, FLIGHT MORPH & TALISMAN BURNING
   ========================================================================== */

/* 1. Clicked Omikuji: Violent Wind Gust Flutter & Snap Tear (Whils powerfully to the RIGHT) */
.faq-banderole-item.is-wind-tearing {
  pointer-events: none !important;
}

.faq-banderole-item.is-wind-tearing .faq-omikuji-strip {
  transform: none !important;
  transition: none !important;
}

.faq-banderole-item.is-wind-tearing .faq-omikuji-sway-body {
  animation: omikuji-wind-snap-direct 0.35s cubic-bezier(0.2, 0.8, 0.25, 1) forwards !important;
  transform-origin: 50% 0 !important;
}

@keyframes omikuji-wind-snap-direct {
  0% {
    transform: rotate(0deg);
  }
  70% {
    /* Windstoß knickt Omikuji in die gewünschte Richtung ab */
    transform: rotate(-44deg);
  }
  85% {
    /* Kurzer Stopp am Knoten-Widerstand (ohne Gegenbewegung) */
    transform: rotate(-48deg);
  }
  100% {
    /* Abreiß-Scheitelpunkt */
    transform: rotate(-58deg);
  }
}

/* 7. White Separator Dot Between Words in Speech Bubble */
.faq-question-word-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: #ffffff;
  border-radius: 50%;
  margin: 0 5px;
  vertical-align: middle;
  opacity: 0;
  will-change: transform, opacity;
  animation: faq-dot-ink-bleed 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes faq-dot-ink-bleed {
  0% {
    opacity: 0;
    transform: scale(0.25);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 2. Talisman Wildfire Burning (Active burning front on the strip and knot) */
.faq-omikuji-strip.is-burning {
  pointer-events: none !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.4) !important;
}

.faq-omikuji-knot.is-burning {
  pointer-events: none !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Active Glowing Burning Front Line */
.faq-omikuji-burn-front {
  position: absolute;
  left: -4px;
  right: -4px;
  height: 10px;
  z-index: 25;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, #d97706 25%, #f59e0b 55%, #ffd900 80%, #ffffff 100%);
  box-shadow: 0 0 10px #ffd900, 0 0 20px #f59e0b, 0 -3px 12px rgba(255, 80, 0, 0.85);
  border-radius: 2px;
}

/* 3. Canvas Particle Emitter for Talisman Embers & Ash (Full Viewport Screen Coordinates) */
.faq-omikuji-particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 10010 !important; /* Always in front of all strips, branches, and answer cards (z-10005)! */
}

/* 4. Flying Card Overlay & Morphing Architecture */
.faq-omikuji-flight-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9998;
  overflow: visible;
}

.faq-omikuji-flying-card {
  position: absolute;
  background: #000000 !important; /* Matches active/hovered speech bubble exactly! */
  border: 2px solid #000000 !important; /* Exact match with SVG vector rect stroke-width 2px */
  border-radius: 0px !important; /* Sharp miter edges matching stroke-linejoin="miter" */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  will-change: transform, width, height, top, left;
  transform-origin: 50% 0 !important; /* Matches top-knot pivot on tree branch */
  pointer-events: none;
}

/* 5. Google Labs "Dream Beans" Vertical Text Filament Dissolution */
.faq-dream-beans-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
}

/* Outgoing Keyword: Stretches vertically into slender fiber filaments and fades */
.faq-dream-beans-source {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5px;
  will-change: transform, filter, opacity;
  transform-origin: center center;
}

.faq-dream-beans-source .faq-omikuji-char {
  font-family: var(--font-zen, 'Zen Kaku Gothic New', sans-serif);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  color: #ffd900; /* Radiant yellow letters on black flying card */
}

.faq-dream-beans-source .faq-omikuji-dot {
  width: 3.5px;
  height: 3.5px;
  background: #ffffff;
  border-radius: 50%;
  margin: 3px 0;
}

/* 6. Speech Box Question Display (Docked State) */
.faq-speech-box.has-question {
  background: #000000 !important;
  cursor: default;
  overflow: hidden;
}

#faq-bubble-rect.has-question {
  fill: #000000 !important;
  stroke: #000000 !important;
  stroke-width: 2 !important;
}

/* Elegant Speech Box Dissolve (Transition smoothly back to white FAQ! bubble on card close) */
.faq-speech-box.has-question.is-dissolving {
  background: transparent !important;
  transition: background 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

#faq-bubble-rect.has-question.is-dissolving {
  fill: #ffffff !important;
  stroke: #000000 !important;
  stroke-width: 2 !important;
  transition: fill 0.45s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.faq-speech-box.is-dissolving .faq-speech-question {
  opacity: 0 !important;
  transform: scale(0.96) !important;
  filter: blur(5px) !important;
  transition: opacity 0.40s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.40s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.40s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
}

.faq-speech-box.is-dissolving .faq-speech-text {
  display: inline-block !important;
  animation: faq-speech-text-reappear 0.45s 0.12s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes faq-speech-text-reappear {
  0% {
    opacity: 0;
    transform: translateY(11px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(11px) scale(1);
  }
}

.faq-speech-question {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* Horizontally dead-centers the text block inside the bubble! */
  background: transparent;
  color: #ffd900;
  user-select: none;
  overflow: hidden;
  z-index: 2;
  transition: padding 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

body.faq-speech-hovered .faq-speech-question {
  padding: 10px 12px !important;
}

.faq-question-justified-text {
  font-family: var(--font-zen, 'Zen Kaku Gothic New', sans-serif);
  font-weight: 700;
  color: #ffd900;
  text-align: center;      /* Mathematically centered across all lines */
  text-align-last: center; /* Closing line centered */
  hyphens: auto;
  word-break: normal;
  letter-spacing: -0.01em;
  margin: 0 auto;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  font-size: var(--q-font-size, 20px);
  line-height: var(--q-line-height, 1.22);
  transition: font-size 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              line-height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

body.faq-speech-hovered .faq-question-justified-text {
  font-size: var(--q-font-size-hover, 15px) !important;
  line-height: var(--q-line-height-hover, 1.18) !important;
  text-align: center !important;
  text-align-last: center !important;
}

/* Short questions (Q1, Q4: ~30-40 chars) - Bold, space-filling display */
.faq-speech-question.q-len-short .faq-question-justified-text {
  font-size: var(--q-font-size, 28px);
  line-height: var(--q-line-height, 1.22);
}
body.faq-speech-hovered .faq-speech-question.q-len-short .faq-question-justified-text {
  font-size: var(--q-font-size-hover, 21px) !important;
  line-height: var(--q-line-height-hover, 1.20) !important;
}

/* Medium questions (Q3, Q5: ~46-60 chars) */
.faq-speech-question.q-len-medium .faq-question-justified-text {
  font-size: var(--q-font-size, 21.5px);
  line-height: var(--q-line-height, 1.22);
}
body.faq-speech-hovered .faq-speech-question.q-len-medium .faq-question-justified-text {
  font-size: var(--q-font-size-hover, 16.5px) !important;
  line-height: var(--q-line-height-hover, 1.18) !important;
}

/* Long questions (Q2, Q6 Remote Editing: ~78-82 chars) */
.faq-speech-question.q-len-long .faq-question-justified-text {
  font-size: var(--q-font-size, 18px);
  line-height: var(--q-line-height, 1.20);
}
body.faq-speech-hovered .faq-speech-question.q-len-long .faq-question-justified-text {
  font-size: var(--q-font-size-hover, 13.8px) !important;
  line-height: var(--q-line-height-hover, 1.18) !important;
}

/* Organischer Text-Reveal: Reines Erode / Dilate (Abmagern & Auffüttern)
   Ohne Bouncing, ohne Skalieren, ohne Stufen: Buchstaben bleiben exakt auf der Grundlinie verankert.
   Sie starten als extrem abgemagertes Haarlinien-Skelett (Erode via fressendem schwarzem Strich)
   und füttern sich in einer einzigen, geschmeidigen Kurve kontinuierlich zur vollen Strichstärke auf (Dilate). */
.faq-dream-char {
  display: inline-block;
  opacity: 0;
  will-change: opacity, -webkit-text-stroke;
  animation: faq-ink-bleed-reveal 0.52s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes faq-ink-bleed-reveal {
  0% {
    opacity: 0;
    /* ERODE (ABMAGERN): Extrem abgemagertes Faden-Skelett durch fressenden Konturstrich */
    -webkit-text-stroke: 0.14em #000000;
    color: #ffd900;
  }
  10% {
    /* Skelett tritt gestochen scharf aus dem Schwarz hervor */
    opacity: 1;
    -webkit-text-stroke: 0.12em #000000;
    color: #ffd900;
  }
  100% {
    /* DILATE (AUFFÜTTERN): Tinte weitet die Strichstärke kontinuierlich zur vollen 700er Dicke aus */
    opacity: 1;
    -webkit-text-stroke: 0em transparent;
    color: #ffd900;
  }
}

/* 8. Temporary Floating Omikuji Reset Button (HIDDEN - superseded by organic branch close buttons) */
.faq-omikuji-reset-btn {
  display: none !important;
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  background: #000000;
  color: #ffd900;
  border: 1.5px solid #ffd900;
  border-radius: 6px;
  padding: 10px 18px;
  font-family: var(--font-zen, 'Zen Kaku Gothic New', sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.faq-omikuji-reset-btn:hover {
  background: #ffd900;
  color: #000000;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 25px rgba(255, 217, 0, 0.4);
}

.faq-omikuji-reset-btn:active {
  transform: translateY(0) scale(0.98);
}

/* ==========================================================================
   SECTION 4.13 — FAQ BONSAI BRANCH ANSWER LAYER & KLEE ONE TYPOGRAPHY
   Organic Zen sand outline frame, transparent floating card, Klee One typography,
   pure inverted erode/dilate magic ink reveal, and mini-omikuji close button (✕)
   with interactive talisman wildfire burn reset.
/* §4.13.1 FAQ BRANCH ANSWER BACKDROP
   Masks background poster typography ("FREQUENTLY ASKED QUESTIONS") behind the active quader.
   Sits at z-index: 7 (in front of bg-typo at z-5, strictly behind bonsai-canvas at z-10). */
.faq-branch-answer-backdrop {
  position: absolute;
  background: #ffffff;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  will-change: opacity;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-branch-answer-backdrop.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
}

.faq-branch-answer-backdrop.is-closing {
  opacity: 0 !important;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-branch-answer-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 10005 !important; /* Direct child of body: Above header (z-1002) and all stage elements */
}

.faq-branch-answer-card {
  position: absolute;
  box-sizing: border-box;
  background: transparent !important; /* Pure transparent - floating on clean site canvas */
  pointer-events: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  opacity: 0;
  visibility: hidden;
  overflow: visible !important;
  will-change: opacity, transform;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-branch-answer-card.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.faq-branch-answer-card.is-closing {
  pointer-events: none;
}

.faq-branch-answer-card.is-closing .faq-branch-answer-content {
  opacity: 0 !important;
  transform: translateY(6px) !important;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-branch-answer-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.faq-branch-answer-tag {
  font-family: var(--font-zen, 'Zen Kaku Gothic New', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b45309;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.faq-branch-answer-tag::before {
  content: "✦";
  font-size: 9px;
  color: #d97706;
}

.faq-branch-answer-body {
  font-family: var(--font-klee, 'Klee One', cursive, sans-serif);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.52;
  color: #111111;
  letter-spacing: 0.01em;
}

.faq-answer-line {
  margin-bottom: 5px;
  display: block;
}

.faq-answer-line:last-child {
  margin-bottom: 0;
}

/* Tier 1 (Ablauf) - 6 Workflow Steps Compact Hierarchy to guarantee full visibility above sand floor */
.faq-branch-answer-card[data-tier-id="1"] {
  padding: 12px 16px !important;
}

.faq-branch-answer-card[data-tier-id="1"] .faq-branch-answer-body {
  font-size: 13.5px !important;
  line-height: 1.44 !important;
}

.faq-branch-answer-card[data-tier-id="1"] .faq-answer-line {
  margin-bottom: 3.5px !important;
}

.faq-answer-step-prefix {
  font-family: var(--font-zen, 'Zen Kaku Gothic New', sans-serif);
  font-weight: 800;
  color: #b45309;
  margin-right: 4px;
  display: inline-block;
}

.faq-answer-word {
  display: inline-block;
  white-space: nowrap;
}

.faq-answer-char {
  display: inline-block;
  opacity: 0;
  will-change: opacity, -webkit-text-stroke;
  animation: faq-answer-ink-reveal 0.48s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes faq-answer-ink-reveal {
  0% {
    opacity: 0;
    -webkit-text-stroke: 0.14em #ffffff;
    color: #111111;
  }
  12% {
    opacity: 1;
    -webkit-text-stroke: 0.12em #ffffff;
    color: #111111;
  }
  100% {
    opacity: 1;
    -webkit-text-stroke: 0em transparent;
    color: #111111;
  }
}

/* --------------------------------------------------------------------------
   MINI-OMIKUJI CLOSE BUTTON (✕) WITH TALISMAN WILDFIRE BURN
   -------------------------------------------------------------------------- */
.faq-omikuji-close-btn {
  position: absolute;
  top: 5px;
  right: -24px;
  width: 26px;
  height: 44px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  z-index: 100 !important;
  display: block;
  outline: none;
  pointer-events: auto;
}

/* Static Hitbox Envelope: Eliminates hover jitter / zappeln by covering
   both the vertical idle footprint and horizontal rotated footprint without shifting */
.faq-omikuji-close-btn::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -4px;
  width: 34px;
  height: 50px;
  background: transparent;
  pointer-events: auto;
}

.faq-omikuji-close-btn:hover::before {
  width: 56px;
  height: 32px;
}

/* Rotator: Inner visual group handles idle tilt (-10deg) and horizontal alignment (-90deg) */
.faq-omikuji-close-rotator {
  position: absolute;
  top: 0;
  left: 2px;
  width: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: rotate(-10deg);
  transform-origin: 11px 5.5px;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none !important;
}

.faq-omikuji-close-btn:hover .faq-omikuji-close-rotator {
  transform: rotate(-90deg) scale(1.04);
}

.faq-omikuji-close-btn:active .faq-omikuji-close-rotator {
  transform: rotate(-90deg) scale(0.96);
}

.faq-omikuji-close-knot {
  width: 22px;
  height: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: -2px;
  position: relative;
  z-index: 3;
  pointer-events: none !important;
}

/* Guarantee hidden before card is visible */
.faq-branch-answer-card:not(.is-visible) .faq-omikuji-close-knot,
.faq-branch-answer-card:not(.is-visible) .faq-omikuji-close-paper {
  opacity: 0 !important;
  transform: scale(0) !important;
}

/* Knot Entrance Animation: Ties into place with spring overshoot */
.faq-branch-answer-card.is-visible .faq-omikuji-close-knot {
  animation: faq-close-knot-appear 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes faq-close-knot-appear {
  0% {
    opacity: 0;
    transform: scale(0.2) rotate(-15deg);
  }
  65% {
    opacity: 1;
    transform: scale(1.15) rotate(4deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.faq-omikuji-close-knot-svg {
  width: 22px;
  height: 11px;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
  pointer-events: none !important;
}

.faq-omikuji-close-knot-svg rect,
.faq-omikuji-close-knot-svg polygon,
.faq-omikuji-close-knot-svg path,
.faq-omikuji-close-knot-svg ellipse {
  transition: fill 0.25s ease, stroke 0.25s ease;
  pointer-events: none !important;
}

/* Perspective Container for 3D Flutter Animation */
.faq-omikuji-close-body {
  transform-origin: top center;
  perspective: 600px;
  pointer-events: none !important;
}

.faq-omikuji-close-paper {
  width: 18px;
  height: 28px;
  background: #ffffff;
  border: 1.5px solid #000000;
  border-radius: 1.5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  transform-origin: top center;
  pointer-events: none !important;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Paper Strip Entrance: 3D flutter-down and settle just like regular Omikuji */
.faq-branch-answer-card.is-visible .faq-omikuji-close-paper {
  animation: faq-close-paper-flutter-in 0.75s 0.12s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.faq-omikuji-close-paper.is-settled {
  opacity: 1 !important;
  transform: translateY(0) rotateY(0deg) scaleY(1);
  animation: none;
}

@keyframes faq-close-paper-flutter-in {
  0% {
    transform: translateY(-24px) rotateY(80deg) scaleY(0.3);
    opacity: 0;
  }
  45% {
    transform: translateY(4px) rotateY(-18deg) scaleY(1.06);
    opacity: 1;
  }
  75% {
    transform: translateY(-1.5px) rotateY(6deg) scaleY(0.98);
  }
  100% {
    transform: translateY(0) rotateY(0deg) scaleY(1);
    opacity: 1;
  }
}

.faq-omikuji-close-x {
  font-family: var(--font-zen, 'Zen Kaku Gothic New', sans-serif);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  color: #111111;
  transform: translateY(-0.5px);
  pointer-events: none !important;
  transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Authentic Japanese Shrine Hover State:
   Paper turns solid black, ✕ becomes Zen gold.
   Knot remains pure white (#ffffff) with crisp black outline (#000000)!
   NO yellow glowing frame, NO yellow glowing halo/shadow! */
.faq-omikuji-close-btn:hover .faq-omikuji-close-paper {
  background: #000000 !important;
  border-color: #000000 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.faq-omikuji-close-btn:hover .faq-omikuji-close-knot-svg rect,
.faq-omikuji-close-btn:hover .faq-omikuji-close-knot-svg polygon,
.faq-omikuji-close-btn:hover .faq-omikuji-close-knot-svg path,
.faq-omikuji-close-btn:hover .faq-omikuji-close-knot-svg ellipse {
  fill: #ffffff !important;
  stroke: #000000 !important;
}

.faq-omikuji-close-btn:hover .faq-omikuji-close-x {
  color: #ffd900 !important;
  text-shadow: none !important;
}

/* --------------------------------------------------------------------------
   EXIT-OMIKUJI DETERMINISTIC RAF ENGINE (JavaScript Driven for 100% Fluid Flight & Burn)
   Transforms, flight trajectory, and clipping are animated via requestAnimationFrame
   to eliminate CSS per-keyframe easing discontinuities and layout thrashing.
   -------------------------------------------------------------------------- */
.faq-omikuji-close-btn.is-ripping .faq-omikuji-close-rotator,
.faq-omikuji-close-rotator.is-ripping {
  transition: none !important;
  pointer-events: none !important;
}

.faq-omikuji-close-paper.is-ripping,
.faq-omikuji-close-knot.is-ripping {
  animation: none !important;
  transition: none !important;
  pointer-events: none !important;
}

/* Maintain dark paper / white knot throughout tear-off */
.faq-omikuji-close-btn.is-ripping .faq-omikuji-close-paper {
  background: #000000 !important;
  border-color: #000000 !important;
}

.faq-omikuji-close-btn.is-ripping .faq-omikuji-close-x {
  color: #ffd900 !important;
}

.faq-omikuji-close-btn.is-ripping .faq-omikuji-close-knot-svg rect,
.faq-omikuji-close-btn.is-ripping .faq-omikuji-close-knot-svg polygon,
.faq-omikuji-close-btn.is-ripping .faq-omikuji-close-knot-svg path,
.faq-omikuji-close-btn.is-ripping .faq-omikuji-close-knot-svg ellipse {
  fill: #ffffff !important;
  stroke: #000000 !important;
}

/* Ensure Exit-Omikuji stays 100% opaque during tear-off even while card is closing */
.faq-branch-answer-card.is-closing .faq-omikuji-close-btn,
.faq-omikuji-close-btn.is-ripping,
.faq-omikuji-close-btn.is-burning {
  opacity: 1 !important;
}

/* Burning State for Mini-Omikuji: Zero phantom frames, zero rectangular outlines or box-shadows */
.faq-omikuji-close-paper.is-burning,
.faq-omikuji-close-btn.is-burning {
  pointer-events: none !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
}

/* ==========================================================================
   SECTION 4.8 — FAQ SPEECH BUBBLE OVERLAY ("FAQ!")
   ========================================================================== */
.faq-speech-bubble-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 30; /* Above walking canvas (z-29), below active cards / modal (z-100) */
  display: none;
  overflow: visible;
}

.faq-speech-bubble-container.is-active {
  display: block;
}

.faq-speech-bubble-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.faq-speech-box {
  position: absolute;
  background: transparent;
  box-sizing: border-box;
  overflow: hidden; /* Clips the text during unmasking expansion */
  pointer-events: auto; /* Enables mouse hover when active */
  cursor: pointer;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: width, height, top, left;
}

#faq-bubble-rect {
  fill: #ffffff;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1), fill 0.25s ease 0s;
}

.faq-speech-text {
  font-family: var(--font-murmure, 'Le Murmure', sans-serif);
  font-size: 116px;
  line-height: 1;
  color: #000000;
  letter-spacing: 0.20em;
  margin-right: -0.20em; /* Optical horizontal dead-center compensation */
  user-select: none;
  white-space: nowrap;
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
  transform: translateY(11px); /* Optical vertical dead-center compensation for Le Murmure cap-height */
  opacity: 1;
  transition: color 0.25s ease 0s, letter-spacing 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s, margin-right 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s;
  will-change: transform, color, opacity, letter-spacing;
}

/* ==========================================================================
   SPEECH BUBBLE HOVER INTERACTION
   When mouse hovers over FAQ! speech bubble:
   - Width & letter-spacing contract (0.5s)
   - At 0.175s: INSTANT DIGITAL SNAP (white box -> solid black, black text -> 100% yellow)
   - Zero black-on-black, instantaneous contrast flip
   - Simultaneously, vertical words on the left expand gap outward (0.5s)
   - Vertical words turn brand yellow at 40% opacity (matching the black idle opacity)
   ========================================================================== */
body.faq-speech-hovered .faq-speech-box {
  width: 165px !important;
  overflow: visible !important;
}

body.faq-speech-hovered .faq-speech-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 231px;
  height: 100%;
  pointer-events: auto;
}

body.faq-speech-hovered #faq-bubble-rect {
  width: 165px !important;
  fill: #000000 !important;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s, fill 0.40s ease 0.30s;
}

body.faq-speech-hovered .faq-speech-text {
  color: #ffd900 !important;
  opacity: 1 !important;
  letter-spacing: 0.03em !important;
  margin-right: -0.03em !important;
  transition: color 0.15s ease 0.12s, opacity 0.15s ease 0.12s, letter-spacing 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s, margin-right 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}

@media (max-width: 768px) {
  .faq-speech-text {
    font-size: 72px;
    letter-spacing: 0.16em;
    margin-right: -0.16em;
    transform: translateY(7px);
  }
  body.faq-speech-hovered .faq-speech-box,
  body.faq-speech-hovered #faq-bubble-rect {
    width: 110px !important;
  }
  body.faq-speech-hovered .faq-speech-text {
    letter-spacing: 0.02em !important;
    margin-right: -0.02em !important;
  }
}

/* ==========================================================================
   SECTION 4.9 — FAQ VERTICAL BACKGROUND TYPOGRAPHY ("FREQUENTLY ASKED QUESTIONS")
   JAPANESE POSTER STYLE (KLEE ONE, 40% OPACITY, DOMINO ROTATION 90° -> 0°)
   ========================================================================== */
.faq-vertical-bg-typo {
  --faq-typo-height: 775px;
  --faq-typo-gap: 24px;
  --faq-typo-stroke: 5px;
  --faq-typo-ask-stroke: 2px;
  --faq-typo-opacity: 0.40;
  --faq-domino-dur: 1.4s;
  --faq-domino-delay1: 0.18s;
  --faq-domino-delay2: 0.36s;
  --faq-domino-slide: 60px;
  --faq-domino-blur: 20px;
  --faq-typo-colgap: 10px;
  --faq-typo-freq-y: 2px;
  --faq-typo-freq-scale: 1.5;
  --faq-typo-ask-y: -8px;
  --faq-typo-ask-scale: 1.16;
  --faq-typo-quest-y: 0px;
  --faq-typo-quest-scale: 1.5;

  position: absolute;
  top: 50%;
  left: 8vw;
  height: var(--faq-typo-height, 775px);
  transform: translateY(-50%);
  z-index: 5; /* Sits strictly BEHIND #faq-bonsai-canvas at z-index: 10 */
  pointer-events: none;
  perspective: 1200px;
  will-change: transform;
}

.faq-bg-columns-wrapper {
  display: flex;
  gap: var(--faq-typo-colgap, 10px);
  align-items: flex-start;
  height: 100%;
  position: relative;
  perspective: 1200px;
  transform-style: preserve-3d;
  transition: gap 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-bg-col {
  display: flex;
  flex-direction: column;
  box-sizing: content-box;
  height: var(--faq-typo-height, 775px);
  position: relative;
  top: -50px;
  padding-top: 50px;
  padding-bottom: 90px;
  will-change: transform;
  user-select: none;
  perspective: 1200px;
  transform-style: preserve-3d;
  /* Outer element handles the continuous 2D horizontal slide (translateX) */
  transform: translateX(var(--faq-domino-slide, 60px));
}

.faq-bg-col-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--faq-typo-gap, 24px);
  height: var(--faq-typo-height, 775px);
  width: 100%;
  font-family: var(--faq-typo-font, var(--font-klee, 'Klee One', cursive, sans-serif));
  font-weight: 600;
  color: #000000;
  opacity: 0;
  visibility: hidden;
  transform-origin: left center; /* Linke Kante Scharnier (Domino-Drehung) */
  transform: translateZ(-45px) rotateY(55deg);
  filter: blur(var(--faq-domino-blur, 20px));
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: color 0.25s ease 0s, opacity 0.25s ease 0s;
  will-change: transform, opacity, filter, color;
}

/* 10-char Column (FREQUENTLY): 9 gaps */
.faq-bg-col.col-frequently {
  --col-char-count: 10;
  --char-box-height: calc((var(--faq-typo-height, 775px) - (var(--col-char-count) - 1) * var(--faq-typo-gap, 24px)) / var(--col-char-count));
  font-size: calc(var(--char-box-height) * 1.08 * var(--faq-typo-freq-scale, 1.5));
  margin-top: var(--faq-typo-freq-y, 2px);
}
.faq-bg-col.col-frequently .faq-bg-char {
  height: var(--char-box-height);
  -webkit-text-stroke: var(--faq-typo-stroke, 5px) #000000;
  paint-order: stroke fill;
}

/* 5-char Column (ASKED): 4 gaps */
.faq-bg-col.col-asked {
  --col-char-count: 5;
  --char-box-height: calc((var(--faq-typo-height, 775px) - (var(--col-char-count) - 1) * var(--faq-typo-gap, 24px)) / var(--col-char-count));
  font-size: calc(var(--char-box-height) * 1.30 * var(--faq-typo-ask-scale, 1.16));
  margin-top: var(--faq-typo-ask-y, -8px);
}
.faq-bg-col.col-asked .faq-bg-char {
  height: var(--char-box-height);
  -webkit-text-stroke: var(--faq-typo-ask-stroke, 2px) #000000;
  paint-order: stroke fill;
}

/* 9-char Column (QUESTIONS): 8 gaps */
.faq-bg-col.col-questions {
  --col-char-count: 9;
  --char-box-height: calc((var(--faq-typo-height, 775px) - (var(--col-char-count) - 1) * var(--faq-typo-gap, 24px)) / var(--col-char-count));
  font-size: calc(var(--char-box-height) * 1.08 * var(--faq-typo-quest-scale, 1.5));
  margin-top: var(--faq-typo-quest-y, 0px);
}
.faq-bg-col.col-questions .faq-bg-char {
  height: var(--char-box-height);
  -webkit-text-stroke: var(--faq-typo-stroke, 5px) #000000;
  paint-order: stroke fill;
}

.faq-bg-char {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  width: 100%;
  flex-shrink: 0;
  transition: -webkit-text-stroke-color 0.25s ease 0s;
}

/* Speech Bubble Hover: Vertical Typo expands word gap and glows yellow (40% opacity) */
body.faq-speech-hovered .faq-bg-columns-wrapper {
  gap: calc(var(--faq-typo-colgap, 10px) + 32px) !important;
}

body.faq-speech-hovered .faq-bg-base .faq-bg-col-inner,
body.faq-speech-hovered .faq-bg-col-inner {
  color: #ffd900 !important;
  opacity: 0.40;
  transition: color 0.15s ease 0s;
}

body.faq-speech-hovered .faq-bg-base .faq-bg-col .faq-bg-char,
body.faq-speech-hovered .faq-bg-col .faq-bg-char {
  -webkit-text-stroke-color: #ffd900 !important;
  transition: -webkit-text-stroke-color 0.15s ease 0s;
}

/* ==========================================================================
   MARCUS' SYMMETRICAL PURE-OPACITY LUMINOUS WAVE (40% -> 100% -> 40% YELLOW)
   - Zero transforms, zero scale, zero 3D tilts!
   - On Hover: Words turn Yellow (#ffd900) at 40% resting opacity.
   - Symmetrical Pacing (Calibrated v=quad-v3220):
     1. Start Delay (0.45s): Allows the words to fully spread out (+32px) and achieve complete stillness before the wave begins.
     2. Symmetrical Aufdimmen (0% -> 50% / 0.84s): Rises gently at the exact same tempo and curve as the cooling fade (0.40 -> 0.58 -> 0.82 -> 1.00).
     3. Peak Handover Trigger (at 50% / 0.84s): In the EXACT moment Word N reaches 100% and begins to fade down, Word N+1 begins rising!
     4. Symmetrical Abdimmen / Verblassen (50% -> 100% / 0.84s): Decays calmly back to 40% (1.00 -> 0.82 -> 0.58 -> 0.40).
   - Sequential Timeline:
     - Word 1 (FREQUENTLY): Starts at 0.45s. Rises to 100% at 1.29s. Fades back to 40% at 2.13s.
     - Word 2 (ASKED): Starts at 1.29s (exact moment Word 1 starts fading!). Rises to 100% at 2.13s. Fades back to 40% at 2.97s.
     - Word 3 (QUESTIONS): Starts at 2.13s (exact moment Word 2 starts fading!). Rises to 100% at 2.97s. Fades back to 40% at 3.81s.
   ========================================================================== */
.faq-bg-overlay {
  display: none !important;
}

@-webkit-keyframes faq-pure-opacity-chain {
  0% {
    opacity: 0.40;
  }
  18% {
    opacity: 0.58;
  }
  34% {
    opacity: 0.82;
  }
  50% {
    opacity: 1.0;
  }
  66% {
    opacity: 0.82;
  }
  82% {
    opacity: 0.58;
  }
  100% {
    opacity: 0.40;
  }
}

@keyframes faq-pure-opacity-chain {
  0% {
    opacity: 0.40;
  }
  18% {
    opacity: 0.58;
  }
  34% {
    opacity: 0.82;
  }
  50% {
    opacity: 1.0;
  }
  66% {
    opacity: 0.82;
  }
  82% {
    opacity: 0.58;
  }
  100% {
    opacity: 0.40;
  }
}

/* Word 1 (FREQUENTLY): 0.45s -> 2.13s (dur 1.68s, peaks at 1.29s, starts fading at 1.29s) */
body.faq-speech-hovered .faq-bg-base .col-frequently .faq-bg-col-inner,
body.faq-speech-hovered .col-frequently .faq-bg-col-inner {
  -webkit-animation: faq-pure-opacity-chain 1.68s ease 0.45s 1 normal forwards !important;
  animation: faq-pure-opacity-chain 1.68s ease 0.45s 1 normal forwards !important;
}

/* Word 2 (ASKED): 1.29s -> 2.97s (dur 1.68s, starts in the EXACT moment Word 1 begins fading!) */
body.faq-speech-hovered .faq-bg-base .col-asked .faq-bg-col-inner,
body.faq-speech-hovered .col-asked .faq-bg-col-inner {
  -webkit-animation: faq-pure-opacity-chain 1.68s ease 1.29s 1 normal forwards !important;
  animation: faq-pure-opacity-chain 1.68s ease 1.29s 1 normal forwards !important;
}

/* Word 3 (QUESTIONS): 2.13s -> 3.81s (dur 1.68s, starts in the EXACT moment Word 2 begins fading!) */
body.faq-speech-hovered .faq-bg-base .col-questions .faq-bg-col-inner,
body.faq-speech-hovered .col-questions .faq-bg-col-inner {
  -webkit-animation: faq-pure-opacity-chain 1.68s ease 2.13s 1 normal forwards !important;
  animation: faq-pure-opacity-chain 1.68s ease 2.13s 1 normal forwards !important;
}

/* ==========================================================================
   DOMINO KEYFRAMES: DECOUPLED HORIZONTAL SLIDE, 3D ROTATION & OUTPACED BLUR
   Outer column (.faq-bg-col): Uninterrupted single cubic-bezier ease-out slide
   Inner wrapper (.faq-bg-col-inner): 3D rotation completes at ~65%, blur outpaces to 0px at 80%
   ========================================================================== */
@keyframes faq-domino-slide-in {
  0% {
    transform: translateX(var(--faq-domino-slide, 60px));
  }
  100% {
    transform: translateX(0px);
  }
}

@keyframes faq-domino-slide-out {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(var(--faq-domino-slide, 60px));
  }
}

@keyframes faq-domino-rotate-in {
  0% {
    opacity: 0;
    visibility: visible;
    transform: translateZ(-45px) rotateY(55deg);
  }
  18% {
    opacity: var(--faq-typo-opacity, 0.40);
  }
  100% {
    opacity: var(--faq-typo-opacity, 0.40);
    visibility: visible;
    transform: translateZ(0px) rotateY(0deg);
  }
}

@keyframes faq-domino-rotate-out {
  0% {
    opacity: var(--faq-typo-opacity, 0.40);
    visibility: visible;
    transform: translateZ(0px) rotateY(0deg);
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    transform: translateZ(-45px) rotateY(55deg);
  }
}

@keyframes faq-domino-blur-in {
  0% {
    filter: blur(var(--faq-domino-blur, 20px));
    animation-timing-function: cubic-bezier(0.16, 0.9, 0.3, 1);
  }
  80% {
    filter: blur(0px);
  }
  100% {
    filter: blur(0px);
  }
}

@keyframes faq-domino-blur-out {
  0% {
    filter: blur(0px);
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
  }
  20% {
    filter: blur(0px);
  }
  100% {
    filter: blur(var(--faq-domino-blur, 20px));
  }
}

/* Domino Active State: Continuous parallel rotation, left-glide with gentle pace-out & outpaced blur */
.faq-vertical-bg-typo.is-visible .faq-bg-col {
  transform: translateX(0px);
}
.faq-vertical-bg-typo.is-visible .faq-bg-col-inner {
  opacity: var(--faq-typo-opacity, 0.40);
  visibility: visible;
  transform: translateZ(0px) rotateY(0deg);
  filter: blur(0px);
}

.faq-vertical-bg-typo.is-visible:not(.domino-settled) .col-frequently {
  animation: faq-domino-slide-in var(--faq-domino-dur, 1.4s) cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.0s;
}
.faq-vertical-bg-typo.is-visible:not(.domino-settled) .col-frequently .faq-bg-col-inner {
  animation: 
    faq-domino-rotate-in calc(var(--faq-domino-dur, 1.4s) * 0.65) cubic-bezier(0.18, 0.9, 0.3, 1) 0.0s both,
    faq-domino-blur-in var(--faq-domino-dur, 1.4s) 0.0s both;
}

.faq-vertical-bg-typo.is-visible:not(.domino-settled) .col-asked {
  animation: faq-domino-slide-in var(--faq-domino-dur, 1.4s) cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--faq-domino-delay1, 0.18s);
}
.faq-vertical-bg-typo.is-visible:not(.domino-settled) .col-asked .faq-bg-col-inner {
  animation: 
    faq-domino-rotate-in calc(var(--faq-domino-dur, 1.4s) * 0.65) cubic-bezier(0.18, 0.9, 0.3, 1) var(--faq-domino-delay1, 0.18s) both,
    faq-domino-blur-in var(--faq-domino-dur, 1.4s) var(--faq-domino-delay1, 0.18s) both;
}

.faq-vertical-bg-typo.is-visible:not(.domino-settled) .col-questions {
  animation: faq-domino-slide-in var(--faq-domino-dur, 1.4s) cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--faq-domino-delay2, 0.36s);
}
.faq-vertical-bg-typo.is-visible:not(.domino-settled) .col-questions .faq-bg-col-inner {
  animation: 
    faq-domino-rotate-in calc(var(--faq-domino-dur, 1.4s) * 0.65) cubic-bezier(0.18, 0.9, 0.3, 1) var(--faq-domino-delay2, 0.36s) both,
    faq-domino-blur-in var(--faq-domino-dur, 1.4s) var(--faq-domino-delay2, 0.36s) both;
}

/* Domino Settled State: Lock permanently at 0px with no animations to prevent unhover jumps */
.faq-vertical-bg-typo.domino-settled .faq-bg-col {
  animation: none;
  transform: translateX(0px);
}
body:not(.faq-speech-hovered) .faq-vertical-bg-typo.domino-settled .faq-bg-col-inner {
  animation: none;
  opacity: var(--faq-typo-opacity, 0.40);
  visibility: visible;
  transform: translateZ(0px) rotateY(0deg);
  filter: blur(0px);
}

/* Reverse Domino Exit: Questions folds first, then Asked, then Frequently */
.faq-vertical-bg-typo.is-exiting .col-questions {
  animation: faq-domino-slide-out 0.65s cubic-bezier(0.25, 1, 0.5, 1) both;
  animation-delay: 0.0s;
}
.faq-vertical-bg-typo.is-exiting .col-questions .faq-bg-col-inner {
  animation: 
    faq-domino-rotate-out 0.65s cubic-bezier(0.25, 1, 0.5, 1) 0.0s both,
    faq-domino-blur-out 0.65s 0.0s both;
}

.faq-vertical-bg-typo.is-exiting .col-asked {
  animation: faq-domino-slide-out 0.65s cubic-bezier(0.25, 1, 0.5, 1) both;
  animation-delay: var(--faq-domino-delay1, 0.18s);
}
.faq-vertical-bg-typo.is-exiting .col-asked .faq-bg-col-inner {
  animation: 
    faq-domino-rotate-out 0.65s cubic-bezier(0.25, 1, 0.5, 1) var(--faq-domino-delay1, 0.18s) both,
    faq-domino-blur-out 0.65s var(--faq-domino-delay1, 0.18s) both;
}

.faq-vertical-bg-typo.is-exiting .col-frequently {
  animation: faq-domino-slide-out 0.65s cubic-bezier(0.25, 1, 0.5, 1) both;
  animation-delay: var(--faq-domino-delay2, 0.36s);
}
.faq-vertical-bg-typo.is-exiting .col-frequently .faq-bg-col-inner {
  animation: 
    faq-domino-rotate-out 0.65s cubic-bezier(0.25, 1, 0.5, 1) var(--faq-domino-delay2, 0.36s) both,
    faq-domino-blur-out 0.65s var(--faq-domino-delay2, 0.36s) both;
}

@media (max-width: 1200px) {
  .faq-vertical-bg-typo {
    left: 5vw;
    --faq-typo-height: 460px;
    --faq-typo-gap: 6px;
  }
  .faq-bg-columns-wrapper {
    gap: 22px;
  }
}

@media (max-width: 768px) {
  .faq-vertical-bg-typo {
    display: none; /* Hide on small mobile to avoid layout crowding */
  }
}

/* ==========================================================================
   SECTION 4.6 — FAQ WALKING & DREAMING ANIMATION & LIVE EDITOR
   ========================================================================== */
.faq-walking-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 29; /* Above sand trail (z-25), alongside bonsai (z-28), below cards & stone (z-100) */
  display: none;
}

.faq-walking-canvas.is-active {
  display: block;
}

/* §4.7 FAQ BUTTERFLY ANIMATION CANVAS & LIVE EDITOR */
.faq-butterfly-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 30; /* In front of bonsai stage (z-28) so butterfly covers the branch as it flies in */
  display: none;
}

.faq-butterfly-canvas.is-active {
  display: block;
}

#faq-typo-live-editor,
#faq-walking-live-editor,
#faq-butterfly-live-editor,
#faq-questions-live-editor {
  position: fixed;
  top: 100px;
  right: 24px;
  width: 360px;
  max-height: 84vh;
  overflow-y: auto;
  background: rgba(14, 14, 14, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 217, 0, 0.4);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 217, 0, 0.12);
  color: #f0f0f0;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 11px;
  z-index: 999999;
  user-select: none;
  transition: max-height 0.2s ease;
}

#faq-butterfly-live-editor {
  right: 24px;
  border-color: rgba(255, 217, 0, 0.5);
}

#faq-questions-live-editor {
  right: 24px;
  border-color: rgba(255, 217, 0, 0.55);
  display: none;
}

#faq-questions-live-editor.is-open {
  display: block;
}

#faq-typo-live-editor.is-minimized,
#faq-walking-live-editor.is-minimized,
#faq-butterfly-live-editor.is-minimized,
#faq-questions-live-editor.is-minimized {
  max-height: 44px;
  overflow: hidden;
}

#faq-typo-live-editor::-webkit-scrollbar,
#faq-walking-live-editor::-webkit-scrollbar,
#faq-butterfly-live-editor::-webkit-scrollbar,
#faq-questions-live-editor::-webkit-scrollbar {
  width: 4px;
}
#faq-typo-live-editor::-webkit-scrollbar-thumb,
#faq-walking-live-editor::-webkit-scrollbar-thumb,
#faq-butterfly-live-editor::-webkit-scrollbar-thumb,
#faq-questions-live-editor::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 2px;
}

.faq-live-editor-panel .wle-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  cursor: move;
  border-bottom: 1px solid rgba(255, 217, 0, 0.2);
  padding-bottom: 8px;
}

.faq-live-editor-panel .wle-title {
  font-size: 12px;
  font-weight: 700;
  color: #ffd900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.faq-live-editor-panel .wle-btn-icon {
  background: transparent;
  border: 1px solid rgba(255, 217, 0, 0.3);
  color: #ffd900;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  padding: 1px 6px;
  line-height: 1;
}
.faq-live-editor-panel .wle-btn-icon:hover {
  background: rgba(255, 217, 0, 0.2);
}

.faq-live-editor-panel .wle-live-bar {
  display: flex;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 10px;
  font-size: 10.5px;
}

.faq-live-editor-panel .wle-live-bar .wle-val {
  color: #ffd900;
  font-weight: 700;
}

.faq-live-editor-panel .ble-trim-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 217, 0, 0.08);
  border: 1px dashed rgba(255, 217, 0, 0.35);
  border-radius: 6px;
  padding: 5px 8px;
  margin-bottom: 8px;
  color: #ffd900;
  font-size: 10px;
  font-weight: 600;
}

.faq-live-editor-panel .wle-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #999;
  margin: 10px 0 6px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-live-editor-panel .wle-row {
  margin-bottom: 8px;
}

.faq-live-editor-panel .wle-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
  color: #ccc;
}

.faq-live-editor-panel .wle-row-header span.wle-val {
  color: #ffd900;
  font-weight: 600;
}

.faq-live-editor-panel input[type="range"] {
  width: 100%;
  accent-color: #ffd900;
  height: 6px;
  background: #2a2a2a;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  margin: 6px 0;
  -webkit-appearance: none;
  appearance: none;
}

.faq-live-editor-panel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffd900;
  cursor: grab;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.faq-live-editor-panel input[type="range"]::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.25);
  box-shadow: 0 0 8px #ffd900;
}

.faq-live-editor-panel input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffd900;
  border: none;
  cursor: grab;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
}

.faq-live-editor-panel input[type="range"]::-moz-range-thumb:active {
  cursor: grabbing;
  transform: scale(1.25);
  box-shadow: 0 0 8px #ffd900;
}

.faq-live-editor-panel .wle-btn-capture {
  width: 100%;
  background: rgba(255, 217, 0, 0.1);
  border: 1px solid rgba(255, 217, 0, 0.3);
  color: #ffd900;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 2px;
  text-align: left;
  transition: all 0.15s ease;
}
.faq-live-editor-panel .wle-btn-capture:hover {
  background: rgba(255, 217, 0, 0.25);
  color: #fff;
}

.faq-live-editor-panel .wle-kf-box {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 217, 0, 0.2);
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 10px;
}

.faq-live-editor-panel .wle-kf-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
}

.faq-live-editor-panel .wle-kf-table th,
.faq-live-editor-panel .wle-kf-table td {
  padding: 4px 4px;
  font-size: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-align: left;
}

.faq-live-editor-panel .wle-kf-badge {
  background: rgba(255, 217, 0, 0.18);
  color: #ffd900;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 700;
}

.faq-live-editor-panel .wle-btn-mini {
  background: #222;
  border: 1px solid #444;
  color: #eee;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 9.5px;
  margin-right: 2px;
}
.faq-live-editor-panel .wle-btn-mini:hover {
  background: #333;
  color: #ffd900;
}
.faq-live-editor-panel .wle-btn-mini.del:hover {
  background: #500;
  color: #fff;
}

.faq-live-editor-panel .wle-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 12px;
}

.faq-live-editor-panel .wle-btn-action {
  background: #ffd900;
  color: #111;
  font-weight: 700;
  font-size: 10.5px;
  border: none;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.15s ease;
  text-align: center;
}
.faq-live-editor-panel .wle-btn-action:hover {
  opacity: 0.9;
}
.faq-live-editor-panel .wle-btn-secondary {
  background: #252525;
  color: #ccc;
  border: 1px solid #444;
}
.faq-live-editor-panel .wle-btn-secondary:hover {
  background: #333;
  color: #fff;
}

.faq-live-editor-panel .wle-select {
  width: 100%;
  background: #1e1e1e;
  color: #ffd900;
  border: 1px solid rgba(255, 217, 0, 0.3);
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  margin-top: 4px;
}
.faq-live-editor-panel .wle-select:focus {
  border-color: #ffd900;
}

/* ==========================================================================
   §4.11 FAQ QUESTIONS LIVE-EDITOR DRAG HANDLES & UI STYLES
   ========================================================================== */
.faq-questions-handles-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 99998;
  display: none;
}

.faq-questions-handles-layer.is-active {
  display: block;
}

.faq-drag-handle {
  position: absolute;
  pointer-events: auto;
  cursor: grab !important;
  transform: translate(-50%, -50%);
  user-select: none;
  touch-action: none;
  z-index: 99999;
  transition: transform 0.12s ease, box-shadow 0.15s ease, opacity 0.2s ease;
}

.faq-drag-handle:hover {
  transform: translate(-50%, -50%) scale(1.25);
  z-index: 100001;
}

.faq-drag-handle.is-dragging {
  cursor: grabbing !important;
  transform: translate(-50%, -50%) scale(1.35) !important;
  z-index: 100002 !important;
}

.faq-drag-handle.is-dimmed {
  opacity: 0.25;
}

.faq-drag-handle.is-selected {
  animation: faq-handle-pulse 1.4s infinite ease-in-out;
}

@keyframes faq-handle-pulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 217, 0, 0.9)); }
  50% { filter: drop-shadow(0 0 16px rgba(255, 217, 0, 1.0)); }
}

/* Startpunkt (Ast-Knoten) */
.faq-handle-start {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #111111;
  border: 2.5px solid #ffd900;
  box-shadow: 0 0 10px rgba(255, 217, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-handle-start::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffd900;
}

/* Treffpunkt (Schräge + Horizontale) */
.faq-handle-land {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 2.5px solid #000000;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.95), 0 2px 8px rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-handle-land::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffd900;
  border: 1px solid #000000;
}

/* Badges / Tooltips */
.faq-handle-badge {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-5px);
  background: rgba(10, 10, 10, 0.92);
  color: #ffd900;
  border: 1px solid rgba(255, 217, 0, 0.45);
  font-family: 'Space Grotesk', monospace, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

.faq-handle-land .faq-handle-badge {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
}

/* Branch Tab Pills in Editor */
.qle-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin: 8px 0 12px 0;
}

.qle-tab-btn {
  background: #202020;
  border: 1px solid #333;
  color: #aaa;
  border-radius: 4px;
  padding: 6px 2px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}

.qle-tab-btn:hover {
  background: #2a2a2a;
  color: #ffd900;
  border-color: rgba(255, 217, 0, 0.3);
}

.qle-tab-btn.is-active {
  background: #ffd900;
  color: #000000;
  border-color: #ffd900;
}

/* Numeric input pairs */
.qle-coord-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 8px;
}

.qle-input-group {
  display: flex;
  align-items: center;
  background: #181818;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 2px 8px;
}

.qle-input-group label {
  font-weight: 700;
  color: #ffd900;
  font-size: 10px;
  margin-right: 6px;
}

.qle-input-group input[type="number"] {
  width: 100%;
  background: transparent;
  border: none;
  color: #ffffff;
  font-family: monospace;
  font-size: 11px;
  font-weight: 600;
  outline: none;
  padding: 4px 0;
}

.qle-input-group input[type="number"]:focus {
  color: #ffd900;
}

/* Floating Launcher Button */
.faq-live-editor-toggle-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #ffd900;
  color: #000000;
  border: 1.5px solid #000000;
  border-radius: 24px;
  padding: 8px 18px;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  z-index: 99998;
  box-shadow: 0 6px 22px rgba(0,0,0,0.4), 0 0 15px rgba(255, 217, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.faq-live-editor-toggle-btn:hover {
  transform: translateY(-2px);
  background: #ffe600;
  box-shadow: 0 8px 28px rgba(255, 217, 0, 0.5);
}

.faq-live-editor-toggle-btn.is-active {
  background: #000000;
  color: #ffd900;
  border-color: #ffd900;
}

/* ==========================================================================
   SECTION 4.15 — FAQ BOTANICAL SCROLL ARROW & KLEE ONE REVEAL
   ========================================================================== */
.faq-scroll-arrow-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 1005;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.faq-scroll-arrow-anchor.is-visible {
  opacity: 1;
  visibility: visible;
}

.faq-scroll-arrow-trigger {
  position: absolute;
  top: -68px;
  left: -36px;
  width: 66px;
  height: 76px;
  border-radius: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  padding: 0;
  margin: 0;
  outline: none;
  z-index: 2;
}

.faq-scroll-arrow-label {
  position: absolute;
  right: 20px; /* Sits cleanly to the LEFT of the arrow wings (wings span to x = -13px) */
  bottom: 0px; /* Aligns bottom edge flush with arrow tip at y = 0 */
  top: auto;
  transform: translateX(14px); /* Starts shifted right towards the arrow at idle */
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--font-klee, 'Klee One', cursive, sans-serif);
  font-size: 8px; /* Calibrated font size so 7 letters fit the 59px shaft perfectly */
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.45px;
  color: #111111;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  z-index: 1;
}

.faq-scroll-arrow-anchor:hover .faq-scroll-arrow-label,
.faq-scroll-arrow-anchor.is-hovered .faq-scroll-arrow-label,
.faq-scroll-arrow-anchor.is-autoscrolling .faq-scroll-arrow-label {
  opacity: 1;
  transform: translateX(0); /* Pure horizontal slide-in from right to left, zero vertical jump! */
}

.faq-scroll-arrow-anchor.is-autoscrolling .faq-scroll-arrow-trigger {
  pointer-events: none;
}

/* ==========================================================================
   SECTION 4.14 — FAQ-TO-CONTACT CINEMATIC TRANSITION OVERLAY & MATRIX CANVAS
   ========================================================================== */
.faq-contact-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none !important;
  z-index: 95;
  display: none;
  overflow: hidden;
}

.faq-contact-transition-overlay * {
  pointer-events: none !important;
}

.faq-contact-transition-overlay.is-active {
  display: block;
}


.transition-black-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-obsidian, #0a0a0a);
  opacity: 0;
  will-change: opacity;
  pointer-events: none !important;
}

.transition-matrix-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 2;
}

/* ==========================================================================
   LOGO VARIANTS VIDEO & LIVE-EDITOR
   Embeds and synchronizes 'Loga Varianten' during the 4-part drift transition.
   ========================================================================== */
:root {
  --logo-vid-scale: 0.840;
  --logo-vid-x: 14px;
  --logo-vid-y: 6px;
  --logo-vid-width: 500px;
  --logo-vid-height: 500px;
}

.transition-logo-video-wrapper {
  position: fixed;
  left: 50%;
  top: 50%;
  width: var(--logo-vid-width, 500px);
  height: var(--logo-vid-height, 500px);
  max-width: 95vw;
  max-height: 95vh;
  transform: translate(calc(-50% + var(--logo-vid-x, 0px)), calc(-50% + var(--logo-vid-y, 0px))) scale(var(--logo-vid-scale, 1));
  transform-origin: center center;
  z-index: 4;
  pointer-events: none;
  display: none;
  opacity: 0;
  will-change: transform;
}

.transition-logo-video-wrapper.is-in-front {
  z-index: 6;
}

.transition-logo-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* Video Live-Editor Panel */
.logo-video-live-editor-panel {
  display: none;
  position: fixed !important;
  top: 85px;
  right: 25px;
  width: 380px !important;
  background: rgba(13, 13, 13, 0.96) !important;
  border: 1px solid #ffd900 !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 24px rgba(255, 217, 0, 0.25) !important;
  z-index: 1000000 !important;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
  color: #ffffff !important;
  padding: 0 !important;
  overflow: hidden !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  flex-direction: column !important;
  user-select: none;
}

.logo-video-live-editor-panel,
.logo-video-live-editor-panel * {
  cursor: default !important;
}

.logo-video-live-editor-panel.open {
  display: flex !important;
}

.lvle-header {
  background: #181818 !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid #2e2e2e !important;
  cursor: grab !important;
}

.lvle-header:active {
  cursor: grabbing !important;
}

.lvle-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffd900 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 0 !important;
}

.lvle-drag-grip {
  font-size: 16px !important;
  color: #ffd900 !important;
  cursor: grab !important;
}

.lvle-close-btn {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 16px !important;
  cursor: pointer !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s, background 0.2s !important;
}

.lvle-close-btn:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.lvle-body {
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  max-height: 82vh !important;
  overflow-y: auto !important;
}

.lvle-toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(255, 217, 0, 0.08) !important;
  border: 1px solid rgba(255, 217, 0, 0.3) !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}

.lvle-toggle-row input[type="checkbox"] {
  accent-color: #ffd900 !important;
  width: 18px !important;
  height: 18px !important;
  cursor: pointer !important;
}

.lvle-control-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.lvle-label-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #cccccc !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.lvle-val-badge {
  background: #222222 !important;
  color: #ffd900 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  border: 1px solid #333333 !important;
}

.lvle-slider-row input[type="range"] {
  width: 100% !important;
  accent-color: #ffd900 !important;
  cursor: pointer !important;
}

.lvle-select-row {
  display: flex !important;
  gap: 8px !important;
}

.lvle-select-btn {
  flex: 1 !important;
  background: #1e1e1e !important;
  border: 1px solid #3a3a3a !important;
  color: #aaaaaa !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  font-weight: 600 !important;
  text-align: center !important;
}

.lvle-select-btn.active {
  background: rgba(255, 217, 0, 0.15) !important;
  border-color: #ffd900 !important;
  color: #ffd900 !important;
}

.lvle-preview-playback {
  background: #181818 !important;
  border: 1px solid #333333 !important;
  border-radius: 8px !important;
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Keyframe Scale Section */
.lvle-keyframe-section {
  background: #181818 !important;
  border: 1px solid #333333 !important;
  border-radius: 8px !important;
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.lvle-keyframe-section.active {
  border-color: rgba(255, 217, 0, 0.4) !important;
  background: rgba(255, 217, 0, 0.03) !important;
}

.lvle-pos-kf-card {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 217, 0, 0.2) !important;
  border-radius: 6px !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.lvle-kf-timeline {
  position: relative !important;
  height: 20px !important;
  background: #111111 !important;
  border-radius: 4px !important;
  border: 1px solid #2a2a2a !important;
  margin: 4px 0 !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

.lvle-kf-playhead {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 2px !important;
  background: #ff4444 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.lvle-kf-diamond {
  position: absolute !important;
  top: 50% !important;
  width: 10px !important;
  height: 10px !important;
  background: #ffd900 !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
  border: 1px solid #000000 !important;
  cursor: pointer !important;
  z-index: 3 !important;
  transition: transform 0.1s !important;
}

.lvle-kf-diamond:hover {
  transform: translate(-50%, -50%) rotate(45deg) scale(1.3) !important;
  background: #ffffff !important;
}

.lvle-kf-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  max-height: 140px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

.lvle-kf-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #202020 !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
  border: 1px solid #333333 !important;
  font-size: 11px !important;
  gap: 6px !important;
}

.lvle-kf-item.active {
  border-color: #ffd900 !important;
  background: rgba(255, 217, 0, 0.1) !important;
}

.lvle-kf-item-time {
  font-family: 'JetBrains Mono', monospace !important;
  color: #ffd900 !important;
  font-weight: 700 !important;
  min-width: 42px !important;
}

.lvle-kf-item-scale {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex: 1 !important;
}

.lvle-kf-item-scale input[type="range"] {
  flex: 1 !important;
  accent-color: #ffd900 !important;
  cursor: pointer !important;
}

.lvle-kf-item-scale-val {
  font-family: 'JetBrains Mono', monospace !important;
  min-width: 38px !important;
  text-align: right !important;
  color: #ffffff !important;
}

.lvle-kf-btn-icon {
  background: transparent !important;
  border: 1px solid #444444 !important;
  color: #aaaaaa !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.lvle-kf-btn-icon:hover {
  background: #333333 !important;
  color: #ffffff !important;
  border-color: #777777 !important;
}

.lvle-kf-btn-del:hover {
  background: rgba(255, 60, 60, 0.2) !important;
  border-color: #ff4444 !important;
  color: #ff4444 !important;
}

.lvle-btn-row {
  display: flex !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

.lvle-btn {
  flex: 1 !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border: 1px solid #444444 !important;
  background: #222222 !important;
  color: #ffffff !important;
  transition: all 0.2s !important;
  text-align: center !important;
}

.lvle-btn:hover {
  background: #333333 !important;
  border-color: #777777 !important;
}

.lvle-btn-primary {
  background: #ffd900 !important;
  color: #000000 !important;
  border-color: #ffd900 !important;
}

.lvle-btn-primary:hover {
  background: #ffe64d !important;
  box-shadow: 0 0 12px rgba(255, 217, 0, 0.4) !important;
}

.logo-video-floating-launcher {
  position: fixed !important;
  bottom: 24px;
  right: 170px;
  background: rgba(14, 14, 14, 0.9) !important;
  border: 1px solid rgba(255, 217, 0, 0.6) !important;
  color: #ffd900 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  z-index: 99999 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.2s !important;
}
.logo-video-floating-launcher:hover {
  background: #ffd900 !important;
  color: #000000 !important;
  transform: translateY(-2px);
}

/* ==========================================================================
   §5.1 CONTACT DESK VIDEO (MOVING TO DESK)
   ========================================================================== */
.contact-desk-video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity;
}

.contact-desk-video-mask-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  will-change: clip-path;
}

.contact-desk-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  display: block;
  opacity: 1;
  transform-origin: center center;
  mix-blend-mode: screen !important;
  filter: brightness(2.85) contrast(1.05) saturate(2.3) hue-rotate(-14deg);
  will-change: transform, opacity, filter;
  clip-path: none;
}

/* §5.2 MINI-LOGO SLANTED DOOR PORTAL */
.contact-door-portal {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  display: block;
  box-sizing: border-box;
  will-change: transform, opacity;
}

.contact-door-frame {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.contact-door-leaf {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: transparent;
}

.contact-door-canvas {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ==========================================================================
   §5.3 CONTACT PICTURE FRAME NEON LOGO ("WE FRAME YOUR STORY")
   ========================================================================== */
.contact-neon-frame-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + var(--neon-frame-x, -450px)), calc(-50% + var(--neon-frame-y, 230px))) scale(var(--neon-frame-scale, 0.9));
  z-index: 95;
  pointer-events: auto !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  perspective: 1200px;
}

.contact-neon-frame-wrapper.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
}

.contact-neon-frame-box {
  position: relative;
  width: var(--neon-box-size, 146px);
  height: var(--neon-box-size, 146px);
  box-sizing: border-box;
  transform-style: preserve-3d;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* KANTEN DES BILDERRAHMENS (8px Mini-Logo Raster Parität) */
.neon-edge {
  position: absolute;
  display: flex;
  box-sizing: border-box;
  color: #FFE600;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

/* TOP EDGE: erstreckt sich über die gesamte Breite [0, 100%], Höhe 8px */
.neon-edge-top {
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

/* BOTTOM EDGE: erstreckt sich über die gesamte Breite [0, 100%], Höhe 8px */
.neon-edge-bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

/* LEFT EDGE: schließt exakt bündig unter oberer und über unterer Kante an im selben x-Kanal [0, 8px] */
.neon-edge-left {
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 8px;
  height: calc(100% - 16px);
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  box-sizing: border-box;
}

/* RIGHT EDGE: schließt exakt bündig unter oberer und über unterer Kante an im selben x-Kanal [100% - 8px, 100%] */
.neon-edge-right {
  top: 8px;
  bottom: 8px;
  right: 0;
  width: 8px;
  height: calc(100% - 16px);
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  box-sizing: border-box;
}

.neon-edge-word {
  font-family: var(--font-klee, 'Klee One', cursive, sans-serif);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #FFE600;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.neon-edge-top .neon-edge-word,
.neon-edge-bottom .neon-edge-word {
  height: 8px;
}

.neon-edge-left .neon-edge-word,
.neon-edge-right .neon-edge-word {
  display: block;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  text-orientation: upright;
  -webkit-text-orientation: upright;
  transform: none;
  width: 8px;
  letter-spacing: 0.12em;
  text-align: center;
}

.neon-mini-logo {
  width: 8px;
  height: 8px;
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
}

.neon-mini-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}

.neon-mini-logo svg path {
  fill: #FFE600;
}

/* ZENTRALES SVG LOGO (Dicht umschlossen vom Rahmen) */
.neon-logo-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--neon-logo-size, 120px);
  height: var(--neon-logo-size, 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  filter: none;
  transition: filter 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease;
  will-change: opacity, filter, transform;
  pointer-events: auto !important;
  cursor: pointer;
}

.neon-logo-svg-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

.neon-logo-svg-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
}

.neon-logo-svg-wrap svg path {
  fill: #FFE600;
}

/* EINFLUG ANIMATION (PHASE 1) */
.contact-neon-frame-wrapper.is-assembling .neon-edge-top {
  animation: neonFlyTop 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.contact-neon-frame-wrapper.is-assembling .neon-edge-bottom {
  animation: neonFlyBottom 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.contact-neon-frame-wrapper.is-assembling .neon-edge-left {
  animation: neonFlyLeft 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.contact-neon-frame-wrapper.is-assembling .neon-edge-right {
  animation: neonFlyRight 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes neonFlyTop {
  0% {
    transform: translateY(-80px) translateZ(100px) scale(1.15);
    opacity: 0;
  }
  100% {
    transform: translateY(0) translateZ(0) scale(1);
    opacity: 1;
  }
}

@keyframes neonFlyBottom {
  0% {
    transform: translateY(80px) translateZ(100px) scale(1.15);
    opacity: 0;
  }
  100% {
    transform: translateY(0) translateZ(0) scale(1);
    opacity: 1;
  }
}

@keyframes neonFlyLeft {
  0% {
    transform: translateX(-80px) translateZ(100px) scale(1.15);
    opacity: 0;
  }
  100% {
    transform: translateX(0) translateZ(0) scale(1);
    opacity: 1;
  }
}

@keyframes neonFlyRight {
  0% {
    transform: translateX(80px) translateZ(100px) scale(1.15);
    opacity: 0;
  }
  100% {
    transform: translateX(0) translateZ(0) scale(1);
    opacity: 1;
  }
}

/* LAMPEN-ZÜNDUNG (PHASE 2 & HOVER FLICKER) */
.contact-neon-frame-wrapper .neon-logo-center.is-igniting,
.contact-neon-frame-wrapper .neon-logo-center.is-hover-flickering {
  animation: neonLampIgnition 0.75s ease-out forwards;
}

/* NORMALZUSTAND (PHASE 3 / IDLE): Knackig und ohne Glow-Schleier */
.contact-neon-frame-wrapper .neon-logo-center.is-ignited {
  opacity: 1;
  filter: none;
}

/* HOVER: Kein statischer Glow-Filter */
.contact-neon-frame-wrapper .contact-neon-frame-box:hover .neon-logo-center.is-ignited,
.contact-neon-frame-wrapper .neon-logo-center.is-ignited:hover {
  filter: none;
}

@keyframes neonHoverFlicker {
  0% {
    opacity: 1;
    filter: none;
  }
  8% {
    opacity: 0.15;
    filter: none;
  }
  18% {
    opacity: 0.95;
    filter: drop-shadow(0 0 8px #FFE600);
  }
  28% {
    opacity: 0.1;
    filter: none;
  }
  40% {
    opacity: 1;
    filter: drop-shadow(0 0 14px #FFE600);
  }
  52% {
    opacity: 0.3;
    filter: none;
  }
  65% {
    opacity: 0.95;
    filter: drop-shadow(0 0 8px #FFE600);
  }
  78% {
    opacity: 0.55;
    filter: none;
  }
  88% {
    opacity: 1;
    filter: drop-shadow(0 0 4px #FFE600);
  }
  100% {
    opacity: 1;
    filter: none;
  }
}

@keyframes neonLampIgnition {
  0% {
    opacity: 0;
    filter: none;
  }
  8% {
    opacity: 0.85;
    filter: drop-shadow(0 0 6px #FFE600);
  }
  16% {
    opacity: 0.12;
    filter: none;
  }
  25% {
    opacity: 1;
    filter: drop-shadow(0 0 14px #FFE600);
  }
  38% {
    opacity: 0.35;
    filter: none;
  }
  50% {
    opacity: 0.95;
    filter: drop-shadow(0 0 8px #FFE600);
  }
  64% {
    opacity: 0.6;
    filter: none;
  }
  85% {
    opacity: 1;
    filter: drop-shadow(0 0 4px #FFE600);
  }
  100% {
    opacity: 1;
    filter: none;
  }
}

/* ORGANISCHER REAKTIVER FLICKER-PULSE (subtiles Röhren-Flickern ohne Glow-Schleier) */
.contact-neon-frame-wrapper .neon-logo-center.flicker-pulse {
  animation: neonOrganicPulse 0.24s ease-in-out;
}

@keyframes neonOrganicPulse {
  0% { opacity: 1; }
  22% { opacity: 0.35; }
  45% { opacity: 0.95; }
  68% { opacity: 0.55; }
  85% { opacity: 0.9; }
  100% { opacity: 1; }
}

/* ==========================================================================
   CONTACT NEON LIVE-EDITOR HUD STYLING
   ========================================================================== */
#contact-neon-live-editor {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 320px;
  background: rgba(18, 18, 20, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 230, 0, 0.35);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75), 0 0 16px rgba(255, 230, 0, 0.15);
  border-radius: 10px;
  color: #f4f4f5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  z-index: 100000;
  box-sizing: border-box;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

#contact-neon-launcher,
#desk-video-editor-launcher,
.desk-video-floating-launcher {
  display: none !important;
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(18, 18, 20, 0.92);
  border: 1px solid #ffd900;
  border-radius: 20px;
  color: #ffd900;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 217, 0, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#contact-neon-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7), 0 0 18px rgba(255, 217, 0, 0.5);
}

.cnle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: grab;
  user-select: none;
}

.cnle-header:active {
  cursor: grabbing;
}

.cnle-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.cnle-badge {
  background: #ffd900;
  color: #000;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}

.cnle-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cnle-btn-icon {
  background: transparent;
  border: none;
  color: #a1a1aa;
  cursor: pointer;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 13px;
  transition: background 0.15s, color 0.15s;
}

.cnle-btn-icon:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.cnle-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 80vh;
  overflow-y: auto;
}

.cnle-sliders {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cnle-slider-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cnle-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #a1a1aa;
}

.cnle-slider-header strong {
  color: #ffd900;
  font-family: monospace;
}

.cnle-slider-group input[type="range"] {
  width: 100%;
  accent-color: #ffd900;
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.cnle-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.cnle-btn-action {
  width: 100%;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #d4d4d8;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.cnle-btn-action:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.cnle-btn-primary {
  background: rgba(255, 217, 0, 0.18);
  border-color: rgba(255, 217, 0, 0.5);
  color: #ffd900;
}

.cnle-btn-primary:hover {
  background: rgba(255, 217, 0, 0.3);
  border-color: #ffd900;
  color: #ffd900;
}

/* §8 DESK VIDEO FLOATING LAUNCHER */
.desk-video-floating-launcher {
  position: fixed !important;
  bottom: 24px !important;
  right: 175px !important;
  background: rgba(14, 14, 14, 0.9) !important;
  border: 1px solid rgba(255, 217, 0, 0.6) !important;
  color: #ffd900 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  z-index: 99999 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.desk-video-floating-launcher:hover {
  background: #ffd900 !important;
  color: #000000 !important;
  transform: translateY(-2px) !important;
}

/* §8 DESK VIDEO LIVE-EDITOR PANEL */
.desk-video-live-editor-panel {
  display: none;
  position: fixed !important;
  top: 85px;
  right: 25px;
  width: 380px !important;
  background: rgba(13, 13, 13, 0.96) !important;
  border: 1px solid #ffd900 !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 24px rgba(255, 217, 0, 0.25) !important;
  z-index: 1000000 !important;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
  color: #ffffff !important;
  padding: 0 !important;
  overflow: hidden !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  flex-direction: column !important;
  user-select: none;
}

.desk-video-live-editor-panel,
.desk-video-live-editor-panel * {
  cursor: default !important;
}

.desk-video-live-editor-panel.open {
  display: flex !important;
}

.dvle-header {
  background: #181818 !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid #2e2e2e !important;
  cursor: grab !important;
}
.dvle-header:active {
  cursor: grabbing !important;
}
.dvle-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffd900 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 0 !important;
}
.dvle-drag-grip {
  font-size: 16px !important;
  color: #ffd900 !important;
  cursor: grab !important;
}
.dvle-close-btn {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 16px !important;
  cursor: pointer !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s, background 0.2s !important;
}
.dvle-close-btn:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
.dvle-body {
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  max-height: 82vh !important;
  overflow-y: auto !important;
}
.dvle-toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(255, 217, 0, 0.08) !important;
  border: 1px solid rgba(255, 217, 0, 0.3) !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}
.dvle-toggle-row input[type="checkbox"] {
  accent-color: #ffd900 !important;
  width: 18px !important;
  height: 18px !important;
  cursor: pointer !important;
}
.dvle-control-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.dvle-label-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #cccccc !important;
  text-transform: uppercase !important;
}
.dvle-val-badge {
  font-family: monospace !important;
  background: #252525 !important;
  color: #ffd900 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
}
.dvle-slider-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.dvle-slider {
  flex: 1 !important;
  accent-color: #ffd900 !important;
  height: 5px !important;
  cursor: pointer !important;
}
.dvle-select-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 6px !important;
}
.dvle-select-btn {
  background: #1a1a1a !important;
  border: 1px solid #333333 !important;
  color: #aaaaaa !important;
  padding: 6px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  text-align: center !important;
}
.dvle-select-btn.active {
  background: #ffd900 !important;
  color: #000000 !important;
  border-color: #ffd900 !important;
}
.dvle-btn-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px !important;
  margin-top: 6px !important;
}
.dvle-btn {
  background: #222222 !important;
  border: 1px solid #444444 !important;
  color: #ffffff !important;
  padding: 8px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  text-align: center !important;
}
.dvle-btn:hover {
  background: #ffd900 !important;
  color: #000000 !important;
  border-color: #ffd900 !important;
}
.dvle-btn-gold {
  background: #ffd900 !important;
  color: #000000 !important;
  border-color: #ffd900 !important;
}
.dvle-btn-gold:hover {
  background: #ffe033 !important;
}
.dvle-btn-step {
  transition: all 0.15s ease !important;
}
.dvle-btn-step:hover {
  background: #333333 !important;
  border-color: #ffd900 !important;
  transform: scale(1.08) !important;
}
.dvle-btn-step:active {
  transform: scale(0.92) !important;
}
.dvle-mode-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid #444444 !important;
  color: #cccccc !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 6px 4px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-align: center !important;
}
.dvle-mode-btn:hover {
  background: rgba(255, 217, 0, 0.15) !important;
  border-color: #ffd900 !important;
  color: #ffffff !important;
}
.dvle-mode-btn.active {
  background: #ffd900 !important;
  color: #000000 !important;
  font-weight: 700 !important;
  border-color: #ffd900 !important;
  box-shadow: 0 0 10px rgba(255, 217, 0, 0.35) !important;
}
.dvle-timeline {
  width: 100% !important;
  height: 14px !important;
  background: #222222 !important;
  border: 1px solid #444444 !important;
  border-radius: 4px !important;
  position: relative !important;
  cursor: pointer !important;
  overflow: hidden !important;
}
.dvle-timeline-progress {
  height: 100% !important;
  background: rgba(255, 217, 0, 0.4) !important;
  width: 0%;
  pointer-events: none !important;
  transition: width 0.05s linear;
}
.dvle-timeline-scrubber {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: #ffd900 !important;
  pointer-events: none !important;
  left: 0%;
  box-shadow: 0 0 6px #ffd900 !important;
}

/* ==========================================================================
   §9 HERO SHEAR / LOGO-SCHLIFF LIVE-EDITOR PANEL & LAUNCHER
   ========================================================================== */
.hero-shear-floating-launcher {
  position: fixed !important;
  bottom: 24px;
  right: 485px;
  background: rgba(14, 14, 14, 0.9) !important;
  border: 1px solid rgba(255, 217, 0, 0.6) !important;
  color: #ffd900 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  z-index: 99999 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
}
.hero-shear-floating-launcher:hover {
  background: #ffd900 !important;
  color: #000000 !important;
  transform: translateY(-2px);
}

.hero-shear-live-editor-panel {
  display: none;
  position: fixed !important;
  top: 85px;
  right: 25px;
  width: 390px !important;
  background: rgba(13, 13, 13, 0.96) !important;
  border: 1px solid #ffd900 !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 24px rgba(255, 217, 0, 0.25) !important;
  z-index: 1000000 !important;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
  color: #ffffff !important;
  padding: 0 !important;
  overflow: hidden !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  flex-direction: column !important;
  user-select: none;
}

.hero-shear-live-editor-panel,
.hero-shear-live-editor-panel * {
  cursor: default !important;
}

.hero-shear-live-editor-panel.open {
  display: flex !important;
}

.hsle-header {
  background: #181818 !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid #2e2e2e !important;
  cursor: grab !important;
}
.hsle-header:active {
  cursor: grabbing !important;
}
.hsle-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffd900 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 0 !important;
}
.hsle-drag-grip {
  font-size: 16px !important;
  color: #ffd900 !important;
  cursor: grab !important;
}
.hsle-close-btn {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 16px !important;
  cursor: pointer !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s, background 0.2s !important;
}
.hsle-close-btn:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
.hsle-body {
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  max-height: 82vh !important;
  overflow-y: auto !important;
}
.hsle-concept-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 5px !important;
}
.hsle-concept-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid #333333 !important;
  border-radius: 6px !important;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  color: #cccccc !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.hsle-concept-btn:hover {
  background: rgba(255, 217, 0, 0.12) !important;
  border-color: rgba(255, 217, 0, 0.6) !important;
  color: #ffffff !important;
}
.hsle-concept-btn.active {
  background: rgba(255, 217, 0, 0.22) !important;
  border-color: #ffd900 !important;
  color: #ffd900 !important;
  box-shadow: 0 0 10px rgba(255, 217, 0, 0.3) !important;
}
.hsle-phase-box {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid #333333 !important;
  border-radius: 8px !important;
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.hsle-phase-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 11px !important;
}
.hsle-phase-badge {
  font-family: monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  background: #222222 !important;
  color: #888888 !important;
  transition: all 0.15s !important;
}
.hsle-phase-badge.active {
  background: #ffd900 !important;
  color: #000000 !important;
  box-shadow: 0 0 8px rgba(255, 217, 0, 0.5) !important;
}
.hsle-control-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.hsle-label-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #cccccc !important;
  text-transform: uppercase !important;
}
.hsle-val-badge {
  font-family: monospace !important;
  background: #252525 !important;
  color: #ffd900 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
}
.hsle-slider {
  width: 100% !important;
  accent-color: #ffd900 !important;
  height: 5px !important;
  cursor: pointer !important;
}
.hsle-btn-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px !important;
  margin-top: 4px !important;
}
.hsle-btn {
  background: #222222 !important;
  border: 1px solid #444444 !important;
  color: #ffffff !important;
  padding: 8px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  text-align: center !important;
}
.hsle-btn:hover {
  background: #ffd900 !important;
  color: #000000 !important;
  border-color: #ffd900 !important;
}
.hsle-btn-gold {
  background: #ffd900 !important;
  color: #000000 !important;
  border-color: #ffd900 !important;
}
.hsle-btn-gold:hover {
  background: #ffe033 !important;
}
.hsle-scrub-box {
  background: rgba(255, 217, 0, 0.08) !important;
  border: 1px solid rgba(255, 217, 0, 0.3) !important;
  border-radius: 8px !important;
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
/* Ensure FAQ elements NEVER leak pointer-events or clicks when in contact transition or on contact page */
body.transition-dark-active .faq-bonsai-stage,
body.transition-dark-active #faq-bonsai-stage,
body.transition-dark-active #faq-bonsai-canvas,
body.transition-dark-active #faq-curved-svg,
body.transition-dark-active #faq-cards-layer,
body.transition-dark-active .faq-branch-questions-layer,
body.transition-dark-active #faq-branch-questions-layer,
body.transition-dark-active .faq-omikuji-flight-overlay,
body.transition-dark-active .faq-speech-bubble-container,
body.transition-dark-active .faq-omikuji-particle-canvas,
body.transition-dark-active .faq-omikuji-strip,
body.transition-dark-active .faq-omikuji-knot,
body.transition-dark-active .faq-omikuji-close-btn,
body.transition-dark-active .branch-curved-text,
body.transition-dark-active .faq-branch-answer-card,
body.contact-section-active .faq-bonsai-stage,
body.contact-section-active #faq-bonsai-stage,
body.contact-section-active #faq-bonsai-canvas,
body.contact-section-active #faq-curved-svg,
body.contact-section-active #faq-cards-layer,
body.contact-section-active .faq-branch-questions-layer,
body.contact-section-active #faq-branch-questions-layer,
body.contact-section-active .faq-omikuji-flight-overlay,
body.contact-section-active .faq-speech-bubble-container,
body.contact-section-active .faq-omikuji-particle-canvas,
body.contact-section-active .faq-omikuji-strip,
body.contact-section-active .faq-omikuji-knot,
body.contact-section-active .faq-omikuji-close-btn,
body.contact-section-active .branch-curved-text,
body.contact-section-active .faq-branch-answer-card {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.transition-stone-clone {
  position: fixed;
  top: 0;
  left: 0;
  width: 43px;
  height: 43px;
  z-index: 1000000 !important; /* Above widescreen pillarbox curtains (100005) & all page layers, behind custom cursor (2147483647) */
  pointer-events: none !important;
  display: none;
  transform-origin: center center;
  will-change: transform, opacity;
}

.transition-logo-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 224px;
  height: 224px;
  margin-left: -112px;
  margin-top: -112px;
  transform-origin: center center;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity, filter;
}

.transition-part {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  will-change: transform, opacity;
  pointer-events: none;
}

.transition-part path {
  fill: #ffd900 !important;
}

/* ==========================================================================
   HEADER INVERSION ON TRANSITION BLACK BACKDROP
   Turns all navigation and header controls crisp white over obsidian black canvas
   ========================================================================== */
body.transition-dark-active .header,
body.transition-dark-active .header-container,
body.transition-dark-active .header-left,
body.transition-dark-active .header-center,
body.transition-dark-active .header-right,
body.transition-dark-active .menu-trigger,
body.transition-dark-active .nav-logo,
body.transition-dark-active .logo-slogan,
body.transition-dark-active .social-icon-btn,
body.transition-dark-active .lang-toggle,
body.transition-dark-active .lang-btn,
body.transition-dark-active .lang-separator {
  color: var(--color-paper-white, #ffffff) !important;
}

body.transition-dark-active:not(.menu-open) .menu-trigger .hamburger span {
  background-color: var(--color-paper-white, #ffffff) !important;
}

body.transition-dark-active .nav-logo svg path,
body.transition-dark-active .nav-logo svg use {
  fill: var(--color-paper-white, #ffffff) !important;
}

body.transition-dark-active .social-icon-btn svg {
  stroke: var(--color-paper-white, #ffffff) !important;
}

body.transition-dark-active .lang-btn.active {
  color: var(--color-paper-white, #ffffff) !important;
  opacity: 1 !important;
}

body.transition-dark-active .lang-btn:not(.active) {
  color: var(--color-paper-white, #ffffff) !important;
  opacity: 0.5 !important;
}

body.transition-dark-active:not(.menu-open) .menu-trigger:hover,
body.transition-dark-active:not(.menu-open) .nav-logo:hover,
body.transition-dark-active:not(.menu-open) .social-icon-btn:hover,
body.transition-dark-active:not(.menu-open) .lang-btn:hover,
body.contact-section-active:not(.menu-open) .menu-trigger:hover,
body.contact-section-active:not(.menu-open) .nav-logo:hover,
body.contact-section-active:not(.menu-open) .social-icon-btn:hover,
body.contact-section-active:not(.menu-open) .lang-btn:hover {
  color: var(--color-paper-white, #ffffff) !important;
}

body.transition-dark-active:not(.menu-open) .menu-trigger:hover .hamburger span,
body.contact-section-active:not(.menu-open) .menu-trigger:hover .hamburger span {
  background-color: var(--color-paper-white, #ffffff) !important;
}

body.transition-dark-active .nav-logo:hover svg path,
body.transition-dark-active .nav-logo:hover svg use,
body.contact-section-active .nav-logo:hover svg path,
body.contact-section-active .nav-logo:hover svg use {
  fill: var(--color-paper-white, #ffffff) !important;
}

body.transition-dark-active .social-icon-btn:hover svg,
body.contact-section-active .social-icon-btn:hover svg {
  stroke: var(--color-paper-white, #ffffff) !important;
}

body.transition-dark-active .lang-btn:not(.active):hover,
body.contact-section-active .lang-btn:not(.active):hover {
  opacity: 1 !important;
  color: var(--color-paper-white, #ffffff) !important;
}

/* ==========================================================================
   §10.1 SCROLLED MENU LOGO CLOSING FX & CANVAS
   ========================================================================== */
.menu-logo-fx-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10006; /* Strictly above .menu-scrolled-logo-overlay (10005) */
  pointer-events: none;
  display: none;
}

.menu-logo-fx-canvas.active {
  display: block;
}

/* Pin the overlay during custom closing explosion so it doesn't immediately fly to translateX(100vw) */
.menu-scrolled-logo-overlay.is-exploding,
.menu-scrolled-logo-overlay.is-instant-preview {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, -50%) translateX(0) !important;
  transition: none !important;
}

/* Instantly lock overlay offscreen without CSS transition once explosion finishes */
.menu-scrolled-logo-overlay.is-hidden-instant {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate(-50%, -50%) translateX(100vw) !important;
  transition: none !important;
}

/* Anticipation recoil / z-drop contraction */
.menu-scrolled-brand-group.is-recoiling {
  transform: scale(var(--recoil-scale, 0.9)) translateY(var(--recoil-dy, 6px)) !important;
  transition: transform var(--recoil-dur, 100ms) cubic-bezier(0.2, 0, 0.38, 0.9) !important;
}

/* ==========================================================================
   §10.2 MENU LOGO CLOSING FX LIVE-EDITOR PANEL & LAUNCHER
   ========================================================================== */
.menu-logo-floating-launcher {
  display: none !important;
}

.mle-launcher-hint {
  font-size: 10px;
  opacity: 0.7;
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 5px;
  border-radius: 4px;
}

.menu-logo-live-editor-panel {
  display: none;
  position: fixed !important;
  top: 85px;
  right: 25px;
  width: 410px !important;
  max-height: calc(100vh - 110px);
  background: rgba(13, 13, 13, 0.96) !important;
  border: 1px solid #ffd900 !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 24px rgba(255, 217, 0, 0.25) !important;
  z-index: 1000001 !important;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
  color: #ffffff !important;
  padding: 0 !important;
  overflow: hidden !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  flex-direction: column !important;
  user-select: none;
}

.menu-logo-live-editor-panel.open {
  display: none !important;
}

.mle-header {
  background: #181818 !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid #2e2e2e !important;
  cursor: grab !important;
}
.mle-header:active {
  cursor: grabbing !important;
}

.mle-title {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  letter-spacing: 0.3px !important;
}

.mle-drag-grip {
  color: #777777;
  font-size: 16px;
}

.mle-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mle-badge {
  font-size: 11px;
  background: rgba(255, 217, 0, 0.15);
  color: #ffd900;
  border: 1px solid rgba(255, 217, 0, 0.4);
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
}

.mle-close-btn {
  background: transparent !important;
  border: none !important;
  color: #888888 !important;
  font-size: 16px !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  padding: 0 !important;
  cursor: pointer !important;
}
.mle-close-btn:hover {
  background: #333333 !important;
  color: #ffffff !important;
}

.mle-body {
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  overflow-y: auto !important;
}

.mle-section-title {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: #ffd900 !important;
  text-transform: uppercase !important;
  margin-top: 2px;
  margin-bottom: -4px;
}

.mle-concept-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
  background: #141414 !important;
  padding: 4px !important;
  border-radius: 8px !important;
  border: 1px solid #282828 !important;
}

.mle-tab {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #999999 !important;
  padding: 8px 4px !important;
  border-radius: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.mle-tab:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.05) !important;
}
.mle-tab.active {
  background: #ffd900 !important;
  color: #000000 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(255, 217, 0, 0.35) !important;
}

.mle-tab-icon {
  font-size: 16px;
}

.mle-actions-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 8px;
}

.mle-btn-primary {
  background: #ffd900 !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: 0 4px 12px rgba(255, 217, 0, 0.25) !important;
  transition: transform 0.15s, background 0.15s !important;
}
.mle-btn-primary:hover {
  background: #ffe338 !important;
  transform: translateY(-1px);
}
.mle-btn-primary:active {
  transform: translateY(1px);
}

.mle-btn-secondary {
  background: #222222 !important;
  color: #ffffff !important;
  border: 1px solid #444444 !important;
  border-radius: 8px !important;
  padding: 10px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  transition: all 0.15s !important;
}
.mle-btn-secondary:hover {
  background: #333333 !important;
  border-color: #ffd900 !important;
  color: #ffd900 !important;
}

.mle-loop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #161616;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #262626;
}

.mle-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #cccccc;
  cursor: pointer !important;
}
.mle-checkbox-label input {
  cursor: pointer !important;
  accent-color: #ffd900;
}

.mle-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #444444;
  transition: background 0.3s;
}
.mle-status-dot.active {
  background: #00ff88;
  box-shadow: 0 0 8px #00ff88;
}

.mle-slider-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mle-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #aaaaaa;
}

.mle-val {
  font-family: 'Steps Mono', monospace;
  font-size: 11px;
  color: #ffd900;
  font-weight: 600;
}

.mle-slider-group input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: #333333;
  outline: none;
  cursor: pointer !important;
}
.mle-slider-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffd900;
  cursor: pointer !important;
  box-shadow: 0 0 6px rgba(255, 217, 0, 0.5);
  transition: transform 0.1s;
}
.mle-slider-group input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.mle-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid #222222;
}

.mle-btn-reset, .mle-btn-copy {
  background: transparent !important;
  border: 1px solid #333333 !important;
  color: #888888 !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
.mle-btn-reset:hover, .mle-btn-copy:hover {
  color: #ffffff !important;
  border-color: #666666 !important;
}
.mle-btn-copy:hover {
  border-color: #ffd900 !important;
  color: #ffd900 !important;
}

/* ==========================================================================
   GLOBAL CURSOR SUPPRESSION: Guarantees OS default cursor NEVER overlaps custom cursor
   ========================================================================== */
html, body, *, *::before, *::after,
a, button, input, select, textarea, label, [role="button"],
.movie-card, .movie-card-play-btn, .contact-email, .service-block,
.faq-banderole-item, .faq-banderole-item *,
.faq-omikuji-strip, .faq-omikuji-strip *,
.faq-omikuji-knot, .faq-omikuji-knot *,
.faq-omikuji-close-btn, .faq-omikuji-close-btn * {
  cursor: none !important;
}

/* Exceptions: Live Editors and Launchers retain normal mouse cursor */
.hero-shear-live-editor-panel,
.hero-shear-live-editor-panel *,
.hero-shear-floating-launcher,
.hero-shear-floating-launcher *,
.menu-logo-live-editor-panel,
.menu-logo-live-editor-panel *,
.menu-logo-floating-launcher,
.menu-logo-floating-launcher *,
.waving-live-editor-panel,
.waving-live-editor-panel *,
.waving-video-floating-launcher,
.waving-video-floating-launcher * {
  cursor: default !important;
}
.menu-logo-floating-launcher,
.mle-btn-primary,
.mle-btn-secondary,
.mle-tab,
.mle-close-btn,
.mle-btn-reset,
.mle-btn-copy,
.mle-checkbox-label,
.mle-slider-group input[type="range"],
.waving-video-floating-launcher,
.wle-btn-action,
.wle-close-btn,
.wle-checkbox-label,
.wle-checkbox-label input,
.wle-slider-group input[type="range"] {
  cursor: pointer !important;
}

/* ==========================================================================
   SECTION TRANSITION (LOGO-SAND AVALANCHE CANVAS)
   ========================================================================== */

/* Fullscreen Hardware-Accelerated 2D Canvas for Sand Avalanche Navigation */
.sand-avalanche-canvas {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 10005 !important;
  pointer-events: none !important;
  display: none;
}

.sand-avalanche-canvas.active {
  display: block !important;
}

/* While Interlude is active and page sits hidden under sand: freeze section transforms during scroll jump */
body.interlude-active #main,
body.interlude-active #hero,
body.interlude-active #work,
body.interlude-active #work.section-work-skizze,
body.interlude-active #services,
body.interlude-active #contact,
body.interlude-active .faq-branch-answer-layer,
body.interlude-active .faq-omikuji-particle-canvas,
body.interlude-active #faq-contact-transition-overlay,
body.interlude-active .work-main-frame {
  transition: none !important;
  transform: none !important;
}

/* Fade out backdrop blur overlay cleanly when menu closes */
body.interlude-active .menu-scrolled-blur-overlay {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* ==========================================================================
   GIGANTIC BACKGROUND BURN-IN LOGO & LIVE-EDITOR
   ========================================================================== */
.giant-bg-logo-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1; /* Lies directly over the section's white background, strictly BEHIND content (.work-main-frame at z-20) */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.giant-bg-logo-services {
  height: 100vh; /* Match sticky viewport height in services */
  z-index: 0;
}

/* Rotator: Handles Centering, Base Offset, and Continuous Clockwise Rotation */
.giant-bg-logo-rotator {
  position: absolute;
  left: calc(50% + var(--giant-logo-offset-x, 0px));
  top: calc(50% + var(--giant-logo-offset-y, 0px));
  width: 140vw;
  height: 140vw;
  max-width: none;
  max-height: none;
  transform: translate(-50%, -50%) rotate(var(--giant-logo-rotation, 0deg));
  transform-origin: center center;
  pointer-events: none;
  will-change: transform;
}

.giant-bg-logo-rotator.is-active {
  animation: giant-logo-spin var(--giant-rot-duration, 16s) linear infinite;
}

@keyframes giant-logo-spin {
  from {
    transform: translate(-50%, -50%) rotate(var(--giant-logo-rotation, 0deg));
  }
  to {
    transform: translate(-50%, -50%) rotate(calc(var(--giant-logo-rotation, 0deg) + 360deg));
  }
}

/* Scaler: Handles Smooth Sinusoidal Breathing between Max and Min Scale */
.giant-bg-logo-scaler {
  width: 100%;
  height: 100%;
  transform: scale(calc(var(--giant-scale-max, 100) / 100));
  transform-origin: center center;
  pointer-events: none;
  will-change: transform;
}

.giant-bg-logo-scaler.is-active {
  animation: giant-logo-breathe var(--giant-scale-duration, 6s) ease-in-out infinite;
}

@keyframes giant-logo-breathe {
  0% {
    transform: scale(calc(var(--giant-scale-max, 100) / 100));
  }
  50% {
    transform: scale(calc(var(--giant-scale-min, 140) / 100));
  }
  100% {
    transform: scale(calc(var(--giant-scale-max, 100) / 100));
  }
}

/* Inner: Handles Radial Burn-In / Contraction Wave, Opacity, and Glow Pulsing */
.giant-bg-logo-inner {
  width: 100%;
  height: 100%;
  opacity: 0;
  clip-path: circle(0% at 50% 50%);
  transition: clip-path var(--giant-logo-speed, 220ms) cubic-bezier(0.4, 0, 0.2, 1), opacity var(--giant-logo-speed, 220ms) ease-out;
  pointer-events: none;
  filter: drop-shadow(0 0 35px rgba(255, 217, 0, 0.65)) drop-shadow(0 0 12px rgba(255, 217, 0, 0.45));
  will-change: clip-path, opacity, filter;
}

.giant-bg-logo-inner.is-burned-in {
  opacity: var(--giant-logo-opacity, 1.0);
  clip-path: circle(150% at 50% 50%);
  transition: clip-path var(--giant-logo-speed, 220ms) cubic-bezier(0.1, 0.9, 0.2, 1), opacity 0.05s ease-in;
  animation: giant-logo-glow var(--giant-glow-duration, 4s) ease-in-out infinite;
}

@keyframes giant-logo-glow {
  0% {
    filter: drop-shadow(0 0 35px rgba(255, 217, 0, 0.65)) drop-shadow(0 0 12px rgba(255, 217, 0, 0.45));
  }
  50% {
    filter: drop-shadow(0 0 0px rgba(255, 217, 0, 0)) drop-shadow(0 0 0px rgba(255, 217, 0, 0));
  }
  100% {
    filter: drop-shadow(0 0 35px rgba(255, 217, 0, 0.65)) drop-shadow(0 0 12px rgba(255, 217, 0, 0.45));
  }
}

.giant-bg-logo-inner svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Floating Launcher Button */
.giant-logo-floating-launcher {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffd900;
  border: 1.5px solid rgba(255, 217, 0, 0.6);
  border-radius: 999px;
  padding: 9px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 14px rgba(255, 217, 0, 0.2);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 8px;
}
.giant-logo-floating-launcher:hover {
  transform: translateY(-2px) scale(1.03);
  background: #000000;
  border-color: #ffd900;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 217, 0, 0.4);
}

/* Draggable Live-Editor Panel */
.giant-logo-editor-panel {
  position: fixed;
  top: 100px;
  right: 30px;
  width: 320px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  background: rgba(15, 15, 15, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 217, 0, 0.4);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 217, 0, 0.15);
  z-index: 100000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #ffffff;
  padding: 16px;
  box-sizing: border-box;
  user-select: none;
}
.giant-logo-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: move;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 14px;
}
.giant-logo-editor-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #ffd900;
  display: flex;
  align-items: center;
  gap: 6px;
}
.giant-logo-editor-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.15s ease;
}
.giant-logo-editor-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
}
.giant-logo-preview-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 217, 0, 0.1);
  border: 1px solid rgba(255, 217, 0, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 14px;
}
.giant-logo-preview-label {
  font-size: 12px;
  font-weight: 700;
  color: #ffd900;
}
.giant-logo-slider-group {
  margin-bottom: 12px;
}
.giant-logo-slider-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 4px;
}
.giant-logo-slider-val {
  color: #ffd900;
  font-weight: 700;
}
.giant-logo-slider-group input[type="range"] {
  width: 100%;
  accent-color: #ffd900;
  cursor: pointer;
}
.giant-logo-editor-footer {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.giant-logo-btn {
  flex: 1;
  padding: 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
}
.giant-logo-btn-reset {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
.giant-logo-btn-reset:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.giant-logo-btn-copy {
  background: #ffd900;
  color: #000;
}
.giant-logo-btn-copy:hover {
  background: #ffea60;
  transform: translateY(-1px);
}

/* ==========================================================================
   §10.3 WAVING VIDEO (ABOUT SECTION) LIVE-EDITOR & LAUNCHER
   ========================================================================== */
.waving-video-floating-launcher {
  position: fixed !important;
  bottom: 24px !important;
  left: 175px !important;
  background: rgba(14, 14, 14, 0.9) !important;
  border: 1px solid rgba(255, 217, 0, 0.6) !important;
  border-radius: 8px !important;
  color: #ffd900 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  z-index: 99999 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.waving-video-floating-launcher:hover {
  background: #ffd900 !important;
  color: #000000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(255, 217, 0, 0.4) !important;
}

.waving-live-editor-panel {
  display: none;
  position: fixed !important;
  bottom: 75px !important;
  left: 175px !important;
  width: 360px !important;
  background: rgba(13, 13, 13, 0.96) !important;
  border: 1px solid #ffd900 !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 24px rgba(255, 217, 0, 0.25) !important;
  z-index: 100005 !important;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
  color: #ffffff !important;
  padding: 0 !important;
  overflow: hidden !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  flex-direction: column !important;
  user-select: none;
}

.waving-live-editor-panel.open {
  display: flex !important;
}

.wle-header {
  background: #181818 !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid #2e2e2e !important;
  cursor: grab !important;
}

.wle-header:active {
  cursor: grabbing !important;
}

.wle-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffd900 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 0 !important;
}

.wle-drag-grip {
  font-size: 16px !important;
  color: #ffd900 !important;
  cursor: grab !important;
}

.wle-close-btn {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 16px !important;
  cursor: pointer !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s, background 0.2s !important;
}

.wle-close-btn:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.wle-body {
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  max-height: 480px !important;
  overflow-y: auto !important;
}

.wle-status-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #1c1c1c !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
  border: 1px solid #333333 !important;
}

.wle-badge-tag {
  background: rgba(255, 217, 0, 0.15) !important;
  color: #ffd900 !important;
  border: 1px solid #ffd900 !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

.wle-slider-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.wle-slider-header {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #cccccc !important;
}

.wle-slider-val {
  color: #ffd900 !important;
  font-family: monospace !important;
  font-weight: 700 !important;
}

.wle-slider-group input[type="range"] {
  width: 100% !important;
  accent-color: #ffd900 !important;
  height: 6px !important;
  background: #2a2a2a !important;
  border-radius: 3px !important;
  outline: none !important;
}

.wle-controls-row {
  display: flex !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

.wle-btn-action {
  flex: 1 !important;
  background: #242424 !important;
  border: 1px solid #444444 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  transition: all 0.15s ease !important;
}

.wle-btn-action:hover {
  background: #333333 !important;
  border-color: #ffd900 !important;
  color: #ffd900 !important;
}

.wle-btn-action.primary {
  background: #ffd900 !important;
  color: #000000 !important;
  border-color: #ffd900 !important;
}

.wle-btn-action.primary:hover {
  background: #ffe64d !important;
  box-shadow: 0 0 12px rgba(255, 217, 0, 0.4) !important;
}

.wle-checkbox-label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  color: #aaaaaa !important;
  cursor: pointer !important;
}

.wle-checkbox-label input {
  accent-color: #ffd900 !important;
  cursor: pointer !important;
}

/* Widescreen Curtain Elements (Strictly hidden on 16:9 / 16:10 / 27" and Laptop standard displays) */
.widescreen-pillarbox-curtain,
.widescreen-curtain-canvas,
.widescreen-curtain-logos {
  display: none !important;
}

/* ==========================================================================
   MULTI-FORMAT RESPONSIVE ENGINE (21:9 ULTRAWIDE & LAPTOP / MACBOOK PRO ADAPTATIONS)
   Strictly Non-Destructive: Preserves 27" Desktop Golden Master (2560x1440)
   ========================================================================== */

/* 1. 21:9 ULTRAWIDE MONITORS (3440x1440, 5120x2160, 2560x1080, Aspect Ratio >= 19:10)
   CINEMA PILLARBOX ARCHITECTURE:
   Locks the content stage to a clean, calibrated 16:9 frame (identical to 27-inch Golden Master proportions).
   Applies true cinema black pillarbox curtains to the left and right empty spaces.
   Protects 16:10 Laptop and 16:9 Desktop (27-inch) completely from any side effects. */
@media (min-aspect-ratio: 21/10), (min-width: 2561px) and (min-aspect-ratio: 185/100) {
  :root {
    --stage-16-9-width: min(2560px, calc(100vh * (16 / 9)));
    --stage-pillarbox-width: calc((100vw - var(--stage-16-9-width)) / 2);
  }

  /* Fixed Cinema Pillarbox Curtains (Masks left & right margins outside 16:9 stage in deep cinema black) */
  .widescreen-pillarbox-curtain {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    width: var(--stage-pillarbox-width) !important;
    height: 100vh !important;
    background-color: #000000 !important;
    z-index: 100005 !important; /* In front of bootloader & hero content, behind cursor (2147483647) */
    pointer-events: none !important;
    overflow: hidden !important;
  }

  .widescreen-pillarbox-curtain-left {
    left: 0 !important;
    border: none !important;
  }

  .widescreen-pillarbox-curtain-right {
    right: 0 !important;
    left: auto !important;
    border: none !important;
  }

  /* Widescreen Curtain Matrix Canvas (Mini Yellow Logos matching Contact Section) */
  .widescreen-curtain-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    pointer-events: none !important;
    opacity: 1 !important;
  }

  /* Seamless Contact Transition & Contact Section Handover:
     Pillarbox curtains become transparent and decouple their canvas so #transition-matrix-canvas
     runs full 100vw seamlessly with mathematically unified 16px column pitch across the entire screen */
  body.transition-dark-active .widescreen-pillarbox-curtain,
  body.contact-section-active .widescreen-pillarbox-curtain {
    background-color: transparent !important;
    border: none !important;
  }
  body.transition-dark-active .widescreen-curtain-canvas,
  body.contact-section-active .widescreen-curtain-canvas {
    opacity: 0 !important;
  }

  /* Header & Navigation: Constrained cleanly within the 16:9 stage */
  .header {
    width: var(--stage-16-9-width) !important;
    left: var(--stage-pillarbox-width) !important;
    right: auto !important;
  }

  /* Menu Drawer Overlay (slides out from stage left boundary, not outer screen bezel) */
  .menu-overlay {
    left: var(--stage-pillarbox-width) !important;
  }

  /* Hero Section & Background Layers:
     Run at native full viewport (100vw) so all pixel mathematics, clip-paths, and canvas buffers
     have 1:1 screen pixel parity without offsets or distortion.
     The fixed pillarbox curtains (z-index 100005) cleanly mask the left & right margins in pure black. */
  .hero-section {
    width: 100vw !important;
    left: 0 !important;
    margin-inline: 0 !important;
    overflow: visible !important;
  }

  .hero-pin-container {
    width: 100vw !important; /* Full scroll height container */
  }

  .hero-bg-layer,
  .hero-interactive-stage,
  .hero-video-wrapper,
  #hero-headless-video {
    width: 100vw !important;
    left: 0 !important;
    right: auto !important;
  }

  .hero-overlay {
    width: var(--stage-16-9-width) !important;
    left: var(--stage-pillarbox-width) !important;
    right: auto !important;
  }

  .hero-shear-canvas,
  #intro-mask-borders-svg {
    width: 100vw !important;
    left: 0 !important;
    z-index: 1000 !important; /* Behind pillarbox curtains (z-index 100005) so SVG borders never overlap the black margins */
  }

  /* Section Badges: Anchored to the inside edge of the 16:9 stage */
  .work-section-badge-wrapper,
  .about-section-badge-wrapper,
  .services-section-badge-wrapper {
    left: var(--stage-pillarbox-width) !important;
    z-index: 100006 !important; /* Above pillarbox curtains (100005) for hover interaction */
  }

  /* Contact Section Badge: Shifted 2 mini-logo rows (32px) to the right for exact parity with the menu column above */
  .contact-section-badge-wrapper {
    left: calc(var(--stage-pillarbox-width) + 32px) !important;
    z-index: 100006 !important;
  }

  /* Main Scroll Stage & Section Containers */
  .work-container {
    width: calc(var(--stage-16-9-width) - 200px) !important;
    max-width: calc(var(--stage-16-9-width) - 200px) !important;
    margin-inline: auto !important;
  }

  .services-pin-container .container {
    max-width: var(--content-max-width, 1200px) !important;
    margin-inline: auto !important;
  }

  /* Section 5 (Contact) 21:9 Widescreen Layout Calibration */
  #contact .contact-grid {
    max-width: min(1600px, calc(var(--stage-16-9-width) * 0.72)) !important;
    margin-inline: auto !important;
  }

  #contact.is-transition-pinned .contact-grid,
  #contact.is-transition-settled .contact-grid {
    height: 100% !important;
    max-height: calc(100vh - 176px) !important;
    align-items: stretch !important;
  }

  /* Left Column: Full vertical distribution, bottom footer aligned */
  #contact .contact-left {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    justify-content: flex-start !important;
  }

  #contact .contact-left-footer {
    margin-top: auto !important;
    padding-top: 24px !important;
    padding-bottom: 0 !important;
    width: 100% !important;
  }

  #contact .contact-left-divider {
    width: 100% !important;
    margin-bottom: 14px !important;
  }

  #contact .contact-left-legal {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  /* Right Column: Scaled up typography, inputs and options for comfortable 21:9 reading */
  #contact.is-transition-pinned .contact-right,
  #contact.is-transition-settled .contact-right {
    height: 100% !important;
    max-height: 100% !important;
    padding: 0 12px 16px 12px !important;
  }

  #contact .contact-form {
    gap: 24px !important;
  }

  #contact .form-section {
    gap: 12px !important;
  }

  #contact .form-section-title {
    font-size: 13.5px !important;
    letter-spacing: 0.16em !important;
  }

  #contact .form-group {
    margin-bottom: 4px !important;
  }

  #contact .contact-input-underline {
    font-size: 15.5px !important;
    padding: 11px 0 !important;
  }

  #contact .contact-input-underline::placeholder {
    font-size: 14px !important;
  }

  #contact textarea.contact-input-underline {
    min-height: 68px !important;
  }

  #contact .options-grid {
    gap: 10px 24px !important;
  }

  #contact .custom-option-label {
    font-size: 14px !important;
    line-height: 1.4 !important;
    gap: 11px !important;
  }

  #contact .option-box {
    width: 16px !important;
    height: 16px !important;
    margin-top: 2px !important;
  }

  #contact .custom-option-label input:checked + .option-box::after {
    width: 6px !important;
    height: 6px !important;
  }

  #contact .form-submit-solid-btn {
    font-size: 15px !important;
    padding: 16px 32px !important;
    margin-top: 8px !important;
  }

  /* Widescreen Curtain Monumental Yellow Logo Wings */
  .widescreen-curtain-logos {
    display: none !important; /* Disabled in pure pillarbox mode so black stage remains clean */
  }

  /* 27-Inch Golden Master Geometry & Centering for About Section on 21:9 Widescreen */
  .work-frame-about {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .about-schematic-grid {
    width: 1537px !important;
    height: 810px !important;
    max-width: none !important;
    max-height: none !important;
    position: absolute !important;
    left: calc(50% - 24px) !important; /* Perfect mathematical optical center for the 1489px content block */
    top: 50% !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) scale(var(--about-widescreen-scale, 1.0)) !important;
    transform-origin: center center !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
  }

  /* Enforce 27-inch Desktop Master layout coordinates and dimensions in 21:9 Widescreen */
  #box-headline {
    position: absolute !important;
    left: 48px !important;
    top: calc(50% - 401.5px) !important;
    width: 340px !important;
    height: 228px !important;
    margin: 0 !important;
  }

  #box-subtitle {
    position: absolute !important;
    left: 452px !important;
    top: calc(50% - 402.5px) !important;
    width: 417px !important;
    height: 231px !important;
    margin: 0 !important;
  }

  #box-bio1 {
    position: absolute !important;
    left: 48px !important;
    top: calc(50% - 137.5px) !important;
    width: 825px !important;
    height: 233px !important;
    margin: 0 !important;
  }

  #box-bio2 {
    position: absolute !important;
    left: 47px !important;
    top: calc(50% + 145.5px) !important;
    width: 829px !important;
    height: 210px !important;
    margin: 0 !important;
  }

  #box-lead {
    position: absolute !important;
    left: 928px !important;
    top: calc(50% - 404.5px) !important;
    width: 384px !important;
    height: 232px !important;
    margin: 0 !important;
  }

  #box-image {
    position: absolute !important;
    left: 929px !important;
    top: calc(50% - 139.5px) !important;
    width: 384px !important;
    height: 496px !important;
    margin: 0 !important;
  }

  #box-logo {
    position: absolute !important;
    left: 1397px !important;
    top: calc(50% - 404.5px) !important;
    width: 140px !important;
    height: 140px !important;
    margin: 0 !important;
  }

  #box-kintsugi {
    position: absolute !important;
    left: 1397px !important;
    top: calc(50% - 139.5px) !important;
    width: 140px !important;
    height: 279px !important;
    margin: 0 !important;
  }

  #box-cta {
    position: absolute !important;
    left: 1397px !important;
    top: calc(50% + 285.5px) !important;
    width: 140px !important;
    height: 119px !important;
    margin: 0 !important;
  }

  .about-tags-chain {
    position: absolute !important;
    left: 48px !important;
    top: calc(50% + 374.5px) !important;
    width: 1265px !important;
    margin: 0 !important;
  }

  /* WIDESCREEN CRISP TEXT RASTERIZATION GUARD: Defeats 3D texture downsampling on scaled containers */
  #box-kintsugi .kintsugi-col-kanji,
  #box-kintsugi .kintsugi-col-def {
    transform: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: geometricPrecision !important;
  }

  .service-block {
    padding: 32px 0 !important;
  }

  /* FAQ Vertical Background Typography ("FREQUENTLY ASKED QUESTIONS") on 21:9 Widescreen
     Positioned with exact parity to 27-inch Golden Master within the 16:9 content stage:
     Left margin aligns with 8% inside the 16:9 stage so all 3 words are fully visible,
     and "QUESTIONS" sits partially behind the leftmost branch of the Bonsai tree! */
  .faq-vertical-bg-typo {
    left: calc(var(--stage-pillarbox-width) + 0.08 * var(--stage-16-9-width)) !important;
  }
}

/* 2. LAPTOPS & MACBOOK PRO 16-INCH (Width <= 1850px, Aspect Ratio <= 1.89)
   Guarantees 120px defensive side margins so section badges and navigation icons never collide with frame */
@media (max-width: 1850px) and (max-aspect-ratio: 189/100) {
  .work-container {
    max-width: min(1650px, calc(100vw - 240px)) !important;
  }
  .faq-vertical-bg-typo {
    left: max(20px, 3.5vw) !important;
    --faq-typo-gap: 16px !important;
    --faq-typo-colgap: 8px !important;
  }
}

/* 3. DEFENSIVE LAPTOP & 16:10 VIEWPORT CALIBRATION
   Recalculates horizontal column spacing specifically for 16:10 laptop screen proportions
   so all boxes sit 100% cleanly inside the black frame with balanced margins and zero overflow */
@media (max-aspect-ratio: 168/100) and (min-width: 769px), (max-width: 1850px) and (max-aspect-ratio: 189/100) and (min-width: 769px) {
  #work.section-work-skizze {
    padding: 48px 64px !important; /* Exakt um 1 Reihe Mini-Logos (24px) oben, unten und an den Seiten verkleinert */
  }
  .work-container {
    max-width: min(1602px, calc(100vw - 208px)) !important; /* 48px schmaler (24px je Seite) */
  }
  .work-frame-about {
    transform: none !important;
    display: block !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .about-schematic-grid {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    transform: scale(var(--about-laptop-scale, 1.0)) !important;
    transform-origin: center center !important;
    left: 0 !important;
    top: 0 !important;
    margin: 0 !important;
  }

  /* 16:10 RECALIBRATED COLUMN COORDINATES (Width = 1419px, Height = 790px, 100% 50%-Centered on X & Y) */
  /* Column 1 */
  #box-headline {
    left: calc(50% - 710px) !important;
    top: calc(50% - 395px) !important;
    width: 340px !important;
    height: 228px !important;
    margin: 0 !important;
  }
  #box-bio1 {
    left: calc(50% - 710px) !important;
    top: calc(50% - 135px) !important;
    width: 791px !important;
    height: 233px !important;
    margin: 0 !important;
  }
  #box-bio2 {
    left: calc(50% - 710px) !important;
    top: calc(50% + 135px) !important;
    width: 791px !important;
    height: 210px !important;
    margin: 0 !important;
  }
  #tags-chain {
    left: calc(50% - 710px) !important;
    top: calc(50% + 368px) !important;
    width: 1209px !important;
    margin: 0 !important;
  }

  /* Column 2 */
  #box-subtitle {
    left: calc(50% - 336px) !important;
    top: calc(50% - 395px) !important;
    width: 417px !important;
    height: 231px !important;
    margin: 0 !important;
  }

  /* Column 3 */
  #box-lead {
    left: calc(50% + 115px) !important;
    top: calc(50% - 395px) !important;
    width: 384px !important;
    height: 232px !important;
    margin: 0 !important;
  }
  #box-image {
    left: calc(50% + 115px) !important;
    top: calc(50% - 135px) !important;
    width: 384px !important;
    height: 480px !important;
    margin: 0 !important;
  }

  /* Column 4 (Gap to Column 3 is doubled to 70px) */
  #box-logo {
    left: calc(50% + 569px) !important;
    top: calc(50% - 395px) !important;
    width: 140px !important;
    height: 140px !important;
    margin: 0 !important;
  }
  #box-kintsugi {
    left: calc(50% + 569px) !important;
    top: calc(50% - 135px) !important;
    width: 140px !important;
    height: 279px !important;
    margin: 0 !important;
  }
  #box-cta {
    left: calc(50% + 569px) !important;
    top: calc(50% + 276px) !important;
    width: 140px !important;
    height: 119px !important;
    margin: 0 !important;
  }

  /* TEXT RASTERIZATION GUARD: Crisp text on scaled containers */
  #box-kintsugi .kintsugi-col-kanji,
  #box-kintsugi .kintsugi-col-def,
  .about-box-subtitle .about-tagline,
  .about-box-lead .about-lead,
  .about-box-bio1 .about-bio,
  .about-box-bio2 .about-bio {
    transform: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: geometricPrecision !important;
  }
}

/* ==========================================================================
   MOBILE-ONLY HERO SCREEN & GATEKEEPER (< 769px)
   ========================================================================== */
.mobile-hero-screen {
  display: none;
}

@media (max-width: 768px) {
  /* Hide desktop-only complex canvas animations and horizontal scroll stages */
  .hero-pin-container,
  #work,
  #about,
  #services,
  #faq,
  #contact,
  #sand-avalanche-canvas,
  #faq-contact-transition-overlay,
  .contact-section-badge-wrapper,
  .services-section-badge-wrapper,
  .about-section-badge-wrapper,
  .work-section-badge-wrapper,
  .hero-shear-canvas,
  .menu-logo-fx-canvas,
  .transition-stone-clone,
  .custom-cursor {
    display: none !important;
  }

  /* Reset body and html overflow for clean vertical layout on mobile */
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh !important;
    background-color: #000000 !important;
    cursor: auto !important;
  }

  /* Show header with navigation, logo and language switch */
  .header {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    padding: 16px 0 !important;
    background: rgba(0, 0, 0, 0.92) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(255, 217, 0, 0.2) !important;
  }

  .header-container {
    padding: 0 18px !important;
  }

  /* Display Mobile Hero Screen */
  .mobile-hero-screen {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    padding: 140px 20px 60px;
    background: radial-gradient(circle at 50% 15%, #181818 0%, #070707 60%, #000000 100%);
    color: #ffffff;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
  }

  .mobile-hero-inner {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Status Pill */
  .mobile-hero-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 217, 0, 0.08);
    border: 1px solid rgba(255, 217, 0, 0.3);
    margin-bottom: 28px;
  }

  .mobile-hero-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffd900;
    box-shadow: 0 0 10px #ffd900;
    animation: mobilePulse 2s infinite ease-in-out;
  }

  @keyframes mobilePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
  }

  .mobile-hero-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #ffd900;
  }

  /* Avatar Lockup */
  .mobile-hero-avatar-wrap {
    position: relative;
    width: 104px;
    height: 104px;
    margin-bottom: 18px;
  }

  .mobile-hero-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffd900;
    box-shadow: 0 8px 32px rgba(255, 217, 0, 0.2);
  }

  .mobile-hero-avatar-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ffd900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  }

  /* Name & Role */
  .mobile-hero-name {
    font-family: 'Space Grotesk', var(--font-primary);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ffffff;
    margin-bottom: 4px;
  }

  .mobile-hero-role {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #888888;
    margin-bottom: 28px;
  }

  /* Headline */
  .mobile-hero-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
    line-height: 1.05;
  }

  .mobile-title-row {
    font-family: 'Le Murmure', var(--font-primary);
    font-size: clamp(38px, 11vw, 52px);
    letter-spacing: 1px;
    color: #ffffff;
    text-transform: uppercase;
  }

  .mobile-title-row.title-highlight {
    color: #ffd900;
    text-shadow: 0 0 24px rgba(255, 217, 0, 0.35);
  }

  /* Information Notice Card */
  .mobile-hero-card {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 22px 20px;
    margin-bottom: 28px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  }

  .mobile-card-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #000000;
    background: #ffd900;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
  }

  .mobile-card-text {
    font-family: var(--font-primary);
    font-size: 14px;
    line-height: 1.55;
    color: #dddddd;
    margin-bottom: 8px;
  }

  .mobile-card-subtext {
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: #ffd900;
    margin-bottom: 14px;
  }

  .mobile-card-wip-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
    color: #888888;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
  }

  /* Action Buttons & Links */
  .mobile-hero-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    margin-bottom: 36px;
  }

  .mobile-hero-btn.primary-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #ffd900;
    color: #000000;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(255, 217, 0, 0.25);
    transition: transform 0.15s ease, background-color 0.15s ease;
  }

  .mobile-hero-btn.primary-btn:active {
    transform: scale(0.98);
    background: #e6c300;
  }

  .mobile-hero-socials {
    display: flex;
    gap: 16px;
    width: 100%;
  }

  .mobile-social-link {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 12px;
    border-radius: 8px;
    transition: background 0.15s ease;
  }

  .mobile-social-link:active {
    background: rgba(255, 255, 255, 0.1);
  }

  /* Embedded Mobile Contact Box */
  .mobile-contact-box {
    width: 100%;
    background: rgba(18, 18, 18, 0.95);
    border: 1px solid rgba(255, 217, 0, 0.35);
    border-radius: 14px;
    padding: 26px 20px;
    margin-bottom: 36px;
    text-align: left;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
    scroll-margin-top: 90px;
  }

  .mobile-contact-header {
    text-align: center;
    margin-bottom: 24px;
  }

  .mobile-contact-title {
    font-family: 'Space Grotesk', var(--font-primary);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ffd900;
    margin-bottom: 6px;
    text-transform: uppercase;
  }

  .mobile-contact-subtitle {
    font-family: var(--font-primary);
    font-size: 13px;
    color: #aaaaaa;
    line-height: 1.4;
  }

  .mobile-contact-form .form-section {
    margin-bottom: 22px;
  }

  .mobile-contact-form .form-section-title {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #ffd900;
    margin-bottom: 12px;
    text-transform: uppercase;
  }

  .mobile-contact-form .form-group {
    margin-bottom: 14px;
  }

  .mobile-contact-form .contact-input-underline {
    font-size: 14px !important;
    padding: 10px 0 !important;
  }

  .mobile-contact-form .options-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .mobile-contact-form .form-submit-solid-btn {
    background-color: #ffd900 !important;
    color: #000000 !important;
    border-color: #ffd900 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 15px 20px !important;
    margin-top: 16px !important;
  }

  .mobile-contact-form .form-submit-solid-btn:active {
    background-color: #e6c300 !important;
    transform: scale(0.98);
  }

  .mobile-contact-form .form-status-msg {
    margin-top: 5px;
    font-family: var(--font-klee, 'Klee One', cursive, sans-serif) !important;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    line-height: 1.35;
    color: #ffd900 !important;
    text-shadow: none !important;
  }

  .mobile-contact-form .form-status-msg.success {
    color: #ffd900 !important;
  }

  .mobile-contact-form .form-status-msg.error {
    color: #f87171 !important;
  }

  /* Legal Footer */
  .mobile-hero-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: #666666;
  }

  .mobile-footer-links {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .mobile-footer-links a {
    color: #888888;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .mobile-footer-links a:hover {
    color: #ffd900;
  }

  .mobile-footer-sep {
    color: #444444;
  }

  .mobile-footer-copy {
    letter-spacing: 1px;
    font-size: 10px;
    color: #555555;
  }
}

/* ==========================================================================
   §12 27" MINI-LOGO LIVE-EDITOR & FLOATING LAUNCHER
   ========================================================================== */
.mini-logo-floating-launcher {
  position: fixed !important;
  bottom: 24px !important;
  left: 320px !important;
  z-index: 99999 !important;
  background: rgba(14, 14, 14, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(255, 217, 0, 0.7) !important;
  border-radius: 999px !important;
  color: #ffd900 !important;
  padding: 8px 16px !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 14px rgba(255, 217, 0, 0.2) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.mini-logo-floating-launcher:hover {
  transform: translateY(-2px) scale(1.03) !important;
  background: #000000 !important;
  border-color: #ffd900 !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 217, 0, 0.45) !important;
}

.mini-logo-editor-panel {
  position: fixed;
  top: 90px;
  right: 30px;
  width: 340px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  background: rgba(15, 15, 15, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 217, 0, 0.45);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(255, 217, 0, 0.15);
  z-index: 100000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #ffffff;
  padding: 16px;
  box-sizing: border-box;
  user-select: none;
}

.mini-logo-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: move;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 14px;
}

.mini-logo-editor-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #ffd900;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mini-logo-editor-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.mini-logo-editor-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
}

.mini-logo-editor-stats {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.mini-logo-stat-badge {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}

.mini-logo-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.mini-logo-stat-val {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}

.mini-logo-stat-badge.excluded .mini-logo-stat-val {
  color: #ff3b30;
}

.mini-logo-editor-btn-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.mini-logo-editor-btn {
  width: 100%;
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s ease;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.mini-logo-editor-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}

.mini-logo-editor-btn.highlight {
  background: rgba(255, 217, 0, 0.15);
  border-color: rgba(255, 217, 0, 0.5);
  color: #ffd900;
}

.mini-logo-editor-btn.highlight:hover {
  background: rgba(255, 217, 0, 0.25);
  border-color: #ffd900;
}

.mini-logo-editor-btn.active {
  background: #ffd900;
  color: #000000;
  border-color: #ffd900;
}

.mini-logo-editor-btn.danger:hover {
  background: rgba(255, 59, 48, 0.2);
  border-color: #ff3b30;
  color: #ff3b30;
}

.mini-logo-editor-info-box {
  background: rgba(255, 217, 0, 0.08);
  border: 1px solid rgba(255, 217, 0, 0.2);
  border-radius: 8px;
  padding: 10px;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 14px;
}

.mini-logo-editor-footer {
  display: flex;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 12px;
}

.mini-logo-editor-footer .mini-logo-editor-btn {
  flex: 1;
}

/* ==========================================================================
   §13 SERVICES VIDEO LIVE-EDITOR & FLOATING LAUNCHER
   ========================================================================== */
.services-video-floating-launcher {
  position: fixed !important;
  bottom: 24px !important;
  left: 24px !important;
  z-index: 99999 !important;
  background: rgba(14, 14, 14, 0.94) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(255, 217, 0, 0.8) !important;
  border-radius: 999px !important;
  color: #ffd900 !important;
  padding: 8px 18px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 217, 0, 0.25) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.services-video-floating-launcher:hover {
  transform: translateY(-2px) scale(1.04) !important;
  background: #000000 !important;
  border-color: #ffd900 !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7), 0 0 22px rgba(255, 217, 0, 0.5) !important;
}
/* ==========================================================================
   §14 27-INCH MONITOR (16:9 DESKTOP MASTER) CONTACT FOOTER CALIBRATION
   ========================================================================== */
@media (min-width: 1851px) and (max-width: 2560px) and (min-aspect-ratio: 169/100) and (max-aspect-ratio: 185/100) {
  #contact .contact-left-footer {
    width: 100% !important;
    max-width: 536px;
  }
}