/**
 * Modern Template Styles
 * Matches Organizer Hub glass-panel style
 *
 * Design Philosophy: Clean, consistent with Hub pages
 * Target: All event types
 */

@import "./_base.css";

/* Heading Font – Space Grotesk
   NOTE: Loaded via <link> in modern.html for non-blocking rendering.
   Weights 400-700 available. */

/* Page Background — consumed by _base.css */
:root {
  --tpl-page-bg: #0f172a;
}

/* ============================================================
   SKIP LINK (Accessibility)
   ============================================================ */

.modern-skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 9999;
    padding: 8px 16px;
    background: var(--modern-accent, #06b6d4);
    color: var(--cita-white, #fff);
    border-radius: 0 0 8px 8px;
    font-size: 0.875rem;
    text-decoration: none;
    transition: top 0.2s ease;
}
.modern-skip-link:focus {
    top: 0;
}

/* ============================================================
   STICKY TICKET BAR
   ============================================================ */

.modern-sticky-bar {
  position: fixed;
  top: var(--cita-banner-h, 0px);
  left: 0;
  right: 0;
  z-index: 101;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 300ms ease-out, opacity 300ms ease-out, top 0.3s ease;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(15, 23, 42, 0.85);
  border-bottom: 1px solid rgba(6, 182, 212, 0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.modern-sticky-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
}

/* ============================================================
   BASE STYLES
   ============================================================ */

.cita-event-page {
  --event-card-bg: rgba(30, 41, 59, 0.4);
  --event-card-border: rgba(51, 65, 85, 0.5);
  --event-card-hover-bg: rgba(30, 41, 59, 0.6);
  --event-card-hover-border: rgba(71, 85, 105, 0.5);

  /* Modern template semantic color aliases — inherit from layout_resolver */
  --modern-accent: var(--cita-primary, #06b6d4);
  --modern-accent-hover: var(--cita-secondary, #0891b2);
  --modern-accent-light: var(--cita-accent, #22d3ee);
  --modern-accent-ultra-light: #67e8f9;
  --modern-text-heading: #f1f5f9;
  --modern-text-body: #cbd5e1;
  --modern-text-muted: #94a3b8;
  --modern-bg-base: #0f172a;

  /* Prose Design Tokens */
  --prose-body: #cbd5e1;
  --prose-body-emphasis: #e2e8f0;
  --prose-heading: #f1f5f9;
  --prose-link: var(--modern-accent-light);
  --prose-link-hover: var(--modern-accent-ultra-light);
  --prose-link-underline: rgba(6, 182, 212, 0.4);
  --prose-accent: var(--modern-accent);
  --prose-accent-soft: rgba(6, 182, 212, 0.1);
  --prose-accent-border: rgba(6, 182, 212, 0.3);
  --prose-quote-bg: rgba(6, 182, 212, 0.06);
  --prose-quote-border: var(--modern-accent);
  --prose-quote-text: #94a3b8;
  --prose-code-bg: rgba(148, 163, 184, 0.12);
  --prose-code-border: rgba(148, 163, 184, 0.08);
  --prose-code-text: #e2e8f0;
  --prose-hr: linear-gradient(to right, transparent, rgba(6, 182, 212, 0.4), transparent);
  --prose-marker: #06b6d4;
  --prose-table-header-bg: rgba(6, 182, 212, 0.08);
  --prose-table-border: rgba(148, 163, 184, 0.12);
  --prose-img-radius: 0.75rem;
  --prose-img-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);

  /* Typography: Space Grotesk for headings, Inter for body */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* font-smoothing is in _base.css */
}

/* Selection styling for brand feel */
.cita-event-page ::selection {
  background: rgba(6, 182, 212, 0.3);
  color: #f1f5f9;
}

/* Typography: readable body text */
.cita-event-page p,
.cita-event-page .prose {
  line-height: 1.7;
}

/* Typography: premium headings
   Space Grotesk max weight = 700. Tailwind font-extrabold (800) in
   HTML includes must be capped to prevent undefined browser fallback. */
.cita-event-page h1 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.cita-event-page h2 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.cita-event-page .modern-basics-heading {
  color: var(--modern-text-heading, var(--cita-text-heading));
}

.cita-event-page .modern-basics-label {
  color: var(--modern-text-body, var(--cita-text-primary));
}

/* Cap Tailwind font-extrabold/font-black (800/900) to Space Grotesk max (700) */
.cita-event-page h1.font-extrabold, .cita-event-page h1.font-black,
.cita-event-page h2.font-extrabold, .cita-event-page h2.font-black,
.cita-event-page h3.font-extrabold, .cita-event-page h3.font-black {
  font-weight: 700;
}

/* ============================================================
   PROSE TIER: FULL – Event Description (Premium Article Style)
   ============================================================ */

.cita-event-page .cita-prose-full {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--prose-body);
  letter-spacing: -0.01em;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

/* --- Drop Cap (nur bei --dropcap Modifier) --- */
.cita-event-page .cita-prose-full--dropcap > p:first-of-type::first-letter {
  float: left;
  font-size: 3.5em;
  line-height: 0.85;
  font-weight: 700;
  margin-right: 0.08em;
  margin-top: 0.05em;
  color: var(--prose-accent);
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}

/* --- First paragraph emphasis --- */
.cita-event-page .cita-prose-full > p:first-of-type {
  font-size: 1.25rem;
  line-height: 1.75;
  color: var(--prose-body-emphasis);
}

/* --- Paragraphs --- */
.cita-event-page .cita-prose-full p {
  margin-bottom: 1.5em;
}

/* --- Headings --- */
.cita-event-page .cita-prose-full h1,
.cita-event-page .cita-prose-full h2,
.cita-event-page .cita-prose-full h3,
.cita-event-page .cita-prose-full h4,
.cita-event-page .cita-prose-full h5,
.cita-event-page .cita-prose-full h6 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  color: var(--prose-heading);
  letter-spacing: -0.02em;
  margin-top: 2.5em;
  margin-bottom: 0.75em;
  line-height: 1.25;
}

.cita-event-page .cita-prose-full h2 {
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 700;
  padding-bottom: 0.5em;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.cita-event-page .cita-prose-full h3 {
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  font-weight: 700;
}

.cita-event-page .cita-prose-full h4 {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--prose-accent);
}

/* --- Links (animated underline) --- */
.cita-event-page .cita-prose-full a {
  color: var(--prose-link);
  text-decoration: none;
  background-image: linear-gradient(var(--prose-link-underline), var(--prose-link-underline));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease, color 0.2s ease;
  font-weight: 500;
}

.cita-event-page .cita-prose-full a:hover {
  color: var(--prose-link-hover);
  background-size: 100% 2px;
}

/* --- Blockquotes (pulled-quote style) --- */
.cita-event-page .cita-prose-full blockquote {
  position: relative;
  border-left: 3px solid var(--prose-quote-border);
  background: var(--prose-quote-bg);
  border-radius: 0 0.75rem 0.75rem 0;
  padding: 1.5rem 1.75rem 1.5rem 2rem;
  margin: 2.5rem 0;
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--prose-body-emphasis);
}

.cita-event-page .cita-prose-full blockquote::before {
  content: '\201C';
  position: absolute;
  top: -0.25rem;
  left: 0.5rem;
  font-size: 4rem;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--prose-accent);
  opacity: 0.3;
  line-height: 1;
}

.cita-event-page .cita-prose-full blockquote p {
  margin-bottom: 0.5em;
}

.cita-event-page .cita-prose-full blockquote p:last-child {
  margin-bottom: 0;
}

/* --- Unordered Lists (glowing dots) --- */
.cita-event-page .cita-prose-full ul {
  list-style: none;
  padding-left: 0;
  margin: 1.5em 0;
}

.cita-event-page .cita-prose-full ul li {
  position: relative;
  padding-left: 1.75em;
  margin-bottom: 0.75em;
  line-height: 1.7;
}

.cita-event-page .cita-prose-full ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--prose-marker);
  box-shadow: 0 0 6px rgba(6, 182, 212, 0.4);
}

/* --- Ordered Lists (numbered badges) --- */
.cita-event-page .cita-prose-full ol {
  list-style: none;
  padding-left: 0;
  margin: 1.5em 0;
  counter-reset: prose-ol;
}

.cita-event-page .cita-prose-full ol li {
  position: relative;
  padding-left: 2.5em;
  margin-bottom: 0.75em;
  counter-increment: prose-ol;
  line-height: 1.7;
}

.cita-event-page .cita-prose-full ol li::before {
  content: counter(prose-ol);
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.75em;
  height: 1.75em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--prose-accent);
  background: var(--prose-accent-soft);
  border: 1px solid var(--prose-accent-border);
  border-radius: 0.375rem;
}

/* --- Strong/Bold --- */
.cita-event-page .cita-prose-full strong,
.cita-event-page .cita-prose-full b {
  color: var(--prose-heading);
  font-weight: 700;
}

/* --- Emphasis --- */
.cita-event-page .cita-prose-full em,
.cita-event-page .cita-prose-full i {
  font-style: italic;
  color: var(--prose-body-emphasis);
}

/* --- Code --- */
.cita-event-page .cita-prose-full code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 0.875em;
  background: var(--prose-code-bg);
  border: 1px solid var(--prose-code-border);
  padding: 0.15em 0.4em;
  border-radius: 0.25rem;
  color: var(--prose-code-text);
}

.cita-event-page .cita-prose-full pre {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin: 2rem 0;
}

.cita-event-page .cita-prose-full pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.7;
}

/* --- Horizontal Rule (gradient divider) --- */
.cita-event-page .cita-prose-full hr {
  border: none;
  height: 1px;
  background: var(--prose-hr);
  margin: 3rem auto;
  max-width: 200px;
}

/* --- Images --- */
.cita-event-page .cita-prose-full img {
  max-width: 100%;
  height: auto;
  border-radius: var(--prose-img-radius);
  box-shadow: var(--prose-img-shadow);
  margin: 2rem 0;
}

/* --- Figures --- */
.cita-event-page .cita-prose-full figure {
  margin: 2.5rem 0;
}

.cita-event-page .cita-prose-full figcaption {
  font-size: 0.8125rem;
  color: var(--modern-text-muted);
  text-align: center;
  margin-top: 0.75rem;
  font-style: italic;
}

/* --- Tables --- */
.cita-event-page .cita-prose-full table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.9375rem;
}

.cita-event-page .cita-prose-full th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: var(--prose-heading);
  background: var(--prose-table-header-bg);
  border-bottom: 2px solid var(--prose-accent-border);
}

.cita-event-page .cita-prose-full td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--prose-table-border);
  color: var(--prose-body);
}

.cita-event-page .cita-prose-full tr:last-child td {
  border-bottom: none;
}

/* ============================================================
   PROSE TIER: COMPACT – Ticket & Content Descriptions
   ============================================================ */

.cita-event-page .cita-prose-compact {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--prose-body);
}

.cita-event-page .cita-prose-compact p {
  margin-bottom: 0.75em;
}

.cita-event-page .cita-prose-compact p:last-child {
  margin-bottom: 0;
}

/* --- Links --- */
.cita-event-page .cita-prose-compact a {
  color: var(--prose-link);
  text-decoration: underline;
  text-decoration-color: var(--prose-link-underline);
  text-underline-offset: 2px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.cita-event-page .cita-prose-compact a:hover {
  color: var(--prose-link-hover);
  text-decoration-color: var(--prose-link-hover);
}

/* --- Strong --- */
.cita-event-page .cita-prose-compact strong,
.cita-event-page .cita-prose-compact b {
  color: var(--prose-heading);
  font-weight: 600;
}

/* --- Lists --- */
.cita-event-page .cita-prose-compact ul,
.cita-event-page .cita-prose-compact ol {
  padding-left: 1.25em;
  margin: 0.75em 0;
}

.cita-event-page .cita-prose-compact li {
  margin-bottom: 0.375em;
  line-height: 1.6;
}

.cita-event-page .cita-prose-compact ul li::marker {
  color: var(--prose-marker);
}

.cita-event-page .cita-prose-compact ol li::marker {
  color: var(--prose-marker);
  font-weight: 600;
}

/* --- Blockquote --- */
.cita-event-page .cita-prose-compact blockquote {
  border-left: 2px solid var(--prose-accent-border);
  padding: 0.5rem 0 0.5rem 1rem;
  margin: 0.75em 0;
  font-style: italic;
  color: var(--prose-quote-text);
}

/* --- Code --- */
.cita-event-page .cita-prose-compact code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 0.8em;
  background: var(--prose-code-bg);
  padding: 0.1em 0.3em;
  border-radius: 0.2rem;
  color: var(--prose-code-text);
}

/* --- Images --- */
.cita-event-page .cita-prose-compact img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 0.75em 0;
}

/* --- Table --- */
.cita-event-page .cita-prose-compact table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75em 0;
  font-size: 0.8125rem;
}

.cita-event-page .cita-prose-compact th,
.cita-event-page .cita-prose-compact td {
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid var(--prose-table-border);
}

.cita-event-page .cita-prose-compact th {
  font-weight: 600;
  color: var(--prose-heading);
}

/* ============================================================
   PROSE TIER: MINIMAL – Speaker Bios, Short Snippets
   ============================================================ */

.cita-event-page .cita-prose-minimal {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--modern-text-muted);
}

.cita-event-page .cita-prose-minimal p {
  margin-bottom: 0.5em;
}

.cita-event-page .cita-prose-minimal p:last-child {
  margin-bottom: 0;
}

.cita-event-page .cita-prose-minimal a {
  color: var(--prose-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(6, 182, 212, 0.3);
}

.cita-event-page .cita-prose-minimal strong,
.cita-event-page .cita-prose-minimal b {
  color: var(--prose-body-emphasis);
  font-weight: 600;
}

.cita-event-page .cita-prose-minimal ul,
.cita-event-page .cita-prose-minimal ol {
  padding-left: 1.25em;
  margin: 0.5em 0;
}

.cita-event-page .cita-prose-minimal li {
  margin-bottom: 0.25em;
}

/* ============================================================
   PROSE – Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cita-event-page .cita-prose-full a,
  .cita-event-page .cita-prose-compact a {
    transition: none;
  }
}

/* ============================================================
   GLOW EFFECT - Dynamisch via data-glow-enabled
   ============================================================ */

/* Base Glow Layer - hidden by default */
.cita-event-page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;
  height: 500px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  background: radial-gradient(
    ellipse 80% 50% at 50% 0%,
    var(--cita-glow-color, var(--cita-primary, #06b6d4)) 0%,
    transparent 70%
  );
}

/* Glow enabled - show the effect (more subtle) */
.cita-event-page[data-glow-enabled="true"]::before {
  opacity: 0.08;
}

/* Glow disabled - ensure hidden */
.cita-event-page[data-glow-enabled="false"]::before {
  opacity: 0;
}

/* ============================================================
   SECTION STYLES
   ============================================================ */

/* Section hover enhancement */
.cita-event-page section {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ============================================================
   BUTTON GLOW EFFECTS
   ============================================================ */

/* Primary buttons get subtle glow on hover when enabled */
.cita-event-page[data-glow-enabled="true"] .ticket-book-btn:hover,
.cita-event-page[data-glow-enabled="true"] .ticket-book-btn:active,
.cita-event-page[data-glow-enabled="true"] a[class*="from-cyan"]:hover,
.cita-event-page[data-glow-enabled="true"] a[class*="from-cyan"]:active {
  box-shadow:
    0 0 20px rgba(6, 182, 212, 0.3),
    0 0 40px rgba(6, 182, 212, 0.15);
}

/* ============================================================
   CARD EFFECTS
   ============================================================ */

/* Featured ticket cards get subtle glow when enabled */
.cita-event-page[data-glow-enabled="true"] article[class*="border-cyan"] {
  box-shadow:
    0 0 25px rgba(6, 182, 212, 0.1),
    0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Speaker cards: pronounced lift on hover */
.cita-event-page .speaker-card:hover,
.cita-event-page .speaker-card:active {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(6, 182, 212, 0.05);
}

/* Content/Sponsor cards: subtle lift */
.cita-event-page .content-card:hover,
.cita-event-page .content-card:active,
.cita-event-page .sponsor-card:hover,
.cita-event-page .sponsor-card:active {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

/* Sponsor logo grayscale → color on hover */
.cita-event-page .modern-sponsor-logo {
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter 0.3s, opacity 0.3s;
}
.cita-event-page .group:hover .modern-sponsor-logo,
.cita-event-page .modern-sponsor-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* ============================================================
   ANNOUNCEMENT CARDS
   ============================================================ */

.announcement-card .chevron-icon {
  transition: transform 0.2s ease;
}

/* Scroll behavior is handled by _base.css scoped to event page wrappers */

/* Custom scrollbar for navigation */
.cita-event-page nav::-webkit-scrollbar {
  height: 0.25rem;
}

.cita-event-page nav::-webkit-scrollbar-thumb {
  background: rgba(22, 78, 99, 0.6);
  border-radius: 3px;
}

.cita-event-page nav::-webkit-scrollbar-track {
  background: transparent;
}

/* ============================================================
   SECTION NAV ACTIVE STATE (via Scroll Spy)
   ============================================================ */

/* Default: transparent border to prevent layout shift when is-active adds border */
.cita-event-page nav[aria-label="Sektionen"] a {
  border: 1px solid transparent;
  border-radius: 0.5rem;
}

.cita-event-page nav a.is-active {
  color: var(--modern-accent-light);
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.3);
}

/* ============================================================
   SECTION HOVER GLOW (when glow enabled)
   ============================================================ */

.cita-event-page[data-glow-enabled="true"] section:hover {
  border-color: rgba(51, 65, 85, 0.7);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3), 0 0 40px rgba(6, 182, 212, 0.03);
}

/* ============================================================
   SCROLL ANCHORING — inherits from _base.css (5rem).
   ============================================================ */

/* ============================================================
   FOCUS STATES (Accessibility)
   ============================================================ */

/* Global focus visible styles */
.cita-event-page :focus-visible {
  outline: 2px solid rgba(6, 182, 212, 0.5);
  outline-offset: 2px;
}

/* Navigation links focus */
.cita-event-page nav a:focus-visible {
  outline: 2px solid rgba(6, 182, 212, 0.6);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* Button focus states */
.cita-event-page button:focus-visible,
.cita-event-page .ticket-book-btn:focus-visible {
  outline: 2px solid rgba(6, 182, 212, 0.6);
  outline-offset: 2px;
}

/* Card focus states */
.cita-event-page .ticket-card:focus-within {
  border-color: rgba(6, 182, 212, 0.4);
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.2);
}

/* Ticket card glassmorphism glow on hover */
.cita-event-page .modern-tickets .ticket-card:not([class*="opacity-"]):hover {
  box-shadow:
    0 8px 25px -5px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(6, 182, 212, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Preview mode styling */
.tickets-section--preview-disabled {
  pointer-events: none;
  user-select: none;
}

.cita-event-page .speaker-card:focus-within,
.cita-event-page .sponsor-card:focus-within,
.cita-event-page .content-card:focus-within {
  border-color: rgba(100, 116, 139, 0.6);
  box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.2);
}

/* Section navigation focus — scroll-margin-top handled by _base.css */

/* ============================================================
   CHECKOUT FORM - Dark Mode Variables
   ============================================================ */

/* Modern Template uses dark mode - override light mode fallbacks */
.cita-event-page .ticket-checkout-form,
[data-template="modern"] .ticket-checkout-form {
  --modal-bg: #0f172a;
  --modal-surface: rgba(255, 255, 255, 0.05);
  --modal-border: rgba(100, 116, 139, 0.4);
  --modal-text: #f1f5f9;
  --modal-text-muted: #94a3b8;
  --modal-primary: #06b6d4;
  --modal-primary-hover: #0891b2;
  --modal-primary-muted: rgba(6, 182, 212, 0.15);
  --modal-radius: 1rem;
  --modal-input-radius: 0.5rem;
  --modal-input-bg: rgba(255, 255, 255, 0.05);
  --modal-btn-radius: 0.75rem;
}

/* Checkout form container styling */
.cita-event-page .ticket-checkout-form {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Subtle glow on checkout when glow is enabled */
.cita-event-page[data-glow-enabled="true"] .ticket-checkout-form {
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(6, 182, 212, 0.05);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

/* Reduced motion — universal * rule in _base.css handles
   animation-duration/transition-duration. Only layout overrides here. */
@media (prefers-reduced-motion: reduce) {
  .cita-event-page .speaker-card:hover,
  .cita-event-page .content-card:hover,
  .cita-event-page .sponsor-card:hover {
    transform: none;
  }

  /* Hero glow: static, no filter animation */
  .cita-hero-glow {
    filter: none;
    opacity: 0.2;
  }

  /* Page-level glow: reduce blur for performance */
  .cita-event-page[data-glow-enabled="true"]::before {
    transition: none;
  }

  /* Program tabs */
  .modern-program-tab {
    transition: none;
  }

  /* Sticky bar */
  .modern-sticky-bar {
    transition: none;
  }

  /* Section hover */
  .cita-event-page section {
    transition: none;
  }

  /* Timeline cards */
  .modern-timeline-card {
    transition: none;
  }

  /* Cup ranking items */
  .modern-cup-item {
    transition: none;
  }

  /* Quantity buttons */
  .cita-event-page .modern-tickets-wrapper [data-qty-decrease],
  .cita-event-page .modern-tickets-wrapper [data-qty-increase] {
    transition: none;
  }

  /* Skip link */
  .modern-skip-link {
    transition: none;
  }

  /* Sponsor logos */
  .cita-event-page .modern-sponsor-logo {
    transition: none;
  }
}

/* Print: restore sponsor logos to full color */
@media print {
  .modern-sponsor-logo {
    filter: none !important;
    opacity: 1 !important;
  }
}


/* ============================================================
   PROGRAM SECTION - Clean Timeline
   ============================================================ */

.modern-program-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.modern-program-tab {
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.625rem 1.25rem;
  color: var(--modern-text-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(100, 116, 139, 0.3);
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modern-program-tab:hover,
.modern-program-tab:active {
  color: var(--modern-accent);
  border-color: rgba(6, 182, 212, 0.4);
}

.modern-program-tab.is-active {
  background: linear-gradient(135deg, var(--modern-accent), var(--modern-accent-hover));
  color: var(--modern-bg-base);
  border-color: transparent;
}

.modern-program-day {
  margin-bottom: 2rem;
}

.modern-program-day-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--modern-text-heading);
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(6, 182, 212, 0.4);
  display: inline-block;
}

.modern-timeline {
  position: relative;
  padding-left: 1.5rem;
}

.modern-timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--modern-accent), rgba(100, 116, 139, 0.3));
}

.modern-timeline-item {
  position: relative;
  padding-bottom: 1.5rem;
  padding-left: 1.25rem;
}

.modern-timeline-item::before {
  content: '';
  position: absolute;
  left: -1.5rem;
  top: 0.25rem;
  width: 10px;
  height: 10px;
  background: var(--modern-accent);
  border: 2px solid var(--modern-bg-base);
  border-radius: 50%;
}

.modern-timeline-time {
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--modern-accent);
  margin-bottom: 0.375rem;
}

.modern-timeline-card {
  background: rgba(30, 41, 59, 0.4);
  border: 1px solid rgba(51, 65, 85, 0.5);
  border-radius: 0.75rem;
  padding: 1rem;
  transition: all 0.2s ease;
}

.modern-timeline-card:hover,
.modern-timeline-card:active {
  border-color: rgba(6, 182, 212, 0.3);
  background: rgba(30, 41, 59, 0.6);
}

.modern-timeline-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--modern-text-heading);
  margin-bottom: 0.25rem;
}

.modern-timeline-speaker {
  font-size: 0.875rem;
  color: var(--modern-text-muted);
}

.modern-timeline-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.5rem;
  background: rgba(6, 182, 212, 0.15);
  color: var(--modern-accent);
  border-radius: 0.375rem;
  margin-top: 0.5rem;
}


/* ============================================================
   CUP/LEADERBOARD SECTION - Clean Rankings
   ============================================================ */

.modern-cup-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.modern-cup-item {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(30, 41, 59, 0.4);
  border: 1px solid rgba(51, 65, 85, 0.5);
  border-radius: 0.75rem;
  align-items: center;
  transition: all 0.2s ease;
}

.modern-cup-item:hover,
.modern-cup-item:active {
  border-color: rgba(6, 182, 212, 0.3);
  background: rgba(30, 41, 59, 0.6);
}

/* Top 3 special styling */
.modern-cup-item:nth-child(1) {
  border-color: rgba(251, 191, 36, 0.5);
  background: rgba(251, 191, 36, 0.05);
}

.modern-cup-item:nth-child(2) {
  border-color: rgba(148, 163, 184, 0.5);
}

.modern-cup-item:nth-child(3) {
  border-color: rgba(205, 127, 50, 0.5);
}

.modern-cup-rank {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--modern-accent);
  text-align: center;
}

.modern-cup-item:nth-child(1) .modern-cup-rank {
  color: var(--cita-warning-400, #fbbf24);
}

.modern-cup-item:nth-child(2) .modern-cup-rank {
  color: var(--modern-text-muted);
}

.modern-cup-item:nth-child(3) .modern-cup-rank {
  color: #cd7f32;
}

.modern-cup-info {
  min-width: 0;
}

.modern-cup-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--modern-text-heading);
}

.modern-cup-team {
  font-size: 0.875rem;
  color: var(--modern-text-muted);
}

.modern-cup-score {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--modern-accent);
}


/* ============================================================
   LOCATION SECTION - Clean Venue Display
   ============================================================ */

.modern-location-section {
  background: rgba(30, 41, 59, 0.4);
  border: 1px solid rgba(51, 65, 85, 0.5);
  border-radius: 1rem;
  overflow: hidden;
}

.modern-location-map {
  width: 100%;
  height: 280px;
  background: rgba(15, 23, 42, 0.5);
}

.modern-location-map iframe {
  width: 100%;
  height: 100%;
  border: none;
  filter: grayscale(50%) contrast(1.1);
}

.modern-location-info {
  padding: 1.5rem;
}

.modern-location-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--modern-text-heading);
  margin-bottom: 0.375rem;
}

.modern-location-address {
  font-size: 0.9375rem;
  color: var(--modern-text-muted);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.modern-location-details {
  display: grid;
  gap: 0.75rem;
}

.modern-location-detail {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.modern-location-detail-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-radius: 0.5rem;
  color: var(--modern-accent);
}

.modern-location-detail-text {
  flex: 1;
}

.modern-location-detail-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--modern-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.125rem;
}

.modern-location-detail-value {
  font-size: 0.875rem;
  color: var(--modern-text-heading);
}

.modern-location-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(51, 65, 85, 0.5);
}

/* ==========================================================================
   TICKETS SECTION - Consent Box Overrides
   ========================================================================== */

/* Consent Box (Semantic Class) – Modern uses dark + cyan by default */
.cita-event-page .modern-tickets-wrapper .checkout-consent-box {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 1rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Submit Button – Modern Cyan */
.cita-event-page .modern-tickets-wrapper button[type="submit"] {
  background: var(--modern-accent);
  border-color: var(--modern-accent);
  color: var(--modern-bg-base);
  border-radius: 0.75rem;
}
.cita-event-page .modern-tickets-wrapper button[type="submit"]:hover {
  background: var(--modern-accent-hover);
  border-color: var(--modern-accent-hover);
}
.cita-event-page .modern-tickets-wrapper button[type="submit"]:active {
  background: var(--modern-accent-hover);
  border-color: var(--modern-accent-hover);
  transform: scale(0.97);
}
.cita-event-page .modern-tickets-wrapper button[type="submit"]:focus-visible {
  outline: 2px solid rgba(6, 182, 212, 0.6);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2);
}

/* Quantity Selector – Glassmorphism + Cyan Hover */
.cita-event-page .modern-tickets-wrapper [data-qty-decrease],
.cita-event-page .modern-tickets-wrapper [data-qty-increase] {
  background: rgba(15, 23, 42, 0.8);
  border-color: rgba(148, 163, 184, 0.2);
  border-radius: 0.5rem;
  color: var(--modern-text-heading);
  transition: all 0.15s ease;
}
.cita-event-page .modern-tickets-wrapper [data-qty-decrease]:hover:not(:disabled),
.cita-event-page .modern-tickets-wrapper [data-qty-decrease]:active:not(:disabled),
.cita-event-page .modern-tickets-wrapper [data-qty-increase]:hover:not(:disabled),
.cita-event-page .modern-tickets-wrapper [data-qty-increase]:active:not(:disabled) {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.4);
  color: var(--modern-accent-light);
}
.cita-event-page .modern-tickets-wrapper [data-qty-input] {
  text-align: center;
  font-weight: 600;
}

/* Plus-One Add Button */
.cita-event-page .modern-tickets-wrapper [data-plus-one-add] {
  background: transparent;
  border-color: var(--modern-accent);
  color: var(--modern-accent);
  border-radius: 0.75rem;
}
.cita-event-page .modern-tickets-wrapper [data-plus-one-add]:hover {
  background: rgba(6, 182, 212, 0.1);
}

/* Promo Apply Button */
.cita-event-page .modern-tickets-wrapper [data-promo-apply] {
  background: transparent;
  border-color: var(--modern-accent);
  color: var(--modern-accent);
  border-radius: 0.75rem;
}
.cita-event-page .modern-tickets-wrapper [data-promo-apply]:hover {
  background: rgba(6, 182, 212, 0.1);
}

/* Promo Feedback – Container styling */
.cita-event-page .modern-tickets-wrapper [data-promo-feedback] {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
}

/* Plus-One Remove Button */
.cita-event-page .modern-tickets-wrapper [data-plus-one-remove] {
  border-radius: 0.5rem;
}

/* Feedback Box – Glassmorphism */
.cita-event-page .modern-tickets-wrapper .feedback-box {
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* JS-generated checkboxes in Group/Plus-One → consistent with template */
.cita-event-page .modern-tickets-wrapper [data-group-person] input[type="checkbox"],
.cita-event-page .modern-tickets-wrapper [data-plus-one-person] input[type="checkbox"] {
  border-radius: 0;
}
.cita-event-page .modern-tickets-wrapper [data-group-person] input[type="checkbox"]:checked,
.cita-event-page .modern-tickets-wrapper [data-plus-one-person] input[type="checkbox"]:checked {
  background-color: var(--modern-accent);
  border-color: var(--modern-accent);
}

/* Wallet Buttons (Apple Pay / Google Pay) */
.cita-event-page .modern-tickets-wrapper [data-wallet-apple],
.cita-event-page .modern-tickets-wrapper [data-wallet-google] {
  background: rgba(15, 23, 42, 0.8);
  border-color: rgba(148, 163, 184, 0.2);
  border-radius: 0.75rem;
}

/* Price Summary Total – Cyan Accent */
.cita-event-page .modern-tickets-wrapper [data-checkout-summary] .text-sm.font-semibold {
  color: var(--modern-accent);
}

/* Heading Font – Space Grotesk applied to headings */
/* h3 + semantic heading classes (h1/h2 defined in BASE STYLES above) */
.cita-event-page h3,
.cita-event-page .section-title,
.cita-event-page .ticket-card h3 {
  font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
}

/* Override citastyle.css: span, div { font-family: var(--font-sans) }
   Heading spans must inherit the heading font (Space Grotesk). */
.cita-event-page h1 span, .cita-event-page h1 div,
.cita-event-page h2 span, .cita-event-page h2 div,
.cita-event-page h3 span, .cita-event-page h3 div,
.cita-event-page .section-title span, .cita-event-page .section-title div {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

/* Body text spans: force Inter to prevent citastyle.css var(--font-sans) bleed */
.cita-event-page p span, .cita-event-page p div,
.cita-event-page li span, .cita-event-page li div,
.cita-event-page .cita-prose-full span, .cita-event-page .cita-prose-full div {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

/* Consent Links – Cyan */
.cita-event-page .modern-tickets-wrapper .checkout-consent-label a {
  color: var(--modern-accent);
  text-decoration: underline;
  text-decoration-color: rgba(6, 182, 212, 0.3);
  text-underline-offset: 2px;
}

.cita-event-page .modern-tickets-wrapper .checkout-consent-label a:hover {
  color: var(--modern-accent-light);
  text-decoration-color: rgba(34, 211, 238, 0.5);
}

/* Section Number Badge – Cyan Glow */
.cita-event-page .modern-tickets-wrapper .checkout-section-number {
  background: linear-gradient(135deg, var(--modern-accent), var(--modern-accent-hover));
  color: var(--modern-bg-base);
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
}

/* Login Panel */
.cita-event-page .modern-tickets-wrapper [data-login-inline] {
  background: rgba(6, 182, 212, 0.08);
  border-color: rgba(6, 182, 212, 0.2);
}
.cita-event-page .modern-tickets-wrapper [data-login-inline] .text-amber-100 {
  color: #f1f5f9;
}

/* ============================================================
   LIGHT THEME OVERRIDES
   Complete remap for modern event template utilities and cards
   ============================================================ */

:root[data-theme="light"] body,
:root[data-theme="light"] .main-section,
:root[data-theme="light"] .page-container {
  background: #f8fafc !important;
}

:root[data-theme="light"] .cita-event-page {
  --event-card-bg: rgba(255, 255, 255, 0.92);
  --event-card-border: rgba(148, 163, 184, 0.45);
  --event-card-hover-bg: rgba(255, 255, 255, 0.98);
  --event-card-hover-border: rgba(100, 116, 139, 0.45);

  /* Light mode semantic color overrides */
  --modern-accent: #0891b2;
  --modern-accent-hover: #0e7490;
  --modern-accent-light: #0369a1;
  --modern-accent-ultra-light: #0891b2;
  --modern-text-heading: #0f172a;
  --modern-text-body: #334155;
  --modern-text-muted: #475569;
  --modern-bg-base: #f8fafc;

  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 45%, #e2e8f0 100%);
  color: #0f172a;
}

:root[data-theme="light"] .cita-event-page::before {
  background: radial-gradient(
    ellipse 80% 50% at 50% 0%,
    rgba(8, 145, 178, 0.4) 0%,
    transparent 70%
  );
}

:root[data-theme="light"] .cita-event-page[data-glow-enabled="true"]::before {
  opacity: 0.05;
}

:root[data-theme="light"] .cita-event-page ::selection {
  background: rgba(8, 145, 178, 0.2);
  color: #0f172a;
}

/* Tailwind gradient remapping (dark slate ramps -> light surfaces) */
:root[data-theme="light"] .cita-event-page .from-slate-950,
:root[data-theme="light"] .cita-event-page .from-slate-900,
:root[data-theme="light"] .cita-event-page .from-slate-800,
:root[data-theme="light"] .cita-event-page .from-slate-800\/60,
:root[data-theme="light"] .cita-event-page .from-slate-700,
:root[data-theme="light"] .cita-event-page .from-slate-600,
:root[data-theme="light"] .cita-event-page .from-slate-500,
:root[data-theme="light"] .cita-event-page .from-slate-400 {
  --tw-gradient-from: rgba(255, 255, 255, 0.98) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

:root[data-theme="light"] .cita-event-page .via-slate-950\/60,
:root[data-theme="light"] .cita-event-page .via-slate-900,
:root[data-theme="light"] .cita-event-page .via-slate-900\/95,
:root[data-theme="light"] .cita-event-page .via-slate-900\/60,
:root[data-theme="light"] .cita-event-page .via-slate-800,
:root[data-theme="light"] .cita-event-page .via-slate-800\/95,
:root[data-theme="light"] .cita-event-page .via-slate-800\/40,
:root[data-theme="light"] .cita-event-page .via-slate-700,
:root[data-theme="light"] .cita-event-page .via-slate-700\/50 {
  --tw-gradient-stops: var(--tw-gradient-from), rgba(248, 250, 252, 0.98) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

:root[data-theme="light"] .cita-event-page .to-slate-950,
:root[data-theme="light"] .cita-event-page .to-slate-900,
:root[data-theme="light"] .cita-event-page .to-slate-800,
:root[data-theme="light"] .cita-event-page .to-slate-800\/60,
:root[data-theme="light"] .cita-event-page .to-slate-700,
:root[data-theme="light"] .cita-event-page .to-slate-600,
:root[data-theme="light"] .cita-event-page .to-slate-500,
:root[data-theme="light"] .cita-event-page .to-slate-400 {
  --tw-gradient-to: rgba(241, 245, 249, 0.95) var(--tw-gradient-to-position);
}

/* Background surface remapping */
:root[data-theme="light"] .cita-event-page .bg-slate-950,
:root[data-theme="light"] .cita-event-page .bg-slate-900,
:root[data-theme="light"] .cita-event-page .bg-slate-900\/90,
:root[data-theme="light"] .cita-event-page .bg-slate-900\/80,
:root[data-theme="light"] .cita-event-page .bg-slate-900\/70,
:root[data-theme="light"] .cita-event-page .bg-slate-900\/60,
:root[data-theme="light"] .cita-event-page .bg-slate-900\/50,
:root[data-theme="light"] .cita-event-page .bg-slate-800,
:root[data-theme="light"] .cita-event-page .bg-slate-800\/80,
:root[data-theme="light"] .cita-event-page .bg-slate-800\/70,
:root[data-theme="light"] .cita-event-page .bg-slate-800\/60,
:root[data-theme="light"] .cita-event-page .bg-slate-800\/50,
:root[data-theme="light"] .cita-event-page .bg-slate-800\/40,
:root[data-theme="light"] .cita-event-page .bg-slate-800\/30,
:root[data-theme="light"] .cita-event-page .bg-slate-800\/20,
:root[data-theme="light"] .cita-event-page .bg-slate-700\/60,
:root[data-theme="light"] .cita-event-page .bg-slate-700\/50,
:root[data-theme="light"] .cita-event-page .bg-slate-700\/40,
:root[data-theme="light"] .cita-event-page .bg-slate-700\/30 {
  background-color: rgba(255, 255, 255, 0.94);
}

:root[data-theme="light"] .cita-event-page .bg-slate-600,
:root[data-theme="light"] .cita-event-page .bg-slate-600\/20,
:root[data-theme="light"] .cita-event-page .bg-slate-500\/20,
:root[data-theme="light"] .cita-event-page .bg-slate-500\/15,
:root[data-theme="light"] .cita-event-page .bg-slate-400\/20 {
  background-color: rgba(226, 232, 240, 0.75);
}

/* Light mode: subtle shadow to compensate for reduced glassmorphism visibility */
:root[data-theme="light"] .cita-event-page .bg-slate-900\/50,
:root[data-theme="light"] .cita-event-page .bg-slate-800\/50 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

:root[data-theme="light"] .cita-event-page .bg-white\/10,
:root[data-theme="light"] .cita-event-page .bg-white\/5 {
  background-color: rgba(255, 255, 255, 0.96);
}

/* Text contrast remapping */
:root[data-theme="light"] .cita-event-page .text-white {
  color: #0f172a;
}

:root[data-theme="light"] .cita-event-page .text-slate-100 {
  color: #0f172a;
}

:root[data-theme="light"] .cita-event-page .text-slate-200 {
  color: #1e293b;
}

:root[data-theme="light"] .cita-event-page .text-slate-300 {
  color: #334155;
}

:root[data-theme="light"] .cita-event-page .text-slate-400,
:root[data-theme="light"] .cita-event-page [class*="!text-slate-400"] {
  color: #475569;
}

:root[data-theme="light"] .cita-event-page .text-slate-500 {
  color: #64748b;
}

:root[data-theme="light"] .cita-event-page .text-cyan-200 {
  color: #0e7490;
}

:root[data-theme="light"] .cita-event-page .text-amber-200 {
  color: #92400e;
}

:root[data-theme="light"] .cita-event-page .text-rose-200 {
  color: #be123c;
}

:root[data-theme="light"] .cita-event-page .hover\:text-white:hover,
:root[data-theme="light"] .cita-event-page .hover\:text-slate-300:hover,
:root[data-theme="light"] .cita-event-page .hover\:text-slate-200:hover,
:root[data-theme="light"] .cita-event-page .group-hover\:text-slate-300,
:root[data-theme="light"] .cita-event-page .group-hover\:text-slate-200 {
  color: #0f172a;
}

/* Accent colors: dark-optimized → light-readable */
:root[data-theme="light"] .cita-event-page .text-cyan-300 { color: #0e7490; }
:root[data-theme="light"] .cita-event-page .text-cyan-400 { color: #0e7490; }
:root[data-theme="light"] .cita-event-page .text-emerald-300 { color: #047857; }
:root[data-theme="light"] .cita-event-page .text-amber-300 { color: #b45309; }
:root[data-theme="light"] .cita-event-page .text-amber-400 { color: #92400e; }
:root[data-theme="light"] .cita-event-page .text-violet-300 { color: #6d28d9; }
:root[data-theme="light"] .cita-event-page .text-rose-300 { color: #be123c; }
:root[data-theme="light"] .cita-event-page .text-rose-400 { color: #be123c; }
:root[data-theme="light"] .cita-event-page .text-emerald-200 { color: #047857; }

/* Accent hover states */
:root[data-theme="light"] .cita-event-page .hover\:text-cyan-400:hover { color: #0891b2; }
:root[data-theme="light"] .cita-event-page .hover\:text-cyan-300:hover { color: #0e7490; }
:root[data-theme="light"] .cita-event-page .hover\:text-cyan-200:hover { color: #0e7490; }
:root[data-theme="light"] .cita-event-page .hover\:text-rose-200:hover { color: #9f1239; }

/* Badge backgrounds – stronger tint on light */
:root[data-theme="light"] .cita-event-page .bg-emerald-500\/10 { background-color: rgba(5, 150, 105, 0.1); }
:root[data-theme="light"] .cita-event-page .bg-violet-500\/10 { background-color: rgba(109, 40, 217, 0.1); }
:root[data-theme="light"] .cita-event-page .bg-amber-500\/10 { background-color: rgba(180, 83, 9, 0.1); }
:root[data-theme="light"] .cita-event-page .bg-cyan-500\/10 { background-color: rgba(8, 145, 178, 0.1); }
:root[data-theme="light"] .cita-event-page .bg-rose-500\/10 { background-color: rgba(190, 18, 60, 0.1); }

/* Border remapping */
:root[data-theme="light"] .cita-event-page .border-slate-800,
:root[data-theme="light"] .cita-event-page .border-slate-700\/60,
:root[data-theme="light"] .cita-event-page .border-slate-700\/50,
:root[data-theme="light"] .cita-event-page .border-slate-700\/30,
:root[data-theme="light"] .cita-event-page .border-slate-700\/20,
:root[data-theme="light"] .cita-event-page .border-slate-600\/80,
:root[data-theme="light"] .cita-event-page .border-slate-600\/60,
:root[data-theme="light"] .cita-event-page .border-slate-600\/50,
:root[data-theme="light"] .cita-event-page .border-slate-600\/30,
:root[data-theme="light"] .cita-event-page .border-slate-600,
:root[data-theme="light"] .cita-event-page .border-slate-500\/50,
:root[data-theme="light"] .cita-event-page .border-slate-500\/40,
:root[data-theme="light"] .cita-event-page .border-slate-400\/50,
:root[data-theme="light"] .cita-event-page .border-slate-400\/40,
:root[data-theme="light"] .cita-event-page .border-slate-400\/30,
:root[data-theme="light"] .cita-event-page .border-slate-300\/50,
:root[data-theme="light"] .cita-event-page .border-slate-300\/30 {
  border-color: rgba(148, 163, 184, 0.45);
}

:root[data-theme="light"] .cita-event-page .ring-slate-600\/50,
:root[data-theme="light"] .cita-event-page .ring-slate-600,
:root[data-theme="light"] .cita-event-page .ring-slate-500 {
  --tw-ring-color: rgba(148, 163, 184, 0.45);
}

:root[data-theme="light"] .cita-event-page .focus\:ring-offset-slate-900:focus {
  --tw-ring-offset-color: #f8fafc;
}

:root[data-theme="light"] .cita-event-page .hover\:bg-slate-800\/60:hover,
:root[data-theme="light"] .cita-event-page .hover\:bg-slate-800\/40:hover,
:root[data-theme="light"] .cita-event-page .hover\:bg-slate-700\/60:hover,
:root[data-theme="light"] .cita-event-page .hover\:bg-slate-700\/50:hover,
:root[data-theme="light"] .cita-event-page .hover\:bg-slate-700\/40:hover {
  background-color: rgba(241, 245, 249, 0.98);
}

:root[data-theme="light"] .cita-event-page .hover\:border-slate-600:hover,
:root[data-theme="light"] .cita-event-page .hover\:border-slate-600\/80:hover,
:root[data-theme="light"] .cita-event-page .hover\:border-slate-600\/60:hover,
:root[data-theme="light"] .cita-event-page .hover\:border-slate-500\/50:hover,
:root[data-theme="light"] .cita-event-page .hover\:border-slate-400\/50:hover {
  border-color: rgba(100, 116, 139, 0.55);
}

/* Typography plugin tokens for prose-invert in light theme */
:root[data-theme="light"] .cita-event-page .prose.prose-invert {
  --tw-prose-body: #334155;
  --tw-prose-headings: #0f172a;
  --tw-prose-lead: #334155;
  --tw-prose-links: #0369a1;
  --tw-prose-bold: #0f172a;
  --tw-prose-counters: #64748b;
  --tw-prose-bullets: #94a3b8;
  --tw-prose-hr: rgba(148, 163, 184, 0.35);
  --tw-prose-quotes: #1e293b;
  --tw-prose-quote-borders: rgba(148, 163, 184, 0.4);
  --tw-prose-captions: #64748b;
  --tw-prose-code: #0f172a;
  --tw-prose-pre-code: #e2e8f0;
  --tw-prose-pre-bg: #0f172a;
  --tw-prose-th-borders: rgba(148, 163, 184, 0.45);
  --tw-prose-td-borders: rgba(148, 163, 184, 0.3);
}

:root[data-theme="light"] .cita-event-page nav a.is-active {
  color: #0369a1;
  background: rgba(8, 145, 178, 0.12);
  border-color: rgba(8, 145, 178, 0.35);
}

/* Program section custom classes */
:root[data-theme="light"] .modern-program-tab {
  color: #334155;
  background: rgba(248, 250, 252, 0.98);
  border-color: rgba(148, 163, 184, 0.45);
}

:root[data-theme="light"] .modern-program-tab:hover,
:root[data-theme="light"] .modern-program-tab:active {
  color: #0369a1;
  border-color: rgba(8, 145, 178, 0.45);
}

:root[data-theme="light"] .modern-program-day-title {
  color: #0f172a;
}

:root[data-theme="light"] .modern-timeline::before {
  background: linear-gradient(180deg, #06b6d4, rgba(148, 163, 184, 0.45));
}

:root[data-theme="light"] .modern-timeline-item::before {
  border-color: #f8fafc;
}

:root[data-theme="light"] .modern-timeline-card {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(148, 163, 184, 0.45);
}

:root[data-theme="light"] .modern-timeline-card:hover,
:root[data-theme="light"] .modern-timeline-card:active {
  background: rgba(248, 250, 252, 0.98);
}

:root[data-theme="light"] .modern-timeline-title,
:root[data-theme="light"] .modern-cup-name,
:root[data-theme="light"] .modern-location-name,
:root[data-theme="light"] .modern-location-detail-value {
  color: #0f172a;
}

:root[data-theme="light"] .modern-timeline-speaker,
:root[data-theme="light"] .modern-cup-team,
:root[data-theme="light"] .modern-location-address {
  color: #475569;
}

:root[data-theme="light"] .modern-cup-item,
:root[data-theme="light"] .modern-location-section {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(148, 163, 184, 0.45);
}

:root[data-theme="light"] .modern-location-map {
  background: rgba(241, 245, 249, 0.95);
}

:root[data-theme="light"] .modern-location-map iframe {
  filter: grayscale(10%) contrast(1.02);
}

:root[data-theme="light"] .modern-location-actions {
  border-top-color: rgba(148, 163, 184, 0.4);
}

/* Checkout form variables (modern template, light mode) */
:root[data-theme="light"] .cita-event-page .ticket-checkout-form,
:root[data-theme="light"] [data-template="modern"] .ticket-checkout-form {
  --modal-bg: #f8fafc;
  --modal-surface: rgba(255, 255, 255, 0.98);
  --modal-border: rgba(148, 163, 184, 0.45);
  --modal-text: #0f172a;
  --modal-text-muted: #475569;
  --modal-primary: #0891b2;
  --modal-primary-hover: #0e7490;
  --modal-primary-muted: rgba(8, 145, 178, 0.14);
  --modal-input-bg: #ffffff;
}

:root[data-theme="light"] .cita-event-page .modern-tickets-wrapper .checkout-consent-box {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(148, 163, 184, 0.4);
}

:root[data-theme="light"] .cita-event-page .modern-tickets-wrapper [data-login-inline] {
  background: rgba(8, 145, 178, 0.1);
  border-color: rgba(8, 145, 178, 0.3);
}

:root[data-theme="light"] .cita-event-page .modern-tickets-wrapper [data-login-inline] .text-amber-100 {
  color: #1e293b;
}

:root[data-theme="light"] .cita-event-page .modern-tickets-wrapper [data-qty-decrease],
:root[data-theme="light"] .cita-event-page .modern-tickets-wrapper [data-qty-increase] {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(148, 163, 184, 0.35);
  color: #1e293b;
}
:root[data-theme="light"] .cita-event-page .modern-tickets-wrapper [data-qty-decrease]:hover:not(:disabled),
:root[data-theme="light"] .cita-event-page .modern-tickets-wrapper [data-qty-increase]:hover:not(:disabled) {
  background: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.4);
  color: #0891b2;
}

:root[data-theme="light"] .cita-event-page .modern-tickets-wrapper [data-wallet-apple],
:root[data-theme="light"] .cita-event-page .modern-tickets-wrapper [data-wallet-google] {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(148, 163, 184, 0.35);
}

/* Plus-One / Promo buttons – light mode hover */
:root[data-theme="light"] .cita-event-page .modern-tickets-wrapper [data-plus-one-add] {
  border-color: #0891b2;
  color: #0891b2;
}
:root[data-theme="light"] .cita-event-page .modern-tickets-wrapper [data-plus-one-add]:hover {
  background: rgba(8, 145, 178, 0.06);
}

:root[data-theme="light"] .cita-event-page .modern-tickets-wrapper [data-promo-apply] {
  border-color: #0891b2;
  color: #0891b2;
}
:root[data-theme="light"] .cita-event-page .modern-tickets-wrapper [data-promo-apply]:hover {
  background: rgba(8, 145, 178, 0.06);
}

/* Feedback box – light mode */
:root[data-theme="light"] .cita-event-page .modern-tickets-wrapper .feedback-box {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(148, 163, 184, 0.3);
  color: #334155;
}

/* Program day title border – light mode */
:root[data-theme="light"] .modern-program-day-title {
  border-bottom-color: rgba(8, 145, 178, 0.35);
}

/* Cup ranking top 3 – light mode readable colors */
:root[data-theme="light"] .modern-cup-item:nth-child(1) .modern-cup-rank { color: #ca8a04; }
:root[data-theme="light"] .modern-cup-item:nth-child(2) .modern-cup-rank { color: #64748b; }
:root[data-theme="light"] .modern-cup-item:nth-child(3) .modern-cup-rank { color: #b45309; }
:root[data-theme="light"] .modern-cup-item:nth-child(1) { border-color: rgba(202, 138, 4, 0.3); }
:root[data-theme="light"] .modern-cup-item:nth-child(2) { border-color: rgba(100, 116, 139, 0.3); }
:root[data-theme="light"] .modern-cup-item:nth-child(3) { border-color: rgba(180, 83, 9, 0.3); }

/* ============================================================
   PROSE – Light Theme Token Overrides
   ============================================================ */
:root[data-theme="light"] .cita-event-page {
  --prose-body: #334155;
  --prose-body-emphasis: #1e293b;
  --prose-heading: #0f172a;
  --prose-link: #0e7490;
  --prose-link-hover: #0891b2;
  --prose-link-underline: rgba(14, 116, 144, 0.35);
  --prose-accent: #0e7490;
  --prose-accent-soft: rgba(8, 145, 178, 0.08);
  --prose-accent-border: rgba(8, 145, 178, 0.25);
  --prose-quote-bg: rgba(8, 145, 178, 0.05);
  --prose-quote-border: #0891b2;
  --prose-quote-text: #475569;
  --prose-code-bg: rgba(100, 116, 139, 0.1);
  --prose-code-border: rgba(100, 116, 139, 0.15);
  --prose-code-text: #0f172a;
  --prose-hr: linear-gradient(to right, transparent, rgba(8, 145, 178, 0.3), transparent);
  --prose-marker: #0891b2;
  --prose-table-header-bg: rgba(8, 145, 178, 0.06);
  --prose-table-border: rgba(148, 163, 184, 0.2);
  --prose-img-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .cita-event-page .cita-prose-full figcaption {
  color: #64748b;
}

:root[data-theme="light"] .cita-event-page .cita-prose-minimal {
  color: #475569;
}

:root[data-theme="light"] .cita-event-page .cita-prose-full pre {
  background: #0f172a;
  border-color: rgba(148, 163, 184, 0.2);
}

/* =================================================================
   ORGANIZER CARD
   ================================================================= */
.modern-organizer-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

:root[data-theme="light"] .modern-organizer-card {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

/* Sticky bar – light mode */
:root[data-theme="light"] .modern-sticky-bar {
  background: rgba(248, 250, 252, 0.88);
  border-bottom-color: rgba(148, 163, 184, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}


/* ═══════════════════════════════════════════════════════════════
   Mobile Responsive
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Section Navigation: horizontal scroll */
  .cita-event-page nav[aria-label="Sektionen"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .cita-event-page nav[aria-label="Sektionen"]::-webkit-scrollbar {
    display: none;
  }

  /* Prose Full: compact for mobile */
  .cita-event-page .cita-prose-full {
    font-size: 1rem;
  }

  .cita-event-page .cita-prose-full > p:first-of-type {
    font-size: 1.125rem;
  }

  .cita-event-page .cita-prose-full blockquote {
    padding: 1rem 1.25rem 1rem 1.5rem;
    margin: 1.5rem 0;
  }

  .cita-event-page .cita-prose-full ul li {
    padding-left: 1.5em;
  }

  .cita-event-page .cita-prose-full ol li {
    padding-left: 2em;
  }

  .cita-event-page .cita-prose-full h2 {
    font-size: 1.5rem;
  }

  .cita-event-page .cita-prose-full h3 {
    font-size: 1.25rem;
  }

  .cita-event-page .cita-prose-full pre {
    padding: 1rem;
  }

  /* Timeline cards: compact padding */
  .modern-timeline-card {
    padding: 0.75rem;
  }

  .modern-timeline-item {
    padding-bottom: 1rem;
    padding-left: 1rem;
  }

  /* Program tabs */
  .modern-program-tabs {
    gap: 0.5rem;
  }

  .modern-program-tab {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }

  /* Cup ranking items */
  .modern-cup-item {
    padding: 0.75rem 1rem;
    gap: 0.75rem;
  }

  .modern-cup-rank {
    font-size: 1.25rem;
  }

  .modern-cup-score {
    font-size: 1rem;
  }

  /* Location section */
  .modern-location-map {
    height: 200px;
  }

  .modern-location-info {
    padding: 1rem;
  }

  .modern-location-name {
    font-size: 1.125rem;
  }

  /* Glow effect: reduce height on mobile */
  .cita-event-page::before {
    height: 300px;
  }

  /* iOS Safari input zoom prevention — centralised in _base.css */
}

@media (max-width: 639px) {
  /* Cup grid: collapse score column */
  .modern-cup-item {
    grid-template-columns: 40px 1fr;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
  }

  .modern-cup-score {
    grid-column: 2;
    font-size: 0.9375rem;
  }

  /* Nav tabs: smaller */
  .cita-event-page nav[aria-label="Sektionen"] a {
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
  }

  /* Program tabs: compact */
  .modern-program-tab {
    padding: 0.4375rem 0.875rem;
    font-size: 0.8125rem;
  }

  /* Timeline: tighter */
  .modern-timeline {
    padding-left: 1rem;
  }

  .modern-timeline-item {
    padding-left: 0.75rem;
  }

  .modern-timeline-item::before {
    left: -1rem;
    width: 8px;
    height: 8px;
  }
}

/* Mobile: disable backdrop-filter for performance */
@media (max-width: 639px) {
  .modern-sticky-bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(15, 23, 42, 0.95);
  }
  .cita-event-page .modern-tickets-wrapper .checkout-consent-box {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(15, 23, 42, 0.85);
  }
  .cita-event-page .ticket-checkout-form {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .cita-event-page .modern-tickets-wrapper .feedback-box {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Light mode mobile: solid light backgrounds */
@media (max-width: 639px) {
  :root[data-theme="light"] .modern-sticky-bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(248, 250, 252, 0.95);
  }
  :root[data-theme="light"] .cita-event-page .modern-tickets-wrapper .checkout-consent-box {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.92);
  }
}

/* ============================================================
   HIGH CONTRAST MODE
   ============================================================ */
@media (prefers-contrast: high) {
  .modern-timeline-card,
  .modern-organizer-card,
  .modern-location-section {
    border-width: 2px;
  }

  .modern-program-tab {
    border-width: 2px;
  }

  .modern-skip-link {
    text-decoration: underline;
  }

  .modern-cup-item {
    border-width: 2px;
  }
}

/* ============================================================
   ANNOUNCEMENT POPUP — Modern Template Overrides
   ============================================================ */
.cita-event-page {
  --announcement-popup-bg: rgba(15, 23, 42, 0.95);
  --announcement-popup-border: rgba(6, 182, 212, 0.25);
  --announcement-popup-accent-color: #06b6d4;
  --announcement-popup-text: #f1f5f9;
}

:root[data-theme="light"] .cita-event-page {
  --announcement-popup-bg: rgba(255, 255, 255, 0.95);
  --announcement-popup-border: rgba(148, 163, 184, 0.3);
  --announcement-popup-accent-color: #0891b2;
  --announcement-popup-text: #0f172a;
}

/* =============================================================================
   POSTPONEMENT BANNER — Modern Theme Mapping (Tech Slate + Cyan Glow, BGB §312d)
   Space Grotesk display, Inter body, cyan-glow shadow auf info-state.
   ============================================================================= */
.modern-page .postponement-info-banner {
  --pb-radius-container: 0.75rem;
  --pb-radius-cta: 0.5rem;
  --pb-font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --pb-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --pb-font-cta: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --pb-title-weight: 700;
  --pb-title-tracking: -0.015em;
  --pb-cta-weight: 600;
  --pb-cta-fg-on-accent: #0f172a;
}
.modern-page .postponement-info-banner__cta:hover,
.modern-page .postponement-info-banner__cta:focus-visible {
  box-shadow: 0 0 20px var(--pb-accent);
}
.modern-page .postponement--urgent {
  --pb-urgent-bg: rgba(251, 191, 36, 0.1);
  --pb-urgent-border: rgba(251, 191, 36, 0.35);
  --pb-urgent-accent: #fbbf24;
  --pb-urgent-fg: #fde68a;
  --pb-shadow: 0 4px 16px rgba(251, 191, 36, 0.12), 0 1px 2px rgba(0, 0, 0, 0.3);
}
.modern-page .postponement--info {
  --pb-info-bg: rgba(56, 189, 248, 0.1);
  --pb-info-border: rgba(56, 189, 248, 0.35);
  --pb-info-accent: var(--modern-accent-light, #22d3ee);
  --pb-info-fg: #cffafe;
  --pb-shadow: 0 4px 24px rgba(34, 211, 238, 0.18), 0 1px 2px rgba(0, 0, 0, 0.3);
}
.modern-page .postponement--neutral {
  --pb-neutral-fg: #cbd5e1;
  --pb-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* =============================================================================
   TICKETS UNAVAILABLE BANNER — Modern Theme (Tech Slate + Cyan Glow)
   Space Grotesk display, Inter body, cyan-glow shadow on notstarted.
   ============================================================================= */
.modern-page .tickets-unavailable-banner {
  --tu-radius: 1rem;
  --tu-radius-icon: 1rem;  /* squircle */
  --tu-radius-pill: 9999px;
  --tu-padding-y: 2.5rem;
  --tu-padding-x: 2rem;
  --tu-font-display: 'Space Grotesk', 'Inter', sans-serif;
  --tu-font-body: 'Inter', sans-serif;
  --tu-title-weight: 700;
  --tu-title-tracking: -0.015em;
  --tu-border-width: 1px;
  --tu-backdrop-blur: 14px;
  --tu-pattern-opacity: 0.15;
  --tu-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.modern-page .tickets-unavailable--cancelled {
  --tickets-cancelled-bg: rgba(248, 113, 113, 0.08);
  --tickets-cancelled-border: rgba(248, 113, 113, 0.4);
  --tickets-cancelled-icon: #fca5a5;
  --tickets-cancelled-title: #fecaca;
  --tickets-cancelled-gradient: linear-gradient(135deg, rgba(248, 113, 113, 0.12) 0%, rgba(15, 23, 42, 0) 100%);
}
.modern-page .tickets-unavailable--cancelled {
  box-shadow: 0 4px 24px rgba(239, 68, 68, 0.18), 0 1px 2px rgba(0, 0, 0, 0.4);
}
.modern-page .tickets-unavailable--archived {
  --tickets-archived-bg: rgba(148, 163, 184, 0.08);
  --tickets-archived-border: rgba(148, 163, 184, 0.3);
  --tickets-archived-icon: #cbd5e1;
  --tickets-archived-title: #e2e8f0;
  --tickets-archived-gradient: linear-gradient(135deg, rgba(148, 163, 184, 0.1) 0%, rgba(15, 23, 42, 0) 100%);
}
.modern-page .tickets-unavailable--expired {
  --tickets-expired-bg: rgba(251, 191, 36, 0.1);
  --tickets-expired-border: rgba(251, 191, 36, 0.4);
  --tickets-expired-icon: #fbbf24;
  --tickets-expired-title: #fde68a;
  --tickets-expired-gradient: linear-gradient(135deg, rgba(251, 191, 36, 0.14) 0%, rgba(15, 23, 42, 0) 100%);
}
.modern-page .tickets-unavailable--soldout {
  --tickets-soldout-bg: rgba(192, 132, 252, 0.1);
  --tickets-soldout-border: rgba(192, 132, 252, 0.42);
  --tickets-soldout-icon: #c084fc;
  --tickets-soldout-title: #e9d5ff;
  --tickets-soldout-gradient: linear-gradient(135deg, rgba(192, 132, 252, 0.14) 0%, rgba(15, 23, 42, 0) 100%);
}
.modern-page .tickets-unavailable--soldout {
  box-shadow: 0 4px 24px rgba(168, 85, 247, 0.18), 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* Notstarted — signature cyan glow */
.modern-page .tickets-unavailable--notstarted {
  --tickets-notstarted-bg: rgba(56, 189, 248, 0.1);
  --tickets-notstarted-border: rgba(56, 189, 248, 0.42);
  --tickets-notstarted-icon: #38bdf8;
  --tickets-notstarted-title: #cffafe;
  --tickets-notstarted-gradient: linear-gradient(135deg, rgba(56, 189, 248, 0.14) 0%, rgba(15, 23, 42, 0) 100%);
}
.modern-page .tickets-unavailable--notstarted {
  box-shadow: 0 0 32px rgba(34, 211, 238, 0.2), 0 4px 24px rgba(0, 0, 0, 0.35);
}
.modern-page .tickets-unavailable--draft {
  --tickets-draft-bg: rgba(96, 165, 250, 0.08);
  --tickets-draft-border: rgba(96, 165, 250, 0.42);
  --tickets-draft-icon: #60a5fa;
  --tickets-draft-title: #bfdbfe;
  --tickets-draft-gradient: linear-gradient(135deg, rgba(96, 165, 250, 0.12) 0%, rgba(15, 23, 42, 0) 100%);
}
.modern-page .tickets-unavailable-preview-notice {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.35);
  color: #cffafe;
}

/* =================================================================
   DR3 (2026-05-02) — Modern Light-Mode Sweep
   Fehlende Light-Overrides fuer Sticky-Bar, Prose-Blockquote, UL-Marker.
   WCAG AA Kontrast auf Weiss (Welle-Brief siehe PLAN_v2_post_review.md).
   ================================================================= */

/* DR3.1 — Sticky-Bar Light (F-E-01) */
:root[data-theme="light"] .modern-sticky-bar {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(0, 0, 0, 0.08);
  color: #0f172a;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
}

/* DR3.2 — Prose Blockquote Light (F-E-P1-2) */
:root[data-theme="light"] .cita-event-page .cita-prose-full blockquote {
  border-left-color: #7c3aed;
  background: rgba(124, 58, 237, 0.06);
  color: #1e293b;
}
:root[data-theme="light"] .cita-event-page .cita-prose-full blockquote::before {
  color: rgba(124, 58, 237, 0.30);
}
:root[data-theme="light"] .cita-event-page .cita-prose-full blockquote p {
  color: #1e293b;
}

/* DR3.3 — Prose UL-Marker Light (F-E-P1-3) */
:root[data-theme="light"] .cita-event-page .cita-prose-full ul li::before {
  background: #0891b2;
  box-shadow: 0 0 12px rgba(8, 145, 178, 0.45);
}

/* =================================================================
   DR4.3 (2026-05-02) — Modern Ticket-Card-Border via CSS-Klasse
   Ersetzt Tailwind-Hardcode `border-cyan-500/20` in modern.html.
   Defense gegen CSP-Inline-Style (Frida + Sina).
   ================================================================= */
.modern-ticket-card-border {
  border: 1px solid rgba(6, 182, 212, 0.20);
}
:root[data-theme="light"] .modern-ticket-card-border {
  border-color: rgba(8, 145, 178, 0.30);
}