/* =====================================================================
   Submerged Systems – Club-Design
   Idee: Licht, das durch Nebel (oder Wasser) fällt. Schwarzer Raum, ein einziger
   Lichtstrahl in Cyan als Signalfarbe, Plakat-Typografie in schmaler Grotesk.
   Wird NACH den seiteneigenen Styles geladen und überschreibt sie.
   ===================================================================== */

@font-face { font-family: "Big Shoulders Display"; src: url("fonts/BigShouldersDisplay.woff") format("woff"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/Archivo.woff") format("woff"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  /* Farben */
  --void: #000000;          /* Raum */
  --panel: #0f0f0f;         /* Flächen (Flightcase) */
  --panel-2: #181818;       /* Eingabefelder, Hover */
  --strobe: #f2f2ee;        /* Text */
  --fog: #9ba1a8;           /* Nebentext */
  --beam: #2de2f0;          /* Lichtstrahl / Aktion */
  --beam-dim: rgba(45, 226, 240, .14);
  --signal: #ff4d3d;        /* Warnung, „vor Ort zahlen“ */
  --amber: #ffb547;
  --go: #3ddc84;
  --edge: rgba(255, 255, 255, .11);

  /* Schriften */
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Variablen der bestehenden Seiten umbiegen */
  --accent: var(--beam); --accent-dark: #19c6d6; --accent-d: #19c6d6; --accent-light: var(--beam); --accent-l: var(--beam);
  --dark: var(--void); --dark-2: var(--void); --dark2: var(--void);
  --text: var(--strobe); --muted: var(--fog); --line: var(--edge); --bg: var(--void); --card: var(--panel);
  --ok: var(--go); --warn: var(--amber); --warn-bg: rgba(255, 181, 71, .1); --danger: var(--signal); --danger-bg: rgba(255, 77, 61, .12); --err: var(--signal);
  --radius: 3px; --r: 3px; --shadow: none; --sh: none;
  color-scheme: dark;
}

html { background: var(--void); }
body { background: var(--void) !important; color: var(--strobe); font-family: var(--body) !important; font-stretch: 100%; -webkit-font-smoothing: antialiased; }
a { color: var(--beam); }
::selection { background: var(--beam); color: #000; }
:focus-visible { outline: 2px solid var(--beam) !important; outline-offset: 2px; }

/* ---------- Typografie ---------- */
h1, h2, h3, .page-title, .event h2, .ev-head h1, .card h3, .comments h2, form h2, legend, .section-title {
  font-family: var(--display); font-weight: 800; letter-spacing: .01em; line-height: 1.02; color: var(--strobe);
}
h1, .page-title { font-size: clamp(2.2rem, 5vw, 3.4rem); text-transform: uppercase; font-weight: 900; }
h2 { font-size: 1.6rem; }
.card h3, .event h2 { font-size: 1.45rem; text-transform: uppercase; }
.price, .opt-price, .total strong, .stats strong, .sum-line.total { font-family: var(--display); font-weight: 800; letter-spacing: .02em; }
.price { font-size: 1.6rem; } .total strong { font-size: 2rem; }

/* ---------- Kopfzeile ---------- */
header, .top {
  background: rgba(0, 0, 0, .82) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--edge); color: var(--strobe);
}
.logo { font-family: var(--display); font-weight: 900; letter-spacing: .06em; font-size: 1.35rem; color: var(--strobe); }
.logo span { color: var(--beam); font-family: var(--body); font-stretch: 125%; font-weight: 600; letter-spacing: .18em; }
.top .logo { font-size: 1.15rem; } .top .logo span { color: var(--beam); }
.search input, .vat-toggle, .acc-link, .top a:not(.logo), .top button {
  background: var(--panel-2) !important; color: var(--strobe) !important; border: 1px solid var(--edge) !important; border-radius: 2px !important;
}
.vat-toggle button { color: var(--fog); border-radius: 1px; }
.vat-toggle button.active { background: var(--beam); color: #000; }
.badge { background: var(--beam); color: #000; border-radius: 2px; }
.cart-btn { color: var(--strobe); }

/* ---------- Lichtstrahlen (Signatur) ---------- */
.club-hero, body > header:has(.disclaimer) { position: relative; overflow: hidden; isolation: isolate; }
.club-hero::before, .club-hero::after, body > header:has(.disclaimer)::before, body > header:has(.disclaimer)::after {
  content: ""; position: absolute; z-index: -1; top: -40%; width: 38vw; height: 190%; pointer-events: none;
  background: linear-gradient(180deg, rgba(45, 226, 240, .42), rgba(45, 226, 240, .08) 55%, transparent 80%);
  filter: blur(26px); mix-blend-mode: screen; transform-origin: 50% 0;
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
}
.club-hero::before, body > header:has(.disclaimer)::before { left: 8%; animation: sweep-a 17s ease-in-out infinite alternate; }
.club-hero::after, body > header:has(.disclaimer)::after { right: 4%; opacity: .7; animation: sweep-b 23s ease-in-out infinite alternate; }
@keyframes sweep-a { from { transform: rotate(-14deg); } to { transform: rotate(9deg); } }
@keyframes sweep-b { from { transform: rotate(12deg); } to { transform: rotate(-10deg); } }
@media (prefers-reduced-motion: reduce) { .club-hero::before, .club-hero::after, body > header:has(.disclaimer)::before, body > header:has(.disclaimer)::after { animation: none; } }

.club-hero { padding: clamp(48px, 9vw, 110px) 5% clamp(36px, 6vw, 70px); border-bottom: 1px solid var(--edge);
  background: radial-gradient(ellipse 80% 60% at 50% 115%, rgba(45, 226, 240, .10), transparent 70%), var(--void); }
.club-hero h1 { font-size: clamp(3.6rem, 13.5vw, 11rem); line-height: .82; margin: 0; letter-spacing: -.01em; font-weight: 900; }
.club-hero h1 span { display: block; color: transparent; -webkit-text-stroke: 1.5px var(--strobe); }
.club-hero p { max-width: 34em; color: var(--fog); font-size: 1.05rem; margin: 22px 0 26px; }
.club-hero .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.club-hero .hero-actions a { font-family: var(--body); font-stretch: 125%; font-weight: 700; font-size: .92rem; text-decoration: none; padding: 13px 22px; border-radius: 2px; border: 1px solid var(--edge); color: var(--strobe); }
.club-hero .hero-actions a.go { background: var(--beam); border-color: var(--beam); color: #000; box-shadow: 0 0 28px rgba(45, 226, 240, .35); }

/* ---------- Flächen ---------- */
.card, #cart, .preset, .modal-content, .info, .event, .opt, .order, .stats div, .evitem, main > .card, .card.narrow {
  background: var(--panel) !important; border: 1px solid var(--edge); border-radius: 3px !important; box-shadow: none !important; color: var(--strobe);
}
.card-img { background: radial-gradient(circle at 50% 30%, #1d1d1d, #0a0a0a) !important; color: #333; }
.card-img img { background: #0a0a0a !important; }
.card-cat, .genre { color: var(--beam); font-family: var(--body); font-stretch: 125%; letter-spacing: .06em; font-weight: 700; }
.card:hover, .event:hover { border-color: rgba(45, 226, 240, .45); }
#cart { border-top: 2px solid var(--beam) !important; }
.info { border-top: 1px solid var(--edge); }
.modal { background: rgba(0, 0, 0, .8) !important; }

/* ---------- Bedienelemente ---------- */
input, select, textarea, form input, form select, form textarea, .term-box input, .add-row input, .ci-controls input, .service select, .service input[type=number] {
  background: var(--panel-2) !important; color: var(--strobe) !important; border: 1px solid var(--edge) !important; border-radius: 2px !important;
}
input::placeholder, textarea::placeholder { color: #6b7076; }
input[type=checkbox], input[type=radio] { accent-color: var(--beam); }
.btn, .add-btn, .submit-btn, .qty-btn, .preset button, .chip, .link-btn, .cm-btn, .tabs a, .subnav a {
  border-radius: 2px !important; font-family: var(--body); font-stretch: 112%; font-weight: 700;
}
.btn, .qty-btn { background: var(--panel-2) !important; color: var(--strobe) !important; border: 1px solid var(--edge) !important; }
.btn.primary, .add-btn, .submit-btn, .tabs a.active, .subnav a.active, .chip.active, #tag-filters .chip.active {
  background: var(--beam) !important; color: #000 !important; border-color: var(--beam) !important;
}
.btn.primary:hover, .add-btn:hover:not(:disabled), .submit-btn:hover:not(:disabled) { box-shadow: 0 0 22px rgba(45, 226, 240, .4); background: #6ff0fa !important; }
.add-btn:disabled { background: #1c1c1c !important; color: #555 !important; }
.add-btn.request { background: transparent !important; color: var(--amber) !important; border: 1px solid rgba(255, 181, 71, .5) !important; }
.btn.danger { color: var(--signal) !important; border-color: rgba(255, 77, 61, .45) !important; }
.chip, .tabs a, .subnav a { background: transparent !important; color: var(--fog) !important; border: 1px solid var(--edge) !important; box-shadow: none !important; text-transform: none; }
.preset { border-top: 2px solid var(--beam) !important; }
.preset button { color: var(--beam) !important; border-color: var(--beam) !important; background: transparent !important; }
.preset button:hover { background: var(--beam) !important; color: #000 !important; }
.tag { background: #1d1d1d; color: var(--strobe); border-radius: 2px; }
.tag.neu { background: var(--beam); color: #000; } .tag.angebot { background: var(--signal); color: #000; }

/* ---------- Hinweise & Status ---------- */
.box.warn, .state.warn, .cm-closed { background: rgba(255, 181, 71, .1) !important; color: var(--amber) !important; }
.box.danger, .state.red, .form-error, .msg.err, .banner { background: rgba(255, 77, 61, .12) !important; color: #ff8a7e !important; }
.box.ok, .state.ok, .msg.ok { background: rgba(61, 220, 132, .1) !important; color: #7deeae !important; }
.state, .cm-lock, .term-box, .acc-note, .bank, .tno, .sum dd .tno, .welcome { background: var(--panel-2) !important; color: var(--strobe); }
.door { border-color: var(--signal) !important; color: var(--signal) !important; }
.suggest { background: rgba(45, 226, 240, .06) !important; border-color: rgba(45, 226, 240, .25) !important; }
.suggest-head { color: var(--beam) !important; } .suggest-row { border-color: var(--edge) !important; }
.pill { background: #1d1d1d; color: var(--fog); border-radius: 2px; }
.pill.ok, .pill.p-bezahlt, .pill.st-bestaetigt { background: rgba(61, 220, 132, .14) !important; color: #7deeae !important; }
.pill.warn, .pill.p-offen { background: rgba(255, 181, 71, .14) !important; color: var(--amber) !important; }
.pill.red, .pill.p-vorort, .badge.red { background: rgba(255, 77, 61, .14) !important; color: #ff8a7e !important; }
.pill.p-gast { background: rgba(167, 139, 250, .16) !important; color: #c4b5fd !important; }
.sold-count { color: var(--signal) !important; font-family: var(--display); font-size: 1rem !important; letter-spacing: .03em; }
.avail.ok { color: var(--go); }

/* ---------- Ticketseite ---------- */
body > header:has(.disclaimer) { padding-bottom: 34px; background: var(--void) !important; backdrop-filter: none; }
.disclaimer { background: rgba(255, 255, 255, .04) !important; border: 1px solid var(--edge) !important; border-left: 3px solid var(--amber) !important; color: var(--fog) !important; border-radius: 2px !important; }
.disclaimer strong { color: var(--strobe) !important; }
.acc { background: var(--panel-2) !important; border-radius: 2px !important; }
.dateblock { background: transparent !important; border: 1px solid var(--edge); border-radius: 2px !important; }
.dateblock .d { font-family: var(--display); font-size: 2.6rem !important; font-weight: 900; color: var(--beam); line-height: .9; }
.dateblock .m { color: var(--strobe) !important; font-family: var(--display); font-size: 1rem !important; letter-spacing: .12em !important; }
.dateblock .w { color: var(--fog) !important; }
.event { padding: 16px 18px !important; }
.event .where { color: var(--strobe); } .lineup { color: var(--fog) !important; }
.thumb { border-radius: 2px !important; filter: saturate(1.1); }
.opt:has(input:checked) { border-color: var(--beam) !important; background: rgba(45, 226, 240, .07) !important; }
.total { border-top: 2px solid var(--beam) !important; }
.facts dt, .sum dt { color: var(--fog) !important; font-family: var(--body); font-stretch: 125%; }
.desc, .ev-tools { border-color: var(--edge) !important; }
.flyer { background: #050505 !important; }
.ad { background: rgba(45, 226, 240, .06) !important; border-left: 3px solid var(--beam) !important; color: var(--fog); border-radius: 2px !important; }
.ad strong { color: var(--beam) !important; }
.giro svg rect[fill="#fff"], .giro svg { background: #fff; padding: 6px; }

/* Kommentare */
.cm-thread { border-color: var(--edge) !important; } .cm-replies { border-color: var(--edge) !important; }
.cm-ava { border-radius: 2px !important; } .cm-hex { color: var(--strobe); }
.cm-tag { background: rgba(61, 220, 132, .14) !important; color: #7deeae !important; border-radius: 2px !important; }
.cm-form textarea { background: var(--panel-2) !important; }
.cm-btn:hover { background: var(--panel-2) !important; color: var(--strobe) !important; }

/* Konto & Veranstalter */
table.list th { color: var(--fog) !important; border-color: var(--edge) !important; font-stretch: 125%; }
table.list td { border-color: rgba(255, 255, 255, .06) !important; }
.order { border-left-width: 3px !important; }
.order.st-offen { border-left-color: var(--amber) !important; } .order.st-vorort { border-left-color: var(--signal) !important; } .order.st-bezahlt { border-left-color: var(--go) !important; }
.glist tr.g-in td { background: rgba(61, 220, 132, .07) !important; } .glist tr.g-part td { background: rgba(255, 181, 71, .07) !important; }
.share { background: var(--panel-2) !important; }
.scan-stage { background: #050505 !important; border: 1px solid var(--edge); }
.flyer-field img { border-color: var(--edge) !important; }

/* ---------- Footer ---------- */
footer { background: var(--void) !important; border-top: 1px solid var(--edge); color: var(--fog) !important; }
footer a { color: var(--strobe) !important; }

/* ---------- Rechtstexte, Profil, Katalog ---------- */
body > main:only-of-type > h1 { text-transform: none; font-size: clamp(2rem, 4vw, 2.8rem); }
.lead { color: var(--fog) !important; }
.box, .facts div { background: var(--panel-2) !important; border-color: var(--beam) !important; }
section > h2 { border-color: var(--edge) !important; }
table th { color: var(--fog); } td, th { border-color: rgba(255, 255, 255, .06) !important; }

@media (max-width: 600px) {
  .club-hero h1 { font-size: clamp(3.2rem, 19vw, 6rem); }
  .dateblock .d { font-size: 2.1rem !important; }
}

/* ---------- Feinschliff: Cyan nur für die eine Hauptaktion ---------- */
.add-btn { background: transparent !important; color: var(--beam) !important; border: 1px solid rgba(45, 226, 240, .55) !important; }
.add-btn:hover:not(:disabled) { background: var(--beam) !important; color: #000 !important; box-shadow: none; }
.price small, .sum-line.total small { font-family: var(--body); font-weight: 400; letter-spacing: 0; }
.term-box legend, .presets h2 { text-transform: none !important; letter-spacing: .02em !important; font-family: var(--display); font-weight: 800; font-size: 1.05rem !important; color: var(--strobe) !important; }
.presets h2 { font-size: 1.4rem !important; }
.club-hero { padding: clamp(36px, 6vw, 72px) 5% clamp(28px, 4vw, 48px); }
.club-hero h1 { font-size: clamp(3.4rem, 10.5vw, 8.6rem); }
.club-hero p { margin: 18px 0 22px; }
.card-cat { font-size: .68rem; }
.facts dt, .sum dt { font-stretch: 100% !important; font-size: .74rem !important; }
.opt-price { font-size: 1.25rem; }
/* Zweite Zeile massiv statt Kontur (Kontur zeigt bei variablen Schriften Überlappungen, z. B. im „M“) */
.club-hero h1 span { color: var(--fog) !important; -webkit-text-stroke: 0 !important; }

.agebox { background: var(--panel-2) !important; color: var(--strobe); border-left: 3px solid var(--amber); border-radius: 2px !important; }

/* =====================================================================
   Überarbeitung 2: Lesbarkeit & Textseiten
   ===================================================================== */
:root {
  --panel: #111111;
  --panel-2: #1a1a1a;
  --fog: #aab0b7;           /* Nebentext: Kontrast ≥ 8:1 auf Schwarz */
  --copy: #dcdfe2;          /* Fließtext auf Flächen */
  --edge: rgba(255, 255, 255, .14);
}
body { font-size: 16px; line-height: 1.6; }
.muted, .small.muted, .muted.small { color: var(--fog) !important; }
.small { font-size: .82rem; }
a:hover { color: #8ff4fb; }

/* Körnung wie auf Flyern – sehr dezent, beeinflusst keine Lesbarkeit */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: .045; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media print { body::after { display: none; } }

/* Kopfzeile: feine Lichtkante */
header, .top { box-shadow: inset 0 -1px 0 rgba(45, 226, 240, .18); }

/* ---------- Textseiten: Impressum, Datenschutz, AGB, Nutzungsbedingungen, Profil, Katalog, Newsletter ---------- */
body.doc > header { position: static; padding: 18px 5% !important; }
body.doc > header a { font-family: var(--display); font-weight: 900; font-size: 1.4rem; letter-spacing: .06em; color: var(--strobe); text-decoration: none; }
body.doc > main {
  background: var(--panel) !important; color: var(--copy) !important; border: 1px solid var(--edge); border-top: 2px solid var(--beam);
  border-radius: 3px !important; box-shadow: none !important; max-width: 820px; margin: 40px auto 60px; padding: clamp(22px, 4vw, 44px) !important;
}
body.doc > main h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); text-transform: uppercase; margin: 0 0 14px; color: var(--strobe); }
body.doc > main h2 { font-size: 1.45rem; margin: 2.2em 0 .6em; color: var(--strobe); display: flex; align-items: center; gap: 12px; }
body.doc > main h2::before { content: ""; width: 18px; height: 3px; background: var(--beam); flex-shrink: 0; }
body.doc > main h3 { font-size: 1.15rem; margin: 1.6em 0 .4em; color: var(--strobe); }
body.doc > main p, body.doc > main li, body.doc > main dd, body.doc > main td { color: var(--copy) !important; font-size: 1rem; line-height: 1.72; }
body.doc > main p, body.doc > main ol, body.doc > main ul { max-width: 68ch; }
body.doc > main strong { color: #fff; }
body.doc > main a { color: var(--beam); text-underline-offset: 3px; }
body.doc > main .lead { color: var(--fog) !important; font-size: 1.02rem; }
body.doc > main .box, body.doc > main .warn { background: rgba(45, 226, 240, .07) !important; border-left: 3px solid var(--beam) !important; border-radius: 2px; color: var(--copy) !important; padding: 12px 16px; }
body.doc > main .facts div { background: var(--panel-2) !important; border: 1px solid var(--edge); }
body.doc > main .facts strong { color: var(--beam); font-family: var(--display); font-size: 1.7rem; }
body.doc > main .facts span { color: var(--fog); }
body.doc > main .cta a.ghost { color: var(--beam); border-color: var(--edge); }
body.doc > main .ph { background: rgba(255, 181, 71, .15); color: var(--amber); }
body.doc > footer { background: transparent !important; border: 0; padding-bottom: 40px; }
body.doc > footer a { color: var(--fog) !important; }

/* Katalog-Liste (equipment.php): Hauptbereich ist breiter und besteht aus Tabellen */
body.doc > main:has(section) { max-width: 1000px; background: transparent !important; border: 0; padding: 0 16px !important; }
body.doc > main section { background: var(--panel) !important; border: 1px solid var(--edge); border-radius: 3px; box-shadow: none !important; }
body.doc > main section h2 { margin: 0 !important; padding: 14px 18px !important; border-bottom: 1px solid var(--edge) !important; font-size: 1.4rem; }
body.doc > main section h2::before { display: none; }
body.doc > main section td strong { color: var(--strobe); }
body.doc > main section th { color: var(--fog) !important; }

/* Newsletter-Seite */
body.doc > main .btn { background: var(--beam) !important; color: #000 !important; border: 0; border-radius: 2px; }

/* ---------- Kleinere Lesbarkeits-Korrekturen überall ---------- */
.card-desc, .ci-sub, .specs, .small-print, .note, .term-note, .plz-info, .service-hint { color: var(--fog) !important; }
.facts dd, .sum dd, .desc { color: var(--copy); }
.disclaimer { color: #c4c9ce !important; }
label { color: var(--fog); }
.check, .check span { color: var(--copy) !important; }
table.list td { color: var(--copy); }

/* =====================================================================
   Robustheit Handy (Stand 21.10.2026): lange Wörter in Titeln und breite
   Tabellen dürfen das Layout nicht seitlich verschieben
   ===================================================================== */
h1, h2, h3, .ev-head, .evitem, .evitem strong, .order, .facts dd, .sum dd, .desc, .cm-text, .card p, .where, a.event { overflow-wrap: anywhere; }
.ev-head > *, .evitem > *, .grid > *, .two > *, .order > *, .facts > * { min-width: 0; }
.card.flush, .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.card.flush > table { min-width: 100%; }
img, video, canvas { max-width: 100%; height: auto; }