/*
Theme Name: Extra Child - yourdog
Theme URI: https://bodnermedia.at
Description: Child Theme für Extra (Elegant Themes) - modernisiertes, "peppigeres" Design für yourdog.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:        #17A2A0;   /* Haupt-Türkis */
	--ec-accent-dark:   #128784;   /* Hover / dunkler */
	--ec-accent-light:  #E6F7F6;   /* helle Flächen / Badges */
	--ec-ink:           #1F2D3D;   /* Haupttext / Überschriften */
	--ec-text:          #4B5A67;   /* Fließtext */
	--ec-bg:            #F5F8F9;   /* 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) -> dezenter, dunkler, schmaler
   ========================================================================== */
#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 -> flach, hell, sticky, mit Pill-CTA
   ========================================================================== */
#main-header{
	background: #18B6BE !important; /* Türkis passend zum Icon-Set */
	box-shadow: 0 2px 14px rgba(31,45,61,0.10);
	border-bottom: none;
	position: sticky;
	top: 0;
	z-index: 999;
}
/* Eingeloggt: WordPress-Adminleiste nicht überlappen */
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: 54px; width: auto; }

#et-menu li a{
	color: #FFFFFF !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-ink) !important;
}
/* Dropdown-Links behalten dunkle Schrift (heller Hintergrund) */
#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);
}

/* Dropdown: hell, lesbar, kompakt (statt dunkel & wuchtig) */
#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: im WP-Menü-Editor (Design > Menüs > Screen Options > CSS-Klassen aktivieren)
   der gewünschte Menüpunkt (z.B. "E-Paper lesen") mit der CSS-Klasse "menu-btn" versehen */
#et-menu li.menu-btn > a{
	background: #FFFFFF !important;
	color: var(--ec-accent) !important;
	padding: 10px 22px !important;
	border-radius: 30px !important;
	margin-left: 8px;
}
#et-menu li.menu-btn > a:hover{
	background: var(--ec-ink) !important;
	color: #fff !important;
}

#et-search-icon:before,
.et-search-form-container{ color: var(--ec-accent); }

/* Such-Icon durch geliefertes SVG ersetzen */
#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-search.svg') center/contain no-repeat;
	mask: url('assets/icons/icon-search.svg') center/contain no-repeat;
}

/* ==========================================================================
   3. HERO / FEATURED SLIDER (Extra "Featured Posts Slider" Modul)
   Klasse: .featured-posts-slider-module (NICHT Divis .et_pb_slider!)
   ========================================================================== */
.featured-posts-slider-module{
	border-radius: var(--ec-radius-lg) !important;
	overflow: hidden;
	box-shadow: var(--ec-shadow);
}
.featured-posts-slider-module .carousel-item{
	border-radius: var(--ec-radius-lg);
}
/* Titel */
.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;
}
/* Text-Overlay */
.featured-posts-slider-module .post-content-box{
	border-radius: 0 0 var(--ec-radius-lg) var(--ec-radius-lg);
}

/* Pfeil-Navigation rechts unten */
.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;
	position: relative;
}
/* Icon-Font-Zeichen ("4"/"5") ausblenden - stattdessen gelieferte SVGs */
.featured-posts-slider-module .arrow:before{
	content: "" !important;
}
.featured-posts-slider-module .arrow:after{
	content: "";
	position: absolute;
	inset: 8px;
	background-color: var(--ec-ink);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.featured-posts-slider-module .arrow.prev:after{
	-webkit-mask-image: url('assets/icons/icon-arrow-left.svg');
	mask-image: url('assets/icons/icon-arrow-left.svg');
}
.featured-posts-slider-module .arrow.next:after{
	-webkit-mask-image: url('assets/icons/icon-arrow-right.svg');
	mask-image: url('assets/icons/icon-arrow-right.svg');
}
.featured-posts-slider-module .arrow:hover{
	background: var(--ec-accent) !important;
}
.featured-posts-slider-module .arrow:hover:after{
	background-color: #fff;
}

/* Punkte-Navigation (Breadcrumbs) */
.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;
}

/* ==========================================================================
   4. ICON-GRID "Entdecke unsere Themen" (neue Section, siehe home.php)
   ========================================================================== */
.ec-topics-section{
	max-width: 1240px;
	margin: 40px auto;
	padding: 0 20px;
}
.ec-topics-section h2{
	font-size: 24px;
	margin-bottom: 22px;
}
.ec-topics-grid{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 18px;
}
.ec-topic-card{
	background: var(--ec-white);
	border-radius: var(--ec-radius-md);
	box-shadow: var(--ec-shadow);
	padding: 26px 12px 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);
}
.ec-topic-card .ec-icon{
	width: 46px;
	height: 46px;
	margin: 0 auto 12px;
	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{
	display: block;
	font-weight: 600;
	color: var(--ec-ink);
	font-size: 14px;
}

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

/* ==========================================================================
   5. KATEGORIE-BOXEN (Extra Home-Layout-Module -> "RASSEN Beliebt" etc.)
   ========================================================================== */
/* Reihen im Hauptbereich als Flex, damit alle Boxen einer Zeile gleich hoch sind */
.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-top-color bewusst NICHT überschrieben - kommt per Inline-Style
	   vom Theme (die individuelle Akzentfarbe pro Kategorie: Rassen=türkis,
	   Ernährung=blau, Haltung=braun, usw.) */
	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;
}
/* "Beliebt"-Label ausblenden */
.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%;
	transition: transform .35s ease;
}
/* Hover: kein Abdunkeln + kein Plus-Symbol (Extra-Standard-Overlay aus) ... */
.post-module .et_overlay,
.post-module .overlay,
.post-module .et_pb_extra_overlay{
	display: none !important;
}
/* ... stattdessen sanfter Bild-Zoom */
.post-module .main-post:hover img,
.post-module .main-post a:hover img{
	transform: scale(1.06);
}
.post-module .entry-title a{
	font-size: 17px;
	line-height: 1.35;
}
/* Vorschau-Text auf 3 Zeilen begrenzen, damit alle Boxen gleich hoch wirken.
   Extra verwendet ".excerpt p" in module-posts-content.php */
.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, Plus-Button */
.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. WEITERE BEITRÄGE (neue horizontale Reihe, siehe functions.php)
   ========================================================================== */
/* Der große Blog-Feed-Block, der im Home-Layout zwischen den Kategorie-Boxen
   und "Weitere Beiträge" hing, wird auf der Startseite ausgeblendet.
   Auf Kategorie-/Archivseiten bleibt er aktiv (dort ist er die 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;
}

.ec-further-posts{
	margin: 40px 0 10px;
}
.ec-further-posts h2{
	font-size: 22px;
	margin-bottom: 20px;
}
.ec-further-posts-grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.ec-further-post-card{
	display: block;
	text-decoration: none;
	background: var(--ec-white);
	border-radius: var(--ec-radius-md);
	box-shadow: var(--ec-shadow);
	overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease;
}
.ec-further-post-card:hover{
	box-shadow: var(--ec-shadow-hover);
	transform: translateY(-3px);
}
.ec-further-post-thumb{
	width: 100%;
	aspect-ratio: 16 / 11;
	background: var(--ec-accent-light);
	overflow: hidden;
}
.ec-further-post-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ec-further-post-cat{
	display: block;
	color: var(--ec-accent);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin: 14px 16px 4px;
}
.ec-further-post-title{
	display: block;
	color: var(--ec-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 16px 16px;
}
.ec-further-post-card:hover .ec-further-post-title{ color: var(--ec-accent); }

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

/* ==========================================================================
   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); }

/* Falls ein Widget keinen (oder einen leeren) Titel hat, darf trotzdem
   kein "schwebender" Strich am oberen Rand der Karte übrig bleiben */
.et_pb_extra_column_sidebar .widgettitle:empty{
	display: none;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.et_pb_extra_column_sidebar .et_pb_widget > *:first-child{
	border-top: none !important;
	margin-top: 0 !important;
}

/* TOPICS-Box (WordPress Navigations-Menü-Widget) - Extra liefert dafür eigene
   dynamische Farben aus, daher hier bewusst mit !important überschrieben */
.et_pb_extra_column_sidebar .widget_nav_menu .widgettitle{
	background: var(--ec-white) !important;
	color: var(--ec-ink) !important;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .04em;
	border-bottom: 2px solid var(--ec-accent-light) !important;
	padding: 0 0 10px !important;
	margin-bottom: 6px;
}
.et_pb_extra_column_sidebar .widget_nav_menu ul{ margin: 0; }
.et_pb_extra_column_sidebar .widget_nav_menu li{
	border-bottom: 1px solid var(--ec-border) !important;
	background: transparent !important;
}
.et_pb_extra_column_sidebar .widget_nav_menu li:last-child{ border-bottom: none !important; }
.et_pb_extra_column_sidebar .widget_nav_menu li a{
	color: var(--ec-text) !important;
	font-size: 15px !important;
	padding: 13px 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
}
.et_pb_extra_column_sidebar .widget_nav_menu li a:hover{ color: var(--ec-accent) !important; }

/* Icons vor den Menüpunkten (Home, ePaper, Wissen, Empfehlungen + Unterpunkte)
   .et_pb_extra_column_sidebar-Präfix + !important, weil eine generische Bild-Regel des
   Parent-Themes (.et_pb_extra_column_sidebar img{...}) sonst höhere Spezifität hat und die
   Icons auf ihre volle Originalgröße aufblasen würde. */
.et_pb_extra_column_sidebar .widget_nav_menu .ec-menu-icon{
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 22px !important;
	height: 22px !important;
	max-width: 22px !important;
	max-height: 22px !important;
	flex: 0 0 22px !important;
	color: var(--ec-accent);
}
.et_pb_extra_column_sidebar .widget_nav_menu .ec-menu-icon svg,
.et_pb_extra_column_sidebar .widget_nav_menu .ec-menu-icon img{
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	display: block !important;
}
.et_pb_extra_column_sidebar .widget_nav_menu .sub-menu .ec-menu-icon{
	width: 18px !important;
	height: 18px !important;
	max-width: 18px !important;
	max-height: 18px !important;
	flex-basis: 18px !important;
}

/* Unterpunkte (z.B. "Gesundheit") - Einzug statt Minus-Zeichen */
.et_pb_extra_column_sidebar .widget_nav_menu .sub-menu{
	border-top: none !important;
	margin: 0 !important;
	background: transparent !important;
}
.et_pb_extra_column_sidebar .widget_nav_menu .sub-menu li{
	padding: 0 0 0 8px !important;
}
.et_pb_extra_column_sidebar .widget_nav_menu .sub-menu li:before{
	content: "" !important;
}
.et_pb_extra_column_sidebar .widget_nav_menu .sub-menu li a{
	font-size: 13px !important;
	padding: 8px 0 !important;
}

/* Neue Sidebar-Box "Neueste Beiträge" */
.ec-latest-posts-widget ul{ list-style: none; margin: 0; padding: 0; }
.ec-latest-post-item{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0 !important;
	border-bottom: 1px solid var(--ec-border);
}
.et_pb_extra_column_sidebar .ec-latest-post-item:last-child,
.ec-latest-post-item:last-child{ border-bottom: none; }
.ec-latest-post-thumb{
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: var(--ec-radius-sm);
	overflow: hidden;
	display: block;
	background: var(--ec-accent-light);
}
.ec-latest-post-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--ec-radius-sm);
}
.ec-latest-post-thumb-placeholder{
	display: block;
	width: 100%;
	height: 100%;
}
.ec-latest-post-title{
	font-size: 13px;
	font-weight: 600;
	color: var(--ec-ink);
	line-height: 1.4;
}
.ec-latest-post-title:hover{ color: var(--ec-accent); }

/* ==========================================================================
   7. FOOTER
   ========================================================================== */
#footer{
	background: var(--ec-ink) !important;
	padding-top: 50px;
}
#footer .widget h4,
#footer .widgettitle{
	color: #fff;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: .05em;
}
#footer .widget ul li a,
#footer .widget p{
	color: #B8C2CA;
}
#footer .widget ul li a:hover{ color: var(--ec-accent); }
#footer-bottom{
	background: #16222E !important;
	color: #8A97A2;
}

/* Social-Icons im Footer durch geliefertes SVG-Set ersetzen
   (bewusst auf #footer beschränkt - im Top-Header bleiben die
   Original-Iconfonts des Themes aktiv, dort nur vergrößert) */
#footer .et-extra-social-icons{ display: flex; gap: 12px; }
#footer .et-extra-social-icons .et-extra-icon{
	position: relative;
	display: inline-block;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
}
#footer .et-extra-social-icons .et-extra-icon:before{
	content: "" !important;
}
#footer .et-extra-social-icons .et-extra-icon:after{
	content: "";
	position: absolute;
	inset: 9px;
	background-color: #fff;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}
#footer .et-extra-social-icons .et-extra-icon-facebook:after{
	-webkit-mask-image: url('assets/icons/icon-social-facebook.svg');
	mask-image: url('assets/icons/icon-social-facebook.svg');
}
#footer .et-extra-social-icons .et-extra-icon-instagram:after{
	-webkit-mask-image: url('assets/icons/icon-social-instagram.svg');
	mask-image: url('assets/icons/icon-social-instagram.svg');
}
#footer .et-extra-social-icons .et-extra-icon-youtube:after{
	-webkit-mask-image: url('assets/icons/icon-social-youtube.svg');
	mask-image: url('assets/icons/icon-social-youtube.svg');
}
#footer .et-extra-social-icons .et-extra-icon-pinterest:after{
	-webkit-mask-image: url('assets/icons/icon-social-pinterest.svg');
	mask-image: url('assets/icons/icon-social-pinterest.svg');
}
#footer .et-extra-social-icons .et-extra-icon:hover{
	background: var(--ec-accent);
}

/* Twitter/X überall ausblenden (Account existiert nicht) */
.et-extra-social-icon.twitter{ display: none !important; }

/* Facebook + Instagram im Top-Header etwas größer */
#top-header .et-extra-social-icons .et-extra-icon{
	font-size: 18px;
	width: 40px;
	height: 40px;
	line-height: 40px;
}

/* ==========================================================================
   10. KATEGORIE-/ARCHIVSEITEN - einheitliche, harmonische Karten
   (Blog-Feed: alle Bilder gleiches Seitenverhältnis, Texte gekürzt,
   Karten gleich aufgebaut - kein "unaufgeräumtes" Masonry-Chaos mehr)
   ========================================================================== */
body.archive .posts-blog-feed-module article.hentry,
body.search .posts-blog-feed-module article.hentry{
	background: var(--ec-white);
	border-radius: var(--ec-radius-md);
	box-shadow: var(--ec-shadow);
	overflow: hidden;
	margin-bottom: 24px !important;
	transition: box-shadow .18s ease;
}
body.archive .posts-blog-feed-module article.hentry:hover,
body.search .posts-blog-feed-module article.hentry:hover{
	box-shadow: var(--ec-shadow-hover);
}
/* Alle Beitragsbilder auf identisches Seitenverhältnis bringen */
body.archive .posts-blog-feed-module article.hentry .header,
body.search .posts-blog-feed-module article.hentry .header{
	overflow: hidden;
}
body.archive .posts-blog-feed-module article.hentry .header img,
body.search .posts-blog-feed-module article.hentry .header img{
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
/* Hover-Zoom wie auf der Startseite; Overlay/Plus auch hier aus */
body.archive .posts-blog-feed-module article.hentry:hover .header img,
body.search .posts-blog-feed-module article.hentry:hover .header img{
	transform: scale(1.06);
}
body.archive .posts-blog-feed-module .et_overlay,
body.archive .posts-blog-feed-module .overlay,
body.search .posts-blog-feed-module .et_overlay,
body.search .posts-blog-feed-module .overlay{
	display: none !important;
}
body.archive .posts-blog-feed-module article.hentry .post-content,
body.search .posts-blog-feed-module article.hentry .post-content{
	padding: 18px 20px 20px;
}
body.archive .posts-blog-feed-module article.hentry .post-title{
	font-size: 17px;
	line-height: 1.35;
	/* Fix reservierte Höhe für 3 Titelzeilen -> alle Karten enden gleich */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(3 * 1.35em);
}
/* Vorschautext einheitlich auf 3 Zeilen kürzen */
body.archive .posts-blog-feed-module article.hentry .excerpt p,
body.search .posts-blog-feed-module article.hentry .excerpt p{
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.55;
	margin-bottom: 8px;
	min-height: calc(3 * 1.55em);
}

/* ==========================================================================
   11. ARTIKEL-FOOTER: Share-Leiste + Bewertung ("Likes")
   ========================================================================== */
.post-footer{
	border-top: 1px solid var(--ec-border);
	padding-top: 18px;
}
.post-footer .rating-stars{
	margin-top: 12px;
}

/* ==========================================================================
   8. BUTTONS ALLGEMEIN (z.B. "MEHR LESEN")
   ========================================================================== */
.et_pb_button,
button, input[type="submit"]{
	border-radius: 30px !important;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-weight: 600 !important;
	border: none;
}


/* ==========================================================================
   12. EINZELARTIKEL-ANSICHT
   ========================================================================== */
/* Beitragsbild abrunden - wie in den Voransichten */
body.single article .post-thumbnail img,
body.single article img.wp-post-image,
body.single .featured-image img{
	border-radius: var(--ec-radius-lg);
}

/* "Auch interessant" (Related Posts): Datum ausblenden */
.related-posts .post-meta,
.related-posts .post-date,
.related-posts .updated,
.related-posts .published{
	display: none !important;
}

/* WhatsApp-Share-Button neben den Theme-Share-Buttons
   (gelieferte SVGs enthalten Hintergrund + Logo fertig im Button-Stil) */
.ed-social-share-icons .ec-whatsapp-share{
	display: inline-block;
	vertical-align: middle;
}
.ed-social-share-icons .ec-icon-whatsapp{
	display: inline-block;
	background-image: url('assets/icons/icon-whatsapp-grau.svg') !important;
	background-size: contain !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;
}
.ed-social-share-icons .ec-icon-whatsapp:before{
	content: "" !important;
}
.ed-social-share-icons .ec-whatsapp-share:hover .ec-icon-whatsapp{
	background-image: url('assets/icons/icon-whatsapp-gruen.svg') !important;
}


/* ==========================================================================
   13. MOBILES MENÜ (siehe assets/mobile-menu.js)
   Punkte ab "Kontakt" kleiner + hinter zugeklapptem "+"-Akkordeon
   ========================================================================== */
@media (max-width: 980px){
	/* Sekundäre Punkte (Kontakt, Werbekooperationen, Datenschutz, ...) */
	#et-mobile-navigation nav ul li.ec-mobile-secondary{
		display: none;
	}
	#et-mobile-navigation nav.ec-secondary-open li.ec-mobile-secondary{
		display: block;
	}
	/* Mind. ein Drittel kleiner als die Hauptpunkte */
	#et-mobile-navigation nav ul li.ec-mobile-secondary a{
		font-size: 63% !important;
		padding-top: 8px !important;
		padding-bottom: 8px !important;
		opacity: .85;
	}
	/* Der "+ Mehr"-Toggle-Punkt */
	#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;
	}
}

/* Bewertung/"RATE" sicherheitshalber auch per CSS ausblenden */
.post-footer .rating-stars{ display: none !important; }


/* ==========================================================================
   14. BURGER-MENÜ nur mobil - am Desktop komplett ausblenden
   ========================================================================== */
@media (min-width: 981px){
	#et-mobile-navigation{
		display: none !important;
	}
	/* Auch den Secondary-Menü-Burger im Top-Header (links neben "IM TREND")
	   am Desktop ausblenden - die Inhalte (Kontakt, Impressum, ...) bleiben
	   über Sidebar und mobiles Menü erreichbar */
	#et-secondary-nav > *:not(#et-trending){
		display: none !important;
	}
}

/* ==========================================================================
   15. SLIDER MOBIL: Bildformat wahren, kein leerer weißer Block
   Auf kleinen Screens legt Extra die Text-Box unters Bild - dadurch
   entstand der große weiße Bereich. Wir legen den Titel wie am Desktop
   als Overlay über das Bild und geben dem Slide eine feste, sinnvolle Höhe.
   ========================================================================== */
@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;
	}
}


/* ==========================================================================
   16. LINK-IN-BIO-SEITE (/insta, Shortcode [yourdog_insta_links])
   Mobile-first - fast alle Besucher kommen vom Handy aus Instagram
   ========================================================================== */
.ec-insta-page{
	max-width: 520px;
	margin: 0 auto;
	padding: 10px 4px 30px;
}
.ec-insta-intro{
	text-align: center;
	color: var(--ec-text);
	font-size: 15px;
	margin-bottom: 18px;
}
.ec-insta-fixed{
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 26px;
}
.ec-insta-btn{
	display: block;
	text-align: center;
	padding: 14px 18px;
	border-radius: 30px;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	border: 2px solid var(--ec-accent);
	color: var(--ec-accent);
	background: var(--ec-white);
	transition: background .15s ease, color .15s ease;
}
.ec-insta-btn:hover{ background: var(--ec-accent-light); }
.ec-insta-btn-primary{
	background: var(--ec-accent);
	color: #fff;
}
.ec-insta-btn-primary:hover{ background: var(--ec-accent-dark); color:#fff; }
.ec-insta-list{
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ec-insta-card{
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--ec-white);
	border-radius: var(--ec-radius-md);
	box-shadow: var(--ec-shadow);
	padding: 10px 14px 10px 10px;
	text-decoration: none;
	transition: box-shadow .15s ease, transform .15s ease;
}
.ec-insta-card:hover{
	box-shadow: var(--ec-shadow-hover);
	transform: translateY(-2px);
}
.ec-insta-thumb{
	flex: 0 0 62px;
	width: 62px;
	height: 62px;
	border-radius: var(--ec-radius-sm);
	overflow: hidden;
	background: var(--ec-accent-light);
}
.ec-insta-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ec-insta-title{
	flex: 1;
	color: var(--ec-ink);
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.35;
}
.ec-insta-arrow{
	color: var(--ec-accent);
	font-size: 26px;
	line-height: 1;
	flex: 0 0 auto;
}
.ec-insta-empty{
	text-align: center;
	color: var(--ec-text);
}


/* ==========================================================================
   17. EPAPER MIT ADSENSE (Shortcode [ydm_epaper id="1"])
   Desktop: Sticky-Anzeige rechts neben dem Flipbook
   Mobil:   Anzeige ausgeblendet - dort übernimmt Google Anchor Ads
   ========================================================================== */
.ydm-epaper-wrap{
	display: flex;
	gap: 24px;
	align-items: flex-start;
}
.ydm-epaper-main{
	flex: 1;
	min-width: 0; /* verhindert Flexbox-Overflow des Flipbooks */
}
.ydm-epaper-aside{
	flex: 0 0 320px;
	width: 320px;
}
.ydm-epaper-ad{
	position: sticky;
	top: 120px; /* unter dem Sticky-Header */
	background: var(--ec-white);
	border-radius: var(--ec-radius-md);
	box-shadow: var(--ec-shadow);
	padding: 12px;
}
.ydm-ad-label{
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #9AA7B0;
	margin-bottom: 6px;
	text-align: center;
}
@media (max-width: 980px){
	.ydm-epaper-aside{ display: none; }
}


/* ==========================================================================
   18. STARTSEITEN-ANZEIGENBLOCK (zwischen Icon-Grid und Kategorie-Boxen)
   Slot unter Einstellungen > Social Publisher > "Anzeigen-Slot (Startseite)"
   ========================================================================== */
.ec-home-ad{
	max-width: 1240px;
	margin: 6px auto 34px;
	padding: 0 20px;
}
.ec-home-ad-inner{
	background: var(--ec-white);
	border-radius: var(--ec-radius-md);
	box-shadow: var(--ec-shadow);
	padding: 12px;
	text-align: center;
}
/* Slider-Bild: klickbar zum Artikel (Cursor-Feedback, Logik in accordion.js) */
.featured-posts-slider-module .carousel-item{
	cursor: pointer;
}