/*
Theme Name: Extra Vitalkompass Child
Theme URI: https://bodnermedia.at
Description: Child Theme für Extra (Elegant Themes) - Design für vitalkompass.at. Basiert auf Extra 4.27.7.
Author: Bodner Media e.U.
Author URI: https://bodnermedia.at
Template: extra
Version: 1.0.0
Text Domain: extra-child
*/

/* ==========================================================================
   0. FARB- & LAYOUT-VARIABLEN
   Hier zentral anpassen -> wirkt sich auf das ganze Theme aus
   ========================================================================== */
:root{
	--ec-accent:        #17A9B8;   /* Haupt-Türkis (aus Logo/Asset-Paket) */
	--ec-accent-dark:   #128190;   /* Hover / dunkler */
	--ec-accent-light:  #E5F5F7;   /* helle Flächen / Badges */
	--ec-ink:           #606060;   /* Haupttext / Überschriften (Logo-Grau) */
	--ec-text:          #5A5A5A;   /* Fließtext */
	--ec-bg:            #F5F9FA;   /* Seitenhintergrund */
	--ec-white:         #FFFFFF;
	--ec-border:        #E7ECEE;
	--ec-radius-lg:     16px;
	--ec-radius-md:     12px;
	--ec-radius-sm:      8px;
	--ec-shadow:        0 6px 20px rgba(31,45,61,0.07);
	--ec-shadow-hover:  0 12px 28px rgba(31,45,61,0.14);
	--ec-font:          'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body{
	background: var(--ec-bg);
	font-family: var(--ec-font);
	color: var(--ec-text);
}

h1,h2,h3,h4,h5,h6,
.entry-title, .module-head, #et-info h2{
	font-family: var(--ec-font);
	color: var(--ec-ink);
	font-weight: 600;
}

a{ color: var(--ec-accent); }
a:hover{ color: var(--ec-accent-dark); }

.container{ max-width: 1240px; }

/* ==========================================================================
   1. TOP-BAR (Social / Trending)
   ========================================================================== */
#top-header{
	background: var(--ec-ink) !important;
	min-height: 38px;
}
#top-header .container{ padding-top: 6px; padding-bottom: 6px; }
#et-trending-label,
#et-trending a{ color: #fff; }

/* ==========================================================================
   2. HAUPT-HEADER
   ========================================================================== */
#main-header{
	background: var(--ec-white) !important;
	box-shadow: 0 2px 14px rgba(31,45,61,0.08);
	border-bottom: none;
	position: sticky;
	top: 0;
	z-index: 999;
}
body.admin-bar #main-header{ top: 32px; }
@media screen and (max-width: 782px){
	body.admin-bar #main-header{ top: 46px; }
}
#main-header .logo_container{ height: 84px; }
#main-header .logo_container img{ max-height: 58px; width: auto; }

#et-menu li a{
	color: var(--ec-ink) !important;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: 14px;
	transition: color .2s ease;
}
#et-menu li a:hover,
#et-menu li.current-menu-item > a{
	color: var(--ec-accent) !important;
}
#et-menu li li a{
	color: var(--ec-ink) !important;
}
#main-header #et-menu .menu-item-has-children:hover>ul{
	border-top: 3px solid var(--ec-accent);
	box-shadow: var(--ec-shadow-hover);
	border-radius: 0 0 var(--ec-radius-sm) var(--ec-radius-sm);
}
#et-menu li ul,
#et-menu li li ul{
	background: var(--ec-white) !important;
	min-width: 210px !important;
	width: auto !important;
	padding: 6px 0 !important;
}
#et-menu li li{
	border-bottom: 1px solid var(--ec-border) !important;
	padding: 0 !important;
}
#et-menu li li:last-child{ border-bottom: none !important; }
#et-menu li li a{
	color: var(--ec-ink) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: .04em;
	padding: 10px 18px !important;
	line-height: 1.4 !important;
	opacity: 1 !important;
}
#et-menu li li a:hover{
	color: var(--ec-accent) !important;
	background: var(--ec-accent-light) !important;
}

/* Menüpunkt als Button (Design > Menüs > CSS-Klasse "menu-btn") */
#et-menu li.menu-btn > a{
	background: var(--ec-accent) !important;
	color: #fff !important;
	padding: 10px 22px !important;
	border-radius: 30px !important;
	margin-left: 8px;
}
#et-menu li.menu-btn > a:hover{
	background: var(--ec-accent-dark) !important;
	color: #fff !important;
}

#et-search-icon:before,
.et-search-form-container{ color: var(--ec-accent); }
#et-search-icon.search-icon{
	position: relative;
	width: 20px;
	height: 20px;
	display: inline-block;
}
#et-search-icon.search-icon:before{ content: "" !important; }
#et-search-icon.search-icon:after{
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--ec-accent);
	-webkit-mask: url('assets/icons/icon-suche.svg') center/contain no-repeat;
	mask: url('assets/icons/icon-suche.svg') center/contain no-repeat;
}

/* ==========================================================================
   3. HERO / FEATURED SLIDER (.featured-posts-slider-module, NICHT .et_pb_slider!)
   ========================================================================== */
.featured-posts-slider-module{
	border-radius: var(--ec-radius-lg) !important;
	overflow: hidden;
	box-shadow: var(--ec-shadow);
	position: relative;
}
/* Kompass-Wasserzeichen dezent rechts hinter dem Hero-Bereich */
.featured-posts-slider-module:after{
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 45%;
	background: url('assets/backgrounds/hintergrund-kompass-hero-rechts.svg') right center/contain no-repeat;
	opacity: .5;
	pointer-events: none;
	z-index: 0;
}
.featured-posts-slider-module .carousel-item{
	border-radius: var(--ec-radius-lg);
	position: relative;
	z-index: 1;
}
.featured-posts-slider-module .carousel-item .post-content h3{
	font-weight: 700;
	font-size: 28px;
}
.featured-posts-slider-module .carousel-item .post-content h3 a{
	color: #fff !important;
}
.featured-posts-slider-module .post-content-box{
	border-radius: 0 0 var(--ec-radius-lg) var(--ec-radius-lg);
}
/* Bild-Verlauf-Overlay für bessere Lesbarkeit des Textes */
.featured-posts-slider-module .carousel-item:before{
	content: "";
	position: absolute;
	inset: 0;
	background: url('assets/backgrounds/stil-element-bild-overlay-verlauf.svg') bottom/100% 60% no-repeat;
	pointer-events: none;
	z-index: 1;
}
.featured-posts-slider-module .arrow{
	background: rgba(255,255,255,.9) !important;
	border-radius: 50% !important;
	width: 38px !important;
	height: 38px !important;
	opacity: 1 !important;
}
.featured-posts-slider-module .arrow:before{ color: var(--ec-ink) !important; }
.featured-posts-slider-module .arrow:hover{ background: var(--ec-accent) !important; }
.featured-posts-slider-module .arrow:hover:before{ color: #fff !important; }
.featured-posts-slider-module .et-pb-controllers{ text-align: right; }
.featured-posts-slider-module .et-pb-controllers a.et-pb-active-control{
	background: var(--ec-accent) !important;
}

/* Rubrik-Label (schräg abgeschnittenes Badge, z.B. "ERNÄHRUNG" im Hero) */
.ec-rubrik-label,
.featured-posts-slider-module .post-content .et_pb_extra_category,
.post-module .main-post .et_pb_extra_category,
article .et_pb_extra_category{
	display: inline-block;
	background: url('assets/backgrounds/stil-element-rubrik-label-schraeg.svg') left center/100% 100% no-repeat;
	color: #fff !important;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 8px 22px 8px 34px;
}

/* ==========================================================================
   4. ICON-GRID "Entdecke unsere Themen"
   ========================================================================== */
.ec-topics-section{
	max-width: 1240px;
	margin: 40px auto;
	padding: 0 20px;
	text-align: center;
}
.ec-topics-section h2{
	font-size: 24px;
	margin-bottom: 22px;
	position: relative;
	display: inline-block;
	padding-bottom: 10px;
}
.ec-topics-section h2:after{
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 60px;
	height: 3px;
	background: var(--ec-accent);
	border-radius: 3px;
}
.ec-topics-grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	text-align: left;
}
.ec-topic-card{
	background: var(--ec-white);
	border-radius: var(--ec-radius-md);
	box-shadow: var(--ec-shadow);
	padding: 26px 16px 20px;
	text-align: center;
	text-decoration: none;
	display: block;
	transition: transform .18s ease, box-shadow .18s ease;
}
.ec-topic-card:hover{
	transform: translateY(-4px);
	box-shadow: var(--ec-shadow-hover);
}
/* einfarbiger Kreis-Badge hinter jedem Themen-Icon */
.ec-icon-circle{
	display: block;
	width: 72px;
	height: 72px;
	margin: 0 auto 14px;
	background: url('assets/backgrounds/stil-element-iconkreis.svg') center/contain no-repeat;
	position: relative;
}
.ec-topic-card .ec-icon{
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 34px;
	height: 34px;
	color: var(--ec-accent);
}
.ec-topic-card .ec-icon svg{ width: 100%; height: 100%; }
.ec-topic-card .ec-icon img{ width: 100%; height: 100%; object-fit: contain; }
.ec-topic-card span:not(.ec-icon-circle){
	display: block;
	text-align: center;
	font-weight: 600;
	color: var(--ec-ink);
	font-size: 14px;
}

@media(max-width: 980px){
	.ec-topics-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   5. KATEGORIE-BOXEN (Extra Home-Layout-Module)
   ========================================================================== */
.et_pb_extra_column_main .et_pb_row{
	display: flex;
	flex-wrap: wrap;
}
.et_pb_extra_column_main .et_pb_column{
	display: flex;
	flex-direction: column;
}
.post-module.et_pb_extra_module{
	background: var(--ec-white);
	border-left: none !important;
	border-right: none !important;
	border-bottom: none !important;
	border-top-width: 4px !important;
	border-top-style: solid !important;
	border-radius: var(--ec-radius-md);
	box-shadow: var(--ec-shadow);
	overflow: hidden;
	padding-bottom: 0;
	transition: box-shadow .18s ease;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.post-module.et_pb_extra_module:hover{ box-shadow: var(--ec-shadow-hover); }
.post-module .module-head{
	background: transparent;
	border-bottom: 1px solid var(--ec-border);
	padding: 16px 22px;
	position: relative;
}
.post-module .module-head span.module-filter{ display: none; }
.post-module .main-post{ padding: 0 22px; flex: 1 0 auto; }
.post-module .main-post .header{
	border-radius: var(--ec-radius-sm);
	overflow: hidden;
	margin-top: 16px;
}
.post-module .main-post img{
	border-radius: var(--ec-radius-sm);
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
}
.post-module .entry-title a{ font-size: 17px; line-height: 1.35; }
.post-module .main-post .excerpt p,
.post-module .main-post .post-content p{
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
}
.post-module .posts-list{ padding: 4px 22px 6px; }
.post-module .posts-list li{
	border-top: 1px solid var(--ec-border);
	padding: 12px 0;
}
.post-module .posts-list .post-thumbnail img{ border-radius: var(--ec-radius-sm); }
.post-module .posts-list .entry-title a{
	font-size: 14px;
	font-weight: 600;
	color: var(--ec-ink);
}
.post-module .posts-list .entry-title a:hover{ color: var(--ec-accent); }

/* Akkordeon: weitere Artikel standardmäßig eingeklappt */
.post-module .posts-list.ec-collapsed{ display: none; }
.post-module .ec-toggle-more{
	display: flex;
	align-items: center;
	gap: 8px;
	width: calc(100% - 44px);
	margin: 4px 22px 18px;
	margin-top: auto;
	background: transparent;
	color: var(--ec-accent);
	border: 1px solid var(--ec-accent-light);
	border-radius: 30px;
	padding: 9px 16px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
	justify-content: center;
}
.post-module .ec-toggle-more:hover{ background: var(--ec-accent); color: #fff; }
.post-module .ec-toggle-plus{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	font-size: 15px;
	line-height: 1;
}

/* ==========================================================================
   6. SIDEBAR
   ========================================================================== */
.et_pb_extra_column_sidebar .et_pb_widget{
	background: var(--ec-white) !important;
	border-radius: var(--ec-radius-md);
	box-shadow: var(--ec-shadow);
	padding: 22px 24px;
	margin-bottom: 22px;
	border: none;
}
.et_pb_extra_column_sidebar .et_pb_widget h3,
.et_pb_extra_column_sidebar .et_pb_widget h4,
.et_pb_extra_column_sidebar .widgettitle{
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .04em;
	border-bottom: 2px solid var(--ec-accent-light);
	padding-bottom: 10px;
	margin-bottom: 12px;
}
.et_pb_extra_column_sidebar .et_pb_widget ul li{
	border-bottom: 1px solid var(--ec-border);
	padding: 9px 0;
}
.et_pb_extra_column_sidebar .et_pb_widget ul li:last-child{ border-bottom: none; }
.et_pb_extra_column_sidebar .et_pb_widget ul li a{ color: var(--ec-text); }
.et_pb_extra_column_sidebar .et_pb_widget ul li a:hover{ color: var(--ec-accent); }

/* Ranking-Icons (1-5) fürs "Eure Favoriten"-Widget, falls im Widget-Text/HTML genutzt */
.ec-ranking-icon{
	display: inline-flex;
	width: 22px;
	height: 22px;
	vertical-align: middle;
	margin-right: 6px;
}
.ec-ranking-icon img{ width: 100%; height: 100%; }

/* ==========================================================================
   7. ADSENSE-CONTAINER (Sidebar, Homepage-Leaderboard, Themen-Grid, Footer)
   ========================================================================== */
.ec-ad-container{
	margin: 0 0 22px;
	text-align: center;
}
.ec-ad-label{
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--ec-text);
	opacity: .6;
	margin-bottom: 6px;
}
.ec-ad-home_leaderboard,
.ec-ad-topics_slot{
	max-width: 1240px;
	margin: 24px auto;
	padding: 0 20px;
}
.ec-ad-footer_banner{
	max-width: 1240px;
	margin: 0 auto 24px;
	padding: 0 20px;
}
.ec-ad-sidebar_skyscraper,
.ec-ad-sidebar_rectangle{
	background: var(--ec-white);
	border-radius: var(--ec-radius-md);
	box-shadow: var(--ec-shadow);
	padding: 16px;
}

/* ==========================================================================
   8. "ENTDECKE UNSERE THEMEN"-BUTTON / "MEHR ENTDECKEN" / "MEHR ANZEIGEN"
   ========================================================================== */
.et_pb_button,
button, input[type="submit"],
.ec-btn-entdecken{
	border-radius: 30px !important;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-weight: 600 !important;
	border: none;
}
.ec-btn-entdecken{
	display: inline-block;
	background: url('assets/backgrounds/stil-element-button-mehr-entdecken.svg') center/100% 100% no-repeat;
	color: #fff !important;
	padding: 18px 40px;
	text-decoration: none;
	font-size: 13px;
}
.ec-btn-entdecken:hover{ filter: brightness(1.08); }

/* ==========================================================================
   9. NEWSLETTER-SEKTION ("Bleib auf Kurs")
   ========================================================================== */
.ec-newsletter-section{
	background: var(--ec-accent) url('assets/backgrounds/hintergrund-newsletter-band.svg') center/cover no-repeat;
	padding: 34px 20px;
	color: #fff;
	margin: 40px 0 0;
}
.ec-newsletter-section .container{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.ec-newsletter-section h3{ color: #fff; margin: 0 0 4px; }
.ec-newsletter-section p{ color: rgba(255,255,255,.9); margin: 0; }
.ec-newsletter-form{ display: flex; gap: 10px; flex-wrap: wrap; }
.ec-newsletter-form input[type="email"]{
	border-radius: 30px;
	border: none;
	padding: 12px 18px;
	min-width: 260px;
}
.ec-newsletter-form button{
	background: var(--ec-ink);
	color: #fff;
	padding: 12px 26px;
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
#footer{
	background: var(--ec-ink) url('assets/backgrounds/hintergrund-footer-dunkel-kompass.svg') top right/contain no-repeat !important;
	position: relative;
}
#footer:before{
	content: "";
	position: absolute;
	left: 20px; bottom: 20px;
	width: 140px; height: 140px;
	background: url('assets/backgrounds/hintergrund-kompass-wasserzeichen.svg') center/contain no-repeat;
	opacity: .12;
	pointer-events: none;
}
#footer, #footer a, #footer-bottom, #footer-info{ color: rgba(255,255,255,.75) !important; }
#footer a:hover{ color: #fff !important; }
#footer .et_pb_widget h3, #footer .widgettitle{
	color: #fff !important;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: .04em;
}

/* ==========================================================================
   11. HINTERGRUND-WASSERZEICHEN (dezentes Kompass-Muster im Content)
   ========================================================================== */
.ec-topics-section{ position: relative; }
.ec-topics-section:before{
	content: "";
	position: absolute;
	inset: -20px 0 auto auto;
	width: 220px; height: 220px;
	background: url('assets/backgrounds/hintergrund-kompass-pattern.svg') center/contain no-repeat;
	opacity: .06;
	pointer-events: none;
	z-index: -1;
}

/* ==========================================================================
   12. EINZELARTIKEL-ANSICHT
   ========================================================================== */
body.single article .post-thumbnail img,
body.single article img.wp-post-image,
body.single .featured-image img{
	border-radius: var(--ec-radius-lg);
}
.related-posts .post-meta,
.related-posts .post-date,
.related-posts .updated,
.related-posts .published{
	display: none !important;
}

/* ==========================================================================
   13. MOBILES MENÜ (siehe assets/mobile-menu.js)
   ========================================================================== */
@media (max-width: 980px){
	#et-mobile-navigation nav ul li.ec-mobile-secondary{ display: none; }
	#et-mobile-navigation nav.ec-secondary-open li.ec-mobile-secondary{ display: block; }
	#et-mobile-navigation nav ul li.ec-mobile-secondary a{
		font-size: 63% !important;
		padding-top: 8px !important;
		padding-bottom: 8px !important;
		opacity: .85;
	}
	#et-mobile-navigation nav ul li.ec-mobile-more-toggle{ list-style: none; }
	#et-mobile-navigation nav ul li.ec-mobile-more-toggle button{
		background: transparent;
		border: none;
		color: inherit;
		font: inherit;
		font-size: 80%;
		letter-spacing: .04em;
		text-transform: uppercase;
		padding: 12px 0;
		width: 100%;
		text-align: left;
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 8px;
	}
	#et-mobile-navigation nav ul li.ec-mobile-more-toggle .ec-toggle-plus{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 18px;
		height: 18px;
		border: 1px solid currentColor;
		border-radius: 50%;
		font-size: 13px;
		line-height: 1;
	}
}

/* ==========================================================================
   14. BURGER-MENÜ nur mobil
   ========================================================================== */
@media (min-width: 981px){
	#et-mobile-navigation{ display: none !important; }
	#et-secondary-nav > *:not(#et-trending){ display: none !important; }
}

/* ==========================================================================
   15. SLIDER MOBIL
   ========================================================================== */
@media (max-width: 980px){
	.featured-posts-slider-module .carousel-item{
		min-height: 320px;
		height: auto !important;
		background-size: cover !important;
		background-position: center !important;
		position: relative;
	}
	.featured-posts-slider-module .carousel-item img{
		width: 100%;
		height: 320px;
		object-fit: cover;
	}
	.featured-posts-slider-module .post-content-box{
		position: absolute !important;
		left: 0; right: 0; bottom: 0;
		top: auto !important;
		background: linear-gradient(transparent, rgba(20,30,40,.85)) !important;
		padding: 40px 18px 16px !important;
		border-radius: 0 0 var(--ec-radius-lg) var(--ec-radius-lg);
	}
	.featured-posts-slider-module .post-content-box h3,
	.featured-posts-slider-module .post-content-box h3 a,
	.featured-posts-slider-module .post-content-box .post-content h3 a{
		color: #fff !important;
		font-size: 19px;
	}
	.featured-posts-slider-module .post-content-box .post-meta,
	.featured-posts-slider-module .post-content-box .post-meta a{
		color: rgba(255,255,255,.85) !important;
	}
	.ec-newsletter-section .container{ flex-direction: column; text-align: center; }
}