/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
@tailwind base;
@tailwind components;
@tailwind utilities;

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* === LA-3-MODI · CSS-Variablen für Theme-System === */
  /* Default · Black Label (klassisch) · alias dark als Backwards-Kompat */
  :root, [data-theme="black-label"], [data-theme="dark"] {
    --la-bg: #060607;
    --la-bg-soft: #0d0e12;
    --la-bg-card: rgba(255,255,255,0.025);
    --la-fg: #F5F2EA;
    --la-fg-muted: #A7AAB4;
    --la-fg-warm: #E8DDC4;
    --la-border: rgba(255,255,255,0.12);
    --la-border-strong: rgba(255,255,255,0.30);
    --la-overlay: rgba(6,6,7,0.55);
    --la-overlay-strong: rgba(6,6,7,0.92);
    --la-selection-bg: #D8B46A;
    --la-selection-fg: #060607;
    /* Akzent-Default · Black-Label-Sicherheitsnetz · Apollon-Patch B · 05.05.2026 */
    --la-accent-primary: #D8B46A;     /* Champagner-Gold · Black-Label-Akzent */
    --la-accent-secondary: #A7C8B5;   /* Lichtung-Sage · sekundär */
    --la-accent-tertiary: #FF9E7A;    /* Sunset-Coral · warm */
  }
  /* light-Label · v2 · Lesbarkeit++ — Papa-Direktive 04.05.2026 spät */
  /* "die buttons und umrandungen deutlicher · die schrift im unteren bereich besser lesbar · ist zu hell" */
  [data-theme="light"] {
    --la-bg: #F7F4ED;            /* leicht wärmer · weniger blendend */
    --la-bg-soft: #FFFFFF;
    --la-bg-card: rgba(13,14,18,0.04);  /* Cards spürbarer */
    --la-fg: #0A0B0E;             /* fast schwarz · maximaler Kontrast */
    --la-fg-muted: #2F3540;       /* statt #5C6470 — deutlich dunkler, lesbarer */
    --la-fg-warm: #1A1D24;
    --la-border: rgba(13,14,18,0.22);        /* von 0.10 auf 0.22 — sichtbar */
    --la-border-strong: rgba(13,14,18,0.55); /* von 0.25 auf 0.55 — fett */
    --la-overlay: rgba(255,255,255,0.55);
    --la-overlay-strong: rgba(247,244,237,0.94);
    --la-selection-bg: #D8B46A;
    --la-selection-fg: #0A0B0E;   /* dunkel statt weiß für Pop */
    --la-accent-primary: #C9A04A;  /* gold-bronze · stärker als reines D8B46A */
    --la-accent-secondary: #1F4E8A; /* deep ocean blue für Akzente */
    --la-accent-tertiary: #2D7A5F;  /* moss green · Lichtung-Bezug */
  }
  /* Light · Buttons + CTAs deutlicher · stärkere Schatten */
  [data-theme="light"] [class*="rounded-full"][style*="--la-fg"],
  [data-theme="light"] a[class*="bg-"]:not([href*="#"]) {
    box-shadow: 0 4px 18px rgba(13,14,18,0.18);
  }
  [data-theme="light"] [class*="rounded-full"]:hover {
    box-shadow: 0 8px 28px rgba(13,14,18,0.28);
  }
  /* Light · Borders bei Cards mit zwei-Pixel-Optik via doppelter inset-shadow */
  [data-theme="light"] [class*="rounded-3xl"][style*="border"],
  [data-theme="light"] [class*="rounded-2xl"][style*="border"] {
    box-shadow: inset 0 0 0 1px rgba(13,14,18,0.12), 0 2px 12px rgba(13,14,18,0.06);
  }
  /* Light · v1.2 Quality Lock — kein !important-Override mehr.
     Footer + OhanaWeltGrid ziehen `var(--la-fg-muted)` direkt in Components.
     Stattdessen: textsicherer Mindest-Kontrast für hardcoded #A7AAB4 / #5C6470 */
  [data-theme="light"] [class*="text-[#A7AAB4]"] { color: var(--la-fg-muted); }
  [data-theme="light"] [class*="text-[#5C6470]"] { color: var(--la-fg-muted); }
  /* Light · ::selection für Apple-Textauswahl */
  [data-theme="light"] ::selection {
    background-color: var(--la-selection-bg);
    color: var(--la-selection-fg);
  }
  /* colore-Label v3 · Acapulco High-End — Papa-Direktive 04.05.2026 spät */
  /* "noch mehr beach acapulco high end apple style mit Palmen und coolen grafiken */
  /*  und noch cooleren style · die color seite muss sich von den anderen abgrenzen" */
  [data-theme="color"], [data-theme="bunt"] {
    --la-bg: #08203A;                    /* tieferes Twilight · klarere Abgrenzung */
    --la-bg-soft: #0F2D4E;
    --la-bg-card: rgba(255,230,109,0.10);
    --la-fg: #FFF6E5;                    /* warmes Sand-Weiß */
    --la-fg-muted: #B8F5E1;              /* Aqua heller — bessere Lesbarkeit */
    --la-fg-warm: #FFCFCF;
    --la-border: rgba(255,107,107,0.55);
    --la-border-strong: rgba(255,46,136,0.85);
    --la-overlay: rgba(8,32,58,0.55);
    --la-overlay-strong: rgba(8,32,58,0.92);
    --la-selection-bg: #FF2E88;
    --la-selection-fg: #FFF6E5;
    --la-accent-primary: #FF2E88;        /* Hot Pink */
    --la-accent-secondary: #FFD93D;      /* Sunshine */
    --la-accent-tertiary: #00F5D4;       /* Aqua */
    --la-accent-quaternary: #C77DFF;     /* Lavender */
    --la-accent-coral: #FF7A5C;          /* Coral · v3 neu */
    --la-accent-lime: #B8F542;           /* Lime · v3 neu */
  }
  /* Color-Pop v3 · Acapulco-Sunset-Body-Mesh · 7-Layer + sun-disk */
  [data-theme="color"] body, [data-theme="bunt"] body {
    background:
      /* Sonne als großer Soft-Ball oben rechts */
      radial-gradient(circle at 85% 12%, rgba(255,217,61,0.45) 0%, rgba(255,123,84,0.20) 18%, transparent 38%),
      /* Hot-Pink-Splash links oben */
      radial-gradient(circle at 8% 18%, rgba(255,46,136,0.35), transparent 38%),
      /* Lavender oben rechts */
      radial-gradient(circle at 92% 32%, rgba(199,125,255,0.30), transparent 38%),
      /* Aqua links unten — Pool */
      radial-gradient(circle at 12% 78%, rgba(0,245,212,0.32), transparent 42%),
      /* Coral rechts unten */
      radial-gradient(circle at 88% 85%, rgba(255,122,92,0.30), transparent 42%),
      /* Lime-Akzent Mitte */
      radial-gradient(circle at 50% 55%, rgba(184,245,66,0.10), transparent 55%),
      /* Lavender-Untergrund-Glow */
      radial-gradient(circle at 50% 100%, rgba(199,125,255,0.18), transparent 55%),
      var(--la-bg);
    background-attachment: fixed;
  }
  [data-theme="color"] .glow-shift, [data-theme="bunt"] .glow-shift {
    animation-duration: 3s;
    filter: saturate(1.55) brightness(1.08);
  }
  [data-theme="color"] img[src*="picsum"], [data-theme="bunt"] img[src*="picsum"] {
    filter: saturate(1.55) contrast(1.10) brightness(1.06) hue-rotate(-3deg);
  }
  /* Color · Buttons knalliger · Borders fetter · Hover-Lift stärker */
  [data-theme="color"] a:hover, [data-theme="bunt"] a:hover {
    text-shadow: 0 0 12px rgba(255,46,136,0.40);
  }
  [data-theme="color"] [class*="rounded-full"], [data-theme="bunt"] [class*="rounded-full"] {
    transition: transform 200ms ease, box-shadow 200ms ease;
  }
  /* Color · Selection mit Pop-Glow */
  [data-theme="color"] ::selection, [data-theme="bunt"] ::selection {
    background-color: var(--la-selection-bg);
    color: var(--la-selection-fg);
    text-shadow: 0 0 14px rgba(255,46,136,0.60);
  }
  /* Color · Cards mit dezenter Innen-Glühe */
  [data-theme="color"] [style*="--la-card"], [data-theme="bunt"] [style*="--la-card"] {
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
  }
  /* Color · Body-Animation · langsam wandernde Sonnenflecken */
  @keyframes la-color-drift {
    0%   { background-position:  0%   0%, 100%   0%, 0% 100%, 100% 100%, 50% 50%; }
    50%  { background-position: 10%  10%,  90%  10%, 5%  90%,  95%  90%, 55% 45%; }
    100% { background-position:  0%   0%, 100%   0%, 0% 100%, 100% 100%, 50% 50%; }
  }
  [data-theme="color"] body, [data-theme="bunt"] body {
    animation: la-color-drift 28s ease-in-out infinite;
    background-size: 200% 200%, 140% 140%, 140% 140%, 140% 140%, 140% 140%, 180% 180%, 220% 220%;
  }
  /* Color v3 · klar abgegrenzt durch Pop-Akzente · jeder primärer Button kriegt Color-Glow */
  [data-theme="color"] [class*="rounded-full"]:not([href*="#"]),
  [data-theme="bunt"] [class*="rounded-full"]:not([href*="#"]) {
    box-shadow: 0 8px 28px rgba(255,46,136,0.30), 0 0 0 1px rgba(255,255,255,0.06) inset;
  }
  [data-theme="color"] [class*="rounded-full"]:not([href*="#"]):hover,
  [data-theme="bunt"] [class*="rounded-full"]:not([href*="#"]):hover {
    box-shadow: 0 14px 40px rgba(255,46,136,0.50), 0 0 24px rgba(0,245,212,0.30);
  }
  /* Color v3 · Cards mit doppelter Border-Optik (innen Aqua-Glow, außen Coral) */
  [data-theme="color"] [class*="rounded-3xl"][style*="border"],
  [data-theme="bunt"] [class*="rounded-3xl"][style*="border"] {
    box-shadow:
      inset 0 1px 0 rgba(0,245,212,0.20),
      inset 0 -1px 0 rgba(255,46,136,0.20),
      0 4px 24px rgba(8,32,58,0.30);
  }
  /* Color v3 · Headlines mit kleinem Atmungs-Glow */
  [data-theme="color"] h1, [data-theme="color"] h2,
  [data-theme="bunt"] h1, [data-theme="bunt"] h2 {
    text-shadow: 0 0 30px rgba(255,46,136,0.10);
  }
  /* Color v3 · Body-Sterne · subtile Sparkle-Layer fix oben drauf */
  [data-theme="color"] body::before, [data-theme="bunt"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
      radial-gradient(1.5px 1.5px at 14% 22%, rgba(255,217,61,0.7), transparent 50%),
      radial-gradient(1px 1px at 28% 64%, rgba(0,245,212,0.6), transparent 50%),
      radial-gradient(1.5px 1.5px at 52% 38%, rgba(199,125,255,0.6), transparent 50%),
      radial-gradient(1px 1px at 76% 14%, rgba(255,46,136,0.5), transparent 50%),
      radial-gradient(1.5px 1.5px at 88% 72%, rgba(184,245,66,0.6), transparent 50%),
      radial-gradient(1px 1px at 38% 88%, rgba(255,122,92,0.5), transparent 50%);
    background-size: 100% 100%;
    z-index: 0;
    animation: la-stars-twinkle 6s ease-in-out infinite alternate;
  }
  @keyframes la-stars-twinkle {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.95; }
  }

  body {
    background: var(--la-bg);
    color: var(--la-fg);
    transition: background 220ms ease, color 220ms ease;
  }
  ::selection {
    background-color: var(--la-selection-bg);
    color: var(--la-selection-fg);
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-cyan-500 via-blue-500 to-fuchsia-500 text-white rounded-2xl font-extrabold hover:brightness-110 transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5;
  }
  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 px-6 py-3 border-2 border-slate-200 text-slate-700 rounded-2xl font-extrabold hover:border-cyan-300 hover:bg-cyan-50 transition-all;
  }
  .card {
    @apply bg-white rounded-3xl border border-slate-200 shadow-md hover:shadow-xl transition-all;
  }
  .heading-xl {
    @apply text-5xl md:text-6xl font-extrabold tracking-tight text-slate-900;
  }
  .heading-lg {
    @apply text-3xl md:text-4xl font-bold tracking-tight text-slate-900;
  }
  .gradient-text {
    @apply bg-gradient-to-r from-blue-700 via-sky-500 to-blue-600 bg-clip-text text-transparent;
  }
}

/* GLOW · stylischer Farbverlauf für Headlines · slow shift 8s */
.glow-shift {
  background-position: 0% 50%;
  animation: glow-shift-anim 8s ease-in-out infinite;
}
@keyframes glow-shift-anim {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .glow-shift { animation: none; background-position: 50% 50%; }
  /* LA-Style v1.3 · Accessibility-Floor · alle Color-Animationen aus */
  [data-theme="color"] body, [data-theme="bunt"] body { animation: none; }
  [data-theme="color"] body::before, [data-theme="bunt"] body::before { animation: none; opacity: 0.45; }
  /* Ticker im /beach */
  [class*="ticker-scroll"] { animation: none !important; }
  /* Card-/Button-Hover-Translates respektieren prefers-reduced-motion über transition */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* LA-Style v1.3 · Focus-Visible-Floor · 2 px Outline + 2 px Offset */
*:focus-visible {
  outline: 2px solid var(--la-accent-primary, var(--la-fg));
  outline-offset: 2px;
  border-radius: 6px;
}

/* ════════════════════════════════════════════════════════════════════════════
   NATIVE PILLAR COLOR SYSTEM v1.0 · v1.4 der LA-Linie
   Papa-Direktive 04.05.2026 spät · "Eine Marke. Viele Welten. Ein System."
   Jede Säule überschreibt im Color-Modus die Farben mit ihrer City-Identität.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Ohana4U · Hawaii Family Garden ──────────────────────────────────── */
[data-theme="color"][data-pillar="ohana4u"] {
  --la-bg:               #2A1F1F;          /* Garden-Twilight */
  --la-bg-soft:          #3A2D2D;
  --la-bg-card:          rgba(245,166,35,0.10);
  --la-fg:               #FFF5E5;          /* Sand */
  --la-fg-muted:         #FFCCB5;          /* Soft Coral */
  --la-fg-warm:          #F2D7A0;          /* Warm Sand */
  --la-border:           rgba(232,75,122,0.45);   /* Hibiscus Pink */
  --la-border-strong:    rgba(245,166,35,0.70);   /* Sunset Gold */
  --la-selection-bg:     #E84B7A;
  --la-selection-fg:     #FFF5E5;
  --la-accent-primary:   #E84B7A;          /* Hibiscus Pink */
  --la-accent-secondary: #F5A623;          /* Sunset Gold */
  --la-accent-tertiary:  #3FA66B;          /* Palm Green */
  --la-accent-quaternary:#3FAEC9;          /* Lagoon Blue */
}
[data-theme="color"][data-pillar="ohana4u"] body {
  background:
    radial-gradient(circle at 80% 12%, rgba(245,166,35,0.45) 0%, rgba(232,75,122,0.20) 22%, transparent 42%),
    radial-gradient(circle at 12% 22%, rgba(232,75,122,0.30), transparent 40%),
    radial-gradient(circle at 88% 78%, rgba(63,166,107,0.28), transparent 42%),
    radial-gradient(circle at 18% 82%, rgba(63,174,201,0.22), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(255,177,153,0.16), transparent 55%),
    var(--la-bg);
  background-attachment: fixed;
}

/* ── SayU2Me · Acapulco Social Club ──────────────────────────────────── */
[data-theme="color"][data-pillar="sayu2me"] {
  /* identisch mit Default-Color-Theme · Acapulco ist die Standard-Welt */
  /* (siehe oben in der globalen [data-theme="color"]-Definition) */
}

/* ── WoM4U · New York Marketing Lab ──────────────────────────────────── */
[data-theme="color"][data-pillar="wom4u"] {
  --la-bg:               #1A1A1F;          /* Graphite */
  --la-bg-soft:          #23232A;
  --la-bg-card:          rgba(248,199,59,0.08);
  --la-fg:               #F5F2EA;          /* Signal White */
  --la-fg-muted:         #C9CDD3;          /* Chrome Silver */
  --la-fg-warm:          #F8C73B;          /* Taxi Yellow */
  --la-border:           rgba(41,98,255,0.45);    /* Electric Blue */
  --la-border-strong:    rgba(199,59,138,0.70);   /* Deep Magenta */
  --la-selection-bg:     #2962FF;
  --la-selection-fg:     #F5F2EA;
  --la-accent-primary:   #2962FF;          /* Electric Blue */
  --la-accent-secondary: #F8C73B;          /* Taxi Yellow */
  --la-accent-tertiary:  #C73B8A;          /* Deep Magenta */
  --la-accent-quaternary:#C9CDD3;          /* Chrome Silver */
}
[data-theme="color"][data-pillar="wom4u"] body {
  background:
    /* horizontale Grid-Linien · NYC Times-Square-Feel */
    linear-gradient(0deg, rgba(41,98,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248,199,59,0.04) 1px, transparent 1px),
    radial-gradient(circle at 18% 18%, rgba(41,98,255,0.32), transparent 40%),
    radial-gradient(circle at 82% 22%, rgba(248,199,59,0.22), transparent 38%),
    radial-gradient(circle at 50% 88%, rgba(199,59,138,0.18), transparent 50%),
    var(--la-bg);
  background-size: 100% 60px, 60px 100%, auto, auto, auto, auto;
  background-attachment: fixed;
}
/* WoM4U · keine Sterne, Grid spricht für sich */
[data-theme="color"][data-pillar="wom4u"] body::before {
  display: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   v1.5 · DAY · NIGHT · ERLEBNIS — pro Säule alle drei Themes nativ
   "Nicht heller machen. Neu denken. Nicht bunter machen. Eigene Welt bauen."
   ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   FARB-DIREKTIVE v4.1 (Papa 04.05.2026 spät)
   DARK = DARK · LIGHT = LIGHT · COLOR = WELT
   Säulen-Mood gehört NUR in Color · in Dark/Light NUR als Akzent-Glow
   ════════════════════════════════════════════════════════════════════════ */

/* ── Ohana4U · Hawaii ────────────────────────────────────────────────── */

/* Ohana4U DARK · pure dark · Hibiscus-Akzent als CTA-Glow */
[data-theme="black-label"][data-pillar="ohana4u"] {
  --la-bg:               #060607;          /* Pure Dark */
  --la-bg-soft:          #0D0E12;
  --la-bg-card:          rgba(255,255,255,0.025);
  --la-fg:               #F5F2EA;
  --la-fg-muted:         #A7AAB4;
  --la-border:           rgba(255,255,255,0.10);
  --la-border-strong:    rgba(232,75,122,0.55);  /* Hibiscus als Akzent-Border */
  --la-accent-primary:   #E84B7A;          /* Hibiscus = Säulen-Marker */
  --la-accent-secondary: #F5A623;
  --la-accent-tertiary:  #3FA66B;
  --la-selection-bg:     #E84B7A;
  --la-selection-fg:     #060607;
}
[data-theme="black-label"][data-pillar="ohana4u"] body {
  background: var(--la-bg);  /* pure dark · keine Mesh-Layer */
}

/* Ohana4U LIGHT · pure light · Hibiscus-Akzent als CTA-Glow */
[data-theme="light"][data-pillar="ohana4u"] {
  --la-bg:               #FAFAF9;          /* Pure Light */
  --la-bg-soft:          #FFFFFF;
  --la-bg-card:          rgba(13,14,18,0.04);
  --la-fg:               #0A0B0E;          /* Pure Black */
  --la-fg-muted:         #2F3540;
  --la-border:           rgba(13,14,18,0.18);
  --la-border-strong:    rgba(232,75,122,0.55);
  --la-accent-primary:   #E84B7A;          /* Hibiscus = Säulen-Marker */
  --la-accent-secondary: #C28A1E;          /* Bronze-Gold gedämpft für Tag */
  --la-accent-tertiary:  #2D7A5F;
  --la-selection-bg:     #E84B7A;
  --la-selection-fg:     #FAFAF9;
}
[data-theme="light"][data-pillar="ohana4u"] body {
  background: var(--la-bg);  /* pure light · keine Mesh-Layer */
}

/* Hawaii FESTIVAL Garden · Color = Erlebnis (existierend, präzisiert) */
/* (siehe weiter unten · v1.4 hat bereits color-color-Selektor) */

/* ── SayU2Me · Acapulco ──────────────────────────────────────────────── */

/* SayU2Me DARK · pure dark · Hot-Pink-Akzent als CTA-Glow */
[data-theme="black-label"][data-pillar="sayu2me"] {
  --la-bg:               #060607;          /* Pure Dark */
  --la-bg-soft:          #0D0E12;
  --la-bg-card:          rgba(255,255,255,0.025);
  --la-fg:               #F5F2EA;
  --la-fg-muted:         #A7AAB4;
  --la-border:           rgba(255,255,255,0.10);
  --la-border-strong:    rgba(255,46,136,0.55);  /* Hot Pink als Akzent-Border */
  --la-accent-primary:   #FF2E88;          /* Hot Pink = SayU2Me-Marker */
  --la-accent-secondary: #00F5D4;          /* Aqua als Nebenakzent */
  --la-accent-tertiary:  #C77DFF;
  --la-selection-bg:     #FF2E88;
  --la-selection-fg:     #060607;
}
[data-theme="black-label"][data-pillar="sayu2me"] body {
  background: var(--la-bg);  /* pure dark · keine Mesh-Layer */
}

/* SayU2Me LIGHT · pure light · Hot-Pink-Akzent als CTA-Glow */
[data-theme="light"][data-pillar="sayu2me"] {
  --la-bg:               #FAFAF9;          /* Pure Light */
  --la-bg-soft:          #FFFFFF;
  --la-bg-card:          rgba(13,14,18,0.04);
  --la-fg:               #0A0B0E;          /* Pure Black */
  --la-fg-muted:         #2F3540;
  --la-border:           rgba(13,14,18,0.18);
  --la-border-strong:    rgba(255,46,136,0.55);
  --la-accent-primary:   #FF2E88;          /* Hot Pink = SayU2Me-Marker */
  --la-accent-secondary: #00B4C8;          /* Aqua-Tag als Nebenakzent */
  --la-accent-tertiary:  #FF7A5C;          /* Coral-Sonne */
  --la-selection-bg:     #FF2E88;
  --la-selection-fg:     #FAFAF9;
}
[data-theme="light"][data-pillar="sayu2me"] body {
  background: var(--la-bg);  /* pure light · keine Mesh-Layer */
}

/* ── WoM4U · New York ────────────────────────────────────────────────── */

/* WoM4U DARK · pure dark · Electric-Blue-Akzent als CTA-Glow */
[data-theme="black-label"][data-pillar="wom4u"] {
  --la-bg:               #060607;          /* Pure Dark */
  --la-bg-soft:          #0D0E12;
  --la-bg-card:          rgba(255,255,255,0.025);
  --la-fg:               #F5F2EA;
  --la-fg-muted:         #A7AAB4;
  --la-border:           rgba(255,255,255,0.10);
  --la-border-strong:    rgba(41,98,255,0.55);
  --la-accent-primary:   #2962FF;          /* Electric Blue = WoM4U-Marker */
  --la-accent-secondary: #F8C73B;          /* Taxi Yellow als Nebenakzent */
  --la-accent-tertiary:  #C73B8A;
  --la-selection-bg:     #2962FF;
  --la-selection-fg:     #060607;
}
[data-theme="black-label"][data-pillar="wom4u"] body {
  background: var(--la-bg);  /* pure dark · keine Grid-Linien */
}

/* WoM4U LIGHT · pure light · Electric-Blue-Akzent als CTA-Glow */
[data-theme="light"][data-pillar="wom4u"] {
  --la-bg:               #FAFAF9;          /* Pure Light */
  --la-bg-soft:          #FFFFFF;
  --la-bg-card:          rgba(13,14,18,0.04);
  --la-fg:               #0A0B0E;          /* Pure Black */
  --la-fg-muted:         #2F3540;
  --la-border:           rgba(13,14,18,0.18);
  --la-border-strong:    rgba(41,98,255,0.55);
  --la-accent-primary:   #1A4FE0;          /* Electric Blue · WoM4U-Marker */
  --la-accent-secondary: #C28A1E;
  --la-accent-tertiary:  #A02E72;
  --la-selection-bg:     #1A4FE0;
  --la-selection-fg:     #FAFAF9;
}
[data-theme="light"][data-pillar="wom4u"] body {
  background: var(--la-bg);  /* pure light · keine Grid-Linien */
}

/* ── Artic4U · Paris ─────────────────────────────────────────────────── */

/* Artic4U DARK · pure dark · Rouge-Akzent als CTA-Glow */
[data-theme="black-label"][data-pillar="artic4u"] {
  --la-bg:               #060607;          /* Pure Dark */
  --la-bg-soft:          #0D0E12;
  --la-bg-card:          rgba(255,255,255,0.025);
  --la-fg:               #F5F2EA;
  --la-fg-muted:         #A7AAB4;
  --la-border:           rgba(255,255,255,0.10);
  --la-border-strong:    rgba(199,54,72,0.55);
  --la-accent-primary:   #C73648;          /* Rouge = Artic4U-Marker */
  --la-accent-secondary: #E8DCC4;
  --la-accent-tertiary:  #5B4380;
  --la-selection-bg:     #C73648;
  --la-selection-fg:     #060607;
}
[data-theme="black-label"][data-pillar="artic4u"] body {
  background: var(--la-bg);  /* pure dark */
}

/* Artic4U LIGHT · pure light · Rouge-Akzent als CTA-Glow */
[data-theme="light"][data-pillar="artic4u"] {
  --la-bg:               #FAFAF9;          /* Pure Light */
  --la-bg-soft:          #FFFFFF;
  --la-bg-card:          rgba(13,14,18,0.04);
  --la-fg:               #0A0B0E;          /* Pure Black */
  --la-fg-muted:         #2F3540;
  --la-border:           rgba(13,14,18,0.18);
  --la-border-strong:    rgba(160,35,52,0.55);
  --la-accent-primary:   #A02334;          /* Rouge */
  --la-accent-secondary: #3D2B5F;
  --la-accent-tertiary:  #E8DCC4;
  --la-selection-bg:     #A02334;
  --la-selection-fg:     #FAFAF9;
}
[data-theme="light"][data-pillar="artic4u"] body {
  background: var(--la-bg);  /* pure light */
}

/* ── Sterne in Säulen-Light-Mode ausschalten (zu unruhig) ─────────────── */
[data-theme="light"] body::before {
  display: none;
}

/* ── Artic4U · Paris Gallery ─────────────────────────────────────────── */
[data-theme="color"][data-pillar="artic4u"] {
  --la-bg:               #FBFAF8;          /* Gallery White */
  --la-bg-soft:          #FFFFFF;
  --la-bg-card:          rgba(13,14,18,0.025);
  --la-fg:               #0A0B0E;          /* Ink Black */
  --la-fg-muted:         #2F3540;          /* Lesbar dunkel */
  --la-fg-warm:          #3D2B5F;          /* Deep Violet */
  --la-border:           rgba(13,14,18,0.18);
  --la-border-strong:    rgba(160,35,52,0.55);   /* Rouge */
  --la-selection-bg:     #A02334;          /* Rouge */
  --la-selection-fg:     #FBFAF8;
  --la-accent-primary:   #A02334;          /* Rouge */
  --la-accent-secondary: #3D2B5F;          /* Deep Violet */
  --la-accent-tertiary:  #E8DCC4;          /* Champagne */
  --la-accent-quaternary:#0A0B0E;          /* Ink */
}
[data-theme="color"][data-pillar="artic4u"] body {
  background:
    /* Galerie-Weiß mit feinen Wand-Linien (vertikale Hängung) */
    linear-gradient(90deg, rgba(13,14,18,0.025) 1px, transparent 1px),
    radial-gradient(circle at 18% 22%, rgba(160,35,52,0.12), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(61,43,95,0.08), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(232,220,196,0.18), transparent 60%),
    var(--la-bg);
  background-size: 240px 100%, auto, auto, auto, auto;
  background-attachment: fixed;
}
/* Artic4U · keine Sterne, klassische Galerie-Ruhe */
[data-theme="color"][data-pillar="artic4u"] body::before {
  display: none;
}
/* Artic4U · Card-Glow ruhig (statt Aqua/Coral · nur dezent Champagne) */
[data-theme="color"][data-pillar="artic4u"] [class*="rounded-3xl"][style*="border"] {
  box-shadow: inset 0 1px 0 rgba(232,220,196,0.30), 0 2px 12px rgba(13,14,18,0.04);
}

/* ── FARB-DIREKTIVE v4.1 · OBERSTE REGEL · GLOBAL OVERRIDES ──────────── */
/* DARK = DARK · LIGHT = LIGHT · COLOR = WELT
   In Dark/Light gehört KEINE Säulen-Welt rein:
   keine Picsum-Hero-Bilder · keine Ambient-Layer · keine Mesh-Layer ·
   keine säulen-bunten Lebensbaum-Logos. Nur Pure Dark / Pure Light
   plus EIN Säulen-Akzent (CTA + GLOW + Border). */

/* 1) Picsum-Hero-Bilder in Dark/Light entfernen (nur sehr dezent erkennbar) */
[data-theme="black-label"] [style*="picsum.photos"] {
  background-image: none !important;
  filter: grayscale(1) brightness(0.4) opacity(0.15) !important;
}
[data-theme="light"] [style*="picsum.photos"] {
  background-image: none !important;
  filter: grayscale(1) brightness(1.2) opacity(0.10) !important;
}

/* 2) Ambient-Layer (Schmetterling/Pool-Glint/Subway/Galerie) nur in Color */
[data-theme="black-label"] .ambient-butterfly,
[data-theme="black-label"] .ambient-pool-glint,
[data-theme="black-label"] .ambient-subway-shadow,
[data-theme="black-label"] .ambient-gallery-spotlight,
[data-theme="light"] .ambient-butterfly,
[data-theme="light"] .ambient-pool-glint,
[data-theme="light"] .ambient-subway-shadow,
[data-theme="light"] .ambient-gallery-spotlight {
  display: none !important;
}

/* 3) Decorative Mesh-Layer (aria-hidden Hintergrund-Divs) nur in Color */
[data-theme="black-label"] section.relative.isolate > div[aria-hidden="true"],
[data-theme="light"] section.relative.isolate > div[aria-hidden="true"] {
  display: none !important;
}

/* 4) Lebensbaum-SVG zwingt Säulen-Stroke auf Theme-Farbe in Dark/Light
      (überschreibt das inline `stroke="#XXX"` Presentation-Attribute) */
[data-theme="black-label"] svg[role="img"][aria-label*="Lebensbaum"] line,
[data-theme="black-label"] svg[role="img"][aria-label*="Lebensbaum"] circle,
[data-theme="black-label"] svg[role="img"][aria-label*="Lebensbaum"] path,
[data-theme="black-label"] svg[role="img"][aria-label*="Lebensbaum"] polyline {
  stroke: var(--la-fg) !important;
}
[data-theme="black-label"] svg[role="img"][aria-label*="Lebensbaum"] circle[fill]:not([fill="none"]) {
  fill: var(--la-fg) !important;
  fill-opacity: 0.10 !important;
}
[data-theme="light"] svg[role="img"][aria-label*="Lebensbaum"] line,
[data-theme="light"] svg[role="img"][aria-label*="Lebensbaum"] circle,
[data-theme="light"] svg[role="img"][aria-label*="Lebensbaum"] path,
[data-theme="light"] svg[role="img"][aria-label*="Lebensbaum"] polyline {
  stroke: var(--la-fg) !important;
}
[data-theme="light"] svg[role="img"][aria-label*="Lebensbaum"] circle[fill]:not([fill="none"]) {
  fill: var(--la-fg) !important;
  fill-opacity: 0.08 !important;
}

/* 5) AGGRESSIVE Tailwind-Overrides in LIGHT
      Attribute-Substring-Selectors greifen unabhängig von Tailwind-Escape-Form.
      Pages nutzen `bg-[#060607]`, `bg-[#0d0e12]`, `bg-[#1A150A]` etc. ·
      ALLE dunklen Hex-Hintergründe werden in Light auf hellen Ton gemappt. */

/* Alle dunklen Hex-Hintergründe (bg-[#0xxxxx], bg-[#1xxxxx]) → hell */
[data-theme="light"] [class*="bg-[#0"],
[data-theme="light"] [class*="bg-[#1"] {
  background-color: var(--la-bg-soft) !important;
}

/* Alle dunklen Hex-Texte (text-[#F5F2EA], text-[#A7AAB4]) → dunkel */
[data-theme="light"] [class*="text-[#F"],
[data-theme="light"] [class*="text-[#f"],
[data-theme="light"] [class*="text-[#E"],
[data-theme="light"] [class*="text-[#e"] {
  color: var(--la-fg) !important;
}
[data-theme="light"] [class*="text-[#A"],
[data-theme="light"] [class*="text-[#a"],
[data-theme="light"] [class*="text-[#9"],
[data-theme="light"] [class*="text-[#8"] {
  color: var(--la-fg-muted) !important;
}

/* bg-white/* (Glass-Cards mit weißem Schimmer auf Dark) → in Light dunkler Hauch */
[data-theme="light"] [class*="bg-white/"] {
  background-color: rgba(13,14,18,0.05) !important;
}

/* border-white/* in Light → dunkle Border */
[data-theme="light"] [class*="border-white/"] {
  border-color: rgba(13,14,18,0.18) !important;
}

/* text-white in Light → dunkel */
[data-theme="light"] [class*="text-white"] {
  color: var(--la-fg) !important;
}

/* Inline-Style mit dunklem Background → hell */
[data-theme="light"] [style*="background:#060607"],
[data-theme="light"] [style*="background: #060607"],
[data-theme="light"] [style*="background:#0D0E12"],
[data-theme="light"] [style*="background: #0D0E12"],
[data-theme="light"] [style*="background:#0d0e12"] {
  background: var(--la-bg-soft) !important;
}

/* 6) AGGRESSIVE Tailwind-Overrides in DARK
      Pages nutzen `bg-[#FAFAF9]`, `bg-white`, `text-black`, `text-[#0A0B0E]` ·
      ALLE hellen Klassen werden in Dark auf dunklen Ton gemappt. */
[data-theme="black-label"] [class*="bg-[#F"],
[data-theme="black-label"] [class*="bg-[#f"],
[data-theme="black-label"] [class*="bg-[#E"],
[data-theme="black-label"] [class*="bg-[#e"] {
  background-color: var(--la-bg-soft) !important;
}
[data-theme="black-label"] [class*="text-[#0"],
[data-theme="black-label"] [class*="text-[#1"],
[data-theme="black-label"] [class*="text-[#2"] {
  color: var(--la-fg) !important;
}
[data-theme="black-label"] [class*="text-black"] {
  color: var(--la-fg) !important;
}
[data-theme="black-label"] .bg-white {
  background-color: var(--la-bg-soft) !important;
}

/* 7) Body in Dark/Light · garantiert pure Background ohne Mesh-Reste */
[data-theme="black-label"] body {
  background: var(--la-bg) !important;
  background-image: none !important;
  color: var(--la-fg) !important;
}
[data-theme="light"] body {
  background: var(--la-bg) !important;
  background-image: none !important;
  color: var(--la-fg) !important;
}

/* 8) Body::before-Sterne komplett aus in Dark + Light */
[data-theme="black-label"] body::before,
[data-theme="black-label"] body::after,
[data-theme="light"] body::before,
[data-theme="light"] body::after {
  display: none !important;
  content: none !important;
}

/* 9) Säulen-spezifische Section-Backgrounds (radial-gradient style="...")
      in Dark/Light deaktivieren · sie bringen Säulen-Mood zurück */
[data-theme="black-label"] section[style*="radial-gradient"],
[data-theme="light"] section[style*="radial-gradient"] {
  background: transparent !important;
}
[data-theme="black-label"] section > div[style*="radial-gradient"],
[data-theme="black-label"] section > div[style*="linear-gradient"],
[data-theme="light"] section > div[style*="radial-gradient"],
[data-theme="light"] section > div[style*="linear-gradient"] {
  display: none !important;
}

/* 10) GLOW + CTA-Akzent · BLEIBT in Dark/Light (das ist die erlaubte Säulen-Spur) */
/* (keine Override nötig · die GLOW-Animation und CTA-Glow-Shadows nutzen --la-accent-primary) */

/* ── Säulen-Pillar-Caption · zeigt im Footer welche Welt ─────────────── */
[data-pillar]::after {
  /* Optional · in Footer ablesbar via JS / kein Visual */
}

/* ===================================================================
   COWORK-ARCHITEKTUR · 9 STADT-STIMMUNGSWELTEN · WELLE Q.7
   Markenrechtssicher: keine fremden Markennamen, eigene Stilbezeichnungen
   =================================================================== */

/* Aktiv via [data-style-layer="..."] auf <body> (gesetzt von StyleLayerSwitcher) */

/* LA Glass Glow · Sunset · Glamour · MAX GLOW */
[data-style-layer="la-glass-glow"] {
  --A: #FF8A00; --B: #FF3CAC; --C: #00E0FF;
  --gA: rgba(255,138,0,0.32); --gB: rgba(255,60,172,0.30); --gC: rgba(0,224,255,0.24);
  --glow-mult: 1; --corner: 22px;
  --font-display: 'Fraunces', Georgia, serif;
  --letter-spacing: -0.02em;
}
[data-style-layer="la-glass-glow"] body {
  background:
    radial-gradient(ellipse at 12% 10%, rgba(255,138,0,0.32), transparent 35%),
    radial-gradient(ellipse at 88% 14%, rgba(0,224,255,0.24), transparent 32%),
    radial-gradient(ellipse at 50% 100%, rgba(255,60,172,0.30), transparent 36%),
    linear-gradient(180deg, #1a0530, #0a0420 60%, #02010a) !important;
  color: #f0f0f0 !important;
}

/* NY Concrete · Edge · Gold · MED GLOW */
[data-style-layer="ny-concrete"] {
  --A: #d4af37; --B: #1a1a1a; --C: #c0c0c0;
  --gA: rgba(212,175,55,0.18); --gB: rgba(0,0,0,0.12); --gC: rgba(192,192,192,0.10);
  --glow-mult: 0.4; --corner: 8px;
  --font-display: 'Inter', system-ui, sans-serif;
  --letter-spacing: -0.03em;
}
[data-style-layer="ny-concrete"] body {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212,175,55,0.10), transparent 40%),
    linear-gradient(180deg, #0a0a0c, #161618 60%, #050505) !important;
  color: #f0f0f0 !important;
}

/* Berlin Raw · Beton · Petrol · LOW GLOW */
[data-style-layer="berlin-raw"] {
  --A: #b06840; --B: #3a6878; --C: #7a7670;
  --gA: rgba(176,104,64,0.18); --gB: rgba(58,104,120,0.14); --gC: rgba(122,118,112,0.10);
  --glow-mult: 0.25; --corner: 4px;
  --font-display: 'Inter', system-ui, sans-serif;
  --letter-spacing: -0.02em;
}
[data-style-layer="berlin-raw"] body {
  background:
    radial-gradient(ellipse at 80% 0%, rgba(58,104,120,0.12), transparent 45%),
    radial-gradient(ellipse at 20% 100%, rgba(176,104,64,0.08), transparent 40%),
    linear-gradient(135deg, #1a2228, #161a1f 50%, #0d1116) !important;
  color: #e8e6e0 !important;
}

/* Tokyo Neon · pink/cyan extrem · MAX GLOW */
[data-style-layer="tokyo-neon"] {
  --A: #FF00C8; --B: #00FFE5; --C: #FFD700;
  --gA: rgba(255,0,200,0.32); --gB: rgba(0,255,229,0.30); --gC: rgba(255,215,0,0.18);
  --glow-mult: 1.3; --corner: 18px;
  --font-display: 'Fraunces', Georgia, serif;
  --letter-spacing: -0.02em;
}
[data-style-layer="tokyo-neon"] body {
  background:
    radial-gradient(ellipse at 0% 0%, #FF00C8 -20%, transparent 30%),
    radial-gradient(ellipse at 100% 100%, #00FFE5 -20%, transparent 30%),
    linear-gradient(135deg, #0a0014, #1a0028) !important;
  color: #f0f0f0 !important;
}

/* Miami Pastel · soft beach */
[data-style-layer="miami-pastel"] {
  --A: #FF8AB0; --B: #A8DDF0; --C: #FFC8A0;
  --gA: rgba(255,138,176,0.24); --gB: rgba(168,221,240,0.20); --gC: rgba(255,200,160,0.18);
  --glow-mult: 0.7; --corner: 20px;
  --font-display: 'Fraunces', Georgia, serif;
  --letter-spacing: -0.02em;
}
[data-style-layer="miami-pastel"] body {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255,138,176,0.25), transparent 40%),
    linear-gradient(180deg, #1a1a3a, #0a0a2a) !important;
  color: #f0f0f0 !important;
}

/* Paris Rosé · gold + roséholm */
[data-style-layer="paris-rose"] {
  --A: #C9A961; --B: #E8B4A8; --C: #F5E6D3;
  --gA: rgba(201,169,97,0.20); --gB: rgba(232,180,168,0.18); --gC: rgba(245,230,211,0.10);
  --glow-mult: 0.5; --corner: 14px;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --letter-spacing: 0.0em;
}
[data-style-layer="paris-rose"] body {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,169,97,0.12), transparent 50%),
    linear-gradient(180deg, #1a1410, #0a0805) !important;
  color: #f0e8da !important;
}

/* Reykjavik Ice · cool blue/silver */
[data-style-layer="reykjavik-ice"] {
  --A: #a8d8e8; --B: #7095b0; --C: #c8d8e0;
  --gA: rgba(168,216,232,0.18); --gB: rgba(112,149,176,0.14); --gC: rgba(200,216,224,0.10);
  --glow-mult: 0.4; --corner: 6px;
  --font-display: 'Inter', system-ui, sans-serif;
  --letter-spacing: 0.0em;
}
[data-style-layer="reykjavik-ice"] body {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(168,216,232,0.10), transparent 50%),
    linear-gradient(180deg, #0d1820, #050a10) !important;
  color: #e0e8ec !important;
}

/* Dubai Gold · pure gold */
[data-style-layer="dubai-gold"] {
  --A: #d4af37; --B: #f5deb3; --C: #8b6914;
  --gA: rgba(212,175,55,0.30); --gB: rgba(245,222,179,0.16); --gC: rgba(139,105,20,0.10);
  --glow-mult: 0.8; --corner: 16px;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --letter-spacing: 0.02em;
}
[data-style-layer="dubai-gold"] body {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212,175,55,0.20), transparent 45%),
    linear-gradient(180deg, #1a1408, #0a0805) !important;
  color: #f5e8c8 !important;
}

/* São Paulo Vibrant · gelb/grün/cyan */
[data-style-layer="saopaulo-vibrant"] {
  --A: #FFD700; --B: #5BE3B0; --C: #00E0FF;
  --gA: rgba(255,215,0,0.28); --gB: rgba(91,227,176,0.24); --gC: rgba(0,224,255,0.18);
  --glow-mult: 1.1; --corner: 14px;
  --font-display: 'Inter', system-ui, sans-serif;
  --letter-spacing: -0.02em;
}
[data-style-layer="saopaulo-vibrant"] body {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255,215,0,0.20), transparent 40%),
    radial-gradient(ellipse at 70% 100%, rgba(91,227,176,0.18), transparent 40%),
    linear-gradient(180deg, #0a1a14, #050a08) !important;
  color: #f0f0f0 !important;
}

/* ── Apollon-Patch C · Welle Q.17.7 · drei Stadt-Stimmungen für 3D4U/Design4U/Insight4U ── */

/* Shenzhen Maker Lab · Werkstatt · Cyan-Orange-Hightech · MED-HIGH GLOW */
[data-style-layer="shenzhen-maker-lab"] {
  --A: #00D9FF; --B: #FF7A1A; --C: #FFD700;
  --gA: rgba(0,217,255,0.28); --gB: rgba(255,122,26,0.24); --gC: rgba(255,215,0,0.16);
  --glow-mult: 0.9; --corner: 18px;
  --font-display: 'Fraunces', Georgia, serif;
  --letter-spacing: -0.03em;
  --la-accent-primary: #00D9FF;
  --la-accent-secondary: #FF7A1A;
  --la-accent-tertiary: #FFD700;
}
[data-style-layer="shenzhen-maker-lab"] body {
  background:
    radial-gradient(ellipse at 18% 8%, rgba(0,217,255,0.22), transparent 38%),
    radial-gradient(ellipse at 82% 14%, rgba(255,122,26,0.20), transparent 38%),
    radial-gradient(ellipse at 50% 100%, rgba(255,215,0,0.14), transparent 42%),
    linear-gradient(180deg, #0a1218, #06090c 60%, #03050a) !important;
  color: #e8efef !important;
}

/* Barcelona Design Atelier · Mediterran · Coral-Sand-Olive · WARM GLOW */
[data-style-layer="barcelona-design-atelier"] {
  --A: #E07856; --B: #D9A05B; --C: #3E7C9C;
  --gA: rgba(224,120,86,0.24); --gB: rgba(217,160,91,0.20); --gC: rgba(62,124,156,0.16);
  --glow-mult: 0.6; --corner: 16px;
  --font-display: 'Fraunces', Georgia, serif;
  --letter-spacing: -0.025em;
  --la-accent-primary: #E07856;
  --la-accent-secondary: #D9A05B;
  --la-accent-tertiary: #3E7C9C;
}
[data-style-layer="barcelona-design-atelier"] body {
  background:
    radial-gradient(ellipse at 14% 10%, rgba(224,120,86,0.18), transparent 38%),
    radial-gradient(ellipse at 86% 18%, rgba(62,124,156,0.14), transparent 36%),
    radial-gradient(ellipse at 50% 100%, rgba(217,160,91,0.12), transparent 42%),
    linear-gradient(180deg, #FFF8EE, #F7F0E2 60%, #F0E6D0) !important;
  color: #241914 !important;
}

/* Los Angeles Studio · Helles Atelier · Bronze-Sage · CALM GLOW */
[data-style-layer="los-angeles-studio"] {
  --A: #C9A04A; --B: #A7C8B5; --C: #5C7C8A;
  --gA: rgba(201,160,74,0.20); --gB: rgba(167,200,181,0.16); --gC: rgba(92,124,138,0.12);
  --glow-mult: 0.55; --corner: 14px;
  --font-display: 'Fraunces', Georgia, serif;
  --letter-spacing: -0.02em;
  --la-accent-primary: #C9A04A;
  --la-accent-secondary: #A7C8B5;
  --la-accent-tertiary: #5C7C8A;
}
[data-style-layer="los-angeles-studio"] body {
  background:
    radial-gradient(ellipse at 16% 12%, rgba(201,160,74,0.16), transparent 38%),
    radial-gradient(ellipse at 84% 16%, rgba(167,200,181,0.14), transparent 38%),
    radial-gradient(ellipse at 50% 100%, rgba(92,124,138,0.10), transparent 42%),
    linear-gradient(180deg, #FBF8F1, #F5F2EA 60%, #ECE7DA) !important;
  color: #1A1410 !important;
}

/* GLASS-VARS für jeden Style · alle nutzen white-alpha (Cowork-Pattern) */
[data-style-layer] {
  --glass: rgba(255,255,255,0.06);
  --glass-strong: rgba(255,255,255,0.12);
  --glass-soft: rgba(255,255,255,0.03);
  --topbar: rgba(10,10,14,0.7);
  --line: rgba(255,255,255,0.14);
  --muted: rgba(240,240,240,0.6);
}

/* Background-Grid · subtil · radial-mask */
[data-style-layer] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 78%);
          mask-image: radial-gradient(circle at center, #000 0%, transparent 78%);
  opacity: 0.5;
}

/* ===== ANIMATIONS ===== */
@keyframes coworkSpinSlow { to { transform: rotate(360deg); } }
@keyframes coworkPulseGlow { from { filter: saturate(1); } to { filter: saturate(1.6) brightness(1.15); } }
@keyframes coworkRingPulse { 0% { transform: scale(0.3); opacity: 1; border-color: #FFD36E; } 100% { transform: scale(2.2); opacity: 0; border-color: #FF3CAC; } }
@keyframes coworkGlowExpand { 0% { transform: scale(0.1); opacity: 0; } 40% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.4); opacity: 0.7; } }
@keyframes coworkLogoIn { 0% { opacity: 0; transform: translateY(20px) scale(0.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes coworkFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes coworkProgFill { to { width: 100%; } }
@keyframes coworkBurst { 0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0); } }
@keyframes coworkPageFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes coworkAppIn { to { opacity: 1; } }
@keyframes coworkWelcomeFade { to { opacity: 0; visibility: hidden; transform: scale(1.1); } }

/* prefers-reduced-motion · respektiere User-Wunsch */
@media (prefers-reduced-motion: reduce) {
  [data-style-layer] *,
  [data-style-layer] *::before,
  [data-style-layer] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===================================================================
   COWORK-KLASSEN · für Member-Hub direkt nutzbar
   =================================================================== */

/* CARDS · Glass + Backdrop-Blur */
.cw-panel {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--corner);
  padding: 20px;
  -webkit-backdrop-filter: blur(22px) saturate(150%);
          backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 18px 50px rgba(0,0,0,0.10);
}

/* TOPBAR · sticky */
.cw-topbar {
  position: -webkit-sticky;
  position: sticky;
  top: 14px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 14px;
  background: var(--topbar);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
          backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: var(--corner);
  box-shadow: 0 18px 60px rgba(0,0,0,0.18);
}

/* BRAND-LOGO mit Gradient + Rotate */
.cw-brand { display: flex; align-items: center; gap: 11px; cursor: pointer; flex-shrink: 0; }
.cw-logo {
  width: 42px; height: 42px;
  border-radius: calc(var(--corner) * 0.55);
  background: linear-gradient(135deg, var(--A), var(--B), var(--C));
  display: grid; place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 21px;
  box-shadow: 0 0 28px var(--gA);
  transform: rotate(-6deg);
  transition: transform 0.4s;
}
.cw-brand:hover .cw-logo { transform: rotate(0) scale(1.06); }
.cw-brand-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: var(--letter-spacing);
  line-height: 1.1;
}
.cw-brand-name small {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: 0.32em;
  color: var(--A);
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 2px;
}

/* PAGE-SWITCH-PILLS */
.cw-page-switch {
  display: flex; align-items: center; gap: 0;
  padding: 3px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: calc(var(--corner) * 0.55);
  overflow-x: auto;
  flex-shrink: 1;
}
.cw-page-switch::-webkit-scrollbar { display: none; }
.cw-pill {
  padding: 8px 12px;
  border-radius: calc(var(--corner) * 0.4);
  border: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  transition: all 0.25s;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  white-space: nowrap;
  font-family: 'Inter', system-ui, sans-serif;
}
.cw-pill.active {
  background: linear-gradient(135deg, var(--A), var(--B));
  color: #fff;
  box-shadow: 0 4px 12px var(--gA);
}
.cw-pill:not(.active):hover { color: #fff; background: var(--glass-strong); }

/* STYLE-INDICATOR */
.cw-style-indicator {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: calc(var(--corner) * 0.55);
  border: 1px solid var(--line);
  background: var(--glass);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.25s;
}
.cw-style-indicator:hover { background: var(--glass-strong); transform: translateY(-1px); }
.cw-style-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--A), var(--B), var(--C));
  box-shadow: 0 0 10px var(--gA);
}
.cw-style-name {
  font-family: var(--font-display);
  letter-spacing: var(--letter-spacing);
  font-weight: 700;
}

/* COIN-WALLET PILL */
.cw-coin-wallet {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 99px;
  background: linear-gradient(135deg, #FFD36E, #FF8A00);
  color: #1a0530;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 12px rgba(255,138,0,0.3);
  text-decoration: none;
}
.cw-coin-wallet:hover { transform: translateY(-1px); }
.cw-coin-icon {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #FFD36E, #FF8A00);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2);
}

/* ME-AVATAR */
.cw-me {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  padding: 3px 12px 3px 3px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 24px;
  text-decoration: none;
  color: inherit;
}
.cw-me-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--A), var(--B));
  display: grid; place-items: center;
  font-weight: 700; font-size: 10px;
  color: #fff;
}
.cw-me-name { font-size: 11px; font-weight: 600; }

/* QUOTE-BANNER mit Riesen-Anführungszeichen */
.cw-quote {
  margin-top: 18px;
  padding: 24px 28px;
  border-radius: var(--corner);
  background: linear-gradient(135deg, var(--gA), var(--gB));
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}
.cw-quote::before {
  content: '\201E';
  position: absolute;
  left: 14px; top: -30px;
  font-family: var(--font-display);
  font-size: 200px;
  color: var(--A);
  opacity: 0.15;
  font-weight: 900;
  line-height: 1;
}
.cw-quote-text {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--letter-spacing);
  position: relative;
  z-index: 1;
}
.cw-quote-text strong {
  background: linear-gradient(135deg, var(--A), var(--B), var(--C));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: 900;
}
.cw-quote-author {
  margin-top: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--A);
  text-transform: uppercase;
  font-weight: 600;
}

/* PAGE-HEADER */
.cw-page-tag {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--A);
  margin-bottom: 6px;
  text-transform: uppercase;
  font-weight: 700;
}
.cw-page-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 900;
  letter-spacing: var(--letter-spacing);
  line-height: 1.05;
}
.cw-page-title span {
  background: linear-gradient(135deg, var(--A), var(--B), var(--C));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.cw-page-desc {
  font-size: 13px; color: var(--muted);
  margin-top: 8px; max-width: 600px; line-height: 1.6;
}

/* GRID-LAYOUTS */
.cw-split-2 { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 14px; gap: 14px; }
.cw-split-3 { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 14px; gap: 14px; }
.cw-split-4 { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 12px; gap: 12px; }

/* KPI-CARDS */
.cw-kpi {
  padding: 18px;
  border-radius: calc(var(--corner) * 0.65);
  background: var(--glass-soft);
  border: 1px solid var(--line);
}
.cw-kpi-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
}
.cw-kpi-value {
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: 0.02em;
  margin-top: 4px;
  font-weight: 800;
}
.cw-kpi-trend {
  font-size: 11px;
  color: #5BE3B0;
  margin-top: 2px;
}

/* SECTION-HEAD */
.cw-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.cw-section-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--letter-spacing);
}
.cw-section-title small {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: 0.3em;
  display: block;
  color: var(--A);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.cw-section-link {
  font-size: 11px;
  color: var(--C);
  cursor: pointer;
  text-decoration: none;
}
.cw-section-link:hover { text-decoration: underline; }

/* LIST-ROWS */
.cw-list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--glass-soft);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 7px;
  text-decoration: none;
  color: inherit;
}
.cw-list-row:hover { background: var(--glass-strong); transform: translateX(2px); }
.cw-list-row .cw-meta strong { display: block; font-size: 13px; }
.cw-list-row .cw-meta span { font-size: 10px; color: var(--muted); }
.cw-list-row .cw-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--A), var(--B));
  color: #fff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cw-badge.muted { background: var(--glass-strong); color: var(--muted); }
.cw-badge.safe { background: linear-gradient(135deg, #5BE3B0, #2388FF); color: #fff; }

/* HERO-CREATOR mit Conic-Spin */
.cw-hero-creator {
  position: relative;
  border-radius: var(--corner);
  overflow: hidden;
  background: linear-gradient(135deg, var(--gA), var(--gB), var(--gC));
  border: 1px solid var(--line);
  padding: 32px;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.cw-hero-creator::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--A), var(--B), var(--C), var(--A));
  filter: blur(20px);
  opacity: calc(0.25 * var(--glow-mult));
  animation: coworkSpinSlow 18s linear infinite;
}
.cw-hero-content { position: relative; z-index: 1; }

/* SPACES-GRID */
.cw-spaces-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 12px; gap: 12px; }
.cw-space {
  position: relative;
  padding: 22px 18px;
  border-radius: calc(var(--corner) * 0.8);
  background: var(--glass);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  cursor: pointer;
  transition: all 0.35s;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.cw-space:hover { transform: translateY(-5px); border-color: var(--A); }
.cw-space-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--A), var(--B));
  display: grid; place-items: center;
  font-size: 22px;
  color: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.cw-space-name { font-size: 14px; font-weight: 700; margin-top: 12px; }
.cw-space-desc { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.5; }

/* CINEMA-TILES */
.cw-cinema-tiles { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; gap: 10px; }
.cw-cinema-tile {
  aspect-ratio: 9/14;
  min-height: 180px;
  border-radius: calc(var(--corner) * 0.8);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.35s;
  color: #fff;
  display: flex;
  align-items: flex-end;
  padding: 14px;
  box-shadow: 0 0 calc(40px * var(--glow-mult)) var(--gB);
  background: linear-gradient(135deg, var(--A), var(--B));
}
.cw-cinema-tile:hover { transform: scale(1.02); }
.cw-cinema-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.85));
  z-index: 0;
}
.cw-tile-meta { position: relative; z-index: 1; font-size: 12px; font-weight: 700; }
.cw-tile-meta small { display: block; font-size: 9px; color: rgba(255,255,255,0.7); margin-top: 2px; font-weight: 400; }

/* BROTHERS-GRID */
.cw-brothers { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 12px; gap: 12px; }
.cw-bro {
  padding: 16px;
  border-radius: 14px;
  background: var(--glass);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
}
.cw-bro:hover { transform: translateY(-3px); background: var(--glass-strong); }
.cw-bro-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--A), var(--B));
  display: grid; place-items: center;
  font-size: 17px;
  color: #fff;
}
.cw-bro-name { font-size: 12px; font-weight: 700; margin-top: 10px; }
.cw-bro-desc { font-size: 10px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.cw-bro-num {
  position: absolute;
  top: 8px; right: 12px;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 900;
  color: rgba(255,255,255,0.07);
}

/* BUTTONS */
.cw-btn {
  padding: 10px 16px;
  border-radius: calc(var(--corner) * 0.55);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--glass);
  color: inherit;
  transition: all 0.25s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-family: 'Inter', system-ui, sans-serif;
}
.cw-btn:hover { background: var(--glass-strong); transform: translateY(-2px); }
.cw-btn.primary {
  background: linear-gradient(135deg, var(--A), var(--B));
  border: none;
  color: #fff;
  box-shadow: 0 4px 14px var(--gA);
}

/* HERO-OHANA · Mein Profile-Card */
.cw-hero-mark {
  width: 96px; height: 96px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--A), var(--B), var(--C));
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 8px 24px var(--gA);
  flex-shrink: 0;
}

/* SAFETY-PANEL */
.cw-safety-row { display: flex; flex-direction: column; gap: 7px; }
.cw-safety-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--glass-soft);
}
.cw-safety-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #0c9c5c;
  flex-shrink: 0;
}
.cw-safety-state {
  font-size: 10px;
  color: #0c9c5c;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* OHANA-CTA */
.cw-cta {
  margin-top: 8px;
  background: linear-gradient(135deg, var(--gA), var(--gB));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px;
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  text-align: center;
}
.cw-cta-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--A);
  margin-bottom: 8px;
  text-transform: uppercase;
  font-weight: 700;
}
.cw-cta-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 6px;
}
.cw-cta-title span {
  background: linear-gradient(135deg, var(--A), var(--B), var(--C));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.cw-cta-text {
  font-size: 13px;
  color: var(--muted);
  max-width: 440px;
  margin: 0 auto 16px;
  line-height: 1.6;
}

/* FOOTER mit Gradient-Text */
.cw-footer {
  margin-top: 30px;
  padding: 24px 18px;
  background: var(--glass-soft);
  border: 1px solid var(--line);
  border-radius: var(--corner);
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.05em;
}
.cw-footer strong {
  font-family: var(--font-display);
  font-size: 14px;
  background: linear-gradient(135deg, var(--A), var(--B), var(--C));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  letter-spacing: 0;
}
.cw-footer-links {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 10px;
}
.cw-footer-links a { color: var(--muted); text-decoration: none; }

/* RESPONSIVE */
@media (max-width: 1180px) {
  .cw-split-2, .cw-split-3 { grid-template-columns: 1fr; }
  .cw-split-4 { grid-template-columns: repeat(2, 1fr); }
  .cw-spaces-grid, .cw-cinema-tiles { grid-template-columns: repeat(2, 1fr); }
  .cw-brothers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .cw-topbar { flex-direction: column; align-items: stretch; }
  .cw-page-switch { order: 5; flex-basis: 100%; }
  .cw-quote-text { font-size: 14px; }
  .cw-spaces-grid, .cw-cinema-tiles { grid-template-columns: 1fr; }
}