/* Basics */
:root {
    --primary: #fc7f03;
    --light: #b5b1ae;
    --lighter: #f0f0f8;
    --dark: #3f3f3f;
    --darker: #2d2d2d;
}

@font-face {
    font-family: "DejaVu Serif";
    src: url("./fonts/DejaVuSerif.ttf") format("truetype");
}

h1, h2, h3, h4, h5, h6 {
    color: var(--primary) !important;
}

a {
    color: white !important;
}

p {
    color: var(--light);
}

li {
    color: var(--light);
}

input:focus {
    outline: none !important;
}

button:focus {
    outline: none !important;
}

@media only screen and (max-width: 600px) {
    .header.section {
        height: 100px !important;
    }
}

@media (min-width: 1040px) {
    .wrapper {
        margin-top: 4rem;
    }
}

@media (max-width: 1040px) {
    .wrapper {
        margin-top: 7.5% !important;
    }
}

.big-wrapper {
    margin: 0 auto;
    max-width: 1140px;
    background-color: #2d2d2d;

}

.sub-menu > .menu-item > a:hover {
    color: var(--primary) !important;
}

.post-header-event {
    margin-bottom: 3% !important;
}

/* Tables */
tbody {
    border: none;
}

td {
    color: var(--light)
}

/* Inputs */
input[type="submit"] {
    background-color: var(--primary);
}

/* Header */
.header {
    height: 250px;
}

.header-inner {
    display: none;
}

/* Blog */
.post-title {
    font-size: 1.5em;
}

/* SideBar */
.tribe-event-title > a {
    color: var(--primary) !important;
}

.tribe-events-widget-link > a {
    font-weight: 400 !important;
}

.widget {
    border-bottom: 1px solid rgb(238, 238, 238) !important;
}

.widget:last-of-type {
    border-bottom: none !important;
}

/* Navigation */
.blog-menu > li > a {
    color: white !important;
}

.blog-menu > li > a:active {
    color: var(--primary) !important;
}

.blog-menu > li > a:hover {
    color: var(--primary) !important;
}

.tribe-events-c-top-bar__datepicker-mobile, .tribe-events-c-top-bar__datepicker-desktop {
    color: white !important;

}

/* Site */
#site-info > a {
    color: var(--primary) !important;
}

#site-info > a:hover {
    color: #ba4f02 !important;
}

#site-title > span > a {
    color: var(--primary) !important;
}

.entry-content a {
    color: var(--primary) !important;
}

.entry-title a {
    color: var(--primary) !important;
}

/* event */
.tribe-events-header {
    background-color: var(--darker) !important;

}

.tribe-events .tribe-events-calendar-list__month-separator:after {
    background-color: var(--light);
}

/* Youtube Videos Mobile in Events */
@media only screen and (max-width: 600px) {
    .tribe-events-content > p > iframe {
        width: 100%;
    }
}

.tribe-events-c-top-bar__datepicker-button:after {
    color: white !important;
}

.tribe-events-header__events-bar {
    background-color: var(--darker) !important;
}

.tribe-events-c-ical__link:hover {
    background-color: var(--primary) !important;
    color: white !important;
}

.tribe-event-date-start, .tribe-event-date-end, .tribe-event-time, .tribe-events-c-small-cta__price {
    color: #d5d5d5 !important
}

.tribe-events-c-ical__link {
    border: 1px solid var(--primary) !important;
    color: var(--primary) !important;
}

.tribe-events-c-ical__link:before {
    display: none !important;
}

.tribe-events-calendar-list__event-date-tag-daynum, .tribe-events-calendar-list__event-date-tag-weekday {
    color: var(--light) !important;
}

.tribe-events-schedule > h2 {
    color: #d5d5d5 !important;
}

.tribe-events-calendar-list__month-separator-text {
    color: var(--primary) !important;
}

.tribe-common-l-container {
    padding-top: 0 !important;
}

.tribe-common-b2 {
    background-color: var(--darker) !important;
    color: var(--light) !important;
}

.tribe-events-c-small-cta__price, .tribe-events-c-small-organizers {
    font-size: 14px;
    color: var(--light) !important;
}

.tribe-events-calendar-list__event-featured-image-wrapper, .tribe-events-calendar-list__event-details {
    width: 50% !important;
}

@media only screen and (max-width: 600px) {
    .tribe-events-calendar-list__event-featured-image-wrapper, .tribe-events-calendar-list__event-details {
        width: 100% !important;
    }
}

.tribe-events-c-breadcrumbs__list-item:last-child > span {
    color: var(--light);
}


.tribe-events-calendar-month__body {
    border-top: 1px solid var(--dark) !important;
}

.tribe-events-calendar-month__week {
    border-left: 1px solid var(--dark) !important;
}

.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day {
    border-color: var(--dark) !important;
}

.tribe-events .tribe-events-c-view-selector__button:before {
    background-color: var(--primary);
}

.tribe-events-list-widget-events {
    margin-left: 0 !important;
}

.tribe-events-list-widget-events {
    border: 1px solid transparent;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.tribe-events-list-widget-events > .tribe-event-title {
    margin-top: 1rem !important;
    font-size: 1rem !important;
}

.tribe-events-list-widget-events > .tribe-event-duration {
    margin-bottom: 1rem !important;
}

.tribe-events-list-widget .tribe-event-featured {
    padding-bottom: 0 !important;
}

.tribe-events-calendar-month-nav .tribe-events-c-nav {
    display: none;
}

.tribe-events .tribe-events-c-nav__prev:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.916 17.841L10 19.757l-9.9-9.9L10-.041l1.916 1.916-7.983 7.984z' fill='%23fc7f03'/%3E%3C/svg%3E");
}

.tribe-events .tribe-events-c-nav__next:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.084 2.159L2 .243l9.9 9.9L2 20.041.084 18.126l7.983-7.984z' fill='%23fc7f03'/%3E%3C/svg%3E")
}

.tribe-events .tribe-events-calendar-month__mobile-events-icon--featured {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h16v20l-7.902-5.122L0 20z' fill='white'/%3E%3C/svg%3E")
}

.tribe-events .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__mobile-events-icon--featured {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h16v20l-7.902-5.122L0 20z' fill='%23fc7f03'/%3E%3C/svg%3E")
}

.tribe-events-calendar-month-mobile-events__mobile-event-datetime-featured-text {
    color: var(--primary) !important;
}

.tribe-events .tribe-events-calendar-month__day {
    border-style: solid;
    border-width: 0 1px 1px 0;
    border-radius: 0 !important;
}

.tribe-events-calendar-month-nav {
    border-top: 0 !important;
}

.tribe-events .tribe-events-c-day-marker:after {
    background-color: var(--light);
}

/* Event Details */
.tribe-events-event-meta {
    background-color: var(--dark) !important;
    border: none !important;
    border-radius: 4px;
}

.tribe-events-schedule {
    background-color: transparent !important;
    border: none !important;
}

dt, dd {
    color: var(--light)
}

.tribe-events-cost {
    color: white !important;
}

.tribe-events-address {
    background-color: transparent !important;
    padding: 0 !important;
}

.tribe-event-featured {
    background: transparent !important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    margin: 0;
}

.tribe-events-calendar-list__event-datetime-featured-text {
    color: var(--primary) !important;
}

.tribe-events-calendar-list__event-date-tag-datetime:after {
    background-color: var(--primary) !important;
}

.tribe-events .tribe-events-c-messages__message--notice:before {
    background-image: url("data:image/svgxml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 23'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath stroke='white' d='M.5 2.5h20v20H.5z'/%3E%3Cpath stroke='orange' stroke-linecap='round' d='M7.583 11.583l5.834 5.834m0-5.834l-5.834 5.834'/%3E%3Cpath stroke='white' stroke-linecap='round' d='M4.5.5v4m12-4v4'/%3E%3Cpath stroke='white' stroke-linecap='square' d='M.5 7.5h20'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.tribe-events-calendar-latest-past__event-date-tag-month, .tribe-events-calendar-latest-past__event-date-tag-daynum,
.tribe-events-calendar-latest-past__event-date-tag-year {
    color: var(--light) !important;
}

.tribe-events-calendar-latest-past__event-date-tag-datetime:after {
    background-color: var(--primary) !important;
}

#tribe-events-footer:after, #tribe-events-footer:before {
    display: none;
}

.tribe-events-nav-previous > a, .tribe-events-nav-next > a {
    background-color: transparent !important;
}

.tribe-events-notices {
    text-shadow: none !important;
    background-color: var(--dark) !important;
    border: 1px solid var(--dark) !important;
}

.tribe-events-c-small-cta__price {
    display: none;
}

.month.active.focused, .day.active {
    background: var(--primary) !important;
}

.tribe-common-h7 {
    color: var(--light) !important;
}

.tribe-events-calendar-month__day-cell--selected {
    background-color: white !important;
}

.tribe-events .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__mobile-events-icon--event {
    background-color: var(--primary) !important;
}

.tribe-events-calendar-month__mobile-events-icon--event {
    background-color: white !important;
}

.tribe-events-calendar-month__calendar-event-datetime {
    color: white !important;
    opacity: 1 !important;
}

.tribe-events-calendar-month__multiday-event-bar-inner {
    background-color: white !important;
}

.tribe-events-calendar-month__multiday-event-bar-title {
    opacity: 1 !important;
}

.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day:hover:after {
    background-color: var(--primary) !important;
}

.tribe-common-anchor-thin:hover, .tribe-common-anchor-thin:focus, .tribe-common-anchor-thin:visited {
    border-bottom: none !important;
}

.tribe-events-content {
    color: var(--light) !important;
}

.post-header-event > .post-title {
    font-weight: 700;
    font-size: 1.7rem;
}

.tribe-events-l-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.tribe-events-calendar-month__calendar-event--featured:before {
    background-color: var(--primary) !important;
}


/*Tickets */
.tribe-events-tickets {
    background-color: var(--dark) !important;
}

.tribe-events-c-small-cta__stock {
    color: var(--light) !important;
}


.tribe-button--rsvp {
    background-color: var(--primary) !important;
    color: white !important;
}

.available-stock, .tickets_name, .tickets_description, .tribe-link-view-attendee {
    color: var(--light) !important;
}

.tribe-rsvp-message-success {
    background-color: var(--dark) !important;
    border-color: transparent !important;
    color: var(--light) !important;
    font-size: 20px;
    padding: 0.7rem
}

.tribe-rsvp-messages {
    padding: 1rem 0;
}

.tribe-tickets-order_status-row {
    display: none !important;
}

.tribe-common .tribe-common-cta--thin-alt, .tribe-common-cta--thin-alt:hover {
    border-bottom: none !important;
}


.tribe-common .tribe-common-svgicon--month {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='22' height='22' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.637 1.063v19.879c0 .276.189.5.422.5h20.037c.232 0 .421-.224.421-.5V1.062c0-.275-.189-.5-.421-.5H1.059c-.233 0-.422.225-.422.5zM1.787 2H20.34v2.685H1.787V2zm0 4H20.34v14H1.787V6zM8 8.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm4 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm4 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm-8 4v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm4 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm4 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm-12 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm0 4v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm4 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm4 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5z' fill='white'/%3E%3C/svg%3E") !important;
}

.tribe-common .tribe-common-svgicon--list {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cg fill='white' fill-rule='evenodd'%3E%3Cpath fill-rule='nonzero' d='M0 .504v20.03c0 .278.19.503.425.503h20.188c.235 0 .425-.225.425-.504V.503c0-.277-.19-.503-.425-.503H.425C.19 0 0 .226 0 .504zm1.158.944h18.695v2.705H1.158V1.448zm0 2.705h18.695v15.432H1.158V4.153z'/%3E%3Cpath d='M13.39 5.731v2.13a1.07 1.07 0 0 0 1.076 1.064h2.154a1.07 1.07 0 0 0 1.077-1.065V5.731a1.07 1.07 0 0 0-1.077-1.064h-2.154A1.07 1.07 0 0 0 13.39 5.73z'/%3E%3Cpath fill-rule='nonzero' d='M8.84 8.937c.286 0 .52-.236.52-.523v-.425a.523.523 0 0 0-.52-.522H4.02a.523.523 0 0 0-.52.522v.425c0 .287.234.523.52.523h4.82zm2.064-2.8c.287 0 .521-.236.521-.523v-.425a.523.523 0 0 0-.52-.522H4.02a.523.523 0 0 0-.521.522v.425c0 .287.234.523.52.523h6.884z'/%3E%3Cpath d='M13.39 12.731v2.13a1.07 1.07 0 0 0 1.076 1.064h2.154a1.07 1.07 0 0 0 1.077-1.065v-2.129a1.07 1.07 0 0 0-1.077-1.064h-2.154a1.07 1.07 0 0 0-1.077 1.064z'/%3E%3Cpath fill-rule='nonzero' d='M8.84 15.937c.286 0 .52-.236.52-.523v-.425a.523.523 0 0 0-.52-.522H4.02a.523.523 0 0 0-.52.522v.425c0 .287.234.523.52.523h4.82zm2.064-2.8c.287 0 .521-.236.521-.523v-.425a.523.523 0 0 0-.52-.522H4.02a.523.523 0 0 0-.521.522v.425c0 .287.234.523.52.523h6.884z'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.tribe-events-c-view-selector__list-item-link > .tribe-common-svgicon--list {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cg fill='%23141827' fill-rule='evenodd'%3E%3Cpath fill-rule='nonzero' d='M0 .504v20.03c0 .278.19.503.425.503h20.188c.235 0 .425-.225.425-.504V.503c0-.277-.19-.503-.425-.503H.425C.19 0 0 .226 0 .504zm1.158.944h18.695v2.705H1.158V1.448zm0 2.705h18.695v15.432H1.158V4.153z'/%3E%3Cpath d='M13.39 5.731v2.13a1.07 1.07 0 0 0 1.076 1.064h2.154a1.07 1.07 0 0 0 1.077-1.065V5.731a1.07 1.07 0 0 0-1.077-1.064h-2.154A1.07 1.07 0 0 0 13.39 5.73z'/%3E%3Cpath fill-rule='nonzero' d='M8.84 8.937c.286 0 .52-.236.52-.523v-.425a.523.523 0 0 0-.52-.522H4.02a.523.523 0 0 0-.52.522v.425c0 .287.234.523.52.523h4.82zm2.064-2.8c.287 0 .521-.236.521-.523v-.425a.523.523 0 0 0-.52-.522H4.02a.523.523 0 0 0-.521.522v.425c0 .287.234.523.52.523h6.884z'/%3E%3Cpath d='M13.39 12.731v2.13a1.07 1.07 0 0 0 1.076 1.064h2.154a1.07 1.07 0 0 0 1.077-1.065v-2.129a1.07 1.07 0 0 0-1.077-1.064h-2.154a1.07 1.07 0 0 0-1.077 1.064z'/%3E%3Cpath fill-rule='nonzero' d='M8.84 15.937c.286 0 .52-.236.52-.523v-.425a.523.523 0 0 0-.52-.522H4.02a.523.523 0 0 0-.52.522v.425c0 .287.234.523.52.523h4.82zm2.064-2.8c.287 0 .521-.236.521-.523v-.425a.523.523 0 0 0-.52-.522H4.02a.523.523 0 0 0-.521.522v.425c0 .287.234.523.52.523h6.884z'/%3E%3C/g%3E%3C/svg%3E") !important;

}

.tribe-events-c-view-selector__list-item-link > .tribe-common-svgicon--month {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='22' height='22' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.637 1.063v19.879c0 .276.189.5.422.5h20.037c.232 0 .421-.224.421-.5V1.062c0-.275-.189-.5-.421-.5H1.059c-.233 0-.422.225-.422.5zM1.787 2H20.34v2.685H1.787V2zm0 4H20.34v14H1.787V6zM8 8.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm4 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm4 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm-8 4v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm4 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm4 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm-12 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm0 4v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm4 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm4 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5z' fill='%23141827'/%3E%3C/svg%3E") !important;
}

.tickets-unavailable {
    color: var(--light) !important;
}


/** Cookie */
#cookie-law-info-again {
    right: 0 !important;
}

.cli-nav-link {
    color: black !important;
}

/** Event Month Tooltip */
.tooltipster-show {
    background-color: var(--dark) !important;
    border: 1px solid var(--dark) !important;
}


.post-content {
    font-size: 1rem !important;
}

/* SVG Icons */
.tribe-common .tribe-common-c-svgicon__svg-fill {
    fill: white;
}

.single-tribe_events .tribe-events-single .tribe-events-event-meta {
    width: 100%;
    padding-bottom: 4%;
}


@media (min-width: 768px) {
    .tribe-events-meta-group {
        width: 33%;
        padding: var(--tec-spacer-3) 0 var(--tec-spacer-7);
    }
}

.tribe-events-event-meta:before, .tribe-events-event-meta ~ div:not(.tribe-events-event-meta,.event-tickets) {
    border-top: none;
}

#tribe-events-footer {
    margin-top: 40px;
}

.tribe-events .tribe-events-calendar-month__day-date-daynum {
    color: var(--primary);
}

.tribe-events-schedule h2 {
    font-size: var(--tec-font-size-5);
    font-weight: bold;
}

.tribe-events-single .tribe-events-sub-nav .tribe-events-nav-previous a:before {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.916 17.841L10 19.757l-9.9-9.9L10-.041l1.916 1.916-7.983 7.984z' fill='%235D5D5D'/%3E%3C/svg%3E") 0/7px no-repeat;
}

.tribe-events-single .tribe-events-sub-nav .tribe-events-nav-next a:after {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.084 2.159L2 .243l9.9 9.9L2 20.041.084 18.126l7.983-7.984z' fill='%235D5D5D'/%3E%3C/svg%3E") 100%/7px no-repeat;
}

.tribe-events-c-view-selector__list-item-icon-svg .tribe-common-c-svgicon__svg-fill {
    fill: var(--primary) !important;
}

.tribe-events .tribe-events-calendar-list__event-datetime {
    color: white;
}

.tribe-events-meta-group {
    padding: 0 4%;
}

.tribe-events-event-meta.primary, .tribe-events-event-meta.secondary {
    padding-top: 0;
}

.tribe-events .tribe-events-c-nav__prev-icon-svgtribe-events-view-loader path, .tribe-events .tribe-events-c-nav__next-icon-svg path {
    fill: #5D5D5D;
}

.tribe-common .tribe-common-c-svgicon--messages-not-found .tribe-common-c-svgicon__svg-stroke, .tribe-common .tribe-common-c-svgicon--messages-not-found path {
    stroke: var(--primary);
}

.tribe-common .tribe-common-c-btn-border, .tribe-common a.tribe-common-c-btn-border {
    background-color: transparent;
}

.tribe-events-view-loader {
    background-color: transparent !important;
}

.tribe-common .tribe-common-h3 {
    color: white !important;
}

.tribe-events .tribe-events-c-day-marker:after {
    display: none !important;
}

.tribe-events-c-day-marker__date {
    display: none !important;
}

.tribe-events-calendar-list__event-venue {
    padding-left: 0 !important;
}

.post-nav {
    border-top: 1px solid #eee !important;
    border-bottom: 1px solid #eee !important;
}

.posts .post {
    border-bottom: 2px solid #eee
}

/* Asgaros Forum */

.asgaros-forum .section-inner {
    max-width: 95% !important
}

.asgarosforum-widget .post-author {
    color: var(--light);
}

.asgarosforum-widget .post-author .profile-link {
    color: var(--primary) !important;
    margin-left: 0.1rem;
    font-weight: 400;
}

.asgarosforum-widget .post-date {
    color: var(--light);
}

.asgarosforum-widget .widget-element:last-child {
    border: none;
}

/* Monthly Flyer */

.monthly-flyer-container {
    display: flex;
    justify-content: space-between;
    background-color: var(--dark);
    padding: 16px;
    border-radius: 5px;
    flex: 1;
    align-items: center;
}

.monthly-flyer-actions {
    flex: 0;
}

.monthly_notification {
    height: 50px;
    margin: auto 0 !important;
    margin-bottom: 8px !important;
    width: 100%;
}

.monthly-flyer-actions > .monthly-flyer-edit-button{
    display:block;
    width: 100%;
    height: 50px;
    border-radius: 5px;
    color: white!important;
    background-color: var(--primary);
    padding: 16px;
    text-align: center;

    &:hover{
        text-decoration: none;
    }
}

.monthly_notification_disabled {
    background-color: gray !important;
    cursor: not-allowed !important;
}

.monthly_notification_disabled:hover {
    background-color: gray !important;
    cursor: not-allowed !important;
}

.monthly-flyer-toast {
    background-color: var(--lighter);
    color: var(--primary);
    padding: 6px;
    border-radius: 5px;
    display: inline-block;
}

.monthly-flyer-details-title {
    color: var(--primary);
    font-weight: 600;
}

.monthly-flyer-details-category {
    margin-top: 12px;
}

.monthly-flyer-checkbox-container {
    background-color: var(--lighter);
    color: var(--primary);
    padding: 6px;
    border-radius: 5px;
    margin-bottom: 12px;
}

.monthly-flyer-checkbox-title {
    color: var(--primary);
}

.monthly-flyer-checkbox-inputContainer {
    color: black;
}

.monthly-flyer-details-button {
    color: var(--primary);
    cursor: pointer;
}

.monthly-flyer-details-text {
    color: var(--light);
    margin-bottom: 12px;
}

.monthly-flyer-container-complete {
    background-color: green;
}

/* tribe tickets purchase */

.tribe-tickets__tickets-form {
    background-color: var(--dark) !important;
    border: none !important;
}

.tribe-tickets__tickets-item-extra-price, .tribe-tickets__tickets-footer-quantity, .tribe-tickets__tickets-footer-total, .tribe-tickets__tickets-item-details-content {
    background-color: var(--dark) !important;
}

.tribe-tickets__tickets-footer-quantity-label, .tribe-tickets__tickets-item-extra-available, .tribe-tickets__tickets-footer-total-label, .tribe-tickets__commerce-checkout-cart-footer-quantity-label, .tribe-tickets__commerce-checkout-cart-footer-total-label, .tribe-tickets__commerce-checkout-cart-item-details-title, .tribe-tickets__commerce-order-details-col1 {
    color: var(--primary) !important;
}

.tribe-tickets__tickets-footer-quantity-number, .tribe-amount, .tribe-currency-symbol, .tribe-tickets__commerce-checkout-cart-footer-quantity-number, .tribe-tickets__commerce-checkout-cart-footer-total-wrap, .tribe-tickets__commerce-checkout-cart-item, .tribe-tickets__commerce-order-description, .tribe-tickets__commerce-order-details-col2 {
    color: var(--light) !important;
}

/* Event list view */

.tribe-events-calendar-list__event {
    flex-direction: row-reverse !important;
    justify-content: flex-end;
}

/* User Verification */
.verification-user {
    color: var(--primary);
}

.verification-item-wrapper {
    display: block;
}


.verification-item-inner {
    display: flex;
}

.verification-item-inner-spacing {
    display: flex;
}


.verification-item {
    padding: 20px;
    width: 100%;
    height: 205px;
    margin-bottom: 3px;
    background-size: contain;
    background-repeat: no-repeat;

}

.verification-item-content {
    left: 41%;
    top: 18.5%;
    font-size: 16px;
    width: 55%;
    position: relative;
    font-family: "DejaVu Serif", serif;
    display: flex;
    flex-direction: column;
    color: #654c42;
}

.verification-item-registered {
    align-self: flex-end;
    font-size: 12px;
}

/* Set print styles for membership cards */
@media print {
    .verification-item-registered {
        font-size: 8pt;
    }

    .verification-item-content {
        width: 3.8cm;
        top: 0.82cm;
        left: 3cm;
        font-size: 12pt;
    }

    .verification-item {
        width: 8.5cm;
        height: 5.4cm;
    }

    .verification-item-inner-spacing {
        margin-bottom: 8cm;
    }

    .verification-item-first {
        margin-top: 0.35cm;
        margin-bottom: 0.25cm;
    }

    .verification-barcode {
        top: 0.7cm;
    }

    .item-spacer {
        height: 5cm;
    }
}

/* Hide unneeded containers for print for membership cards */
@media print {
    .post-title, .navigation, .credits-inner, .footer, .header, #cookie-law-info-bar, #cookie-law-info-again, .post-edit-link, .sidebar {
        display: none !important;
    }
}

@media print {
    .big-wrapper, .page-template, body.custom-background {
        background-color: transparent !important;
    }
}

.verification-item-first {
    display: block;
    margin-top: 9%;
    margin-bottom: 8%;

}

@media only screen and (max-width: 480px) {

    .verification-item-inner{
        flex-direction: column;
    }

    .verification-item {
        width: 350px;
        padding: 8px 32px;
    }

    .verification-item-content {
        font-size: 16px;
        top: 42px;
    }

    .verification-item-first {
        margin-top: 14px;
    }

    .verification-item-registered {
        align-self: flex-end;
        font-size: 12px;
        margin-right:8px;
    }
}

.verification-barcode {
    position: relative;
    top: 30px;

}

.item-spacer {
    height: 100px;

}

/* Verification Page */

.verification-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 16px;
    color: var(--light);
}

.validation-image {
    width: 40px;
    align-self: center;
}

.verification-user-container {
    align-self: center;
    margin-top: 10px;
}


/* Flyer */
select {
    padding: 10px;
}


.flyer-container .post-edit-link {
    display: none;
}

.flyer-container {
    background-color: #0a6f92;
    margin-bottom: 60px;
    width: 760px;
    height: 760px;
    position: relative;
}

.flyer-headline {
    margin: 0 !important;
    color: white !important;
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 700;
}

.flyer-headline-logo-container {
    display: flex;
}

.flyer-headline-logo {
    padding: 4px;
}

.flyer-city-logo {
    height: 45px;
    margin-top: -1px;
    margin-left: 24px;
    margin-right: -10px;
}


.flyer-headline-container {
    background-color: black;
    color: white;
    padding: 16px;
    display: flex;
    justify-content: space-between;
}

.flyer-event-item {
    padding: 4px 0 0 0 !important;
    display: flex;
    flex-direction: row;
}

.flyer-event-item.single {
    padding: 4px 0 !important;
}


.flyer-event-item-date {
    background-color: black;
    color: white;
    text-transform: uppercase;
    white-space: nowrap;
    align-self: center;
}

.flyer-event-item-left {
    flex: 50%;
    display: flex;
    flex-direction: column;
}

.flyer-event-item-right {
    display: flex;
    flex: 50%;
    margin-left: 4px;
    justify-content: center;

}


.flyer-event-item-left-header-month {
    background-color: black;
    color: white;
    padding: 12px;
    display: flex;
    text-transform: uppercase;
    font-size: 20px;
    height: 45%;
}

.flyer-event-item-left-header-week {
    background-color: black;
    color: white;
    padding: 12px;
    display: flex;
    text-transform: uppercase;
    font-size: 22px;
}

.flyer-event-item-left-title {
    color: white;
    margin-left: 10px;
    text-transform: none;
    align-self: center;

}

.flyer-event-item-left-content-week {
    padding: 12px 10px;
    color: black;
}

.flyer-event-item-left-content-month {
    padding: 0 10px;
    color: black;
    justify-content: center;
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 55%;
}


.flyer-event-item-right {
    background-color: black;
}


.flyer-event-item-time {
    font-size: 22px;
}


.flyer-event-item-categories {
    font-size: 18px;
    margin-top: 4px;
}


.flyer-event-item-subtext {
    font-size: 16px;
    margin-top: 8px;
    line-height: 1.3;
}


.flyer-event-item-subtext > p {
    color: black;
    max-height: 78px;
    overflow: hidden;
}

.flyer-event-item-image {
    display: flex;
    align-self: center;
    aspect-ratio: 1.70;
    object-fit: cover;
}

.flyer-event-item-placeholder {
    padding: 24px;
    aspect-ratio: 1.70;
    object-fit: fill;
}

.flyer-month-row {
    display: flex;
}

.flyer-month-column {
    flex: 50%;

}

.flyer-month-column:not(:first-child) {
    margin-left: 4px;
}

/* Dropdown */

.flyer-config-form {
    display: flex;
    flex-direction: column;
    background-color: var(--darker);
    border: 1px solid var(--light);
    padding: 24px;
    border-radius: 4px;
    width: 780px;
}

.flyer-config-form-date {
    margin-top: 8px !important;
}

.flyer-dropdown-container {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.flyer-dropdown-container > select {
    flex: 100%;
}

.flyer-event-item-date-day {
    padding-left: 2px;
}

.flyer-header-logo {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

.flyer-color-picker {
    padding: 0 !important;
    height: 50px;
}

.flyer-month-footer {
    background-color: black;
    font-size: 18px;
    padding: 16px;
    color: white;
    position: absolute;
    bottom: 0;
    width: 100%;
}


/* Flyer event list */

.flyer-event-list {
    margin: 8px 0;
    display: flex;
    flex-direction: column;

}

.flyer-event-list-item {
    display: flex;
    flex: 1;
    color: var(--light) !important;
    padding: 12px 0;
    justify-content: space-between;
    border-bottom: 1px solid gray;
}

.flyer-event-list-item-title {
    width: 60%;
}

/* Checkin */

.verification-outer-container {
    max-width:650px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 5px;
    border: 1px solid;
    padding: 16px;
}

.verification-event-headline {
    margin-top: 12px !important;
    text-align: center;
    margin-bottom: 24px !important;
}

.verification-event-date {
    text-align: center;
    margin-bottom: 4px;
    font-size: 14px;
}

.verification-event-code {
    font-family: monospace;
}

.verification-event-code-label{
    text-align: center;
    margin-bottom: 24px;
}

.verification-event-type-label{
    text-align: center;
    margin: 12px 0;
    font-size: 18px;
}

.verification-user-timestamp {
    text-align: center;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.validation-image-container {
    text-align: center;
    animation: fadeIn 3s;
    margin-bottom: 10px;
}

.validation-barcode-container {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

/* Ticket card (print/PDF view) - deliberately a light "physical ticket" look
   that overrides the site's dark theme defaults for this one component, kept
   in visual sync with the PDF generated in checkin.php. */
.verification-ticket-card {
    max-width: 420px;
    margin: 16px auto;
    background: #fff;
    border: 1.5px solid var(--dark);
    border-radius: 8px;
    overflow: hidden;
    color: #000;
}

.verification-ticket-header {
    background-color: var(--primary);
    padding: 14px 20px;
    text-align: center;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.verification-ticket-logo {
    width: 150px;
}

.verification-ticket-body {
    padding: 20px;
}

.verification-ticket-body .verification-event-headline {
    color: var(--primary) !important;
    text-align: left;
    font-size: 18px;
    margin: 0 0 4px !important;
}

.verification-ticket-body .verification-event-date {
    display: block;
    color: #666;
    text-align: left;
    font-size: 12px;
    margin-bottom: 28px;
}

.verification-ticket-row {
    margin-bottom: 8px;
    font-size: 13px;
    color: #000;
}

.verification-ticket-label {
    font-weight: bold;
}

.verification-ticket-footer {
    border-top: 1px solid #ccc;
    margin-top: 16px;
    padding-top: 10px;
    font-size: 10px;
    color: #888;
    line-height: 1.4;
}

.verification-print-button,
.verification-pdf-button {
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
    padding: 8px 16px;
    margin-bottom: 16px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none !important;
    cursor: pointer;
}

.verification-print-button {
    background-color: var(--primary);
}

.verification-pdf-button {
    background-color: var(--dark);
    color: white !important;
    margin-left: 8px;
}

/* print view for ticket */
@media print {
    .verification-print-button,
    .verification-pdf-button {
        display: none;
    }

    .verification-container {
        color: black;
    }
}

/* Hide edit button for checkin */
@media only screen and (max-width: 600px) {
    .verification-outer-container > p > .post-edit-link {
        display: none;
    }
}

/* VVK */

.vvk-attendee-headline {
    font-size: 20px;
    color: var(--primary);
    margin-left: 4px;

}

.vvk-attendee-summary {
    padding: 12px 0;
    cursor: pointer;
}

.vvk-attendee-item {
    color: var(--light);
    padding: 2px;
}

.vvk-attendee {
    margin: 12px 0;
}

.vvk-table-scroll {
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

/* overflow-x:auto nur als Sicherheitsnetz für schmale Bildschirme (Breakpoint wie die übrigen
   Mobile-Anpassungen dieser Seite). Randnotiz: laut CSS-Spec bekommt ein Element mit
   "overflow-x: auto" automatisch auch "overflow-y: auto" statt "visible", auch wenn Letzteres
   nirgends gesetzt wird - das schwebende Aktionen-Dropdown-Menü (.vvk-actions-menu, weiterhin
   "position: absolute" wie im Desktop-Modus, siehe dort) könnte dadurch theoretisch bei Zeilen ganz
   am unteren Tabellenrand vom scrollenden Container mit abgeschnitten werden. Bewusst in Kauf
   genommen statt z.B. auf "position: static" umzuschalten, da Letzteres die Tabellenspalte beim
   Öffnen auf die Menü-Breite aufweiten und so das gesamte Tabellen-Layout verschieben würde - dieses
   Layout-Verschieben wiegt schwerer als der seltene Clipping-Fall. */
@media only screen and (max-width: 600px) {
    .vvk-table-scroll {
        overflow-x: auto;
    }
}

.vvk-attendee-item-name {
    width: 30%;
}

.vvk-attendee th {
    color: var(--light);
    font-weight: bold;
}

.vvk-attendee-summary::marker {
    font-size: 20px;
    color: var(--primary);
}

.vvk-attendee td {
    padding: 8px;
}

/* Bestellstatus-Badge ("Ampel": grün = abgeschlossen, gelb = ausstehend) - siehe
   renderOrderStatusBadge() in includes/vvk.php. */
.vvk-status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.vvk-status-badge--good {
    background: rgba(76, 175, 80, .15);
    color: #4caf50;
}

.vvk-status-badge--warn {
    background: rgba(255, 152, 0, .15);
    color: #ff9800;
}

.vvk-status-badge--neutral {
    background: rgba(181, 177, 174, .15);
    color: var(--light);
}

/* Nur fürs Druck-Layout gedacht (siehe @media print weiter unten) - auf dem Bildschirm reicht das
   Badge, der reine Text bliebe sonst doppelt sichtbar. */
.vvk-status-print {
    display: none;
}

.vvk-attendee-item-checkin {
    text-align: center;
}

/* Aktionen-Dropdown (ersetzt die früher einzeln nebeneinanderstehenden Icon-Buttons) - schwebendes
   Menü im Stil von MUIs <Menu>-Komponente (https://mui.com/material-ui/react-menu/#customization):
   abgerundete "Paper"-Karte mit Schatten, die über dem restlichen Inhalt schwebt, pro Eintrag Icon
   + Aktionsname nebeneinander, dezenter Hover-Hintergrund. Rein CSS-basiert über <details>/
   <summary> (kein JavaScript nötig zum Auf-/Zuklappen) - ":not([open]) .vvk-actions-menu" bräuchte
   es eigentlich nicht (das Menü ist ohnehin nur Kind-Inhalt von <details>, das der Browser nativ
   versteckt), aber <details> schließt sich anders als ein natives MUI-Menü NICHT automatisch bei
   Klick daneben.
   Positionierung: siehe .vvk-table-scroll weiter oben - das Menü ist bewusst absolut positioniert
   (schwebt "MUI-artig" über nachfolgenden Zeilen statt sie wegzuschieben), die Breakpoint dort
   sorgt dafür, dass der einzige scrollende Container in dem Bereich, in dem das Menü auftauchen
   kann, es nicht abschneidet. */
.vvk-actions-dropdown {
    position: relative;
    display: inline-block;
}

/* Backdrop hinter dem geöffneten Menü: <details>/<summary> allein kann sich per CSS NICHT
   schließen, wenn irgendwo anders hingeklickt wird (anders als z.B. ein natives <dialog> mit
   ::backdrop) - das eigentliche Schließen übernimmt ein kleines, delegiertes Klick-Listener-Script
   (siehe vvk_handler_function() in includes/vvk.php), das jedes offene .vvk-actions-dropdown
   schließt, sobald der Klick außerhalb davon landet. Dieses ::before hier ist nur die optische
   Seite davon: ein fixes, vollflächiges Overlay HINTER dem Menü (position:fixed wie
   .vvk-actions-menu im Mobile-Breakpoint, siehe dort - dadurch ebenfalls kein Einfluss auf das
   Tabellen-Layout), das den Rest der Seite abdunkelt und so klarmacht, dass ein Klick daneben das
   Menü schließt. */
.vvk-actions-dropdown[open]::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 20;
    background-color: rgba(0, 0, 0, .4);
}

.vvk-link-container .vvk-actions-dropdown {
    margin-top: 16px;
}

.vvk-actions-summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 30px 6px 12px;
    background-color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.vvk-actions-summary::-webkit-details-marker { display: none; }
.vvk-actions-summary::marker { display: none; }

.vvk-actions-dropdown[open] > .vvk-actions-summary {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 7l5-5 5 5' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.vvk-actions-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 190px;
    padding: 6px;
    background-color: var(--darker);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    /* Elevation à la MUI-Paper, statt eines schlichten 1px-Rahmens. */
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .3), 0 8px 10px 1px rgba(0, 0, 0, .22), 0 3px 14px 2px rgba(0, 0, 0, .18);
}

/* Modifier für Trigger, bei denen rechtsbündig geöffnet werden soll (z.B. letzte Tabellenspalte) -
   sonst würde das Menü über den rechten Rand hinaus aufklappen. */
.vvk-actions-dropdown--align-right .vvk-actions-menu {
    left: auto;
    right: 0;
}

.vvk-actions-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 5px;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

.vvk-actions-item:hover {
    background-color: rgba(252, 127, 3, .15);
}

/* .entry-content a { color: var(--primary) !important; } (siehe weiter oben in dieser Datei)
   überschreibt sonst die weiße Schrift der Menü-Einträge, weil sie dieselbe Spezifität
   (Klasse + Element) hat und ebenfalls !important nutzt - bei gleicher Spezifität gewinnt
   normalerweise die zuletzt im Stylesheet stehende Regel, was fragil wäre, sobald diese Datei
   umsortiert wird. Der zusätzliche Vorfahren-Selektor ".vvk-actions-menu" macht diese Regel hier
   dauerhaft spezifischer, unabhängig von der Reihenfolge. */
.vvk-actions-menu a.vvk-actions-item {
    color: #fff !important;
}

.vvk-actions-item img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Trennstrich zwischen gruppierten Menü-Einträgen (nur bei renderActionsDropdown(..., sort:false)
   relevant, siehe includes/vvk.php). */
.vvk-actions-divider {
    height: 1px;
    margin: 4px 6px;
    background-color: rgba(255, 255, 255, .1);
}

.vvk-link-container {
    padding: 12px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--dark);
    border-radius: 5px;
    background-color: var(--dark);
}

.vvk-link-container h5 {
    margin: 0 !important;
}


@media print {

    .vvk-link-container {
        display: none;
    }

    .vvk-attendee th {
        color: black;
        font-weight: bold;
    }

    .vvk-attendee td {
        color: black;
        padding: 8px;
    }

    .vvk-info-container {
        color: black !important;
        border: 1px solid black !important;
        background-color: white !important;
    }

    .vvk-details:not([open]) {
        display: none;
    }

    .vvk-info-container span p {
        color: black !important;
    }

    .vvk-attendee-summary::marker {
        font-size: 0;
    }

    .vvk-th-desktop, .vvk-td-desktop {
        display: none;
    }

    .vvk-th-digital {
        display: none;
    }

    .vvk-config-form {
        display: none !important;
    }

    /* Im Druck stattdessen den reinen Status-Text zeigen - Hintergrundfarben (Badge) kommen beim
       Drucken oft nicht mit bzw. sind dort nicht gewünscht. */
    .vvk-status-badge {
        display: none;
    }

    .vvk-status-print {
        display: inline;
        color: black;
    }
}

.vvk-info-container {
    margin-top: 10px;
    color: var(--light);
    padding: 20px;
    border: 1px solid var(--dark);
    border-radius: 5px;
    background-color: var(--dark);
}

.vvk-info-container h5 {
    margin-top: 0 !important;
}

.vvk-info-overview-container {
    display: flex;
    justify-content: space-between;
}

@media only screen and (max-width: 600px) {
    .vvk-info-overview-container {
        flex-direction: column;
    }

    .vvk-table-info {
        margin: 4px !important;
    }

    .vvk-purchaser-name {
        display: none;
    }

    /* Das Aktionen-Dropdown (.vvk-th-desktop/.vvk-td-desktop - einzige Nutzer dieser beiden
       Klassen, siehe includes/vvk.php) soll jetzt auch auf schmalen Bildschirmen sichtbar sein,
       daher hier NICHT mehr in der display:none-Liste. Für .vvk-actions-menu selbst gibt es hier
       bewusst KEINE Mobile-Sonderregel mehr: Es bleibt "position: absolute" wie im Desktop-Modus und
       klappt direkt unter dem Button auf, statt (wie zuvor) auf "position: static" umzuschalten -
       das hätte die Tabellenspalte beim Öffnen auf die Menü-Breite aufgeweitet und so das gesamte
       Tabellen-Layout verschoben. Die Aktionen-Spalte in der Teilnehmer-Tabelle nutzt bereits
       renderActionsDropdown(..., 'right') (siehe includes/vvk.php), wodurch der rechte Rand des
       Menüs mit dem rechten Rand des Buttons abschließt statt über den rechten Rand hinauszuragen -
       exakt wie im Desktop-Modus. */
}

vvk-attendee-summary {
    font-size: 0;
}


.vvk-table-info {
    margin-top: 12px;
    color: var(--light);
}

.vvk-td-desktop > .vvk-icon-container {
    margin-right: 8px;
}

.vvk-config-form {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

@media only screen and (min-width: 480px) {
    .vvk-config-form {
        width: 50%;
    }
}

.search-content-date {
    margin-bottom: 24px;
    font-size: 16px;
    font-weight: bold;
    color: var(--light);
    text-transform: uppercase;
}

/* search results customization */
.search-results > .big-wrapper > .section-inner > .content > .posts > .post-preview > .post-header {
    display: flex;
    flex-direction: column-reverse;
    margin-top: 16px;
    gap: 12px;
}

.search-results > .big-wrapper > .section-inner > .content > .posts > .post-preview > .post-header > .featured-media {
    margin-bottom: 0;
}


.bfa-foto-credit {
    font-size: 0.75rem;
    color: var(--light);
    margin-bottom: 1rem;
}


/* ── Veranstalter Upload Form ─────────────────────────────────────────────── */

.bfa-upload-form {
    max-width: 640px;
    color: var(--lighter);
}
.bfa-upload-form .bfu-event-card {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    border-left: 4px solid var(--primary);
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 4px;
}
.bfa-upload-form .bfu-event-card h3 { font-size: 16px; margin-top: 0; margin-bottom: 3px; color: var(--lighter); }
.bfa-upload-form .bfu-event-card p  { font-size: 13px; color: var(--light); margin: 0; }
.bfa-upload-form .bfu-alert { padding: 12px 16px; border-radius: 6px; margin-bottom: 18px; font-size: 14px; }
.bfa-upload-form .bfu-alert p { margin: 0; }
.bfa-upload-form .bfu-alert.success { background: #1a4d2e; border: 1px solid #4ade80; color: #bbf7d0; }
.bfa-upload-form .bfu-alert.warning { background: #fefce8; border: 1px solid #eab308; color: #854d0e; }
.bfa-upload-form .bfu-alert.error   { background: #fff3e0; border: 1px solid var(--primary); color: #7a3a00; }
.bfa-upload-form .bfu-section {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--light);
    padding-bottom: 6px;
    border-bottom: 2px solid var(--primary);
    margin-bottom: 4px;
}
.bfa-upload-form .bfu-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.bfa-upload-form .bfu-field label  { font-size: 13px; font-weight: 600; color: var(--lighter); }
.bfa-upload-form .bfu-field label .req { color: var(--primary); }
.bfa-upload-form .bfu-field small  { font-size: 12px; color: var(--light); }
.bfa-upload-form .bfu-field input[type="text"],
.bfa-upload-form .bfu-field input[type="time"],
.bfa-upload-form .bfu-field textarea {
    border: 1px solid #d1d5db;
    border-radius: 5px;
    padding: 9px 12px;
    font-size: 15px;
    width: 100%;
    color: var(--dark);
    background: #fff;
    transition: border-color .15s;
}
.bfa-upload-form .bfu-field input:focus,
.bfa-upload-form .bfu-field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}
.bfa-upload-form .bfu-field textarea { min-height: 100px; resize: vertical; line-height: 1.5; }
.bfa-upload-form .bfu-img-preview { max-width: 160px; border-radius: 4px; margin-bottom: 4px; display: block; }
.bfa-upload-form .bfu-time-wrap { display: flex; align-items: center; gap: 4px; }
.bfa-upload-form .bfu-time-wrap select {
    border: 1px solid #d1d5db;
    border-radius: 5px;
    padding: 9px 8px;
    font-size: 15px;
    color: var(--dark);
    background: #fff;
    cursor: pointer;
}
.bfa-upload-form .bfu-time-wrap select:focus { outline: none; border-color: var(--primary); }
.bfa-upload-form .bfu-time-wrap-sep { font-weight: 700; color: var(--light); }
.bfa-upload-form .bfu-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bfa-upload-form .bfu-genre-list { display: flex; flex-wrap: wrap; gap: 8px; }
.bfa-upload-form .bfu-genre-list label {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--lighter);
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 5px 11px;
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
    color: var(--dark);
}
.bfa-upload-form .bfu-genre-list label:has(input:checked) {
    background: color-mix(in srgb, var(--primary) 15%, white);
    border-color: var(--primary);
    color: var(--darker);
    font-weight: 600;
}
.bfa-upload-form .bfu-hp { display: none; visibility: hidden; }
.bfa-upload-form .bfu-submit,
.bfa-upload-form .bfu-submit:visited {
    display: inline-block;
    background: var(--primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    transition: filter .15s;
}
.bfa-upload-form .bfu-submit:hover { filter: brightness(1.1); background: var(--primary) !important; }
@media (max-width: 480px) {
    .bfa-upload-form .bfu-row-2 { grid-template-columns: 1fr; }
}
.bfa-upload-form .bfu-file-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bfa-upload-form .bfu-field .bfu-file-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--lighter);
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 7px 14px;
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
    color: var(--dark) !important;
    transition: border-color .15s, background .15s;
}
.bfa-upload-form .bfu-field .bfu-file-label:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, white); }
.bfa-upload-form .bfu-file-input { display: none; }
.bfa-upload-form .bfu-file-name { font-size: 13px; color: var(--light); font-style: italic; }
.bfa-upload-form .bfu-spinner {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 14px;
    color: var(--light);
}
.bfa-upload-form .bfu-spinner.active { display: flex; }
.bfa-upload-form .bfu-spinner::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border: 3px solid color-mix(in srgb, var(--primary) 30%, transparent);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: bfu-spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes bfu-spin { to { transform: rotate(360deg); } }

/* ── Veranstaltungstext HTML-Editor ─────────────────────────────────────── */
.bfa-upload-form .bfu-editor { border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden; }
.bfa-upload-form .bfu-editor-toolbar {
    background: #f9fafb; border-bottom: 1px solid #d1d5db;
    padding: 5px 8px; display: flex; gap: 4px; flex-wrap: wrap;
}
.bfa-upload-form .bfu-tb-btn {
    background: #fff; border: 1px solid #d1d5db; border-radius: 4px;
    padding: 4px 9px; font-size: 13px; cursor: pointer; color: var(--darker); line-height: 1.4;
    height: 28px; display: inline-flex; align-items: center;
}
.bfa-upload-form .bfu-tb-btn:hover { background: #f3f4f6; border-color: var(--primary); }
.bfa-upload-form .bfu-editor-content {
    min-height: 120px; padding: 10px 13px;
    font-size: 14px; line-height: 1.6; outline: none;
    color: var(--dark); background: #fff;
    cursor: text; position: relative;
    resize: vertical; overflow: auto;
}
.bfa-upload-form .bfu-editor-toolbar .bfu-tb-sep {
    width: 1px; background: #d1d5db; margin: 2px 2px; align-self: stretch; flex-shrink: 0;
}
.bfa-upload-form .bfu-tb-select {
    background: #fff; border: 1px solid #d1d5db; border-radius: 4px;
    padding: 3px 6px; font-size: 13px; cursor: pointer; color: var(--darker);
}
.bfa-upload-form .bfu-tb-select:focus { outline: none; border-color: var(--primary); }
.bfa-upload-form .bfu-color-wrap { position: relative; display: inline-block; }
.bfa-upload-form .bfu-color-panel {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 200;
    background: #fff; border: 1px solid #d1d5db; border-radius: 6px;
    padding: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.12); min-width: 160px;
}
.bfa-upload-form .bfu-color-swatches {
    display: grid; grid-template-columns: repeat(6, 22px); gap: 5px; margin-bottom: 10px;
}
.bfa-upload-form .bfu-swatch {
    width: 22px; height: 22px; border-radius: 3px; border: 1px solid rgba(0,0,0,.15);
    cursor: pointer; padding: 0;
}
.bfa-upload-form .bfu-swatch:hover { transform: scale(1.2); border-color: var(--darker); }
.bfa-upload-form .bfu-color-custom-row {
    display: flex; align-items: center; gap: 8px;
    padding-top: 8px; border-top: 1px solid #e5e7eb;
    font-size: 12px; color: var(--darker);
}
.bfa-upload-form .bfu-color-custom-row input[type="color"] {
    width: 28px; height: 28px; border: 1px solid #d1d5db; border-radius: 3px;
    padding: 1px; cursor: pointer; background: none;
}
/* Eingabe-Modal (YouTube / Embed) */
.bfa-upload-form .bfu-input-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9999;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.bfa-upload-form .bfu-input-modal-inner {
    background: #fff; border-radius: 8px; width: 100%; max-width: 480px;
    display: flex; flex-direction: column; overflow: hidden;
}
.bfa-upload-form .bfu-input-modal-body { padding: 16px 16px 8px; display: flex; flex-direction: column; gap: 6px; }
.bfa-upload-form .bfu-input-modal-field {
    width: 100%; border: 1px solid #d1d5db; border-radius: 5px;
    padding: 9px 12px; font-size: 14px; line-height: 1.5; resize: vertical;
    font-family: monospace; color: var(--darker);
}
.bfa-upload-form .bfu-input-modal-field:focus { outline: none; border-color: var(--primary); }
.bfa-upload-form .bfu-input-modal-field.bfu-input-error { border-color: #e53e3e; }
.bfa-upload-form .bfu-input-modal-footer {
    display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
}
.bfa-upload-form .bfu-input-modal-btn {
    border: none; border-radius: 5px; padding: 8px 18px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.bfa-upload-form .bfu-input-modal-btn--cancel { background: #f3f4f6; color: var(--darker); }
.bfa-upload-form .bfu-input-modal-btn--cancel:hover { background: #e5e7eb; }
.bfa-upload-form .bfu-input-modal-btn--insert { background: var(--primary); color: #fff; }
.bfa-upload-form .bfu-input-modal-btn--insert:hover { filter: brightness(1.08); }
/* Vorschau-Modal */
.bfa-upload-form .bfu-preview-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9999;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.bfa-upload-form .bfu-preview-inner {
    background: #fff; border-radius: 8px; max-width: 700px; width: 100%;
    max-height: 80vh; display: flex; flex-direction: column; overflow: hidden;
}
.bfa-upload-form .bfu-preview-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; border-bottom: 1px solid #e5e7eb;
    color: var(--darker);
}
.bfa-upload-form .bfu-preview-close {
    background: none; border: none; font-size: 22px; cursor: pointer; color: #6b7280; line-height: 1;
}
.bfa-upload-form .bfu-preview-close:hover { color: #111; }
.bfa-upload-form .bfu-preview-content {
    padding: 16px 20px; overflow-y: auto;
    font-size: 15px; line-height: 1.7; color: var(--darker);
}
.bfa-upload-form .bfu-preview-content h1,
.bfa-upload-form .bfu-editor-content h1  { font-size: 24px; margin: 14px 0 6px; color: var(--primary); }
.bfa-upload-form .bfu-preview-content h2,
.bfa-upload-form .bfu-editor-content h2  { font-size: 20px; margin: 12px 0 6px; color: var(--primary); }
.bfa-upload-form .bfu-preview-content h3,
.bfa-upload-form .bfu-editor-content h3  { font-size: 17px; margin: 10px 0 5px; color: var(--primary); }
.bfa-upload-form .bfu-preview-content h4,
.bfa-upload-form .bfu-editor-content h4  { font-size: 15px; margin: 8px 0 4px;  color: var(--primary); }
.bfa-upload-form .bfu-preview-content h5,
.bfa-upload-form .bfu-editor-content h5  { font-size: 13px; margin: 6px 0 3px;  color: var(--primary); }
.bfa-upload-form .bfu-preview-content ul,
.bfa-upload-form .bfu-preview-content ol { padding-left: 1.4em; margin: 6px 0; }
.bfa-upload-form .bfu-preview-content iframe { max-width: 100%; }
.bfa-upload-form .bfu-editor-content:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); }
.bfa-upload-form .bfu-source-editor {
    width: 100%; min-height: 120px; padding: 10px 13px;
    font-family: monospace; font-size: 13px; line-height: 1.6;
    color: var(--darker); background: #f9fafb;
    border: none; outline: none; resize: vertical; overflow: auto;
}
.bfa-upload-form .bfu-editor-content ul,
.bfa-upload-form .bfu-editor-content ol { padding-left: 1.4em; margin: 6px 0; }
.bfa-upload-form .bfu-editor-content a,
.bfa-upload-form .bfu-preview-content a { color: var(--primary); text-decoration: underline; }

/* Event List Shortcode */

.event-list-wrapper {
    font-family: sans-serif;
    color: var(--light);
}

/* Filter bar */
.event-list-filter-form {
    background: var(--dark);
    border: 1px solid rgba(255,255,255,.08);
    padding: 20px 20px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.event-list-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    margin-bottom: 14px;
}

.event-list-filters label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--light);
}

.event-list-filters input[type="date"],
.event-list-filters select {
    padding: 8px 10px;
    background: var(--darker);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 5px;
    font-size: 14px;
    color: var(--lighter);
    min-width: 150px;
    transition: border-color .15s;
}

.event-list-filters select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b5b1ae' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* Multiselect dropdown */
.el-multiselect-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 56px;
}

.el-multiselect-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--light);
}

.el-multiselect {
    position: relative;
    min-width: 180px;
    margin: 0;
    padding: 0;
    display: block;
}

.el-multiselect-summary {
    list-style: none;
    padding: 8px 36px 8px 10px;
    background: var(--darker);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 5px;
    font-size: 14px;
    color: #fff !important;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b5b1ae' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color .15s;
}

.el-multiselect-summary::-webkit-details-marker { display: none; }
.el-multiselect-summary::marker { display: none; }

.el-multiselect[open] .el-multiselect-summary {
    border-color: var(--primary);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 7l5-5 5 5' stroke='%23b5b1ae' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.el-multiselect-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--darker);
    border: 1px solid var(--primary);
    border-top: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: 100;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px 0;
}

.el-multiselect-option {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    transition: background .1s;
}

.el-multiselect-option:hover {
    background: rgba(252,127,3,.12);
    color: var(--lighter);
}

.el-multiselect-option input[type="checkbox"] {
    accent-color: var(--primary);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    cursor: pointer;
}

.el-multiselect[data-selected] .el-multiselect-summary {
    color: var(--primary);
}

.el-multiselect-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99;
}

.el-multiselect-backdrop--active {
    display: block;
}

.el-multiselect-dropdown {
    z-index: 100;
}

.event-list-filters input[type="date"] {
    color-scheme: dark;
}

.event-list-filters input[type="date"]:focus,
.event-list-filters select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Actions */
.event-list-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.event-list-actions button {
    padding: 0 18px;
    height: 36px;
    line-height: 36px;
    border: 1px solid transparent;
    box-sizing: border-box;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    transition: filter .15s;
    display: inline-flex;
    align-items: center;
}

.event-list-actions button:hover {
    filter: brightness(1.12);
}

.event-list-actions button[name="event_list_filter"] {
    background: var(--primary);
    color: #fff;
}

.event-list-actions button[name="event_list_csv_export"] {
    background: var(--darker);
    color: var(--lighter);
    border: 1px solid rgba(255,255,255,.15);
}

.event-list-actions button[name="event_list_csv_export"]:hover {
    border-color: var(--primary);
    color: var(--primary);
    filter: none;
}

/* Count badge */
.event-list-count {
    font-size: 12px;
    color: var(--light);
    margin-bottom: 10px;
    padding: 4px 10px;
    background: var(--darker);
    border-radius: 20px;
    display: inline-block;
    border: 1px solid rgba(255,255,255,.08);
}

/* Table */
.event-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: var(--darker);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.event-list-table thead tr {
    background: var(--primary);
}

.event-list-table th {
    color: #fff;
    padding: 10px 14px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.event-list-table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    color: var(--light);
    vertical-align: middle;
}

.event-list-table tbody tr:last-child td {
    border-bottom: none;
}

.event-list-table tbody tr:hover td {
    background: rgba(252,127,3,.07);
    color: var(--lighter);
}

.event-list-table a {
    color: var(--primary) !important;
    text-decoration: none;
    font-weight: 500;
}

.event-list-table a:hover {
    text-decoration: underline;
}

@media only screen and (max-width: 600px) {
    .event-list-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .event-list-filters input[type="date"],
    .event-list-filters select {
        width: 100%;
    }

    .event-list-table th:nth-child(3),
    .event-list-table td:nth-child(3) {
        display: none;
    }
}

.prospects-overview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: var(--darker);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.prospects-overview-table thead tr {
    background: var(--primary);
}

.prospects-overview-table th {
    color: #fff;
    padding: 10px 14px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.prospects-overview-table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    color: var(--light);
    vertical-align: middle;
}

.prospects-overview-table tbody tr:last-child td {
    border-bottom: none;
}

.prospects-overview-table tbody tr:hover td {
    background: rgba(252,127,3,.07);
    color: var(--lighter);
}

.prospects-overview-table a {
    color: var(--primary) !important;
    text-decoration: none;
    font-weight: 500;
}

.prospects-overview-table a:hover {
    text-decoration: underline;
}

/* Generische Link-Farbe innerhalb des gesamten Panels (Karten + Modals). Ersetzt die frühere,
   auf ".paypal-pending-orders-table" beschränkte Regel, seit die Tabelle durch Karten/Modals
   ersetzt wurde. */
.paypal-pending-orders-panel a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.paypal-pending-orders-panel a:hover {
    text-decoration: underline;
}

/* Button-Textfarbe unabhängig vom umgebenden Kontext (Tabellenzeile, Modal, Bestätigungsbox,
   ganz oben auf der Seite ...). Die Klasse wird absichtlich verdoppelt, um die Spezifität
   zuverlässig über die generische Linkfarben-Regel oben zu heben (0,2,0 schlägt 0,1,1), statt
   uns auf einen bestimmten Eltern-Container wie ".paypal-pending-orders-panel" zu verlassen -
   genau das hatte zuvor dazu geführt, dass Buttons außerhalb des Panels (z.B. eine lose oben
   ausgegebene Bestätigungsbox) orange statt weiße Schrift hatten. */
.paypal-pending-orders-button.paypal-pending-orders-button {
    color: #fff !important;
}

.paypal-pending-orders-recheck.paypal-pending-orders-recheck {
    color: var(--light) !important;
    opacity: .75;
}

.paypal-pending-orders-recheck.paypal-pending-orders-recheck:hover {
    opacity: 1;
}

.ppo-reminder-last-sent {
    display: inline-block;
    color: var(--light);
    opacity: .75;
    font-size: 12px;
    margin-bottom: 6px;
}

.paypal-pending-orders-notice {
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-weight: 500;
}

.paypal-pending-orders-notice--success {
    background: rgba(76,175,80,.15);
    color: #4caf50;
}

.paypal-pending-orders-notice--error {
    background: rgba(244,67,54,.15);
    color: #f44336;
}

/* Steckt immer im Detail-Modal (siehe bfa_render_order_modal()) - Hintergrund/Schatten kommen
   schon von ".ppo-modal-box", hier reicht Textfarbe + Abstand zu den Buttons darunter. */
.paypal-pending-orders-confirm {
    color: var(--light);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.paypal-pending-orders-confirm .paypal-pending-orders-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
}

/* "Info"-Hinweis, farblich an MUIs severity="info" angelehnt - gleiches Prinzip wie
   ".bank-transfer-checkout__hint" im Bank-Transfer-Plugin (getönte Fläche + Info-Icon statt
   einfachem Text). */
.paypal-pending-orders-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 16px;
    border-radius: 6px;
    background: rgba(2,136,209,.15);
    color: #64b5f6;
    font-size: 13px;
    line-height: 1.5;
}

.paypal-pending-orders-hint-icon {
    flex: 0 0 auto;
    color: #64b5f6;
    font-size: 18px;
    line-height: 1.4;
}

.paypal-pending-orders-button {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--primary);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    margin: 2px 0;
}

.paypal-pending-orders-button:hover {
    opacity: .85;
}

.paypal-pending-orders-button--danger {
    background: #b23c17;
}

/* MUI-artiger Hover: dunklere Variante der Grundfarbe statt nur Deckkraft. Klasse verdoppelt +
   !important aus demselben Grund wie bei ".paypal-pending-orders-button.paypal-pending-orders-button"
   oben: eine gleich spezifische ".button:hover"-Regel (Customizer-CSS, landet ganz am Ende von
   <head>) würde sonst per Quellreihenfolge gewinnen. */
.paypal-pending-orders-button--danger.paypal-pending-orders-button--danger:hover {
    background: #8e3012 !important;
    background: color-mix(in srgb, #b23c17 80%, black) !important;
    opacity: 1;
}

.paypal-pending-orders-button--confirm {
    background: #4caf50;
}

.paypal-pending-orders-button--confirm.paypal-pending-orders-button--confirm:hover {
    background: #3d8c40 !important;
    background: color-mix(in srgb, #4caf50 80%, black) !important;
    opacity: 1;
}

/* --- Panel-Rahmen: Eyebrow-Label, Titel und Zähler oberhalb der Tabelle --- */

.paypal-pending-orders-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.paypal-pending-orders-panel__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.paypal-pending-orders-panel__heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.paypal-pending-orders-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--primary);
}

.paypal-pending-orders-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--lighter);
}

.paypal-pending-orders-filter-clear {
    display: inline-block;
    margin-top: 2px;
    font-size: 12px;
    opacity: .75;
}

.paypal-pending-orders-filter-clear:hover {
    opacity: 1;
}

.paypal-pending-orders-order-filter {
    display: flex;
    align-items: center;
    gap: 6px;
}

.paypal-pending-orders-order-filter input[type="number"] {
    width: 150px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.15);
    background: var(--darker);
    color: var(--lighter);
    font-size: 13px;
}

.paypal-pending-orders-order-filter input[type="number"]::placeholder {
    color: var(--light);
    opacity: .7;
}

.paypal-pending-orders-count {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(252,127,3,.15);
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.paypal-pending-orders-empty {
    padding: 18px;
    border-radius: 8px;
    background: var(--darker);
    color: var(--light);
    text-align: center;
}

/* --- ID-Chip: Order-Nummern wie im Beleg/Terminal-Stil, statt als Fließtext --- */

.paypal-id-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    background: rgba(255,255,255,.08);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--lighter);
}

/* --- Status-Badge: Ampel-Logik für den zuletzt gecheckten PayPal-Status --- */

.paypal-status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.paypal-status-badge--good {
    background: rgba(76,175,80,.15);
    color: #4caf50;
}

.paypal-status-badge--bad {
    background: rgba(244,67,54,.15);
    color: #f44336;
}

.paypal-status-badge--warn {
    background: rgba(255,152,0,.15);
    color: #ff9800;
}

.paypal-duplicate-hint {
    display: inline-block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #ff9800;
}

/* --- Gateway-Badge: auffällige Kennzeichnung "PayPal" vs. "Banküberweisung" pro Zeile, gleiches
   Pill-Muster wie die Status-Badges oben, aber mit eigener Farbwelt pro Gateway. --- */

.ppo-gateway-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* PayPal-Markenblau. */
.ppo-gateway-badge--paypal {
    background: rgba(0,112,186,.18);
    color: #4da3e0;
}

/* Eigener Ton (Lila) für Banküberweisung, bewusst klar unterscheidbar von PayPal-Blau und den
   grün/rot/orange Status-Badges. */
.ppo-gateway-badge--banktransfer {
    background: rgba(156,39,176,.18);
    color: #ce93d8;
}

/* Türkis/Teal für Stripe - bewusst NICHT lila/blau-violett (zu ähnlich zu Banküberweisung oben),
   klar unterscheidbar von PayPal-Blau, Banküberweisung-Lila und den grün/rot/orange Status-Badges. */
.ppo-gateway-badge--stripe {
    background: rgba(0,150,136,.18);
    color: #4db6ac;
}

/* Neutraler Fallback-Ton für einen unbekannten/neuen Gateway-Slug, siehe
   bfa_render_gateway_badge_html() - bewusst grau statt einer der drei bekannten Farben. */
.ppo-gateway-badge--unknown {
    background: rgba(158,158,158,.18);
    color: #bdbdbd;
}

/* ==========================================================================
   Tabelle: echtes <table>-Markup, damit der Browser die Spaltenausrichtung übernimmt
   ==========================================================================
   table-layout:fixed + feste Spaltenbreiten verhindern, dass die Event-Spalte die Tabelle
   aufbläht; word-break/overflow-wrap sorgt dafür, dass lange Inhalte (Event-Titel, Namen)
   innerhalb ihrer Spalte umbrechen statt abgeschnitten zu werden oder die Tabelle zu sprengen.
   Zeilen dürfen dadurch beliebig mehrzeilig sein. Der Scroll-Container ist das Sicherheitsnetz
   für sehr schmale Handy-Bildschirme.
   ========================================================================== */

.paypal-pending-orders-scroll {
    overflow-x: auto;
}

.paypal-pending-orders-table {
    width: 100%;
    min-width: 480px;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 14px;
    background: var(--darker);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.paypal-pending-orders-table thead tr {
    background: var(--primary);
}

.paypal-pending-orders-table th {
    color: #fff;
    padding: 10px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.paypal-pending-orders-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    color: var(--light);
    vertical-align: top;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.paypal-pending-orders-table tbody tr:last-child td {
    border-bottom: none;
}

.paypal-pending-orders-table tbody tr:hover td {
    background: rgba(252,127,3,.07);
    color: var(--lighter);
}

/* Feste Breiten je Spalte (table-layout:fixed verteilt sonst gleichmäßig) - Käufer bekommt den
   verbleibenden Platz. */
.ppo-col-order {
    width: 18%;
}

.ppo-col-event {
    width: 32%;
}

.ppo-col-amount {
    width: 12%;
}

.ppo-col-details {
    width: 12%;
}

.ppo-details-link {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* Farbiger Akzentstreifen links in der ersten Zelle je Zeile, passend zum zuletzt gecheckten
   PayPal-Status (grau, solange noch nicht geprüft wurde). */
.paypal-pending-orders-row td:first-child {
    box-shadow: inset 4px 0 0 rgba(255,255,255,.12);
}

.paypal-pending-orders-row--good td:first-child {
    box-shadow: inset 4px 0 0 #4caf50;
}

.paypal-pending-orders-row--bad td:first-child {
    box-shadow: inset 4px 0 0 #f44336;
}

.paypal-pending-orders-row--warn td:first-child {
    box-shadow: inset 4px 0 0 #ff9800;
}

/* ==========================================================================
   Detail-Modal - reines CSS über :target, kein JavaScript nötig.
   ========================================================================== */

.ppo-modal-anchor {
    display: block;
    position: relative;
}

.ppo-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    padding: 20px;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

.ppo-modal:target {
    display: flex;
}

.ppo-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
}

.ppo-modal-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    margin-top: 0;
    transform: translateY(10%);
    background: var(--darker);
    border-radius: 12px;
    padding: 24px 20px 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,.4);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ppo-modal-title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--lighter);
}

.ppo-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 16px;
    line-height: 1;
    color: var(--light) !important;
    opacity: .7;
}

.ppo-modal-close:hover {
    opacity: 1;
    text-decoration: none;
}

/* Label:Wert-Zeilen innerhalb des Modals (siehe bfa_render_card_field()). Stapelt bei Bedarf
   automatisch mehrzeilig, wird nie auf eine Zeile gezwungen. */
.ppo-card__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 12px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.ppo-card__row:last-of-type {
    border-bottom: none;
}

.ppo-card__label {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--primary);
}

.ppo-card__value {
    flex: 1 1 auto;
    min-width: 60%;
    text-align: right;
    color: var(--light);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.ppo-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.ppo-modal-actions .paypal-pending-orders-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
}

/* Abstand zwischen "Tickets kaufen"-Button und der nachfolgenden Sektion (relevant seitdem alle
   Zahlungs-Gateways gleichzeitig sichtbar sind, siehe includes/checkout-show-all-gateways.php).
   Schriftgröße 16px angeglichen an den Banküberweisung-Button (eigenes Modal-Widget des
   Banktransfer-Plugins) - dort bewusst gleichgezogen für einheitliche Optik über beide
   Zahlungswege hinweg.
   !important nötig: Der Button trägt zusätzlich die Plugin-Klasse .tribe-common-c-btn, die ebenfalls
   font-size (über --tec-font-size-2) setzt - gleiche Spezifität (je eine einzelne Klasse), ohne
   !important gewinnt je nach Lade-Reihenfolge mal die eine, mal die andere Regel. */
.tribe-tickets__commerce-checkout-form-submit-button {
    margin-bottom: 32px;
    font-size: 16px !important;
}

/* Toggle-Button + Pfeil in Primary-Orange - gilt als Fallback-Optik, falls
   includes/checkout-show-all-gateways.php aus irgendeinem Grund nicht greift (nur 1 Gateway aktiv,
   oder das JS findet das Toggler-Objekt nicht) und der normale Auf-/Zuklapp-Button des Plugins
   zum Einsatz kommt. */
.tribe-tickets__commerce-checkout-gateway-toggle-button,
.tribe-common .tribe-tickets__commerce-checkout-gateway-toggle-button,
.tribe-tickets__commerce-checkout-gateway-toggle--open .tribe-tickets__commerce-checkout-gateway-toggle-button,
.tribe-common .tribe-tickets__commerce-checkout-gateway-toggle--open .tribe-tickets__commerce-checkout-gateway-toggle-button {
    color: var(--primary) !important;
}

/* Pfeil nach unten (zugeklappt) */
.tribe-tickets__commerce-checkout-gateway-toggle-button:after,
.tribe-common .tribe-tickets__commerce-checkout-gateway-toggle-button:after {
    border-top-color: var(--primary) !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}

/* Pfeil nach oben (aufgeklappt) */
.tribe-tickets__commerce-checkout-gateway-toggle--open .tribe-tickets__commerce-checkout-gateway-toggle-button:after,
.tribe-common .tribe-tickets__commerce-checkout-gateway-toggle--open .tribe-tickets__commerce-checkout-gateway-toggle-button:after {
    border-bottom-color: var(--primary) !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}

/* "Zusätzliche Zahlungsoptionen": als reine, nicht klickbare Überschrift statt Toggle-Button -
   Klasse wird per JS gesetzt, siehe includes/checkout-show-all-gateways.php. Erbt die Orange-
   Textfarbe von oben, unterdrückt aber Pfeil und Klick-Cursor. */
.bfa-checkout-static-heading {
    cursor: default !important;
    pointer-events: none;
    font-size: 20px !important;
}

.bfa-checkout-static-heading:after {
    display: none !important;
}

/* "Newsletter Vorlage herunterladen"-Button auf der Monatsflyer-Seite (includes/monthly-flyer.php)
   in Primary-Orange mit weißer Schrift, statt dem generischen grauen WP-".button"-Stil.
   Klasse doppelt geschrieben (höhere Spezifität), um ".entry-content a { color: var(--primary)
   !important; }" weiter oben in dieser Datei zuverlässig zu übersteuern - gleiches Prinzip wie bei
   .bank-transfer-checkout__button.bank-transfer-checkout__button. */
.flyer-newsletter-download-button.flyer-newsletter-download-button {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

.flyer-newsletter-download-button.flyer-newsletter-download-button:hover,
.flyer-newsletter-download-button.flyer-newsletter-download-button:focus {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    opacity: .9;
}

/* Erfolgsmeldung nach automatischem Speichern der Newsletter-Vorlage in MailPoet, siehe
   includes/newsletter-json-export.php - MUI severity="success"-Optik, gleiches Prinzip wie
   .paypal-pending-orders-hint (getönte Fläche + Icon statt einfachem Fließtext). */
.flyer-newsletter-export-success {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    padding: 10px 16px;
    border-radius: 6px;
    background: rgba(76,175,80,.15);
    color: #4caf50;
    font-size: 13px;
    line-height: 1.5;
}

.flyer-newsletter-export-success-icon {
    flex: 0 0 auto;
    color: #4caf50;
    font-size: 18px;
    line-height: 1.4;
}

/* Beide Download-Buttons (Newsletter-Vorlage + Flyer als Bild) nebeneinander in einer Zeile mit
   Abstand, statt jeweils in einem eigenen <p> untereinander. */
.flyer-download-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

/* MailPoet-Newsletter-Anmeldeformular: "Abonnieren"-Button auf Standard-Optik (Primary-Orange,
   weiße Schrift) statt MailPoets Default-Grau. !important nötig, da MailPoet Inline-Styles pro
   Formular direkt in den HTML-Attributen ausgibt (siehe der umgebende Container mit
   style="height:50px" - dessen erzwungene, zu große Höhe hier ebenfalls korrigiert wird). */
.mailpoet_submit {
    background: var(--primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    cursor: pointer;
    height: auto !important;
    padding: 12px 16px !important;
}

.mailpoet_submit:hover {
    opacity: .9;
}

.newsletter-submit-button {
    height: auto !important;
}

/* MailPoet-Newsletter-Anmeldeformular: E-Mail-Eingabefeld auf Standard-Optik gebracht - gleiches
   Muster wie .bfa-upload-form .bfu-field input[type="text"] (heller Rahmen, abgerundete Ecken,
   Orange-Fokus-Rahmen mit dezentem Glow). !important nötig, da MailPoet Inline-Styles direkt im
   Formular-HTML ausgibt. */
.mailpoet_text {
    border: 1px solid #d1d5db !important;
    border-radius: 5px !important;
    padding: 9px 12px !important;
    font-size: 15px !important;
    color: var(--dark) !important;
    background: #fff !important;
    transition: border-color .15s;
}

.mailpoet_text:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}
.mailpoet-change-email-info {
    display: none !important;
}
.mailpoet_field_description {
    display: none !important;
}
.mailpoet-manage-subscription-section-description {
    display: none !important;
    color: var(--light) !important;
}
.mailpoet_text_label {
    color: var(--light) !important;
}
.mailpoet_select_label {
    color: var(--light) !important;
}
.mailpoet-manage-subscription-lists {
    color: var(--light) !important;
}
.mailpoet-manage-subscription-lists-description {
    display: none !important;
}
.mailpoet-manage-subscription-choice-label {
    margin: 0 !important;
}
/* .mailpoet_paragraph ist zu allgemein (jedes Formularfeld nutzt sie) - deshalb hier
   gezielt über das data-parsley-group Attribut des Tracking-Consent-Checkbox-Feldes selektiert. */
.mailpoet_paragraph:has(input[data-parsley-group="custom_field_tracking_consent"]) {
    display: none !important;
}