:root {
      --bg: #070812;
      --ink: #f6f7fb;
      --muted: #aab2c5;
      --panel: rgba(255,255,255,.075);
      --panel-strong: rgba(255,255,255,.13);
      --line: rgba(255,255,255,.16);
      --primary: #00f5ff;
      --secondary: #ff2f70;
      --accent: #f7ff00;
      --danger: #ff3b22;
      --radius: 28px;
      --shadow: 0 28px 90px rgba(0,0,0,.46);
      --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --display: Arial Black, Impact, var(--font);
      --stage: url('./images/marvex-stage.svg');
      --emblem: url('./images/marvex-emblem.svg');
    }
    html[data-design="pulse-hero"] { --primary:#00f5ff; --secondary:#ff2f70; --accent:#f7ff00; --bg:#070812; }
    html[data-design="label-index"] { --primary:#ffffff; --secondary:#ff3b22; --accent:#a3ff12; --bg:#050505; --radius:8px; }
    html[data-design="sound-system"] { --primary:#f7ff00; --secondary:#00f5ff; --accent:#ff2f70; --bg:#101010; --radius:0; }
    html[data-design="metal-core"] { --primary:#d7d7d7; --secondary:#ff3b22; --accent:#9ca3af; --bg:#090606; --radius:4px; --display: Georgia, serif; }
    html[data-design="festival-bill"] { --primary:#ffb703; --secondary:#fb5607; --accent:#3a86ff; --bg:#160b06; --radius:20px; }
    html[data-design="editorial-artist"] { --primary:#111827; --secondary:#b91c1c; --accent:#0f766e; --bg:#f4f1ea; --ink:#10131a; --muted:#5d6574; --panel:rgba(12,16,22,.06); --panel-strong:rgba(12,16,22,.1); --line:rgba(12,16,22,.16); --shadow:0 22px 80px rgba(30,24,18,.18); --radius:18px; }
    html[data-design="club-terminal"] { --primary:#00ff9d; --secondary:#42a5ff; --accent:#faff00; --bg:#02070d; --radius:2px; }
    html[data-design="vinyl-drop"] { --primary:#e7c58f; --secondary:#9f1239; --accent:#fef3c7; --bg:#0f0b08; --radius:999px; --display: Georgia, serif; }
    html[data-design="magnetic-cards"] { --primary:#8b5cf6; --secondary:#22d3ee; --accent:#fb7185; --bg:#0f172a; --radius:34px; }
    html[data-design="cinematic-scroll"] { --primary:#f8fafc; --secondary:#e11d48; --accent:#38bdf8; --bg:#020617; --radius:24px; }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: radial-gradient(circle at 18% 4%, color-mix(in srgb, var(--secondary) 28%, transparent), transparent 30rem), radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 30rem), var(--bg);
      color: var(--ink);
      font-family: var(--font);
      line-height: 1.55;
      min-height: 100vh;
    }
    a { color: inherit; }
    img { max-width: 100%; display: block; }
    .site { min-height: 100vh; overflow: hidden; }
    .nav {
      position: fixed; z-index: 40; inset: 0 0 auto 0;
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
      padding: 1rem clamp(1rem, 4vw, 3rem);
      background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.06));
      backdrop-filter: blur(18px);
    }
    .brand { display:flex; align-items:center; gap:.8rem; text-decoration:none; font-weight:950; letter-spacing:.16em; text-transform:uppercase; }
    .brand-logo { width:54px; height:54px; border-radius: 16px; object-fit:cover; border:1px solid var(--line); box-shadow:0 0 30px color-mix(in srgb,var(--primary) 42%, transparent); background:#05060a; }
    .nav-links { display:flex; gap:.65rem; flex-wrap:wrap; justify-content:flex-end; }
    .nav a:not(.brand), .button, .chip, .platform, .social, .legal-link {
      border:1px solid var(--line); background:var(--panel); text-decoration:none; border-radius:999px; padding:.74rem 1rem; font-weight:800; backdrop-filter: blur(14px);
    }
    .button.primary { border:0; color:#030712; background:linear-gradient(135deg,var(--primary),var(--secondary)); }
    .button.ghost { background:transparent; }
    .button:hover, .nav a:not(.brand):hover, .platform:hover, .social:hover, .legal-link:hover { transform: translateY(-2px); border-color:var(--primary); }
    .hero { min-height: 100vh; padding: 8rem clamp(1rem, 5vw, 4rem) 5rem; position:relative; display:grid; place-items:center; }
    .hero::before { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.22)), var(--stage) center/cover; opacity:.78; }
    .hero::after { content:""; position:absolute; inset:auto 0 0; height:22vh; background:linear-gradient(0deg,var(--bg),transparent); }
    .hero-inner { position:relative; z-index:2; width:min(1240px,100%); display:grid; grid-template-columns: 1.05fr .95fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
    .eyebrow { text-transform:uppercase; letter-spacing:.22em; color:var(--primary); font-size:.82rem; font-weight:950; }
    h1, .section-title { font-family: var(--display); text-transform: uppercase; letter-spacing: -.06em; line-height:.84; margin:0; }
    h1 { font-size: clamp(4.2rem, 13vw, 12rem); text-shadow: 0 18px 70px rgba(0,0,0,.62); }
    .lead { color:var(--muted); max-width: 68ch; font-size:clamp(1.06rem, 1.6vw, 1.35rem); }
    .hero-actions, .badge-row, .legal-grid { display:flex; flex-wrap:wrap; gap:.75rem; }
    .platforms, .socials { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.8rem; }
    .chip { display:inline-flex; align-items:center; gap:.45rem; color:var(--ink); }
    .hero-card, .card { border:1px solid var(--line); background:linear-gradient(160deg,var(--panel-strong),rgba(0,0,0,.12)); border-radius:var(--radius); box-shadow:var(--shadow); backdrop-filter:blur(20px); }
    .hero-card { padding:clamp(1rem,2.5vw,1.5rem); }
    .hero-card img { border-radius:calc(var(--radius) - 8px); border:1px solid var(--line); aspect-ratio:1/1; object-fit:cover; }
    .player-block { display:grid; gap:.85rem; margin-top:1rem; }
    audio { width:100%; filter:drop-shadow(0 12px 28px rgba(0,0,0,.34)); }
    section { padding:clamp(4rem,8vw,8rem) clamp(1rem,5vw,4rem); position:relative; }
    .section-inner { width:min(1180px,100%); margin:auto; }
    .section-kicker { color:var(--secondary); font-size:.82rem; letter-spacing:.18em; text-transform:uppercase; font-weight:950; margin-bottom:.8rem; }
    .section-title { font-size:clamp(2.5rem,7vw,6.6rem); margin-bottom:1rem; }
    .grid { display:grid; gap:1rem; }
    .grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .card { padding:clamp(1.2rem,3vw,2rem); }
    .card h3 { margin:.2rem 0 .6rem; font-size:1.38rem; }
    .muted { color:var(--muted); }
    .spotify-frame { width:100%; min-height:352px; border:0; border-radius:18px; background:#111; }
    .logo-feature { width:min(360px, 100%); margin:0 auto 1rem; border-radius:28px; border:1px solid var(--line); box-shadow:var(--shadow); }
    .platform, .social { display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:center; min-height:72px; text-align:left; }
    .platform .icon, .social .icon { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; color:#030712; background:linear-gradient(135deg,var(--primary),var(--secondary)); font-weight:950; }
    .platform strong, .social strong { display:block; line-height:1.1; }
    .platform small, .social small { display:block; color:var(--muted); font-weight:650; margin-top:.15rem; }
    .track-list { display:grid; gap:1rem; }
    .track-item { border:1px solid var(--line); border-radius:calc(var(--radius) - 4px); padding:1rem; background:rgba(255,255,255,.055); display:grid; gap:.8rem; }
    .track-links { display:flex; flex-wrap:wrap; gap:.55rem; }
    .track-links a { border:1px solid var(--line); border-radius:999px; padding:.48rem .75rem; text-decoration:none; background:rgba(255,255,255,.07); font-weight:800; }
    .curation-note { margin-top:1rem; border-left:4px solid var(--primary); padding:1rem; background:rgba(255,255,255,.06); border-radius:14px; }
    .design-preview-grid { display:grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap:1rem; margin-top:1.5rem; }
    .design-tile { min-height:150px; border:1px solid var(--line); border-radius:var(--radius); padding:1rem; color:var(--ink); background:linear-gradient(145deg,var(--panel-strong),rgba(255,255,255,.03)); display:flex; flex-direction:column; justify-content:space-between; text-align:left; cursor:pointer; font:inherit; box-shadow:0 12px 40px rgba(0,0,0,.18); }
    .design-tile strong { font-family:var(--display); text-transform:uppercase; letter-spacing:-.04em; font-size:1.15rem; }
    .design-tile small { color:var(--muted); }
    footer { border-top:1px solid var(--line); padding:3rem clamp(1rem,5vw,4rem); background:rgba(0,0,0,.38); }
    .footer-inner { width:min(1180px,100%); margin:auto; display:grid; grid-template-columns:1fr auto; gap:1.5rem; align-items:start; }
    label { display:block; color:var(--muted); margin-bottom:.45rem; font-size:.9rem; }
    select { width:min(500px,100%); color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:.9rem 1rem; font:inherit; }
    .fineprint { color:var(--muted); font-size:.9rem; }

    /* 10 professionelle Layoutsysteme */
    html[data-design="pulse-hero"] .hero-inner { grid-template-columns: minmax(0,1.08fr) minmax(320px,.82fr); }
    html[data-design="pulse-hero"] .hero-card { transform: rotate(1.2deg); }
    html[data-design="pulse-hero"] #music .grid.two { grid-template-columns: .86fr 1.14fr; }

    html[data-design="label-index"] .nav { position:fixed; inset:0 auto 0 0; width:290px; height:100vh; align-items:flex-start; flex-direction:column; justify-content:flex-start; background:#050505; border-right:1px solid var(--line); }
    html[data-design="label-index"] .nav-links { flex-direction:column; margin-top:2rem; }
    html[data-design="label-index"] .site { padding-left:290px; }
    html[data-design="label-index"] .hero { min-height:86vh; place-items:end start; }
    html[data-design="label-index"] .hero::before { opacity:.28; width:50%; left:auto; }
    html[data-design="label-index"] .hero-inner { grid-template-columns: .92fr 1.08fr; align-items:end; }
    html[data-design="label-index"] h1 { font-size: clamp(3.8rem, 9vw, 9rem); }
    html[data-design="label-index"] .grid.three { grid-template-columns: 1fr; }
    html[data-design="label-index"] .card { border-radius:0; border-left:5px solid var(--secondary); box-shadow:none; }

    html[data-design="sound-system"] .hero { min-height:94vh; padding-bottom:8rem; }
    html[data-design="sound-system"] .hero-inner { grid-template-columns:1fr; text-align:center; max-width:980px; }
    html[data-design="sound-system"] .hero-card { order:-1; width:min(760px,100%); margin:auto; display:grid; grid-template-columns:220px 1fr; gap:1rem; align-items:center; text-align:left; border:3px solid var(--primary); box-shadow:14px 14px 0 var(--secondary); }
    html[data-design="sound-system"] h1 { text-shadow: 6px 6px 0 var(--secondary); }
    html[data-design="sound-system"] .platforms, html[data-design="sound-system"] .socials { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }

    html[data-design="metal-core"] body { background: linear-gradient(135deg,#090606,#141010); }
    html[data-design="metal-core"] .hero { place-items:stretch; }
    html[data-design="metal-core"] .hero::before { clip-path:polygon(0 0,100% 0,82% 100%,0 78%); opacity:.55; filter:grayscale(.75) contrast(1.35); }
    html[data-design="metal-core"] .hero-inner { grid-template-columns:.65fr 1.35fr; align-items:end; }
    html[data-design="metal-core"] .hero-card { grid-column:1; grid-row:1; border-radius:3px; }
    html[data-design="metal-core"] .hero-inner > div:first-child { grid-column:2; }
    html[data-design="metal-core"] h1 { letter-spacing:-.03em; text-shadow: 0 0 0 transparent; }
    html[data-design="metal-core"] .card { border-radius:2px; background:rgba(0,0,0,.38); border-top:4px solid var(--secondary); }

    html[data-design="festival-bill"] .hero { min-height:76vh; align-items:end; }
    html[data-design="festival-bill"] .hero-inner { grid-template-columns:1.3fr .7fr; align-items:end; }
    html[data-design="festival-bill"] h1 { font-size:clamp(5rem,15vw,14rem); }
    html[data-design="festival-bill"] .section-inner { width:min(1360px,100%); }
    html[data-design="festival-bill"] .grid.two { grid-template-columns:1.22fr .78fr; }
    html[data-design="festival-bill"] .grid.three { grid-template-columns:2fr 1fr 1fr; }
    html[data-design="festival-bill"] .card:nth-child(1) { min-height:260px; }

    html[data-design="editorial-artist"] .nav { position:sticky; background:rgba(244,241,234,.86); border-bottom:1px solid var(--line); }
    html[data-design="editorial-artist"] .hero { min-height:auto; padding-top:4rem; }
    html[data-design="editorial-artist"] .hero::before, html[data-design="editorial-artist"] .hero::after { display:none; }
    html[data-design="editorial-artist"] .hero-inner { grid-template-columns:repeat(12,1fr); gap:1.2rem; }
    html[data-design="editorial-artist"] .hero-inner > div:first-child { grid-column:1 / span 7; }
    html[data-design="editorial-artist"] .hero-card { grid-column:8 / span 5; background:#fff; }
    html[data-design="editorial-artist"] h1 { text-shadow:none; }
    html[data-design="editorial-artist"] section { padding-top:3.5rem; padding-bottom:3.5rem; }
    html[data-design="editorial-artist"] .grid.two { grid-template-columns:repeat(12,1fr); }
    html[data-design="editorial-artist"] .grid.two > *:first-child { grid-column:span 5; }
    html[data-design="editorial-artist"] .grid.two > *:last-child { grid-column:span 7; }

    html[data-design="club-terminal"] body { background-image:linear-gradient(color-mix(in srgb,var(--primary) 14%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--primary) 14%,transparent) 1px,transparent 1px); background-size:40px 40px; }
    html[data-design="club-terminal"] .nav { top:1rem; right:1rem; left:auto; width:min(390px,calc(100% - 2rem)); display:grid; border:1px solid var(--primary); background:rgba(2,7,13,.92); }
    html[data-design="club-terminal"] .nav-links { display:grid; grid-template-columns:repeat(2,1fr); }
    html[data-design="club-terminal"] .hero-inner { grid-template-columns:1fr 430px; }
    html[data-design="club-terminal"] .card, html[data-design="club-terminal"] .hero-card, html[data-design="club-terminal"] .button, html[data-design="club-terminal"] .chip { clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px)); border-color:var(--primary); }

    html[data-design="vinyl-drop"] .hero { min-height:105vh; }
    html[data-design="vinyl-drop"] .hero-inner { grid-template-columns:1fr; text-align:center; }
    html[data-design="vinyl-drop"] .hero-card { width:min(460px,100%); margin:auto; border-radius:50%; padding:1.4rem; }
    html[data-design="vinyl-drop"] .hero-card img { border-radius:50%; animation:spin 28s linear infinite; }
    html[data-design="vinyl-drop"] .hero-actions, html[data-design="vinyl-drop"] .badge-row { justify-content:center; }
    html[data-design="vinyl-drop"] .grid.two { grid-template-columns:1fr; }
    html[data-design="vinyl-drop"] .card { border-radius:28px; }
    @keyframes spin { to { transform: rotate(360deg); } }

    html[data-design="magnetic-cards"] .site { width:min(1440px,calc(100% - 2rem)); margin:1rem auto; border:1px solid var(--line); border-radius:36px; background:rgba(255,255,255,.045); }
    html[data-design="magnetic-cards"] .nav { position:sticky; top:1rem; margin:1rem; border-radius:999px; border:1px solid var(--line); background:rgba(15,23,42,.76); }
    html[data-design="magnetic-cards"] .hero { min-height:84vh; padding-top:4rem; }
    html[data-design="magnetic-cards"] .hero::before { inset:2rem; border-radius:34px; opacity:.32; }
    html[data-design="magnetic-cards"] .hero-inner { grid-template-columns:.75fr 1.25fr; }
    html[data-design="magnetic-cards"] .hero-card { order:-1; }
    html[data-design="magnetic-cards"] .grid.three { grid-template-columns:repeat(3,1fr); }
    html[data-design="magnetic-cards"] .card:nth-child(2) { transform:translateY(2rem) rotate(-1deg); }
    html[data-design="magnetic-cards"] .card:nth-child(3) { transform:translateY(-1rem) rotate(1deg); }

    html[data-design="cinematic-scroll"] .hero { min-height:115vh; place-items:end center; }
    html[data-design="cinematic-scroll"] .hero::before { opacity:.64; background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.2)), var(--stage) center/cover fixed; }
    html[data-design="cinematic-scroll"] .hero-inner { grid-template-columns:1fr; max-width:980px; text-align:left; }
    html[data-design="cinematic-scroll"] .hero-card { display:none; }
    html[data-design="cinematic-scroll"] section { min-height:72vh; display:grid; align-items:center; }
    html[data-design="cinematic-scroll"] .grid.two { grid-template-columns:.8fr 1.2fr; }
    html[data-design="cinematic-scroll"] .section-title { font-size:clamp(3rem,9vw,8rem); }

    @media (max-width: 980px) {
      .nav { position:absolute; align-items:flex-start; }
      .nav-links { display:none !important; }
      .hero-inner, .grid.two, .grid.three, .footer-inner { grid-template-columns:1fr !important; }
      .design-preview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      h1 { font-size:clamp(3.3rem,18vw,6rem); }
      html[data-design] .site { padding-left:0; width:auto; margin:0; border-radius:0; }
      html[data-design] .nav { inset:0 0 auto 0; width:auto; height:auto; margin:0; flex-direction:row; display:flex; border-radius:0; }
      html[data-design] .hero-card { order:0; display:block; transform:none; border-radius:var(--radius); width:auto; clip-path:none; }
      html[data-design] .hero-card img { border-radius:calc(var(--radius) - 8px); animation:none; }
      html[data-design="editorial-artist"] .hero-inner > div:first-child, html[data-design="editorial-artist"] .hero-card, html[data-design="editorial-artist"] .grid.two > * { grid-column:auto; }
      html[data-design="sound-system"] .hero-card { display:block; box-shadow:var(--shadow); }
    }