/*
 Theme Name:     NIGELSHORE.EU
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Das Theme arbeitet ausschließlich mit einem Mobilmenü, welches permanent rechts oben auf dem Screen erreichbar ist. Der aktive Menüpunkt (Seitenlink oder Ankerlink) wird optisch hervorgehoben. Der aktive Seitenlink „erlischt“ sobald ein Ankerlink in das Sichtfeld rückt. Beim Scrollen wandert das Highlight dynamisch mit. Das Menü schließt automatisch, wenn auf einen Link geklickt wurde.
 Author:         Michael Braune
 Author URI:     https://www.nigelshore.eu
 Template:       Divi
 Version:        COS-26v01 Premium UX
*/
 
 
/* ––––– Ab hier kannst du deine CSS-Anpassungen eintragen ––––– */






/* START +++ Silbentrennung */
body {
	hyphens: auto; 
}
/* ENDE +++ Silbentrennung */


/* START +++ Hamburger Menü */
.et_pb_menu .et_mobile_nav_menu {
    float: none;
    margin: 0 6px;
    display: flex;
    align-items: center;
}
.et_pb_menu .et_pb_menu__menu {
	display: none;
}
.et_pb_menu__wrap .mobile_menu_bar {
	z-index: 1000 !important;
	cursor: pointer;
}
.et_mobile_menu {
	padding: 0px 0px !important;
	border-top: none !important;
	width: 210px;
	margin-top: -50px !important;
	margin-left: -210px !important;
}
.et_mobile_menu li a {
	background-color: var(--gcid-secondary-color) !important;
	border-bottom: 1px solid rgba(0,0,0,1);
	padding: 10px 10%;
}
.et_mobile_menu li a:hover, .nav ul li a:hover {
	background-color: var(--gcid-primary-color) !important;
	opacity: 1;
}
.et_mobile_menu li {
  list-style-type: none;
  padding: 0;
  line-height: 36px;
}
.mobile_menu_bar::before, .mobile_menu_bar::after {
	font-size: 30px !important;
	color: #FFF !important;
	background-color: var(--gcid-secondary-color) !important;
	padding: 10px !important;
	border-radius: 100px;
	cursor: pointer;
}

#mobile_menu1 {
    background-color: #00000000 !important;
	box-shadow: none;
}

/* ENDE +++ Hamburger Menü */


/* Sprachwechler */
.lang-item a {
	margin: 3px 0;
}

/* START +++ Aktiven Menü-Link hervorheben */
/* 1. Basis-Links (Desktop & Mobile) */
#page-container .et_pb_menu .et-menu li a,
#page-container .et_mobile_menu li a,
#page-container .mobile_nav a {
	color: white !important;
	background-color: var(--gcid-secondary-color) !important;
	transition: all 0.3s ease-in-out !important;
	border-bottom: 0.02em solid rgba(0, 0, 0, 0.2) !important;
}

/* 2. Hover-Effekt */
#page-container .et_pb_menu .et-menu li a:hover,
#page-container .et_mobile_menu li a:hover {
	color: white !important;
	background-color: var(--gcid-primary-color) !important;
	opacity: 1;
}

/* 3. Aktiver Zustand (Highlight) */
body #page-container .et_pb_menu .et-menu li a.menu-active,
body #page-container .et_mobile_menu li a.menu-active,
body #page-container .mobile_nav a.menu-active {
	color: white !important;
	background-color: #193F64 !important; /* Primary-Color-800 */
	opacity: 1 !important;
}

/* 4. Divi Default Overrides (Neutralisierung) */
.et_pb_menu .et-menu li.current-menu-item > a,
.et_pb_menu .et-menu li.current_page_item > a {
	color: black !important;
	background-color: var(--gcid-secondary-color) !important;
}

/* 5. Mobile Menü Animation (Zusammenfahren) */
.et_mobile_menu, 
.et_pb_menu__menu-container {
	overflow: hidden !important;
	/* Geschmeidiger Übergang für Höhe und Sichtbarkeit */
	transition: max-height 30s ease-in-out !important;
	max-height: 1000px; 
}

/* Zustand beim Schließen via JS */
.menu-closing {
	max-height: 0 !important;
	pointer-events: none;
}

/* 6. Layout & Scroll-Offset */
@media only screen and (min-width: 981px) {
	.et_pb_menu .et-menu li a {
		padding: 10px 18px !important;
		margin: 0 4px;
	}
}

@media only screen and (max-width: 980px) {
    .et_mobile_menu li a {
		padding: 12px 5% !important;
		width: 100%;
		display: block;
	}
}

html {
	scroll-behavior: smooth;
}

.et_pb_section, .et_pb_row {
	scroll-margin-top: 130px;
}
/* ENDE +++ Aktiven Menü-Link hervorheben */



/* START +++ Hamburger Button wechselt bei geöffnet zu X und ist animiert */
.mobile_menu_bar::before {
	display: block;
	transition: all .4s ease;
}
.mobile_nav.opened .mobile_menu_bar::before {
	content: "M";
	transform: rotate(90deg);
}
/* ENDE +++ Hamburger Button wechselt bei geöffnet zu X und ist animiert */



/* START +++ Back-Button */
.back {
    background-color: var(--gcid-secondary-color) !important;
	color: white; /* white */
	border-radius: 100px !important;
	margin-top: 30px !important;
	margin-right: 20px !important;
	padding: 0;
  	backdrop-filter: blur(5px);
	border: 0.02em solid rgba(0, 0, 0, 0.2) !important;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
/* ENDE +++ Back-Button */



/* START +++ Top-Button */
.et_pb_scroll_top.et-pb-icon {
    background-color: var(--gcid-secondary-color) !important;
	color: white; /* white */
	border-radius: 100px !important;
	margin-right: 20px !important;
	padding: 10px;
  	backdrop-filter: blur(5px);
	border: 0.02em solid rgba(0, 0, 0, 0.2) !important;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
/* ENDE +++ Top-Button */



/* START +++ Streifen */
.stripes {
    position: relative;
    overflow: hidden;
}

.stripes::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(135deg, black 25%, white 25%, white 50%, black 50%, black 75%, white 75%, white 100%);
    background-size: 8.49px 8.49px;
    z-index: 0;
}

.stripes > * {
    position: relative;
    z-index: 1;
}
/* ENDE +++ Streifen */



/* START +++ Bildzoom */
.zoom img {
	transform: scale(1);	
	transition: all 0.3s linear; /* VERZÖGERUNG */
}
.zoom img:hover {	
	transform: scale(1.2);
}
/* ENDE +++ Bildzoom */



/* START +++ Beitragsnavigation */
.nav-label {
	font-family: "MyFont-Cond",Verdana,Geneva,sans-serif !important;
}

	/* zurück zur Kategorie */
.arrow_carrot-2left:before {
	font-family: ETmodules;
	font-size: 30px;
	content: "\38";
}
.arrow_carrot-2left {
	font-family: ETmodules;
	content: "\38";
}
.et_pb_posts_nav .nav-next {
	/*float: right !important;*/
	margin-right: 0px;
}
.headernavigation {
	width: 100% !important;
	max-width: 100% !important;
}
.et_pb_posts_nav.et_pb_post_nav_0_tb_header a {
    background-color: rgba(97, 208, 157, 0.5) !important;
}
.et_pb_posts_nav .nav-next a:before {
	content: '\34' !important;
	font-family: ETmodules !important;
	color: var(--gcid-awtsd5ig2f); /* black */
	font-size: 30px !important;
}
.et_pb_posts_nav .nav-previous a:after {
	content: '\35' !important;
	font-family: ETmodules !important;
	color: var(--gcid-awtsd5ig2f); /* black */
	font-size: 30px !important;
}
.nav-label {
	display: none;
}
/* ENDE +++ Beitragsnavigation */




/* START +++ MATOMO */
#matomo-opt-out {
	font-family: "MyFont",Verdana, Geneva, sans-serif !important;
	font-size: 100% !important;
	padding: 20px;
	background-color: #bbb;
	color: var(--gcid-awtsd5ig2f); /* black */
}
#matomo-opt-out label {
    margin: 20px 0 0 0 !important;
}
#matomo-opt-out label strong {
    font-weight: 500 !important;
}
/* ENDE +++ MATOMO */



/* START +++ DIVI Plus */

/* ENDE +++ DIVI Plus */



/* START +++ DP Ajax-Search */
.dipl_ajax_search_results {
	max-height: 480px !important;
	margin: 0px 30px !important;
}
/* ENDE +++ DP Ajax-Search */



/* START +++ Schlagwort als Button */
.et_pb_post_title_1 .dbdb_posttitle_tags a:not(:last-child):after {
	content: " |" ¡important;
}
.schlagworte .dbdb_posttitle_tags_separator {
	display: none;
}
.schlagworte a {
	color: var(--gcid-udf6677ow5) !important; /* white */
	background-color: var(--gcid-secondary-color);
	padding: 5px 15px 3px;
	border-radius: 50px;
}
/* ENDE +++ Schlagwort als Button */



/* START +++ Schlagwort */
.projekt-tag-titel {
	display: flex !important;
}
.projekt-tag-titel h1 {
	font-size: 25px;
	font-family: "MyFont" !important;
	background-color: #062a39;
	color: var(--gcid-udf6677ow5) !important; /* white */
	border-radius: 50px;
	padding: 10px 25px 5px;
	margin: -5px 10px;
}
/* ENDE +++ Schlagwort */



/* START +++ PlugIn: Complianz */
#cmplz-manage-consent .cmplz-manage-consent {
    border-top-color: var(--gcid-secondary-color);
    border-top-width: 2px !important;
}
.cmplz-blocked-content-container .cmplz-blocked-content-notice, .cmplz-wp-video .cmplz-blocked-content-notice {
	cursor: pointer;
	background-color: #00dfe8;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.cmplz-blocked-content-container:hover .cmplz-blocked-content-notice:hover, .cmplz-wp-video:hover .cmplz-blocked-content-notice:hover {
	background-color: #062a39;
}
/* ENDE +++ PlugIn: Complianz */