/* ================================================
   AUDIMAX EVENTS — Cinematic Editorial Dark Design System
   Ink canvas · amber spotlight · paper cream editorial
   Playfair Display + Inter + JetBrains Mono
   Events aggregator for Regensburg venues
   ================================================ */

:root {
    /* ── Ink canvas (deep cinema dark) ── */
    --ax-ink:          #0D0D10;
    --ax-ink-800:      #14151A;
    --ax-ink-700:      #1B1C22;
    --ax-ink-600:      #26272E;
    --ax-ink-500:      #33353D;

    /* ── Paper cream (editorial warm light) ── */
    --ax-paper:        #F4EDE0;
    --ax-paper-soft:   #E4DDD0;
    --ax-paper-muted:  #C9C4B8;

    /* ── Amber (brand primary — spotlight) ── */
    --ax-amber:        #E8A73C;
    --ax-amber-bright: #F5C97A;
    --ax-amber-deep:   #C08820;
    --ax-amber-glow:   rgba(232, 167, 60, 0.15);

    /* ── Danube (secondary cold accent, river-blue) ── */
    --ax-danube:       #3B7F9E;
    --ax-danube-light: #6AA7C2;

    /* ── Supporting tones ── */
    --ax-limestone:    #B8B6B4; /* WCAG AA: 8.7:1 on ink (was #8B8A8A 4.9:1, fine but lifted for AAA captions) */
    --ax-limestone-d:  #8E8D8B; /* WCAG AA: 5.1:1 on ink (was #595A5C 1.9:1, fail) */
    --ax-ember:        #B84E3D;
    --ax-forest:       #2A3B30;

    /* ── Semantic aliases ── */
    --ax-bg:           var(--ax-ink);
    --ax-surface:      var(--ax-ink-800);
    --ax-surface-alt:  var(--ax-ink-700);
    --ax-card:         var(--ax-ink-800);
    --ax-text:         var(--ax-paper);
    --ax-text-muted:   var(--ax-paper-muted);
    --ax-text-faint:   var(--ax-limestone);

    /* ── Borders — hairline amber/paper ── */
    --ax-border:         rgba(244, 237, 224, 0.08);
    --ax-border-strong:  rgba(244, 237, 224, 0.18);
    --ax-border-amber:   rgba(232, 167, 60, 0.28);
    --ax-border-amber-s: rgba(232, 167, 60, 0.55);

    /* ── Shadows — cinematic depth ── */
    --ax-shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.4);
    --ax-shadow:        0 4px 16px rgba(0, 0, 0, 0.5);
    --ax-shadow-md:     0 8px 28px rgba(0, 0, 0, 0.55);
    --ax-shadow-lg:     0 16px 48px rgba(0, 0, 0, 0.6);
    --ax-shadow-amber:  0 0 32px rgba(232, 167, 60, 0.18);

    /* ── Motion ── */
    --ax-transition:    all 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
    --ax-transition-fast: all 0.18s ease;

    /* ── Radius — square editorial corners ── */
    --ax-radius-sm: 0;
    --ax-radius:    2px;
    --ax-radius-lg: 4px;

    /* ── Typography ── */
    --ax-display:  'Playfair Display', 'Didot', 'Bodoni 72', 'Times New Roman', serif;
    --ax-serif:    var(--ax-display); /* alias usato dai titoli del portale — senza definizione cadevano su Inter */
    --ax-body:     'Inter', 'Helvetica Neue', Arial, sans-serif;
    --ax-sans:     var(--ax-body); /* alias usato dai form (ax-input/ax-radio/ax-file) — era indefinito: i campi ereditavano il font del parent */
    --ax-mono:     'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', monospace;

    /* ── Grid ── */
    --ax-container: 1320px;
    --ax-gutter:    24px;
    --ax-nav-height: 76px;
}

/* ──────────────────────────────────────── */
/* BASE                                     */
/* ──────────────────────────────────────── */

* { box-sizing: border-box; }

html, body {
    background: var(--ax-bg);
    color: var(--ax-text);
    font-family: var(--ax-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
    min-height: 100vh;
}

::selection {
    background: var(--ax-amber);
    color: var(--ax-ink);
}

a {
    color: var(--ax-amber);
    text-decoration: none;
    transition: var(--ax-transition-fast);
}
a:hover { color: var(--ax-amber-bright); }

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

button {
    font-family: inherit;
    cursor: pointer;
}

/* ──────────────────────────────────────── */
/* TYPOGRAPHY                               */
/* ──────────────────────────────────────── */

.ax-display {
    font-family: var(--ax-display);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.02;
}

.ax-display-huge {
    font-family: var(--ax-display);
    font-weight: 900;
    font-size: clamp(3rem, 8vw, 6.5rem);
    line-height: 0.96;
    letter-spacing: -0.035em;
}

.ax-display-lg {
    font-family: var(--ax-display);
    font-weight: 900;
    font-size: clamp(2.25rem, 5vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
}

.ax-h1 {
    font-family: var(--ax-display);
    font-weight: 800;
    font-size: clamp(1.875rem, 3.8vw, 2.85rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
}

.ax-h2 {
    font-family: var(--ax-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.ax-overline {
    font-family: var(--ax-mono);
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ax-amber);
}

/* Link-freccia mono — versione canonica (prima duplicata con stili divergenti
   nei <style> di veranstaltungsort.html e veranstalter.html) */
.ax-link-arrow {
    color: var(--ax-amber);
    text-decoration: none;
    font-family: var(--ax-mono);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(232, 167, 60, 0.35);
    padding-bottom: 1px;
    transition: color .15s, border-color .15s;
}
.ax-link-arrow:hover { color: var(--ax-amber-bright); border-bottom-color: var(--ax-amber); }
.ax-link-arrow:focus-visible { outline: 2px solid var(--ax-amber); outline-offset: 3px; }

.ax-overline-muted {
    font-family: var(--ax-mono);
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ax-text-muted);
}

.ax-caption {
    font-family: var(--ax-mono);
    font-size: 0.78rem;
    color: var(--ax-text-faint);
    letter-spacing: 0.02em;
}

.ax-lead {
    font-family: var(--ax-body);
    font-size: clamp(1.06rem, 1.6vw, 1.3rem);
    line-height: 1.55;
    color: var(--ax-text-muted);
    font-weight: 300;
}

/* Drop cap (editorial flourish) */
.ax-dropcap::first-letter {
    font-family: var(--ax-display);
    float: left;
    font-size: 4.5rem;
    line-height: 0.95;
    font-weight: 900;
    margin: 0.1em 0.12em -0.05em 0;
    color: var(--ax-amber);
}

/* ──────────────────────────────────────── */
/* LAYOUT                                   */
/* ──────────────────────────────────────── */

.ax-container {
    max-width: var(--ax-container);
    margin: 0 auto;
    padding: 0 var(--ax-gutter);
}

.ax-container-narrow {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 var(--ax-gutter);
}

.ax-section {
    padding: clamp(4rem, 10vw, 8rem) 0;
}

.ax-section-sm {
    padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.ax-grid {
    display: grid;
    gap: var(--ax-gutter);
}

.ax-grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--ax-gutter);
}

/* Hairline rule (editorial) */
.ax-rule {
    border: 0;
    border-top: 1px solid var(--ax-border);
    margin: 0;
}

.ax-rule-amber {
    border: 0;
    border-top: 1px solid var(--ax-border-amber);
    margin: 0;
}

/* Bracket corner frame (editorial) */
.ax-bracket {
    position: relative;
}
.ax-bracket::before,
.ax-bracket::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1px solid var(--ax-amber);
}
.ax-bracket::before {
    top: 0; left: 0;
    border-right: 0; border-bottom: 0;
}
.ax-bracket::after {
    bottom: 0; right: 0;
    border-left: 0; border-top: 0;
}

/* ──────────────────────────────────────── */
/* NAVBAR                                   */
/* ──────────────────────────────────────── */

.ax-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(13, 13, 16, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ax-border);
}

.ax-nav-inner {
    max-width: var(--ax-container);
    margin: 0 auto;
    padding: 18px var(--ax-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.ax-nav-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--ax-paper);
}

.ax-nav-brand__mark {
    /* Die offizielle Marke ist hochkant (593 : 1000), kein Quadrat: die Hoehe
       gibt das Mass, die Breite folgt. Ein festes 40x40 haette sie in ein
       Quadrat gelegt und links/rechts Luft gelassen, die wie ein Fehler
       aussieht. */
    width: auto;
    height: 40px;
    aspect-ratio: 593.38 / 1000;
    color: var(--ax-amber);
}

.ax-nav-brand__text {
    font-family: var(--ax-display);
    font-weight: 900;
    font-size: 1.35rem;
    letter-spacing: 0.15em;
    color: var(--ax-paper);
    line-height: 1;
}

.ax-nav-brand__sub {
    font-family: var(--ax-mono);
    font-size: 0.65rem;
    letter-spacing: 0.28em;
    color: var(--ax-amber);
    text-transform: uppercase;
    margin-top: 3px;
    line-height: 1;
}

.ax-nav-links {
    display: flex;
    align-items: center;
    gap: 2.2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ax-nav-links a {
    color: var(--ax-text-muted);
    font-family: var(--ax-mono);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    position: relative;
    padding: 6px 0;
}

.ax-nav-links a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--ax-amber);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.ax-nav-links a:hover {
    color: var(--ax-paper);
}
.ax-nav-links a:hover::after { transform: scaleX(1); }

.ax-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--ax-amber);
    color: var(--ax-ink);
    font-family: var(--ax-mono);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
    border: 1px solid var(--ax-amber);
    transition: var(--ax-transition-fast);
}

.ax-nav-cta:hover {
    background: var(--ax-amber-bright);
    color: var(--ax-ink);
    box-shadow: var(--ax-shadow-amber);
}

/* Language switcher entfernt — Seite ist DE-only (E-Mail Tobi/Felix). */

/* Login disclosure (top-right) */
.ax-nav-login {
    position: relative;
    margin-right: 12px;
}
.ax-nav-login summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--ax-border-strong);
    border-radius: var(--ax-radius);
    color: var(--ax-paper);
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    user-select: none;
    transition: border-color 0.15s, background 0.15s;
}
.ax-nav-login summary::-webkit-details-marker { display: none; }
.ax-nav-login summary:hover,
.ax-nav-login[open] summary {
    border-color: rgba(232, 167, 60, 0.55);
    background: rgba(232, 167, 60, 0.08);
    color: var(--ax-amber, #d99e3a);
}
.ax-nav-login summary svg { flex-shrink: 0; }
.ax-nav-login__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 280px;
    background: #16161a;
    border: 1px solid var(--ax-border-strong);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    padding: 6px;
    z-index: 1000;
}
.ax-nav-login__menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--ax-paper);
    text-decoration: none;
    transition: background 0.15s;
}
.ax-nav-login__menu a:hover { background: rgba(232, 167, 60, 0.1); }
.ax-nav-login__menu a strong { display: block; font-size: 14px; font-weight: 600; }
.ax-nav-login__menu a span {
    display: block;
    font-size: 12px;
    color: rgba(244, 237, 224, 0.6);
    margin-top: 2px;
}
@media (max-width: 900px) {
    .ax-nav-login { display: none; }
}

/* Mobile nav toggle */
.ax-nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--ax-border-strong);
    color: var(--ax-paper);
    width: 42px; height: 42px;
    padding: 0;
    border-radius: var(--ax-radius);
}

.ax-nav-mobile { display: none; }

@media (max-width: 900px) {
    .ax-nav-links, .ax-nav-cta { display: none; }
    .ax-nav-toggle { display: flex; align-items: center; justify-content: center; }
    .ax-nav-open .ax-nav-mobile {
        display: block;
    }
    .ax-nav-mobile {
        position: fixed;
        top: var(--ax-nav-height); left: 0; right: 0;
        background: var(--ax-ink);
        border-bottom: 1px solid var(--ax-border-strong);
        padding: 2rem var(--ax-gutter);
        z-index: 99;
    }
    .ax-nav-mobile ul {
        list-style: none;
        margin: 0; padding: 0;
        display: flex; flex-direction: column; gap: 1.4rem;
    }
    .ax-nav-mobile a {
        color: var(--ax-paper);
        font-family: var(--ax-mono);
        font-size: 0.85rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }
}

/* ──────────────────────────────────────── */
/* BUTTONS                                  */
/* ──────────────────────────────────────── */

.ax-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    font-family: var(--ax-mono);
    font-size: 0.76rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    border: 1px solid var(--ax-amber);
    transition: var(--ax-transition);
    cursor: pointer;
    text-decoration: none;
}

.ax-btn-primary {
    background: var(--ax-amber);
    color: var(--ax-ink);
}
.ax-btn-primary:hover {
    background: var(--ax-amber-bright);
    color: var(--ax-ink);
    transform: translateY(-2px);
    box-shadow: var(--ax-shadow-amber);
}

.ax-btn-ghost {
    background: transparent;
    color: var(--ax-paper);
    border-color: var(--ax-border-strong);
}
.ax-btn-ghost:hover {
    border-color: var(--ax-amber);
    color: var(--ax-amber);
}

.ax-btn-lg {
    padding: 18px 36px;
    font-size: 0.82rem;
}

/* ──────────────────────────────────────── */
/* HERO                                     */
/* ──────────────────────────────────────── */

.ax-hero {
    position: relative;
    padding: clamp(5rem, 12vw, 10rem) 0 clamp(4rem, 8vw, 7rem);
    overflow: hidden;
    border-bottom: 1px solid var(--ax-border);
}

.ax-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 70% 20%, rgba(232, 167, 60, 0.08), transparent 50%),
        radial-gradient(circle at 15% 85%, rgba(59, 127, 158, 0.08), transparent 55%),
        linear-gradient(180deg, var(--ax-ink) 0%, var(--ax-ink-800) 100%);
    z-index: -1;
}

.ax-hero-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(244, 237, 224, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244, 237, 224, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: -1;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

.ax-hero-content {
    max-width: var(--ax-container);
    margin: 0 auto;
    padding: 0 var(--ax-gutter);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

@media (max-width: 900px) {
    .ax-hero-content {
        grid-template-columns: 1fr;
    }
}

.ax-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 1.5rem;
}

.ax-hero-eyebrow::before {
    content: '';
    width: 48px;
    height: 1px;
    background: var(--ax-amber);
}

.ax-hero-title {
    font-family: var(--ax-display);
    font-weight: 900;
    font-size: clamp(2.75rem, 7vw, 5.5rem);
    line-height: 0.97;
    letter-spacing: -0.03em;
    color: var(--ax-paper);
    margin: 0 0 1.75rem;
}

.ax-hero-title em {
    font-style: italic;
    color: var(--ax-amber);
    font-weight: 500;
}

.ax-hero-lead {
    font-size: clamp(1.08rem, 1.5vw, 1.25rem);
    line-height: 1.55;
    color: var(--ax-text-muted);
    margin: 0 0 2.5rem;
    max-width: 520px;
    font-weight: 300;
}

.ax-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.ax-hero-skyline {
    position: relative;
    color: var(--ax-amber);
    opacity: 0.85;
}

/* ──────────────────────────────────────── */
/* EVENT CARDS                              */
/* ──────────────────────────────────────── */

.ax-events-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2rem;
    align-items: end;
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--ax-border);
}

/* Variante per gli header delle pagine contenuto (eventlocation/gastronomie/veranstalter):
   layout impilato — overline sopra il titolo, lead full-width. Senza questa variante i <p>
   finivano nelle colonne laterali della grid a 3 colonne pensata per la landing. */
.ax-events-header--stack {
    display: block;
}
.ax-events-header--stack .ax-events-header__title {
    margin-top: 12px;
}

.ax-events-header__title {
    font-family: var(--ax-display);
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1;
    margin: 0;
    letter-spacing: -0.02em;
}

.ax-events-header__count {
    font-family: var(--ax-mono);
    color: var(--ax-text-faint);
    font-size: 0.85rem;
    letter-spacing: 0.14em;
}

.ax-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 36px;
}

.ax-event-card {
    position: relative;
    background: var(--ax-card);
    border: 1px solid var(--ax-border);
    border-radius: 12px; /* uniformità: stesse curve delle sezioni nuove (pillars, galerie, gastro-kacheln) */
    overflow: hidden;
    transition: var(--ax-transition);
    display: flex;
    flex-direction: column;
}

.ax-event-card:hover {
    border-color: var(--ax-border-amber);
    transform: translateY(-4px);
    box-shadow: var(--ax-shadow-lg);
}

/* Felix 2026-06-12 (1): die ganze Kachel ist ein Button zur Event-Seite.
   Stretched-Link unter den CTAs; CTAs/Poster-Link liegen via z-index darüber. */
.ax-event-card__stretch {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.ax-event-card__stretch:focus-visible {
    outline: 2px solid var(--ax-amber);
    outline-offset: -3px;
}
.ax-event-card__poster-link { z-index: 2; } /* è già position:absolute */
.ax-event-card__cta-row {
    position: relative;
    z-index: 2;
}

.ax-event-card__poster {
    position: relative;
    aspect-ratio: 3/4;
    background: var(--ax-ink-700);
    overflow: hidden;
}

.ax-event-card__poster-link {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.ax-event-card__poster-link:focus-visible {
    outline: 2px solid var(--ax-amber);
    outline-offset: -3px;
}

/* Unscharfer Hintergrund aus demselben Bild — füllt die Kachel formatunabhängig
   (Felix 2026-06-23: VOCES8/Bayernslam wurden vorher beschnitten). Eigenes <img>
   (kein inline background-image → keine CSS-Injection über die Bild-URL). Die
   element+class-Selektivität schlägt bewusst die `.ax-event-card__poster img`-Regel
   darunter (cover statt contain, z-index 0). */
/* Unscharfer Backdrop nur für Ausreißer-Formate sichtbar (.is-letterbox, von
   portal.js gesetzt). Bei normalen Hochkant-Plakaten füllt das cover-Bild die
   ganze Kachel → der Backdrop wird gar nicht erst gerendert (Performance). */
.ax-event-card__poster img.ax-event-card__poster-bg {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(20px) saturate(1.15) brightness(0.55);
    transform: scale(1.18);
}
.ax-event-card__poster.is-letterbox img.ax-event-card__poster-bg { display: block; }

.ax-event-card__poster img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    /* Standard: randlos & scharf. Event-Plakate sind ~3:4 → cover schneidet
       praktisch nichts ab und alle Kacheln wirken einheitlich (E-Mail Tobi
       2026-06-24: Backdrop-Balken „nicht optimal"). */
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Stark abweichende Formate (quer/quadratisch/extrem hoch) würden beim cover
   beschnitten → ganzes Plakat (contain) auf dem Backdrop, kein Beschnitt.
   portal.js erkennt das Seitenverhältnis und setzt .is-letterbox. */
.ax-event-card__poster.is-letterbox img {
    object-fit: contain;
}

/* Stock-/Kategorie-Fallback bleibt formatfüllend (cover) — es ist bewusst
   im Kachelformat gestaltet und braucht keinen Hintergrund. */
.ax-event-card__poster img.ax-event-card__poster-stock {
    object-fit: cover;
}

.ax-event-card:hover .ax-event-card__poster img {
    transform: scale(1.04);
}
/* Backdrop behält seine Skalierung (sonst würden beim Hover die Blur-Ränder sichtbar). */
.ax-event-card:hover .ax-event-card__poster img.ax-event-card__poster-bg {
    transform: scale(1.18);
}

.ax-event-card__poster-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ax-ink-700), var(--ax-ink-600));
}

.ax-event-card__date-chip {
    position: absolute;
    top: 14px;
    left: 14px;
    /* Felix-Protokoll 2026-07-03: Poster (Letterbox-Backdrop) überdeckte das
       Datumsfeld auf einzelnen Kacheln — Chip liegt jetzt immer über dem Bild. */
    z-index: 3;
    background: rgba(13, 13, 16, 0.85);
    backdrop-filter: blur(6px);
    border: 1px solid var(--ax-border-amber);
    padding: 10px 14px;
    text-align: center;
    min-width: 68px;
}

.ax-event-card__date-chip__day {
    font-family: var(--ax-display);
    font-weight: 900;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--ax-amber);
}

.ax-event-card__date-chip__month {
    font-family: var(--ax-mono);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    color: var(--ax-paper-muted);
    text-transform: uppercase;
    margin-top: 3px;
}

.ax-event-card__status-chip {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 5px 10px;
    font-family: var(--ax-mono);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: rgba(13, 13, 16, 0.85);
    border: 1px solid var(--ax-border);
    color: var(--ax-paper-muted);
}

.ax-event-card__status-chip.live {
    background: var(--ax-ember);
    color: var(--ax-paper);
    border-color: var(--ax-ember);
    animation: ax-pulse 1.6s infinite;
}

@keyframes ax-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.ax-event-card__body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ax-event-card__venue {
    font-family: var(--ax-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ax-amber);
}

.ax-event-card__title {
    font-family: var(--ax-display);
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1.15;
    margin: 0;
    letter-spacing: -0.01em;
    color: var(--ax-paper);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.ax-event-card__meta {
    font-family: var(--ax-mono);
    font-size: 0.75rem;
    color: var(--ax-text-faint);
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--ax-border);
}

.ax-event-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ax-event-card a.ax-event-card__link {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* ──────────────────────────────────────── */
/* FILTERS                                  */
/* ──────────────────────────────────────── */

.ax-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--ax-border);
}

.ax-filter {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--ax-border);
    color: var(--ax-text-muted);
    font-family: var(--ax-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--ax-transition-fast);
}

.ax-filter:hover {
    border-color: var(--ax-border-amber);
    color: var(--ax-amber);
}

.ax-filter.active {
    background: var(--ax-amber);
    color: var(--ax-ink);
    border-color: var(--ax-amber);
}

/* ──────────────────────────────────────── */
/* EVENT DETAIL                             */
/* ──────────────────────────────────────── */

.ax-event-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: flex-end;
    padding: clamp(4rem, 10vw, 8rem) 0 clamp(2rem, 5vw, 4rem);
    overflow: hidden;
}

.ax-event-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.ax-event-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ax-event-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(13, 13, 16, 0.3) 0%,
        rgba(13, 13, 16, 0.75) 55%,
        rgba(13, 13, 16, 0.98) 100%
    );
}

.ax-event-hero__content {
    position: relative;
    z-index: 1;
    max-width: var(--ax-container);
    margin: 0 auto;
    padding: 0 var(--ax-gutter);
    width: 100%;
}

.ax-event-hero__venue {
    font-family: var(--ax-mono);
    color: var(--ax-amber);
    letter-spacing: 0.22em;
    font-size: 0.82rem;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.ax-event-hero__venue::before {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--ax-amber);
}

.ax-event-hero__title {
    font-family: var(--ax-display);
    font-weight: 900;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.025em;
    margin: 0 0 1.5rem;
    color: var(--ax-paper);
    max-width: 22ch;
}

.ax-event-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    color: var(--ax-text-muted);
    font-family: var(--ax-mono);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ax-border-strong);
}

.ax-event-hero__meta strong {
    display: block;
    color: var(--ax-paper);
    font-family: var(--ax-display);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: 0;
    margin-top: 6px;
}

/* ──────────────────────────────────────── */
/* FOOTER                                   */
/* ──────────────────────────────────────── */

.ax-footer {
    background: var(--ax-ink-800);
    border-top: 1px solid var(--ax-border);
    padding: 5rem 0 2rem;
    margin-top: 6rem;
}

.ax-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    max-width: var(--ax-container);
    margin: 0 auto;
    padding: 0 var(--ax-gutter);
}

@media (max-width: 900px) {
    .ax-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 600px) {
    .ax-footer-grid { grid-template-columns: 1fr; }
}

.ax-footer h3 {
    font-family: var(--ax-mono);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ax-amber);
    margin: 0 0 1.25rem;
    font-weight: 500;
}

.ax-footer ul {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}

.ax-footer a {
    color: var(--ax-paper-soft);
    font-size: 0.95rem;
}

.ax-footer a:hover { color: var(--ax-amber); }

/* „Cookie-Einstellungen" ist ein <button> — es fuehrt nirgendwohin, es oeffnet
   den Banner wieder. Sieht aus wie die Links daneben, verhaelt sich aber wie
   das, was es ist (Tastatur, Screenreader). */
.ax-footer-linkbtn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--ax-paper-soft);
    font-size: 0.95rem;
    cursor: pointer;
    text-align: left;
}

.ax-footer-linkbtn:hover { color: var(--ax-amber); }

.ax-footer-bottom {
    max-width: var(--ax-container);
    margin: 3rem auto 0;
    padding: 2rem var(--ax-gutter) 0;
    border-top: 1px solid var(--ax-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-family: var(--ax-mono);
    font-size: 0.76rem;
    color: var(--ax-text-faint);
    letter-spacing: 0.08em;
}

.ax-footer-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 1.5rem;
}

.ax-footer-brand__mark {
    width: auto;
    height: 48px;
    aspect-ratio: 593.38 / 1000;
    color: var(--ax-amber);
}

.ax-footer-brand__name {
    font-family: var(--ax-display);
    font-weight: 900;
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    color: var(--ax-paper);
}

.ax-footer-blurb {
    color: var(--ax-text-muted);
    max-width: 380px;
    line-height: 1.6;
    font-size: 0.92rem;
}

/* ──────────────────────────────────────── */
/* EMPTY STATES                             */
/* ──────────────────────────────────────── */

.ax-empty {
    text-align: center;
    padding: 6rem 2rem;
    color: var(--ax-text-muted);
    border: 1px dashed var(--ax-border-strong);
}

.ax-empty h3 {
    font-family: var(--ax-display);
    font-size: 1.5rem;
    color: var(--ax-paper);
    margin: 0 0 0.5rem;
}

/* ──────────────────────────────────────── */
/* UTILITY                                  */
/* ──────────────────────────────────────── */

.ax-text-amber { color: var(--ax-amber); }
.ax-text-paper { color: var(--ax-paper); }
.ax-text-muted { color: var(--ax-text-muted); }
.ax-text-faint { color: var(--ax-text-faint); }
.ax-bg-ink    { background: var(--ax-ink); }
.ax-bg-surface { background: var(--ax-surface); }

.ax-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Skip link (a11y) */
.ax-skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px; height: 1px;
    overflow: hidden;
}
.ax-skip-link:focus {
    position: fixed;
    top: 10px; left: 10px;
    width: auto; height: auto;
    padding: 10px 18px;
    background: var(--ax-amber);
    color: var(--ax-ink);
    z-index: 1000;
    font-family: var(--ax-mono);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.8rem;
}

/* Focus visible */
a:focus-visible,
button:focus-visible,
.ax-btn:focus-visible,
.ax-filter:focus-visible,
summary.ax-faq-section__head:focus-visible {
    outline: 2px solid var(--ax-amber);
    outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════
   PORTAL — organizer dashboard, forms, auth pages
   ═══════════════════════════════════════════════════ */

.ax-portal {
    min-height: 100vh;
    background: linear-gradient(180deg, var(--ax-ink) 0%, var(--ax-ink-800) 100%);
    padding: 5rem 0 6rem;
}

.ax-portal-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--ax-border);
    flex-wrap: wrap;
}

.ax-portal-header__title {
    font-family: var(--ax-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--ax-paper);
    margin: 0;
    line-height: 1;
    letter-spacing: -0.02em;
}

.ax-portal-header__sub {
    color: var(--ax-text-muted);
    font-size: 0.95rem;
    margin: 0.5rem 0 0;
}

.ax-portal-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Auth pages (login, invitation) ── */

.ax-auth-wrap {
    max-width: 480px;
    margin: 0 auto;
    padding: 5rem 1.5rem;
}

.ax-auth-card {
    background: var(--ax-ink-800);
    border: 1px solid var(--ax-border);
    border-radius: 4px;
    padding: 3rem 2.5rem;
    box-shadow: var(--ax-shadow-lg);
}

.ax-auth-card__title {
    font-family: var(--ax-serif);
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--ax-paper);
    letter-spacing: -0.01em;
}

.ax-auth-card__sub {
    color: var(--ax-text-muted);
    margin: 0 0 2rem;
    font-size: 0.95rem;
}

.ax-auth-card__footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ax-border);
    color: var(--ax-text-muted);
    font-size: 0.88rem;
    text-align: center;
}

.ax-auth-card__footer a { color: var(--ax-amber); }

/* ── Forms ── */

.ax-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem 1.25rem;
}

.ax-form-row { grid-column: 1 / -1; }

.ax-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ax-field label {
    font-family: var(--ax-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ax-text-muted);
}

.ax-field .ax-help {
    font-size: 0.78rem;
    color: var(--ax-text-faint);
    line-height: 1.5;
}

.ax-field .ax-errors {
    color: var(--ax-ember);
    font-size: 0.82rem;
    line-height: 1.4;
}

.ax-input {
    width: 100%;
    padding: 12px 14px;
    background: var(--ax-ink-700);
    border: 1px solid var(--ax-border-strong);
    border-radius: 3px;
    color: var(--ax-paper);
    font-family: var(--ax-sans);
    font-size: 0.95rem;
    transition: var(--ax-transition-fast);
}

.ax-input::placeholder { color: var(--ax-text-faint); }

.ax-input:focus {
    outline: none;
    border-color: var(--ax-amber);
    box-shadow: 0 0 0 3px var(--ax-amber-glow);
    background: var(--ax-ink-600);
}

textarea.ax-input { resize: vertical; min-height: 80px; font-family: var(--ax-sans); }

.ax-input--readonly {
    background: var(--ax-ink-800);
    color: var(--ax-text-muted);
    cursor: not-allowed;
    border-style: dashed;
}

.ax-field__help {
    margin: 0;
    font-size: 0.78rem;
    color: var(--ax-text-faint);
    line-height: 1.5;
}

.ax-field__group-label {
    font-family: var(--ax-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ax-text-muted);
    display: block;
    margin-bottom: 4px;
}

ul.ax-radio {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

ul.ax-radio li {
    margin: 0;
}

ul.ax-radio li label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ax-sans);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ax-paper);
    cursor: pointer;
    padding: 8px 12px;
    border: 1px solid var(--ax-border-strong);
    border-radius: 3px;
    background: var(--ax-ink-700);
    transition: var(--ax-transition-fast);
}

ul.ax-radio li label:hover {
    border-color: var(--ax-amber);
}

ul.ax-radio li input[type="radio"] {
    accent-color: var(--ax-amber);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

ul.ax-radio li input[type="radio"]:checked + * {
    color: var(--ax-amber);
}

.ax-file {
    width: 100%;
    padding: 10px;
    background: var(--ax-ink-700);
    border: 1px dashed var(--ax-border-strong);
    border-radius: 3px;
    color: var(--ax-text-muted);
    font-family: var(--ax-sans);
    font-size: 0.88rem;
    cursor: pointer;
}

.ax-file:hover { border-color: var(--ax-amber); color: var(--ax-paper); }

.ax-form-submit {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ax-border);
    flex-wrap: wrap;
}

/* ── Messages / flash ── */

.ax-messages {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ax-msg {
    padding: 12px 16px;
    border-radius: 3px;
    font-size: 0.92rem;
    border-left: 3px solid var(--ax-amber);
    background: rgba(232, 167, 60, 0.08);
    color: var(--ax-paper);
}

.ax-msg--error { border-left-color: var(--ax-ember); background: rgba(184, 78, 61, 0.12); }
.ax-msg--success { border-left-color: #5ca66d; background: rgba(92, 166, 109, 0.12); }
.ax-msg--warning { border-left-color: var(--ax-amber); background: rgba(232, 167, 60, 0.12); }

/* ── Dashboard event list ── */

.ax-portal-section {
    margin-bottom: 3rem;
}

.ax-portal-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--ax-border);
}

.ax-portal-section__title {
    font-family: var(--ax-serif);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--ax-paper);
}

.ax-portal-section__count {
    font-family: var(--ax-mono);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    color: var(--ax-text-faint);
    text-transform: uppercase;
}

.ax-event-row {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 1.25rem;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--ax-ink-800);
    border: 1px solid var(--ax-border);
    border-radius: 4px;
    margin-bottom: 12px;
    transition: var(--ax-transition-fast);
}

.ax-event-row:hover { border-color: var(--ax-border-amber); transform: translateX(2px); }

.ax-event-row__date {
    text-align: center;
    padding: 8px 0;
    border: 1px solid var(--ax-border-amber);
    border-radius: 3px;
    background: rgba(232, 167, 60, 0.06);
}

.ax-event-row__date strong {
    display: block;
    font-family: var(--ax-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ax-amber);
    line-height: 1;
}

.ax-event-row__date span {
    font-family: var(--ax-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ax-text-muted);
}

.ax-event-row__body {
    min-width: 0;
}

.ax-event-row__title {
    font-family: var(--ax-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ax-paper);
    margin: 0 0 4px;
    line-height: 1.3;
}

.ax-event-row__meta {
    display: flex;
    gap: 16px;
    color: var(--ax-text-muted);
    font-size: 0.82rem;
    font-family: var(--ax-mono);
    letter-spacing: 0.04em;
    flex-wrap: wrap;
}

.ax-event-row__actions {
    display: flex;
    gap: 8px;
}

.ax-chip-status {
    font-family: var(--ax-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
    border: 1px solid currentColor;
    white-space: nowrap;
}

.ax-chip-status--draft { color: var(--ax-text-faint); }
.ax-chip-status--published { color: var(--ax-amber); }
.ax-chip-status--live { color: #5ca66d; }
.ax-chip-status--completed { color: var(--ax-limestone); }
.ax-chip-status--cancelled { color: var(--ax-ember); }
/* Freigabe-Workflow (E-Mail Tobi/Felix, Punkt 1) */
.ax-chip-status--pending { color: var(--ax-amber); }
.ax-chip-status--updated { color: var(--ax-amber); }
.ax-chip-status--storno { color: var(--ax-ember); }
.ax-chip-status--rejected { color: var(--ax-ember); }
.ax-event-row--attention { box-shadow: inset 3px 0 0 var(--ax-amber); }
.ax-event-row__flag {
    font-family: var(--ax-mono);
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: #1a1a1a; background: var(--ax-amber); padding: 2px 7px; border-radius: 2px;
    margin-left: 8px;
}
/* Freigabe-Badge oben rechts im Eventformular */
.ax-freigabe-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--ax-mono); font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 5px 10px; border-radius: 3px; border: 1px solid currentColor;
}

.ax-portal-empty {
    text-align: center;
    padding: 4rem 2rem;
    border: 1px dashed var(--ax-border);
    border-radius: 4px;
    color: var(--ax-text-muted);
}

.ax-portal-empty h3 {
    font-family: var(--ax-serif);
    font-size: 1.5rem;
    color: var(--ax-paper);
    margin: 0 0 0.5rem;
}

.ax-btn-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
}

.ax-btn-danger {
    background: transparent;
    color: var(--ax-ember);
    border: 1px solid var(--ax-ember);
}

.ax-btn-danger:hover {
    background: var(--ax-ember);
    color: var(--ax-paper);
}

@media (max-width: 640px) {
    .ax-event-row {
        grid-template-columns: 64px 1fr;
    }
    .ax-event-row__actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-top: 8px;
        border-top: 1px solid var(--ax-border);
    }
}

/* ──────────────────────────────────────── */
/* FEATURED HERO — Netflix-style billboard  */
/* ──────────────────────────────────────── */

.ax-hero--featured {
    position: relative;
    padding: 0;
    min-height: min(100vh, 920px);
    overflow: hidden;
    border-bottom: 0;
    margin-bottom: -120px; /* let rails overlap the fade into ink */
    padding-bottom: 120px;
    isolation: isolate;
}

/* ── Carousel slides: crossfade stack ─────────────────────────── */
.ax-hero-slide {
    position: absolute;
    inset: 0;
    display: grid;
    align-items: center;  /* prima era 'end' — center evita sovrapposizione cookie banner */
    padding-bottom: 12vh; /* spazio per cookie banner / scroll hint */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 900ms ease-out, visibility 0s linear 900ms;
    z-index: 0;
}

.ax-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
    transition: opacity 900ms ease-out, visibility 0s linear 0s;
}

/* Ken-burns only on the active slide; inactive slides reset to base scale */
.ax-hero-slide:not(.is-active) .ax-hero-featured__bg img {
    animation: none;
    transform: scale(1.06);
}

/* Staggered content entrance on activation */
.ax-hero-slide .ax-hero-featured__badge,
.ax-hero-slide .ax-hero-featured__title,
.ax-hero-slide .ax-hero-featured__meta,
.ax-hero-slide .ax-hero-featured__lead,
.ax-hero-slide .ax-hero-featured__actions {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 700ms ease-out, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ax-hero-slide.is-active .ax-hero-featured__badge   { opacity: 1; transform: none; transition-delay: 140ms; }
.ax-hero-slide.is-active .ax-hero-featured__title   { opacity: 1; transform: none; transition-delay: 240ms; }
.ax-hero-slide.is-active .ax-hero-featured__meta    { opacity: 1; transform: none; transition-delay: 360ms; }
.ax-hero-slide.is-active .ax-hero-featured__lead    { opacity: 1; transform: none; transition-delay: 460ms; }
.ax-hero-slide.is-active .ax-hero-featured__actions { opacity: 1; transform: none; transition-delay: 560ms; }

/* ── Carousel controls: arrows + pause ─────────── */
.ax-hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid rgba(244, 237, 224, 0.22);
    background: rgba(13, 13, 16, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--ax-paper);
    font-family: var(--ax-display);
    font-size: 2.2rem;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    opacity: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 4px;
    transition: opacity 280ms ease, background 240ms ease,
                border-color 240ms ease, color 240ms ease,
                transform 240ms ease;
}

.ax-hero--featured:hover .ax-hero-nav,
.ax-hero-nav:focus-visible {
    opacity: 1;
}

.ax-hero-nav:hover {
    background: var(--ax-amber);
    color: var(--ax-ink);
    border-color: var(--ax-amber);
}

.ax-hero-nav--prev { left: clamp(1rem, 3vw, 2.5rem); }
.ax-hero-nav--next { right: clamp(1rem, 3vw, 2.5rem); }
.ax-hero-nav--pause {
    bottom: clamp(1.5rem, 3vh, 2.5rem);
    top: auto;
    transform: none;
    right: clamp(1rem, 3vw, 2.5rem);
    width: 42px; height: 42px;
    font-size: 0.9rem;
}
.ax-hero-nav--pause:hover { transform: scale(1.06); }
.ax-hero-nav--pause[aria-pressed="true"] {
    background: var(--ax-amber);
    color: var(--ax-ink);
    border-color: var(--ax-amber);
    opacity: 1;
}

.ax-hero-nav--prev:hover { transform: translateY(-50%) translateX(-2px); }
.ax-hero-nav--next:hover { transform: translateY(-50%) translateX(2px); }

/* Focus-visible: assicura outline su tutti i controlli interattivi del carosello */
.ax-hero-nav:focus-visible,
.ax-cookie-btn:focus-visible,
.ax-event-card__cta-primary:focus-visible,
.ax-event-card__cta-secondary:focus-visible,
.ax-category-chip:focus-visible,
.ax-mobile-sticky-cta:focus-visible {
    outline: 3px solid var(--ax-amber);
    outline-offset: 3px;
    z-index: 10;
}

/* Touch target ≥ 44×44px su mobile-sticky */
@media (max-width: 768px) {
    .ax-mobile-sticky-cta { min-height: 48px; }
}

/* Marquee: pausa on hover/focus per WCAG 2.2.2 */
.ax-marquee:hover .ax-marquee__inner,
.ax-marquee:focus-within .ax-marquee__inner,
.ax-marquee.is-paused .ax-marquee__inner {
    animation-play-state: paused;
}
.ax-marquee__pause {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid rgba(232, 167, 60, 0.45);
    color: var(--ax-amber);
    font-size: 0.6rem;
    cursor: pointer;
    border-radius: 4px;
    line-height: 1;
    transition: background .18s, color .18s;
    vertical-align: middle;
}
.ax-marquee__pause:hover { background: rgba(232,167,60,0.10); }
.ax-marquee__pause[aria-pressed="true"] {
    background: var(--ax-amber);
    color: var(--ax-ink);
}
.ax-marquee__pause:focus-visible {
    outline: 2px solid var(--ax-amber);
    outline-offset: 2px;
}

/* Event card CTA: primary always full-width on mobile, secondary inline below */
@media (max-width: 540px) {
    .ax-event-card__cta-row {
        flex-direction: column;
        gap: 8px;
    }
    .ax-event-card__cta-primary {
        width: 100%;
        justify-content: center;
    }
    .ax-event-card__cta-secondary {
        width: 100%;
        text-align: center;
        opacity: 0.78;
        font-size: 0.74rem;
    }
}

/* Sempre cliccabili tramite tastiera/touch — non solo on hover */
.ax-hero--featured .ax-hero-nav { opacity: 0.5; }
.ax-hero--featured:hover .ax-hero-nav,
.ax-hero--featured:focus-within .ax-hero-nav,
.ax-hero-nav:focus-visible { opacity: 1; }

@media (max-width: 768px) {
    .ax-hero-nav--prev,
    .ax-hero-nav--next { display: none; }
    .ax-hero-nav--pause { display: inline-flex; opacity: 0.85; right: 1rem; bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ax-hero-slide,
    .ax-hero-slide .ax-hero-featured__badge,
    .ax-hero-slide .ax-hero-featured__title,
    .ax-hero-slide .ax-hero-featured__meta,
    .ax-hero-slide .ax-hero-featured__lead,
    .ax-hero-slide .ax-hero-featured__actions {
        transition: none;
    }
}

.ax-hero-featured__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--ax-ink-700);
}

.ax-hero-featured__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.9) contrast(1.05);
    animation: ax-hero-ken-burns 28s ease-out both;
    transform-origin: 52% 48%;
}

/* Editorial fallback — subtle gradients and texture when no poster */
.ax-hero-slide--editorial .ax-hero-featured__bg {
    background:
        radial-gradient(ellipse at 78% 30%, rgba(232, 167, 60, 0.32), transparent 48%),
        radial-gradient(ellipse at 12% 85%, rgba(184, 78, 61, 0.24), transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(59, 127, 158, 0.10), transparent 65%),
        linear-gradient(160deg, var(--ax-ink) 0%, var(--ax-ink-700) 55%, var(--ax-ink-800) 100%);
}

.ax-hero-featured__noise {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 2px,
            rgba(244, 237, 224, 0.015) 2px,
            rgba(244, 237, 224, 0.015) 3px
        ),
        linear-gradient(90deg, rgba(244, 237, 224, 0.02) 1px, transparent 1px),
        linear-gradient(rgba(244, 237, 224, 0.02) 1px, transparent 1px);
    background-size: auto, 40px 40px, 40px 40px;
    mix-blend-mode: screen;
    mask-image: radial-gradient(ellipse at 30% 60%, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 30% 60%, black 30%, transparent 75%);
    opacity: 0.6;
}

@keyframes ax-hero-ken-burns {
    0%   { transform: scale(1.06); }
    100% { transform: scale(1.14); }
}

.ax-hero-featured__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(13,13,16,0.62) 0%, rgba(13,13,16,0.72) 40%, rgba(13,13,16,0.94) 100%),
        radial-gradient(ellipse at center, rgba(13,13,16,0.30) 25%, rgba(13,13,16,0.70) 100%);
}

.ax-hero-featured__content {
    position: relative;
    z-index: 1;
    max-width: var(--ax-container);
    width: 100%;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 5vw, 4rem);  /* niente padding bottom — gestito da slide */
    display: grid;
    gap: 1rem;  /* gap ridotto */
    max-width: min(var(--ax-container), 1100px);
}

.ax-hero-featured__badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.4rem;
}

.ax-hero-featured__badge-text {
    display: grid;
    gap: 3px;
}

.ax-hero-featured__badge-top {
    font-family: var(--ax-mono);
    font-size: 0.66rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ax-paper);
    opacity: 0.75;
}

.ax-hero-featured__badge-sub {
    font-family: var(--ax-mono);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--ax-amber);
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.ax-hero-featured__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ax-amber);
    box-shadow: 0 0 0 4px rgba(232, 167, 60, 0.18);
    animation: ax-pulse 1.8s infinite;
}

.ax-hero-featured__title {
    font-family: var(--ax-display);
    font-weight: 900;
    font-size: clamp(2.5rem, 6.5vw, 5.4rem);  /* ridotto: meno verticale, CTA visibile */
    line-height: 0.96;
    letter-spacing: -0.035em;
    color: var(--ax-paper);
    margin: 0;
    text-wrap: balance;
    max-width: 18ch;
    text-shadow: 0 6px 48px rgba(0, 0, 0, 0.65);
}

.ax-hero-featured__meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    align-items: center;
}

.ax-hero-featured__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ax-mono);
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    color: var(--ax-paper);
    padding: 6px 12px;
    border: 1px solid var(--ax-border-strong);
    background: rgba(13, 13, 16, 0.4);
    backdrop-filter: blur(4px);
    text-transform: uppercase;
    font-weight: 500;
}

.ax-hero-featured__meta-item--faint {
    opacity: 0.7;
    border-color: transparent;
    background: transparent;
    padding-left: 4px;
}

.ax-hero-featured__lead {
    font-family: var(--ax-body);
    font-size: clamp(1.02rem, 1.35vw, 1.18rem);
    line-height: 1.55;
    color: var(--ax-paper-muted);
    max-width: 52ch;
    margin: 0.75rem 0 0.3rem;
    font-weight: 300;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.ax-hero-featured__actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 0.85rem;
}

/* Netflix "Play" primary CTA — paper-white bg + ink text */
.ax-hero-featured__play,
.ax-hero-featured__info {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    font-family: var(--ax-body);
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: var(--ax-transition-fast);
    border: 1px solid transparent;
    cursor: pointer;
}

.ax-hero-featured__play {
    background: var(--ax-amber);
    color: var(--ax-ink);
    border-color: var(--ax-amber);
}

.ax-hero-featured__play:hover {
    background: var(--ax-amber-bright);
    color: var(--ax-ink);
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(232, 167, 60, 0.35);
}
.ax-hero-featured__play--dark {
    background: rgba(13, 13, 16, 0.82);
    color: var(--ax-paper);
    border-color: rgba(244, 237, 224, 0.55);
    backdrop-filter: blur(4px);
}
.ax-hero-featured__play--dark:hover {
    background: var(--ax-ink-700);
    color: var(--ax-paper);
    border-color: var(--ax-paper);
}

.ax-hero-featured__play svg {
    transition: transform 0.24s ease;
}

.ax-hero-featured__play:hover svg {
    transform: translateX(2px);
}

.ax-hero-featured__info {
    /* UX-Audit: war grauer Backing (109,109,110/.58) → Text nur 4.44:1.
       Dunkler Ink-Backing → ~10:1, klar über dem Hero-Bild lesbar. */
    background: rgba(13, 13, 16, 0.62);
    color: var(--ax-paper);
    backdrop-filter: blur(4px);
}

.ax-hero-featured__info:hover {
    background: rgba(13, 13, 16, 0.82);
    color: var(--ax-paper);
}

/* Hero featured — mobile compaction (consolidato 2026-05-22 task #6) */
@media (max-width: 640px) {
    .ax-hero--featured {
        min-height: 78vh;            /* prima 88vh → fold più alto, CTA visibili */
        margin-bottom: -40px;
        padding-bottom: 40px;
    }
    .ax-hero-featured__title {
        max-width: none;
        font-size: clamp(2rem, 8vw, 3.5rem);  /* override mobile per evitare overflow */
        line-height: 1.0;
    }
    .ax-hero-featured__lead { display: none; }  /* riduci ingombro testo, CTA dopo hero copre */
    .ax-hero-featured__content { gap: 0.6rem; padding: 0 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ax-hero-featured__bg img { animation: none; }
    .ax-hero-featured__dot { animation: none; }
}

/* ──────────────────────────────────────── */
/* MARQUEE TICKER                           */
/* ──────────────────────────────────────── */

.ax-marquee {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 18px;
    padding: 16px 0 16px 24px;
    background: var(--ax-ink-800);
    border-block: 1px solid var(--ax-border-amber);
    overflow: hidden;
}

.ax-marquee__label {
    position: relative;
    z-index: 2;
    padding-right: 16px;
    border-right: 1px solid var(--ax-border-amber);
    display: flex;
    align-items: center;
    gap: 10px;
}

.ax-marquee__label::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ax-ember);
    box-shadow: 0 0 0 4px rgba(184, 78, 61, 0.18);
    animation: ax-pulse 1.6s infinite;
}

.ax-marquee__track {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.ax-marquee__inner {
    display: inline-flex;
    align-items: center;
    gap: 2.4rem;
    white-space: nowrap;
    animation: ax-marquee-slide 55s linear infinite;
    will-change: transform;
}

.ax-marquee:hover .ax-marquee__inner {
    animation-play-state: paused;
}

.ax-marquee__item {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--ax-body);
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    color: var(--ax-paper);
}

.ax-marquee__date {
    font-family: var(--ax-mono);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    color: var(--ax-amber);
    font-variant-numeric: tabular-nums;
}

.ax-marquee__name {
    font-weight: 500;
}

.ax-marquee__venue {
    color: var(--ax-paper-muted);
    font-size: 0.82rem;
    font-family: var(--ax-mono);
}

.ax-marquee__sep {
    color: var(--ax-amber);
    opacity: 0.55;
    font-size: 0.7rem;
}

@keyframes ax-marquee-slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

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

@media (max-width: 640px) {
    .ax-marquee {
        grid-template-columns: 1fr;
        padding: 8px 0;
        border-block-width: 1px;
    }
    .ax-marquee__label {
        display: none;
    }
    .ax-marquee__inner {
        gap: 1.4rem;
        animation-duration: 38s;
    }
    .ax-marquee__item {
        font-size: 0.78rem;
        gap: 7px;
    }
    .ax-marquee__date {
        font-size: 0.68rem;
        letter-spacing: 0.10em;
    }
    .ax-marquee__venue {
        font-size: 0.7rem;
    }
    .ax-marquee__sep {
        font-size: 0.6rem;
    }
}

/* ──────────────────────────────────────── */
/* RAILS — Netflix horizontal scroll rows   */
/* ──────────────────────────────────────── */

.ax-rail {
    position: relative;
    margin-top: clamp(2rem, 4vw, 3.2rem);
}

.ax-rail:first-of-type {
    margin-top: 0;
}

.ax-rail__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
}

.ax-rail__kicker {
    font-family: var(--ax-display);
    font-weight: 800;
    font-size: clamp(1.3rem, 2.4vw, 1.85rem);
    letter-spacing: -0.012em;
    color: var(--ax-paper);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    position: relative;
    padding-left: 14px;
}

.ax-rail__kicker::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 68%;
    background: var(--ax-amber);
}

.ax-rail__kicker--tonight {
    color: var(--ax-paper);
}

.ax-rail__kicker--tonight::before {
    background: var(--ax-ember);
    box-shadow: 0 0 14px var(--ax-ember);
}

.ax-rail__pulse {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ax-ember);
    box-shadow: 0 0 0 4px rgba(184, 78, 61, 0.18);
    animation: ax-pulse 1.6s infinite;
    margin-left: 4px;
}

.ax-rail__count {
    font-family: var(--ax-mono);
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    color: var(--ax-text-faint);
    text-transform: uppercase;
}

.ax-rail__viewport {
    position: relative;
}

.ax-rail__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 18vw);
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--ax-gutter);
    scroll-behavior: smooth;
    padding: 8px 0 24px;
    margin: 0 calc(var(--ax-gutter) * -1);
    padding-inline: var(--ax-gutter);

    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ax-rail__track::-webkit-scrollbar {
    display: none;
}

.ax-rail__track > .ax-event-card {
    scroll-snap-align: start;
    width: 100%;
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.3s ease,
                z-index 0s linear 0.3s;
}

.ax-rail__track > .ax-event-card:hover {
    transform: translateY(-6px) scale(1.035);
    z-index: 3;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.7);
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.3s ease,
                z-index 0s linear 0s;
}

/* Chevron nav buttons */
.ax-rail__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 80px;
    background: rgba(13, 13, 16, 0.82);
    color: var(--ax-paper);
    border: 1px solid var(--ax-border-strong);
    font-size: 2rem;
    line-height: 1;
    font-family: var(--ax-body);
    cursor: pointer;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.25s ease, background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.ax-rail:hover .ax-rail__nav {
    opacity: 1;
}

.ax-rail__nav:hover {
    background: var(--ax-amber);
    color: var(--ax-ink);
    border-color: var(--ax-amber);
}

.ax-rail__nav--prev { left: 4px; }
.ax-rail__nav--next { right: 4px; }

@media (max-width: 900px) {
    .ax-rail__nav { display: none; }
    .ax-rail__track { grid-auto-columns: minmax(220px, 60vw); }
}

@media (prefers-reduced-motion: reduce) {
    .ax-rail__pulse { animation: none; }
    .ax-rail__track { scroll-behavior: auto; }
    .ax-rail__track > .ax-event-card:hover { transform: none; }
}

/* ──────────────────────────────────────── */
/* EVENT CARD — poster-grid enhancement     */
/* ──────────────────────────────────────── */

.ax-event-card::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--ax-amber);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: 1;
}

.ax-event-card:hover::after {
    transform: scaleX(1);
}

.ax-event-card__poster::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        transparent 55%,
        rgba(13, 13, 16, 0.75) 100%);
    opacity: 0;
    transition: opacity 0.42s ease;
    pointer-events: none;
}

.ax-event-card:hover .ax-event-card__poster::after {
    opacity: 1;
}

/* ════════════════════════════════════════════════════════════════════════════ */
/* WOW Redesign 2026-04-30                                                       */
/* - Card CTA "Tickets sichern" prominente (cinemaxx ha solo overlay invisibile) */
/* - Category badge sul poster                                                   */
/* - Hero video loop                                                             */
/* - Filter chips per categoria                                                  */
/* - Intro splash animation                                                      */
/* ════════════════════════════════════════════════════════════════════════════ */

/* — Card category badge (bottom-left poster) — */
.ax-event-card__category {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 5px 11px;
    font-family: var(--ax-mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: rgba(232, 167, 60, 0.92);
    color: var(--ax-ink);
    font-weight: 700;
    z-index: 3;
    border-radius: 1px;
}

/* — Live pulsing dot (preferred over CSS-pulse on background) — */
.ax-event-card__live-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #fff;
    margin-right: 6px;
    vertical-align: middle;
    animation: ax-live-pulse 1.4s ease-in-out infinite;
}
@keyframes ax-live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.8); }
    50%      { box-shadow: 0 0 0 5px rgba(255,255,255,0); }
}

/* — Poster scrim (gradient bottom for text/category readability) — */
.ax-event-card__poster-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13,13,16,0.55) 0%, transparent 35%, transparent 65%, rgba(13,13,16,0.25) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Description (replaces inline style on <p>) */
.ax-event-card__desc {
    color: var(--ax-text-muted);
    line-height: 1.5;
    margin: 0;
    font-size: 0.92rem;
}

/* Meta items — restyle for new structure */
.ax-event-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* — CTA row (primary + secondary) — */
.ax-event-card__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--ax-border);
}

.ax-event-card__cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    padding: 11px 16px;
    background: var(--ax-amber);
    color: var(--ax-ink);
    font-family: var(--ax-mono);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--ax-amber);
    border-radius: 1px;
    transition: all 0.22s ease;
    justify-content: center;
}

.ax-event-card__cta-primary:hover,
.ax-event-card__cta-primary:focus-visible {
    background: var(--ax-amber-bright);
    border-color: var(--ax-amber-bright);
    color: var(--ax-ink);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -8px rgba(232, 167, 60, 0.5);
}

.ax-event-card__cta-secondary {
    font-family: var(--ax-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ax-text-muted);
    text-decoration: none;
    padding: 6px 4px;
    transition: color 0.18s ease;
    flex-shrink: 0;
}

.ax-event-card__cta-secondary:hover {
    color: var(--ax-amber);
}

/* Increase card body bottom padding for the CTA row */
.ax-event-card__body {
    padding-bottom: 22px;
}

/* — Filter chips (categoria) — sticky-ish sopra il programma — */
.ax-category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 28px 0 36px;
    padding: 16px 18px;
    background: rgba(232, 167, 60, 0.04);
    border: 1px solid var(--ax-border);
    border-radius: 2px;
}

.ax-category-filters__label {
    font-family: var(--ax-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ax-text-faint);
    margin-right: 6px;
}

.ax-category-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    font-family: var(--ax-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid rgba(244, 237, 224, 0.42);
    color: var(--ax-text-muted);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.ax-category-chip:hover {
    border-color: var(--ax-amber);
    color: var(--ax-amber);
}

.ax-category-chip.is-active {
    background: var(--ax-amber);
    border-color: var(--ax-amber);
    color: var(--ax-ink);
    box-shadow: 0 4px 12px -4px rgba(232, 167, 60, 0.4);
}

.ax-category-chip__count {
    font-size: 0.62rem;
    opacity: 0.7;
    font-weight: 500;
}

/* Hide-state for filter (smooth fade out) */
.ax-event-card.is-hidden-by-filter {
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* visibility fehlte: opacity/max-height blenden nur fuers Auge aus. Die
       weggefilterten Karten blieben im Accessibility-Tree und ihre Links im
       Tab-Lauf — wer mit Tastatur filtert, landete danach auf Veranstaltungen,
       die er gerade ausgeblendet hatte, und der Screenreader las sie mit. */
    visibility: hidden;
    transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Empty state for filtered out — appears when 0 events match */
.ax-filter-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 24px;
    color: var(--ax-text-faint);
    font-family: var(--ax-mono);
    font-size: 0.84rem;
    letter-spacing: 0.06em;
    display: none;
}
.ax-events-grid.is-empty + .ax-filter-empty,
.ax-rail.is-empty .ax-filter-empty {
    display: block;
}

/* — Events section grouping (replaces old rails) — */
.ax-events-section {
    margin-bottom: 56px;
}
.ax-events-section:last-child { margin-bottom: 0; }

.ax-events-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ax-border);
}

.ax-events-section__title {
    font-family: var(--ax-display);
    font-weight: 800;
    font-size: 1.5rem;
    margin: 0;
    color: var(--ax-text);
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.ax-events-section__title--live {
    color: var(--ax-amber);
}

.ax-events-section__pulse {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--ax-amber);
    box-shadow: 0 0 0 0 rgba(232, 167, 60, 0.7);
    animation: ax-section-pulse 1.6s ease-in-out infinite;
}
@keyframes ax-section-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(232, 167, 60, 0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(232, 167, 60, 0); }
    100% { box-shadow: 0 0 0 0   rgba(232, 167, 60, 0); }
}

.ax-events-section__count {
    font-family: var(--ax-mono);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ax-text-faint);
}

/* Grid: auto-fill con cards di larghezza fissa e justify-center.
   Centrare anziché allineare-a-sinistra previene il "blocco lopsided" quando
   una sezione ha poche cards (es. "Diese Woche" con 1 evento). */
.ax-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 360px));
    gap: 24px;
    align-items: stretch;
    justify-content: center;
}

/* Stock photo fallback styling: leggera desaturazione + tint scuro per coerenza
   visiva con la palette ember (evita di sembrare un'immagine "gettata lì"). */
.ax-event-card__poster-stock {
    /* UX-Audit: war brightness(0.78) → wirkte wie „schwarze/kaputte" Karten bei
       Fallback-Bildern. Heller + Verlauf sorgt für sichtbares, gebrandetes Motiv. */
    filter: brightness(0.94) saturate(0.92) contrast(1.02);
    width: 100%; height: 100%; object-fit: cover;
    transition: filter 0.4s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ax-event-card:hover .ax-event-card__poster-stock {
    filter: brightness(1) saturate(1) contrast(1);
}

@media (max-width: 640px) {
    .ax-events-grid { grid-template-columns: 1fr; gap: 18px; }
    .ax-events-section { margin-bottom: 36px; }
    .ax-events-section__title { font-size: 1.2rem; }
    .ax-events-section__head { padding-bottom: 12px; margin-bottom: 16px; }
}

/* — Hero video — sostituisce <img> per slide con video loop */
.ax-hero-featured__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* ════════════════════════════════════════════════════════════════════════════ */
/* INTRO SPLASH — first-visit reveal animation                                   */
/* Stage curtain effect: two black panels slide apart vertically + logo fade-in */
/* Usage: <div id="ax-intro-splash">…</div> shown via JS, hidden after ~1.8s    */
/* ════════════════════════════════════════════════════════════════════════════ */

#ax-intro-splash {
    position: fixed;
    inset: 0;
    z-index: 100000;
    pointer-events: none;
    overflow: hidden;
}

#ax-intro-splash[hidden] { display: none; }

.ax-intro-curtain {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50.5%; /* small overlap to avoid sub-pixel gap */
    background: var(--ax-ink, #0d0d10);
    transition: transform 0.9s cubic-bezier(0.86, 0, 0.07, 1);
    will-change: transform;
}

.ax-intro-curtain--top    { top: 0;    transform: translateY(0); }
.ax-intro-curtain--bottom { bottom: 0; transform: translateY(0); }

#ax-intro-splash.is-leaving .ax-intro-curtain--top    { transform: translateY(-101%); }
#ax-intro-splash.is-leaving .ax-intro-curtain--bottom { transform: translateY( 101%); }

.ax-intro-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    color: var(--ax-paper, #f5f3ee);
    font-family: var(--ax-mono, monospace);
    z-index: 2;
    opacity: 0;
    animation: ax-intro-fade-in 0.6s ease 0.18s forwards;
}

#ax-intro-splash.is-leaving .ax-intro-content {
    animation: ax-intro-fade-out 0.42s ease forwards;
}

@keyframes ax-intro-fade-in  { to { opacity: 1; } }
@keyframes ax-intro-fade-out { to { opacity: 0; } }

.ax-intro-mark {
    font-family: var(--ax-display, 'Playfair Display', serif);
    font-size: clamp(2.4rem, 7vw, 4.5rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--ax-amber, #E8A73C);
    line-height: 1;
}

.ax-intro-tagline {
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ax-paper-muted, rgba(245,243,238,0.65));
    margin-top: 8px;
}

/* Bar wipe across — il "cinema curtain raise" effect */
.ax-intro-bar {
    position: absolute;
    bottom: calc(50% - 1px);
    left: 0;
    height: 2px;
    width: 0;
    background: var(--ax-amber, #E8A73C);
    box-shadow: 0 0 24px rgba(232, 167, 60, 0.6);
    animation: ax-intro-bar-wipe 1.05s cubic-bezier(0.65, 0, 0.35, 1) 0.1s forwards;
}

@keyframes ax-intro-bar-wipe {
    0%   { width: 0;    left: 0; }
    50%  { width: 100%; left: 0; }
    100% { width: 0;    left: 100%; }
}

/* Reduced motion: skippy intro (just fade out a black overlay) */
@media (prefers-reduced-motion: reduce) {
    .ax-intro-curtain,
    .ax-intro-content,
    .ax-intro-bar {
        animation: none !important;
        transition: opacity 0.3s ease;
    }
}

/* ──────────────────────────────────────── */
/* MOBILE — sticky CTA + filter horizontal scroll */
/* ──────────────────────────────────────── */
@media (max-width: 640px) {
    /* Body overflow guard: nessun chip o card può forzare scroll orizzontale.
       Felix-Protokoll 2026-07-03: `hidden` macht html/body zum Scroll-Container
       und bricht damit die sticky Navbar auf iOS — `clip` schneidet ab, OHNE
       einen Scroll-Container zu erzeugen (Navbar bleibt sticky). */
    html, body { overflow-x: clip; }

    .ax-category-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 14px 12px;
        margin: 18px -12px 24px;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ax-category-filters::-webkit-scrollbar { display: none; }
    .ax-category-chip { scroll-snap-align: start; flex-shrink: 0; min-height: 44px; }
    .ax-category-filters__label { display: none; }
    .ax-event-card__cta-row { flex-direction: column; align-items: stretch; gap: 8px; }
    .ax-event-card__cta-secondary { text-align: center; padding: 10px 4px; }
    .ax-intro-mark { font-size: 2.6rem; }

    /* Mobile: hero più compatto + niente video pesante (preload="none" + fallback a immagine via JS) */
    .ax-hero-featured__video { display: none; }
    .ax-hero-featured__bg img { display: block !important; z-index: 0 !important; }

    /* Cards più dense, gap ridotto, poster max-height ragionevole */
    .ax-events-grid { gap: 18px; }
    .ax-event-card__body { padding: 18px 16px 18px; gap: 10px; }
    .ax-event-card__title { font-size: 1.15rem; }
    .ax-event-card__desc { font-size: 0.86rem; }
    .ax-event-card__poster { aspect-ratio: 4/3; max-height: 240px; }

    /* Riduci splash su mobile (battery + performance) */
    .ax-intro-tagline { font-size: 0.62rem; letter-spacing: 0.24em; }

    /* Sticky bottom CTA bar (cinemaxx-style)
       Appare quando scroll > 60% per accesso rapido al programma */
    .ax-mobile-sticky-cta {
        position: fixed;
        bottom: 16px;
        left: 12px; right: 12px;
        z-index: 90;
        padding: 14px 18px;
        background: var(--ax-amber);
        color: var(--ax-ink);
        font-family: var(--ax-mono);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        text-align: center;
        text-decoration: none;
        border-radius: 2px;
        box-shadow: 0 14px 32px -10px rgba(0,0,0,0.55);
        transform: translateY(120%);
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .ax-mobile-sticky-cta.is-visible { transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════════════════ */
/* MOTION ON SCROLL — IntersectionObserver-driven fade-up + stagger                */
/* Riduce la "staticità" del sito: ogni sezione/card scopre con un piccolo glide */
/* All'uscita non si nascondono — `.is-revealed` resta forever per evitare flash. */
/* ════════════════════════════════════════════════════════════════════════════ */

/* Reveal: SAFE pattern. Default sempre visibile (nessun rischio di contenuti
   nascosti se JS non parte). L'animazione "fade-up" è applicata SOLO quando
   IO esplicitamente aggiunge `.is-animating-in`, dura 700ms, poi sparisce.
   Anche se JS fallisce a metà, contenuto resta SEMPRE leggibile. */
[data-reveal] {
    /* default: visibile, niente trasformazioni */
    opacity: 1;
}

[data-reveal].is-animating-in {
    animation: ax-reveal-fade-up 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: var(--reveal-delay, 0s);
}

@keyframes ax-reveal-fade-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Hero parallax — subtile per non distrarre dal video */
.ax-hero-featured {
    will-change: transform;
}
.ax-hero-featured__content {
    transition: transform 0.1s linear;
}

/* Sticky header on scroll: comprime e diventa solido */
.ax-header.is-scrolled {
    backdrop-filter: blur(20px) saturate(140%);
    background: rgba(13, 13, 16, 0.85);
    border-bottom-color: rgba(232, 167, 60, 0.18);
}

/* Reduce motion preference — disabilita tutto */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .ax-hero-featured__content { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════════ */
/* EVENT DETAIL — cinematic hero + 2-col body + sticky CTA                       */
/* ════════════════════════════════════════════════════════════════════════════ */

.ax-edetail-hero {
    position: relative;
    height: auto;
    min-height: clamp(560px, 78vh, 820px);
    max-height: none;
    padding-block: 36px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ax-paper);
}

@media (max-height: 820px) {
    .ax-edetail-hero { padding-block: 8px 64px; }
}

.ax-edetail-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* .ax-edetail-hero__video entfernt (2026-07-29): der Hero läuft ohne Hintergrund-
   video, siehe events/detail.html. */

.ax-edetail-hero__img-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Kräftiger als vorher (Betreiber 2026-07-29): seit das Hintergrundvideo weg ist,
   trägt allein das hochgeladene Plakat den Hero. Plakate sind hell, bunt und voller
   eigener Schrift — mit dem alten, für Videomaterial gebauten Verlauf verschwand der
   Eventtitel darauf. Der Radial-Anteil hebt zusätzlich die Bildmitte an, wo der Titel steht. */
.ax-edetail-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
      linear-gradient(to bottom, rgba(13,13,16,0.62) 0%, rgba(13,13,16,0.72) 40%, rgba(13,13,16,0.94) 100%),
      radial-gradient(ellipse at center, rgba(13,13,16,0.30) 25%, rgba(13,13,16,0.70) 100%);
}

.ax-edetail-hero__back {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--ax-paper);
    font-family: var(--ax-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    background: rgba(13,13,16,0.55);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(245,243,238,0.18);
    border-radius: 999px;
    transition: all 0.22s ease;
}
.ax-edetail-hero__back:hover {
    background: var(--ax-amber);
    color: var(--ax-ink);
    border-color: var(--ax-amber);
}

.ax-edetail-hero__content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 880px;
    padding: 0 24px;
    animation: ax-edetail-content-up 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both;
}

@keyframes ax-edetail-content-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ax-edetail-hero__overline {
    font-family: var(--ax-mono);
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ax-amber);
    font-weight: 600;
    margin-bottom: 18px;
}

.ax-edetail-hero__cat {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(232, 167, 60, 0.92);
    color: var(--ax-ink);
    font-family: var(--ax-mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 24px;
    border-radius: 1px;
}

.ax-edetail-hero__title {
    font-family: var(--ax-display);
    font-weight: 900;
    font-size: clamp(2.2rem, 6.5vw, 5.2rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
    color: var(--ax-paper);
    text-shadow: 0 4px 32px rgba(0,0,0,0.4);
}

.ax-edetail-hero__lead {
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    line-height: 1.55;
    color: rgba(245, 243, 238, 0.82);
    max-width: 640px;
    margin: 0 auto 32px;
}

.ax-edetail-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 36px;
}

.ax-edetail-hero__meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: rgba(13,13,16,0.55);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(245,243,238,0.18);
    border-radius: 999px;
    font-family: var(--ax-mono);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    color: var(--ax-paper);
}
.ax-edetail-calendar-link { min-height: 44px; text-decoration: none; }
.ax-edetail-calendar-link:focus-visible { outline: 2px solid var(--ax-amber); outline-offset: 3px; }
.ax-event-card__date-chip__weekday { font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.ax-edetail-hero__cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: min(100%, 390px);
    margin-inline: auto;
}
.ax-edetail-hero__cta > a { justify-content: center; }
.ax-edetail-hero__cta > a {
    --focus-ring-color: var(--ax-paper);
    --focus-ring-width: 3px;
    --focus-ring-offset: 4px;
}
.ax-edetail-hero__cancelled-chip {
    display: inline-flex;
    align-self: center;
    padding: 8px 18px;
    border-radius: 4px;
    background: #b3261e;
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.1em;
}

@media (max-height: 620px) and (min-width: 769px) {
    .ax-edetail-hero { align-items: flex-start; }
    .ax-edetail-hero__overline { margin-bottom: 8px; }
    .ax-edetail-hero__cat { margin-bottom: 8px; }
    .ax-edetail-hero__title { margin-bottom: 8px; }
    .ax-edetail-hero__lead { margin-bottom: 12px; }
    .ax-edetail-hero__meta { margin-bottom: 8px; }
}

.ax-edetail-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--ax-amber);
    color: var(--ax-ink);
    font-family: var(--ax-mono);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--ax-amber);
    border-radius: 1px;
    cursor: pointer;
    transition: background 0.22s ease, border-color 0.22s ease,
                color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.ax-edetail-cta-primary:hover {
    background: var(--ax-amber-bright);
    border-color: var(--ax-amber-bright);
    color: var(--ax-ink);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -10px rgba(232, 167, 60, 0.55);
}
.ax-edetail-cta-primary--sm {
    padding: 9px 18px;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
}
.ax-edetail-cta-primary--block {
    width: 100%;
    justify-content: center;
    margin-top: 18px;
}

.ax-edetail-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: transparent;
    color: var(--ax-paper);
    font-family: var(--ax-mono);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid rgba(245,243,238,0.32);
    border-radius: 1px;
    cursor: pointer;
    transition: background 0.22s ease, border-color 0.22s ease,
                color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.ax-edetail-cta-secondary:hover {
    background: rgba(245,243,238,0.08);
    border-color: var(--ax-paper);
}
/* Gegenstück zu --sm bei primary: in der Sticky-Leiste stehen beide nebeneinander
   und müssen dieselbe Höhe haben, sonst sitzt die Zeile schief. */
.ax-edetail-cta-secondary--sm {
    padding: 9px 18px;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
}

.ax-edetail-cta-dark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--ax-ink);
    color: var(--ax-paper);
    font-family: var(--ax-mono);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid rgba(245,243,238,0.5);
    border-radius: 1px;
    cursor: pointer;
    transition: background 0.22s ease, border-color 0.22s ease,
                color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.ax-edetail-cta-dark:hover {
    background: var(--ax-ink-700);
    border-color: var(--ax-paper);
    color: var(--ax-paper);
    transform: translateY(-2px);
}
.ax-edetail-cta-primary:focus-visible,
.ax-edetail-cta-dark:focus-visible {
    outline: 3px solid var(--ax-paper);
    outline-offset: 4px;
}
.ax-edetail-cta-dark--sm {
    padding: 9px 18px;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
}

.ax-edetail-hero__scroll-hint {
    position: absolute;
    bottom: 28px;
    right: clamp(24px, 4vw, 56px);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(245,243,238,0.6);
    pointer-events: none;
}
.ax-edetail-hero__scroll-line {
    width: 1px;
    height: 36px;
    background: linear-gradient(to bottom, transparent 0%, var(--ax-amber) 50%, transparent 100%);
    animation: ax-scroll-line 1.8s ease-in-out infinite;
}
@keyframes ax-scroll-line {
    0%, 100% { transform: translateY(0); opacity: 0.3; }
    50%      { transform: translateY(8px); opacity: 1; }
}
.ax-edetail-hero__scroll-text {
    font-family: var(--ax-mono);
    font-size: 0.6rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

/* — Sticky CTA bar (appare con scroll) — */
.ax-edetail-sticky-cta {
    position: fixed;
    top: var(--ax-nav-height); left: 0; right: 0;
    z-index: 70;
    background: rgba(13,13,16,0.95);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(232, 167, 60, 0.22);
    padding: 12px 0;
    transform: translateY(-110%);
    /* Fuori schermo NON basta: con il solo transform i link restavano nel tab
       order, e chi naviga da tastiera trovava il fuoco su bottoni invisibili,
       per giunta dentro un contenitore dichiarato aria-hidden — cioe' un fuoco
       che lo screen reader non sa nemmeno annunciare. Con due CTA il problema
       era raddoppiato. visibility toglie i discendenti dal percorso di tab, e
       si anima insieme al transform invece di scattare (audit 29.07). */
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                visibility 0s linear 0.4s;
}
.ax-edetail-sticky-cta.is-visible {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                visibility 0s linear 0s;
}
.ax-edetail-sticky-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.ax-edetail-sticky-cta__title {
    font-family: var(--ax-display);
    font-weight: 800;
    font-size: 1rem;
    color: var(--ax-paper);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
/* Pausen-Vorbestellung + Tickets nebeneinander (2026-07-29). */
.ax-edetail-sticky-cta__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
/* Sotto i 720px la riga si stringe invece di perdere un pezzo.
   Prima il secondo bottone spariva del tutto: sul telefono — cioe' dove la gente
   compra davvero — la barra persistente restava senza il link ai biglietti, e
   l'unico modo di arrivarci era risalire fino all'hero. Adesso il titolo cede
   spazio (puo' anche sparire del tutto sotto i 420px, tanto sta scritto grande
   sopra) e i due bottoni si accorciano restando entrambi raggiungibili. */
@media (max-width: 720px) {
    .ax-edetail-sticky-cta__inner { gap: 10px; }
    .ax-edetail-sticky-cta__actions { gap: 8px; }
    .ax-edetail-sticky-cta .ax-edetail-cta-primary--sm,
    .ax-edetail-sticky-cta .ax-edetail-cta-secondary--sm,
    .ax-edetail-sticky-cta .ax-edetail-cta-dark--sm {
        padding: 9px 12px;
        font-size: 0.66rem;
        letter-spacing: 0.08em;
        white-space: nowrap;
    }
}
@media (max-width: 420px) {
    .ax-edetail-sticky-cta__title { display: none; }
}

/* — Body 2-col grid — */
.ax-edetail-body {
    padding: 80px 0 100px;
    background: var(--ax-bg);
}

.ax-edetail-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 64px;
    align-items: start;
}
.ax-edetail-grid--wide { grid-template-columns: minmax(0, 1fr); }
.ax-edetail-grid--wide .ax-edetail-aside {
    position: static;
    max-width: 340px;
}

.ax-edetail-main { min-width: 0; }

.ax-edetail-lead {
    font-family: var(--ax-display);
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    line-height: 1.5;
    color: var(--ax-text);
    margin: 0 0 32px;
    max-width: 60ch;
    font-weight: 500;
    font-style: italic;
}

.ax-edetail-prose {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ax-text);
    margin: 0 0 48px;
    max-width: 68ch;
}
.ax-edetail-prose p { margin: 0 0 1em; }

.ax-edetail-section {
    margin-bottom: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--ax-border);
}

.ax-edetail-h2 {
    font-family: var(--ax-display);
    font-weight: 800;
    font-size: 1.8rem;
    margin: 0 0 24px;
    color: var(--ax-text);
    letter-spacing: -0.01em;
}

.ax-edetail-cast {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}
.ax-edetail-cast__item {
    padding: 18px 20px;
    background: var(--ax-card);
    border: 1px solid var(--ax-border);
    border-radius: 2px;
    transition: all 0.22s ease;
}
.ax-edetail-cast__item:hover {
    border-color: var(--ax-amber);
    transform: translateY(-3px);
    box-shadow: var(--ax-shadow-md);
}
.ax-edetail-cast__name {
    font-family: var(--ax-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ax-text);
    margin-bottom: 4px;
}
.ax-edetail-cast__role {
    font-family: var(--ax-mono);
    font-size: 0.74rem;
    color: var(--ax-text-muted);
    letter-spacing: 0.06em;
}

.ax-edetail-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ax-edetail-tag {
    padding: 7px 14px;
    background: transparent;
    border: 1px solid var(--ax-border);
    border-radius: 999px;
    font-family: var(--ax-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--ax-text-muted);
    text-transform: uppercase;
}

.ax-edetail-preorder {
    background: linear-gradient(135deg, rgba(232,167,60,0.06), transparent);
    border: 1px solid var(--ax-border-amber);
    padding: 36px 32px;
    border-radius: 2px;
}
.ax-edetail-preorder p {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 24px;
    color: var(--ax-text);
}

/* Aside */
.ax-edetail-aside {
    position: sticky;
    top: 100px;
    /* Felix-Protokoll 2026-07-03: Grid-Kind darf nicht breiter als die Spalte
       werden (lange E-Mail-Adressen schoben die Karte aus dem Viewport). */
    min-width: 0;
}
.ax-edetail-info-card {
    background: var(--ax-card);
    border: 1px solid var(--ax-border);
    border-radius: 2px;
    padding: 28px 26px;
    margin-bottom: 24px;
}
.ax-edetail-info-card__head {
    font-family: var(--ax-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ax-amber);
    font-weight: 600;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ax-border);
}
.ax-edetail-info-list {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px 12px;
}
.ax-edetail-info-list dt {
    font-family: var(--ax-mono);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ax-text-muted);
    align-self: center;
}
.ax-edetail-info-list dd {
    margin: 0;
    color: var(--ax-text);
    font-size: 0.95rem;
    font-weight: 500;
    /* Felix-Protokoll 2026-07-03: lange E-Mail-Adressen/URLs umbrechen statt
       die Karte rechts aus dem mobilen Viewport zu schieben. */
    min-width: 0;
    overflow-wrap: anywhere;
}
/* Felix-Protokoll 2026-07-03: „Warum zweifarbig?" — Kontakt-Links folgen jetzt
   der Textfarbe; interaktiv bleibt am Unterstrich (amber) + Hover erkennbar. */
.ax-edetail-info-list dd a {
    color: var(--ax-text);
    text-decoration: underline;
    text-decoration-color: var(--ax-amber);
    text-underline-offset: 3px;
}
.ax-edetail-info-list dd a:hover { color: var(--ax-amber); }

.ax-edetail-back-cta {
    display: block;
    text-align: center;
    padding: 14px;
    color: var(--ax-text-muted);
    font-family: var(--ax-mono);
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.18s ease;
}
.ax-edetail-back-cta:hover { color: var(--ax-amber); }

/* — Mobile detail — */
@media (max-width: 920px) {
    .ax-edetail-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .ax-edetail-aside { position: static; }
}

@media (max-width: 640px) {
    .ax-edetail-hero {
        height: auto;
        min-height: 70vh;
        padding: 100px 0 60px;
    }
    .ax-edetail-hero__back { top: 16px; left: 16px; padding: 8px 12px; }
    .ax-edetail-hero__title { font-size: 2rem; line-height: 1.1; }
    .ax-edetail-hero__lead { font-size: 0.95rem; }
    .ax-edetail-hero__meta { gap: 6px; margin-bottom: 26px; }
    .ax-edetail-hero__meta-pill { font-size: 0.68rem; padding: 7px 12px; }
    .ax-edetail-hero__scroll-hint { display: none; }
    .ax-edetail-cta-primary, .ax-edetail-cta-secondary, .ax-edetail-cta-dark {
        padding: 14px 20px;
        font-size: 0.75rem;
        letter-spacing: 0.14em;
    }
    .ax-edetail-body { padding: 48px 0 70px; }
    .ax-edetail-section { padding-top: 24px; margin-bottom: 36px; }
    .ax-edetail-h2 { font-size: 1.4rem; }
    .ax-edetail-info-card { padding: 22px 20px; }
    .ax-edetail-preorder { padding: 24px 20px; }
}

@media (max-width: 640px) and (max-height: 680px) {
    .ax-edetail-hero { padding-top: 60px; }
    .ax-edetail-hero__overline { margin-bottom: 8px; }
    .ax-edetail-hero__cat { margin-bottom: 8px; }
    .ax-edetail-hero__title { margin-bottom: 10px; }
    .ax-edetail-hero__lead { margin-bottom: 20px; }
    .ax-edetail-hero__meta { margin-bottom: 20px; }
}



/* ════════════════════════════════════════════════════════════════════════
   SPRINT 1 ADDITIONS (2026-04-30) — spec 29.04 client requirements
   ════════════════════════════════════════════════════════════════════════ */

/* ── Hero secondary CTA: Pausenvorbestellung (spec #2) ─────────────────── */
.ax-hero-featured__pause {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: var(--ax-amber);
    color: var(--ax-ink);
    border: 1.5px solid var(--ax-amber);
    font-family: var(--ax-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .22s ease, transform .22s ease, color .22s ease;
}
.ax-hero-featured__pause:hover {
    background: var(--ax-amber-bright);
    color: var(--ax-ink);
    transform: translateY(-2px);
}
.ax-hero-featured__pause:focus-visible {
    outline: 2px solid var(--ax-amber-bright);
    outline-offset: 3px;
}
@media (max-width: 640px) {
    .ax-hero-featured__pause { padding: 12px 18px; font-size: 12px; }
    .ax-hero-featured__pause svg { width: 18px; height: 18px; }
}

/* ── Event card: cast preview (spec #3) ───────────────────────────────── */
.ax-event-card__cast {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: var(--ax-amber);
    font-family: var(--ax-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}
.ax-event-card__cast svg { color: var(--ax-amber); flex-shrink: 0; }
.ax-event-card__cast-extra { color: var(--ax-text-faint); margin-left: 4px; }

/* ── Event card: Pausenvorbestellung secondary CTA (spec #3) ──────────── */
.ax-event-card__cta-pause {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: transparent;
    color: var(--ax-paper);
    border: 1px solid var(--ax-border-amber-s);
    font-family: var(--ax-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.ax-event-card__cta-pause:hover {
    background: rgba(232, 167, 60, 0.10);
    color: var(--ax-amber);
    border-color: var(--ax-amber);
}
.ax-event-card__cta-pause:focus-visible {
    outline: 2px solid var(--ax-amber);
    outline-offset: 2px;
}
.ax-event-card__cta-pause svg { flex-shrink: 0; }

/* ── Kachel-CTAs: welcher Knopf die Akzentfarbe trägt (Betreiber 2026-07-29) ──
   Die Rollen-Klassen oben regeln weiterhin Layout und Umbruch (die Labels sind
   unterschiedlich lang und brauchen unterschiedliche Behandlung). Diese beiden
   Modifier tauschen nur das Aussehen: gefüllt trägt jetzt die Pausen-
   Vorbestellung, „Tickets sichern" wird zur ruhigen Kontur. */
.ax-event-card__cta--accent {
    background: var(--ax-amber);
    color: var(--ax-ink);
    border-color: var(--ax-amber);
    font-weight: 700;
    flex: 1 1 auto;
    justify-content: center;
}
.ax-event-card__cta--accent:hover,
.ax-event-card__cta--accent:focus-visible {
    background: var(--ax-amber-bright);
    border-color: var(--ax-amber-bright);
    color: var(--ax-ink);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -8px rgba(232, 167, 60, 0.5);
}
.ax-event-card__cta--outline {
    background: transparent;
    color: var(--ax-paper);
    border-color: var(--ax-border-amber-s);
}
.ax-event-card__cta--outline:hover,
.ax-event-card__cta--outline:focus-visible {
    background: rgba(232, 167, 60, 0.10);
    color: var(--ax-amber);
    border-color: var(--ax-amber);
    transform: none;
    box-shadow: none;
}

/* ── Monthly section headers (spec #9 — Strukturierung monatliche) ────── */
.ax-events-section--month { margin-top: 56px; }
.ax-events-section--month:first-of-type { margin-top: 32px; }
.ax-events-section__head--month {
    align-items: baseline;
    border-bottom: 1px solid var(--ax-border-amber);
    padding-bottom: 14px;
    margin-bottom: 28px;
}
.ax-events-section__title--month {
    display: inline-flex;
    align-items: baseline;
    gap: 14px;
    font-family: var(--ax-display);
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ax-paper);
    margin: 0;
}
.ax-events-section__month-label { color: var(--ax-paper); }
.ax-events-section__month-year {
    font-family: var(--ax-mono);
    font-size: 0.65em;
    color: var(--ax-amber);
    font-weight: 500;
    letter-spacing: 0.06em;
}
.ax-events-section--month.is-current-month .ax-events-section__title--month::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ax-amber);
    box-shadow: 0 0 12px var(--ax-amber);
    margin-right: 12px;
    animation: ax-month-pulse 2.5s ease-in-out infinite;
}
@keyframes ax-month-pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: 0.55; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
    .ax-events-section--month.is-current-month .ax-events-section__title--month::before { animation: none; }
}

/* ── Footer Unikat-Feder + partners line (spec #10) ───────────────────── */
.ax-footer-partners {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.ax-footer-feder {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ax-paper-muted);
    font-family: var(--ax-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.ax-footer-feder svg { color: var(--ax-amber); flex-shrink: 0; }
.ax-footer-feder a {
    color: var(--ax-paper);
    text-decoration: none;
    transition: color .18s;
    font-weight: 600;
}
.ax-footer-feder a:hover { color: var(--ax-amber); }
.ax-footer-sep { color: rgba(244, 237, 224, 0.25); }

/* ── Filter bar multi-dim (Genre + Zeitraum + Veranstalter) (spec #8) ── */
.ax-home-filter {
    margin: 24px 0 28px;
    border: 1px solid var(--ax-border);
    border-radius: 12px;
    background: rgba(20,21,26,0.5);
    transition: border-color .18s, background-color .18s;
}
.ax-home-filter[open] { border-color: rgba(232,167,60,0.4); }
.ax-home-filter__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    color: var(--ax-paper);
    font-family: var(--ax-body, 'Inter', sans-serif);
    user-select: none;
}
.ax-home-filter__summary::-webkit-details-marker { display: none; }
.ax-home-filter__summary:focus-visible { outline: 2px solid var(--ax-amber); outline-offset: 2px; }
.ax-home-filter__summary-label {
    flex: 1;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}
.ax-home-filter__caret { transition: transform .25s ease; display: inline-flex; opacity: .8; }
.ax-home-filter[open] .ax-home-filter__caret { transform: rotate(180deg); }
.ax-home-filter > .ax-filter-bar {
    padding: 0 18px 18px;
    margin-bottom: 0;
}

.ax-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

/* ── Zeitraum als Datumsbereich (Betreiber 2026-07-29) ───────────────────────
   Ersetzt die Chips „Diese Woche / Diesen Monat / Nächste 3 Monate". Die Felder
   sehen aus wie Suche und Veranstalter-Auswahl daneben, damit die Leiste eine
   Zeile bleibt und nicht wie ein Formular wirkt. */
.ax-filter-daterange {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    flex-wrap: wrap;
}
.ax-filter-daterange .ax-category-filters__label { font-size: 11px; }
.ax-filter-daterange .ax-category-filters__label::before { content: '🗓 '; opacity: 0.7; }
.ax-filter-daterange__fields {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ax-filter-daterange__field {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}
.ax-filter-daterange__sub {
    font-family: var(--ax-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ax-text-muted);
}
.ax-filter-daterange__dash { color: var(--ax-text-muted); }
.ax-date-input {
    background: var(--ax-surface);
    color: var(--ax-paper);
    border: 1px solid var(--ax-border-amber);
    padding: 8px 12px;
    font-family: var(--ax-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    transition: border-color .18s, background-color .18s;
    /* Ohne das übernimmt iOS Safari eine eigene Höhe und die Zeile springt. */
    min-height: 36px;
}
.ax-date-input:hover { border-color: var(--ax-amber); }
.ax-date-input:focus-visible { outline: 2px solid var(--ax-amber); outline-offset: 2px; }
/* Der eingebaute Kalender-Knopf von WebKit ist dunkel auf dunkel — aufhellen. */
.ax-date-input::-webkit-calendar-picker-indicator {
    filter: invert(72%) sepia(38%) saturate(700%) hue-rotate(340deg);
    cursor: pointer;
}
.ax-date-reset {
    background: transparent;
    border: 1px solid var(--ax-border-amber);
    color: var(--ax-text-muted);
    font-family: var(--ax-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 7px 12px;
    cursor: pointer;
    transition: color .18s, border-color .18s, background-color .18s;
    /* 44px e' la misura sotto la quale un dito manca il bersaglio. Il bordo
       visibile resta piccolo — accanto ai campi data un bottone alto quanto
       loro sarebbe fuori scala — ma l'area sensibile arriva alla misura piena
       con un pseudo-elemento (audit 29.07). */
    position: relative;
    min-height: 32px;
}
.ax-date-reset::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    transform: translateY(-50%);
    min-height: 44px;
    height: 100%;
}
.ax-date-reset:hover { color: var(--ax-amber); border-color: var(--ax-amber); background: rgba(232,167,60,0.08); }
.ax-date-reset:focus-visible { outline: 2px solid var(--ax-amber); outline-offset: 2px; }

.ax-filter-organizer {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}
.ax-filter-organizer .ax-category-filters__label { font-size: 11px; }
.ax-organizer-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--ax-surface);
    color: var(--ax-paper);
    border: 1px solid var(--ax-border-amber);
    padding: 8px 36px 8px 14px;
    font-family: var(--ax-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><polyline points='2,3 5,7 8,3' fill='none' stroke='%23E8A73C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color .18s, background-color .18s;
}
.ax-organizer-select:hover { border-color: var(--ax-amber); }
.ax-organizer-select:focus-visible { outline: 2px solid var(--ax-amber); outline-offset: 2px; }

/* Freitextsuche (Felix 2026-06-23) ──────────────────────────────────────── */
.ax-filter-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}
.ax-filter-search .ax-category-filters__label { font-size: 11px; }
.ax-search-input {
    background: var(--ax-surface);
    color: var(--ax-paper);
    border: 1px solid var(--ax-border-amber);
    padding: 8px 14px;
    font-family: var(--ax-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    min-width: 260px;
    transition: border-color .18s, background-color .18s;
}
.ax-search-input::placeholder { color: var(--ax-muted, #9a8f7e); opacity: 0.8; }
.ax-search-input:hover { border-color: var(--ax-amber); }
.ax-search-input:focus-visible { outline: 2px solid var(--ax-amber); outline-offset: 2px; }

@media (max-width: 640px) {
    .ax-filter-bar { gap: 8px; }
    .ax-filter-organizer { flex-direction: column; align-items: flex-start; gap: 6px; }
    .ax-organizer-select { width: 100%; }
    .ax-filter-search { flex-direction: column; align-items: flex-start; gap: 6px; }
    .ax-search-input { width: 100%; min-width: 0; }
    .ax-filter-daterange { flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; }
    .ax-filter-daterange__fields { width: 100%; }
    /* Zwei Datumsfelder nebeneinander passen auf kein Telefon — untereinander,
       jedes über die volle Breite, damit der Kalender ohne Zielen aufgeht. */
    .ax-filter-daterange__field { width: 100%; }
    .ax-filter-daterange__field .ax-date-input { flex: 1 1 auto; min-width: 0; }
    .ax-filter-daterange__dash { display: none; }
    .ax-date-reset { width: 100%; }
}

/* ── Event detail "In Kalender" ghost CTA (spec #14) ──────────────────── */
.ax-edetail-cta-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    background: transparent;
    color: var(--ax-paper);
    border: 1px solid var(--ax-border-strong);
    font-family: var(--ax-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.ax-edetail-cta-ghost:hover { background: rgba(232,167,60,0.10); border-color: var(--ax-amber); color: var(--ax-amber); }
.ax-edetail-cta-ghost:focus-visible { outline: 2px solid var(--ax-amber); outline-offset: 2px; }

/* ── Sponsor slider footer (spec #7) ──────────────────────────────────── */
.ax-sponsors-strip {
    border-top: 1px solid var(--ax-border);
    padding: 28px 0 22px;
    background: var(--ax-ink-800);
    overflow: hidden;
}
.ax-sponsors-strip__label {
    text-align: center;
    font-family: var(--ax-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ax-text-faint);
    margin-bottom: 14px;
}
.ax-sponsors-track {
    display: flex;
    gap: 64px;
    width: max-content;
    animation: ax-sponsors-scroll 48s linear infinite;
    align-items: center;
}
.ax-sponsors-clone { display: contents; }
.ax-sponsors-strip:hover .ax-sponsors-track { animation-play-state: paused; }
/* Sponsor-Chip-Stil wird vom kanonischen Block weiter unten gesetzt (Text auf
   dunklem Grund, amber on hover). KEIN heller Hintergrund hier — sonst lag heller
   Text auf hellem Chip (≈1.16:1, "leere weiße Pille"). Hier nur Logo-Bilder. */
.ax-sponsors-item { justify-content: center; }
.ax-sponsors-item img, .ax-sponsors-item svg { max-height: 44px; max-width: 160px; width: auto; height: auto; display: block; }
.ax-sponsors-item__text {
    font-family: var(--ax-display);
    font-style: italic;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ax-paper-soft);
    white-space: nowrap;
    letter-spacing: 0.02em;
}
@keyframes ax-sponsors-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .ax-sponsors-track { animation: none; flex-wrap: wrap; justify-content: center; }
    .ax-sponsors-clone { display: none; }
}

/* ── Intro strap (spec #6) — concise reminder above programm ──────────── */
.ax-intro-strap {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 36px;
    padding: 14px 24px;
    font-family: var(--ax-display);
    font-size: clamp(0.95rem, 1.6vw, 1.18rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.55;
    color: var(--ax-paper-soft);
    border-top: 1px solid var(--ax-border-amber);
    border-bottom: 1px solid var(--ax-border-amber);
    letter-spacing: 0.005em;
}
.ax-intro-strap strong {
    font-style: normal;
    font-weight: 700;
    color: var(--ax-amber);
    letter-spacing: -0.01em;
}
@media (max-width: 640px) {
    .ax-intro-strap { font-size: 0.92rem; padding: 12px 20px; margin-bottom: 24px; }
}

/* ── Footer feder upgrade — slightly more prominence ──────────────────── */
.ax-footer-feder {
    background: rgba(232, 167, 60, 0.06);
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--ax-border-amber);
}
.ax-footer-feder a { font-size: 11px; }

/* ════════════════════════════════════════════════════════════════════════
   Sponsor strip — redesign 2026-04-30 (UX feedback)
   ════════════════════════════════════════════════════════════════════════ */
.ax-sponsors-strip {
    border-top: 1px solid var(--ax-border);
    padding: 36px 0 32px;
    background: linear-gradient(180deg, var(--ax-ink-800) 0%, var(--ax-ink-700) 100%);
    overflow: hidden;
    position: relative;
}
.ax-sponsors-strip__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 22px;
    padding: 0 24px;
}
.ax-sponsors-strip__rule {
    flex: 0 1 80px;
    height: 1px;
    background: var(--ax-border-amber);
}
.ax-sponsors-strip__label {
    font-family: var(--ax-mono);
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ax-amber);
    font-weight: 600;
    flex-shrink: 0;
}
.ax-sponsors-marquee {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.ax-sponsors-track {
    display: flex;
    align-items: center;
    gap: 36px;
    width: max-content;
    animation: ax-sponsors-scroll-2 60s linear infinite;
    padding: 4px 0;
}
.ax-sponsors-strip:hover .ax-sponsors-track,
.ax-sponsors-strip:focus-within .ax-sponsors-track { animation-play-state: paused; }
.ax-sponsors-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    padding: 0 14px;
    color: var(--ax-paper-soft);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 999px;
    transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
    flex-shrink: 0;
    font-family: var(--ax-display);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.ax-sponsors-item:hover,
.ax-sponsors-item:focus-visible {
    color: var(--ax-amber);
    border-color: var(--ax-border-amber);
    background: rgba(232,167,60,0.08);
    transform: translateY(-1px);
}
.ax-sponsors-item:focus-visible { outline: 2px solid var(--ax-amber); outline-offset: 3px; }
.ax-sponsors-item svg {
    color: currentColor;
    flex-shrink: 0;
    opacity: 0.75;
    transition: opacity .25s ease;
}
.ax-sponsors-item:hover svg,
.ax-sponsors-item:focus-visible svg { opacity: 1; }
.ax-sponsors-item__name { font-weight: 500; }
.ax-sponsors-item__logo {
    display: block;
    width: 150px;
    height: 26px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    transition: opacity .25s ease;
}
.ax-sponsors-item:hover .ax-sponsors-item__logo,
.ax-sponsors-item:focus-visible .ax-sponsors-item__logo { opacity: 1; }

/* Brand-specific accent on hover */
.ax-sponsors-item--aperol:hover { color: #FF7A00; border-color: rgba(255,122,0,0.45); background: rgba(255,122,0,0.07); }
.ax-sponsors-item--viva:hover   { color: #6AA7C2; border-color: rgba(106,167,194,0.45); background: rgba(106,167,194,0.07); }
.ax-sponsors-item--bischofshof:hover { color: #C08820; border-color: rgba(192,136,32,0.5); background: rgba(192,136,32,0.07); }

.ax-sponsors-divider {
    color: var(--ax-amber);
    opacity: 0.35;
    font-size: 0.7rem;
    flex-shrink: 0;
}

@keyframes ax-sponsors-scroll-2 {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.ax-sponsors-marquee--statico {
    mask-image: none;
    -webkit-mask-image: none;
}
.ax-sponsors-marquee--statico .ax-sponsors-clone { display: none; }
.ax-sponsors-marquee--statico .ax-sponsors-track {
    animation: none;
    justify-content: center;
    width: 100%;
}
@media (prefers-reduced-motion: reduce) {
    .ax-sponsors-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        gap: 16px;
        padding: 0 24px;
    }
    .ax-sponsors-clone { display: none; }
    .ax-sponsors-marquee { mask-image: none; -webkit-mask-image: none; }
}
@media (max-width: 640px) {
    .ax-sponsors-strip { padding: 28px 0 24px; }
    .ax-sponsors-strip__head { gap: 10px; padding: 0 16px; margin-bottom: 16px; }
    .ax-sponsors-strip__rule { flex: 1 1 30px; }
    .ax-sponsors-strip__label { font-size: 9px; letter-spacing: 0.22em; }
    .ax-sponsors-track { gap: 24px; }
    .ax-sponsors-item { font-size: 0.82rem; height: 32px; padding: 0 10px; gap: 8px; }
    .ax-sponsors-item svg { width: 18px; height: 18px; }
    .ax-sponsors-item__logo { width: 120px; height: 22px; }
}

/* ════════════════════════════════════════════════════════════════════════
   HERO QUICK-CTA (spec 29.04 #23) — Tickets + Pausenvorbestellung
   Sotto hero, mobile-first. Visibile above-the-fold dopo l'hero.
   ════════════════════════════════════════════════════════════════════════ */
.ax-hero-cta {
    padding: clamp(20px, 4vw, 36px) 0 clamp(8px, 2vw, 20px);
    position: relative;
    z-index: 5;
}
.ax-hero-cta__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(10px, 1.6vw, 18px);
    max-width: 920px;
    margin: 0 auto;
}
.ax-hero-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    min-height: 76px;
    text-decoration: none;
    border-radius: 14px;
    border: 1px solid var(--ax-border-amber, rgba(232,167,60,0.35));
    background: rgba(244, 237, 224, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--ax-paper, #f4ede0);
    transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    overflow: hidden;
    position: relative;
}
.ax-hero-cta__btn::after {
    content: '';
    position: absolute;
    inset: auto -30% -50% auto;
    width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(232,167,60,0.22), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.ax-hero-cta__btn:hover { transform: translateY(-2px); border-color: var(--ax-amber, #d99e3a); box-shadow: 0 18px 38px -22px rgba(232,167,60,0.55); }
.ax-hero-cta__btn:hover::after { opacity: 1; }
.ax-hero-cta__btn:focus-visible { outline: 2px solid var(--ax-amber, #d99e3a); outline-offset: 3px; }

.ax-hero-cta__btn--primary {
    background: var(--ax-amber, #d99e3a);
    border-color: var(--ax-amber, #d99e3a);
    color: var(--ax-ink, #0d0d10);
}
.ax-hero-cta__btn--primary:hover {
    background: var(--ax-amber-bright, #e8a73c);
    border-color: var(--ax-amber-bright, #e8a73c);
    color: var(--ax-ink, #0d0d10);
}

.ax-hero-cta__icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(13,13,16,0.18);
    color: currentColor;
}
.ax-hero-cta__btn--secondary .ax-hero-cta__icon {
    background: rgba(232,167,60,0.14);
    color: var(--ax-amber, #d99e3a);
}

.ax-hero-cta__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ax-hero-cta__label {
    font-family: var(--ax-display, 'Playfair Display'), serif;
    font-weight: 700;
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    /* Long German labels like "Pausenvorbestellung" must not be clipped with an
       ellipsis (Protokoll 28.06 — "Button abgeschnitten"). Allow wrapping. */
    white-space: normal;
    overflow-wrap: anywhere;
}
.ax-hero-cta__sub {
    font-family: var(--ax-mono, ui-monospace, monospace);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.78;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
}
.ax-hero-cta__btn--primary .ax-hero-cta__sub { opacity: 0.72; }

@media (max-width: 640px) {
    .ax-hero-cta { padding: 16px 0 6px; }
    .ax-hero-cta__row { grid-template-columns: 1fr; gap: 10px; }
    .ax-hero-cta__btn { padding: 14px 16px; min-height: 64px; gap: 12px; border-radius: 12px; }
    .ax-hero-cta__icon { width: 38px; height: 38px; border-radius: 9px; }
    .ax-hero-cta__icon svg { width: 20px; height: 20px; }
    .ax-hero-cta__label { font-size: 1rem; white-space: normal; }
    .ax-hero-cta__sub { font-size: 0.62rem; letter-spacing: 0.1em; }
}
@media (prefers-reduced-motion: reduce) {
    .ax-hero-cta__btn { transition: none; }
    .ax-hero-cta__btn:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   COMPACT EVENT CARDS (spec 29.04 #24) — denser grid, smaller cards
   Override defaults: tighter padding, smaller typography, 4-5 col desktop.
   ════════════════════════════════════════════════════════════════════════ */
.ax-events-grid {
    /* UX-Audit: auto-fill + 1fr ließ Monate mit 1 Event eine Karte links stranden
       und ~75% Leerraum rechts. Feste Kartenbreite + zentriert = ausgewogene Reihe,
       eine einzelne Karte sitzt mittig statt verloren links. */
    grid-template-columns: repeat(auto-fit, minmax(220px, 264px));
    gap: 18px;
    justify-content: center;
}
.ax-event-card {
    border-radius: 10px;
}
.ax-event-card__body {
    padding: 14px 14px 16px;
    gap: 8px;
}
.ax-event-card__title {
    font-size: 1.05rem;
    line-height: 1.18;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ax-event-card__desc {
    display: none; /* card compatta: niente paragrafo lungo, poster+title+meta+CTA bastano */
}
.ax-event-card__venue {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
}
.ax-event-card__meta {
    font-size: 0.66rem;
    gap: 10px;
    padding-top: 8px;
    margin-top: 4px;
}
.ax-event-card__cast {
    font-size: 10px;
    margin-bottom: 2px;
}
.ax-event-card__date-chip {
    top: 10px; left: 10px;
    padding: 7px 10px;
    min-width: 54px;
}
.ax-event-card__date-chip__day { font-size: 1.25rem; }
.ax-event-card__date-chip__month { font-size: 0.6rem; }
.ax-event-card__status-chip { top: 10px; right: 10px; padding: 4px 8px; font-size: 0.56rem; }
.ax-event-card__category {
    position: absolute;
    bottom: 10px; left: 10px;
    z-index: 2;
}

/* CTA row compatto: due micro-CTA sotto. Le card strette (~190px) non hanno
   mai spazio per "Tickets sichern" + "Pausen-Vorbestellung" affiancate —
   wrap: la seconda CTA scende su una riga propria a piena larghezza
   (Felix-Protokoll 2026-06: button abgeschnitten am Kartenrand). */
.ax-event-card__cta-row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 10px;
    margin-top: 8px;
}
.ax-event-card__cta-primary {
    padding: 8px 10px;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}
.ax-event-card__cta-primary svg { width: 14px; height: 14px; }
.ax-event-card__cta-pause {
    padding: 8px 10px;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    gap: 5px;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
}
.ax-event-card__cta-pause svg { width: 12px; height: 12px; }
.ax-event-card__cta-pause span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ax-event-card__cta-secondary {
    padding: 8px 6px;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
}

/* Tablet: 3 colonne, mobile 2 colonne, very-small 1 colonna */
@media (max-width: 1100px) {
    .ax-events-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}
@media (max-width: 720px) {
    .ax-events-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .ax-event-card__body { padding: 12px 12px 14px; gap: 6px; }
    .ax-event-card__title { font-size: 0.95rem; }
    .ax-event-card__meta { font-size: 0.6rem; gap: 8px; }
    .ax-event-card__cta-row { flex-direction: column; gap: 5px; }
    .ax-event-card__cta-primary { font-size: 0.6rem; padding: 8px 8px; }
    .ax-event-card__cta-pause { font-size: 0.58rem; padding: 7px 8px; }
}
@media (max-width: 380px) {
    .ax-events-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATION PASS (task #6 — 2026-05-22)
   Consolidated tweaks: hero standard, pillars, filter chips, footer,
   hero-cta tap-target ≥56px, event card 1-col <480px, no scroll indicator.
   Verified on iPhone SE (375×667) and Galaxy S20 (360×640).
   ════════════════════════════════════════════════════════════════════════ */

/* — Hero standard (fallback, no featured) — */
@media (max-width: 640px) {
    .ax-hero {
        padding: clamp(3rem, 9vw, 5rem) 0 clamp(2rem, 5vw, 3rem);
    }
    .ax-hero-title {
        font-size: clamp(2rem, 8vw, 3.5rem);
        line-height: 1.02;
        margin: 0 0 1rem;
    }
    .ax-hero-lead {
        font-size: 1rem;
        margin: 0 0 1.5rem;
    }
    .ax-hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .ax-hero-actions .ax-btn {
        width: 100%;
        min-height: 56px;
        justify-content: center;
    }
    .ax-hero-skyline { display: none; }  /* skyline SVG occupava troppo verticale */
}

/* — Hero-CTA (Tickets + Pausenvorbestellung): above-the-fold, tap target ≥56px — */
@media (max-width: 640px) {
    .ax-hero-cta { padding: 14px 12px 6px; }
    .ax-hero-cta__row { gap: 10px; }
    .ax-hero-cta__btn {
        min-height: 56px;             /* Apple HIG / Material — tap target */
        padding: 12px 14px;
        gap: 10px;
    }
}

/* — Pillar cards: 1-col già a 920px, ma riduci typography <640px — */
@media (max-width: 640px) {
    .ax-pillars { padding: 36px 0 24px; }
    .ax-pillars__head { margin-bottom: 24px; }
    .ax-pillars__title { font-size: clamp(1.75rem, 7vw, 2.4rem); }
    .ax-pillars__subtitle { font-size: 0.95rem; }
    .ax-pillar { padding: 22px 20px 20px; gap: 10px; border-radius: 12px; }
    .ax-pillar__icon { width: 44px; height: 44px; }
    .ax-pillar__icon svg { width: 24px; height: 24px; }
    .ax-pillar__title { font-size: 1.3rem; }
    .ax-pillar__desc { font-size: 0.92rem; line-height: 1.5; }
    .ax-pillar__num { top: 22px; right: 20px; font-size: 10px; }
    .ax-pillar__cta { font-size: 11px; padding-top: 12px; }
}

/* — Event card very-small (<480px): forza 1-col, riduci poster — */
@media (max-width: 480px) {
    .ax-events-grid { grid-template-columns: 1fr !important; gap: 16px; }
    .ax-event-card__poster { aspect-ratio: 16/10; max-height: 200px; }
    .ax-event-card__title { font-size: 1.1rem; line-height: 1.2; }
    .ax-event-card__cta-row { flex-direction: column !important; gap: 8px; }
    .ax-event-card__cta-primary,
    .ax-event-card__cta-pause {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        font-size: 0.7rem;
    }
}

/* — Footer mobile: 1-col già a 600px, ma padding più generoso + tap targets — */
@media (max-width: 640px) {
    .ax-footer { padding: 48px 0 24px; }
    .ax-footer-grid { gap: 32px; padding: 0 16px; }
    .ax-footer h3 { margin-bottom: 12px; font-size: 0.78rem; }
    .ax-footer ul { gap: 4px; }
    .ax-footer a { padding: 6px 0; display: inline-block; font-size: 0.95rem; }
    .ax-footer-bottom { padding: 20px 16px; font-size: 0.8rem; flex-direction: column; gap: 12px; text-align: center; }
    .ax-footer-brand { justify-content: center; }
}

/* — Events header & filters: stacked su mobile — */
@media (max-width: 640px) {
    .ax-events-header {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
    }
    .ax-events-header__title { font-size: clamp(1.6rem, 6vw, 2.2rem); }
    .ax-filters {
        gap: 8px;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-inline: -12px;
        padding-inline: 12px;
    }
    .ax-filters::-webkit-scrollbar { display: none; }
    .ax-filter { flex-shrink: 0; min-height: 36px; }
}

/* Audit Design (Tri-AI): CTA-Reihe der Event-Cards unten verankern, damit
   Buttons bei unterschiedlich langen Titeln auf gleicher Höhe sitzen. */
.ax-event-card__body > .ax-event-card__cta-row { margin-top: auto; }

/* UX-Audit (Tri-AI): Zeilenlänge für Lauftext auf ~65–72 Zeichen begrenzen
   (Lesbarkeit; betraf v.a. Datenschutz/Eventlocation-Fließtext >80–100 Zeichen).
   Scoped auf Lauftext-Container — Grid/Card-Layouts bleiben unberührt. */
.ax-prose { max-width: 72ch; }
.ax-prose p, .ax-prose li { max-width: 70ch; }
.ax-section .ax-lead { max-width: 68ch; }

/* Il menù è sticky (75px): senza un margine di scorrimento l'ancora finisce
   sotto la barra e la sezione sembra saltata. Serve da quando dal menù si va
   diritti ai singoli punti (#anfahrt, #saalplan, #faq-curated,
   #pausengastronomie, #das-unikat, #faq — Alyssa, 18.08.2026). */
:target { scroll-margin-top: calc(var(--ax-nav-height, 75px) + 16px); }