@charset "UTF-8";
/*------------------------------------------------------------------
[Convention Schedule & Program Planner – WordPress Event Management Plugin Event Calendar Timetable Styles]

Project:        Convention Schedule & Program Planner
Version:        1.7.0
Description:    Styles for the main timetable grid view.

[Table of Contents]

0.  Root Variables
1.  Main Container
2.  Day Block (Card Wrapper)
3.  Date Header
4.  Scroll Wrapper
5.  Venue Row (Top Sticky)
6.  Grid Body & Layout
7.  Time Axis & Typography
8.  Floating Header (Sticky Layer)
9.  Event Tiles
9B. Gestapelte Kacheln (Stacked Tiles)
10. Action Icons Bar
11. Now Indicator
12. Scroll Navigation Arrows
13. Favorites Filter and Share Button
14. Empty State
15. Category Badge (Bubble - Namespaced)
16. TABS (Analog zum Hauptkalender)
17. Timetable Standalone Dropdown (Exakter 1:1 Klon aus ec-main.css)
18. imetable Spalten-Symmetrie (Flexbox & Sidebar Fix)
19. CANCELLED BADGE & TEXT (Abgesagt Status) - TIMETABLE
-------------------------------------------------------------------*/

/* =========================================
   0. ROOT VARIABLES
   ========================================= */
:root {
    --ec-hour-height: 160px;
    --ec-time-col-width: 60px;
    --ec-timetable-border: #d0d7de;
    --ec-indicator-line-height: 2px;
    --ec-now-indicator-color: #ff3b30;
    --ec-start-indicator-color: #16a34a;
    --ec-end-indicator-color: #ea580c;
    --ec-text-color: #333;
    --ec-icon-color: #555;
}

/* =========================================
   1. MAIN CONTAINER
   ========================================= */
html body .ec-event-calendar-app .ec-timetable-container {
    background: transparent;
    border: none;
    margin-bottom: 30px;
    position: relative;
    overflow: visible;
}

/* =========================================
   2. DAY BLOCK (Card Wrapper)
   ========================================= */
html body .ec-event-calendar-app .ec-timetable-day-block {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 60px;
    background: #fff;
    border: 1px solid var(--ec-border, #eee);
    border-radius: 12px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* =========================================
   4. SCROLL WRAPPER
   ========================================= */
html body .ec-event-calendar-app .ec-timetable-scroll-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: 11px;
}

/* =========================================
   5. VENUE ROW (Top Sticky)
   ========================================= */
html body .ec-event-calendar-app .ec-timetable-venue-row {
    display: flex;
    background: #fff;
    width: 100%;
    min-width: min-content;
    border-bottom: 1px solid var(--ec-border, #eee);
    position: relative;
    z-index: 5;
}

/* Obere linke Ecke fixieren */
html body .ec-event-calendar-app .ec-time-axis-spacer {
    width: var(--ec-time-col-width);
    flex-shrink: 0;
    background: #f9f9f9;
    border-right: 1px solid var(--ec-border, #eee);
    position: sticky;
    left: 0;
    z-index: 350;
    /* Muss höher als Events (200) sein */
    background: #f9f9f9;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
}

html body .ec-event-calendar-app .ec-timetable-venue-title {
    flex: 1;
    min-width: 220px;
    padding: 10px 38px 10px 14px;
    font-weight: 700;
    text-align: center;
    background-color: var(--v-bg, #f76b15);
    color: var(--v-fg, #fff);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    position: relative;
    box-sizing: border-box;
}

html body .ec-event-calendar-app .ec-timetable-venue-name {
    flex: 1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body .ec-event-calendar-app .ec-timetable-venue-map-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    max-width: 26px;
    padding: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    margin: 0;
    flex-shrink: 0;
    line-height: 1;
}

html body .ec-event-calendar-app .ec-timetable-venue-map-btn:hover {
    background: #ffffff;
    color: var(--v-bg, #f76b15);
    border-color: #ffffff;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
}

html body .ec-event-calendar-app .ec-timetable-venue-map-btn .ec-btn-svg {
    width: 14px;
    height: 14px;
    display: block;
    stroke: currentColor;
}

/* =========================================
   6. GRID BODY & LAYOUT
   ========================================= */
html body .ec-event-calendar-app .ec-timetable-body {
    display: flex;
    position: relative;
    min-width: min-content;
    width: 100%;
    background-color: #fff;
}

/* Linke Zeitleiste fixieren */
html body .ec-event-calendar-app .ec-timetable-time-axis {
    width: var(--ec-time-col-width);
    flex-shrink: 0;
    background: #f9f9f9;
    border-right: 1px solid var(--ec-border, #eee);
    position: sticky;
    left: 0;
    z-index: 300;
    /* Muss höher als Events (200) sein */
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
}

html body .ec-event-calendar-app .ec-timetable-grid-canvas {
    flex: 1;
    display: flex;
    position: relative;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='160' viewBox='0 0 8 160'%3E%3Cline x1='0' y1='0' x2='8' y2='0' stroke='%23d0d7de' stroke-width='2'/%3E%3Cline x1='0' y1='40' x2='4' y2='40' stroke='%23e6ebf0' stroke-width='1'/%3E%3Cline x1='0' y1='80' x2='4' y2='80' stroke='%23d0d7de' stroke-width='1'/%3E%3Cline x1='0' y1='120' x2='4' y2='120' stroke='%23e6ebf0' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 8px var(--ec-hour-height);
    background-repeat: repeat;
}

html body .ec-event-calendar-app .ec-timetable-venue-column {
    flex: 1;
    min-width: 220px;
    border-right: 1px solid var(--ec-timetable-border, #eee);
    position: relative;
}

/* =========================================
   7. TIME AXIS & TYPOGRAPHY
   ========================================= */
html body .ec-event-calendar-app .ec-time-label {
    position: absolute;
    width: 100%;
    text-align: center;
    transform: translateY(-50%);
    font-family: var(--ec-font-family-mono, monospace);
    letter-spacing: -0.5px;
    padding: 2px 0;
}

html body .ec-event-calendar-app .ec-time-label.ec-full-hour {
    font-size: 0.8rem;
    color: #000000;
    font-weight: 800;
    opacity: 1;
}

html body .ec-event-calendar-app .ec-time-label.ec-half-hour {
    font-size: 0.7rem;
    color: #999999;
    font-weight: 400;
    opacity: 0.7;
}

/* =========================================
   8. FLOATING HEADER (Sticky Layer)
   ========================================= */
html body .ec-timetable-floating-layer {
    /* Einzige Quelle fuer den Abstand von oben. Steht als Custom Property da,
       weil ec-timetable.js den Wert beim Rauszoomen gegenrechnen muss:
       CSS zoom skaliert auch top, sonst rutscht der Header nach oben. */
    --ec-float-top: 25px;
    position: fixed;
    top: var(--ec-float-top);
    z-index: 90;
    background: #fff;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.18);
    display: none;
    pointer-events: auto;
    border-radius: 12px;
    overflow: hidden;
}

body.admin-bar .ec-timetable-floating-layer {
    --ec-float-top: 47px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .ec-timetable-floating-layer {
        --ec-float-top: 61px;
    }
}

html body .ec-timetable-floating-layer .ec-floating-venue-wrapper {
    overflow: hidden;
    background: #fff;
    width: 100%;
}

html body .ec-timetable-floating-layer .ec-timetable-venue-row {
    border-bottom: 2px solid var(--ec-border, #eee);
    width: 100%;
}

/* =========================================
   9. EVENT TILES
   ========================================= */
html body .ec-event-calendar-app .ec-timetable-event {
    position: absolute;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    padding: 6px;
    z-index: 200;
    transition: box-shadow 0.2s ease, transform 0.1s, border-color 0.2s ease;
    border-left: 5px solid var(--ec-event-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

html body .ec-event-calendar-app .ec-timetable-event::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--ec-event-color);
    opacity: 0.08;
    pointer-events: none;
    z-index: -1;
}

html body .ec-event-calendar-app .ec-timetable-event:hover {
    z-index: 2000;
    background-color: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);

    border-color: var(--ec-primary);
    border-left-color: var(--ec-event-color);

    /* height/width/left: müssen !important behalten, da top/height/left/width
       per Inline-Style von ec-timetable.js gesetzt werden (siehe render-Funktion) —
       nur !important kann eine Inline-Style-Deklaration überschreiben. */
    height: auto !important;
    min-height: var(--orig-height, 140px);
    width: auto !important;
    min-width: 100%;
    max-width: 350px;
    left: 0 !important;
    overflow: visible;
    transform: scale(1.02);
}

/* =========================================
   9B. GESTAPELTE KACHELN (Stacked Tiles)
   Kurze Termine bekommen in ec-timetable.js (durationToPx) eine Mindesthoehe von
   90px. Liegen mehrere Termine im selben Raum dicht hintereinander, schiebt sich
   die naechste Kachel deshalb ueber die vorherige. Da beide dieselbe Venue-Farbe
   tragen, verschmelzen sie optisch zu einem Block.
   renderVenueColumn() setzt auf genau diese Kacheln .ec-is-stacked - nur sie
   werden hier nach oben abgegrenzt, freistehende Kacheln bleiben unveraendert.

   Staerke der Abgrenzung anpassen: border-top-Breite und/oder die zweite
   box-shadow-Ebene (Schlagschatten nach oben) aendern.
   ========================================= */
html body .ec-event-calendar-app .ec-timetable-event.ec-is-stacked {
    /* Farbige Trennlinie in der Venue-Farbe - passend zum linken Akzentbalken */
    border-top: 2px solid var(--ec-event-color);
    /* 1. Ebene: heller Saum, trennt die beiden gleichfarbigen Flaechen sauber.
       2. Ebene: weicher Schatten nach oben, hebt die Kachel sichtbar ab. */
    box-shadow:
        0 -1px 0 rgba(255, 255, 255, 0.9),
        0 -4px 10px -4px rgba(0, 0, 0, 0.35);
}

/* Beim Hover gilt wieder der normale Hover-Schatten. Ohne diese Regel wuerde
   der Stapel-Schatten gewinnen (hoehere Spezifitaet durch die Extra-Klasse). */
html body .ec-event-calendar-app .ec-timetable-event.ec-is-stacked:hover {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Abgesagte Termine: Trennlinie in Grau (--ec-event-color ist dort ueberschrieben),
   Schatten etwas zurueckgenommen, damit die Kachel blass bleibt. */
html body .ec-event-calendar-app .ec-timetable-event.ec-is-stacked.ec-is-cancelled {
    box-shadow:
        0 -1px 0 rgba(255, 255, 255, 0.9),
        0 -4px 10px -4px rgba(0, 0, 0, 0.22);
}

/* --- BILD-LOGIK für hide_image="true" (HOVER-ANZEIGE) --- */
/* Falls der Shortcode-Parameter aktiv ist, Bild im Normalzustand verstecken */
html body .ec-timetable-container[data-hide-image="true"] .ec-event-thumb-full,
html body .ec-timetable-container[data-hide-image="true"] .ec-timetable-badge-only-wrapper {
    display: none;
}

/* Beim Hover im hide_image Modus: Bild (inkl. Badge) einblenden */
html body .ec-timetable-container[data-hide-image="true"] .ec-timetable-event:hover .ec-event-thumb-full,
html body .ec-timetable-container[data-hide-image="true"] .ec-timetable-event:hover .ec-timetable-badge-only-wrapper {
    display: block;
    margin-bottom: 8px;
}

/* -------------------------------------------------------- */

html body .ec-event-calendar-app .ec-event-thumb-full {
    width: 100%;
    height: 65px;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    background-color: #f0f0f0;
    flex-shrink: 0;
    position: relative;
    /* NEU: Weiche Animation für die Höhenänderung */
    transition: height 0.3s ease;
}

/* Intelligente Bild-Vergrößerung beim Hover.
   Nutzt den leeren Raum (Originalhöhe minus Platz für Text/Icons), 
   vergrößert sich aber nie kleiner als 65px und maximal bis 180px. */
html body .ec-event-calendar-app .ec-timetable-event:hover .ec-event-thumb-full {
    height: clamp(65px, calc(var(--orig-height) - 95px), 180px);
}

/* Platzhalter falls kein Bild aber Kategorie existiert */
html body .ec-event-calendar-app .ec-timetable-badge-only-wrapper {
    position: relative;
    height: 15px;
    width: 100%;
}

html body .ec-event-calendar-app .ec-timetable-venue-column:last-child .ec-timetable-event:hover,
html body .ec-event-calendar-app .ec-timetable-venue-column:nth-last-child(2) .ec-timetable-event:hover {
    /* left: muss !important behalten, siehe Begründung oben (Inline-Style) */
    left: auto !important;
    right: 0;
    transform-origin: right center;
    margin-left: auto;
}

html body .ec-event-calendar-app .ec-event-link-cover {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--ec-text-color);
    flex-grow: 1;
    border: none;
    box-shadow: none;
}

html body .ec-event-calendar-app .ec-event-time-range {
    font-size: 0.7rem;
    font-weight: 800;
    color: #666;
    margin-bottom: 2px;
}

html body .ec-event-calendar-app .ec-event-title-compact {
    font-size: 0.8rem;
    font-weight: 700;
    margin: 0 0 5px 0;
    line-height: 1.2;
    color: #000;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* =========================================
   PAST EVENTS (Favorites View)
   ========================================= */
html body .ec-timetable-event.ec-past-event {
    filter: grayscale(100%);
    opacity: 0.6;
}

/* =========================================
   10. ACTION ICONS BAR
   ========================================= */
html body .ec-event-calendar-app .ec-event-icon-bar {
    margin-top: auto;
    display: flex;
    gap: 12px;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    align-items: center;
}

html body .ec-event-calendar-app .ec-event-icon-bar button,
html body .ec-event-calendar-app .ec-fav-btn,
html body .ec-event-calendar-app .ec-ical-btn,
html body .ec-event-calendar-app .ec-ticket-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
    background: transparent;
    padding: 0;
    border: none;
}

html body .ec-event-calendar-app .ec-fav-btn:hover,
html body .ec-event-calendar-app .ec-ical-btn:hover,
html body .ec-event-calendar-app .ec-ticket-btn-icon:hover {
    transform: scale(1.2);
}

html body .ec-event-calendar-app .ec-icon-svg {
    width: 24px;
    height: 24px;
    display: inline-block;
}

/* Mask-Pfad kommt aus ec-core.css (dort zentral, siehe "3. ICON SYSTEM"),
   hier nur Farbe und Skalierung für den Timetable. */
html body .ec-event-calendar-app .ec-timetable-container .ec-icon-heart,
html body .ec-event-calendar-app .ec-timetable-event .ec-icon-heart {
    background-color: var(--ec-icon-color, #555);
    -webkit-mask-size: 96%;
    mask-size: 96%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

html body .ec-event-calendar-app .ec-timetable-container .ec-fav-btn.active .ec-icon-heart,
html body .ec-event-calendar-app .ec-timetable-event .ec-fav-btn.active .ec-icon-heart {
    background-color: var(--ec-primary);
    animation: ec-heart-pop 0.4s ease-out;
}

/* Modal & Single Action Bar: Immer currentColor / Primärfarbe */
html body .ec-event-calendar-app .ec-single-actions-bar .ec-icon-heart,
html body .ec-event-calendar-app .ec-detail-modal .ec-icon-heart,
html body .ec-event-calendar-app .ec-single-container .ec-icon-heart,
html body .ec-event-calendar-app .ec-btn-compact .ec-icon-heart {
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

html body .ec-event-calendar-app .ec-single-actions-bar .ec-fav-btn-single:hover .ec-icon-heart,
html body .ec-event-calendar-app .ec-detail-modal .ec-fav-btn-single:hover .ec-icon-heart,
html body .ec-event-calendar-app .ec-btn-compact:hover .ec-icon-heart {
    background-color: #fff;
}

/* Ticket- und Kalender-Icon (mehrfarbig, daher background-image statt Maske)
   sind vollständig in ec-core.css definiert - hier ist nichts nötig. */

/* =========================================
   11. NOW INDICATOR & DAILY BOUNDARY LINES
   ========================================= */
html body .ec-event-calendar-app .ec-timetable-now-indicator {
    position: absolute;
    left: 0;
    right: 0;
    height: var(--ec-indicator-line-height, 2px);
    background: var(--ec-now-indicator-color);
    z-index: 250;
    pointer-events: none;
}

/* Day boundary indicator lines (Start / End) */
html body .ec-event-calendar-app .ec-timetable-day-line {
    position: absolute;
    left: 0;
    right: 0;
    height: var(--ec-indicator-line-height, 2px);
    z-index: 250;
    pointer-events: none;
}

/* Start Line (Hallenöffnung / Beginn - Grün) */
html body .ec-event-calendar-app .ec-timetable-start-line {
    background: var(--ec-start-indicator-color, #16a34a);
}

/* End Line (Hallenschließung / Ende - Orange) */
html body .ec-event-calendar-app .ec-timetable-end-line {
    background: var(--ec-end-indicator-color, #ea580c);
}

/* Pill Badges on the Indicator lines (Start, Now, End) */
html body .ec-event-calendar-app .ec-timetable-line-pill {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 10px 4px 8px;
    border-radius: 0 12px 12px 0;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
    pointer-events: auto;
    letter-spacing: 0.2px;
}

html body .ec-event-calendar-app .ec-start-pill {
    background: var(--ec-start-indicator-color, #16a34a);
}

html body .ec-event-calendar-app .ec-end-pill {
    background: var(--ec-end-indicator-color, #ea580c);
}

html body .ec-event-calendar-app .ec-now-pill {
    background: var(--ec-now-indicator-color, #ff3b30);
}

/* =========================================
   12. SCROLL NAVIGATION ARROWS (Global im Body)
   ========================================= */
html body .ec-scroll-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    z-index: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    color: #333;
}

/* Verstecke Scroll-Pfeile & Zoom-Button, wenn ein Modal geöffnet ist */
html.ec-modal-open .ec-scroll-arrow,
body.ec-modal-open .ec-scroll-arrow,
html.ec-modal-open .ec-timetable-zoom-btn,
body.ec-modal-open .ec-timetable-zoom-btn,
html.ec-modal-open .ec-timetable-floating-layer,
body.ec-modal-open .ec-timetable-floating-layer,
body:has(.ec-modal.active) .ec-scroll-arrow,
body:has(.ec-modal.active) .ec-timetable-zoom-btn,
body:has(.ec-modal.active) .ec-timetable-floating-layer {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none;
}

html body .ec-scroll-arrow.visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

html body .ec-scroll-arrow:hover {
    background-color: var(--ec-primary, #0073aa);
    color: #fff;
    border-color: var(--ec-primary, #0073aa);
    transform: translateY(-50%) scale(1.1);
}

html body .ec-scroll-arrow-left {
    left: 20px;
}

html body .ec-scroll-arrow-right {
    right: 20px;
}

html body .ec-scroll-arrow-left::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-left: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(45deg);
    margin-left: 4px;
}

html body .ec-scroll-arrow-right::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(-45deg);
    margin-right: 4px;
}

/* =========================================
   13. FAVORITES FILTER AND SHARE BUTTON
   ========================================= */
html body .ec-event-calendar-app .ec-btn-fav-filter {
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    cursor: pointer;
    font-weight: 700;
    border-radius: 4px;
    background-color: #fff;
    border: 2px solid var(--ec-primary);
    color: var(--ec-primary);
    transition: all 0.2s ease;
    gap: 8px;
    white-space: nowrap;
    min-width: 140px;
    pointer-events: auto;
}

html body .ec-event-calendar-app .ec-btn-fav-filter:hover,
html body .ec-event-calendar-app .ec-btn-fav-filter.ec-active {
    background-color: var(--ec-primary);
    color: #fff;
}

html body .ec-event-calendar-app .ec-btn-fav-filter .ec-icon-svg {
    width: 18px;
    height: 18px;
    background-color: currentColor;
}

/* Aktiv-Zustand ("Alle anzeigen"): durchgestrichenes Herz, jetzt als Mask-Icon
   aus icons/icon-fav-error.svg (Basis-Regel in ec-core.css). Hier nur die
   Timetable-Groesse 20px - passend zum 18px-Herz der Regel darueber. Der
   Hintergrund ist bei der Mask-Technik die Icon-Farbe, currentColor uebernimmt
   also die Button-Schriftfarbe. */
html body .ec-event-calendar-app .ec-timetable-header-actions .ec-btn-fav-filter .ec-icon-svg.ec-icon-fav-alert {
    width: 20px;
    height: 20px;
    background-color: currentColor;
    flex-shrink: 0;
}


/* Styling für den Übertragen-Button im Timetable Header */
html body .ec-event-calendar-app .ec-timetable-header-actions .ec-btn-share {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    color: #555;
}

html body .ec-event-calendar-app .ec-timetable-header-actions .ec-btn-share:hover {
    background-color: var(--ec-primary);
    border-color: var(--ec-primary);
    color: #fff;
}

/* 1. Der Container des Icons */
html body .ec-event-calendar-app .ec-timetable-header-actions .ec-btn-share .ec-icon-svg {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

/* 2. Zwingt das SVG, sich der 20x20px Box exakt anzupassen (verhindert den "Fetzen") */
html body .ec-event-calendar-app .ec-timetable-header-actions .ec-btn-share svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* =========================================
   14. EMPTY STATE
   ========================================= */
html body .ec-event-calendar-app .ec-empty-state-placeholder {
    text-align: center;
    padding: 70px 20px;
    background: #fff;
    border-radius: 0 0 12px 12px;
}

html body .ec-event-calendar-app .ec-empty-state-placeholder p {
    font-size: 1.05rem;
    font-style: italic;
    color: #888;
    margin: 0;
}

html body .ec-event-calendar-app .ec-empty-fav-icon-wrap {
    display: block;
    margin: 0 auto 15px;
    width: 70px;
    height: 70px;
    color: #ccc;
}

html body .ec-event-calendar-app .ec-empty-fav-icon-wrap svg {
    width: 100%;
    height: 100%;
}

/* =========================================
   15. CATEGORY BADGE (BUBBLE - Namespaced)
   ========================================= */
html body .ec-event-calendar-app .ec-timetable-cat-bubble {
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: var(--ec-primary, #f76b15);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 10;

    /* Standardmäßig unsichtbar im Timetable */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;

    white-space: nowrap;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badge nur anzeigen, wenn die übergeordnete Event-Kachel im Timetable gehovert wird */
html body .ec-event-calendar-app .ec-timetable-event:hover .ec-timetable-cat-bubble {
    opacity: 1;
}

/* =========================================
   16. TABS & TOP NAVIGATION
   ========================================= */
html body .ec-event-calendar-app .ec-timetable-nav-container {
    margin-bottom: 20px;
    width: 100%;
}

html body .ec-event-calendar-app .ec-timetable-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

html body .ec-event-calendar-app .ec-timetable-tabs .ec-tab {
    background: var(--ec-tab-bg, #fff);
    border: 1px solid #ccc;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    border-bottom: 3px solid transparent;
    transition: all 0.15s ease-in-out;
    border-radius: 4px 4px 0 0;
}

html body .ec-event-calendar-app .ec-timetable-tabs .ec-tab.active {
    background: var(--ec-tab-bg, #fff);
    color: #000;
    border-bottom: 3px solid var(--ec-primary);
}

html body .ec-event-calendar-app .ec-timetable-tabs .ec-tab:hover {
    background: var(--ec-primary);
    color: #fff;
    border-color: var(--ec-primary);
}

html body .ec-event-calendar-app .ec-timetable-tabs .ec-timetable-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
}

/* Desktop: Mobile Nav verbergen */
html body .ec-event-calendar-app .ec-timetable-mobile-nav {
    display: none;
}

/* --- Mobile & Tablet Ansicht (unter 1024px) ---
   WICHTIG: @container (nicht @media), weil ec-main.css die Tab-Leiste
   (.ec-tabs-wrapper - die klassischen Timetable-Tabs tragen diese Klasse ebenfalls)
   bereits ueber "@container ec-card-container (max-width: 1024px)" ausblendet.
   Solange hier @media (Viewport-Breite) stand, klafften beide Umschaltpunkte
   auseinander: In einer schmalen Spalte/Sidebar (Container <= 1024px) bei noch
   breitem Fenster (Viewport > 1024px) waren die Tabs schon versteckt, das mobile
   Dropdown aber noch nicht eingeblendet - die Datumsauswahl verschwand komplett.
   Beide Regelwerke messen jetzt dieselbe Breite (Container) am selben Breakpoint. */
@container ec-card-container (max-width: 1024px) {
    html body .ec-event-calendar-app .ec-timetable-tabs {
        display: none;
    }

    html body .ec-event-calendar-app .ec-timetable-mobile-nav {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        margin-bottom: 20px;
    }

    html body .ec-event-calendar-app .ec-timetable-mobile-nav select.ec-mobile-date-select {
        display: block;
        width: 100%;
        padding: 10px 15px;
        font-size: 1.1rem;
        font-weight: 700;
        color: #fff;
        background-color: var(--ec-primary);
        border: 1px solid var(--ec-primary);
        border-radius: 4px;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
        background-repeat: no-repeat;
        background-position: right 15px center;
        background-size: 12px auto;
        cursor: pointer;
        margin: 0;
    }

    html body .ec-event-calendar-app .ec-timetable-mobile-nav select.ec-mobile-date-select:focus {
        color: var(--ec-primary);
        background-color: #fff;
        font-weight: 700;
        outline: none;
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23f76b15%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    }

    /* Abstand Dropdown -> "Meine Favoriten" kommt AUSSCHLIESSLICH aus dem
       gap: 10px von .ec-timetable-mobile-nav (oben). Das margin: 0 am Select
       wurde frueher von ec-main.css ueberstimmt
       ("#ec-timetable-app .ec-mobile-date-select { margin-bottom: 25px }" -
       gewinnt ueber die ID); dort steht der Wert jetzt auf 0. */
    html body .ec-event-calendar-app .ec-timetable-mobile-actions {
        width: 100%;
        display: flex;
        gap: 8px;
    }

    html body .ec-event-calendar-app .ec-timetable-mobile-actions .ec-timetable-header-actions {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 0;
        align-items: center;
    }

    html body .ec-event-calendar-app .ec-timetable-mobile-actions .ec-btn-share {
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        min-width: 42px;
        box-sizing: border-box;
    }

    html body .ec-event-calendar-app .ec-timetable-mobile-actions .ec-btn-fav-filter {
        flex: 1 1 0%;
        width: auto;
        min-width: 0;
        height: 42px;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
    }
}

/* =========================================================================
   16B. MODERN FILTER LAYOUT (Tiles) - Timetable
   Die eigentliche Kachel-Basis (Box, Typografie, Herz/ALL-Kachel, Share-Kachel)
   lebt jetzt zentral in ec-core.css, Abschnitt "4B. MODERN TILES" (gemeinsam
   mit dem Hauptkalender - beide laden ec-core.css als Abhängigkeit vor). Hier
   bleibt nur, was für den Timetable spezifisch ist: die Kachel-Leiste selbst
   und die eigens benannten Scroll-Pfeile (siehe Kommentar weiter unten).
   ========================================================================= */

html body .ec-event-calendar-app.ec-filter-modern .ec-tabs-wrapper {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 6px 4px;
    align-items: stretch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Zentriert die Kacheln, solange sie in die Zeile passen (wenige Termine).
       "safe center" fällt bei Überlauf (viele Termine) automatisch auf normales
       Links-Verhalten zurück, damit die erste Kachel beim Scrollen nicht "verloren"
       geht. Die einfache "center"-Zeile davor ist der Fallback für Browser, die
       "safe center" nicht kennen (ungültiger Wert wird von denen ignoriert). */
    justify-content: center;
    justify-content: safe center;
}

html body .ec-event-calendar-app.ec-filter-modern .ec-tabs-wrapper::-webkit-scrollbar {
    display: none;
}

html body .ec-event-calendar-app.ec-filter-modern .ec-timetable-nav-container {
    position: relative;
}

/* Horizontale Scroll-Pfeile für die Kachel-Leiste (.ec-modern-date-scroll-arrow) -
   Regeln leben jetzt zentral in ec-core.css, Abschnitt "4B. MODERN TILES"
   (eigener Klassenname dort bewusst beibehalten, um Konflikte mit den
   .ec-scroll-arrow-Elementen der Zeitachse hier in Abschnitt 12 zu vermeiden). */

/* ==========================================================================
   17. Timetable Standalone Dropdown (Exakter 1:1 Klon aus ec-main.css)
   ========================================================================== */

html body .ec-event-calendar-app #ec-timetable-select-wrapper {
    margin-bottom: 15px;
    display: flex;
    /* Element nebeneinander ausrichten */
    align-items: center;
    /* Vertikale Zentrierung */
    gap: 15px;
    /* Abstand zwischen Label und Dropdown */
}

/* Erlaubt dem Label, den notwendigen Platz einzunehmen und normal umzubrechen */
html body .ec-event-calendar-app #ec-timetable-select-wrapper strong {
    white-space: normal;
    flex-shrink: 0;
    min-width: 100px;
}

html body .ec-event-calendar-app #ec-timetable-select-wrapper select {
    width: auto;
    max-width: 300px;
    flex-grow: 0;
    height: 42px;
    min-height: 42px;
    padding: 0 30px 0 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    margin: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px auto;
    flex: 0 1 auto;
}

html body .ec-event-calendar-app #ec-timetable-select-wrapper select {
    font-weight: bold;
}

/* Mobile & Tablet Responsive Logic via Container Queries (1:1 aus ec-main.css kopiert) */
@container ec-card-container (max-width: 1024px) {

    /* 1. Haupt-Dropdown-Wrapper: Schaltet von "nebeneinander" auf "untereinander" */
    html body .ec-event-calendar-app #ec-timetable-select-wrapper {
        display: flex;
        padding: 0 0px;
        flex-direction: column;
        /* Stapelt Label und Select untereinander */
        align-items: flex-start;
        /* Sorgt dafür, dass alles linksbündig startet */
        gap: 5px;
        /* Reduziert den Abstand zwischen den gestapelten Elementen */
        width: 100%;
    }

    /* 3. Dropdown-Feld muss volle Breite bekommen */
    html body .ec-event-calendar-app #ec-timetable-select-wrapper select {
        width: 100%;
        max-width: none;
        /* Resetten der Desktop-Maximalbreite */
    }
}



/* ==========================================================================
   18. BUGFIX: Timetable Spalten-Symmetrie (Flexbox & Sidebar Fix)
   ========================================================================== */
/* Erzwingt ein absolut synchrones Flex-Verhalten für Header und Spalten.
*/

/* 1. Header-Zellen und Grid-Spalten exakt gleich behandeln */
html body .ec-event-calendar-app .ec-timetable-container .ec-timetable-venue-title,
html body .ec-event-calendar-app .ec-timetable-container .ec-timetable-venue-column {
    flex: 1 1 0%;
    min-width: 220px;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* 2. Die Zeitachse ganz links auf Variable/60px einfrieren */
html body .ec-event-calendar-app .ec-timetable-container .ec-time-axis-spacer,
html body .ec-event-calendar-app .ec-timetable-container .ec-timetable-time-axis {
    flex: 0 0 var(--ec-time-col-width, 60px);
    width: var(--ec-time-col-width, 60px);
    min-width: var(--ec-time-col-width, 60px);
    max-width: var(--ec-time-col-width, 60px);
    box-sizing: border-box;
}

/* 3. Den Grid-Container (Canvas) synchronisieren */
html body .ec-event-calendar-app .ec-timetable-container .ec-timetable-grid-canvas {
    display: flex;
    flex: 1 1 auto;
    box-sizing: border-box;
}

/* 4. Das Wichtigste: Header und Body dürfen bei Platzmangel nicht asymmetrisch quetschen, 
   sondern müssen synchron als Gesamt-Block schrumpfen und horizontal scrollen */
html body .ec-event-calendar-app .ec-timetable-container .ec-timetable-venue-row,
html body .ec-event-calendar-app .ec-timetable-container .ec-timetable-body {
    display: flex;
    width: 100%;
    min-width: max-content;
}

/* ==========================================================================
   19. CANCELLED BADGE & TEXT (Abgesagt Status) - TIMETABLE FIX
   ========================================================================== */

/* 1. Grund-Kachel: Wir überschreiben die dynamische Venue-Farbe mit Grau.
      So wird der linke Rand und der eingefärbte Hintergrund automatisch grau! */
html body .ec-event-calendar-app .ec-timetable-container .ec-timetable-event.ec-is-cancelled {
    --ec-event-color: #888888;
    opacity: 0.85;
    /* Nur minimal blasser */
}

/* Beim Hover wieder leicht kräftiger */
html body .ec-event-calendar-app .ec-timetable-container .ec-timetable-event.ec-is-cancelled:hover {
    opacity: 1;
}

/* 2. Gezielter Graufilter: Nur auf das Event-Bild und die Icons unten anwenden */
html body .ec-event-calendar-app .ec-timetable-container .ec-timetable-event.ec-is-cancelled .ec-event-thumb-full,
html body .ec-event-calendar-app .ec-timetable-container .ec-timetable-event.ec-is-cancelled .ec-event-icon-bar {
    filter: grayscale(100%) opacity(0.6);
}

/* 3. Abgesagt-Text im Titel: Der normale Text wird grau, das Prefix bleibt rot */
html body .ec-event-calendar-app .ec-timetable-container .ec-timetable-event.ec-is-cancelled .ec-event-title-compact {
    color: #666;
}

html body .ec-event-calendar-app .ec-timetable-container .ec-cancelled-text {
    color: #d63638;
    /* Prefix bleibt knallrot */
    font-weight: 900;
    text-transform: uppercase;
    margin-right: 4px;
}

/* 4. Das rote Badge (Liegt jetzt direkt in der Kachel, nicht mehr im Bild) */
html body .ec-event-calendar-app .ec-timetable-container .ec-timetable-event .ec-cancelled-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #d63638;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 10;
    pointer-events: none;
    white-space: nowrap;
    text-transform: uppercase;
    opacity: 1;
}

/* =========================================
   20. TIMETABLE MOBILE ZOOM BUTTON
   ========================================= */
html body .ec-timetable-zoomed {
    zoom: 0.70;
}

html body .ec-timetable-zoom-btn {
    display: none;
    /* Versteckt auf Desktop */
    position: fixed;
    right: 20px;
    top: 50%;
    margin-top: -105px;
    /* Genau 30px über dem Navigationspfeil */
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    /* Weiß wie die Pfeile */
    color: #333;
    /* Dunkle Pfeilfarbe */
    border: 1px solid rgba(0, 0, 0, 0.15);
    /* Rand wie bei Pfeilen */
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    /* Schatten wie bei Pfeilen */
    z-index: 500;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Mask-Icon: Der Pfad kommt aus ec-core.css (.ec-icon-zoom-in / -out).
   background-color ist bei der Mask-Technik die Icon-Farbe - currentColor
   übernimmt damit die Button-Farbe (#333, im Hover #fff), genau wie vorher
   stroke="currentColor" im Inline-SVG. */
html body .ec-timetable-zoom-btn .ec-zoom-icon {
    width: 28px;
    height: 28px;
    display: block;
    transform: scale(2.5);
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

html body .ec-timetable-zoom-btn:hover {
    background-color: var(--ec-primary, #0073aa);
    color: #fff;
    border-color: var(--ec-primary, #0073aa);
    transform: translateY(-50%) scale(1.1);
}

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

    /* Nur auf mobilen/Tablet-Geräten anzeigen */
    html body .ec-timetable-zoom-btn.ec-zoom-btn-visible {
        display: flex;
    }
}