/* -----------------------------------------------
   TV Dashboard – Frontend-Stile
   Alle Module erben .tvd-module als Basisklasse.
----------------------------------------------- */

:root {
	--tvd-bg:         #111111;
	--tvd-bg-card:    #1a1a1a;
	--tvd-text:       #f0f0f0;
	--tvd-text-muted: #888888;
	--tvd-font:       'Chivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--tvd-radius:     6px;
	--tvd-fade:       1s ease-in-out;
}

/*
 * Akzentfarbe direkt aus Elementor – kein Zwischenschritt über --tvd-accent,
 * damit die Variable-Kette zuverlässig auflöst.
 * Alle Akzent-Stellen nutzen var(--e-global-color-primary) direkt.
 */

/*
 * Elementor-Höhenkette
 *
 * Elementor's Shortcode-Widget erzeugt folgende DOM-Struktur:
 *
 *   .elementor-widget-wrap          ← flex-container (column), align-items: flex-start  ← PROBLEM
 *     .elementor-widget             ← flex-kind
 *       .elementor-widget-container
 *         .elementor-shortcode      ← extra Wrapper den Elementor immer einfügt
 *           .tvd-module             ← unser Element
 *
 * Alle fünf Ebenen müssen height weitergeben.
 * Ebene 1 (widget-wrap align-items) ist der häufigste Grund warum nichts streckt.
 */

/* Ebene 1 – widget-wrap: erlaubt Kindern zu strecken */
.elementor-widget-wrap:has(.tvd-module) {
	align-items: stretch;
}

/* Ebene 2 – widget */
.elementor-widget:has(.tvd-module) {
	align-self:     stretch;
	height:         100%;
	display:        flex;
	flex-direction: column;
}

/* Ebene 3 – widget-container */
.elementor-widget:has(.tvd-module) > .elementor-widget-container {
	flex:   1 1 auto;
	height: 100%;
}

/* Ebene 4 – .elementor-shortcode (Elementor-eigener Wrapper um Shortcode-Output) */
.elementor-shortcode:has(.tvd-module) {
	height: 100%;
	display: block;
}

/* Base module – füllt seinen Container vollständig */
.tvd-module {
	font-family:      var(--tvd-font);
	color:            var(--tvd-text);
	background-color: var(--tvd-bg);
	width:            100%;
	height:           100%;
	min-height:       150px;
	position:         relative;
	overflow:         hidden;
	border-radius:    var(--tvd-radius);
	box-sizing:       border-box;
}

/* Leerstand-Hinweis */
.tvd-module.tvd-empty {
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       0.9rem;
	color:           var(--tvd-text-muted);
	letter-spacing:  0.04em;
}

/* -----------------------------------------------
   Modul: Galerie
----------------------------------------------- */

.tvd-gallery__slide {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	opacity:    0;
	transition: opacity var(--tvd-fade);
}

.tvd-gallery__slide.tvd-active {
	opacity: 1;
}

/* Unscharfer Hintergrund (object-fit: cover) */
.tvd-gallery__bg {
	position:            absolute;
	inset:               -8%;   /* übersteht den Container, damit Blur-Rand verschwindet */
	background-size:     cover;
	background-position: center;
	filter:              blur(24px);
	opacity:             0.45;
}

/* Hauptbild (object-fit: contain)
   !important gegen theme/elementor-globale img { height: auto } */
.tvd-module .tvd-gallery__img {
	position:    absolute !important;
	inset:       0 !important;
	width:       100% !important;
	height:      100% !important;
	max-width:   none !important;
	max-height:  none !important;
	object-fit:  contain !important;
	display:     block !important;
	margin:      0 !important;
	padding:     0 !important;
}


/* Pagination-Punkte */
.tvd-gallery__footer {
	position:        absolute;
	bottom:          0;
	left:            0;
	right:           0;
	z-index:         2;
	display:         flex;
	flex-direction:  column;
	gap:             0.5em;
	padding-bottom:  0.75em;
}

.tvd-gallery__dots {
	display:         flex;
	justify-content: center;
	gap:             0.45em;
}

.tvd-gallery__dot {
	width:         6px;
	height:        6px;
	border-radius: 50%;
	background:    rgba(255, 255, 255, 0.3);
	transition:    background 0.3s, transform 0.3s;
	flex-shrink:   0;
}

.tvd-gallery__dot.tvd-active {
	background: var(--e-global-color-primary);
	transform:  scale(1.35);
}

.tvd-gallery__timer {
	height:     3px;
	margin:     0 1.2em;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 2px;
	overflow:   hidden;
}

.tvd-gallery__timer-bar {
	height:        100%;
	width:         0%;
	background:    var(--e-global-color-primary);
	border-radius: 2px;
	/* transition wird per JS gesetzt */
}

/* -----------------------------------------------
   Modul: Wetter
----------------------------------------------- */

.tvd-weather {
	display:        flex;
	flex-direction: column;
	padding:        0.8em 1.6em 1.2em;
	gap:            0;
}

/* Überschrift */
.tvd-weather__headline {
	font-size:      0.7em;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color:          var(--e-global-color-primary);
	margin-bottom:  0.6em;
	flex-shrink:    0;
}

/* Heutiger Tag */
.tvd-weather__today {
	display:     flex;
	align-items: center;
	gap:         1.4em;
	flex:        1 1 auto;
	min-height:  0;
}

/* Icon-Bereich */
.tvd-weather__today-icon {
	flex-shrink: 0;
	display:     flex;
	align-items: center;
}

/* Info-Bereich */
.tvd-weather__today-info {
	display:        flex;
	flex-direction: column;
	gap:            0.2em;
}

.tvd-weather__temp {
	font-size:   3.6em;
	font-weight: 700;
	line-height: 1;
	color:       var(--tvd-text);
}

.tvd-weather__unit {
	font-size:   0.5em;
	font-weight: 400;
	opacity:     0.7;
	margin-left: 0.1em;
}

.tvd-weather__desc {
	font-size:   1.05em;
	font-weight: 500;
	color:       var(--tvd-text);
}

.tvd-weather__meta {
	display:    flex;
	gap:        0.4em;
	flex-wrap:  wrap;
	font-size:  0.78em;
	color:      var(--tvd-text-muted);
	margin-top: 0.2em;
}

.tvd-weather__meta-sep {
	opacity: 0.4;
}

/* 7-Tage-Vorschau: jeder Tag als horizontale Zeile, volle Breite */
.tvd-weather__forecast {
	display:        flex;
	flex-direction: column;
	gap:            0;
	padding-top:    0.7em;
	border-top:     1px solid rgba(255, 255, 255, 0.1);
	flex-shrink:    0;
	font-size:      0.8em;
	width:          100%;
}

.tvd-weather__day {
	display:               grid;
	/* Tag | Icon | Max | Min | Regen – füllt die volle Breite */
	grid-template-columns: 3em 2.4em 1fr 1fr 1fr;
	align-items:           center;
	width:                 100%;
	gap:                   0 0.4em;
	padding:               0.3em 0;
	border-bottom:         1px solid rgba(255, 255, 255, 0.06);
	box-sizing:            border-box;
}

.tvd-weather__day:last-child {
	border-bottom: none;
}

.tvd-weather__day-name {
	font-weight:    700;
	color:          var(--e-global-color-primary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.tvd-weather__day-icon {
	display:         flex;
	align-items:     center;
	justify-content: center;
}

.tvd-weather__day-max {
	font-weight: 700;
	color:       var(--tvd-text);
	text-align:  right;
}

.tvd-weather__day-min {
	color:      var(--tvd-text-muted);
	text-align: right;
}

.tvd-weather__day-rain {
	color:      #7fb3d3;
	text-align: right;
}

/* SVG Icon-Größen */
.tvd-icon {
	display:         flex;
	align-items:     center;
	justify-content: center;
	line-height:     0;
}

.tvd-icon--lg svg,
.tvd-icon--sm svg {
	display:     block;
	flex-shrink: 0;
}

.tvd-icon--lg svg {
	width:  5.5em;
	height: 5.5em;
}

.tvd-icon--sm svg {
	width:  1.6em;
	height: 1.6em;
}

/* -----------------------------------------------
   Modul: Geburtstage
----------------------------------------------- */

.tvd-birthdays {
	display:        flex;
	flex-direction: column;
	padding:        0.8em 1.6em 1.2em;
	gap:            0;
}

.tvd-birthdays__headline {
	font-size:      0.7em;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color:          var(--e-global-color-primary);
	margin-bottom:  0.6em;
	flex-shrink:    0;
}

/* ---- Erster Eintrag – prominent ---- */

.tvd-birthday--first {
	flex:           1 1 0;
	min-height:     0;
	display:        flex;
	align-items:    center;
	gap:            0.9em;
	background:     rgba(255, 255, 255, 0.04);
	border-radius:  var(--tvd-radius);
	padding:        0.9em 1em;
	margin-bottom:  0.7em;
	position:       relative;
}

.tvd-birthday--first .tvd-birthday__icon {
	font-size:   2.4em;
	line-height: 1;
	flex-shrink: 0;
}

.tvd-birthday--first .tvd-birthday__body {
	display:        flex;
	flex-direction: column;
	gap:            0.2em;
}

.tvd-birthday--first .tvd-birthday__name {
	font-size:   1.45em;
	font-weight: 700;
	color:       var(--tvd-text);
	line-height: 1.1;
}

.tvd-birthday--first .tvd-birthday__meta {
	font-size:   0.9em;
	color:       var(--tvd-text-muted);
	display:     flex;
	gap:         0.35em;
	align-items: center;
	flex-wrap:   wrap;
}

.tvd-birthday--first .tvd-birthday__monday {
	font-size:   0.78em;
	color:       var(--e-global-color-primary);
	margin-top:  0.1em;
}

/* Heute-Dekoration auf dem ersten Eintrag */
.tvd-birthday--first.tvd-birthday--today {
	border: 1px solid var(--e-global-color-primary);
	background: rgba(255, 255, 255, 0.07);
}

.tvd-birthday--first.tvd-birthday--today .tvd-birthday__name {
	color: var(--e-global-color-primary);
}

.tvd-birthday--first.tvd-birthday--today .tvd-birthday__countdown {
	color:       var(--e-global-color-primary);
	font-weight: 700;
}

/* Heute-Badge (oben rechts) */
.tvd-birthday__badge {
	position:     absolute;
	top:          0.6em;
	right:        0.7em;
	font-size:    0.6em;
	font-weight:  700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color:        var(--tvd-bg);
	background:   var(--e-global-color-primary);
	padding:      0.2em 0.55em;
	border-radius: 999px;
}

/* ---- Einträge 2 + 3 – kompakte Zeilen ---- */

.tvd-birthday:not(.tvd-birthday--first) {
	display:       flex;
	align-items:   center;
	gap:           0.6em;
	padding:       0.45em 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	flex-shrink:   0;
}

.tvd-birthday:not(.tvd-birthday--first):last-child {
	border-bottom: none;
}

.tvd-birthday:not(.tvd-birthday--first) .tvd-birthday__icon {
	font-size:   1.3em;
	flex-shrink: 0;
}

.tvd-birthday:not(.tvd-birthday--first) .tvd-birthday__body {
	display:     flex;
	flex-wrap:   wrap;
	align-items: baseline;
	gap:         0 0.35em;
	font-size:   0.82em;
}

.tvd-birthday:not(.tvd-birthday--first) .tvd-birthday__name {
	font-weight: 700;
	color:       var(--tvd-text);
}

.tvd-birthday:not(.tvd-birthday--first) .tvd-birthday__meta {
	display:     flex;
	align-items: baseline;
	gap:         0.3em;
	color:       var(--tvd-text-muted);
}

.tvd-birthday:not(.tvd-birthday--first) .tvd-birthday__monday {
	width:       100%;
	font-size:   0.85em;
	color:       var(--e-global-color-primary);
}

.tvd-birthday__dow {
	opacity: 0.7;
}

.tvd-birthday__sep {
	opacity: 0.35;
}

/* -----------------------------------------------
   Modul: Neuigkeiten
----------------------------------------------- */

.tvd-news {
	display:        flex;
	flex-direction: column;
}

.tvd-news__headline {
	font-size:      0.7em;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color:          var(--e-global-color-primary);
	padding:        0.7em 1.6em 0.5em;
	flex-shrink:    0;
}

/* Bühne: füllt den verfügbaren Raum */
.tvd-news__stage {
	flex:     1 1 0;
	position: relative;
	overflow: hidden;
	min-height: 0;
}

/* Einzelne Folie */
.tvd-news__slide {
	position:   absolute;
	inset:      0;
	opacity:    0;
	transition: opacity 0.8s ease;
	overflow:   hidden;
}

.tvd-news__slide.tvd-active {
	opacity: 1;
}

/* Scrollbarer Inhaltsbereich */
.tvd-news__scroll-wrap {
	padding:      1.2em 1.6em 1.4em;
	will-change:  transform;
	/* transition wird per JS gesetzt */
}

.tvd-news__title {
	font-size:     1.1em;
	font-weight:   700;
	color:         var(--e-global-color-primary);
	margin-bottom: 0.5em;
	line-height:   1.3;
}

.tvd-news__body {
	font-size:   0.9em;
	color:       var(--tvd-text);
	line-height: 1.65;
}

.tvd-news__body p {
	margin: 0 0 0.65em;
}

.tvd-news__body p:last-child {
	margin-bottom: 0;
}

/* Footer: Pagination + Timer */
.tvd-news__footer {
	flex-shrink: 0;
	padding:     0.5em 1.6em 0.9em;
	display:     flex;
	flex-direction: column;
	gap:         0.45em;
}

.tvd-news__dots {
	display:         flex;
	gap:             0.45em;
	justify-content: center;
}

.tvd-news__dot {
	width:         6px;
	height:        6px;
	border-radius: 50%;
	background:    rgba(255, 255, 255, 0.2);
	transition:    background 0.3s, transform 0.3s;
	flex-shrink:   0;
}

.tvd-news__dot.tvd-active {
	background: var(--e-global-color-primary);
	transform:  scale(1.35);
}

/* -----------------------------------------------
   Modul: Veranstaltungen
----------------------------------------------- */

.tvd-events {
	display:        flex;
	flex-direction: column;
}

.tvd-events__headline {
	font-size:      0.7em;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color:          var(--e-global-color-primary);
	padding:        0.7em 1.6em 0.5em;
	flex-shrink:    0;
}

/* ---- Erste Veranstaltung ---- */

.tvd-events__first {
	position:   relative;
	flex:       1 1 0;
	min-height: 0;
	overflow:   hidden;
	display:    flex;
	flex-direction: column;
}

/* Full-bleed Bild */
.tvd-events__first-thumb {
	position:            absolute;
	inset:               0;
	background-size:     cover;
	background-position: center;
}

/* Gradient-Overlay von unten nach oben für Lesbarkeit */
.tvd-events__first--img::after {
	content:    '';
	position:   absolute;
	inset:      0;
	background: linear-gradient(
		to top,
		rgba(17, 17, 17, 0.97) 0%,
		rgba(17, 17, 17, 0.6)  50%,
		rgba(17, 17, 17, 0.1)  100%
	);
}

/* Kein Bild: leichte Hintergrundfarbe */
.tvd-events__first:not(.tvd-events__first--img) {
	background: rgba(255, 255, 255, 0.04);
}

/* Text über Bild/Gradient */
.tvd-events__first-body {
	position:        relative;
	z-index:         1;
	display:         flex;
	flex-direction:  column;
	justify-content: flex-end;
	gap:             0.3em;
	padding:         1.2em 1.4em;
	flex:            1;
	min-width:       0;
}

.tvd-events__first:not(.tvd-events__first--img) .tvd-events__first-body {
	justify-content: center;
}

/* Heute-Badge (absolut, oben rechts) */
.tvd-events__first-badge {
	position:       absolute;
	top:            0.8em;
	right:          0.8em;
	z-index:        2;
	font-size:      0.62em;
	font-weight:    700;
	line-height:    1;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding:        0.3em 0.7em;
	border-radius:  999px;
	background:     var(--e-global-color-primary);
	color:          var(--tvd-bg);
}

.tvd-events__first-when {
	display:     flex;
	align-items: center;
	gap:         0.4em;
	flex-wrap:   wrap;
}

.tvd-events__first-date {
	font-size:  0.82em;
	color:      var(--tvd-text-muted);
}

.tvd-events__first-time {
	font-size:  0.82em;
	color:      var(--tvd-text-muted);
}

.tvd-events__first-sep {
	font-size: 0.82em;
	color:     var(--tvd-text-muted);
	opacity:   0.4;
}

.tvd-events__first-title {
	font-size:   1.3em;
	font-weight: 700;
	color:       var(--tvd-text);
	line-height: 1.2;
}

.tvd-events__first-location {
	font-size:   0.82em;
	color:       var(--e-global-color-primary);
	font-weight: 500;
}

.tvd-events__first-desc {
	font-size:          0.82em;
	color:              var(--tvd-text-muted);
	line-height:        1.5;
	overflow:           hidden;
	display:            -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* ---- Weitere Veranstaltungen (kompakt) ---- */

.tvd-events__list {
	flex-shrink: 0;
	border-top:  1px solid rgba(255, 255, 255, 0.1);
	font-size:   0.88em;
}

.tvd-events__item {
	display:               grid;
	grid-template-columns: 6.5em 3.2em 1fr;
	align-items:           center;
	gap:                   0 0.8em;
	padding:               0.6em 1.4em;
	border-bottom:         1px solid rgba(255, 255, 255, 0.06);
	box-sizing:            border-box;
}

.tvd-events__item:last-child {
	border-bottom: none;
}

.tvd-events__item-date {
	font-weight:   700;
	color:         var(--e-global-color-primary);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.tvd-events__item-thumb {
	width:               3.2em;
	height:              3.2em;
	border-radius:       3px;
	background-size:     cover;
	background-position: center;
	flex-shrink:         0;
}

.tvd-events__item-thumb--empty {
	background: rgba(255, 255, 255, 0.06);
}

.tvd-events__item-body {
	display:        flex;
	flex-direction: column;
	gap:            0.1em;
	min-width:      0;
}

.tvd-events__item-title {
	font-weight:   600;
	color:         var(--tvd-text);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.tvd-events__item-meta {
	color:         var(--tvd-text-muted);
	font-size:     0.9em;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

/* Fortschrittsbalken */
.tvd-news__timer {
	height:        3px;
	background:    rgba(255, 255, 255, 0.1);
	border-radius: 2px;
	overflow:      hidden;
}

.tvd-news__timer-bar {
	height:        100%;
	width:         0%;
	background:    var(--e-global-color-primary);
	border-radius: 2px;
	/* transition wird per JS gesetzt */
}

/* -----------------------------------------------
   Modul: Uhr
----------------------------------------------- */

.tvd-clock {
	display:         flex;
	flex-direction:  column;
	position:        relative;
}

.tvd-clock__headline {
	position:       absolute;
	top:            0.7em;
	left:           1.6em;
	font-size:      0.7em;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color:          var(--e-global-color-primary);
}

.tvd-clock__body {
	flex:            1;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             0.25em;
	padding:         1em;
}

.tvd-clock--inline .tvd-clock__body {
	flex-direction: row;
	align-items:    baseline;
	flex-wrap:      wrap;
	gap:            0.4em 0.7em;
}

.tvd-clock__time {
	display:     flex;
	align-items: baseline;
	gap:         0.05em;
	line-height: 1;
}

.tvd-clock__hm {
	font-size:            var(--tvd-clock-time-size, 5em);
	font-weight:          700;
	letter-spacing:       -0.02em;
	color:                var(--tvd-text);
	font-variant-numeric: tabular-nums;
}

.tvd-clock__time-prefix,
.tvd-clock__time-suffix {
	font-size:      var(--tvd-clock-time-size, 5em);
	font-weight:    700;
	letter-spacing: -0.02em;
	color:          var(--tvd-text);
	line-height:    1;
}

.tvd-clock__sec-wrap {
	font-size:           2em;
	font-weight:         300;
	color:               var(--tvd-text-muted);
	align-self:          flex-end;
	padding-bottom:      0.12em;
	font-variant-numeric: tabular-nums;
}

.tvd-clock__sep {
	opacity: 0.5;
}

.tvd-clock__date {
	font-size:      var(--tvd-clock-date-size, 0.92em);
	color:          var(--tvd-text-muted);
	font-weight:    400;
	letter-spacing: 0.02em;
}

.tvd-clock__date-part {
	color: var(--tvd-text);
}

.tvd-clock__date-sep {
	color:   var(--tvd-text-muted);
	opacity: 0.45;
	margin:  0 0.15em;
}