/* * KW OKTicket Styles - Version 3.7 (Smart Defaults & Gallery Fix) */

.kw-okticket-wrapper {
    --kw-primary: #2563eb;
    --kw-primary-hover: #1e40af;
    --kw-wait: #f59e0b;      
    --kw-wait-hover: #d97706;
    --kw-bg: #ffffff;      
    --kw-text: #1f2937;
    --kw-meta: #6b7280;
    --kw-border: #e5e7eb;
    --kw-radius: 12px;
    
    --kw-shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 1.0);
    --kw-shadow-hover: 0 15px 25px -5px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 1.0);

    box-sizing: border-box; width: 100%; font-family: inherit; color: var(--kw-text);
}
.kw-okticket-wrapper * { box-sizing: border-box; }
.kw-okticket-wrapper img { max-width: 100%; height: auto; display: block; }

/* Typo Defaults (Overridebar via Elementor) */
.kw-title { margin: 0 0 0.5rem 0; font-weight: 700; line-height: 1.3; font-size: 1.25rem; color: var(--kw-text); }
.kw-excerpt { font-size: 0.95rem; opacity: 0.9; margin-bottom: 1.2rem; line-height: 1.6; }
.kw-meta-line { display: flex; flex-wrap: wrap; gap: 15px; font-size: 0.9rem; color: var(--kw-meta); margin-bottom: 1rem; align-items: center; }
.kw-meta-item i { color: var(--kw-primary); margin-right: 5px; }

/* Layout-Specific Color Defaults (Smart) */
/* Helle Karten -> Dunkler Text */
.kw-card .kw-title, .kw-list-item .kw-title, .kw-timeline-content .kw-title, .kw-table-row-card .kw-title, .kw-compact-item .kw-title {
    color: #1f2937;
}
/* Dunkle Hintergründe -> Heller Text */
.kw-banner-overlay .kw-title, .kw-gallery-item .kw-title {
    color: #ffffff !important; text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
.kw-banner-overlay .kw-meta-line, .kw-gallery-meta {
    color: rgba(255,255,255,0.9) !important;
}

/* Badges */
.kw-badge { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 99px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.kw-st-ok   { background: #dcfce7; color: #14532d; border: 1px solid #86efac; }
.kw-st-low  { background: #fef9c3; color: #713f12; border: 1px solid #fde047; }
.kw-st-sold { background: #fee2e2; color: #7f1d1d; border: 1px solid #fca5a5; }

.kw-date-badge {
    background: #fff; color: #1f2937 !important;
    padding: 8px 12px; border-radius: 10px; text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); min-width: 60px; border: 1px solid rgba(0,0,0,0.05);
    line-height: 1;
}
.kw-date-badge .kw-day { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1; color: #111; }
.kw-date-badge .kw-month { display: block; font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--kw-primary); margin-top: 3px; }

/* Buttons */
.kw-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 0.7rem 1.4rem; border-radius: 8px; font-weight: 600; text-decoration: none; font-size: 0.95rem;
    transition: all 0.2s ease; cursor: pointer; border: 1px solid rgba(0,0,0,0.1);
}
.kw-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.kw-btn-primary { background: linear-gradient(180deg, var(--kw-primary) 0%, var(--kw-primary-hover) 100%); color: #fff !important; }
.kw-btn-waitlist { background: linear-gradient(180deg, var(--kw-wait) 0%, var(--kw-wait-hover) 100%); color: #fff !important; }
.kw-btn-secondary { background: #fff; color: var(--kw-text) !important; border: 1px solid #d1d5db; }
.kw-btn-secondary:hover { border-color: var(--kw-primary); color: var(--kw-primary) !important; background: #f9fafb; }

.kw-card-footer, .kw-list-actions, .kw-banner-action, .kw-actions, .kw-gallery-hover, .kw-compact-action { display: flex; gap: 15px; flex-wrap: wrap; margin-top: auto; }

/* SHARED CONTAINER */
.kw-card, .kw-list-item, .kw-timeline-content, .kw-table-row-card, .kw-compact-item {
    background: var(--kw-bg); border: 1px solid var(--kw-border);
    transition: transform 0.3s, box-shadow 0.3s;
}
.kw-card:hover, .kw-list-item:hover, .kw-timeline-content:hover, .kw-table-row-card:hover, .kw-compact-item:hover {
    transform: translateY(-5px); box-shadow: var(--kw-shadow-hover); border-color: var(--kw-primary); z-index: 2;
}

/* 1. CARDS */
.kw-layout-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 30px; }
.kw-card { display: flex; flex-direction: column; border-radius: var(--kw-radius); box-shadow: var(--kw-shadow-card); overflow: hidden; }
.kw-card-media { position: relative; overflow: hidden; min-height: 200px; }
.kw-card-media img { width: 100%; height: 240px; object-fit: cover; transition: transform 0.5s; }
.kw-card:hover .kw-card-media img { transform: scale(1.05); }
.kw-card-media .kw-date-badge { position: absolute; top: 15px; left: 15px; z-index: 2; }
.kw-status-abs { position: absolute; top: 15px; right: 15px; z-index: 2; }
.kw-card-body { padding: 2rem; flex: 1; display: flex; flex-direction: column; }
.kw-card-footer { padding-top: 1.5rem; border-top: 1px solid #f0f0f0; }
.kw-card-footer .kw-btn { flex: 1; }

/* 2. LIST */
.kw-layout-list { display: flex; flex-direction: column; gap: 25px; }
.kw-list-item { display: flex; flex-direction: row; border-radius: var(--kw-radius); box-shadow: var(--kw-shadow-card); overflow: hidden; position: relative; }
.kw-list-img { width: 280px; flex-shrink: 0; background: #eee; position: relative; }
.kw-list-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.kw-list-item:hover .kw-list-img img { transform: scale(1.05); }
.kw-list-img .kw-date-badge { position: absolute; top: 15px; left: 15px; z-index: 2; }
.kw-list-content { padding: 2rem; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.kw-list-header { display: flex; justify-content: space-between; margin-bottom: 1rem; gap: 20px; }
.kw-list-meta-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
@media (max-width: 700px) { .kw-list-item { flex-direction: column; } .kw-list-img { width: 100%; height: 220px; } }

/* 3. BANNER */
.kw-layout-banner { display: grid; gap: 30px; }
.kw-banner-item { position: relative; height: 400px; background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: var(--kw-radius); overflow: hidden; display: flex; align-items: flex-end; box-shadow: var(--kw-shadow-card); }
.kw-banner-overlay { width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.4)); padding: 2.5rem; color: #fff; display: flex; gap: 3rem; align-items: flex-end; }
.kw-banner-top-right { position: absolute; top: 25px; right: 25px; }
.kw-banner-text { flex: 1; }
@media (max-width: 600px) { .kw-banner-overlay { flex-direction: column; align-items: flex-start; gap: 1.5rem; } }

/* 4. TIMELINE */
.kw-layout-timeline { display: flex; flex-direction: column; gap: 25px; }
.kw-timeline-row { display: grid; grid-template-columns: 120px 40px 1fr; position: relative; }
.kw-timeline-row:not(:last-child) .kw-tl-marker-col::after { content: ''; position: absolute; top: 25px; bottom: -35px; left: 50%; width: 3px; background: #e5e7eb; transform: translateX(-50%); z-index: 0; }
.kw-tl-date-pill { background: #fff; border: 1px solid var(--kw-border); border-radius: 50px; padding: 8px 16px; text-align: center; box-shadow: var(--kw-shadow-card); display: flex; flex-direction: column; align-items: center; min-width: 95px; margin-left: auto; }
.kw-tl-day { font-weight: 800; color: var(--kw-text); font-size: 1rem; }
.kw-tl-year { font-size: 0.85rem; color: var(--kw-meta); }
.kw-tl-dot { width: 20px; height: 20px; background: var(--kw-primary); border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 2px var(--kw-primary); margin: 18px auto 0; z-index: 1; position: relative; }
.kw-timeline-content { border-radius: var(--kw-radius); box-shadow: var(--kw-shadow-card); display: flex; flex-direction: row; position: relative; transition: transform 0.3s; }
.kw-timeline-content:hover { transform: translateX(5px); border-color: var(--kw-primary); box-shadow: var(--kw-shadow-hover); }
.kw-tl-arrow { position: absolute; top: 20px; left: -7px; width: 14px; height: 14px; background: var(--kw-bg); transform: rotate(45deg); border-left: 1px solid var(--kw-border); border-bottom: 1px solid var(--kw-border); z-index: 2; }
.kw-tl-img { width: 220px; flex-shrink: 0; background: #f3f4f6; border-right: 1px solid #eee; }
.kw-tl-img img { width: 100%; height: 100%; object-fit: cover; }
.kw-tl-body { padding: 2rem; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.kw-tl-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.kw-tl-footer { margin-top: 10px; padding-top: 10px; border-top: 1px solid #f3f4f6; }
@media (max-width: 768px) { .kw-timeline-row { display: flex; flex-direction: column; gap: 10px; } .kw-tl-date-col, .kw-tl-marker-col, .kw-tl-arrow { display: none; } .kw-timeline-content { flex-direction: column; } .kw-tl-img { width: 100%; height: 180px; border-right: none; border-bottom: 1px solid #eee; } }

/* 5. TABLE */
.kw-layout-table { display: flex; flex-direction: column; gap: 15px; }
.kw-table-row-card { display: grid; grid-template-columns: 80px 120px 1fr 130px 160px; border-radius: 12px; align-items: center; padding: 15px 25px; gap: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.03); }
.kw-table-row-card:hover { border-color: var(--kw-primary); }
.kw-tbl-cell-img img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }
.kw-tbl-cell-img .kw-tbl-placeholder { width: 64px; height: 64px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #ccc; }
.kw-tbl-cell-date strong { color: var(--kw-primary); display: block; font-size: 1.05rem; }
.kw-tbl-cell-date span { display: block; color: var(--kw-text); opacity: 0.8; font-weight: 500; }
.kw-tbl-cell-action { display: flex; justify-content: flex-end; gap: 8px; }
.kw-tbl-cell-action .kw-btn { padding: 0.5rem 0.8rem; font-size: 0.85rem; }
@media (max-width: 950px) { .kw-table-row-card { grid-template-columns: 1fr; gap: 15px; padding: 20px; position: relative; padding-bottom: 70px; } .kw-tbl-cell-img { display: none; } .kw-tbl-cell-status { position: absolute; top: 20px; right: 20px; } .kw-tbl-cell-action { position: absolute; bottom: 20px; left: 20px; } }

/* 6. GALLERY (Contrast Fix) */
.kw-layout-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.kw-gallery-item {
    position: relative; aspect-ratio: 1 / 1; background-size: cover; background-position: center;
    border-radius: var(--kw-radius); overflow: hidden; box-shadow: var(--kw-shadow-card);
    display: flex; align-items: flex-end; border: 1px solid var(--kw-border);
}
.kw-gallery-item:hover { transform: scale(1.02); z-index: 2; box-shadow: var(--kw-shadow-hover); border-color: var(--kw-primary); }
.kw-gallery-overlay {
    width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0) 100%);
    padding: 1.5rem; display: flex; flex-direction: column; justify-content: flex-end;
}
.kw-gallery-top { position: absolute; top: 15px; right: 15px; z-index: 2; }
/* Gallery Date Badge */
.kw-gallery-date {
    display: inline-block; 
    background: rgba(255,255,255,0.95); color: #1f2937; 
    padding: 5px 10px; border-radius: 6px; font-size: 0.8rem; font-weight: 700; margin-bottom: 8px; 
}
.kw-gallery-hover { height: 0; overflow: hidden; opacity: 0; transition: all 0.3s; }
.kw-gallery-item:hover .kw-gallery-hover { height: auto; opacity: 1; margin-top: 15px; }

/* 7. COMPACT */
.kw-layout-compact { display: flex; flex-direction: column; gap: 10px; }
.kw-compact-item { display: flex; align-items: center; gap: 15px; background: var(--kw-bg); padding: 12px 20px; border-radius: 10px; border: 1px solid var(--kw-border); box-shadow: 0 2px 4px rgba(0,0,0,0.03); }
.kw-compact-item:hover { border-color: var(--kw-primary); transform: translateX(5px); }
.kw-compact-media img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.kw-compact-placeholder { width: 50px; height: 50px; border-radius: 50%; background: var(--kw-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; }
.kw-compact-main { flex: 1; overflow: hidden; }
.kw-compact-date { font-size: 0.8rem; color: var(--kw-meta); font-weight: 600; text-transform: uppercase; }
.kw-compact-item .kw-title { font-size: 1rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--kw-text) !important; }
.kw-compact-action { display: flex; align-items: center; gap: 10px; }
.kw-compact-action .kw-btn { padding: 0.4rem 0.9rem; font-size: 0.85rem; }
@media(max-width: 600px) { .kw-compact-item { flex-wrap: wrap; } .kw-compact-action { width: 100%; justify-content: space-between; margin-top: 5px; padding-top: 5px; border-top: 1px solid #eee; } }