/**
 * TICKETSHOP - DEFAULT THEME
 * Frontend (Shop) Design - ORIGINAL
 * 
 * WICHTIG: CSS-Variablen werden dynamisch aus ui_settings geladen!
 */

/* ================================================================
   CSS VARIABLES (werden von PHP überschrieben)
   ================================================================ */
:root {
    --bg-dark: #0a0a0a;
    --text-dark: #f5f5f5;
    --accent: #10b981;
    --accent-glow: color-mix(in srgb, var(--accent) 35%, transparent);
    
    /* Button Colors (from ui_settings) */
    --button-bg: #10b981;
    --button-text: #ffffff;
    
    --logo-width: 350px;
    --logo-glow: 15px;
    
    --nav-font-size: 15px;
    --nav-spacing: 32px;
    
    --event-card-columns: 3;
    --event-card-height: 450px;
    --event-card-radius: 18px;
    --event-card-glow: 8px;
    --event-card-glow-hover: 15px;
    
    --overlay-opacity: 0.92;
    --overlay-font-size: 14px;
    
    --dot-size: 10px;
    --dot-gap: 10px;
    --dot-glow: 8px;
    
    --arrow-size: 40px;
    
    --footer-padding: 30px;
    --footer-font-size: 14px;
}

/* ================================================================
   GLOBAL
   ================================================================ */
body {
    margin: 0;
    font-family: Inter, sans-serif;
    background: var(--bg-dark);
    background-size: cover;
    background-attachment: fixed;
    color: var(--text-dark);
}

/* ================================================================
   HEADER
   ================================================================ */
header {
    text-align: center;
    padding: 50px 60px 30px;
}

.header-logo {
    max-width: var(--logo-width);
    filter: drop-shadow(0 0 var(--logo-glow) var(--accent-glow));
}

nav {
    margin-top: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

nav a {
    margin: 0 var(--nav-spacing);
    font-size: var(--nav-font-size);
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: .75;
    text-decoration: none;
    color: inherit;
}

nav a:hover {
    opacity: 1;
    color: var(--accent);
}

/* ================================================================
   MAIN
   ================================================================ */
main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ================================================================
   SLIDER
   ================================================================ */
.slider-wrapper {
    position: relative;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--arrow-size);
    height: var(--arrow-size);
    border-radius: 50%;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}

.slider-arrow svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
    stroke-width: 2.5;
    fill: none;
}

.slider-arrow.left { left: -6%; }
.slider-arrow.right { right: -6%; }

.slider-viewport {
    overflow-x: hidden;
    overflow-y: visible;
}

.slider-track {
    display: flex;
    transition: transform .6s ease;
}

/* ================================================================
   EVENTS
   ================================================================ */
.events-scale {
    transform: scale(0.9);
    transform-origin: top center;
    margin-bottom: -8%;
}

.events {
    min-width: 100%;
    display: grid;
    grid-template-columns: repeat(var(--event-card-columns), minmax(0, 400px));
    gap: 40px;
    justify-content: center;
    padding: 40px 0;
}

/* ================================================================
   EVENT CARD
   ================================================================ */
.event-card {
    width: 100%;
    height: var(--event-card-height);
    position: relative;
    border-radius: var(--event-card-radius);
    overflow: hidden;
    background: rgba(255,255,255,.06);
    box-shadow: 0 0 var(--event-card-glow) var(--accent-glow);
    transition: .25s;
}

.event-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 var(--event-card-glow-hover) var(--accent-glow);
}

.event-card.disabled {
    filter: grayscale(100%) brightness(.6);
    box-shadow: none;
}

.event-card.disabled a {
    pointer-events: none;
}

.event-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.event-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px 24px;
    background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.2));
    font-family: 'Bebas Neue', sans-serif;
    text-align: right;
    text-transform: uppercase;
    color: #fff;
}

.event-title {
    font-size: 24px;
    letter-spacing: 4px;
}

.event-meta {
    margin-top: 6px;
    font-size: 14px;
    letter-spacing: 2px;
    opacity: .8;
    text-transform: none;
}

/* ================================================================
   OVERLAY
   ================================================================ */
.event-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,var(--overlay-opacity));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: var(--overlay-font-size);
    letter-spacing: 3px;
    color: #fff;
    opacity: 0;
    transition: .25s;
}

.event-card:not(.disabled):hover .event-overlay {
    opacity: 1;
}

/* ================================================================
   PAGINATION
   ================================================================ */
.pagination {
    display: flex;
    justify-content: center;
    gap: var(--dot-gap);
    margin: 80px 0;
}

.page-dot {
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
}

.page-dot.active {
    background: var(--accent);
    box-shadow: 0 0 var(--dot-glow) var(--accent-glow);
}

/* ================================================================
   DIVIDER
   ================================================================ */
.divider {
    width: 1400px;
    height: 1px;
    background: rgba(255,255,255,.15);
    margin: 80px auto;
}

/* ================================================================
   STATEMENT / PAGE CONTENT
   ================================================================ */
.statement {
    max-width: 900px;
    margin: 0 auto 140px;
    text-align: center;
}

.statement-logo {
    max-width: 100%;
}

.statement-grid {
    margin-top: 40px;
}

.page-content p {
    margin: 0.5em 0;
}

.page-content .img-wrapper {
    display: inline-block;
    margin: 4px;
}

.page-content .img-wrapper img {
    max-width: 100%;
    border-radius: 8px;
    display: inline-block;
}

/* ================================================================
   FOOTER
   ================================================================ */
footer {
    text-align: center;
    padding: var(--footer-padding) 20px;
    font-size: var(--footer-font-size);
    opacity: .6;
    border-top: 1px solid rgba(255,255,255,.08);
}

footer a {
    color: inherit;
    text-decoration: none;
}

footer a:hover {
    color: var(--accent);
}

/* ================================================================
   CONTENT PAGES (Impressum, Datenschutz, etc.)
   ================================================================ */
.content-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px;
    line-height: 1.8;
}

.content-page h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 42px;
    color: var(--accent);
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: 2px;
}

.content-page h2 {
    font-size: 24px;
    margin: 30px 0 15px;
    color: var(--accent);
}

.content-page p {
    margin: 15px 0;
    color: rgba(255,255,255,0.9);
}

.content-page a {
    color: var(--accent);
    text-decoration: none;
}

.content-page a:hover {
    text-decoration: underline;
}

/* ================================================================
   EVENT PAGES - Für generierte Event-Seiten
   ================================================================ */
.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
}

.image-wrap {
    position: relative;
    border-radius: var(--event-card-radius);
    overflow: hidden;
    height: 95%;
    align-self: start;
}

.image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 26px;
    background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.15));
    border-radius: 0 0 var(--event-card-radius) var(--event-card-radius);
    font-family: 'Bebas Neue', sans-serif;
    text-align: right;
}

.image-caption .title {
    font-size: 32px;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.image-caption .meta {
    font-size: 15px;
    letter-spacing: 2px;
    opacity: .8;
    margin-top: 6px;
}

.content h1 {
    font-weight: 400;
    margin-bottom: 10px;
}

.content .meta {
    opacity: .75;
    letter-spacing: 2px;
    margin-bottom: 25px;
}

.content .description {
    line-height: 1.8;
    margin: 25px 0;
}

.content .description p {
    margin: 1em 0;
}

.price {
    font-size: 28px;
    margin: 30px 0;
    letter-spacing: 2px;
}

.ticket-box {
    display: flex;
    align-items: center;
    gap: 20px;
}

.qty {
    display: flex;
    align-items: center;
    gap: 14px;
}

.qty button {
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,.1);
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    border-radius: 8px;
}

.qty span {
    min-width: 30px;
    text-align: center;
}

.buy-btn {
    padding: 14px 28px;
    background: var(--button-bg, var(--accent));
    color: var(--button-text, #fff);
    border: none;
    cursor: pointer;
    font-size: 14px;
    letter-spacing: 1px;
    border-radius: 8px;
}

/* ================================================================
   RESPONSIVE - Event Pages
   ================================================================ */
@media (max-width: 768px) {
    .wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .image-wrap {
        height: 400px;
    }
}

/* ================================================================
   EVENT PAGE CONTENT SPACING FIX
   ================================================================ */
.content .description {
    line-height: 1.5;
}

.content .description p {
    margin: 0.2em 0;
    line-height: 1.5;
}

.content .description br {
    line-height: 1.5;
}

/* ================================================================
   IMAGE ALIGNMENT FIX - Bilder folgen text-align
   ================================================================ */
.page-content p .img-wrapper {
    display: block;
    margin: 10px auto;
    max-width: fit-content;
}

/* Links-Ausrichtung */
.page-content p[style*="text-align: left"] .img-wrapper,
.page-content p[style*="text-align:left"] .img-wrapper {
    margin-left: 0;
    margin-right: auto;
}

/* Mitte-Ausrichtung */
.page-content p[style*="text-align: center"] .img-wrapper,
.page-content p[style*="text-align:center"] .img-wrapper {
    margin-left: auto;
    margin-right: auto;
}

/* Rechts-Ausrichtung */
.page-content p[style*="text-align: right"] .img-wrapper,
.page-content p[style*="text-align:right"] .img-wrapper {
    margin-left: auto;
    margin-right: 0;
}