/* ============================================================
   evants — Eventtechnik Salzburg
   Design-System "LICHTPULT": Schwarz / Gold / Chrom,
   Farben direkt aus dem Ameisen-Logo abgeleitet.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
    /* Tiefen (Bühnenschwarz) */
    --ink-900: #060709;
    --ink-800: #0a0c0f;
    --ink-700: #10131a;
    --ink-600: #171b23;
    --ink-500: #21262f;

    /* Gold — aus dem Logo gesampelt */
    --gold-100: #fbf1cf;
    --gold-200: #f4dc94;
    --gold-300: #eacb63;
    --gold-400: #dfb752;
    --gold-500: #d4a544;
    --gold-600: #b0842f;
    --gold-700: #8f6320;
    --gold-900: #402c0d;

    /* Chrom / Silber — Schriftzug im Logo */
    --chrome-100: #f2f0ec;
    --chrome-200: #dedbd4;
    --chrome-300: #c3c0b9;
    --chrome-400: #adaaa3;
    --chrome-500: #94918a;
    --chrome-600: #6f6d67;
    --chrome-700: #4a4844;

    --line: rgba(222, 219, 212, .10);
    --line-strong: rgba(222, 219, 212, .18);
    --gold-line: rgba(var(--cue-rgb), calc(.30 * var(--cue-glow)));

    /* Stimmungsfarbe — folgt dem Lichtpult im Hero. Sie färbt alles, was
       wie Licht wirkt: Kanten, Glanz, Akzentschrift, Lichtkegel. Massive
       Flächen und die Haupt-Schaltflächen bleiben golden, damit die Marke
       nicht mitwandert. --cue-glow regelt zusätzlich die Helligkeit. */
    --cue-rgb: 232, 176, 66;
    --cue-glow: 1;
}

/* Vier klar getrennte Farbfamilien — warm, magenta, cyan, grün. */
:root[data-cue="warm"]  { --cue-rgb: 232, 176, 66;  --cue-glow: 1; }
:root[data-cue="club"]  { --cue-rgb: 240, 74, 174;  --cue-glow: 1.12; }
:root[data-cue="cool"]  { --cue-rgb: 58, 188, 255;  --cue-glow: 1.12; }
:root[data-cue="laser"] { --cue-rgb: 66, 232, 128;  --cue-glow: 1.08; }

:root {
    /* sanfter Übergang beim Umschalten */
    --cue-ease: 1.1s ease;
    --accent: rgb(var(--cue-rgb));

    --glow-gold: 0 0 24px rgba(var(--cue-rgb), calc(.35 * var(--cue-glow)));
    --glow-gold-lg: 0 0 60px rgba(var(--cue-rgb), calc(.28 * var(--cue-glow)));

    /* Typo */
    --f-display: "Chakra Petch", "Segoe UI Semibold", sans-serif;
    --f-body: "Manrope", "Segoe UI", sans-serif;
    --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

    /* Raster */
    --shell: 1280px;
    --gut: clamp(1.1rem, 4vw, 2.5rem);
    --cut: 14px;               /* Fasen-Größe, wie die Logo-Buchstaben */
    --nav-h: 68px;

    --ease: cubic-bezier(.16, .84, .44, 1);
    --ease-io: cubic-bezier(.65, 0, .35, 1);
}

@media (min-width: 900px) {
    :root { --nav-h: 84px; }
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
    font-family: var(--f-body);
    font-size: clamp(.95rem, .35vw + .88rem, 1.06rem);
    line-height: 1.68;
    color: var(--chrome-300);
    background: var(--ink-900);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    min-height: 100vh;
}

body.is-locked { overflow: hidden; }

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

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: var(--gold-300); text-decoration: none; }
a:hover { color: var(--gold-200); }

ul, ol { padding: 0; list-style: none; }

:focus-visible {
    outline: 2px solid var(--gold-300);
    outline-offset: 3px;
    border-radius: 2px;
}

::selection { background: var(--gold-500); color: var(--ink-900); }

/* ---------- 3. Typografie ---------- */
h1, h2, h3, h4 {
    font-family: var(--f-display);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.015em;
    color: var(--chrome-100);
    text-wrap: balance;
}

.h-xl { font-size: clamp(2.5rem, 7.4vw, 5.4rem); }
.h-lg { font-size: clamp(2rem, 5.4vw, 3.6rem); }
.h-md { font-size: clamp(1.45rem, 2.6vw, 2.1rem); }
.h-sm { font-size: clamp(1.1rem, 1.6vw, 1.32rem); letter-spacing: 0; }

.tag {
    font-family: var(--f-mono);
    font-size: clamp(.6rem, 1.4vw, .68rem);
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--accent);
    transition: color var(--cue-ease);
}

.lede {
    font-size: clamp(1rem, .5vw + .92rem, 1.18rem);
    color: var(--chrome-500);
    max-width: 58ch;
}

.gold { color: var(--accent); transition: color var(--cue-ease); }
.chrome { color: var(--chrome-200); }

/* Chrom-Verlauf wie der Logo-Schriftzug */
.metal {
    background: linear-gradient(178deg, #fff 4%, var(--chrome-200) 32%, var(--chrome-600) 52%, var(--chrome-200) 74%, #fff 98%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.metal-gold {
    background: linear-gradient(178deg,
        rgba(255, 255, 255, .92) 4%,
        rgb(var(--cue-rgb)) 30%,
        rgba(var(--cue-rgb), .42) 54%,
        rgb(var(--cue-rgb)) 76%,
        rgba(255, 255, 255, .92) 98%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- 4. Layout-Helfer ---------- */
.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gut);
}

.sect {
    position: relative;
    padding-block: clamp(3.6rem, 8vw, 7.5rem);
    scroll-margin-top: var(--nav-h);
}

.sect + .sect { border-top: 1px solid var(--line); }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

/* Fase — die Signatur-Form aus dem Logo */
.chamfer {
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

.chamfer-sm { --cut: 9px; }

/* ---------- 5. Atmosphäre ---------- */
.stage {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Lichtkegel wie Bühnenscheinwerfer */
.beam {
    position: absolute;
    top: -30vh;
    width: 46vw;
    height: 150vh;
    background: linear-gradient(to bottom, rgba(var(--cue-rgb), calc(.30 * var(--cue-glow))) 0%, rgba(var(--cue-rgb), calc(.10 * var(--cue-glow))) 34%, transparent 74%);
    filter: blur(46px);
    clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
    opacity: .8;
    transform-origin: 50% 0;
    animation: sway 19s var(--ease-io) infinite alternate;
    transition: background var(--cue-ease);
}

.beam-1 { left: -14vw; animation-duration: 21s; }
.beam-2 { left: 34vw; animation-delay: -7s; animation-duration: 26s; opacity: .6;
    background: linear-gradient(to bottom, rgba(var(--cue-rgb), calc(.18 * var(--cue-glow))) 0%, rgba(var(--cue-rgb), calc(.05 * var(--cue-glow))) 30%, transparent 70%); }
.beam-3 { right: -16vw; left: auto; animation-delay: -13s; animation-duration: 24s; }

@keyframes sway {
    0%   { transform: rotate(-7deg) scaleY(1); }
    50%  { transform: rotate(2deg)  scaleY(1.06); }
    100% { transform: rotate(8deg)  scaleY(.96); }
}

/* Raumlicht: färbt die ganze Seite leicht in der gewählten Stimmung.
   Bewusst schwach — es soll wirken wie Licht im Raum, nicht wie ein Filter. */
.wash {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(90% 60% at 50% 0%, rgba(var(--cue-rgb), calc(.09 * var(--cue-glow))) 0%, transparent 62%),
        radial-gradient(70% 50% at 12% 88%, rgba(var(--cue-rgb), calc(.05 * var(--cue-glow))) 0%, transparent 66%);
    transition: background var(--cue-ease);
    mix-blend-mode: screen;
}

/* Filmkorn */
.grain {
    position: fixed;
    inset: -50%;
    z-index: 1;
    pointer-events: none;
    opacity: .04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grainShift 7s steps(6) infinite;
}

@keyframes grainShift {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-3%, 2%); }
    40% { transform: translate(2%, -3%); }
    60% { transform: translate(-2%, -2%); }
    80% { transform: translate(3%, 3%); }
}

/* Cursor-Spotlight (nur Desktop / Zeigegerät) */
.spot {
    position: fixed;
    top: 0; left: 0;
    width: 620px; height: 620px;
    margin: -310px 0 0 -310px;
    z-index: 2;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--cue-rgb), .12) 0%, rgba(var(--cue-rgb), .05) 34%, transparent 66%);
    transition: background var(--cue-ease);
    opacity: 0;
    transition: opacity .5s ease;
    will-change: transform;
    mix-blend-mode: screen;
}

.spot.on { opacity: 1; }

@media (hover: none), (max-width: 899px) {
    .spot { display: none; }
}

.page { position: relative; z-index: 3; }

/* Sektion-Scanline beim Eintreten */
.scan {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(var(--cue-rgb)) 50%, transparent);
    box-shadow: 0 0 14px rgb(var(--cue-rgb));
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}

.sect.in .scan { animation: scanRun 1.5s var(--ease-io) forwards; }

@keyframes scanRun {
    0% { transform: scaleX(0); opacity: 0; transform-origin: left; }
    18% { opacity: 1; }
    50% { transform: scaleX(1); opacity: 1; transform-origin: left; }
    51% { transform-origin: right; }
    100% { transform: scaleX(0); opacity: 0; transform-origin: right; }
}

/* ---------- 6. Buttons ---------- */
.btn {
    --btn-bg: linear-gradient(150deg, rgba(var(--cue-rgb), 1), rgba(var(--cue-rgb), .58));
    --btn-fg: var(--ink-900);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6em;
    padding: .82em 1.5em;
    font-family: var(--f-display);
    font-size: clamp(.8rem, 1.6vw, .88rem);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--btn-fg);
    background: var(--btn-bg);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease);
    box-shadow: 0 6px 22px rgba(var(--cue-rgb), .24);
    text-align: center;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease), background var(--cue-ease);
}

.btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.09);
    box-shadow: 0 10px 30px rgba(var(--cue-rgb), .42);
}

.btn:active { transform: translateY(0); }

.btn .ico { width: 1.15em; height: 1.15em; }

.btn-ghost {
    --btn-bg: rgba(255, 255, 255, .035);
    --btn-fg: var(--chrome-200);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    backdrop-filter: blur(8px);
}

.btn-ghost:hover {
    --btn-fg: var(--gold-200);
    box-shadow: inset 0 0 0 1px var(--gold-line), 0 8px 26px rgba(0, 0, 0, .5);
}

.btn-lg { padding: 1em 1.9em; font-size: clamp(.84rem, 1.7vw, .95rem); }

.btn-block { width: 100%; }

/* Textlink mit Unterstreichungs-Animation */
.tlink {
    position: relative;
    font-family: var(--f-display);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .82rem;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: .5em;
    transition: color var(--cue-ease);
}

.tlink::after {
    content: "";
    position: absolute;
    left: 0; bottom: -3px;
    width: 100%; height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease);
}

.tlink:hover::after { transform: scaleX(1); }
.tlink .ico { width: 1em; height: 1em; transition: transform .35s var(--ease); }
.tlink:hover .ico { transform: translateX(3px); }

/* ---------- 7. Navigation ---------- */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 900;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    background: rgba(6, 7, 9, .55);
    border-bottom: 1px solid transparent;
    transition: background .45s ease, border-color .45s ease, backdrop-filter .45s ease;
}

.nav.stuck {
    background: rgba(6, 7, 9, .9);
    backdrop-filter: blur(18px) saturate(1.2);
    border-bottom-color: var(--gold-line);
}

.nav-in {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gut);
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Markenzeile: freigestellte Original-Assets statt nachgebauter Schrift.
   Beide Bilder werden verkleinert dargestellt — nie hochskaliert. */
.brand {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: .55rem;
    margin-right: auto;
    text-decoration: none;
}

.brand-ant {
    grid-row: 1 / 3;
    width: clamp(38px, 6.2vw, 52px);
    filter: drop-shadow(0 1px 6px rgba(212, 165, 68, .3));
}

.brand-word {
    align-self: end;
    width: clamp(84px, 13vw, 116px);
    margin-bottom: 1px;
}

.brand-sub {
    align-self: start;
    font-family: var(--f-mono);
    font-size: .46rem;
    font-weight: 700;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--gold-600);
    padding-left: 2px;
}

@media (min-width: 900px) {
    .brand-sub { font-size: .5rem; }
}

.nav-links { display: none; }

@media (min-width: 1000px) {
    .nav-links {
        display: flex;
        align-items: center;
        gap: clamp(.4rem, 1.4vw, 1.1rem);
    }
    .nav-links a {
        position: relative;
        font-family: var(--f-display);
        font-size: .8rem;
        font-weight: 600;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--chrome-500);
        padding: .45rem .2rem;
        transition: color .3s ease;
    }
    .nav-links a::after {
        content: "";
        position: absolute;
        left: 0; bottom: 0;
        width: 100%; height: 1px;
        background: rgb(var(--cue-rgb));
        box-shadow: 0 0 8px rgb(var(--cue-rgb));
        transform: scaleX(0);
        transition: transform .4s var(--ease);
    }
    .nav-links a:hover, .nav-links a[aria-current="true"] { color: var(--gold-200); }
    .nav-links a:hover::after, .nav-links a[aria-current="true"]::after { transform: scaleX(1); }
}

.nav-cta { display: none; }
@media (min-width: 720px) { .nav-cta { display: inline-flex; } }

.burger {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    color: var(--chrome-200);
}

.burger .ico { width: 24px; height: 24px; }

@media (min-width: 1000px) { .burger { display: none; } }

/* Scroll-Progress */
.progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 100%;
    z-index: 901;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, rgba(var(--cue-rgb), .35), rgb(var(--cue-rgb)), var(--chrome-200));
    box-shadow: 0 0 10px rgba(var(--cue-rgb), .7);
}

/* Mobile Drawer */
.drawer {
    position: fixed;
    inset: 0;
    z-index: 950;
    background: rgba(6, 7, 9, .97);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    padding: calc(var(--nav-h) + 1.5rem) var(--gut) 2rem;
    transform: translateY(-101%);
    transition: transform .6s var(--ease);
    overflow-y: auto;
}

.drawer.open { transform: translateY(0); }

.drawer-close {
    position: absolute;
    top: 12px; right: var(--gut);
    width: 44px; height: 44px;
    display: grid; place-items: center;
    color: var(--chrome-300);
}

.drawer-close .ico { width: 24px; height: 24px; }

.drawer nav { display: flex; flex-direction: column; }

.drawer nav a {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: .9rem 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--chrome-100);
    opacity: 0;
    transform: translateY(14px);
}

.drawer.open nav a { animation: drawerIn .5s var(--ease) forwards; }

@keyframes drawerIn { to { opacity: 1; transform: translateY(0); } }

.drawer nav a i {
    font-family: var(--f-mono);
    font-size: .62rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--gold-600);
}

.drawer-foot {
    margin-top: auto;
    padding-top: 2rem;
    display: grid;
    gap: .7rem;
}

.drawer-foot .btn { width: 100%; }

/* ---------- 8. Hero ---------- */
.hero {
    position: relative;
    padding-top: calc(var(--nav-h) + clamp(1.6rem, 5vw, 3.4rem));
    padding-bottom: clamp(2.6rem, 6vw, 4.5rem);
    overflow: hidden;
}

.hero-grid {
    display: grid;
    gap: clamp(1.8rem, 4vw, 3.2rem);
    align-items: center;
}

@media (min-width: 980px) {
    .hero-grid { grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 4vw, 4rem); }
}

/* Markenzeichen als Auftakt des Hero — die Bildmarke trägt hier,
   nicht die Überschrift. Quelle 1000 px, Anzeige deutlich kleiner. */
.hero-logo {
    width: clamp(210px, 40vw, 300px);
    height: auto;
    margin-bottom: clamp(.9rem, 2vw, 1.3rem);
    filter: drop-shadow(0 6px 26px rgba(0, 0, 0, .8));
}

@media (min-width: 980px) {
    .hero-logo { width: clamp(290px, 26vw, 400px); margin-bottom: .55rem; }
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: clamp(.8rem, 1.8vw, 1.1rem);
}

.hero-eyebrow .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgb(var(--cue-rgb));
    box-shadow: 0 0 10px rgb(var(--cue-rgb));
    transition: background var(--cue-ease), box-shadow var(--cue-ease);
    animation: blip 2.2s ease-in-out infinite;
}

@keyframes blip { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.hero h1 { margin-bottom: clamp(.9rem, 2vw, 1.3rem); }

.hero h1 span { display: block; }

.hero-sub {
    font-size: clamp(1rem, .5vw + .93rem, 1.2rem);
    color: var(--chrome-500);
    max-width: 48ch;
    margin-bottom: clamp(1.4rem, 3vw, 2.1rem);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-bottom: clamp(1.3rem, 2.6vw, 1.8rem);
}

.hero-actions .btn { flex: 1 1 auto; min-width: 190px; }

@media (min-width: 560px) { .hero-actions .btn { flex: 0 0 auto; } }

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.6rem;
    padding-top: clamp(1.1rem, 2.5vw, 1.5rem);
    border-top: 1px solid var(--line);
}

.hero-meta div {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--f-mono);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--chrome-600);
}

.hero-meta .ico { width: 15px; height: 15px; color: var(--gold-600); flex: none; }

/* Logo-Video im "Console-Screen" */
.console {
    position: relative;
    padding: 12px;
    background: linear-gradient(160deg, rgba(212, 165, 68, .14), rgba(255, 255, 255, .02) 42%, rgba(0, 0, 0, .5));
    box-shadow: inset 0 0 0 1px var(--gold-line), 0 26px 70px rgba(0, 0, 0, .75), var(--glow-gold-lg);
    --cut: 22px;
}

.console-screen {
    position: relative;
    overflow: hidden;
    background: #000;
    --cut: 14px;
    aspect-ratio: 1280 / 704;
}

.console-screen video, .console-screen img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.console-screen::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px);
    mix-blend-mode: overlay;
}

.console-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .3rem .1rem;
    font-family: var(--f-mono);
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold-600);
}

.console-bar .leds { display: flex; gap: 3px; margin-left: auto; }

.console-bar .leds i {
    width: 12px; height: 3px;
    background: var(--gold-700);
    animation: ledRun 1.4s steps(1) infinite;
}

.console-bar .leds i:nth-child(2) { animation-delay: .18s; }
.console-bar .leds i:nth-child(3) { animation-delay: .36s; }
.console-bar .leds i:nth-child(4) { animation-delay: .54s; }
.console-bar .leds i:nth-child(5) { animation-delay: .72s; }

@keyframes ledRun {
    0%, 40% { background: var(--gold-300); box-shadow: 0 0 6px var(--gold-300); }
    41%, 100% { background: var(--gold-900); box-shadow: none; }
}

.scroll-cue {
    display: none;
    margin-top: clamp(2rem, 4vw, 3rem);
    align-items: center;
    gap: .7rem;
    font-family: var(--f-mono);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--chrome-600);
}

@media (min-width: 980px) { .scroll-cue { display: flex; } }

.scroll-cue span {
    width: 46px; height: 1px;
    background: linear-gradient(90deg, var(--gold-500), transparent);
    animation: cueSlide 2.2s var(--ease-io) infinite;
}

@keyframes cueSlide { 0%, 100% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(10px); opacity: .4; } }

/* ---------- 8a2. Blackout-Aufblende ----------
   --lights läuft beim Laden von 0 auf 1. Standardwert ist 1, damit ohne
   JavaScript sofort alles sichtbar ist; das Skript setzt erst auf 0.
   Die Staffelung entsteht über verschobene Schwellen je Element.        */
.hero { --lights: 1; }

@keyframes strikeUp { from { opacity: 0; transform: translateY(14px); } }

.hero-logo,
.hero h1 span,
.hero-sub,
.hero-actions,
.hero-meta,
.hero-eyebrow {
    /* Sichtbarkeit folgt dem Masterpegel */
    opacity: clamp(0, calc((var(--lights) - var(--at, 0)) / .22), 1);
}

.hero-logo    { --at: .10; }
.hero-eyebrow { --at: .26; }
.hero h1 span:nth-child(1) { --at: .34; }
.hero h1 span:nth-child(2) { --at: .46; }
.hero-sub     { --at: .58; }
.hero-actions { --at: .70; }
.hero-meta    { --at: .76; }   /* muss bei --lights:1 voll deckend sein */

/* Motorisierter Master-Fader */
.master {
    position: absolute;
    right: clamp(.7rem, 2.2vw, 1.6rem);
    top: 50%;
    translate: 0 -50%;
    z-index: 4;
    display: grid;
    justify-items: center;
    gap: .45rem;
    padding: .7rem .55rem;
    background: rgba(6, 7, 9, .55);
    box-shadow: inset 0 0 0 1px var(--line);
    backdrop-filter: blur(6px);
    --cut: 9px;
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

@media (max-width: 599px) { .master { display: none; } }

.master-label, .master-value {
    font-family: var(--f-mono);
    font-size: .48rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--chrome-600);
}

.master-value { color: var(--accent); font-variant-numeric: tabular-nums; transition: color var(--cue-ease); }

.master-track {
    position: relative;
    width: 16px;
    height: clamp(90px, 16vh, 150px);
    background: linear-gradient(to top, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
    box-shadow: inset 0 0 4px rgba(0, 0, 0, .9);
}

.master-fill {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: calc(var(--lights) * 100%);
    background: linear-gradient(to top, rgba(var(--cue-rgb), .25), rgba(var(--cue-rgb), .85));
    box-shadow: 0 0 10px rgba(var(--cue-rgb), .5);
}

.master-knob {
    position: absolute;
    left: 50%;
    bottom: calc(var(--lights) * 100%);
    width: 26px; height: 13px;
    translate: -50% 50%;
    background: linear-gradient(180deg, #eee 0%, #8d8b86 46%, #55534e 54%, #16181c 100%);
    border: 1px solid #000;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .55);
}

/* ---------- 8b0. Videowand im Hero ----------
   Drei Reihen echter Referenzfotos, gegenläufig und unterschiedlich
   schnell. Darüber ein Pixelraster, damit es wie eine LED-Wand aus
   vielen Panels wirkt, und ein Schleier für die Textlesbarkeit. */
.wall {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: #05060a;
    box-shadow: inset 0 0 0 1px var(--gold-line);
    --cut: 18px;
}

.wall-rows {
    position: absolute;
    inset: -2%;
    display: grid;
    grid-auto-rows: 1fr;
    gap: clamp(4px, .7vw, 9px);
}

.wall-row { overflow: hidden; }

.wall-track {
    display: flex;
    gap: clamp(4px, .7vw, 9px);
    width: max-content;
    height: 100%;
    animation: wallDrift var(--dur, 70s) linear infinite;
    will-change: transform;
}

.wall-row.rev .wall-track { animation-direction: reverse; }

@keyframes wallDrift { to { transform: translateX(-50%); } }

/* Jede Kachel ist eine Schaltfläche: anklicken öffnet das Bild groß. */
.wall-tile {
    position: relative;
    height: 100%;
    aspect-ratio: 4 / 3;
    flex: none;
    overflow: hidden;
    background: #0b0d11;
    border: 0;
    padding: 0;
    border-radius: 2px;
    cursor: pointer;
    transition: transform .4s var(--ease), box-shadow .4s ease;
}

.wall-tile img {
    width: 100%; height: 100%;
    object-fit: cover;
    /* Panels leuchten erst mit dem Masterpegel auf */
    opacity: calc(clamp(0, calc((var(--lights) - var(--at, 0)) / .3), 1) * .92);
    filter: saturate(.85) brightness(.78);
    transition: filter .4s ease;
}

/* Beim Zeigen auf die Wand: Drift anhalten, damit man zielen kann,
   und alles leicht abdunkeln — die angepeilte Kachel geht auf volle
   Farbe. Auf Fingergeräten entfällt das, dort zählt nur der Tipp. */
@media (hover: hover) {
    .wall:hover .wall-track { animation-play-state: paused; }
    .wall:hover .wall-tile img { filter: saturate(.6) brightness(.42); }

    .wall-tile:hover img,
    .wall-tile:focus-visible img { filter: saturate(1.05) brightness(1.06); }

    .wall-tile:hover,
    .wall-tile:focus-visible {
        transform: scale(1.04);
        box-shadow: 0 0 0 2px rgb(var(--cue-rgb)), 0 10px 30px rgba(0, 0, 0, .7);
        z-index: 4;
    }
}

.wall-tile:focus-visible { outline: none; }

/* Lupe auf der angepeilten Kachel */
.wall-tile::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 34px; aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background:
        radial-gradient(circle, transparent 34%, rgb(var(--cue-rgb)) 35%, rgb(var(--cue-rgb)) 44%, transparent 45%),
        rgba(6, 7, 9, .7);
    opacity: 0;
    scale: .7;
    transition: opacity .3s ease, scale .3s var(--ease);
    pointer-events: none;
}

.wall-tile:hover::after, .wall-tile:focus-visible::after { opacity: 1; scale: 1; }

/* Reihen fahren nacheinander hoch, wie Panels beim Einschalten */
.wall-row:nth-child(1) .wall-tile img { --at: .05; }
.wall-row:nth-child(2) .wall-tile img { --at: .16; }
.wall-row:nth-child(3) .wall-tile img { --at: .28; }

/* Pixelraster — verkauft die LED-Optik */
.wall-grid {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, rgba(0,0,0,.55) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(0deg,  rgba(0,0,0,.45) 0 1px, transparent 1px 4px);
    opacity: .5;
    mix-blend-mode: multiply;
}

/* Abdunklung für die Schrift + Farbe der Lichtstimmung */
.wall-scrim {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(100deg, rgba(5,6,10,.96) 20%, rgba(5,6,10,.72) 46%, rgba(5,6,10,.42) 72%, rgba(5,6,10,.6) 100%),
        radial-gradient(120% 80% at 50% 0%, rgba(var(--cue-rgb), calc(.16 * var(--cue-glow))) 0%, transparent 60%),
        radial-gradient(100% 60% at 50% 100%, rgba(5,6,10,.9) 0%, transparent 70%);
    transition: background var(--cue-ease);
}

@media (max-width: 979px) {
    /* Auf schmalen Schirmen liegt der Text unter der Wand, deshalb
       darf sie gleichmäßig abgedunkelt sein statt seitlich. */
    .wall-scrim {
        background:
            linear-gradient(180deg, rgba(5,6,10,.55) 0%, rgba(5,6,10,.35) 45%, rgba(5,6,10,.92) 100%),
            radial-gradient(120% 80% at 50% 0%, rgba(var(--cue-rgb), calc(.16 * var(--cue-glow))) 0%, transparent 60%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wall-track { animation: none; }
}

/* ---------- 8b. WebGL-Bühne im Hero ---------- */
.hero-gl {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: radial-gradient(120% 90% at 50% 30%, #0e1218 0%, #05060a 70%);
    box-shadow: inset 0 0 0 1px var(--gold-line);
    --cut: 18px;
}

.hero-gl canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
    opacity: 0;
    transition: opacity 1.1s var(--ease);
}

.hero-gl.gl-live canvas { opacity: 1; }

/* Standbild als Ersatz, wenn WebGL nicht kann.
   Standardmäßig AUS: die Seite startet ohnehin im Blackout, und ein
   Bild, das nur eine Sekunde bis zum Start der Szene aufblitzt, wirkt
   wie ein Fehler. Erst wenn feststeht, dass 3D nicht läuft, schaltet
   das Skript .gl-needs-fallback ein. */
.gl-fallback {
    position: absolute;
    inset: 0;
    display: none;
    place-items: center;
}

.gl-fallback img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }

.gl-needs-fallback .gl-fallback { display: grid; }

/* Läuft die Szene, ist das Standbild in jedem Fall weg. Bewusst ohne
   Transition: ein Sichtbarkeitszustand darf nicht davon abhängen, dass
   eine Animation durchläuft (im Hintergrund-Tab tut sie das nicht). */
.gl-live .gl-fallback { display: none; }

/* Bedienelemente erscheinen erst, wenn die Szene wirklich läuft —
   sonst stünden dort Tasten ohne Funktion. */
/* Das Lichtpult steuert die Stimmung der ganzen Seite und haengt nicht
   mehr am 3D — es ist deshalb immer da. Die Kameratasten des
   Konfigurators erscheinen weiterhin erst, wenn dessen Szene laeuft. */
.cues { display: flex; }
.rig-views { display: none; }
.gl-live .rig-views { display: flex; }

/* Hinweis, wenn die Seite per Doppelklick (file://) geöffnet wurde —
   der Browser blockiert dann die 3D-Module. Für echte Besucher nie sichtbar. */
.gl-note {
    position: absolute;
    left: 50%; bottom: 1rem;
    transform: translateX(-50%);
    z-index: 5;
    display: none;
    max-width: min(92%, 30rem);
    padding: .6rem .9rem;
    text-align: center;
    font-family: var(--f-mono);
    font-size: .58rem;
    line-height: 1.6;
    letter-spacing: .06em;
    color: var(--gold-200);
    background: rgba(6, 7, 9, .9);
    box-shadow: inset 0 0 0 1px var(--gold-line);
    --cut: 10px;
}

body.is-file .gl-note { display: block; }
body.is-file .scroll-cue { display: none; }   /* verweist auf Tasten, die es dann nicht gibt */

/* Cue-Leiste — sieht aus wie die Tastenreihe eines Lichtpults */
.cues {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 4;
    /* display kommt aus der gl-live-Sperre weiter oben */
    align-items: center;
    gap: .4rem;
    padding: .7rem clamp(.6rem, 2vw, 1.1rem);
    background: linear-gradient(to top, rgba(4, 5, 7, .92), rgba(4, 5, 7, .35) 65%, transparent);
    overflow-x: auto;
    scrollbar-width: none;
}

.cues::-webkit-scrollbar { display: none; }

.cues-label {
    font-family: var(--f-mono);
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold-600);
    white-space: nowrap;
    margin-right: .3rem;
}

@media (max-width: 479px) { .cues-label { display: none; } }

.cue-btn {
    position: relative;
    flex: none;
    padding: .5rem .8rem .55rem;
    font-family: var(--f-mono);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--chrome-500);
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .5));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 2px 0 rgba(0, 0, 0, .6);
    transition: color .25s ease, box-shadow .3s ease, transform .15s ease, background .3s ease;
    --cut: 7px;
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

.cue-btn::before {
    content: "";
    position: absolute;
    top: 4px; left: 50%;
    transform: translateX(-50%);
    width: 16px; height: 2px;
    background: rgba(255, 255, 255, .12);
    transition: background .3s ease, box-shadow .3s ease;
}

.cue-btn:hover { color: var(--chrome-200); box-shadow: inset 0 0 0 1px var(--gold-line), 0 2px 0 rgba(0, 0, 0, .6); }
.cue-btn:active { transform: translateY(1px); }

.cue-btn[aria-pressed="true"] {
    color: var(--ink-900);
    background: linear-gradient(180deg, rgba(var(--cue-rgb), 1), rgba(var(--cue-rgb), .55));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 20px rgba(var(--cue-rgb), .55);
}

.cue-btn[aria-pressed="true"]::before { background: var(--ink-900); box-shadow: 0 0 6px rgba(0, 0, 0, .6); }

.gl-hint {
    position: absolute;
    top: calc(var(--nav-h) + .5rem); right: .9rem;
    z-index: 4;
    font-family: var(--f-mono);
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--chrome-700);
    pointer-events: none;
}

/* Desktop: Bühne wird zum Vollbild-Hintergrund, Text liegt darüber */
@media (min-width: 980px) {
    .hero {
        display: grid;
        min-height: min(94svh, 920px);
        padding-block: calc(var(--nav-h) + .8rem) 2.2rem;
    }

    /* Die Wand bleibt auf Inhaltsbreite — genau so breit wie Laufband,
       Karten und Text darunter. Der Gutter-Abzug sorgt dafür, dass sie
       exakt mit dem Laufband darunter fluchtet. */
    .hero-shell {
        position: relative;
        align-self: stretch;
        display: grid;
    }
    .wall {
        position: absolute;
        inset: 0 var(--gut);
        aspect-ratio: auto;
    }
    .hero-copy {
        position: relative;
        z-index: 3;
        align-self: center;
        padding-top: calc(var(--nav-h) - 1rem);
        padding-bottom: 5.2rem;   /* Platz für die Cue-Leiste */
        /* Nur der Textblock faengt Klicks ab — rechts daneben bleiben
           die Kacheln der Wand anklickbar. */
        pointer-events: none;
    }
    .hero-copy .hero-grid > * { pointer-events: auto; }
    /* Die Bühne liegt jetzt im Hintergrund — der Text braucht keine
       zweite Rasterspalte mehr, sondern eine Lesebreite. */
    .hero-copy .hero-grid { grid-template-columns: min(46rem, 56%); }
    /* Etwas kleiner als früher — die Bildmarke darüber trägt jetzt mit */
    .hero h1 { font-size: clamp(2.1rem, 3.7vw, 3.15rem); }
    .hero-sub { font-size: 1.05rem; max-width: 46ch; }
    /* Lesbarkeits-Schleier links */
    .hero-copy::before {
        content: "";
        position: absolute;
        inset: -30% -10% -30% -50vw;
        z-index: -1;
        background: linear-gradient(100deg, var(--ink-900) 18%, rgba(6, 7, 9, .86) 42%, rgba(6, 7, 9, .35) 66%, transparent 82%);
        pointer-events: none;
    }
    .hero-copy .hero-actions .btn { flex: 0 0 auto; }
    .cues { padding-inline: max(var(--gut), calc((100vw - var(--shell)) / 2 + var(--gut))); }
}

/* ---------- 8c. 3D-Konfigurator ---------- */
.rig-grid { display: grid; gap: clamp(1rem, 2.6vw, 1.8rem); }

@media (min-width: 1000px) { .rig-grid { grid-template-columns: 1.25fr .75fr; align-items: start; } }

.rig-view {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: radial-gradient(120% 90% at 50% 35%, #0e1218 0%, #05060a 72%);
    box-shadow: inset 0 0 0 1px var(--gold-line), 0 22px 55px rgba(0, 0, 0, .6);
    --cut: 18px;
}

@media (min-width: 1000px) { .rig-view { aspect-ratio: 4 / 3; } }

.rig-view canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
    cursor: grab;
    opacity: 0;
    transition: opacity 1s var(--ease);
    touch-action: pan-y;
    outline: none;
}

.rig-view.gl-live canvas { opacity: 1; }
.rig-view.grabbing canvas { cursor: grabbing; }

.rig-views {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 4;
    /* display kommt aus der gl-live-Sperre weiter oben */
    gap: .4rem;
    padding: .65rem clamp(.6rem, 2vw, 1rem);
    background: linear-gradient(to top, rgba(4, 5, 7, .9), transparent);
    overflow-x: auto;
    scrollbar-width: none;
}

.rig-views::-webkit-scrollbar { display: none; }

.rig-badge {
    position: absolute;
    top: .7rem; left: .8rem;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--f-mono);
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-500);
    pointer-events: none;
}

.rig-badge i {
    width: 6px; height: 6px;
    background: var(--gold-300);
    box-shadow: 0 0 8px var(--gold-300);
    border-radius: 50%;
    animation: blip 2s ease-in-out infinite;
}

.rig-panel { display: grid; gap: 1rem; }

/* Die Beschriftung sitzt auf der Oberkante — etwas Luft, damit sie
   nicht in die Kachel darüber schneidet. */
.rig-panel .mixer { margin-top: .55rem; }

.toggles { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

.toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem .7rem;
    font-family: var(--f-mono);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--chrome-500);
    background: rgba(255, 255, 255, .03);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    cursor: pointer;
    transition: color .25s ease, box-shadow .3s ease, background .3s ease;
    --cut: 8px;
}

.toggle input { position: absolute; opacity: 0; pointer-events: none; }

.toggle .led {
    width: 8px; height: 8px;
    flex: none;
    border-radius: 50%;
    background: #23272d;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7);
    transition: background .25s ease, box-shadow .25s ease;
}

.toggle:hover { color: var(--chrome-200); }

.toggle:has(input:checked) {
    color: var(--gold-200);
    background: rgba(212, 165, 68, .1);
    box-shadow: inset 0 0 0 1px var(--gold-line);
}

.toggle:has(input:checked) .led {
    background: rgb(var(--cue-rgb));
    box-shadow: 0 0 8px rgb(var(--cue-rgb)), 0 0 14px rgba(var(--cue-rgb), .6);
}

.toggle:has(input:focus-visible) { outline: 2px solid var(--gold-300); outline-offset: 2px; }

.rig-out {
    display: grid;
    gap: .4rem;
    padding: .9rem 1rem;
    background: rgba(0, 0, 0, .5);
    box-shadow: inset 0 0 0 1px var(--gold-line);
    --cut: 12px;
}

.rig-out dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .3rem .8rem;
    margin: 0;
    font-family: var(--f-mono);
    font-size: .62rem;
    letter-spacing: .06em;
}

.rig-out dt { color: var(--chrome-600); text-transform: uppercase; font-size: .56rem; letter-spacing: .16em; }
.rig-out dd { margin: 0; color: var(--gold-200); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- 8d. Galerie als 3D-Zylinder ---------- */
.ring-stage {
    position: relative;
    height: clamp(240px, 46vw, 430px);
    perspective: 1400px;
    perspective-origin: 50% 45%;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.ring-stage.grabbing { cursor: grabbing; }

.ring {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    will-change: transform;
}

.ring-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(180px, 30vw, 320px);
    aspect-ratio: 4 / 3;
    margin: 0;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    cursor: pointer;
    padding: 0;
    border: 0;
    background: var(--ink-700);
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .7), inset 0 0 0 1px var(--line);
    translate: -50% -50%;
    --cut: 12px;
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
    transition: box-shadow .4s ease;
}

.ring-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(.45) brightness(.8);
    transition: filter .5s ease;
}

.ring-item.is-front { box-shadow: 0 22px 55px rgba(0, 0, 0, .8), inset 0 0 0 1px var(--gold-line); }
.ring-item.is-front img, .ring-item:hover img { filter: grayscale(0) brightness(1); }

/* Lupe: zeigt an, dass sich das Bild vergrößern lässt */
.ring-zoom {
    position: absolute;
    top: 50%; left: 50%;
    width: 46px; aspect-ratio: 1;
    translate: -50% -50%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(6, 7, 9, .72);
    box-shadow: inset 0 0 0 1px var(--gold-line);
    backdrop-filter: blur(4px);
    color: var(--accent);
    opacity: 0;
    scale: .8;
    transition: opacity .35s ease, scale .35s var(--ease), color var(--cue-ease);
    pointer-events: none;
}

.ring-zoom .ico { width: 20px; height: 20px; }
.ring-item.is-front .ring-zoom { opacity: .8; scale: 1; }
.ring-item:hover .ring-zoom { opacity: 1; scale: 1.08; }

.ring-item figcaption {
    position: absolute;
    left: .5rem; bottom: .45rem;
    font-family: var(--f-mono);
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--gold-300);
    text-shadow: 0 1px 6px #000;
}

/* Boden-Reflex unter dem Zylinder */
.ring-floor {
    position: absolute;
    left: 50%; bottom: -6%;
    width: min(760px, 92%);
    height: 90px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(212, 165, 68, .16), transparent 68%);
    filter: blur(10px);
    pointer-events: none;
}

.ring-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.2rem;
}

.ring-nav button {
    width: 42px; aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    color: var(--chrome-300);
    transition: color .3s ease, box-shadow .3s ease, transform .3s var(--ease);
}

.ring-nav button:hover { color: var(--gold-200); box-shadow: inset 0 0 0 1px var(--gold-line); transform: translateY(-2px); }
.ring-nav button .ico { width: 19px; height: 19px; }

.ring-nav span {
    font-family: var(--f-mono);
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--chrome-700);
    padding-inline: .6rem;
}

/* ---------- 8e. Karten-Tilt mit Glanz ---------- */
.tilt {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transform-style: preserve-3d;
    will-change: transform;
}

.tilt::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(340px circle at var(--gx, 50%) var(--gy, 50%),
        rgba(251, 241, 207, .22), rgba(212, 165, 68, .08) 40%, transparent 68%);
    transition: opacity .4s ease;
    mix-blend-mode: screen;
}

.tilt:hover::before { opacity: 1; }

/* ---------- 9. Ticker ---------- */
/* Läuft auf Inhaltsbreite mit, nicht randlos über den ganzen Schirm */
.ticker-wrap { padding-block: clamp(1.4rem, 3vw, 2.2rem); }

.ticker {
    position: relative;
    padding-block: .8rem;
    background: linear-gradient(90deg, rgba(var(--cue-rgb), .06), rgba(0, 0, 0, .35), rgba(var(--cue-rgb), .06));
    box-shadow: inset 0 0 0 1px var(--line);
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    transition: background var(--cue-ease);
    --cut: 12px;
}

.ticker-track {
    display: flex;
    width: max-content;
    animation: marquee 38s linear infinite;
}

.ticker:hover .ticker-track { animation-play-state: paused; }

.ticker-track > div { display: flex; align-items: center; }

.ticker-track b {
    font-family: var(--f-display);
    font-size: clamp(.86rem, 2.2vw, 1.05rem);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--chrome-300);
    padding-inline: clamp(.9rem, 2.4vw, 1.6rem);
    white-space: nowrap;
}

.ticker-track em {
    width: 5px; height: 5px;
    background: rgb(var(--cue-rgb));
    box-shadow: 0 0 8px rgb(var(--cue-rgb));
    transition: background var(--cue-ease), box-shadow var(--cue-ease);
    transform: rotate(45deg);
    flex: none;
}

@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 10. Stats ---------- */
.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.6rem, 4vw, 2.4rem) .6rem;
}

@media (min-width: 820px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat { position: relative; text-align: center; }

@media (min-width: 820px) {
    .stat + .stat::before {
        content: "";
        position: absolute;
        left: 0; top: 12%; bottom: 12%;
        width: 1px;
        background: linear-gradient(to bottom, transparent, var(--gold-line), transparent);
    }
}

.stat b {
    display: block;
    font-family: var(--f-mono);
    font-size: clamp(2rem, 6.4vw, 3.4rem);
    font-weight: 700;
    line-height: 1;
    color: var(--accent);
    text-shadow: 0 0 26px rgba(var(--cue-rgb), calc(.45 * var(--cue-glow)));
    transition: text-shadow var(--cue-ease), color var(--cue-ease);
    font-variant-numeric: tabular-nums;
}

.stat span {
    display: block;
    margin-top: .7rem;
    font-family: var(--f-mono);
    font-size: clamp(.56rem, 1.5vw, .66rem);
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--chrome-600);
}

/* ---------- 11. Sektions-Kopf (Cue-Label) ---------- */
.shead {
    display: grid;
    gap: clamp(.7rem, 1.8vw, 1.05rem);
    margin-bottom: clamp(2rem, 4.5vw, 3.4rem);
}

@media (min-width: 900px) {
    .shead {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "cue cue" "main aside";
        align-items: end;
        column-gap: clamp(1.2rem, 3vw, 2.4rem);
    }
    .shead > .cue { grid-area: cue; }
    .shead > .shead-aside { grid-area: aside; text-align: right; padding-bottom: .35rem; }
    .shead > div:not(.shead-aside) { grid-area: main; }
}

.cue {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-family: var(--f-mono);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
    transition: color var(--cue-ease);
}

.cue::before {
    content: "";
    width: clamp(18px, 4vw, 34px); height: 1px;
    background: var(--accent);
    transition: background var(--cue-ease);
}

.shead p { color: var(--chrome-600); max-width: 52ch; font-size: .95rem; }

/* ---------- 12. Event-Konfigurator ---------- */
.events {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(.6rem, 1.6vw, 1rem);
}

@media (min-width: 760px) { .events { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .events { grid-template-columns: repeat(6, 1fr); } }

.ev {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    padding: clamp(1rem, 2.4vw, 1.4rem);
    text-align: left;
    background: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .4));
    box-shadow: inset 0 0 0 1px var(--line);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
    overflow: hidden;
    min-height: 118px;
    --cut: 12px;
}

.ev::before {
    content: "";
    position: absolute;
    inset: auto -20% -60% -20%;
    height: 130%;
    background: radial-gradient(ellipse at 50% 100%, rgba(212, 165, 68, .34), transparent 62%);
    opacity: 0;
    transition: opacity .5s ease;
}

.ev:hover, .ev:focus-visible {
    transform: translateY(-4px);
    box-shadow: inset 0 0 0 1px var(--gold-line), 0 14px 34px rgba(0, 0, 0, .55);
}

.ev:hover::before, .ev:focus-visible::before { opacity: 1; }

.ev .ico {
    width: 24px; height: 24px;
    color: var(--gold-400, var(--gold-500));
    position: relative;
    transition: transform .45s var(--ease), color .4s ease;
}

.ev:hover .ico { transform: scale(1.12) translateY(-2px); color: var(--gold-200); }

.ev b {
    position: relative;
    font-family: var(--f-display);
    font-size: clamp(.92rem, 2.3vw, 1.05rem);
    font-weight: 700;
    color: var(--chrome-100);
    letter-spacing: -.005em;
}

.ev i {
    position: relative;
    margin-top: auto;
    font-family: var(--f-mono);
    font-size: .6rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--chrome-600);
    transition: color .35s ease;
}

.ev:hover i { color: var(--gold-500); }

/* ---------- 13. Leistungen ---------- */
.svcs {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(.8rem, 2vw, 1.3rem);
}

@media (min-width: 620px) { .svcs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .svcs { grid-template-columns: repeat(3, 1fr); } }

.svc {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    overflow: hidden;
    background: var(--ink-700);
    box-shadow: inset 0 0 0 1px var(--line);
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
    aspect-ratio: 4 / 3;
    --cut: 16px;
}

@media (min-width: 620px) { .svc { aspect-ratio: 5 / 4; } }

.svc img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(.55) brightness(.62) contrast(1.06);
    transform: scale(1.03);
    transition: transform .8s var(--ease), filter .6s ease;
}

.svc::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(6, 7, 9, .96) 6%, rgba(6, 7, 9, .58) 44%, rgba(6, 7, 9, .1) 100%);
}

.svc:hover, .svc:focus-visible {
    transform: translateY(-5px);
    box-shadow: inset 0 0 0 1px var(--gold-line), 0 22px 48px rgba(0, 0, 0, .6);
}

.svc:hover img, .svc:focus-visible img {
    transform: scale(1.1);
    filter: grayscale(0) brightness(.78) contrast(1.04);
}

.svc-body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: clamp(1rem, 2.6vw, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.svc-body .ico {
    width: 26px; height: 26px;
    color: var(--gold-300);
    filter: drop-shadow(0 0 10px rgba(212, 165, 68, .5));
}

.svc-body h3 { font-size: clamp(1.08rem, 2.6vw, 1.3rem); }

.svc-body p {
    font-size: .8rem;
    line-height: 1.5;
    color: var(--chrome-500);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .55s var(--ease), opacity .45s ease;
}

.svc:hover .svc-body p, .svc:focus-visible .svc-body p { max-height: 4.6em; opacity: 1; }

.svc-more {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    font-family: var(--f-mono);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
    transition: color var(--cue-ease);
}

.svc-more .ico { width: 13px; height: 13px; color: inherit; filter: none; transition: transform .4s var(--ease); }
.svc:hover .svc-more .ico { transform: translateX(4px); }

/* Chrom-Variante für Abwechslung im Raster */
.svc.silver .svc-body .ico { color: var(--chrome-200); filter: drop-shadow(0 0 10px rgba(222, 219, 212, .35)); }
.svc.silver .svc-more { color: var(--chrome-300); }
.svc.silver:hover { box-shadow: inset 0 0 0 1px var(--line-strong), 0 22px 48px rgba(0, 0, 0, .6); }

/* ---------- 14. Prozess ---------- */
.steps {
    display: grid;
    gap: clamp(1.2rem, 3vw, 2rem);
    counter-reset: st;
}

@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step {
    position: relative;
    padding: clamp(1.4rem, 3vw, 2rem);
    background: linear-gradient(165deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .35));
    box-shadow: inset 0 0 0 1px var(--line);
    --cut: 16px;
}

.step-n {
    font-family: var(--f-mono);
    font-size: clamp(2.2rem, 6vw, 3.2rem);
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--gold-700);
    margin-bottom: .8rem;
    transition: color .5s ease, -webkit-text-stroke-color .5s ease;
}

.step:hover .step-n { color: rgba(212, 165, 68, .14); -webkit-text-stroke-color: var(--gold-500); }

.step h3 { margin-bottom: .55rem; font-size: clamp(1.1rem, 2.4vw, 1.3rem); }
.step p { font-size: .92rem; color: var(--chrome-500); }

@media (min-width: 860px) {
    .step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: clamp(1.4rem, 3vw, 2rem);
        right: calc(clamp(1.2rem, 3vw, 2rem) * -1);
        width: clamp(1.2rem, 3vw, 2rem);
        height: 1px;
        background: linear-gradient(90deg, var(--gold-600), transparent);
    }
}

/* ---------- 15. Full-Bleed-Band ---------- */
.band {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3.4rem, 8vw, 7rem);
    scroll-margin-top: var(--nav-h);
    border-block: 1px solid var(--line);
}

.band-bg {
    position: absolute;
    inset: -12% 0;
    z-index: 0;
}

.band-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(.4) brightness(.4) contrast(1.08);
    will-change: transform;
}

.band-bg::after {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(120% 90% at 18% 50%, rgba(6, 7, 9, .96) 0%, rgba(6, 7, 9, .72) 46%, rgba(6, 7, 9, .5) 100%),
        linear-gradient(to top, var(--ink-900), transparent 55%);
}

.band-in { position: relative; z-index: 2; }

.band-grid { display: grid; gap: clamp(1.6rem, 4vw, 3rem); }

@media (min-width: 940px) { .band-grid { grid-template-columns: 1.1fr .9fr; align-items: center; } }

.checks { display: grid; gap: .7rem; margin-top: clamp(1.2rem, 3vw, 1.8rem); }

.checks li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: .95rem;
    color: var(--chrome-300);
}

.checks .ico {
    width: 19px; height: 19px;
    margin-top: .28em;
    flex: none;
    color: var(--accent);
    transition: color var(--cue-ease);
}

.quote-card {
    padding: clamp(1.4rem, 3.4vw, 2.2rem);
    background: rgba(6, 7, 9, .72);
    backdrop-filter: blur(12px);
    box-shadow: inset 0 0 0 1px var(--gold-line), 0 20px 50px rgba(0, 0, 0, .6);
    --cut: 20px;
}

.quote-card .big {
    font-family: var(--f-display);
    font-size: clamp(1.5rem, 4.4vw, 2.4rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--chrome-100);
    margin-bottom: .8rem;
}

.quote-card p { font-size: .95rem; color: var(--chrome-500); }

/* ---------- 16. Video-Karten ---------- */
.films {
    display: grid;
    gap: clamp(.9rem, 2.2vw, 1.4rem);
}

@media (min-width: 760px) { .films { grid-template-columns: repeat(3, 1fr); } }

.film {
    position: relative;
    overflow: hidden;
    background: #000;
    box-shadow: inset 0 0 0 1px var(--line);
    aspect-ratio: 16 / 9;
    transition: box-shadow .5s var(--ease), transform .5s var(--ease);
    --cut: 14px;
}

.film:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--gold-line), 0 20px 44px rgba(0, 0, 0, .6); }

.film video, .film img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.film-btn {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    background: linear-gradient(to top, rgba(6, 7, 9, .9), rgba(6, 7, 9, .25) 60%, rgba(6, 7, 9, .5));
    transition: opacity .4s ease;
}

.film.playing .film-btn { opacity: 0; pointer-events: none; }

.film-play {
    width: clamp(52px, 12vw, 66px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(212, 165, 68, .16);
    box-shadow: inset 0 0 0 1px var(--gold-line), 0 0 30px rgba(212, 165, 68, .3);
    backdrop-filter: blur(6px);
    transition: transform .4s var(--ease), background .4s ease;
}

.film-play .ico { width: 40%; height: 40%; color: var(--gold-200); }
.film:hover .film-play { transform: scale(1.1); background: rgba(212, 165, 68, .3); }

.film-label {
    position: absolute;
    left: clamp(.8rem, 2vw, 1.1rem);
    bottom: clamp(.7rem, 2vw, 1rem);
    z-index: 4;
    font-family: var(--f-mono);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-300);
    text-shadow: 0 2px 8px #000;
    pointer-events: none;
    transition: opacity .4s ease;
}

.film.playing .film-label { opacity: 0; }

/* Horizontale Produktions-Leiste */
.evstrip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 1fr);
    gap: clamp(.5rem, 1.4vw, .9rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: .6rem;
    scrollbar-width: thin;
    scrollbar-color: var(--gold-700) transparent;
}

.evstrip::-webkit-scrollbar { height: 5px; }
.evstrip::-webkit-scrollbar-track { background: rgba(255, 255, 255, .05); }
.evstrip::-webkit-scrollbar-thumb { background: var(--gold-700); }

.evstrip button {
    position: relative;
    scroll-snap-align: start;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--ink-700);
    box-shadow: inset 0 0 0 1px var(--line);
    --cut: 10px;
}

.evstrip img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(.5) brightness(.78);
    transition: transform .7s var(--ease), filter .5s ease;
}

.evstrip button:hover img, .evstrip button:focus-visible img {
    transform: scale(1.07);
    filter: grayscale(0) brightness(1);
}

/* ---------- 17. KI-Vorschau ---------- */
.ki-grid { display: grid; gap: clamp(1.6rem, 4vw, 2.8rem); }

@media (min-width: 960px) { .ki-grid { grid-template-columns: 1.05fr .95fr; align-items: start; } }

.compare {
    position: relative;
    overflow: hidden;
    background: #000;
    box-shadow: inset 0 0 0 1px var(--gold-line), 0 22px 55px rgba(0, 0, 0, .6);
    touch-action: pan-y;
    user-select: none;
    aspect-ratio: 1024 / 559;
    --cut: 16px;
}

.compare img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.compare .after { clip-path: inset(0 0 0 var(--pos, 50%)); }

.compare-handle {
    position: absolute;
    top: 0; bottom: 0;
    left: var(--pos, 50%);
    width: 2px;
    background: var(--gold-300);
    box-shadow: 0 0 14px var(--gold-300);
    transform: translateX(-1px);
    z-index: 3;
    pointer-events: none;
}

.compare-knob {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(6, 7, 9, .85);
    box-shadow: inset 0 0 0 1px var(--gold-line), 0 0 22px rgba(212, 165, 68, .5);
    color: var(--gold-200);
}

.compare-knob .ico { width: 20px; height: 20px; }

.compare-tag {
    position: absolute;
    top: .7rem;
    z-index: 2;
    padding: .3rem .6rem;
    font-family: var(--f-mono);
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    background: rgba(6, 7, 9, .8);
    color: var(--chrome-300);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    pointer-events: none;
}

.compare-tag.l { left: .7rem; }
.compare-tag.r { right: .7rem; color: var(--gold-300); box-shadow: inset 0 0 0 1px var(--gold-line); }

.compare-range {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%; height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
}

/* ---------- 18. Formulare ---------- */
.field { display: grid; gap: .45rem; }

.field > label, .flabel {
    font-family: var(--f-mono);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--chrome-600);
}

.inp {
    width: 100%;
    padding: .85rem 1rem;
    font-family: var(--f-body);
    font-size: .95rem;
    color: var(--chrome-100);
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--line-strong);
    outline: none;
    transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
    --cut: 10px;
}

.inp::placeholder { color: var(--chrome-700); }

.inp:focus {
    border-color: var(--gold-500);
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 0 0 3px rgba(212, 165, 68, .14);
}

select.inp {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4a544' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 17px;
    padding-right: 2.6rem;
}

select.inp option { background: var(--ink-700); color: var(--chrome-100); }

textarea.inp { resize: vertical; min-height: 130px; line-height: 1.6; }

.form-grid { display: grid; gap: .9rem; }
@media (min-width: 620px) { .form-grid.two { grid-template-columns: 1fr 1fr; } }

/* Chip-Checkboxen */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .85rem;
    font-family: var(--f-mono);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--chrome-500);
    background: rgba(255, 255, 255, .03);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    cursor: pointer;
    transition: color .3s ease, box-shadow .3s ease, background .3s ease;
    --cut: 8px;
}

.chip input { position: absolute; opacity: 0; pointer-events: none; }

.chip .ico { width: 14px; height: 14px; opacity: .35; transition: opacity .3s ease, transform .3s ease; }

.chip:hover { color: var(--chrome-200); box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 0 1px var(--gold-line); }

.chip:has(input:checked) {
    color: var(--gold-200);
    background: rgba(212, 165, 68, .12);
    box-shadow: inset 0 0 0 1px var(--gold-line), 0 0 16px rgba(212, 165, 68, .18);
}

.chip:has(input:checked) .ico { opacity: 1; transform: scale(1.05); }

.chip:has(input:focus-visible) { outline: 2px solid var(--gold-300); outline-offset: 2px; }

/* Datei-Upload */
.drop {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem;
    background: rgba(255, 255, 255, .025);
    box-shadow: inset 0 0 0 1px dashed var(--line-strong);
    border: 1px dashed var(--line-strong);
    cursor: pointer;
    transition: border-color .3s ease, background .3s ease;
    --cut: 10px;
}

.drop:hover, .drop.hot { border-color: var(--gold-500); background: rgba(212, 165, 68, .07); }

.drop .ico { width: 22px; height: 22px; color: var(--gold-500); flex: none; }

.drop span {
    font-family: var(--f-mono);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--chrome-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drop input { display: none; }

.form-note {
    font-family: var(--f-mono);
    font-size: .6rem;
    letter-spacing: .08em;
    color: var(--chrome-700);
    line-height: 1.6;
}

.form-msg {
    display: none;
    padding: .85rem 1rem;
    font-size: .88rem;
    --cut: 10px;
}

.form-msg.ok { display: block; color: var(--gold-100); background: rgba(212, 165, 68, .14); box-shadow: inset 0 0 0 1px var(--gold-line); }
.form-msg.err { display: block; color: #ffc9c2; background: rgba(220, 70, 55, .14); box-shadow: inset 0 0 0 1px rgba(220, 70, 55, .4); }

.hp { position: absolute; left: -9999px; opacity: 0; }

/* ---------- 19. Mixer (Kontaktformular) ---------- */
.mixer {
    position: relative;
    padding: 1.6rem 1rem 1.1rem;
    background: linear-gradient(180deg, var(--ink-600), var(--ink-900));
    box-shadow: inset 0 0 0 1px var(--gold-line), inset 0 2px 14px rgba(0, 0, 0, .9), 0 0 34px rgba(212, 165, 68, .1);
    --cut: 14px;
}

.mixer-head {
    position: absolute;
    top: -8px; left: 50%;
    transform: translateX(-50%);
    padding-inline: .6rem;
    background: var(--ink-900);
    font-family: var(--f-mono);
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold-500);
    white-space: nowrap;
}

.mixer-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .45rem;
}

@media (min-width: 560px) { .mixer-board { gap: .9rem; } }

.chan {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: .6rem .2rem .5rem;
    background: rgba(0, 0, 0, .5);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
    --cut: 7px;
}

.chan-name {
    font-family: var(--f-mono);
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--chrome-600);
    text-align: center;
}

@media (min-width: 560px) { .chan-name { font-size: .58rem; letter-spacing: .16em; } }

.fader-wrap {
    position: relative;
    height: 132px;
    width: 34px;
    display: grid;
    place-items: center;
}

@media (min-width: 560px) { .fader-wrap { height: 168px; width: 38px; } }

.meter {
    position: absolute;
    inset: 7px 0;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    pointer-events: none;
}

.meter i {
    width: 19px; height: 3px;
    margin-inline: auto;
    background: rgba(255, 255, 255, .07);
    transition: background .12s linear, box-shadow .12s linear;
}

@media (min-width: 560px) { .meter i { width: 23px; height: 4px; } }

.meter i.on { background: rgb(var(--cue-rgb)); box-shadow: 0 0 5px rgb(var(--cue-rgb)); }
.meter i.on.warm { background: #f0a83c; box-shadow: 0 0 6px #f0a83c; }
.meter i.on.hot { background: #e04a34; box-shadow: 0 0 7px #e04a34; }

.fader {
    -webkit-appearance: none;
    appearance: none;
    writing-mode: vertical-lr;
    direction: rtl;
    width: 30px;
    height: 132px;
    background: transparent;
    cursor: grab;
    position: relative;
    z-index: 2;
    margin: 0;
}

@media (min-width: 560px) { .fader { height: 168px; } }

.fader:active { cursor: grabbing; }

.fader::-webkit-slider-runnable-track {
    width: 4px;
    background: linear-gradient(to top, rgba(212, 165, 68, .5), rgba(255, 255, 255, .07));
    box-shadow: inset 0 0 4px rgba(0, 0, 0, .9);
}

.fader::-moz-range-track {
    width: 4px;
    background: linear-gradient(to top, rgba(212, 165, 68, .5), rgba(255, 255, 255, .07));
    box-shadow: inset 0 0 4px rgba(0, 0, 0, .9);
}

.fader::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px; height: 15px;
    background: linear-gradient(180deg, #eee 0%, #8d8b86 46%, #55534e 54%, #16181c 100%);
    border: 1px solid #000;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .55);
}

.fader::-moz-range-thumb {
    width: 30px; height: 15px;
    background: linear-gradient(180deg, #eee 0%, #8d8b86 46%, #55534e 54%, #16181c 100%);
    border: 1px solid #000;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .55);
}

.chan-val {
    font-family: var(--f-mono);
    font-size: .6rem;
    font-weight: 700;
    color: var(--gold-300);
    background: #000;
    padding: 3px 5px;
    min-width: 46px;
    text-align: center;
    letter-spacing: .04em;
    box-shadow: inset 0 0 5px rgba(212, 165, 68, .3), 0 0 8px rgba(212, 165, 68, .14);
    border: 1px solid var(--gold-line);
    font-variant-numeric: tabular-nums;
}

@media (min-width: 560px) { .chan-val { font-size: .66rem; min-width: 54px; } }

/* ---------- 20. Kontakt-Layout ---------- */
.contact-grid { display: grid; gap: clamp(1.8rem, 4vw, 3rem); }

@media (min-width: 960px) { .contact-grid { grid-template-columns: .9fr 1.1fr; align-items: start; } }

.contact-lines { display: grid; gap: .8rem; margin-block: clamp(1.4rem, 3vw, 2rem); }

.cline {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem 1rem;
    background: rgba(255, 255, 255, .03);
    box-shadow: inset 0 0 0 1px var(--line);
    transition: box-shadow .35s ease, transform .35s var(--ease), background .35s ease;
    --cut: 10px;
}

.cline:hover {
    transform: translateX(3px);
    background: rgba(212, 165, 68, .06);
    box-shadow: inset 0 0 0 1px var(--gold-line);
}

.cline .ico { width: 21px; height: 21px; color: var(--accent); flex: none; transition: color var(--cue-ease); }

.cline div { display: flex; flex-direction: column; min-width: 0; }

.cline small {
    font-family: var(--f-mono);
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--chrome-700);
}

.cline b {
    font-family: var(--f-display);
    font-size: clamp(.95rem, 2.4vw, 1.1rem);
    font-weight: 700;
    color: var(--chrome-100);
    word-break: break-word;
}

/* ---------- 21. FAQ ---------- */
.faq { display: grid; gap: .6rem; max-width: 800px; }

.qa {
    background: rgba(255, 255, 255, .025);
    box-shadow: inset 0 0 0 1px var(--line);
    transition: box-shadow .35s ease, background .35s ease;
    --cut: 12px;
}

.qa[open] { background: rgba(212, 165, 68, .06); box-shadow: inset 0 0 0 1px var(--gold-line); }

.qa summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--f-display);
    font-size: clamp(.92rem, 2.2vw, 1.02rem);
    font-weight: 600;
    color: var(--chrome-100);
    transition: color .3s ease;
}

.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--gold-200); }

.qa summary .ico {
    width: 17px; height: 17px;
    flex: none;
    color: var(--accent);
    transition: transform .4s var(--ease), color var(--cue-ease);
}

.qa[open] summary .ico { transform: rotate(45deg); }

.qa-body {
    padding: 0 1.15rem 1.1rem;
    font-size: .92rem;
    color: var(--chrome-500);
    animation: qaIn .4s var(--ease);
}

@keyframes qaIn { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- 22. Galerie ---------- */
.gal {
    columns: 2;
    column-gap: clamp(.5rem, 1.4vw, .9rem);
}

@media (min-width: 700px) { .gal { columns: 3; } }
@media (min-width: 1060px) { .gal { columns: 4; } }

.gal button {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: clamp(.5rem, 1.4vw, .9rem);
    overflow: hidden;
    background: var(--ink-700);
    break-inside: avoid;
    --cut: 10px;
}

.gal img {
    width: 100%;
    transition: transform .7s var(--ease), filter .5s ease;
    filter: grayscale(.35) brightness(.82);
}

.gal button::after {
    content: "";
    position: absolute; inset: 0;
    box-shadow: inset 0 0 0 1px var(--line);
    transition: box-shadow .4s ease;
}

.gal button:hover img, .gal button:focus-visible img {
    transform: scale(1.07);
    filter: grayscale(0) brightness(1);
}

.gal button:hover::after, .gal button:focus-visible::after {
    box-shadow: inset 0 0 0 1px var(--gold-line), inset 0 0 40px rgba(212, 165, 68, .18);
}

.gal-tag {
    position: absolute;
    left: .55rem; bottom: .5rem;
    z-index: 2;
    font-family: var(--f-mono);
    font-size: .54rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--gold-300);
    text-shadow: 0 1px 6px #000;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .4s ease, transform .4s var(--ease);
}

.gal button:hover .gal-tag, .gal button:focus-visible .gal-tag { opacity: 1; transform: translateY(0); }

/* ---------- 23. Team ---------- */
.team {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(.6rem, 1.8vw, 1.1rem);
}

@media (min-width: 700px) { .team { grid-template-columns: repeat(4, 1fr); } }

.mate {
    position: relative;
    overflow: hidden;
    background: var(--ink-700);
    box-shadow: inset 0 0 0 1px var(--line);
    aspect-ratio: 3 / 4;
    transition: box-shadow .45s ease, transform .45s var(--ease);
    --cut: 12px;
}

.mate:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--gold-line), 0 18px 40px rgba(0, 0, 0, .55); }

.mate img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(.7) contrast(1.05);
    transition: filter .6s ease, transform .8s var(--ease);
}

.mate:hover img { filter: grayscale(0) brightness(.92); transform: scale(1.06); }

.mate::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(6, 7, 9, .95) 4%, rgba(6, 7, 9, .35) 42%, transparent 72%);
}

.mate-body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: clamp(.7rem, 2vw, 1.05rem);
}

.mate-body b {
    display: block;
    font-family: var(--f-display);
    font-size: clamp(.98rem, 2.4vw, 1.15rem);
    font-weight: 700;
    color: var(--chrome-100);
    line-height: 1.15;
}

.mate-body span {
    display: block;
    margin-top: .25rem;
    font-family: var(--f-mono);
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
    transition: color var(--cue-ease);
}

.mate.open-slot {
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1rem;
    background: linear-gradient(160deg, rgba(212, 165, 68, .07), rgba(0, 0, 0, .4));
    box-shadow: inset 0 0 0 1px dashed var(--gold-line);
    border: 1px dashed var(--gold-line);
}

.mate.open-slot::after { display: none; }
.mate.open-slot .ico { width: 30px; height: 30px; color: var(--gold-600); margin-bottom: .6rem; }

/* ---------- 24. Partner ---------- */
.partner-row {
    grid-column: 1 / -1;
    padding-top: clamp(1.6rem, 4vw, 2.6rem);
    margin-top: clamp(.6rem, 2vw, 1.2rem);
    border-top: 1px solid var(--line);
}

.partners {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(.6rem, 1.6vw, 1rem);
    margin-top: 1.1rem;
}

@media (min-width: 620px) { .partners { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 940px) { .partners { grid-template-columns: repeat(5, 1fr); } }

.pt {
    position: relative;
    display: grid;
    place-items: center;
    padding: clamp(.6rem, 1.6vw, .85rem);
    background: rgba(255, 255, 255, .035);
    box-shadow: inset 0 0 0 1px var(--line);
    overflow: hidden;
    transition: box-shadow .55s ease, transform .5s var(--ease);
    --cut: 12px;
}

/* Ungerade Logo-Anzahl: letztes Tile füllt die Restbreite */
.partners > .pt:nth-child(5) { grid-column: span 2; }
@media (min-width: 620px) { .partners > .pt:nth-child(5) { grid-column: span 3; } }
@media (min-width: 940px) { .partners > .pt:nth-child(5) { grid-column: auto; } }

/* Lichtkegel von oben */
.pt::before {
    content: "";
    position: absolute;
    top: -58%; left: 50%;
    width: 78%; height: 200%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, rgba(251, 241, 207, .45) 0%, rgba(212, 165, 68, .18) 26%, transparent 56%);
    clip-path: polygon(36% 0, 64% 0, 100% 100%, 0 100%);
    filter: blur(10px);
    opacity: 0;
    transition: opacity .6s ease;
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: screen;
}

/* Helle Platte: die Logos sind gemischt (dunkel auf transparent, weiße Boxen,
   ein Foto) — nur auf hellem Grund sind alle fünf lesbar. */
.pt-plate {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: clamp(74px, 11vw, 104px);
    padding: .7rem .9rem;
    background: var(--chrome-200);
    border-radius: 3px;
    filter: grayscale(1) brightness(.94) contrast(1.02);
    opacity: .62;
    transition: filter .6s ease, opacity .6s ease, transform .6s var(--ease);
}

/* Breite ausnutzen, Höhe begrenzen — die fünf Logos haben sehr
   unterschiedliche Seitenverhältnisse, contain verhindert Verzerrung. */
.pt-plate img {
    width: 100%;
    height: auto;
    max-height: clamp(52px, 8vw, 78px);
    object-fit: contain;
}

.pt.lit, .pt:hover {
    box-shadow: inset 0 0 0 1px var(--gold-line), 0 0 28px rgba(212, 165, 68, .28);
    transform: translateY(-3px);
}

.pt.lit::before, .pt:hover::before { opacity: 1; }

.pt.lit .pt-plate, .pt:hover .pt-plate {
    filter: none;
    opacity: 1;
    transform: scale(1.02);
}

/* ---------- 25. Overlays (Modal / Sheet / Lightbox) ---------- */
.ov {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: clamp(.6rem, 3vw, 2rem);
    background: rgba(3, 4, 5, .82);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility .4s;
}

.ov.open { opacity: 1; visibility: visible; }

.ov-panel {
    position: relative;
    width: 100%;
    max-width: 880px;
    max-height: min(88vh, 900px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ink-800);
    box-shadow: inset 0 0 0 1px var(--line-strong), 0 40px 90px rgba(0, 0, 0, .8);
    transform: perspective(1400px) rotateX(-7deg) translateY(50px) scale(.94);
    opacity: 0;
    transition: transform .55s var(--ease), opacity .45s ease;
    --cut: 20px;
    -webkit-overflow-scrolling: touch;
}

.ov.open .ov-panel { transform: none; opacity: 1; }

.ov-close {
    position: absolute;
    top: .7rem; right: .7rem;
    z-index: 20;
    width: 42px; aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(6, 7, 9, .8);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    color: var(--chrome-200);
    backdrop-filter: blur(8px);
    transition: color .3s ease, box-shadow .3s ease, transform .3s var(--ease);
}

.ov-close:hover { color: var(--gold-200); box-shadow: inset 0 0 0 1px var(--gold-line); transform: rotate(90deg); }
.ov-close .ico { width: 20px; height: 20px; }

.ov-hero {
    position: relative;
    aspect-ratio: 16 / 8;
    overflow: hidden;
    background: #000;
}

.ov-hero img { width: 100%; height: 100%; object-fit: cover; }

.ov-hero::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top, var(--ink-800) 2%, rgba(10, 12, 15, .45) 55%, transparent);
}

.ov-body { padding: clamp(1.2rem, 3.4vw, 2.2rem); }

.ov-icon {
    width: 46px; aspect-ratio: 1;
    display: grid;
    place-items: center;
    margin-bottom: .9rem;
    background: rgba(212, 165, 68, .12);
    box-shadow: inset 0 0 0 1px var(--gold-line);
    color: var(--gold-300);
    --cut: 10px;
}

.ov-icon .ico { width: 22px; height: 22px; }

.ov-body h2 { margin-bottom: .7rem; font-size: clamp(1.5rem, 4.4vw, 2.2rem); }

.ov-intro { color: var(--chrome-400, var(--chrome-300)); margin-bottom: 1.4rem; }

.ov-list-label {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .8rem;
    font-family: var(--f-mono);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-500);
}

.ov-list-label::after {
    content: "";
    flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--gold-line), transparent);
}

.ov-slogan {
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
    font-family: var(--f-display);
    font-size: clamp(1.05rem, 2.8vw, 1.35rem);
    font-weight: 700;
    color: var(--gold-200);
    letter-spacing: -.005em;
}

.ov-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem 1rem;
    margin-top: 1.5rem;
    padding: 1rem 1.15rem;
    background: rgba(212, 165, 68, .08);
    box-shadow: inset 0 0 0 1px var(--gold-line);
    --cut: 12px;
}

.ov-price small {
    font-family: var(--f-mono);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--chrome-600);
    width: 100%;
}

.ov-price b {
    font-family: var(--f-display);
    font-size: clamp(1.6rem, 5vw, 2.3rem);
    font-weight: 700;
    color: var(--gold-200);
    line-height: 1;
}

.ov-note { margin-top: .9rem; font-size: .82rem; line-height: 1.6; color: var(--chrome-600); }

.ov-actions { display: grid; gap: .6rem; margin-top: 1.5rem; }
@media (min-width: 520px) { .ov-actions { grid-auto-flow: column; justify-content: start; } }

/* Video-Overlay */
.ov-video .ov-panel { max-width: 1100px; background: #000; padding: 0; overflow: hidden; }
.ov-video video { width: 100%; aspect-ratio: 16 / 9; background: #000; }

/* Lightbox */
.lb { padding: 0; }

.lb-stage {
    position: relative;
    width: 100%; height: 100%;
    display: grid;
    place-items: center;
    padding: clamp(3rem, 8vw, 5rem) clamp(.6rem, 4vw, 4rem);
}

.lb-stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .9);
    opacity: 0;
    transform: scale(.96);
    transition: opacity .35s ease, transform .45s var(--ease);
    --cut: 8px;
}

.lb.open .lb-stage img.ready { opacity: 1; transform: none; }

.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px; aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(6, 7, 9, .7);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    color: var(--chrome-200);
    backdrop-filter: blur(8px);
    transition: color .3s ease, box-shadow .3s ease, transform .3s var(--ease);
    z-index: 5;
}

.lb-nav:hover { color: var(--gold-200); box-shadow: inset 0 0 0 1px var(--gold-line); }
.lb-nav .ico { width: 22px; height: 22px; }
.lb-prev { left: clamp(.5rem, 2vw, 1.6rem); }
.lb-next { right: clamp(.5rem, 2vw, 1.6rem); }
.lb-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lb-next:hover { transform: translateY(-50%) translateX(3px); }

.lb-count {
    position: absolute;
    left: 50%; bottom: clamp(1rem, 3vw, 1.8rem);
    transform: translateX(-50%);
    font-family: var(--f-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .22em;
    color: var(--chrome-500);
    z-index: 5;
}

.lb-count b { color: var(--gold-300); }

/* Paket-Sheet: auf Mobil von unten */
@media (max-width: 639px) {
    .ov-sheet { place-items: end stretch; padding: 0; }
    .ov-sheet .ov-panel {
        max-height: 90vh;
        clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px);
        transform: translateY(100%);
        opacity: 1;
    }
    .ov-sheet.open .ov-panel { transform: translateY(0); }
}

/* ---------- 26. Floating UI ---------- */
.fabs {
    position: fixed;
    right: 1rem; bottom: 1.25rem;
    z-index: 800;
    display: none;
    flex-direction: column;
    gap: .6rem;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .4s ease, transform .4s var(--ease);
}

@media (min-width: 900px) { .fabs { display: flex; } }

.fabs.show { opacity: 1; transform: none; }

.fab {
    position: relative;
    width: 50px; aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(140deg, rgba(var(--cue-rgb), 1), rgba(var(--cue-rgb), .58));
    color: var(--ink-900);
    box-shadow: 0 6px 20px rgba(var(--cue-rgb), .42), inset 0 1px 0 rgba(255, 255, 255, .4);
    transition: transform .35s var(--ease), box-shadow .35s ease;
}

.fab:hover { transform: scale(1.09); box-shadow: 0 10px 28px rgba(var(--cue-rgb), .68); }
.fab .ico { width: 21px; height: 21px; }

.fab-2 {
    background: linear-gradient(140deg, var(--ink-500), var(--ink-800));
    color: var(--chrome-300);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .6), inset 0 0 0 1px var(--line-strong);
}

.fab-2:hover { color: var(--chrome-100); box-shadow: 0 10px 26px rgba(0, 0, 0, .7), inset 0 0 0 1px var(--gold-line); }

.fab-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--gold-400, var(--gold-500));
    opacity: 0;
    animation: ring 2.6s ease-out infinite;
    pointer-events: none;
}

@keyframes ring { 0% { opacity: .8; transform: scale(.86); } 100% { opacity: 0; transform: scale(1.6); } }

/* Mobile Action-Bar */
.mbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 800;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--gold-line);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(110%);
    transition: transform .45s var(--ease);
}

.mbar.show { transform: none; }

@media (min-width: 900px) { .mbar { display: none; } }

.mbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .95rem .6rem;
    font-family: var(--f-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: rgba(6, 7, 9, .96);
    backdrop-filter: blur(14px);
    color: var(--chrome-200);
}

.mbar a.prime { background: linear-gradient(140deg, rgba(var(--cue-rgb), 1), rgba(var(--cue-rgb), .58)); color: var(--ink-900); }
.mbar .ico { width: 17px; height: 17px; }

body.has-mbar { padding-bottom: 56px; }
@media (min-width: 900px) { body.has-mbar { padding-bottom: 0; } }

/* Cookie-Banner */
.cookie {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 990;
    padding: 1rem var(--gut) calc(1rem + env(safe-area-inset-bottom));
    background: rgba(6, 7, 9, .97);
    backdrop-filter: blur(18px);
    border-top: 1px solid var(--gold-line);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .8);
    transform: translateY(110%);
    transition: transform .6s var(--ease);
}

.cookie.show { transform: none; }

.cookie-in {
    max-width: var(--shell);
    margin-inline: auto;
    display: grid;
    gap: .9rem;
    align-items: center;
}

@media (min-width: 820px) { .cookie-in { grid-template-columns: 1fr auto; gap: 1.6rem; } }

.cookie p { font-size: .84rem; line-height: 1.6; color: var(--chrome-500); }
.cookie-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.cookie-btns .btn { flex: 1 1 auto; padding: .7em 1.1em; font-size: .74rem; }

/* ---------- 27. Footer ---------- */
.foot {
    position: relative;
    padding-block: clamp(2.6rem, 6vw, 4.5rem) clamp(1.6rem, 3vw, 2.4rem);
    border-top: 1px solid var(--gold-line);
    background: linear-gradient(to bottom, rgba(212, 165, 68, .04), transparent 40%);
}

.foot-grid {
    display: grid;
    gap: clamp(1.6rem, 4vw, 3rem);
    padding-bottom: clamp(1.8rem, 4vw, 2.6rem);
    border-bottom: 1px solid var(--line);
}

@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.foot h4 {
    font-family: var(--f-mono);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1rem;
    transition: color var(--cue-ease);
}

.foot-links { display: grid; gap: .55rem; }

.foot-links a {
    font-size: .9rem;
    color: var(--chrome-500);
    transition: color .3s ease, transform .3s var(--ease);
    display: inline-block;
}

.foot-links a:hover { color: var(--gold-200); transform: translateX(3px); }

.foot img.mark { width: clamp(140px, 34vw, 210px); margin-bottom: 1rem; }

.foot-about { font-size: .9rem; color: var(--chrome-600); max-width: 40ch; }

.socials { display: flex; gap: .5rem; margin-top: 1.2rem; }

.socials a {
    width: 40px; aspect-ratio: 1;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .04);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    color: var(--chrome-400, var(--chrome-300));
    transition: color .3s ease, box-shadow .3s ease, transform .3s var(--ease);
    --cut: 9px;
}

.socials a:hover { color: var(--gold-200); box-shadow: inset 0 0 0 1px var(--gold-line); transform: translateY(-3px); }
.socials .ico { width: 19px; height: 19px; }

.foot-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding-top: clamp(1.2rem, 3vw, 1.8rem);
}

.foot-bar p, .foot-bar nav {
    font-family: var(--f-mono);
    font-size: .62rem;
    letter-spacing: .1em;
    color: var(--chrome-700);
}

.foot-bar nav { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.foot-bar nav a { color: var(--chrome-600); text-transform: uppercase; letter-spacing: .16em; }
.foot-bar nav a:hover { color: var(--gold-300); }

/* ---------- 28. Reveal-Animationen ---------- */
.rv {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.rv.in { opacity: 1; transform: none; }

.rv-stagger > * {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.rv-stagger.in > * { opacity: 1; transform: none; }
.rv-stagger.in > *:nth-child(1) { transition-delay: 0s; }
.rv-stagger.in > *:nth-child(2) { transition-delay: .07s; }
.rv-stagger.in > *:nth-child(3) { transition-delay: .14s; }
.rv-stagger.in > *:nth-child(4) { transition-delay: .21s; }
.rv-stagger.in > *:nth-child(5) { transition-delay: .28s; }
.rv-stagger.in > *:nth-child(6) { transition-delay: .35s; }
.rv-stagger.in > *:nth-child(7) { transition-delay: .42s; }
.rv-stagger.in > *:nth-child(8) { transition-delay: .49s; }
.rv-stagger.in > *:nth-child(9) { transition-delay: .56s; }
.rv-stagger.in > *:nth-child(10) { transition-delay: .63s; }
.rv-stagger.in > *:nth-child(11) { transition-delay: .7s; }

/* ---------- 29. Rechtstexte ---------- */
.legal-page { padding-top: calc(var(--nav-h) + clamp(2rem, 5vw, 3.4rem)); }

.legal {
    max-width: 78ch;
    font-size: .95rem;
    line-height: 1.75;
    color: var(--chrome-400, var(--chrome-300));
}

.legal h1 {
    font-size: clamp(1.9rem, 5.4vw, 3rem);
    margin-bottom: clamp(1.4rem, 3vw, 2rem);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gold-line);
}

.legal h2 {
    font-size: clamp(1.05rem, 2.6vw, 1.25rem);
    color: var(--gold-200);
    margin-top: 2.2rem;
    margin-bottom: .6rem;
}

.legal h3 { font-size: 1rem; color: var(--chrome-100); margin-top: 1.6rem; margin-bottom: .4rem; }

.legal p { margin-bottom: 1rem; }
.legal strong { color: var(--chrome-100); font-weight: 700; }

.legal ol, .legal ul { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.legal ol { list-style: decimal; }
.legal ul { list-style: none; }
.legal ol li, .legal ul li { margin-bottom: .7rem; }
.legal ol li::marker { color: var(--gold-600); font-family: var(--f-mono); font-size: .85em; }

.legal ul li { position: relative; }
.legal ul li::before {
    content: "";
    position: absolute;
    left: -1.1rem; top: .7em;
    width: 5px; height: 5px;
    background: var(--gold-600);
    transform: rotate(45deg);
}

.legal-card {
    display: grid;
    gap: 1.4rem;
    padding: clamp(1.1rem, 3vw, 1.6rem);
    margin-bottom: 1.6rem;
    background: rgba(255, 255, 255, .03);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    --cut: 14px;
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

@media (min-width: 700px) { .legal-card { grid-template-columns: 1fr 1fr; } }

.legal-card p { margin-bottom: .5rem; }
.legal-card > div > p:first-child { color: var(--chrome-100); font-weight: 700; font-size: 1.05rem; }

.legal-foot {
    margin-top: 3rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line);
    font-size: .82rem;
    color: var(--chrome-700);
    text-align: center;
}

.legal-foot p { margin-bottom: .4rem; }

.tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }

.tabs button {
    padding: .7rem 1.1rem;
    font-family: var(--f-display);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--chrome-500);
    background: rgba(255, 255, 255, .03);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    transition: color .3s ease, box-shadow .3s ease, background .3s ease;
    --cut: 10px;
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

.tabs button[aria-selected="true"] {
    color: var(--gold-200);
    background: rgba(212, 165, 68, .12);
    box-shadow: inset 0 0 0 1px var(--gold-line);
}

[role="tabpanel"][hidden] { display: none; }

.backlink {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.6rem;
    font-family: var(--f-mono);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--chrome-500);
    transition: color .3s ease;
}

.backlink:hover { color: var(--gold-200); }
.backlink .ico { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.backlink:hover .ico { transform: translateX(-3px); }

/* ---------- 30. Icon-Basis ---------- */
.ico {
    width: 1em; height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.ico-fill { fill: currentColor; stroke: none; }

/* ---------- 30b. Touch-Bedienung ----------
   Auf Fingergeräten brauchen auch Textlinks eine greifbare Höhe. */
@media (hover: none) {
    .tlink { padding-block: .5rem; }
    .brand { padding-block: .3rem; }
    .form-note a,
    .cookie p a,
    .foot-bar nav a { display: inline-block; padding-block: .3rem; }
    .ring-nav button { width: 46px; }
}

/* ---------- 31. Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .rv, .rv-stagger > * { opacity: 1 !important; transform: none !important; }
    .beam, .grain, .spot { display: none; }
    .ticker-track { animation: none; }
    .svc-body p { max-height: 4.6em; opacity: 1; }
}