/*
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.43
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; }
}

/* Logo oben mittig, Menü darunter zentriert - eigenes 2-Zeilen-Layout
   statt Extras Standard "Logo links, Menü rechts in einer Zeile" */
#main-header .container{
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	padding-top: 16px;
	padding-bottom: 10px;
}
/* dezenter Kompass-Hintergrund hinter dem gesamten Header-Bereich */
#main-header .container:before{
	content: "";
	position: absolute;
	inset: 0;
	background: url('assets/backgrounds/01_kompass-streuung-hintergrund_transparent.png') center/cover no-repeat;
	opacity: .85;
	pointer-events: none;
	z-index: 0;
}
#main-header a.logo{
	position: static;
	margin: 0 0 10px;
	z-index: 1;
}
#main-header a.logo,
#main-header .logo{
	height: 160px !important;
	width: auto !important;
	overflow: visible !important;
	margin: 0 0 16px !important;
}
#main-header a.logo img,
#main-header .logo img,
#main-header #logo{
	height: 160px !important;
	width: auto !important;
	max-height: none !important;
	max-width: none !important;
}
/* Extras eigenes Sticky-Header-JS animiert die Logo-Breite (nicht Höhe)
   UND setzt dem Header per data-fixed-height (Theme Option, Standard
   80px) eine feste Höhe beim Scrollen - das reicht für unser
   zweizeiliges Layout (Logo + Menü darunter) nicht, daher rennt das
   Menü ins Logo. Beides hier fest überschrieben.
   WICHTIG (verifiziert im Extra-JS, FixedNav.cacheElements/
   activateFixedPosition): "et-fixed-header" landet auf #page-container
   (this.$nav_container), NICHT auf #main-header selbst - daher als
   Nachfahren-Selektor mit #page-container als Anker, nicht als
   kombinierter Selektor auf #main-header. */
#page-container.et-fixed-header #main-header{
	height: auto !important;
	min-height: 150px !important;
}
#page-container.et-fixed-header #main-header .logo,
#page-container.et-fixed-header #main-header .logo img{
	height: 100px !important;
	width: auto !important;
	margin-bottom: 10px !important;
}
#et-navigation{
	position: relative;
	z-index: 1;
}
@media(min-width: 981px){
	#et-navigation{
		width: 100%;
		display: flex;
		justify-content: center;
	}
	#et-menu.nav{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
}
/* Hinweis: keine eigene "Burger-Menü only"-Regel mehr hier - #et-menu
   wird laut Extra-JS per .clone() auch mit gleicher ID ins Mobil-Menü
   kopiert; ein display:none auf #et-menu träfe dadurch auch die
   funktionierende Mobil-Kopie und zerschießt sie. Extras eigenes
   Standardverhalten (Desktop-Zeile ausblenden auf Mobil) bleibt daher
   unangetastet - unsere Zentrierung oben ist ohnehin auf Desktop
   beschränkt (@media min-width:981px). */

#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: 1 großer Teaser + 3 kleine Teaser (eigene Struktur, kein
   Extra-eigenes Slider-Modul mehr - siehe ec_render_hero() in functions.php)
   ========================================================================== */
.ec-hero{
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 20px;
	position: relative;
	margin: 0 0 30px;
}
.ec-hero:before{
	content: "";
	position: absolute;
	inset: 0 38% 0 0;
	background: url('assets/backgrounds/01_kompass-streuung-hintergrund_transparent.png') center/cover no-repeat;
	opacity: .85;
	pointer-events: none;
	z-index: -1;
}
.ec-hero-main{
	position: relative;
	border-radius: var(--ec-radius-lg);
	overflow: hidden;
	box-shadow: var(--ec-shadow);
	min-height: 480px;
}
.ec-hero-main a{ display: block; height: 100%; position: relative; }
.ec-hero-main img{
	width: 100%;
	height: 480px;
	object-fit: cover;
	display: block;
}
.ec-hero-main:before{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(15,20,25,.85) 0%, rgba(15,20,25,.35) 45%, rgba(15,20,25,0) 70%);
	pointer-events: none;
}
.ec-hero-main .ec-rubrik-label{ position: absolute; top: 24px; left: 24px; }
.ec-hero-main-content{
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 70px 34px 30px;
}
.ec-hero-main-content h2{ color: #fff; font-size: 34px; line-height: 1.2; margin: 0 0 10px; }
.ec-hero-main-content p{ color: rgba(255,255,255,.9); margin: 0 0 10px; max-width: 70%; font-size: 15px; }
.ec-hero-meta{ color: rgba(255,255,255,.75); font-size: 12px; }

.ec-hero-side{
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.ec-hero-side-item{
	position: relative;
	display: block;
	border-radius: var(--ec-radius-md);
	overflow: hidden;
	box-shadow: var(--ec-shadow);
	flex: 1;
	min-height: 145px;
}
.ec-hero-side-item img{
	width: 100%;
	height: 100%;
	min-height: 145px;
	object-fit: cover;
	position: absolute;
	inset: 0;
}
.ec-hero-side-item:before{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(15,20,25,.85), rgba(15,20,25,.05) 65%);
}
.ec-hero-side-item .ec-rubrik-label{ position: relative; z-index: 1; margin: 14px 0 0 14px; font-size: 10px; }
.ec-hero-side-item h3{
	position: relative;
	z-index: 1;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	margin: 30px 14px 14px;
	line-height: 1.35;
}
@media(max-width: 980px){
	.ec-hero{ padding: 0 20px; }
	.ec-hero-main, .ec-hero-main img{ min-height: 340px; height: 340px; }
}
@media(max-width: 780px){
	.ec-hero{ grid-template-columns: 1fr; padding: 0 16px; }
	.ec-hero-side{ flex-direction: row; overflow-x: auto; }
	.ec-hero-side-item{ min-width: 220px; }
	.ec-hero-main-content h2{
		font-size: 20px;
		font-weight: 600;
		line-height: 1.3;
	}
	.ec-hero-main-content{ padding: 40px 20px 20px; }
}

/* ==========================================================================
   3f. "AKTUELLE ARTIKEL"-GRID (großer Feature-Post + Grid + Pagination)
   ========================================================================== */
.ec-content-grid{
	max-width: 1240px;
	margin: 40px auto;
	padding: 0 20px;
	position: relative;
}
.ec-content-grid:before{
	content: "";
	position: absolute;
	inset: -10px 0 auto auto;
	width: 260px;
	height: 200px;
	background: url('assets/backgrounds/01_kompass-streuung-hintergrund_transparent.png') top right/contain no-repeat;
	opacity: .7;
	pointer-events: none;
	z-index: -1;
}
.ec-category-row{
	max-width: 1240px;
	margin: 20px auto 0;
	padding: 0 20px;
	position: relative;
}
.ec-category-row:before{
	content: "";
	position: absolute;
	inset: -10px 0 auto auto;
	width: 200px;
	height: 160px;
	background: url('assets/backgrounds/01_kompass-streuung-hintergrund_transparent.png') top right/contain no-repeat;
	opacity: .6;
	pointer-events: none;
	z-index: -1;
}
.ec-content-grid > h2{
	font-size: 22px;
	margin-bottom: 20px;
}
.ec-category-row h2{
	font-size: 20px;
	margin-bottom: 18px;
}
.ec-category-row-inner{ margin-bottom: 0; }
.ec-content-grid-inner{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.ec-content-grid article{
	background: var(--ec-white);
	border-radius: var(--ec-radius-md);
	box-shadow: var(--ec-shadow);
	overflow: hidden;
	transition: box-shadow .18s ease;
}
.ec-content-grid article:hover{ box-shadow: var(--ec-shadow-hover); }
.ec-content-grid .ec-grid-feature{ grid-column: span 3; display: grid; grid-template-columns: 1.2fr 1fr; }
.ec-content-grid .ec-grid-feature .ec-grid-thumb img{ height: 100%; min-height: 260px; }
.ec-grid-thumb{ display: block; position: relative; }
.ec-grid-thumb img{ width: 100%; height: 190px; object-fit: cover; display: block; }
.ec-grid-thumb .ec-rubrik-label{ position: absolute; top: 14px; left: 14px; }
.ec-grid-content{ padding: 18px 20px; display: flex; flex-direction: column; }
.ec-grid-content h3{ font-size: 16px; margin: 0 0 8px; line-height: 1.35; }
.ec-grid-content h3 a{ color: var(--ec-ink); }
.ec-grid-content h3 a:hover{ color: var(--ec-accent); }
.ec-grid-meta{ font-size: 12px; color: var(--ec-text); opacity: .75; margin-bottom: 10px; }
.ec-grid-content p{ font-size: 14px; margin: 0 0 14px; }
@media(max-width: 980px){
	.ec-content-grid-inner{ grid-template-columns: repeat(2, 1fr); }
	.ec-content-grid .ec-grid-feature{ grid-column: span 2; grid-template-columns: 1fr; }
}
@media(max-width: 620px){
	.ec-content-grid-inner{ grid-template-columns: 1fr; }
	.ec-content-grid .ec-grid-feature{ grid-column: span 1; }
}

.ec-pagination{ text-align: center; margin-top: 30px; }
.ec-pagination .page-numbers{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0 4px;
	border-radius: 50%;
	background: var(--ec-white);
	color: var(--ec-ink);
	box-shadow: var(--ec-shadow);
	font-weight: 600;
	font-size: 14px;
}
.ec-pagination .page-numbers.current,
.ec-pagination .page-numbers:hover{ background: var(--ec-accent); color: #fff; }
.ec-pagination .page-numbers.dots{ box-shadow: none; background: none; }

/* Rubrik-Label (schräg abgeschnittenes Badge, z.B. "ERNÄHRUNG" im Hero).
   Nutzt die SVG-Form als CSS-Maske statt als fixes Bild, damit die
   per-Kategorie-Farbe (inline background-color, aus Extras eigener
   Kategorie-Farbe via extra_get_post_category_color()) tatsächlich
   durchschlägt statt von der Original-SVG-Farbe überdeckt zu werden. */
.ec-rubrik-label,
.post-module .main-post .et_pb_extra_category,
article .et_pb_extra_category{
	display: inline-block;
	background-color: var(--ec-accent); /* Fallback, falls keine Inline-Farbe gesetzt ist */
	-webkit-mask: url('assets/backgrounds/stil-element-rubrik-label-schraeg.svg') left center/100% 100% no-repeat;
	mask: 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: 24px;
	text-align: left;
}
.ec-topic-card{
	background: var(--ec-white);
	border-radius: var(--ec-radius-md);
	box-shadow: var(--ec-shadow);
	text-align: center;
	text-decoration: none;
	display: block;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}
.ec-topic-card:hover{
	transform: translateY(-4px);
	box-shadow: var(--ec-shadow-hover);
}
/* Kein Foto (noch) vorhanden: Icon-Kreis mittig auf weißer Karte, wie bisher */
.ec-topic-card:not(.has-image){ padding: 30px 16px 22px; }
.ec-topic-card:not(.has-image) .ec-icon-circle{ margin: 0 auto 14px; }

/* Foto vorhanden: Kreis-Badge oben links ÜBER dem Bild verankert (nicht
   an der Karte - .ec-topic-photo braucht dafür position:relative, sonst
   "schwebt" das Icon zur nächsten positionierten Elternebene hoch). */
.ec-topic-photo{
	display: block;
	width: 100%;
	height: 260px;
	background-size: cover;
	background-position: center;
	position: relative;
}
.ec-topic-photo .ec-icon-circle{
	position: absolute;
	top: 16px;
	left: 16px;
	margin: 0;
	box-shadow: 0 4px 10px rgba(0,0,0,.3);
}
.ec-topic-card.has-image .ec-topic-label{
	padding: 16px;
	text-align: center;
	font-size: 15px;
}

/* einfarbiger Kreis-Badge hinter jedem Themen-Icon */
.ec-icon-circle{
	display: block;
	width: 60px;
	height: 60px;
	background: url('assets/backgrounds/stil-element-iconkreis.svg') center/contain no-repeat;
	position: relative;
	flex-shrink: 0;
}
.ec-topic-card .ec-icon{
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 28px;
	height: 28px;
	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-label{
	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); }
}
@media(max-width: 620px){
	.ec-topics-grid{ grid-template-columns: 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;
}

/* ==========================================================================
   5b. TABBED-POSTS-MODUL (dein Home-Layout nutzt dieses Modul statt der
   einfachen "Posts"-Boxen - gleiche Karten-Optik, plus Tab-Leiste ("ALLE" etc.)
   ========================================================================== */
.tabbed-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;
	transition: box-shadow .18s ease;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.tabbed-post-module.et_pb_extra_module:hover{ box-shadow: var(--ec-shadow-hover); }
.tabbed-post-module .tabs{
	padding: 14px 22px 0;
	border-bottom: 1px solid var(--ec-border);
}
.tabbed-post-module .tabs ul{ display: flex; gap: 18px; flex-wrap: wrap; }
.tabbed-post-module .tabs ul li{
	list-style: none;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding-bottom: 12px;
	cursor: pointer;
	color: var(--ec-text);
	border-bottom: 2px solid transparent;
	opacity: .7;
}
.tabbed-post-module .tabs ul li.et_pb_active_tab,
.tabbed-post-module .tabs ul li:hover{
	color: var(--ec-accent);
	border-bottom-color: var(--ec-accent);
	opacity: 1;
}
.tabbed-post-module .tab-nav .arrow{ display: none; }
.tabbed-post-module .tab-contents{ flex: 1 0 auto; display: flex; }
.tabbed-post-module .tab-content{ width: 100%; }
/* Restliche Innenabstände/Excerpt/Bild-Styles teilen sich mit den
   einfachen Boxen dieselbe Vorlage (module-posts-content.php) - siehe
   Abschnitt 5, gilt hier automatisch mit. */

/* Kompletter Blog-Feed (volle Artikelliste inkl. Pagination) auf der
   Startseite ausblenden - dort übernehmen Themen-Grid + Kategorie-/
   Tabbed-Boxen die Artikel-Darstellung. Auf Kategorie-/Archivseiten
   bleibt er aktiv (dort ist er die eigentliche Artikelliste). */
body.home .et_pb_extra_column_main .posts-blog-feed-module,
body.blog .et_pb_extra_column_main .posts-blog-feed-module{
	display: none;
}

/* ==========================================================================
   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 */
.ec-ranking-icon{
	display: inline-flex;
	width: 22px;
	height: 22px;
	vertical-align: middle;
	margin-right: 6px;
	flex-shrink: 0;
}
.ec-ranking-icon img{ width: 100%; height: 100%; }

.ec-sidebar-box-icon{
	display: inline-flex;
	width: 18px;
	height: 18px;
	vertical-align: -3px;
	margin-right: 4px;
	color: var(--ec-accent);
}
.ec-sidebar-box-icon img{ width: 100%; height: 100%; }

.ec-mini-list{ list-style: none; margin: 0; padding: 0; }
.ec-mini-list li a{
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--ec-text);
}
.ec-mini-list li a img{
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--ec-radius-sm);
	flex-shrink: 0;
}
.ec-mini-list li a span{ font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ec-ink); }
.ec-mini-list li a:hover span{ color: var(--ec-accent); }

/* "Folge uns"-Icons in der Sidebar (heller Kontext, eigenes Styling
   getrennt vom dunklen Footer - sonst unsichtbar auf weißer Box) */
.ec-sidebar-social{ display: flex; gap: 10px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.ec-sidebar-social li{ margin: 0 !important; border: none !important; padding: 0 !important; }
.ec-sidebar-social a{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--ec-accent-light);
	color: var(--ec-accent);
	font-size: 16px;
}
.ec-sidebar-social a:hover{ background: var(--ec-accent); color: #fff; }

.ec-ranking-list{ list-style: none; margin: 0; padding: 0; }
.ec-ranking-list li{ display: flex; align-items: center; }
.ec-ranking-list li a{ font-size: 13px; font-weight: 600; color: var(--ec-ink); line-height: 1.4; }
.ec-ranking-list li a:hover{ color: var(--ec-accent); }

/* ==========================================================================
   7. ADSENSE-CONTAINER (Sidebar, Homepage-Leaderboard, Themen-Grid, Footer,
   Kategorie-/Archivseiten, Artikel oben/unten)
   ========================================================================== */
.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;
}
.ec-ad-archive_top{
	max-width: 1240px;
	margin: 0 auto 26px;
	padding: 0 20px;
}
.ec-ad-post_above,
.ec-ad-post_below{
	margin: 26px 0;
}

/* ==========================================================================
   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: var(--ec-accent);
	white-space: nowrap;
	color: #fff !important;
	padding: 14px 32px;
	text-decoration: none;
	font-size: 13px;
}
.ec-btn-entdecken:hover{ background: var(--ec-accent-dark); }

/* ==========================================================================
   9. NEWSLETTER-SEKTION ("Bleib auf Kurs")
   ========================================================================== */
.ec-newsletter-section{
	background-color: var(--ec-accent);
	background-image: url('assets/backgrounds/02_newsletter-band-hintergrund.png');
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 100%;
	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-color: #252525 !important;
	background-image: url('assets/backgrounds/03_footer-hintergrund_252525.png') !important;
	background-repeat: no-repeat !important;
	background-position: right 50px top 10px !important;
	background-size: 500px auto !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: .25;
	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;
}

.ec-footer-columns{
	display: grid;
	grid-template-columns: 1.3fr repeat(3, 1fr);
	gap: 30px;
	padding: 50px 0 36px;
}
.ec-footer-col h4{
	color: #fff !important;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: .06em;
	margin: 0 0 16px;
}
.ec-footer-col ul{ list-style: none; margin: 0; padding: 0; }
.ec-footer-col ul li{ margin-bottom: 10px; }
.ec-footer-brand img{ max-height: 68px; width: auto; margin-bottom: 16px; }
.ec-footer-brand p{ font-size: 13px; max-width: 280px; line-height: 1.6; }
.ec-footer-social{ display: flex; gap: 10px; flex-wrap: wrap; }
.ec-footer-social li{ margin: 0 !important; }
.ec-footer-social a{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,.1);
}
.ec-footer-social a:hover{ background: var(--ec-accent); }
@media(max-width: 780px){
	.ec-footer-columns{ grid-template-columns: 1fr 1fr; }
}
@media(max-width: 480px){
	.ec-footer-columns{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   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/01_kompass-streuung-hintergrund_transparent.png') center/cover no-repeat;
	opacity: .7;
	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;
}
/* CSS-Fallback zu assets/meta-cleanup.js (falls JS deaktiviert ist):
   Autoren-Box + Bewertungs-Elemente komplett ausblenden. Die einzelnen
   Meta-Zeilen-Links selbst werden per JS entfernt, da CSS den
   anhängenden " | "-Trenner-Text nicht mit wegbekommt. */
.author-box,
.rating-stars,
.post-rating-stars,
.score-bar-bg{ 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; }
}

/* ==========================================================================
   16. BILD-HOVER: leichter Zoom (wie bei yourdogmagazin.at) auf allen
   Artikel-Vorschaubildern - Hero, Themen-Grid-Karten, "Aktuelle Artikel",
   Kategorie-/Archiv-Grid.
   ========================================================================== */
.ec-hero-main a,
.ec-hero-side-item,
.ec-grid-thumb,
.post-module .main-post .header,
.post-module .posts-list .post-thumbnail,
.tabbed-post-module .main-post .header{
	overflow: hidden;
}
.ec-hero-main img,
.ec-hero-side-item img,
.ec-grid-thumb img,
.post-module .main-post .header img,
.post-module .posts-list .post-thumbnail img,
.tabbed-post-module .main-post .header img{
	transition: transform .35s ease;
}
.ec-hero-main a:hover img,
.ec-hero-side-item:hover img,
.ec-grid-thumb:hover img,
.post-module .main-post .header:hover img,
.post-module .posts-list .post-thumbnail:hover img,
.tabbed-post-module .main-post .header:hover img{
	transform: scale(1.06);
}

/* ==========================================================================
   17. KATEGORIE-/ARCHIVSEITEN
   Läuft jetzt über eine eigene category.php mit eigenem Markup - kein
   Bezug mehr zu Extras Masonry-Blog-Feed-Modul, das wiederholt mit
   unserem CSS kollidiert hat (ungleiche Kartenhöhen, große Lücken).
   ========================================================================== */
.ec-archive-title{
	max-width: 1240px;
	margin: 20px auto;
	padding: 0 20px;
	font-size: 26px;
}
.ec-archive-grid{
	max-width: 1240px;
	margin: 0 auto 30px;
	padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px 26px;
}
.ec-archive-card{
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--ec-white);
	border-radius: var(--ec-radius-md);
	box-shadow: var(--ec-shadow);
	overflow: hidden;
	transition: box-shadow .18s ease;
}
.ec-archive-card:hover{ box-shadow: var(--ec-shadow-hover); }
.ec-archive-thumb{ display: block; overflow: hidden; }
.ec-archive-thumb img{
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.ec-archive-card:hover .ec-archive-thumb img{ transform: scale(1.06); }
.ec-archive-content{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 18px 20px 20px;
}
.ec-archive-card-title{
	font-size: 16px;
	line-height: 1.35;
	margin: 0 0 6px;
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	min-height: calc(3 * 1.35em);
}
.ec-archive-card-title a{ color: var(--ec-ink); }
.ec-archive-card-title a:hover{ color: var(--ec-accent); }
.ec-archive-cats{
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--ec-accent);
	margin: 0 0 8px;
	font-weight: 600;
}
.ec-archive-cats a{ color: var(--ec-accent); text-decoration: none; }
.ec-archive-cats a:hover{ text-decoration: underline; }
.ec-archive-excerpt{
	flex: 1 1 auto;
	font-size: 14px;
	line-height: 1.6;
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	min-height: calc(3 * 1.6em);
}
.ec-archive-more{
	margin-top: 14px;
	align-self: flex-start;
	display: inline-block;
	color: var(--ec-accent);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
}
.ec-archive-more:hover{ color: var(--ec-accent-dark); }
.ec-archive-none{
	max-width: 1240px;
	margin: 0 auto 40px;
	padding: 30px 20px;
	background: var(--ec-white);
	border-top: 4px solid var(--ec-accent);
	border-radius: var(--ec-radius-md);
	box-shadow: var(--ec-shadow);
}
@media(max-width: 620px){
	.ec-archive-grid{ grid-template-columns: 1fr; }
}


/* ==========================================================================
   18. TEILEN-LEISTE (Artikelende): eigene Leiste mit WhatsApp/Facebook/
   Twitter/LinkedIn/Mail. Extras eigene Teilen-Leiste + Sternebewertung
   dafür ausblenden.
   ========================================================================== */
.ed-social-share-icons{ display: none !important; }

.ec-share-links{
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 30px 0;
	padding-top: 20px;
	border-top: 1px solid var(--ec-border);
}
.ec-share-title{
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ec-ink);
	margin-right: 4px;
}
.ec-share-link{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--ec-accent-light);
	color: var(--ec-accent);
	transition: background .15s ease, color .15s ease;
}
.ec-share-link svg{ width: 18px; height: 18px; }
.ec-share-link:hover{ background: var(--ec-accent); color: #fff; }
.ec-share-facebook:hover{ background: #1877F2; color: #fff; }
.ec-share-twitter:hover{ background: #000; color: #fff; }
.ec-share-linkedin:hover{ background: #0A66C2; color: #fff; }
.ec-share-mail:hover{ background: var(--ec-ink); color: #fff; }

/* WhatsApp: eigene, gelieferte Grafik (grau/grün) statt generischer
   Kreis-Badge - Grafik bringt ihre eigene Fläche + Farbe schon mit. */
.ec-share-whatsapp{ background: none; width: 40px; height: 40px; }
.ec-share-whatsapp .ec-share-icon-default,
.ec-share-whatsapp .ec-share-icon-hover{ width: 40px; height: 40px; }
.ec-share-whatsapp .ec-share-icon-hover{ display: none; }
.ec-share-whatsapp:hover .ec-share-icon-default{ display: none; }
.ec-share-whatsapp:hover .ec-share-icon-hover{ display: block; }

/* ==========================================================================
   19. TWITTER-ICON überall ausblenden (Header, mobiles Menü, Footer,
   Sidebar) - unabhängig davon, ob es unter Theme Options noch aktiv ist
   ========================================================================== */
.et-social-icon.et-social-twitter,
a[href*="twitter.com"].et-social-icon,
.et-extra-icon-twitter,
li.et-social-icon.et-social-twitter{
	display: none !important;
}

/* ==========================================================================
   20. "FOLGE UNS"-SIDEBAR-BOX entfernt (auf Wunsch komplett raus, siehe
   ec_render_sidebar_with_ads() in functions.php - der Funktionsaufruf
   wurde entfernt, dieser CSS-Absatz ist nur zur Doku)
   ========================================================================== */

/* ==========================================================================
   21. HERO-TEASER-BESCHRIFTUNG: kräftigerer Verlauf für bessere Lesbarkeit
   ========================================================================== */
.ec-hero-side-item:before{
	background: linear-gradient(to top, rgba(10,15,20,.95) 0%, rgba(10,15,20,.55) 50%, rgba(10,15,20,.15) 100%) !important;
}
.ec-hero-side-item h3{
	text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.ec-hero-main-content h2,
.ec-hero-main-content p{
	text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.ec-hero-main:before{
	background: linear-gradient(to top, rgba(10,15,20,.92) 0%, rgba(10,15,20,.5) 45%, rgba(10,15,20,0) 75%) !important;
}

/* ==========================================================================
   22. MOBIL: Hero-Seitenteaser untereinander statt Slider/horizontales Scrollen
   ========================================================================== */
@media(max-width: 780px){
	.ec-hero-side{
		flex-direction: column !important;
		overflow-x: visible !important;
	}
	.ec-hero-side-item{
		min-width: 0 !important;
		min-height: 160px;
	}
}

/* ==========================================================================
   23. HERO MOBIL: nur Überschrift, Text/Meta weg (zu wenig Platz/Kontrast)
   ========================================================================== */
@media(max-width: 780px){
	.ec-hero-main-content p,
	.ec-hero-meta{
		display: none !important;
	}
}