/* ==========================================================================
   RUN.EVENTS WIDGETS — Linear Agenda Desktop
   Angepasst an das OPS-2027-Design.

   Geändert wurde:
   1. Flächen flach statt mit Verlauf, dafür Hairline-Rahmen
   2. Keine Drehungen und kein Skalieren, nur ein seitliches Verschieben
   3. Sessiontitel in Weiß statt Magenta, damit er als Überschrift wirkt
   4. Pillenformen auf 4 px, passend zu den OPS-Buttons
   5. Farbige Schlagschatten entfernt
   6. Die zehn bunten Etikettenfarben durch eine einheitliche
      OPS-Variante ersetzt, siehe Hinweis unten

   Voraussetzung: Die OPS-Variablen sind gesetzt, insbesondere
   --color-primary-hsl und --color-secondary-hsl.
   ========================================================================== */

#pb-457 runevents-agenda{
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}


/* --------------------------------------------------------------------------
   Rahmen
   GEÄNDERT: flache Fläche statt Verlauf
   -------------------------------------------------------------------------- */
#pb-457 .agenda-component-linear-v2{
    font-family: var(--font-body);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md) !important;
    box-shadow: none;
    display: flex;
    gap: var(--space-2xl);
    align-items: flex-start;
}


/* --------------------------------------------------------------------------
   Filterleiste
   -------------------------------------------------------------------------- */
#pb-457 .agenda-component-linear-v2 #sidebar{
    min-width: 220px;
    max-width: 240px;
    flex-shrink: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-right: var(--space-md);
    box-shadow: none;
}

#pb-457 .agenda-component-linear-v2 #sidebar .sidebar-inner{
    width: 100%;
}

#pb-457 .agenda-component-linear-v2 #sidebar input[type="search"],#pb-457 .agenda-component-linear-v2 #sidebar input#search{
    width: 100% !important;
    box-sizing: border-box !important;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-body);
    font-family: var(--font-body);
    margin-bottom: var(--space-md);
    transition: border-color var(--transition-fast);
}

#pb-457 .agenda-component-linear-v2 #sidebar input[type="search"]:focus{
    outline: 2px solid var(--color-secondary);
    outline-offset: 1px;
    border-color: var(--color-secondary);
    box-shadow: none;
}

#pb-457 .agenda-component-linear-v2 #sidebar .section-header{
    display: block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin: 0 0 var(--space-md) 0;
    padding-bottom: 0;
    border-bottom: none;
}

#pb-457 .agenda-component-linear-v2 #tag-filters{
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

#pb-457 .agenda-component-linear-v2 #tag-filters .checkbox{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    border-right-width: 3px;
    border-right-style: solid;
}

#pb-457 .agenda-component-linear-v2 #tag-filters .checkbox:hover{
    background: var(--color-surface-alt);
}

#pb-457 .agenda-component-linear-v2 #tag-filters .checkbox input[type="checkbox"]{
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    accent-color: var(--color-primary);
    cursor: pointer;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    order: -1;
}

#pb-457 .agenda-component-linear-v2 #tag-filters .checkbox label{
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    flex: 1;
    order: 1;
}

#pb-457 .agenda-component-linear-v2 #tag-filters .checkbox label span{
    color: var(--color-text);
}


/* --------------------------------------------------------------------------
   Hauptbereich und Tagesreiter
   -------------------------------------------------------------------------- */
#pb-457 .agenda-component-linear-v2 #main{
    flex: 1;
    min-width: 0;
}

#pb-457 .agenda-component-linear-v2 #tabs{
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
    padding: 0 0 var(--space-sm) 0;
}

#pb-457 .agenda-component-linear-v2 #tabs button{
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: var(--space-sm) var(--space-lg);
    background: transparent !important;
    border: none !important;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition-fast),
                background-color var(--transition-fast);
}

#pb-457 .agenda-component-linear-v2 #tabs button:hover{
    color: var(--color-text-inverse);
    background: var(--color-surface-alt) !important;
}

#pb-457 .agenda-component-linear-v2 #tabs button.active{
    font-weight: 800;
    color: var(--color-text-on-primary) !important;
    background: var(--color-primary) !important;
}


/* --------------------------------------------------------------------------
   Zeitmarken
   GEÄNDERT: eckig, ohne farbigen Schatten
   -------------------------------------------------------------------------- */
#pb-457 .agenda-component-linear-v2 .time-block{
    margin-bottom: var(--space-lg);
}

#pb-457 .agenda-component-linear-v2 .time-label{
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-on-secondary) !important;
    background: var(--color-secondary) !important;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
    display: inline-block;
    box-shadow: none;
}


/* --------------------------------------------------------------------------
   Sessionkarte
   GEÄNDERT: flach mit Rahmen, magentafarbene Kante links, kein Schatten
   -------------------------------------------------------------------------- */
#pb-457 .agenda-component-linear-v2 .session-card{
    font-family: var(--font-body);
    background: var(--color-bg) !important;
    border-radius: var(--radius-sm) !important;
    padding: var(--space-md) var(--space-lg) !important;
    margin-bottom: var(--space-md);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    transition: transform var(--transition-base),
                border-color var(--transition-base);
    cursor: pointer;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: var(--space-md);
}

#pb-457 .agenda-component-linear-v2 .session-card:hover{
    transform: translateX(4px);
    box-shadow: none;
    border-color: var(--color-primary);
    border-left-color: var(--color-primary);
}


/* --------------------------------------------------------------------------
   Bildspalte
   GEÄNDERT: keine Drehung, kein doppelter Ring
   -------------------------------------------------------------------------- */
#pb-457 .agenda-component-linear-v2 .session-card .card-photos-bar{
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-sm);
    min-width: 80px;
    position: relative !important;
}

#pb-457 .agenda-component-linear-v2 .session-card .card-photos-bar img{
    width: 80px !important;
    height: 80px !important;
    border-radius: var(--radius-sm) !important;
    object-fit: cover;
    border: 1px solid var(--color-border);
    box-shadow: none;
    transition: none;
    transform: none;
    position: relative !important;
    z-index: 2 !important;
    order: 1 !important;
}

#pb-457 .agenda-component-linear-v2 .session-card:hover .card-photos-bar img{
    transform: none;
    box-shadow: none;
}

/* Symbol für mehrere Sprecher, weiterhin mit hoher Spezifität,
   weil das Widget es absolut positioniert */
#pb-457 .agenda-component-linear-v2 .session-card .card-photos-bar .card-icon.material-icons,#pb-457 .agenda-component-linear-v2 .session-card .card-photos-bar div.card-icon.material-icons,#pb-457 .agenda-component-linear-v2 .session-card .card-photos-bar img + .card-icon,#pb-457 .agenda-component-linear-v2 .session-card .card-photos-bar img + .material-icons,#pb-457 .agenda-component-linear-v2 .card-photos-bar .material-icons[class*="card-icon"],#pb-457 .agenda-component-linear-v2 #sessions .card-photos-bar .material-icons{
    color: var(--color-text-inverse) !important;
    font-size: 20px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    transition: background-color var(--transition-base);
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    margin: 0 !important;
    margin-top: 8px !important;
    flex-shrink: 0 !important;
    order: 10 !important;
}

#pb-457 .agenda-component-linear-v2 .session-card:hover .card-photos-bar .card-icon.material-icons,#pb-457 .agenda-component-linear-v2 .session-card:hover .card-photos-bar div.card-icon.material-icons,#pb-457 .agenda-component-linear-v2 .session-card:hover .card-photos-bar .material-icons{
    color: var(--color-text-on-primary) !important;
    transform: none;
    box-shadow: inset 0 0 0 100px var(--color-primary) !important;
}

/* Symbol für Sessions ohne Sprecher, etwa Registrierung */
#pb-457 .agenda-component-linear-v2 .session-card .card-photos-bar > .card-icon:first-child{
    color: var(--color-secondary) !important;
    font-size: 26px !important;
    width: 80px !important;
    height: 80px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    transition: background-color var(--transition-base),
                color var(--transition-base);
    transform: none;
    position: static !important;
    margin: 0 !important;
}

#pb-457 .agenda-component-linear-v2 .session-card:hover .card-photos-bar > .card-icon:first-child{
    transform: none;
    background: var(--color-secondary) !important;
    color: var(--color-text-on-secondary) !important;
    box-shadow: none !important;
}


/* --------------------------------------------------------------------------
   Textspalte
   -------------------------------------------------------------------------- */
#pb-457 .agenda-component-linear-v2 .session-card .session-info{
    flex: 1;
    min-width: 0;
    margin-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-xs);
    text-align: left !important;
}

#pb-457 .agenda-component-linear-v2 .session-card .session-info *{
    text-align: left !important;
}

#pb-457 .agenda-component-linear-v2 .session-card .session-time-room{
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: var(--space-sm);
    font-size: var(--text-small);
    color: var(--color-text-muted);
    font-weight: 500;
    margin-bottom: 0;
    width: 100%;
}

/* GEÄNDERT: Raum als eckiges Etikett statt Pille */
#pb-457 .agenda-component-linear-v2 .session-card .session-time-room span:first-child{
    background: var(--color-secondary) !important;
    color: var(--color-text-on-secondary) !important;
    padding: 3px var(--space-sm) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.09em !important;
}

/* GEÄNDERT: Titel in Weiß statt Magenta, damit er als Überschrift wirkt */
#pb-457 .agenda-component-linear-v2 .session-card .session-title{
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.018em;
    color: var(--color-text-inverse) !important;
    margin: var(--space-xs) 0;
    line-height: 1.3;
    text-align: left !important;
}

/* GEÄNDERT: Sprechername ohne Schatten und ohne Anheben */
#pb-457 .agenda-component-linear-v2 .session-card .session-speaker{
    display: inline-block;
    font-size: var(--text-small);
    font-weight: 700;
    color: var(--color-text-on-secondary) !important;
    background: var(--color-secondary) !important;
    padding: 3px var(--space-sm) !important;
    border-radius: var(--radius-sm);
    margin-top: var(--space-xs);
    text-align: left !important;
    box-shadow: none;
}

#pb-457 .agenda-component-linear-v2 .session-card:hover .session-speaker{
    box-shadow: none;
    transform: none;
}


/* --------------------------------------------------------------------------
   Etiketten
   GEÄNDERT: Die Originaldatei vergibt zehn Farben nach Position über
   nth-child. Das ist unzuverlässig, weil die Reihenfolge je Session wechselt
   und ein Etikett dadurch mal blau, mal grün erscheint. Ersetzt durch eine
   einheitliche Darstellung im OPS-Stil.

   Falls ihr die Etikettenfarben in run.events pflegt, setzt sie besser dort,
   dann kommen sie als Inline-Style und bleiben je Etikett gleich.
   -------------------------------------------------------------------------- */
#pb-457 .agenda-component-linear-v2 .session-card .session-tags{
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--space-sm);
}

#pb-457 .agenda-component-linear-v2 .session-card .session-tags span{
    font-family: var(--font-body);
    padding: 3px var(--space-sm) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    background: var(--color-surface-alt) !important;
    color: var(--color-secondary) !important;
    border: 1px solid var(--color-border) !important;
}


/* ==========================================================================
   Anpassung an Bildschirmbreiten
   ========================================================================== */
@media (max-width: 992px) {
    #pb-457 .agenda-component-linear-v2{
        flex-direction: column;
    }

    #pb-457 .agenda-component-linear-v2 #sidebar{
        max-width: 100%;
        min-width: auto;
        width: 100%;
        margin-right: 0;
        margin-bottom: var(--space-lg);
    }

    #pb-457 .agenda-component-linear-v2 #tag-filters{
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-md);
    }

    #pb-457 .agenda-component-linear-v2 #tag-filters .checkbox{
        flex: 0 0 auto;
    }
}

@media (max-width: 768px) {
    #pb-457 .agenda-component-linear-v2{
        padding: var(--space-sm) !important;
    }

    #pb-457 .agenda-component-linear-v2 #tabs{
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: var(--space-xs);
        padding-bottom: var(--space-xs);
        -webkit-overflow-scrolling: touch;
    }

    #pb-457 .agenda-component-linear-v2 #tabs button{
        flex: 0 0 auto;
        text-align: center;
        min-width: auto;
        padding: var(--space-xs) var(--space-sm) !important;
        font-size: 0.75rem !important;
    }

    #pb-457 .agenda-component-linear-v2 .time-label{
        font-size: 0.7rem !important;
        padding: var(--space-xs) var(--space-md) !important;
    }

    #pb-457 .agenda-component-linear-v2 .session-card{
        flex-direction: row !important;
        align-items: flex-start !important;
        padding: var(--space-sm) !important;
        gap: var(--space-sm) !important;
        margin-bottom: var(--space-sm);
    }

    #pb-457 .agenda-component-linear-v2 .session-card .card-photos-bar{
        min-width: 50px !important;
        width: 50px !important;
    }

    #pb-457 .agenda-component-linear-v2 .session-card .card-photos-bar img{
        width: 50px !important;
        height: 50px !important;
        transform: none !important;
    }

    #pb-457 .agenda-component-linear-v2 .session-card .card-photos-bar .card-icon.material-icons,#pb-457 .agenda-component-linear-v2 .session-card .card-photos-bar div.card-icon.material-icons,#pb-457 .agenda-component-linear-v2 .session-card .card-photos-bar img + .card-icon,#pb-457 .agenda-component-linear-v2 .session-card .card-photos-bar img + .material-icons,#pb-457 .agenda-component-linear-v2 .card-photos-bar .material-icons[class*="card-icon"],#pb-457 .agenda-component-linear-v2 #sessions .card-photos-bar .material-icons{
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
        font-size: 16px !important;
        margin-top: 4px !important;
    }

    #pb-457 .agenda-component-linear-v2 .session-card .card-photos-bar > .card-icon:first-child{
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
        transform: none !important;
    }

    #pb-457 .agenda-component-linear-v2 .session-card .session-info{
        gap: 2px !important;
    }

    #pb-457 .agenda-component-linear-v2 .session-card .session-time-room{
        gap: var(--space-xs) !important;
        font-size: 0.7rem !important;
        flex-wrap: wrap;
    }

    #pb-457 .agenda-component-linear-v2 .session-card .session-time-room span:first-child{
        padding: 1px var(--space-xs) !important;
        font-size: 0.58rem !important;
    }

    #pb-457 .agenda-component-linear-v2 .session-card .session-title{
        font-size: 0.95rem !important;
        margin: 2px 0 !important;
        line-height: 1.3 !important;
    }

    #pb-457 .agenda-component-linear-v2 .session-card .session-speaker{
        font-size: 0.7rem !important;
        padding: 2px var(--space-xs) !important;
        margin-top: 2px !important;
    }

    #pb-457 .agenda-component-linear-v2 .session-card .session-tags{
        margin-top: var(--space-xs) !important;
        gap: 3px !important;
    }

    #pb-457 .agenda-component-linear-v2 .session-card .session-tags span{
        padding: 1px 6px !important;
        font-size: 0.55rem !important;
        letter-spacing: 0.04em !important;
    }

    #pb-457 .agenda-component-linear-v2 .session-card .session-tags span:nth-child(n+5){
        display: none !important;
    }

    #pb-457 .agenda-component-linear-v2 .session-card:hover{
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #pb-457 .agenda-component-linear-v2 .session-card{
        transition: none;
    }

    #pb-457 .agenda-component-linear-v2 .session-card:hover{
        transform: none;
    }
}