/*
 Theme Name:   2023 child
 Description:  Child Theme
 Author:       
 Template:     twentytwentythree
 Version:      1.0
 Text Domain:  2023-child2
*/

@viewport {
	width: device-width;	
	zoom: 1;	
	}


	:root {
		--base-font-size: 16px;
		--bg-color: #ffffff;
		--text-color: #242424;
		--primary-color: #0fbe7c;
		--primary-hover: #008c4a;
		--dark-gray: #303841;
		--light-border: #eaeaea;
	}


	@font-face {
		font-family: 'ssp_r';
		src: url('fonts/SourceSansPro-Regular.ttf');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	
	}
	
	
	
	@font-face {
		font-family: 'ssp_b';
		src: url('fonts/SourceSansPro-Bold.ttf');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	
	}
	
	
	@font-face {
		font-family: 'ssp_l';
		src: url('fonts/SourceSansPro-Light.ttf');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	
	}


	@font-face {
		font-family: 'os';
		src: url('fonts/OpenSans-VariableFont_wdth,wght.ttf');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	
	}


	@media (prefers-color-scheme: dark) {
		:root {
			--bg-color: #000000;
			--text-color: #ffffff;
		}
	}


	html {
		max-width: 100%;
		overflow-x: hidden;
		scroll-behavior: smooth;
	}


	

body {				
font-family: 'ssp_l', sans-serif;	
background: var(--bg-color);
color:var(--text-color);
font-size: var(--base-font-size);
padding: 0 !important;
line-height: 1.625;
position: relative;
}

body::after{
	content:'';
	position: fixed;
	left:0;
	top:0;
	height:100vh;
	width:100vw;
	background-image: url('https://gesunde-gefuehle.de/wp-content/uploads/2026/08/sommer-1-scaled.jpg');
	z-index: -1;
	background-size: cover;
}

body > .wp-site-blocks {
	padding:0;
}


/* ==========================================
   HEADER STYLES (Spacious 1:1 Replica)
   ========================================== */
.sl-site-header {
	background-color: #fbfbfb;
	border-bottom: 3px solid var(--primary-color);
	padding: 25px 15px;
	margin-bottom: 40px;
	
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	position: fixed;
	top:0;
	width: 100vw;
	z-index:99999;
}

.sl-header-inner {
	max-width: 1218px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
}

.sl-header-left {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: nowrap;
}

.sl-header-left img.custom-logo, 
.sl-header-left .wp-block-site-logo img {
	width: 100px;
	height: 100px;
	display: block;
	transition: opacity 0.2s ease;
}

.sl-header-left img.custom-logo:hover,
.sl-header-left .wp-block-site-logo img:hover {
	opacity: 0.85;
}

.sl-header-text {
	display: flex;
	flex-direction: column;
}

.sl-header-text h1.wp-block-site-title {
	margin: 0;
	padding: 0;
	font-family: 'ssp_b', sans-serif;
	font-size: 32px;
	line-height: 1.2;
}

.sl-header-text h1.wp-block-site-title a {
	color: var(--dark-gray) !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.sl-header-text h1.wp-block-site-title a:hover {
	color: var(--primary-color) !important;
}

.sl-header-text p.wp-block-site-tagline {
	margin: 5px 0 0 0;
	padding: 0;
	font-family: 'ssp_r', sans-serif;
	font-size: 16px;
	color: #333333;
}


/* ==========================================
   NAVIGATION MENU STYLES
   ========================================== */
.sl-header-right {
	display: flex;
	align-items: center;
}

.sl-header-right .wp-block-navigation {
	padding: 0;
}

.sl-header-right .wp-block-navigation ul.wp-block-navigation__container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sl-header-right .wp-block-navigation .wp-block-navigation-item {
	margin: 0;
	padding: 0;
}

.sl-header-right .wp-block-navigation .wp-block-navigation-item__content {
	font-family: 'ssp_r', sans-serif;
	font-size: 18px;
	color: #444444 !important;
	text-decoration: none !important;
	text-transform: uppercase;
	padding: 10px 0;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
	display: block;
}

.sl-header-right .wp-block-navigation .wp-block-navigation-item__content:hover,
.sl-header-right .wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--primary-color) !important;
}

/* Sub-menus styling */
.sl-header-right .wp-block-navigation .wp-block-navigation-item.has-child {
	position: relative;
}

.sl-header-right .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: #ffffff !important;
	border-top: 3px solid var(--primary-color) !important;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
	padding: 10px 0 !important;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 999;
	min-width: 220px;
	display: none;
}

.sl-header-right .wp-block-navigation .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container {
	display: block !important;
}

.sl-header-right .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: 'ssp_r', sans-serif;
	font-size: 14px;
	text-transform: none;
	padding: 8px 20px !important;
	border-bottom: none !important;
}

.sl-header-right .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: #f9f9f9;
	color: var(--primary-color) !important;
}


/* ==========================================
   CONTENT LAYOUT STYLES
   ========================================== */
.sl-main-wrapper {
	
	max-width: 1218px;
	margin: 0 auto;
	padding: 20px 15px 60px 15px;
	background-color: rgba(255,255,255,0.98);
	width: 80%;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	border-radius: 10px;
	margin-top:200px;
}

.sl-columns-container {
	display: flex;
	gap: 40px;
}

.sl-content-column {
	flex: 0 0 70%;
	max-width: 70%;
}

.sl-sidebar-column {
	flex: 0 0 25%;
	max-width: 25%;
	margin-left: auto;
}


/* ==========================================
   SIDEBAR & WIDGETS STYLES
   ========================================== */
.sl-sidebar {
	display: flex;
	flex-direction: column;
	gap: 35px;
}

.sl-widget {
	background-color: #ffffff;
}

.sl-widget .widget-title {
	border-bottom: 2px solid var(--primary-color);
	margin: 0 0 20px 0;
	padding: 0 0 5px 0;
	font-family: 'ssp_b', sans-serif;
	font-size: 18px;
	text-transform: uppercase;
}

.sl-widget .widget-title span {
	background-color: var(--primary-color);
	color: #ffffff;
	padding: 5px 12px;
	display: inline-block;
}

.sl-widget .textwidget {
	font-family: 'ssp_r', sans-serif;
	font-size: 16px;
	color: #555555;
}

.sl-widget .textwidget p {
	margin: 0 0 15px 0;
}

.sl-widget .textwidget a {
	color: var(--primary-color);
	text-decoration: none;
	font-weight: bold;
	transition: color 0.2s ease;
}

.sl-widget .textwidget a:hover {
	color: var(--primary-hover);
}


/* ==========================================
   MAIN CONTENT STYLING (SEO & AI Optimized)
   ========================================== */
.sl-content-column h1, 
.sl-content-column h2, 
.sl-content-column h3 {
	font-family: 'ssp_r', sans-serif;
	color: var(--dark-gray);
	margin-top: 0;
	margin-bottom: 20px;
}

.sl-content-column h1 {
	font-size: 36px;
	line-height: 1.3;
}

.sl-content-column h2 {
	font-size: 26px;
	border-bottom: 1px solid var(--light-border);
	padding-bottom: 10px;
	margin-top: 30px;
}

.sl-content-column h3 {
	font-size: 20px;
}

.sl-content-column p {
	font-size: 18px;
	line-height: 1.7;
	margin-bottom: 25px;
	color: #333333;
}

.sl-content-column a {
	color: var(--primary-color);
	text-decoration: none;
	border-bottom: 1px dotted var(--primary-color);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.sl-content-column a:hover {
	color: var(--primary-hover);
	border-bottom-style: solid;
}

.sl-content-column img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
	/* box-shadow: 0 4px 10px rgba(0,0,0,0.06); */
	margin-bottom: 25px;
}

.sl-content-column img.alignleft {
	float: left;
	margin-right: 25px;
	margin-bottom: 25px;
}

.sl-content-column img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}


/* ==========================================
   FOOTER STYLES
   ========================================== */
.sl-site-footer {
	background-color: #eeeded;
	border-top: 1px solid var(--light-border);
	padding: 30px 15px;
	margin-top: 60px;
}

.sl-copyright {
	font-family: 'ssp_r', sans-serif;
	font-size: 14px !important;
	color: #777777;
	margin: 0;
}

.sl-copyright a {
	color: var(--primary-color);
	text-decoration: none;
}

.sl-copyright a:hover {
	color: var(--primary-hover);
	text-decoration: underline;
}


/* ==========================================
   RESPONSIVE & MOBILE STYLES
   ========================================== */



@media screen and (max-width: 1070px) {



	.sl-header-right, .sl-header-left {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
}


@media screen and (max-width: 992px) {
	.sl-header-inner {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.sl-header-right {
		width: 100%;
		margin-top: 15px;
	}
	
	.sl-header-right .wp-block-navigation ul.wp-block-navigation__container {
		width: 100%;
		flex-direction: column;
		gap: 10px;
	}
	
	.sl-header-right .wp-block-navigation .wp-block-navigation-item__content {
		padding: 5px 0;
	}
	
	.sl-columns-container {
		flex-direction: column;
		gap: 40px;
	}
	
	.sl-content-column {
		flex: 0 0 100%;
		max-width: 100%;
	}
	
	.sl-sidebar-column {
		flex: 0 0 100%;
		max-width: 100%;
		margin-left: 0;
	}
}

@media screen and (max-width: 600px) {
	
	
	.sl-site-logo-img, .sl-site-logo-img img {width:50px !important; height:50px !important;}

.sl-main-wrapper {
	max-width: 1218px;
	margin: 300px auto 50px auto;
	padding: 30px 15px 60px 15px;
	background-color: rgba(255,255,255,0.98);
	width: calc(100% - 10px);
}



	.sl-header-left {
		flex-direction: column;
		align-items: center;
		gap: 15px;
		text-align: center;
	}
	
	.sl-header-text h1.wp-block-site-title {
		font-size: 30px;
	}
	
	.sl-content-column h1 {
		font-size: 30px;
	}
	
	.sl-content-column h2 {
		font-size: 22px;
	}
	
	.sl-content-column img.alignleft {
		float: none;
		margin-right: 0;
		display: block;
		width: 100%;
	}
}