/*
Theme Name: Mein Eigenes Layout Theme
Theme URI: https://deine-website.de/
Author: Dein Name
Author URI: https://deine-website.de/
Description: Ein individuelles Theme, erstellt für mein eigenes Layout.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-layout, responsive, blog
Text Domain: mein-eigenes-layout
*/

/* Hier beginnt dein CSS */
body {
    font-family: "Lato", sans-serif;
}

h1, h2, h3 {
	color: #e30613;
	font-family: Monotype Corsiva;
	margin-top: 0px !important;
	margin-bottom: 0px !important;
}

h1 {
	font-weight: bold !important;
}

map {
  display: inline;
}

/* *********************************************************************************************************** */
/* Container */
/* *********************************************************************************************************** */
.container {
	position: relative;
	width: 100%;
	margin: 0 auto;
	z-index: 0;
}
.container_white_top::before {
	position: absolute;
	content: "";
	display: block;
	height: 24px;
	top:-1px;
	width:100%;
	z-index:5;
	background-image: url('bilder/white_top_bg.png');
	background-repeat: repeat-x;
}
.container_white_bottom::after {
	position: absolute;
	content: "";
	display: block;
	height: 24px;
	bottom: -1px;
	width:100%;
	z-index:5;
	background-image: url('bilder/white_bottom_bg.png');
	background-repeat: repeat-x;
}
.container_picture_headline_bottom::after {
	position: absolute;
	content: "";
	display: block;
	height: 23px;
	bottom: 0px;
	width:100%;
	z-index:5;
	background-image: url('bilder/headline_top_bg.png');
	background-repeat: repeat-x;
}
.container_picture_headline_bottom {
	z-index: 10;
}
.container_green {
	background-color: #76b729;
	color: white
}
.container_green::before {
	content: "";
	display: block;
	height: 24px;
	top: 0px;
	background-image: url('bilder/green_top_bg.png');
	background-repeat: repeat-x;
}
.container_green::after {
	content: "";
	display: block;
	height: 23px;
	bottom: -1px;
	background-image: url('bilder/green_bottom_bg.png');
	background-repeat: repeat-x;
}
.container_footer {
	background-color: #76b729;
	color: white
}
.container_footer::before {
	content: "";
	display: block;
	height: 24px;
	top: 0px;
	background-image: url('bilder/green_top_bg.png');
	background-repeat: repeat-x;
}
.container_headline {
	background-color: #f6f9cf;
	margin-bottom: 24px;
	z-index: 10;
}
.headline_top::after {
	content: "";
	display: block;
	height: 24px;
	top: 0px;
	background-image: url('bilder/headline_top_bg.png');
	background-repeat: repeat-x;
}

/* *********************************************************************************************************** */
/* Inhalt zentriert im Container darstellen */
/* *********************************************************************************************************** */
.content {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding-bottom: 40px;
	max-width: 1800px;
}
@media (max-width:600px) {
	.content {
		padding-left:   10px; 
		padding-right:  10px; 
	}
	.w3-display-container {
		
	}
}
@media (max-width:992px) and (min-width:601px) {
	.content {
		padding-left:   20px; 
		padding-right:  20px; 
	}
	.w3-display-container {
		
	}	
}
@media (min-width:993px) {
	.content {
		padding-left:  100px; 
		padding-right: 100px; 
	}
	.w3-display-container {
		
	}
}
.content img {
	z-index:              10;
	border-radius:       8px;
	margin-left:        20px; 
	margin-right:       20px;
	width:               90%;
}

/* *********************************************************************************************************** */
/* Abschnitt "Aktuelles" */
/* *********************************************************************************************************** */
.content_aktuelles img {
	z-index:              10;
	width:               90%;
	height:              90%;
	border-radius:       8px;
	margin-left:        20px; 
	margin-right:       20px;
	margin-top:         10px; 
	margin-bottom:      10px;
}

/* *********************************************************************************************************** */
/* Layout für Bild */
/* *********************************************************************************************************** */
.image-vertical-center {
	display: flex;
	justify-content:  center;
	align-items:      center;
	height:             100%;
}
.image-vertical-center img {
	max-width:          100%;
	height:             auto;
}

/* *********************************************************************************************************** */
/* Headline (Logo, Menü, Herz im Hintergrund, Burger Button) */
/* *********************************************************************************************************** */
.logo {
	left:               20px; 
	z-index:               0;
}
@media (max-width:600px) {
	.logo img{
		width:         122px;
		height:         75px;
	}
}
@media (max-width:992px) and (min-width:601px) {
	.logo img{
		width:         122px;
		height:         75px;
	}
}
@media (min-width:993px) {
	.logo img{
		width:         380px; 
		height:        112px;
	}
}
.menu {
	display:            flex; 
	flex-wrap:          wrap; 
	justify-content: flex-end; 
	height:             50px; 
	right:             100px; 
	z-index:              50;
	align-content:space-evenly;
}
.menu_dropdown {
	z-index:              20;
	font-size:          18px;
}
.heart_nav img{
	position:       absolute; 
	top:                 0px; 
	right:             400px;
	opacity:             0.2;
	width:             150px;
	height:            150px;
	z-index:               2;
}
.w3-dropdown-hover:first-child,.w3-dropdown-click:hover {
    background-color:  unset;
    color:             unset;
}
.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child {
    background-color:  unset;
    color:             unset;
}
.w3-button:hover {
	color:            black !important;
	background-color: white !important;
}
.w3-bar-item-balken, .w3-button-balken {
	position: relative;
	padding-bottom:     10px;
	z-index:              10;
}
.w3-bar-item-balken::after, .w3-button-balken::after {
	content:              "";
	position:       absolute;
	bottom:                0;
	left:                  0;
	width:              100%;
	height:              8px;
	pointer-events:     none;
	z-index:              10;
	background-color: transparent; /* default: no color, specific classes override */
}

/* Colored bars for top-level menu items. Names correspond to classes assigned by the walker. */
.w3-bar-item-balken.balken-e30613::after { background-color: #e30613; }
.w3-bar-item-balken.balken-76b729::after { background-color: #76b729; }
.w3-bar-item-balken.balken-dbe383::after { background-color: #dbe383; }
.w3-bar-item-balken.balken-84c1ea::after { background-color: #84c1ea; }
.w3-bar-item-balken.balken-ee7900::after { background-color: #ee7900; }
.w3-bar-item-balken.balken-b1c300::after { background-color: #b1c300; }
.w3-bar-item-balken.balken-f3ba0e::after { background-color: #f3ba0e; }

/* Ensure bars are visible in the overlay as well */
.burger-button-dropdown .w3-bar-item-balken::after,
.burger-button-dropdown .w3-button-balken::after {
	z-index: 2147483651; /* above close button */
}

.burger-button {
	z-index:             100;	
	position:          fixed;
	right: 0;
}
.burger-button-dropdown {
	margin-top:         46px;
	position:           fixed;
	top:                75px;
	left:               0;
	right:              0;
	width:              100%;
	box-sizing:         border-box;
	z-index:            9999;
	background:         white;
	-webkit-overflow-scrolling: touch;
}

/* Mobile: force dropdown children to be visible inside the burger dropdown
   and make the menu scrollable if it's taller than the viewport. */
.burger-button-dropdown .w3-dropdown-content {
	display: block !important;
	position: relative !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 0 !important;
}
.burger-button-dropdown .w3-dropdown-hover .w3-button {
	display: block;
}
.burger-button-dropdown a {
	color: #000 !important;
	display: block;
	padding: 12px 16px !important;
}
.burger-button-dropdown {
	max-height: calc(100vh - 60px);
	overflow-y: auto;
}

/* Fullscreen overlay for mobile menu */
.burger-button-dropdown.fullscreen {
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 100vh !important;
	max-height: none !important;
	overflow: auto !important;
	-webkit-overflow-scrolling: touch !important;
	touch-action: pan-y !important;
	padding-top: 60px; /* space for optional header or close button */
	background: rgba(255,255,255,0.98) !important;
}
.burger-button-dropdown .nav-close {
	position: fixed;
	top: 12px;
	right: 12px;
	z-index: 2147483650;
	background: transparent;
	border: none;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}
.burger-button-dropdown.fullscreen a {
	font-size: 18px;
	padding: 16px 20px !important;
}

/* When the menu is open, hide the rest of the page */
.hidden-by-nav {
	display: none !important;
}

/* Force white background for menu items (desktop menu + mobile overlay) */
.menu,
.menu a,
.menu .w3-bar-item-balken,
.w3-bar .w3-button,
.w3-bar .w3-bar-item {
	background: #fff !important;
	color: #000 !important;
}

/* Ensure dropdown toggles and their first-child buttons are white */
.w3-dropdown-hover .w3-button:first-child,
.w3-dropdown-click .w3-button:first-child {
	background: #fff !important;
	color: #000 !important;
}

/* Overlay menu: force white background for all internal blocks */
.burger-button-dropdown,
.burger-button-dropdown a,
.burger-button-dropdown .w3-dropdown-content,
.burger-button-dropdown .w3-button {
	background: #fff !important;
	color: #000 !important;
}

/* Remove any leftover background on hover for clarity */
.menu .w3-button:hover,
.burger-button-dropdown a:hover {
	background: #fff !important;
	color: #000 !important;
}

/* *********************************************************************************************************** */
/* großes Bild */
/* *********************************************************************************************************** */
.background_picture {
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 720px;
	position: relative;
	display: none;
}