/* Bestehende Seitenbasis, Vinyl und Footer der BLACK-BALLOONS-Seite. */

    @font-face {
      font-family: "BB Display";
      src: url("/assets/bb-bandschrift-c.woff2?v=20261022-c1") format("woff2");
      font-style: normal;
      font-weight: 400;
      font-display: swap;
  unicode-range: U+0021-007E, U+00A1-00B6, U+00B8-00FF, U+2010-2013, U+2015-205E, U+20AC;
}
    :root {
      --ink: #070707;
      --panel: #0d0d0d;
      --paper: #f1eee4;
      --muted: #aaa79e;
      --acid: #d7ae35;
      --red: #d43128;
      --line: rgba(241,238,228,.18);
      --spin: 0deg;
      --panel-x: clamp(24px,6vw,92px);
      --display-font: "BB Display", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; background: #030303; }
    body {
      margin: 0;
      color: var(--paper);
      background: #030303;
      font-family: Arial, Helvetica, sans-serif;
      overflow-x: hidden;
    }
    a { color: inherit; }
    a:focus-visible { outline: 3px solid var(--acid); outline-offset: 4px; }

    .skip-link {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 10000;
      padding: 12px 16px;
      color: var(--ink);
      background: var(--acid);
      border: 2px solid var(--paper);
      font-size: 14px;
      font-weight: 900;
      text-decoration: none;
      transform: translateY(calc(-100% - 18px));
    }
    .skip-link:focus { transform: translateY(0); outline: 3px solid var(--paper); outline-offset: 3px; }

    main {
      width: min(1500px,100%);
      margin: 0 auto;
      padding: clamp(58px,9vw,112px) clamp(24px,4vw,64px) 96px clamp(420px,34vw,500px);
    }
    .hero { max-width: 900px; margin-bottom: 54px; }
    .eyebrow {
      margin: 0 0 14px;
      color: var(--acid);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .2em;
      text-transform: uppercase;
    }
    h1, h2, h3 {
      font-family: var(--display-font);
      font-weight: 900;
      font-synthesis: none;
      text-transform: uppercase;
    }
    h1 {
      margin: 0 0 22px;
      font-size: clamp(4rem,10vw,8.5rem);
      line-height: .9;
      letter-spacing: -.045em;
    }
    h2 {
      margin: 0 0 28px;
      font-size: clamp(3rem,6vw,5.5rem);
      line-height: .94;
      letter-spacing: -.035em;
    }
    h3 {
      margin: 34px 0 12px;
      color: var(--acid);
      font-size: clamp(1.6rem,3vw,2.2rem);
      line-height: 1.05;
      letter-spacing: .01em;
    }
    p, li { color: #cbc8bf; font-size: 16px; line-height: 1.7; }
    p { max-width: 72ch; }
    li + li { margin-top: 7px; }
    strong { color: var(--paper); }

    /* Eigenes Vinyl für den Bereich Tourdaten. */
    .vinyl-menu {
      position: fixed;
      top: 50%;
      left: -164px;
      z-index: 40;
      width: 460px;
      height: 460px;
      transform: translateY(-50%);
      pointer-events: none;
    }
    .vinyl-menu::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      box-shadow: 0 30px 80px rgba(0,0,0,.75);
      pointer-events: none;
    }
    .record-rotor {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background:
        radial-gradient(circle, transparent 0 12.4%, #171717 12.7% 13.1%, transparent 13.4% 20%),
        repeating-radial-gradient(circle at 50% 50%, #141414 0 2px, #0b0b0b 2px 4.5px),
        radial-gradient(circle at 34% 30%, #2a2a2a, #060606 70%);
      border: 1px solid #1e1e1e;
      box-shadow: 0 0 0 1px #1e1e1e;
      transform: rotate(var(--spin));
      will-change: transform;
      pointer-events: none;
    }
    .record-label {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 4;
      width: 118px;
      height: 118px;
      transform: translate(-50%,-50%) rotate(calc(var(--spin) - 2deg));
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      overflow: hidden;
      border-radius: 50%;
      background: #090909;
      border: 2px solid var(--paper);
      box-shadow: 0 0 0 5px #0b0b0b, 0 0 0 6px rgba(255,255,255,.22);
      text-align: center;
      text-transform: uppercase;
      pointer-events: none;
    }
    .record-label span {
      color: var(--muted);
      font-size: 8px;
      font-style: normal;
      font-weight: 900;
      letter-spacing: .12em;
    }
    .record-label strong {
      color: var(--paper);
      font-family: var(--legal-heading-font);
      width: 112px;
      font-size: 17px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -.075em;
      white-space: nowrap;
    }
    .record-label .volume { color: var(--muted); font-size: 10px; }
    .record-spindle {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 9;
      width: 14px;
      height: 14px;
      border: 1px solid rgba(255,255,255,.72);
      border-radius: 50%;
      background: radial-gradient(circle at 36% 30%, #f4f1e8 0 10%, #a8a69f 24%, #4b4a46 60%, #111 100%);
      box-shadow: 0 1px 4px rgba(0,0,0,.9), 0 0 0 2px rgba(0,0,0,.4);
      transform: translate(-50%,-50%);
      pointer-events: none;
    }
    .record-spindle::after {
      content: "";
      position: absolute;
      inset: 4px;
      border-radius: 50%;
      background: rgba(0,0,0,.58);
    }
    .tracks { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
    .track {
      --y: 82px;
      position: absolute;
      top: var(--y);
      left: 288px;
      width: 260px;
      min-height: 44px;
      display: block;
      padding: 0;
      color: var(--muted);
      background: transparent;
      border: 0;
      text-decoration: none;
      text-align: left;
      text-transform: uppercase;
      text-shadow: 0 2px 8px #000;
      transition: color .2s ease, transform .2s ease;
      pointer-events: auto;
      -webkit-tap-highlight-color: transparent;
    }
    .track .leader { position: absolute; inset: 0; display: block; }
    .track .leader::before,
    .track .leader::after {
      content: "";
      position: absolute;
      height: 1px;
      background: rgba(241,238,228,.62);
    }
    .track .leader::before {
      left: 0;
      bottom: 5px;
      width: 34px;
      transform: rotate(-29deg);
      transform-origin: left center;
    }
    .track .leader::after { left: 29px; right: 0; bottom: 21px; }
    .track .leader i {
      position: absolute;
      left: -2px;
      bottom: 2px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #77736b;
      box-shadow: 0 0 0 3px rgba(241,238,228,.06);
      transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
    }
    .track-copy {
      position: absolute;
      left: 36px;
      bottom: 24px;
      z-index: 1;
      display: flex;
      align-items: baseline;
      gap: 5px;
      white-space: nowrap;
    }
    .track .side { color: var(--acid); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
    .track .separator { color: rgba(170,167,158,.78); font-size: 10px; font-weight: 900; }
    .track .title { color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: .09em; }
    .track:hover,
    .track:focus-visible,
    .track.active { transform: translateX(8px); outline: none; }
    .vinyl-menu .track:focus,
    .vinyl-edge-trigger:focus,
    .vinyl-close:focus { outline: none; }
    .track:hover .title,
    .track:focus-visible .title { color: var(--paper); }
    .track.active .leader i {
      background: var(--acid);
      box-shadow: 0 0 0 3px rgba(215,174,53,.18);
      transform: scale(1.35);
    }
    .track:nth-child(1) { --y: 18px; }
    .track:nth-child(2) { --y: 58px; }
    .track:nth-child(3) { --y: 98px; }
    .track:nth-child(4) { --y: 342px; }

    .vinyl-edge-trigger,
    .vinyl-edge-marker,
    .vinyl-close,
    .vinyl-scrim,
    .vinyl-fallback { display: none; }

    .site-footer {
      --footer-track-safe-width: clamp(165px, 15vw, 230px);
      position: relative;
      isolation: isolate;
      z-index: 60;
      margin-left: clamp(390px, 34vw, 500px);
      min-height: 176px;
      padding: 30px var(--footer-track-safe-width) 36px var(--panel-x);
      display: grid;
      grid-template-columns: minmax(220px, 1fr) auto;
      align-items: center;
      gap: 18px 28px;
      overflow: hidden;
      background: #050505;
      border-top: 1px solid var(--line);
    }
    .site-footer::after {
      content: attr(data-cut);
      position: absolute;
      right: clamp(28px,4vw,72px);
      bottom: clamp(20px,3vw,44px);
      z-index: 0;
      color: rgba(241,238,228,.055);
      font-family: var(--display-font);
      font-size: clamp(2.667rem,4vw,4.333rem);
      font-weight: 400;
      line-height: .82;
      letter-spacing: -.04em;
      pointer-events: none;
      user-select: none;
    }
    .site-footer > * { position: relative; z-index: 1; }
    .footer-mark .footer-webmaster {
      appearance: none;
      width: max-content;
      max-width: 100%;
      min-height: 28px;
      margin-top: 3px;
      padding: 5px 0;
      border: 0;
      color: #77746d;
      background: transparent;
      font-family: inherit;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .09em;
      line-height: 1.35;
      text-align: left;
      text-transform: uppercase;
      cursor: help;
      touch-action: pan-y;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      user-select: none;
      transition: color .16s ease, text-shadow .16s ease;
    }
    .footer-webmaster:focus-visible,
    .footer-webmaster[aria-expanded="true"] {
      color: #66faff;
      text-shadow: 0 0 12px rgba(31,226,234,.48);
    }
    .footer-webmaster:focus-visible {
      outline: 1px solid #22dfe6;
      outline-offset: 4px;
    }
    @media (hover: hover) and (pointer: fine) {
      .footer-webmaster:hover {
        color: #66faff;
        text-shadow: 0 0 12px rgba(31,226,234,.48);
      }
    }
    .webmaster-signature {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 90;
      width: min(276px, calc(100vw - 24px));
      aspect-ratio: 16 / 9;
      margin: 0;
      overflow: hidden;
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      background: #000;
      border: 1px solid rgba(36,229,236,.58);
      box-shadow:
        0 24px 70px rgba(0,0,0,.86),
        0 0 30px rgba(23,211,220,.22),
        inset 0 0 0 1px rgba(255,255,255,.05);
      transform: translateY(10px) scale(.985);
      transform-origin: left bottom;
      transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    }
    .webmaster-signature.is-visible {
      visibility: visible;
      opacity: 1;
      transform: none;
      transition-delay: 0s;
    }
    .webmaster-signature picture,
    .webmaster-signature img {
      display: block;
      width: 100%;
      height: 100%;
    }
    .webmaster-signature img { object-fit: contain; }

    @media (max-width: 700px) {
      .webmaster-signature {
        width: min(276px, calc(100vw - 24px));
        box-shadow:
          0 18px 48px rgba(0,0,0,.9),
          0 0 22px rgba(23,211,220,.2);
      }
    }
    .footer-links {
      display: flex;
      flex-wrap: wrap;
      justify-self: start;
      gap: 8px 14px;
    }
    .footer-links a {
      padding: 6px 0 5px;
      color: var(--paper);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .08em;
      text-decoration: none;
      text-transform: uppercase;
      transition: color .16s ease, background .12s ease, box-shadow .12s ease, transform .12s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .footer-links a:hover,
    .footer-links a:focus-visible {
      color: var(--acid);
      outline: none;
      text-shadow: 0 0 12px rgba(215,174,53,.55);
    }
    .footer-links a:active {
      color: var(--ink);
      background: var(--acid);
      box-shadow: 0 0 0 5px var(--acid);
      text-shadow: none;
      transform: translateY(1px);
    }

    @media (max-width: 1180px) {
      .site-footer { grid-template-columns: minmax(0,1fr); align-content: center; }
    }

    @media (max-width: 980px) {
      html.vinyl-scroll-locked,
      html.vinyl-scroll-locked body {
        overflow: hidden;
        overscroll-behavior: none;
      }
      main {
        width: min(1120px,calc(100% - 36px));
        padding-right: 0;
        padding-left: 0;
      }
      .site-footer { margin-left: 0; }
      .vinyl-menu {
        --vinyl-closed-shift: -268px;
        --vinyl-state-x: var(--vinyl-closed-shift);
        top: var(--vinyl-anchor-y, 50svh);
        left: -164px;
        z-index: 24;
        transform: translate3d(var(--vinyl-drag-x,var(--vinyl-state-x)),-50%,0);
        transition: transform 300ms cubic-bezier(.22,.75,.18,1);
        will-change: transform;
      }
      .vinyl-menu[data-vinyl-state="dragging"],
      .vinyl-menu[data-vinyl-state="opening"],
      .vinyl-menu[data-vinyl-state="open"],
      .vinyl-menu[data-vinyl-state="closing"] { z-index: 60; }
      .vinyl-menu[data-vinyl-state="opening"],
      .vinyl-menu[data-vinyl-state="open"] { --vinyl-state-x: 0px; }
      .vinyl-menu.is-dragging { transition: none; }
      .vinyl-menu .record-rotor,
      .vinyl-menu .record-label { opacity: 1; }
      .vinyl-menu[data-vinyl-state="closed"] .record-rotor {
        box-shadow: inset 0 0 55px rgba(255,255,255,.035);
      }
      .vinyl-menu .tracks {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: opacity 190ms ease, visibility 0s linear 190ms;
      }
      .vinyl-menu .track { pointer-events: none; }
      .vinyl-menu[data-vinyl-state="dragging"] .tracks {
        visibility: visible;
        opacity: var(--vinyl-drag-progress,0);
        transition: none;
      }
      .vinyl-menu[data-vinyl-state="opening"] .tracks,
      .vinyl-menu[data-vinyl-state="open"] .tracks {
        visibility: visible;
        opacity: 1;
        transition: opacity 210ms ease;
      }
      .vinyl-menu[data-vinyl-state="open"] .track {
        pointer-events: auto;
      }
      .vinyl-menu .track.active,
      .vinyl-menu .track:hover,
      .vinyl-menu .track:focus-visible { transform: none; }
      .vinyl-menu .track:focus-visible {
        outline: none;
      }
      .vinyl-edge-trigger {
        position: absolute;
        top: 50%;
        left: 432px;
        z-index: 12;
        display: block;
        width: 56px;
        height: 280px;
        padding: 0;
        transform: translateY(-50%);
        border: 0;
        border-radius: 0 18px 18px 0;
        color: transparent;
        background: transparent;
        pointer-events: auto;
        touch-action: pan-y;
        -webkit-tap-highlight-color: transparent;
      }
      .vinyl-menu:not([data-vinyl-state="closed"]) .vinyl-edge-trigger { pointer-events: none; }
      .vinyl-edge-trigger:focus-visible {
        outline: none;
      }
      .vinyl-edge-trigger:focus-visible ~ .vinyl-edge-marker {
        box-shadow: 0 0 0 4px rgba(215,174,53,.28), 0 0 18px 6px rgba(215,174,53,.72);
      }
      .vinyl-edge-marker {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 11;
        display: block;
        width: 10px;
        height: 10px;
        transform: translate3d(var(--edge-marker-x,8px),var(--edge-marker-y,180px),0) translate(-50%,-50%);
        border-radius: 50%;
        background: var(--acid);
        box-shadow: 0 0 0 3px rgba(215,174,53,.2), 0 0 12px 3px rgba(215,174,53,.48);
        opacity: 1;
        pointer-events: none;
        transition: opacity 150ms ease, transform 160ms cubic-bezier(.22,.75,.18,1);
        will-change: transform, opacity;
      }
      .vinyl-menu[data-vinyl-state="dragging"] .vinyl-edge-marker,
      .vinyl-menu[data-vinyl-state="opening"] .vinyl-edge-marker,
      .vinyl-menu[data-vinyl-state="open"] .vinyl-edge-marker,
      .vinyl-menu[data-vinyl-state="closing"] .vinyl-edge-marker { opacity: 0; }
      .vinyl-scrim {
        position: fixed;
        inset: 0;
        z-index: 50;
        display: block;
        padding: 0;
        border: 0;
        background: #000;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: opacity 190ms ease, visibility 0s linear 190ms;
      }
      .vinyl-scrim[data-vinyl-state="dragging"],
      .vinyl-scrim[data-vinyl-state="opening"],
      .vinyl-scrim[data-vinyl-state="open"],
      .vinyl-scrim[data-vinyl-state="closing"] {
        visibility: visible;
        transition: opacity 190ms ease;
      }
      .vinyl-scrim[data-vinyl-state="opening"],
      .vinyl-scrim[data-vinyl-state="open"] {
        opacity: .62;
        pointer-events: auto;
      }
      .vinyl-close {
        position: fixed;
        top: 14px;
        right: 14px;
        z-index: 61;
        display: grid;
        width: 44px;
        height: 44px;
        place-items: center;
        padding: 0 0 3px;
        border: 1px solid rgba(215,174,53,.8);
        border-radius: 50%;
        color: var(--acid);
        background: rgba(8,8,8,.94);
        font: 700 28px/1 Arial,sans-serif;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: opacity 150ms ease;
        -webkit-tap-highlight-color: transparent;
      }
      .vinyl-close[data-vinyl-state="opening"],
      .vinyl-close[data-vinyl-state="open"] {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
      }
      .vinyl-fallback {
        position: fixed;
        top: 12px;
        top: max(12px, env(safe-area-inset-top));
        left: 12px;
        left: max(12px, env(safe-area-inset-left));
        z-index: 80;
        display: block;
        width: max-content;
        max-width: calc(100vw - 24px);
        color: var(--paper);
        font-family: Arial, Helvetica, sans-serif;
      }
      html.vinyl-ready .vinyl-fallback { display: none; }
      .vinyl-fallback summary {
        min-width: 86px;
        min-height: 44px;
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ink);
        background: var(--acid);
        border: 1px solid var(--acid);
        box-shadow: 5px 5px 0 rgba(0,0,0,.35);
        cursor: pointer;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .14em;
        list-style: none;
        text-transform: uppercase;
        -webkit-tap-highlight-color: transparent;
      }
      .vinyl-fallback summary::-webkit-details-marker { display: none; }
      .vinyl-fallback summary::marker { content: ""; }
      .vinyl-fallback[open] summary {
        color: var(--paper);
        background: #080808;
        border-color: var(--line);
      }
      .vinyl-fallback__links {
        width: min(286px, calc(100vw - 24px));
        max-height: calc(100svh - 74px);
        margin-top: 6px;
        padding: 7px 12px;
        display: grid;
        overflow: auto;
        background: rgba(0,0,0,.97);
        border: 1px solid var(--line);
        box-shadow: 8px 8px 0 rgba(0,0,0,.38);
      }
      .vinyl-fallback__links a {
        min-height: 44px;
        display: grid;
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        color: var(--paper);
        border-bottom: 1px solid var(--line);
        text-decoration: none;
      }
      .vinyl-fallback__links a:last-child { border-bottom: 0; }
      .vinyl-fallback__links span {
        color: var(--acid);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .06em;
        text-transform: uppercase;
      }
      .vinyl-fallback__links strong {
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .08em;
        line-height: 1.2;
        text-transform: uppercase;
      }
      .vinyl-fallback__links a:focus-visible {
        color: var(--ink);
        background: var(--acid);
        outline: 2px solid var(--acid);
        outline-offset: 2px;
      }
      .vinyl-fallback__links a:focus-visible span { color: var(--ink); }
      .vinyl-close:focus-visible {
        outline: none;
        color: var(--ink);
        background: var(--acid);
      }
    }

    @media (max-width: 700px) {
      .site-footer { min-height: 190px; padding: 28px 92px 36px 24px; }
      .site-footer::after { right: 12px; bottom: 18px; font-size: clamp(5.35rem,24vw,8rem); }
      .footer-links { gap: 6px 12px; }
    }

    @media (max-width: 700px) {
      main { width: min(100% - 28px,1120px); padding-top: 48px; }
      .vinyl-menu {
        --vinyl-closed-shift: -212px;
        left: -120px;
        width: 360px;
        height: 360px;
      }
      .record-label { width: 112px; height: 112px; gap: 3px; }
      .record-label strong { width: 92px; font-size: 14px; }
      .record-label span { font-size: 7px; }
      .record-label .volume { font-size: 9px; }
      .track { left: 228px; width: 210px; min-height: 44px; }
      .track .leader::before { bottom: 4px; width: 26px; }
      .track .leader::after { left: 22px; bottom: 17px; }
      .track .leader i { bottom: 1px; }
      .track-copy { left: 24px; bottom: 19px; gap: 3px; }
      .track .title { font-size: 10px; letter-spacing: .05em; }
      .track .side,
      .track .separator { font-size: 9px; }
      .vinyl-edge-trigger { left: 332px; height: 240px; }
      .track:nth-child(1) { --y: -26px; }
      .track:nth-child(2) { --y: 14px; }
      .track:nth-child(3) { --y: 54px; }
      .track:nth-child(4) { --y: 268px; }
    }

    @media (min-width: 701px) and (max-width: 980px) and (orientation: landscape) {
      .vinyl-menu {
        --vinyl-closed-shift: -212px;
        left: -120px;
        width: 360px;
        height: 360px;
      }
      .record-label { width: 112px; height: 112px; gap: 3px; }
      .record-label strong { width: 92px; font-size: 14px; }
      .record-label span { font-size: 7px; }
      .record-label .volume { font-size: 9px; }
      .track { left: 228px; width: 210px; min-height: 44px; }
      .track .leader::before { bottom: 4px; width: 26px; }
      .track .leader::after { left: 22px; bottom: 17px; }
      .track .leader i { bottom: 1px; }
      .track-copy { left: 24px; bottom: 19px; gap: 3px; }
      .track .title { font-size: 10px; letter-spacing: .05em; }
      .track .side,
      .track .separator { font-size: 9px; }
      .vinyl-edge-trigger { left: 332px; height: 240px; }
      .track:nth-child(1) { --y: -26px; }
      .track:nth-child(2) { --y: 14px; }
      .track:nth-child(3) { --y: 54px; }
      .track:nth-child(4) { --y: 268px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .record-rotor { transform: none !important; }
      .record-label { transform: translate(-50%,-50%) rotate(-2deg) !important; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    }