/* =====================================================================
   GRAY-OS  ·  Gray Contrast house design system  ·  v4 "opal" (2026-10-24)
   v4 = v3 "prism" + the OPAL brand layer at the end of this file: brand
   colours from the covers (More Love = opal crystal, Alexanderplatz = obsidian),
   the website video light (violet curtain, blue neon), materials obsidian /
   opal / night glass, wordmark, dictation orb, social artboards.
   Opt in with class "gc-opal" (Schau: body.gc-base.gc-prism.gc-opal).
   ---------------------------------------------------------------------
   (v3 header follows)
   Pitch black + Leitfarben (Circuit-Tracks-Pads) + liquid glass + 3D light
   + chromatic aberration as a sparing optical effect.

   Sources, merged:  graycontrast.com (glass recipe, liquid drop, CA fringes,
   Orbitron wordmark) · VHS-Hefte 1+2 + Folien (pad palette, chapter colours,
   mono labels, print mapping) · audition-ui (measured colour distances, Calm
   tool register) · gray-os v2 "eclipse" (tokens, dense ledger, icons).

   Contract: DESIGN-LANGUAGE.md   Specimen: showcase-v3.html
   REGISTERS:  body.gc-prism (Schau)  |  body.gc-calm (Werkzeug)  |  @media print (Papier)
   LEITFARBE:  data-lf="cyan|mint|peri|lav|apricot|rose|accent"  or  .gc-chapters > section

   gctheme-SAFE: gctheme rewrites only the four --gc-accent* hex values and
   their rgba(r,g,b,a) triples. Leitfarben + live are written as rgb(r g b)
   on purpose, so a retheme never recolours them.
   v2 token + class names are all still here (drop-in upgrade).
   ===================================================================== */

:root {
  color-scheme: dark;

  /* == Canvas: PITCH BLACK (depth comes from light, never from grey) == */
  --gc-black:      #000000;
  --gc-bg:         #000000;
  --gc-bg-2:       #050507;
  --gc-surface:    #0a0b0d;   /* solid panel (Calm, fallbacks) */
  --gc-surface-2:  #111316;
  --gc-surface-3:  #181a1f;

  /* == Hairlines == */
  --gc-line:       rgba(255,255,255,0.08);
  --gc-line-2:     rgba(255,255,255,0.13);
  --gc-line-strong:rgba(255,255,255,0.20);
  --gc-edge-faint: #41464e;   /* strokes/lines ONLY - never text (2.2:1) */

  /* == Text (measured on #000; every text token >= 4.5:1) == */
  --gc-text:       #f4f5f7;   /* 19.3:1 */
  --gc-text-2:     #a2a8b2;   /*  8.8:1 */
  --gc-text-3:     #8a9099;   /*  6.5:1  (v2 #6a7078 = 4.2:1, too weak for 10px mono) */
  --gc-text-faint: #737982;   /*  4.8:1  (v2 #41464e = 2.2:1, now --gc-edge-faint) */

  /* == LEITFARBEN = Circuit-Tracks pad palette (measured from the device photo).
        One colour = one area / chapter / category ("wo bin ich").
        apricot + rose are tuned: the raw pads peach #edcabd / rose #e6beba were
        only dE2000 5.2 apart (= same colour at 10px). Now min pair dE 18.0. == */
  --gc-lf-cyan:    rgb(133 248 246);  /* hex 85f8f6 pad (= v3 default accent) */
  --gc-lf-mint:    rgb(220 241 198);  /* #dcf1c6  pad                          */
  --gc-lf-peri:    rgb(162 197 243);  /* #a2c5f3  pad                          */
  --gc-lf-lav:     rgb(222 209 237);  /* #ded1ed  pad                          */
  --gc-lf-apricot: rgb(252 183 138);  /* #fcb78a  pad peach, tuned (was #edcabd) */
  --gc-lf-rose:    rgb(232 165 173);  /* #e8a5ad  pad rose, tuned (was #e6beba)  */
  --gc-on-lf:      #0b0d10;           /* text on a lit pad / lf fill (>= 9.7:1) */

  /* == LAMPEN = the saturated LED core of each pad. Used ONLY for emitted light
        (glow, stage light, pad halo), never for text or fills. Pastel on black
        fades to grey/brown; the lamp colour stays a colour when dimmed. == */
  --gc-lamp-cyan:    rgb(2 227 225);    /* hex 02e3e1 */
  --gc-lamp-mint:    rgb(133 193 82);   /* hex 85c152 */
  --gc-lamp-peri:    rgb(54 166 253);   /* hex 36a6fd */
  --gc-lamp-lav:     rgb(189 144 254);  /* hex bd90fe */
  --gc-lamp-apricot: rgb(253 151 79);   /* hex fd974f */
  --gc-lamp-rose:    rgb(253 116 141);  /* hex fd748d */

  /* == PRIMARY ACCENT = the default Leitfarbe (links, focus, primary action).
        gctheme-managed: `gctheme '#hex'` swaps it; the Leitfarben stay. == */
  --gc-accent:      #85f8f6;
  --gc-accent-hi:   #b7fbfa;
  --gc-accent-deep: #4d908f;
  --gc-on-accent:   #0d1919;
  --gc-accent-dim:  rgba(133,248,246,0.09);
  --gc-accent-line: rgba(133,248,246,0.42);

  /* == LIVE = v2 Seacat orange, ONE job only: on air / recording / live now == */
  --gc-live:        rgb(255 115 0);   /* #ff7300 */

  /* == Cool counter-accent + status (desaturated; neg from audition-ui) == */
  --gc-cool:        #6e8ca8;
  --gc-cool-dim:    rgba(110,140,168,0.16);
  --gc-pos:         #8bb38a;   /* sage  */
  --gc-warn:        #cbab6a;   /* brass */
  --gc-neg:         #f2557f;   /* error: dE 17.6 to rose (v2 clay #c08274 sat on rose) */
  --gc-info:        #8aa0b4;   /* steel */
  --gc-gold:        var(--gc-warn);   /* star / award / artist-pack gold */

  /* == Current Leitfarbe of an area (set via data-lf). Defaults to accent. == */
  --gc-lf:          var(--gc-accent);
  --gc-lamp:        var(--gc-accent);

  /* == Type == */
  --gc-font:    'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gc-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --gc-display: 'Orbitron', 'Space Grotesk', sans-serif;   /* PRISM display + wordmark only */
  --gc-step--2: 0.68rem;
  --gc-step--1: 0.78rem;  --gc-step-0: 0.94rem;  --gc-step-1: 1.18rem;  --gc-step-2: 1.6rem;
  --gc-step-3:  clamp(2rem,4vw,3rem);
  --gc-step-4:  clamp(2.8rem,7vw,5.5rem);
  --gc-step-5:  clamp(3.2rem,11vw,8.5rem);
  --gc-track-tight:-0.01em; --gc-track-wide:0.16em; --gc-track-xwide:0.3em; --gc-track-display:-0.02em;

  /* == Space == */
  --gc-1:4px; --gc-2:8px; --gc-3:12px; --gc-4:16px; --gc-5:24px; --gc-6:36px; --gc-7:56px; --gc-8:88px;

  /* == Radius == */
  --gc-r:       6px;
  --gc-r-2:     10px;
  --gc-r-pad:   8px;     /* pads, keys */
  --gc-r-glass: 18px;
  --gc-r-pill:  980px;

  /* == Motion == */
  --gc-ease:    cubic-bezier(0.22,1,0.36,1);
  --gc-ease-out:cubic-bezier(0.16,1,0.3,1);      /* graycontrast.com */
  --gc-spring:  cubic-bezier(0.34,1.56,0.64,1);  /* liquid drop overshoot */
  --gc-fast:140ms; --gc-mid:300ms; --gc-slow:620ms;

  /* == Film grain (kills gradient banding; sits under content, never over text) == */
  --gc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =====================================================================
   REGISTER PRISM (Schau) - the full optics. Also the :root default, so
   v2 projects keep their glass. Nestable: a .gc-prism island inside Calm.
   ===================================================================== */
:root, .gc-prism {
  --gc-glow-k: 1;   /* multiplier for every Leitfarben glow */
  --gc-tint-k: 1;   /* multiplier for the Leitfarben tint in glass */

  /* glow (accent, v2 names) */
  --gc-glow:        0 0 24px rgba(133,248,246,0.30);
  --gc-glow-strong: 0 0 40px rgba(133,248,246,0.40), 0 0 12px rgba(183,251,250,0.45);
  --gc-glow-soft:   0 0 18px rgba(133,248,246,0.18);
  --gc-text-glow:   0 0 18px rgba(133,248,246,0.40);
  --gc-cool-glow:   0 0 22px rgba(110,140,168,0.35);

  /* gradients = monochrome light only (never multi-hue) */
  --gc-grad-corona:  radial-gradient(120% 140% at 50% 120%, rgba(133,248,246,0.16) 0%, rgba(77,144,143,0.08) 30%, transparent 62%);
  --gc-grad-eclipse: linear-gradient(180deg, var(--gc-cool) 0%, #2a3744 38%, var(--gc-accent-deep) 82%, var(--gc-accent) 100%); /* v2, deprecated */
  --gc-grad-accent:  linear-gradient(135deg, var(--gc-accent-hi) 0%, var(--gc-accent) 100%);
  --gc-grad-sheen:   radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,0.06) 0%, transparent 55%);

  /* LIQUID GLASS v3 = graycontrast.com recipe (saturate 180 + brightness 1.08)
     + specular rim (light from top-left) + caustic sheen + Leitfarben tint */
  --gc-glass-bg:            rgba(255,255,255,0.05);
  --gc-glass-bg-2:          rgba(255,255,255,0.085);
  --gc-glass-border:        rgba(255,255,255,0.11);
  --gc-glass-filter:        blur(16px) saturate(180%) brightness(1.08);
  --gc-glass-filter-strong: blur(36px) saturate(165%) brightness(1.04);
  --gc-glass-hi:            inset 0 1px 0 rgba(255,255,255,0.14);
  --gc-glass-lo:            inset 0 -1px 0 rgba(0,0,0,0.42);
  --gc-glass-rim:           linear-gradient(135deg, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0.10) 26%, rgba(255,255,255,0.02) 55%, rgba(255,255,255,0.06) 78%, rgba(255,255,255,0.18) 100%);
  --gc-glass-sheen:         radial-gradient(130% 95% at 12% -25%, rgba(255,255,255,0.11) 0%, transparent 50%);
  --gc-glass-float-bg:      rgba(16,18,22,0.52);

  /* DEPTH (3D) */
  --gc-persp:  1100px;
  --gc-z1:     0 1px 0 rgba(255,255,255,0.03), 0 10px 26px -16px rgba(0,0,0,0.9);
  --gc-z2:     0 18px 50px -28px rgba(0,0,0,0.92), 0 6px 16px -10px rgba(0,0,0,0.7);
  --gc-z3:     0 34px 80px -34px rgba(0,0,0,0.98), 0 12px 28px -14px rgba(0,0,0,0.8);
  --gc-shadow:    var(--gc-z2);   /* v2 name */
  --gc-shadow-hi: var(--gc-z3);   /* v2 name */
  --gc-tilt-max:  7deg;
  --gc-lift:      -4px;

  /* CHROMATIC ABERRATION - an optical edge effect, not a colour scheme */
  --gc-ca:      1.2px;   /* static split (hero type, liquid drop) */
  --gc-ca-move: 3px;     /* during motion / hover */
  --gc-ca-warm: rgba(255,64,120,0.60);
  --gc-ca-cool: rgba(56,176,255,0.60);
  --gc-ca-halo: -3px 0 12px rgba(255,80,120,0.14), 3px 0 12px rgba(80,140,255,0.14), 0 -2px 10px rgba(120,255,200,0.06);

  --gc-display-font: var(--gc-display);
}

/* =====================================================================
   REGISTER CALM (Werkzeug) - same meaning, muted optics. Leitfarben stay
   (they carry the information), glass/CA/tilt/glow/atmosphere go.
   Floating layers (menu, sheet, toast, sticky bar) keep a light frost.
   ===================================================================== */
.gc-calm {
  --gc-glow-k: 0;
  --gc-tint-k: 0;
  --gc-glow:        0 0 0 transparent;
  --gc-glow-strong: 0 0 0 transparent;
  --gc-glow-soft:   0 0 0 transparent;
  --gc-text-glow:   0 0 0 transparent;
  --gc-cool-glow:   0 0 0 transparent;
  --gc-grad-corona: none;
  --gc-grad-sheen:  none;

  --gc-glass-bg:            var(--gc-surface);
  --gc-glass-bg-2:          var(--gc-surface-2);
  --gc-glass-border:        var(--gc-line-2);
  --gc-glass-filter:        none;
  --gc-glass-filter-strong: blur(14px) saturate(120%);
  --gc-glass-hi:            inset 0 1px 0 rgba(255,255,255,0.03);
  --gc-glass-lo:            0 0 0 transparent;
  --gc-glass-rim:           none;
  --gc-glass-sheen:         none;
  --gc-glass-float-bg:      rgba(10,11,13,0.90);

  --gc-z1: 0 1px 0 rgba(255,255,255,0.02);
  --gc-z2: 0 12px 30px -20px rgba(0,0,0,0.9);
  --gc-z3: 0 22px 50px -24px rgba(0,0,0,0.95);
  --gc-tilt-max: 0deg;
  --gc-lift: 0px;

  --gc-ca: 0px; --gc-ca-move: 0px;
  --gc-ca-halo: 0 0 0 transparent;

  --gc-r-glass: var(--gc-r-2);
  --gc-display-font: var(--gc-font);   /* no Orbitron in tools */
}

/* == Derived Leitfarben tokens. Recomputed wherever --gc-lf can change
      (custom properties inherit their COMPUTED value, so they must be re-declared). == */
:root, .gc-prism, .gc-calm, .gc-opal, [data-lf], .gc-chapters > section, .gc-padstrip > *, [style*="--gc-lf"], [style*="--gc-lamp"] {
  --gc-lf-dim:       color-mix(in srgb, var(--gc-lf) 10%, transparent);
  --gc-lf-soft:      color-mix(in srgb, var(--gc-lf) 22%, transparent);
  --gc-lf-line:      color-mix(in srgb, var(--gc-lf) 46%, transparent);
  --gc-lf-glow:      0 0 22px color-mix(in srgb, var(--gc-lamp) calc(40% * var(--gc-glow-k)), transparent);
  --gc-lf-underglow: 0 24px 46px -26px color-mix(in srgb, var(--gc-lamp) calc(60% * var(--gc-glow-k)), transparent);
  --gc-glass-tint:   color-mix(in srgb, var(--gc-lf) calc(6% * var(--gc-tint-k)), transparent);
  --gc-stage-light:
    radial-gradient(70% 58% at 50% 115%, color-mix(in srgb, var(--gc-lamp) calc(20% * var(--gc-glow-k)), transparent) 0%, color-mix(in srgb, var(--gc-lamp) calc(5% * var(--gc-glow-k)), transparent) 42%, transparent 72%),
    radial-gradient(55% 42% at 8% -6%, color-mix(in srgb, var(--gc-cool) calc(24% * var(--gc-glow-k)), transparent) 0%, transparent 62%);
}
[data-lf="cyan"]    { --gc-lf: var(--gc-lf-cyan);    --gc-lamp: var(--gc-lamp-cyan); }
[data-lf="mint"]    { --gc-lf: var(--gc-lf-mint);    --gc-lamp: var(--gc-lamp-mint); }
[data-lf="peri"]    { --gc-lf: var(--gc-lf-peri);    --gc-lamp: var(--gc-lamp-peri); }
[data-lf="lav"]     { --gc-lf: var(--gc-lf-lav);     --gc-lamp: var(--gc-lamp-lav); }
[data-lf="apricot"] { --gc-lf: var(--gc-lf-apricot); --gc-lamp: var(--gc-lamp-apricot); }
[data-lf="rose"]    { --gc-lf: var(--gc-lf-rose);    --gc-lamp: var(--gc-lamp-rose); }
[data-lf="accent"]  { --gc-lf: var(--gc-accent);     --gc-lamp: var(--gc-accent); }
/* v4 brand colours usable as areas too (Opal layer, see end of file) */
[data-lf="violet"]  { --gc-lf: var(--gc-brand-violet); --gc-lamp: var(--gc-brand-violet-lamp); }
[data-lf="blue"]    { --gc-lf: var(--gc-brand-blue);   --gc-lamp: var(--gc-brand-blue-lamp); }
[data-lf="spark"]   { --gc-lf: var(--gc-brand-spark);  --gc-lamp: var(--gc-brand-spark-lamp); }

/* chapters cycle like the Hefte: 1 cyan, 2 mint, 3 peri, 4 lav, 5 apricot, 6 rose */
.gc-chapters > section:nth-of-type(6n+1), .gc-padstrip > :nth-child(6n+1) { --gc-lf: var(--gc-lf-cyan);    --gc-lamp: var(--gc-lamp-cyan); }
.gc-chapters > section:nth-of-type(6n+2), .gc-padstrip > :nth-child(6n+2) { --gc-lf: var(--gc-lf-mint);    --gc-lamp: var(--gc-lamp-mint); }
.gc-chapters > section:nth-of-type(6n+3), .gc-padstrip > :nth-child(6n+3) { --gc-lf: var(--gc-lf-peri);    --gc-lamp: var(--gc-lamp-peri); }
.gc-chapters > section:nth-of-type(6n+4), .gc-padstrip > :nth-child(6n+4) { --gc-lf: var(--gc-lf-lav);     --gc-lamp: var(--gc-lamp-lav); }
.gc-chapters > section:nth-of-type(6n+5), .gc-padstrip > :nth-child(6n+5) { --gc-lf: var(--gc-lf-apricot); --gc-lamp: var(--gc-lamp-apricot); }
.gc-chapters > section:nth-of-type(6n+6), .gc-padstrip > :nth-child(6n+6) { --gc-lf: var(--gc-lf-rose);    --gc-lamp: var(--gc-lamp-rose); }

/* =====================================================================
   BASE
   ===================================================================== */
.gc-reset *, .gc-reset *::before, .gc-reset *::after { box-sizing: border-box; }
.gc-base {
  background: var(--gc-bg); color: var(--gc-text);
  font-family: var(--gc-font); line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.gc-base :focus-visible { outline: 2px solid var(--gc-lf); outline-offset: 3px; border-radius: 4px; }
.gc-base ::selection { background: var(--gc-lf-soft); color: var(--gc-text); }
.gc-link, .gc-base a:not([class]) { color: var(--gc-lf); text-decoration: none; border-bottom: 1px solid var(--gc-lf-line); transition: border-color var(--gc-fast) var(--gc-ease); }
.gc-link:hover, .gc-base a:not([class]):hover { border-bottom-color: var(--gc-lf); }

/* ATMOSPHERE (PRISM): stage light in the current Leitfarbe from below + cool
   top rim. One light, black stays dominant (>= 70 % of the canvas is #000).
   NOT a blob mesh. Glass needs light behind it; on flat #000 it is a grey slab.
   --gc-grain is for photo/light areas only, never on plain black. */
.gc-atmosphere { background: var(--gc-bg); position: relative; }
.gc-atmosphere::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--gc-stage-light), var(--gc-grad-sheen);
}
.gc-calm.gc-atmosphere::before, .gc-calm .gc-atmosphere::before { display: none; }

/* local light for one section (behind its content), PRISM only */
.gc-light { position: relative; isolation: isolate; }
.gc-light::before {
  content: ''; position: absolute; inset: -14% 0 -6%; z-index: -1; pointer-events: none;
  background: radial-gradient(72% 64% at 50% 58%, color-mix(in srgb, var(--gc-lamp) calc(22% * var(--gc-glow-k)), transparent) 0%, color-mix(in srgb, var(--gc-lamp) calc(7% * var(--gc-glow-k)), transparent) 48%, transparent 74%);
}

/* image veil (Folien "Bauchbinde"): text over photos stays legible */
.gc-veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.62) 24%, rgba(0,0,0,0.18) 50%, transparent 66%); }
.gc-veil-top { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 14%, transparent 32%); }

/* =====================================================================
   TYPE PRIMITIVES
   ===================================================================== */
.gc-eyebrow { font-family: var(--gc-mono); font-size: var(--gc-step--1); letter-spacing: var(--gc-track-wide); text-transform: uppercase; color: var(--gc-text-3); }
.gc-eyebrow b, .gc-eyebrow strong { color: var(--gc-lf); font-weight: 500; }
.gc-num { font-family: var(--gc-mono); font-weight: 700; color: var(--gc-lf); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.gc-head { display: flex; align-items: baseline; gap: var(--gc-3); padding-bottom: var(--gc-2); border-bottom: 1px solid color-mix(in srgb, var(--gc-lf) 38%, transparent); }
.gc-head .gc-num { font-size: 0.62em; }
.gc-lead { color: var(--gc-text-2); font-size: var(--gc-step-1); line-height: 1.5; max-width: 60ch; }
.gc-rule { height: 1px; border: 0; background: var(--gc-line); }

/* DISPLAY (PRISM): Orbitron wordmark type. In Calm it falls back to Grotesk. */
.gc-display { font-family: var(--gc-display-font); font-weight: 800; letter-spacing: var(--gc-track-display); line-height: 0.9; text-transform: uppercase; }
/* outline type, the graycontrast.com "CONTRAST" treatment */
.gc-calm .gc-display { text-transform: none; letter-spacing: -0.02em; font-weight: 700; }
.gc-outline { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.92); text-shadow: 0 0 18px rgba(255,255,255,calc(0.10 * var(--gc-glow-k))); }

/* CHROMATIC ABERRATION on filled type: RGB split as fringes */
.gc-ca { text-shadow: calc(var(--gc-ca) * -1) 0 0 var(--gc-ca-warm), var(--gc-ca) 0 0 var(--gc-ca-cool); transition: text-shadow var(--gc-mid) var(--gc-ease-out); }
.gc-ca:hover, .gc-ca.is-moving { --gc-ca: var(--gc-ca-move); }
/* ... on outline type: two offset stroke copies. Needs data-text="SAME TEXT". */
.gc-ca-outline { position: relative; display: inline-block; }
.gc-ca-outline::before, .gc-ca-outline::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  color: transparent; mix-blend-mode: screen; transition: transform var(--gc-mid) var(--gc-ease-out);
}
.gc-ca-outline::before { -webkit-text-stroke: 1.5px var(--gc-ca-warm); transform: translateX(calc(var(--gc-ca) * -1)); }
.gc-ca-outline::after  { -webkit-text-stroke: 1.5px var(--gc-ca-cool); transform: translateX(var(--gc-ca)); }
.gc-ca-outline:hover, .gc-ca-outline.is-moving { --gc-ca: var(--gc-ca-move); }

/* =====================================================================
   GLASS
   ===================================================================== */
/* content glass (panels, cards). PRISM: liquid. CALM: flat surface + hairline. */
.gc-glass {
  position: relative;
  background: var(--gc-glass-sheen), linear-gradient(var(--gc-glass-tint), var(--gc-glass-tint)), var(--gc-glass-bg);
  -webkit-backdrop-filter: var(--gc-glass-filter);
  backdrop-filter: var(--gc-glass-filter);
  border: 1px solid var(--gc-glass-border);
  border-radius: var(--gc-r-glass);
  box-shadow: var(--gc-glass-hi), var(--gc-glass-lo), var(--gc-shadow);
}
/* specular rim: 1px ring, bright top-left, dim middle, soft bottom-right catch */
.gc-glass::before, .gc-glass-float::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--gc-glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
a.gc-glass:hover, button.gc-glass:hover, .gc-glass.is-link:hover { --gc-glass-bg: var(--gc-glass-bg-2); border-color: var(--gc-line-strong); }

/* floating chrome glass: nav, menus, sheets, toasts, sticky bars. Stays frosted in Calm. */
.gc-glass-float {
  position: relative;
  background: var(--gc-glass-sheen), var(--gc-glass-float-bg);
  -webkit-backdrop-filter: var(--gc-glass-filter-strong);
  backdrop-filter: var(--gc-glass-filter-strong);
  border: 1px solid var(--gc-glass-border);
  border-radius: var(--gc-r-glass);
  box-shadow: var(--gc-glass-hi), var(--gc-glass-lo), var(--gc-z3);
}
.gc-glass-pill { border-radius: var(--gc-r-pill); padding: 5px; display: inline-flex; align-items: center; gap: 2px; }

/* LIQUID DROP = the active indicator (graycontrast.com nav selector): silver
   liquid glass, tinted by the Leitfarbe, CA fringe at the edge, stronger in motion. */
.gc-drop {
  position: relative; isolation: isolate; border-radius: var(--gc-r-pill);
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0.22) 22%, rgba(255,255,255,0.07) 55%, rgba(255,255,255,0.15) 100%),
    linear-gradient(var(--gc-lf-soft), var(--gc-lf-soft));
  background-size: 220% 220%, auto;
  -webkit-backdrop-filter: blur(22px) saturate(220%) brightness(1.05);
  backdrop-filter: blur(22px) saturate(220%) brightness(1.05);
  border: 1px solid rgba(255,255,255,0.36);
  box-shadow:
    inset 0 1px 3px rgba(255,255,255,0.60), inset 0 -3px 10px rgba(255,255,255,0.10), inset 0 0 14px rgba(255,255,255,0.18),
    0 0 16px rgba(255,255,255,0.10), var(--gc-ca-halo), var(--gc-lf-glow);
  animation: gc-liquid 7s ease-in-out infinite;
}
.gc-drop::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: -1;
  background:
    linear-gradient(90deg, rgba(255,80,80,0.14) 0%, transparent 30%, transparent 70%, rgba(80,80,255,0.14) 100%),
    linear-gradient(180deg, rgba(80,255,160,0.08) 0%, transparent 50%, rgba(255,80,255,0.08) 100%);
  mix-blend-mode: overlay; opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.gc-drop.is-moving::after { opacity: 1; transform: translateX(var(--gc-ca-move)) skewX(-1deg); }
@keyframes gc-liquid { 0%,100% { background-position: 0% 50%, 0 0; } 50% { background-position: 100% 50%, 0 0; } }
.gc-calm .gc-drop {
  color: var(--gc-lf); text-shadow: none; animation: none;
  background: var(--gc-lf-dim); border-color: var(--gc-lf-line);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
.gc-calm .gc-drop::after { display: none; }

/* PRISM RIM: slow spectral ring in pad colours. ONE featured element per view,
   or hover only. Never in Calm. */
@property --gc-rim-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.gc-prism-rim { position: relative; }
.gc-prism-rim::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--gc-rim-angle), transparent 0% 6%, var(--gc-lf-cyan) 14%, transparent 24%, var(--gc-lf-peri) 38%, transparent 48%, var(--gc-lf-rose) 60%, transparent 70%, var(--gc-lf-apricot) 82%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.6s ease;
  animation: gc-rim 7s linear infinite;
}
.gc-prism-rim:hover::after, .gc-prism-rim.is-featured::after { opacity: 0.85; }
@keyframes gc-rim { to { --gc-rim-angle: 360deg; } }
.gc-calm .gc-prism-rim::after { display: none; }

/* =====================================================================
   3D / DEPTH / LIGHT
   ===================================================================== */
.gc-stage { perspective: var(--gc-persp); perspective-origin: 50% 35%; }
/* pointer tilt: JS sets --rx/--ry (deg) + --mx/--my (%) - see DESIGN-LANGUAGE.md.
   Without JS it just sits flat. Clamp by --gc-tilt-max (0 in Calm). */
.gc-tilt {
  --rx: 0deg; --ry: 0deg; --mx: 22%; --my: 0%;
  position: relative; transform-style: preserve-3d;
  transform: rotateX(clamp(calc(var(--gc-tilt-max) * -1), var(--rx), var(--gc-tilt-max))) rotateY(clamp(calc(var(--gc-tilt-max) * -1), var(--ry), var(--gc-tilt-max)));
  transition: transform var(--gc-slow) var(--gc-ease-out);
}
.gc-tilt.is-tilting { transition: transform 90ms linear; }
/* moving specular highlight: light reflecting on the glass surface */
.gc-spec { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(38% 30% at var(--mx, 22%) var(--my, 0%), rgba(255,255,255,calc(0.10 * var(--gc-glow-k))) 0%, transparent 70%);
  mix-blend-mode: screen; opacity: 0; transition: opacity var(--gc-mid) var(--gc-ease); }
.gc-tilt:hover > .gc-spec, .gc-tilt.is-tilting > .gc-spec, .gc-spec.is-lit { opacity: 1; }
/* depth layers inside a .gc-tilt: translateZ, parallax against the plate */
.gc-z-near { transform: translateZ(38px); }
.gc-z-mid  { transform: translateZ(18px); }
.gc-z-far  { transform: translateZ(-24px); }
.gc-calm .gc-z-near, .gc-calm .gc-z-mid, .gc-calm .gc-z-far { transform: none; }
/* elevation scale */
.gc-elev-1 { box-shadow: var(--gc-z1); }
.gc-elev-2 { box-shadow: var(--gc-z2); }
.gc-elev-3 { box-shadow: var(--gc-z3); }
.gc-lift { transition: transform var(--gc-mid) var(--gc-ease-out), box-shadow var(--gc-mid) var(--gc-ease-out); }
.gc-lift:hover { transform: translateY(var(--gc-lift)); box-shadow: var(--gc-z3), var(--gc-lf-underglow); }

/* PAD = a Circuit-Tracks pad: LED under silicone. Small surfaces only (<= 72px).
   Lit = filled Leitfarbe (the ONE place where fill is allowed). */
.gc-pad {
  aspect-ratio: 1; min-width: 28px; border-radius: var(--gc-r-pad); cursor: pointer;
  border: 1px solid rgba(255,255,255,0.06);
  background: radial-gradient(85% 85% at 50% 40%, color-mix(in srgb, var(--gc-lf) 14%, #16181c) 0%, #0f1013 78%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 -2px 6px rgba(0,0,0,0.55), 0 2px 0 rgba(0,0,0,0.65), 0 7px 14px -8px rgba(0,0,0,0.9);
  transition: background var(--gc-fast) var(--gc-ease), box-shadow var(--gc-fast) var(--gc-ease), transform 90ms var(--gc-ease);
}
.gc-pad.is-on, .gc-pad[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--gc-lf) 55%, white);
  background: radial-gradient(78% 78% at 50% 38%, color-mix(in srgb, var(--gc-lf) 72%, white) 0%, var(--gc-lf) 46%, color-mix(in srgb, var(--gc-lamp) 78%, black) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -3px 8px color-mix(in srgb, var(--gc-lamp) 45%, black),
    0 0 18px color-mix(in srgb, var(--gc-lamp) calc(50% * var(--gc-glow-k)), transparent), 0 0 44px color-mix(in srgb, var(--gc-lamp) calc(22% * var(--gc-glow-k)), transparent);
}
.gc-pad:active { transform: translateY(1px) scale(0.985); }
.gc-calm .gc-pad.is-on, .gc-calm .gc-pad[aria-pressed="true"] { background: var(--gc-lf); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }

/* PADSTRIP = the Heft running-header strip: "wo bin ich". Children auto-cycle
   the six Leitfarben; .is-on = current chapter. */
.gc-padstrip { display: flex; gap: 3px; }
.gc-padstrip > * { flex: 1; height: 4px; border-radius: 1px; background: color-mix(in srgb, var(--gc-lf) 34%, transparent); transition: background var(--gc-mid) var(--gc-ease); }
.gc-padstrip > .is-on { background: var(--gc-lf); box-shadow: var(--gc-lf-glow); }

/* LED = small lit marker (area indicator on a card, list, tab) */
.gc-led { display: inline-block; width: 18px; height: 4px; border-radius: 3px; vertical-align: middle;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gc-lf) 70%, white), var(--gc-lf));
  box-shadow: 0 0 2px var(--gc-lf), 0 0 10px color-mix(in srgb, var(--gc-lamp) calc(75% * var(--gc-glow-k)), transparent), 0 0 22px color-mix(in srgb, var(--gc-lamp) calc(32% * var(--gc-glow-k)), transparent); }
.gc-led.is-dot { width: 7px; height: 7px; border-radius: 50%; }

/* =====================================================================
   COMPONENTS
   ===================================================================== */
.gc-panel { background: var(--gc-surface); border: 1px solid var(--gc-line); border-radius: var(--gc-r-2); box-shadow: var(--gc-shadow); }
.gc-card { padding: var(--gc-5); }
.gc-callout { padding: 12px 16px; background: var(--gc-surface); border: 1px solid var(--gc-line-2); border-left: 2px solid var(--gc-lf); border-radius: 4px; }
.gc-callout .gc-eyebrow { display: block; margin-bottom: 4px; }

/* buttons */
.gc-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--gc-mono); font-size: var(--gc-step--1); letter-spacing: var(--gc-track-wide); text-transform: uppercase;
  padding: 10px 18px; border-radius: var(--gc-r); border: 1px solid var(--gc-line-2);
  background: var(--gc-glass-bg); color: var(--gc-text); cursor: pointer; text-decoration: none;
  -webkit-backdrop-filter: var(--gc-glass-filter); backdrop-filter: var(--gc-glass-filter);
  box-shadow: var(--gc-glass-hi);
  transition: border-color var(--gc-fast) var(--gc-ease), background var(--gc-fast) var(--gc-ease), box-shadow var(--gc-fast) var(--gc-ease), color var(--gc-fast) var(--gc-ease), transform var(--gc-fast) var(--gc-ease);
}
.gc-btn:hover { border-color: var(--gc-line-strong); background: var(--gc-glass-bg-2); }
.gc-btn:active { transform: translateY(1px); }
/* primary = Leitfarbe outline; hover = the pad lights up (fill) */
.gc-btn-primary, .gc-btn-accent { border-color: var(--gc-lf-line); color: var(--gc-lf); box-shadow: var(--gc-glass-hi), 0 0 18px color-mix(in srgb, var(--gc-lamp) calc(18% * var(--gc-glow-k)), transparent); }
.gc-btn-primary:hover, .gc-btn-accent:hover { background: var(--gc-lf); color: var(--gc-on-lf); border-color: var(--gc-lf); box-shadow: var(--gc-glass-hi), var(--gc-lf-glow), var(--gc-ca-halo); }
.gc-btn-live { border-color: color-mix(in srgb, var(--gc-live) 55%, transparent); color: var(--gc-live); }
.gc-btn-live:hover { background: color-mix(in srgb, var(--gc-live) 14%, transparent); border-color: var(--gc-live); }
.gc-btn-ghost { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; color: var(--gc-text-2); }
.gc-btn-ghost:hover { color: var(--gc-text); background: rgba(255,255,255,0.05); border-color: var(--gc-line); }

/* chips (filters, lists) - active = Leitfarbe outline + dim fill, never solid */
.gc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--gc-mono); font-size: var(--gc-step--2); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--gc-r-pill); border: 1px solid var(--gc-line-2);
  color: var(--gc-text-3); background: transparent; cursor: pointer;
  transition: color var(--gc-fast) var(--gc-ease), border-color var(--gc-fast) var(--gc-ease), background var(--gc-fast) var(--gc-ease);
}
.gc-chip .gc-led.is-dot { width: 6px; height: 6px; box-shadow: none; }
.gc-chip:hover { color: var(--gc-text); border-color: var(--gc-lf-line); }
.gc-chip.is-on, .gc-chip[aria-pressed="true"] { color: var(--gc-lf); border-color: var(--gc-lf); background: var(--gc-lf-dim); }

/* segmented control: glass pill + liquid drop behind the active item */
.gc-seg { position: relative; }
.gc-seg > button, .gc-seg > a {
  position: relative; z-index: 1; border: 0; background: transparent; cursor: pointer; text-decoration: none;
  font-family: var(--gc-mono); font-size: var(--gc-step--1); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gc-text-2); padding: 8px 16px; border-radius: var(--gc-r-pill);
  transition: color var(--gc-mid) var(--gc-ease-out);
}
.gc-seg > button:hover, .gc-seg > a:hover { color: var(--gc-text); }
.gc-seg > [aria-current="true"], .gc-seg > [aria-pressed="true"] { color: #fff; }
.gc-seg > .gc-drop { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; padding: 0;
  transition: left 0.42s var(--gc-spring), width 0.42s var(--gc-spring); }
.gc-calm .gc-seg > [aria-current="true"], .gc-calm .gc-seg > [aria-pressed="true"] { color: var(--gc-lf); }

/* form fields */
.gc-field {
  width: 100%; font: inherit; font-size: var(--gc-step-0); color: var(--gc-text);
  background: rgba(255,255,255,0.03); border: 1px solid var(--gc-line-2); border-radius: var(--gc-r);
  padding: 10px 12px; outline: none; transition: border-color var(--gc-fast) var(--gc-ease), box-shadow var(--gc-fast) var(--gc-ease);
}
.gc-field::placeholder { color: var(--gc-text-faint); }
.gc-field:focus { border-color: var(--gc-lf); box-shadow: 0 0 0 3px var(--gc-lf-dim); }
.gc-switch { appearance: none; -webkit-appearance: none; width: 38px; height: 22px; border-radius: 99px; position: relative; cursor: pointer; margin: 0;
  background: rgba(255,255,255,0.06); border: 1px solid var(--gc-line-2); transition: background var(--gc-mid) var(--gc-ease), border-color var(--gc-mid) var(--gc-ease); }
.gc-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(160deg, #fff, #b9bec6); box-shadow: 0 2px 4px rgba(0,0,0,0.6); transition: transform var(--gc-mid) var(--gc-spring); }
.gc-switch:checked { background: var(--gc-lf-soft); border-color: var(--gc-lf); }
.gc-switch:checked::after { transform: translateX(16px); }

/* key cap (shortcut hints) */
.gc-kbd { display: inline-flex; min-width: 20px; height: 20px; padding: 0 5px; align-items: center; justify-content: center;
  font-family: var(--gc-mono); font-size: 10px; color: var(--gc-text-2); border: 1px solid var(--gc-line-2); border-bottom-width: 2px; border-radius: 4px; background: rgba(255,255,255,0.03); }

/* status: dot + mono label. LIVE pulses (the REC light). */
.gc-status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--gc-mono); font-size: var(--gc-step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gc-text-2); }
.gc-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.gc-status.is-pos { color: var(--gc-pos); } .gc-status.is-warn { color: var(--gc-warn); }
.gc-status.is-neg { color: var(--gc-neg); } .gc-status.is-info { color: var(--gc-info); }
.gc-status.is-live { color: var(--gc-live); }
.gc-status.is-live::before { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gc-live) 60%, transparent); animation: gc-rec 1.6s var(--gc-ease) infinite; }
@keyframes gc-rec { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gc-live) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* scroll progress (Seacat tell), now in the Leitfarbe - wire width via JS */
.gc-scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--gc-lf); box-shadow: var(--gc-lf-glow); z-index: 9999; transition: width 80ms linear; }

/* glow helpers (v2) */
.gc-glow { box-shadow: var(--gc-glow); }
.gc-accent-text { color: var(--gc-accent-hi); text-shadow: var(--gc-text-glow); }
.gc-lf-text { color: var(--gc-lf); }
.gc-cool-text { color: var(--gc-cool); }

/* =====================================================================
   DATA / DENSE - calm + compact ledger, identical in both registers
   ===================================================================== */
.gc-dense { font-family: var(--gc-mono); font-size: var(--gc-step--1); line-height: 1.45; color: var(--gc-text-2); }
.gc-dense table { width: 100%; border-collapse: collapse; }
.gc-dense th { text-align: left; font-weight: 500; letter-spacing: var(--gc-track-wide); text-transform: uppercase; font-size: 0.72rem; color: var(--gc-text-3); padding: 10px 14px; border-bottom: 1px solid var(--gc-line-2); position: sticky; top: 0; background: var(--gc-dense-head-bg, var(--gc-bg)); }
.gc-dense td { padding: 9px 14px; border-bottom: 1px solid var(--gc-line); color: var(--gc-text); }
.gc-dense tr:hover td { background: rgba(255,255,255,0.03); }
.gc-dense td:first-child, .gc-dense th:first-child { padding-left: 0; }
.gc-dense .is-key { color: var(--gc-lf); }

.gc-ledger { display: flex; flex-direction: column; }
.gc-ledger-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gc-4); padding: 12px 0; border-bottom: 1px solid var(--gc-line); }
.gc-ledger-row:last-child { border-bottom: 0; }
.gc-ledger-label { color: var(--gc-text-2); }
.gc-ledger-val { font-family: var(--gc-mono); color: var(--gc-text); font-variant-numeric: tabular-nums; }
.gc-ledger-val.is-key { color: var(--gc-lf); text-shadow: var(--gc-lf-glow); }

/* =====================================================================
   ICONS - Phosphor (vendored). NO EMOJI in chrome. Load phosphor.css first.
   ===================================================================== */
[class*="ph-"], i[class^="ph"] { line-height: 1; vertical-align: -0.125em; font-style: normal; letter-spacing: normal; }
.gc-ico { font-size: 1.1em; color: var(--gc-text-2); }
.gc-ico-accent { color: var(--gc-lf); }
.gc-ico-lg { font-size: 1.5rem; }

/* =====================================================================
   SAFETY NETS
   ===================================================================== */
/* no backdrop-filter support -> solid, legible surfaces */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, .gc-prism { --gc-glass-bg: rgba(20,22,26,0.94); --gc-glass-bg-2: rgba(28,30,35,0.96); --gc-glass-float-bg: rgba(16,18,22,0.96); }
}
/* user asked for less transparency -> Calm surfaces, optics off */
@media (prefers-reduced-transparency: reduce) {
  :root, .gc-prism { --gc-glass-filter: none; --gc-glass-filter-strong: none; --gc-glass-bg: var(--gc-surface); --gc-glass-bg-2: var(--gc-surface-2); --gc-glass-float-bg: var(--gc-surface-2); --gc-ca: 0px; --gc-ca-move: 0px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .gc-tilt { transform: none !important; }
}

/* =====================================================================
   PAPIER (print) - the Heft mapping: white paper, Leitfarben darkened
   until readable, every optic off. Values from the VHS-Hefte.
   ===================================================================== */
@media print {
  :root, .gc-prism, .gc-calm {
    --gc-bg: #ffffff; --gc-bg-2: #ffffff; --gc-surface: #f5f6f8; --gc-surface-2: #eceef1; --gc-surface-3: #e2e5e9;
    --gc-line: rgba(0,0,0,0.14); --gc-line-2: rgba(0,0,0,0.24); --gc-line-strong: rgba(0,0,0,0.32); --gc-edge-faint: #b9bdc3;
    --gc-text: #0d0f13; --gc-text-2: #414751; --gc-text-3: #595f68; --gc-text-faint: #6b717a;
    --gc-lf-cyan: rgb(12 111 109); --gc-lf-mint: rgb(77 115 40); --gc-lf-peri: rgb(42 86 164);
    --gc-lf-lav: rgb(105 71 156); --gc-lf-apricot: rgb(169 90 53); --gc-lf-rose: rgb(157 68 76);
    --gc-lf: var(--gc-lf-cyan); --gc-on-lf: #ffffff;
    --gc-cool: rgb(61 98 133); --gc-pos: rgb(74 122 72); --gc-warn: rgb(138 100 16);
    --gc-glass-bg: var(--gc-surface); --gc-glass-bg-2: var(--gc-surface); --gc-glass-float-bg: var(--gc-surface);
    --gc-glass-filter: none; --gc-glass-filter-strong: none; --gc-glass-rim: none; --gc-glass-sheen: none;
    --gc-glass-hi: 0 0 0 transparent; --gc-glass-lo: 0 0 0 transparent;
    --gc-z1: 0 0 0 transparent; --gc-z2: 0 0 0 transparent; --gc-z3: 0 0 0 transparent;
    --gc-glow-k: 0; --gc-tint-k: 0; --gc-ca: 0px; --gc-ca-move: 0px; --gc-ca-halo: 0 0 0 transparent;
    --gc-glow: 0 0 0 transparent; --gc-glow-strong: 0 0 0 transparent; --gc-glow-soft: 0 0 0 transparent; --gc-text-glow: 0 0 0 transparent;
    --gc-display-font: var(--gc-font);
  }
  .gc-atmosphere::before, .gc-light::before, .gc-prism-rim::after, .gc-drop::after, .gc-spec { display: none !important; }
  .gc-tilt { transform: none !important; }
  html, body { background: #ffffff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* #####################################################################
   v4 "OPAL" - the Gray Contrast brand layer (2026-10-24)
   Sources (measured, see DESIGN-LANGUAGE.md "Herkunft der Farben"):
     cover More Love (opal crystal in a violet nebula)  -> violet, spark
     cover More Love Alexanderplatz (obsidian crystal, white frame, aurora)
     cover Warped (wormhole ring) + Spacetime (clock rings, magenta nebula)
     graycontrast.com background video + still (violet curtain, blue neon)
     Voice Claude overlay + Claude Sound pill (night glass rgb 16 13 30)
   Brand colours are LIGHT, not paint: big areas stay #000, colour arrives as
   light from one source, as a thin line, or on one featured object.
   Ratio per view: ~70 % black · ~20 % white light/glass/hairline ·
   ~8 % violet+blue · <= 2 % spark. Orange stays LIVE only.
   ##################################################################### */
:root {
  /* text-safe surface colour (>= 8:1 on #000)  |  lamp = emitted light only */
  /* Dorians Wahl 24.10.2026: Paeckchen "Harmonisiert" = seine Wahl (Violett C, Blau B, Magenta C) in OKLCH
     eingemessen: Schrift L .78 / C .125, Lampe L .60 / C .22, Farbtoene 268 / 293 / 318 (je 25 Grad, analog).
     Roh war: violet #baa8fe/#8a5af4, blue #99b5ff/#4b70fd, spark #d99deb/#b446d3.
     Vorher Vorschlag A: violet #a594f9/#663bdb, blue #8fb2f0/#3775cb, spark #f47f99/#e95a87. */
  --gc-brand-violet:      rgb(186 168 254);  /* #baa8fe  10:1   Live-Thumbnail violet    */
  --gc-brand-violet-lamp: rgb(138 90 244);   /* #8a5af4  stage light, saturated         */
  --gc-brand-blue:        rgb(153 181 255);  /* #99b5ff  More Love crystal blue          */
  --gc-brand-blue-lamp:   rgb(75 112 253);   /* #4b70fd  More Love facet light          */
  --gc-brand-spark:       rgb(217 157 235);  /* #d99deb  hair-light magenta (rim light)  */
  --gc-brand-spark-lamp:  rgb(180 70 211);   /* #b446d3                                 */
  --gc-brand-night:       rgb(21 18 64);     /* #151240  depth of light falloff, never a page bg */
  --gc-brand-nightglass:  rgb(16 13 30);     /* Voice Claude / Claude Sound glass tint  */
  --gc-on-brand:          #0e0b1f;           /* text on a violet fill (pads only)       */

  /* opal = the iridescent film of the More Love crystal (one object per view) */
  --gc-opal-film: conic-gradient(from 210deg at 68% 32%,
      color-mix(in srgb, var(--gc-brand-violet-lamp) 34%, transparent) 0deg,
      color-mix(in srgb, var(--gc-brand-blue-lamp) 28%, transparent) 90deg,
      color-mix(in srgb, var(--gc-brand-spark-lamp) 18%, transparent) 170deg,
      rgba(255,255,255,0.10) 215deg,
      color-mix(in srgb, var(--gc-brand-violet-lamp) 30%, transparent) 290deg,
      color-mix(in srgb, var(--gc-brand-violet-lamp) 34%, transparent) 360deg);
  /* (the spinning opal rim is declared on .gc-opal-film::after: a var() with an
     animated @property only resolves on the element that animates it) */

  /* obsidian = black glossy material for content ON BLACK (where glass would be a grey slab) */
  --gc-obsidian-bg: radial-gradient(120% 85% at 8% -18%, rgba(255,255,255,0.075) 0%, transparent 44%),
                    linear-gradient(162deg, #0c0b14 0%, #020203 46%, #000 70%, #07060d 100%);
  --gc-obsidian-rim: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.12) 18%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.05) 80%, rgba(165,148,249,0.28) 100%);

  /* night glass = Voice Claude overlay recipe (Runde 8g), official since v4 */
  --gc-nightglass-bg: radial-gradient(120% 90% at 6% -14%, rgba(255,255,255,0.16) 0%, transparent 52%),
                      radial-gradient(90% 70% at 104% 118%, rgba(255,255,255,0.06) 0%, transparent 60%),
                      rgba(16,13,30,0.56);
  --gc-nightglass-rim: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.22) 20%, rgba(255,255,255,0.04) 48%, rgba(255,255,255,0.08) 76%, rgba(255,255,255,0.36) 100%);
}

/* REGISTER MODIFIER .gc-opal - the brand voice on top of Prism or Calm.
   Default Leitfarbe becomes violet, stage light violet from below + blue from
   top-left (the video), floating chrome becomes night glass. Pads/chapters
   (data-lf, .gc-chapters) keep their Circuit colours: Ort bleibt Ort. */
.gc-opal {
  --gc-accent:      var(--gc-brand-violet);
  --gc-accent-hi:   color-mix(in srgb, var(--gc-brand-violet) 55%, #fff);
  --gc-accent-deep: color-mix(in srgb, var(--gc-brand-violet-lamp) 80%, #000);
  --gc-on-accent:   #0e0b1f;
  --gc-accent-dim:  color-mix(in srgb, var(--gc-brand-violet) 9%, transparent);
  --gc-accent-line: color-mix(in srgb, var(--gc-brand-violet) 42%, transparent);
  --gc-lf:   var(--gc-brand-violet);
  --gc-lamp: var(--gc-brand-violet-lamp);
  --gc-cool: var(--gc-brand-blue-lamp);
  --gc-cool-dim: color-mix(in srgb, var(--gc-brand-blue-lamp) 16%, transparent);
  --gc-glow:        0 0 26px color-mix(in srgb, var(--gc-brand-violet-lamp) calc(42% * var(--gc-glow-k)), transparent);
  --gc-glow-strong: 0 0 44px color-mix(in srgb, var(--gc-brand-violet-lamp) calc(55% * var(--gc-glow-k)), transparent), 0 0 12px color-mix(in srgb, var(--gc-brand-violet) calc(40% * var(--gc-glow-k)), transparent);
  --gc-glow-soft:   0 0 18px color-mix(in srgb, var(--gc-brand-violet-lamp) calc(26% * var(--gc-glow-k)), transparent);
  --gc-text-glow:   0 0 18px color-mix(in srgb, var(--gc-brand-violet-lamp) calc(50% * var(--gc-glow-k)), transparent);
  --gc-cool-glow:   0 0 22px color-mix(in srgb, var(--gc-brand-blue-lamp) calc(45% * var(--gc-glow-k)), transparent);
  --gc-glass-float-bg: rgba(16,13,30,0.56);
  --gc-ca-warm: color-mix(in srgb, var(--gc-brand-spark-lamp) 70%, transparent);
  --gc-ca-cool: color-mix(in srgb, var(--gc-brand-blue-lamp) 80%, transparent);
}
.gc-calm.gc-opal, .gc-calm .gc-opal, .gc-opal .gc-calm { --gc-glass-float-bg: rgba(14,12,24,0.92); }

/* NIGHT ATMOSPHERE: the website video as light. Violet curtain from the
   lower right, blue neon from the upper left, black centre. ONE scene, not a
   blob mesh: two sources, both hugging the edges, centre >= 70 % black. */
.gc-night { background: var(--gc-bg); position: relative; }
.gc-night::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(62% 58% at 104% 88%, color-mix(in srgb, var(--gc-brand-violet-lamp) calc(30% * var(--gc-glow-k)), transparent) 0%, color-mix(in srgb, var(--gc-brand-night) calc(55% * var(--gc-glow-k)), transparent) 38%, transparent 70%),
    radial-gradient(48% 40% at -4% -8%, color-mix(in srgb, var(--gc-brand-blue-lamp) calc(22% * var(--gc-glow-k)), transparent) 0%, transparent 64%);
}
.gc-calm.gc-night::before, .gc-calm .gc-night::before { display: none; }

/* PHOTO STAGE: real light behind glass (the rule "Glas nur vor Licht").
   <div class="gc-photo-stage"><video poster=still>|<img> ... </div>: dimmed to ~55 % as on the site.
   Brand stage = the MOVING loop video (dark-prism-bg); the still is only the poster /
   fallback for reduced motion, save-data and slow networks. */
.gc-photo-stage { position: relative; isolation: isolate; overflow: hidden; }
.gc-photo-stage > img, .gc-photo-stage > video, .gc-photo-stage > picture > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  filter: brightness(.56) saturate(1.05);
}
.gc-photo-stage::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.1) 46%, rgba(0,0,0,.42) 100%), linear-gradient(0deg, rgba(0,0,0,.85) 0%, transparent 34%);
}

/* ---------------------------------------------------------------------
   MATERIALS: obsidian (on black) · opal (featured) · night glass (overlay)
   --------------------------------------------------------------------- */
.gc-obsidian {
  position: relative;
  background: var(--gc-obsidian-bg);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--gc-r-glass);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.7), var(--gc-z2);
}
.gc-obsidian::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--gc-obsidian-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
a.gc-obsidian:hover, button.gc-obsidian:hover, .gc-obsidian.is-link:hover { border-color: var(--gc-lf-line); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.7), var(--gc-z3), var(--gc-lf-underglow); }
.gc-calm .gc-obsidian { background: var(--gc-surface); box-shadow: var(--gc-z1); border-color: var(--gc-line-2); }
.gc-calm .gc-obsidian::before { display: none; }

/* OPAL: iridescent film + spectral brand rim. The ONE featured object per view
   (hero card, current release, primary CTA panel). Put it on a .gc-glass
   (over light) or a .gc-obsidian (on black). Uses ::after for the rim; the
   film is an extra background layer under the material's own layers. */
@property --gc-opal-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.gc-opal-film { isolation: isolate; }
.gc-glass.gc-opal-film {
  background: var(--gc-glass-sheen), linear-gradient(var(--gc-glass-tint), var(--gc-glass-tint)),
              linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)), var(--gc-opal-film), var(--gc-glass-bg);
}
.gc-obsidian.gc-opal-film {
  background: radial-gradient(120% 85% at 8% -18%, rgba(255,255,255,0.075) 0%, transparent 44%),
              linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.62)), var(--gc-opal-film),
              linear-gradient(162deg, #0c0b14 0%, #000 70%);
}
.gc-opal-film::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  padding: 1.5px;
  background: conic-gradient(from var(--gc-opal-angle),
      rgba(255,255,255,0) 0% 6%, var(--gc-brand-violet) 16%, rgba(255,255,255,0) 28%,
      var(--gc-brand-blue) 42%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 58%,
      var(--gc-brand-spark) 74%, rgba(255,255,255,0) 86%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: gc-opal-spin 11s linear infinite;
  opacity: calc(0.9 * var(--gc-glow-k));
}
@keyframes gc-opal-spin { to { --gc-opal-angle: 360deg; } }
.gc-calm .gc-opal-film::after { display: none; }
.gc-calm .gc-glass.gc-opal-film, .gc-calm .gc-obsidian.gc-opal-film { background: var(--gc-surface); }

/* NIGHT GLASS: the Voice Claude overlay panel. Floating layers over the
   desktop or a photo. Allowed in Calm too (documented exception), stays dark
   and legible: text sits on rgba(10,8,20,.5) where the backdrop is busy. */
.gc-glass-night {
  position: relative;
  background: var(--gc-nightglass-bg);
  -webkit-backdrop-filter: blur(28px) saturate(160%) brightness(1.04);
  backdrop-filter: blur(28px) saturate(160%) brightness(1.04);
  border-radius: 26px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.14);
  color: var(--gc-text);
}
.gc-glass-night::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: var(--gc-nightglass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(-1.2px -0.6px 0 rgba(255,70,100,calc(0.42 * var(--gc-glow-k)))) drop-shadow(1.2px 0.6px 0 rgba(70,225,255,calc(0.42 * var(--gc-glow-k))));
}
.gc-glass-night .gc-ink { background: rgba(10,8,20,0.52); border-radius: 12px; padding: 10px 12px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }

/* ---------------------------------------------------------------------
   WORDMARK + SPLIT HEADLINES (graycontrast.com: GRAY filled / CONTRAST
   outline, section titles "MU|SIC" with the second half outlined)
   --------------------------------------------------------------------- */
.gc-wordmark { font-family: var(--gc-display-font); font-weight: 900; text-transform: uppercase; line-height: .84; letter-spacing: -0.035em; display: inline-flex; flex-direction: column; }
.gc-wordmark > :first-child { color: var(--gc-text); }
.gc-wordmark > :nth-child(2) { color: transparent; -webkit-text-stroke: max(1px, .022em) rgba(255,255,255,0.92); }
.gc-wordmark .gc-tagline, .gc-tagline { font-family: var(--gc-mono); font-weight: 400; font-size: max(10px, .11em); letter-spacing: .3em; line-height: 1.6; color: var(--gc-text-2); -webkit-text-stroke: 0; margin-top: .9em; text-transform: uppercase; }
.gc-split { font-family: var(--gc-display-font); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; line-height: .92; }
.gc-split > b, .gc-split > em { font: inherit; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.92); }
.gc-calm .gc-wordmark, .gc-calm .gc-split { letter-spacing: -0.02em; }
.gc-calm .gc-wordmark > :nth-child(2), .gc-calm .gc-split > b, .gc-calm .gc-split > em { color: var(--gc-text-2); -webkit-text-stroke: 0; }

/* FRAME + BRACKETS: the thin white cover frame (Alexanderplatz) and corner
   brackets (Neurons to Nebulae). For artboards, hero media, press shots. */
.gc-frame { position: relative; }
.gc-frame::before { content: ''; position: absolute; inset: var(--gc-frame-inset, 4%); border: 1px solid rgba(255,255,255,0.78); pointer-events: none; z-index: 2; }
.gc-brackets { position: relative; --b: var(--gc-bracket, 18px); --c: rgba(255,255,255,0.8);
  background:
    linear-gradient(var(--c),var(--c)) top left / var(--b) 1px no-repeat, linear-gradient(var(--c),var(--c)) top left / 1px var(--b) no-repeat,
    linear-gradient(var(--c),var(--c)) top right / var(--b) 1px no-repeat, linear-gradient(var(--c),var(--c)) top right / 1px var(--b) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left / var(--b) 1px no-repeat, linear-gradient(var(--c),var(--c)) bottom left / 1px var(--b) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right / var(--b) 1px no-repeat, linear-gradient(var(--c),var(--c)) bottom right / 1px var(--b) no-repeat; }

/* SPARK: the rare third colour. A single lit point (new release, unread,
   "this one"). At most one per view. Never a fill, never text decoration. */
.gc-spark { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gc-brand-spark); box-shadow: 0 0 10px color-mix(in srgb, var(--gc-brand-spark-lamp) calc(80% * var(--gc-glow-k)), transparent); vertical-align: middle; }

/* ---------------------------------------------------------------------
   DICTATION ORB (Voice Claude / Claude Sound): one control, four states.
   data-state = idle | listening (violet) | transcribing (blue) | live (orange REC)
   --------------------------------------------------------------------- */
.gc-orb { --o: 64px; width: var(--o); height: var(--o); border-radius: 50%; display: grid; place-items: center; position: relative;
  background: radial-gradient(80% 80% at 30% 22%, rgba(255,255,255,0.16), rgba(255,255,255,0.06) 60%), rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.14); color: var(--gc-brand-violet); font-size: calc(var(--o) * .4); cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 10px 30px -14px rgba(0,0,0,.9); transition: box-shadow var(--gc-mid) var(--gc-ease), color var(--gc-mid) var(--gc-ease); }
.gc-orb::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid transparent; pointer-events: none; }
.gc-orb[data-state="listening"]    { --ol: var(--gc-brand-violet-lamp); color: var(--gc-brand-violet); }
.gc-orb[data-state="transcribing"] { --ol: var(--gc-brand-blue-lamp);   color: var(--gc-brand-blue); }
.gc-orb[data-state="live"]         { --ol: var(--gc-live);              color: var(--gc-live); }
.gc-orb[data-state]:not([data-state="idle"])::after { border-color: color-mix(in srgb, var(--ol) 80%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--ol) calc(55% * var(--gc-glow-k) + 10%), transparent); animation: gc-orb 1.8s var(--gc-ease) infinite; }
.gc-orb[data-state="transcribing"]::after { animation-duration: .9s; }
@keyframes gc-orb { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .55; } }

/* ---------------------------------------------------------------------
   SOCIAL ARTBOARDS (Grafik-Team): fixed formats that scale with their own
   width (container units), so one HTML file exports 1080 px PNGs headless.
   data-format = post (4:5) | story (9:16) | square (1:1, cover 3000 px) |
                 banner (16:9) | header (3:1, YouTube/Spotify header)
   .gc-safe shows the platform safe area while designing (hide on export).
   --------------------------------------------------------------------- */
.gc-artboard { position: relative; overflow: hidden; background: #000; color: var(--gc-text); container-type: inline-size; isolation: isolate; aspect-ratio: 4 / 5; }
.gc-artboard[data-format="story"]  { aspect-ratio: 9 / 16; }
.gc-artboard[data-format="square"] { aspect-ratio: 1 / 1; }
.gc-artboard[data-format="banner"] { aspect-ratio: 16 / 9; }
.gc-artboard[data-format="header"] { aspect-ratio: 3 / 1; }
.gc-artboard .gc-ab-pad { position: absolute; inset: 7cqw; display: flex; flex-direction: column; }
.gc-artboard .gc-safe { position: absolute; inset: 6cqw; border: 1px dashed rgba(255,255,255,.22); pointer-events: none; z-index: 9; }
.gc-artboard[data-format="story"] .gc-safe { inset: 14% 6cqw 20%; }
.gc-artboard.is-export .gc-safe { display: none; }

/* ---------------------------------------------------------------------
   v4 safety nets + paper
   --------------------------------------------------------------------- */
@media (prefers-reduced-transparency: reduce) {
  .gc-glass-night { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(14 12 24); }
  .gc-opal-film::after { animation: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gc-glass-night { background: rgba(14,12,24,0.96); }
}
@media print {
  :root, .gc-opal {
    --gc-brand-violet: rgb(84 56 170); --gc-brand-blue: rgb(38 88 160); --gc-brand-spark: rgb(166 46 88);
    --gc-brand-violet-lamp: rgb(84 56 170); --gc-brand-blue-lamp: rgb(38 88 160); --gc-brand-spark-lamp: rgb(166 46 88);
    --gc-accent: rgb(84 56 170);
  }
  .gc-night::before, .gc-opal-film::after, .gc-glass-night::before { display: none !important; }
  .gc-obsidian, .gc-glass-night { background: var(--gc-surface) !important; box-shadow: none !important; }
  .gc-wordmark > :nth-child(2), .gc-split > b, .gc-split > em { -webkit-text-stroke-color: #0d0f13; }
}