/* ================================================================
   COMLINE SAP Portal – Frontend CSS
   Corporate Design 2025: #D84F22, FF Mark Pro / Arial
   ================================================================ */

:root {
    --csp-orange:       #D84F22;
    --csp-orange-dark:  #B8421C;
    --csp-orange-light: #FFBFA9;
    --csp-dark:         #454545;
    --csp-gray-5:       #777778;
    --csp-gray-4:       #878888;
    --csp-gray-2:       #DDDDDD;
    --csp-gray-1:       #EDEDED;
    --csp-white:        #FFFFFF;
    --csp-green:        #008F00;
    --csp-red:          #CC3333;
    --csp-bg:           #FAFAFA;
    --csp-font:         'FF Mark Pro', Arial, Helvetica, sans-serif;
    --csp-radius:       0.5rem;
}

/* ── Reset (scoped) ── */
.csp-portal, .csp-portal * { box-sizing: border-box; }
.csp-portal { font-family: var(--csp-font); color: var(--csp-dark); line-height: 1.6; }


/* ══════════════════════════════════════════════
   AVADA
   ══════════════════════════════════════════════ */

#masterclass {
	background-color: rgba(0,0,0,0.5);
	}

/* Agenda-Liste: 2-spaltig auf Desktop, 1-spaltig auf Mobile */
.csp-agenda-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.csp-agenda-list .fusion-li-item {
    display: flex;
    align-items: center;
    width: 50%;
    box-sizing: border-box;
    padding-right: 1.5em;
}

.csp-agenda-list .fusion-li-item-content {
    flex: 1;
    min-width: 0;
}

.csp-agenda-list .fusion-li-item-content p {
    margin: 0;
    word-break: break-word;
    white-space: normal;
}

.csp-webinar-uebersicht .heading-link h2,
.sap_webinar .fusion-checklist,
.sap_kompetenzfeld .fusion-checklist {
	font-size: 1em;
	}

/* ── Hidden-Klasse für gefilterte Karten ── */
#content .csp-wu-card.csp-wu-hidden {
    display: none !important;
}

.webinar-uebersicht .csp-wu-grid .content-container {
	font-size: 1em;
	}

.webinar-uebersicht .subtitle p {
	color:#555; font-weight:600; margin:0;
	}

.webinar-uebersicht .webinar-description p {
	color:#777; margin:0;
	}

/* ── Filter-Leiste ── */
.csp-wu-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
    align-items: center;
}
.csp-wu-filters .fusion-button.csp-wu-active {
    background-color: #D84F22 !important;
    border-color:     #D84F22 !important;
    color:            #fff    !important;
}
.csp-wu-filters .fusion-button.csp-wu-active i {
    color: #fff !important;
}
.csp-wu-count {
    font-size: 12px;
    opacity: .85;
    margin-left: 3px;
}

/* ── Sektions-Header ── */
.csp-wu-section {
    margin-bottom: 48px;
}
.csp-wu-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 3px solid #D84F22;
}
.csp-wu-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 700;
    color: #454545;
    margin: 0;
}
.csp-wu-section-title > i {
    font-size: 22px;
    color: #D84F22;
}
.csp-wu-badge-ondemand {
    display: inline-block;
    background: var(--awb-color1);
    color: #00A651;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}

.csp-wu-badge-ondemand i {
    font-size: 16px;
    color: #00A651;
    }

/* ── AVADA Content Boxes: gleiche Höhe ── */
.csp-wu-grid.csp-equal-boxes {
    display: flex !important;
    flex-wrap: wrap !important;
}
.csp-wu-grid.csp-equal-boxes > .content-box-column {
    display: flex;
}
.csp-wu-grid.csp-equal-boxes > .content-box-column > .content-box-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

/* ── Status-Badges ── */
.csp-wu-props {
    text-align: right;
    font-size: 0.8em;
    line-height: 1.6;
}
.csp-wu-props a { color: inherit; }
.csp-wu-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
}
.csp-wu-badge--video    { background: #D84F22; color: #fff; }
.csp-wu-badge--ondemand { color: #00A651; font-weight: 600; }
.csp-wu-badge--live     { background: #e91e63; color: #fff; }
.csp-wu-badge--flagship { background: #f59e0b; color: #fff; }
.csp-wu-badge--date     { color: #777; }


.webinar-list.csp-equal-boxes {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}
.webinar-list.csp-equal-boxes > .content-box-column {
    display: flex !important;
    flex-direction: column !important;
}
.webinar-list.csp-equal-boxes > .content-box-column > .content-box-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
}
.webinar-list.csp-equal-boxes .content-container {
    flex: 1 !important;
}
#content .csp-webinar-uebersicht .fusion-read-more-button,
.webinar-list .fusion-read-more-button {
	margin-top: auto;
	}

.csp-webinar-uebersicht .content-box-column .col {
	background-color: var(--awb-color1);
	}

#content .webinar-headline {
	margin-bottom: 0;
	}

.webinar-subline {
	font-size: 0.8em;
	}

.detail-link {
	display:inline-block; margin-top:auto; padding-top:8px; font-weight:600;
	}

@media (max-width: 640px) {
    .csp-agenda-list .fusion-li-item {
        width: 100%;
        padding-right: 0;
    }
	
	#content .fusion-content-boxes.content-boxes-icon-boxed .content-box-column, #content .fusion-content-boxes.content-boxes-icon-on-top .content-box-column, #content .fusion-content-boxes .fusion-column {
		margin-bottom: 1em;
	}
	
	#masterclass + div {
		hyphens: auto;
		}
	
	#masterclass + div .col:first-child {
		margin-top: 1em;
		}

	
	#masterclass + div .col {
		padding: 0;
		}	
	
}



.webinar-properties {
	float: right;
	align-self: flex-end;
	}



/* ══════════════════════════════════════════════════════════════════
   REFACTORING: Inline-Stile → Klassen
   (ersetzt statische style="…"-Attribute in avada-shortcodes.php
    und webinar-uebersicht.php)
   ══════════════════════════════════════════════════════════════════ */

/* ── Icon-Kreise (Kompetenzfelder, 60px) ── */
#wrapper .csp-kf-icon-circle {
    border-color:     var(--awb-color7);
    border-width:     1px;
    background-color: var(--awb-color7);
    box-sizing:       content-box;
    height:           60px;
    width:            60px;
    line-height:      60px;
    top:              -80px;
 
    border-radius:    50%;
    font-size:        30px;
    color:            #ffffff;
}

.sap_themenbereich .csp-kf-icon-circle,
.kompetenzfelder .csp-kf-icon-circle {
	margin-left: -30px !important;
	} 

/* ── Icon-Kreise (Webinare / Webinar-Übersicht, 80px) ── */
.csp-wu-icon-circle {
    border-color:     var(--awb-color7);
    border-width:     1px;
    background-color: var(--awb-color7);
    box-sizing:       content-box !important;
    height:           80px;
    width:            80px;
    border-radius:    50%;
    font-size:        40px;
}

.webinar-list .csp-wu-icon-circle,
.csp-webinar-uebersicht .csp-wu-icon-circle {
	line-height:      80px !important;
	}
	
/* ── Webinar-Karten: Icon oben ausrichten bei mehrzeiligem Titel ── */
.webinar-list .heading.heading-with-icon.icon-left {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
}	

/* ── Heading-Link (float:left) ── */
.csp-wu-heading-link {
    float: left;
}

/* ── „Zum Webinar"-Button ── */
.csp-wu-read-more-btn {
    float:      left;
    margin-top: auto;
}

/* ── Subtitle-Container (Webinar-Übersicht, margin-bottom:4px) ── */
.csp-wu-subtitle-container {
    margin-bottom: 4px;
}

/* ── Subtitle-Container (Kompetenzfelder, margin-bottom:5px) ── */
.csp-kf-subtitle-container {
    margin-bottom: 5px;
}

/* ── Kompetenzfeld: Box-Wrapper overflow ── */
.csp-kf-box-wrapper {
    overflow: visible;
}

/* ── Stat-Box: Wrapper ── */
.csp-stat-box-wrapper {
    background-color: rgba(255, 255, 255, 0.2);
    height:           auto;
    overflow:         visible;
}


	



/* ── Stat-Box: Wert-Typografie ── */
#wrapper .csp-stat-value {
    font-size:   26px;
    --fontSize:  26;
    line-height: 1.27;
    color:       var(--awb-color1);
}

/* ── Stat-Box: Label-Typografie ── */
#wrapper .csp-stat-label {
    font-size: 20px;
    color:     var(--awb-color1) !important;
    margin:    0;
}

/* ── Grid-Container: Standard-AVADA-Farben (Webinar-Übersicht) ── */
.csp-wu-grid-defaults {
    --awb-backgroundcolor:           #faf9f8;
    --awb-hover-accent-color:        #D84F22;
    --awb-circle-hover-accent-color: #D84F22;
}

/* ── Spalten-Hintergrund (Webinar-Karten) ── */
.csp-wu-col-bg {
    --awb-backgroundcolor: #faf9f8;
}

/* ── Stat-Box: Spalten-Hintergrund (transparent) ── */
.csp-stat-col-bg {
    --awb-backgroundcolor: rgba(255, 255, 255, 0);
    border-color:          rgba(255, 255, 255, 0);
}

/* ── On-Demand-Badge: Icon-Abstand ── */
.csp-wu-badge-icon {
    margin-right: 4px;
}

/* ── YouTube-SVG-Icon: vertikale Ausrichtung ── */
.csp-wu-yt-icon {
    margin-bottom: -3px;
}

.webinar-infos .fusion-li-icon {
	margin-right: 0.6em;
	}

/* ── Equal-Height Boxen ── */
.csp-equal-boxes {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}
.csp-equal-boxes > .content-box-column {
    display: flex !important;
    flex-direction: column !important;
}
.csp-equal-boxes > .content-box-column > .col.content-box-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
}
.csp-equal-boxes .content-container {
    flex: 1 !important;
}

/* ── Webinare: Zentrierung bei 1–2 Karten ── */
.csp-webinare-centered {
    justify-content: center !important;
}