/* 
Theme Name: Hello Child Plenge
Theme URI: https://www.plenge-plenge.de
Description: Hello Elementor Child für Plenge & Plenge
Author: pb-media.de
Author URI: https://www.pb-media.de
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

#content {
    width: 100%;
    margin: 0px auto;
    padding: 0px 30px;
}

#content ul li::marker {
	content: "– ";
}

body.page-id-709 #content {
	padding: 0;
}

body.page-id-600 #content {
	padding: 0;
}



@media (max-width: 500px){
	#content {padding: 0;}
}

/* roboto-100 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('fonts/roboto-v20-latin-100.eot'); /* IE9 Compat Modes */
  src: local('Roboto Thin'), local('Roboto-Thin'),
       url('fonts/roboto-v20-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v20-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v20-latin-100.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v20-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v20-latin-100.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/roboto-v20-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Light'), local('Roboto-Light'),
       url('fonts/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v20-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/roboto-v20-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Roboto Italic'), local('Roboto-Italic'),
       url('fonts/roboto-v20-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v20-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v20-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v20-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v20-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/roboto-v20-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('fonts/roboto-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v20-latin-500.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v20-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-v20-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('fonts/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* font-awesome-900 - solid */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url('fonts/fa-solid-900.eot');
  src: url('fonts/fa-solid-900.eot?#iefix') format('embedded-opentype'), url('fonts/fa-solid-900.woff2') format('woff2'), url('fonts/fa-solid-900.woff') format('woff'), url('fonts/fa-solid-900.ttf') format('truetype'), url('fonts/fa-solid-900.svg#fontawesome') format('svg'); }


/* Schriften */


h1 {
	font-family: 'Roboto', Helvetica, Arial, Lato, Verdana, sans-serif !important;
	text-transform: uppercase !important;
	font-size: 45px;
	color: #1d1d1d;
	font-weight: 300 !important;
	margin: 0px 0px 25px 0px;
	line-height: normal;
	width: 100%;
	display: inline-block;
	word-break: break-word;
	}

h2, h2.big {
	font-family: 'Roboto', Helvetica, Arial, Lato, Verdana, sans-serif !important;
	text-transform: uppercase;
	font-size: 45px;
	color: #1d1d1d;
	font-weight: 300 !important;
	margin: 0px 0px 25px 0px;
	line-height: normal;
	width: 100%;
	display: inline-block;
	}

h3, h4, h5, h6 {
	font-family: 'Roboto', Helvetica, Arial, Lato, Verdana, sans-serif !important;
	text-transform: uppercase;
	font-size: 25px;
	color: #1d1d1d;
	font-weight: 300 !important;
	margin: 0px 0px 10px 0px;
	line-height: normal;
	width: 100%;
	display: inline-block;
	word-break: break-word;
	}

p {
	font-family: 'Roboto' , Helvetica, Arial, Lato, Verdana, sans-serif !important;
	font-size: 16px;
	color: #1d1d1d;
	font-weight: 300 !important;
	margin: 0px 0px 15px 0px;
	line-height: 24px;
}

/*  */

body .home .hero-header {
	border: none;
}



/* Navigation Aktive Seite */

body .hero-header .elementor-nav-menu a.elementor-item.elementor-item-active,
body .hero-header .elementor-nav-menu a.elementor-item.elementor-item-active:visited {
    color: #1d1d1d !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

/* visual portfolio navigation */

body .vp-filter__style-default .vp-filter__item.vp-filter__item-active {
    --vp-filter-default--items-active__color: #ffffff;
    --vp-filter-default--items-active__background-color: #1d1d1d;
}

body .vp-filter__style-default {
    --vp-filter-default--items__font-weight: 300;
	--vp-filter-default--items__font-size: 16px;
    --vp-filter-default--items__border-radius: 0px;
	--vp-filter-default--items__color: #1d1d1d;
    --vp-filter-default--items-hover__color: #ffffff;
    --vp-filter-default--items-hover__background-color: #B5B0A4;
	--vp-filter-default--items__background-color: white;
	--vp-filter-default--items__border: 1px #B5B0A4;
}

body .vp-filter__style-default .vp-filter__item {
    border: 0.5px solid #B5B0A4 !important;
    border-radius: 0 !important;
}

/* Schriftart Roboto für den Filter und alle enthaltenen Links erzwingen */
body .vp-filter__style-default,
body .vp-filter__style-default .vp-filter__item,
body .vp-filter__style-default .vp-filter__item a {
    font-family: 'Roboto', sans-serif !important;
}

/* Bilder/Galerie Projektbeiträge */

.projekt-galerie {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.projekt-galerie-2 {
	display: flex;
	gap: 10px;
	width: 100%;
}

.projekt-container {
  display: flex;
  flex-direction: column;
  gap: 20px; 
  width: 100%;
}

@media (max-width: 900px) {
	.projekt-galerie {
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	}
	.projekt-galerie-2 {
	flex-direction: column;	
	}
	h1, h2 {
		font-size: 35px;
	}
}


/* ======================================================
   1. GRUNDEINSTELLUNGEN (Unterseiten & Standard)
   ====================================================== */
.hero-header {
  position: relative;
  z-index: 999;
  width: 100%;
  background-color: #ffffff;
  transition: all 0.3s ease-in-out;
}

/* Logos anzeigen/verstecken */
.hero-header .logo-white { display: none !important; }
.hero-header .logo-black { display: block !important; }

/* Texte, Links & Menüpunkte standardmäßig dunkel */
.hero-header a,
.hero-header .elementor-nav-menu a.elementor-item,
.hero-header .elementor-icon-list-text,
.hero-header .elementor-icon-list-icon i {
  color: #1a1a1a !important;
  transition: color 0.3s ease;
}

/* Hover-Farbe für einzelne Menüpunkte */
.hero-header a:hover,
.hero-header .elementor-nav-menu a.elementor-item:hover,
.hero-header .elementor-nav-menu a.elementor-item.elementor-item-active {
  color: #888888 !important;
}

/* ======================================================
   2. STARTSEITE - NORMALZUSTAND (Transparent & Weiß)
   ====================================================== */
body.home .hero-header {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Logo auf Startseite zu weiß wechseln */
body.home .hero-header .logo-white { display: block !important; }
body.home .hero-header .logo-black { display: none !important; }

/* Schrift auf der Startseite im Normalzustand rein weiß erzwingen */
body.home .hero-header a,
body.home .hero-header .elementor-nav-menu a.elementor-item,
body.home .hero-header .elementor-icon-list-text,
body.home .hero-header .elementor-icon-list-icon i {
  color: #ffffff !important;
}

/* Hover über einzelne Links im transparenten Zustand */
body.home .hero-header a:hover,
body.home .hero-header .elementor-nav-menu a.elementor-item:hover {
  color: #dddddd !important; 
}

/* ======================================================
   3. STARTSEITE - HEADER HOVER (Weißer Hintergrund)
   ====================================================== */
/* Beim Drüberfahren mit der Maus wird der Header weiß */
body.home .hero-header:hover {
  background-color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
}

/* Logos zurücktauschen bei Header-Hover */
body.home .hero-header:hover .logo-white { display: none !important; }
body.home .hero-header:hover .logo-black { display: block !important; }

/* Alle Links werden dunkel, sobald der Header gehovered wird */
body.home .hero-header:hover a,
body.home .hero-header:hover .elementor-nav-menu a.elementor-item,
body.home .hero-header:hover .elementor-icon-list-text,
body.home .hero-header:hover .elementor-icon-list-icon i {
  color: #1a1a1a !important;
}

/* Einzelner gehoverter Menüpunkt im weiß gewordenen Header */
body.home .hero-header:hover a:hover,
body.home .hero-header:hover .elementor-nav-menu a.elementor-item:hover,
body.home .hero-header:hover .elementor-nav-menu a.elementor-item.elementor-item-active {
  color: #888888 !important;
}

/* Sanfter Übergang für das Logo */
.hero-header img {
  transition: all 0.3s ease-in-out !important;
}

/* ======================================================
   4. 404 - NORMALZUSTAND (Transparent & Weiß)
   ====================================================== */
body.error404 .hero-header {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Logo auf Startseite zu weiß wechseln */
body.error404 .hero-header .logo-white { display: block !important; }
body.error404 .hero-header .logo-black { display: none !important; }

/* Schrift auf der Startseite im Normalzustand rein weiß erzwingen */
body.error404 .hero-header a,
body.error404 .hero-header .elementor-nav-menu a.elementor-item,
body.error404 .hero-header .elementor-icon-list-text,
body.error404 .hero-header .elementor-icon-list-icon i {
  color: #ffffff !important;
}

/* Hover über einzelne Links im transparenten Zustand */
body.error404 .hero-header a:hover,
body.error404 .hero-header .elementor-nav-menu a.elementor-item:hover {
  color: #dddddd !important; 
}

/* ======================================================
   5. 404 - HEADER HOVER (Weißer Hintergrund)
   ====================================================== */
/* Beim Drüberfahren mit der Maus wird der Header weiß */
body.error404 .hero-header:hover {
  background-color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
}

/* Logos zurücktauschen bei Header-Hover */
body.error404 .hero-header:hover .logo-white { display: none !important; }
body.error404 .hero-header:hover .logo-black { display: block !important; }

/* Alle Links werden dunkel, sobald der Header gehovered wird */
body.error404 .hero-header:hover a,
body.error404 .hero-header:hover .elementor-nav-menu a.elementor-item,
body.error404 .hero-header:hover .elementor-icon-list-text,
body.error404 .hero-header:hover .elementor-icon-list-icon i {
  color: #1a1a1a !important;
}

/* Einzelner gehoverter Menüpunkt im weiß gewordenen Header */
body.error404 .hero-header:hover a:hover,
body.error404 .hero-header:hover .elementor-nav-menu a.elementor-item:hover,
body.error404 .hero-header:hover .elementor-nav-menu a.elementor-item.elementor-item-active {
  color: #888888 !important;
}