/**
 * Theme Name:     BC Child Theme
 * Author:         netwebbery
 * Template:       Divi
 * Text Domain:	   bc-child-theme
 * Description:    Child Theme for BC.
 */

.floating-tesla {
  transition: opacity 0.3s ease;
  z-index: 9999;
}

.floating-tesla.hidden {
  opacity: 0;
  pointer-events: none;
}


::-moz-selection { background: #ff8225; color: #fff; }
	::selection { background: #ff8225; color: #fff; }

/* ============================== ICONS ============================== */

.icon-wrapper-contact {display: flex; gap: 0px; justify-content: center;}
.icon-circle {width: 40px; height: 40px; border-radius: 50%; background: #172328; padding: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transition: background 0.2s ease;; display: flex; align-items: center; justify-content: center;}
.icon-circle img {width: 100%; height: 100%; object-fit: contain;}
.icon-circle:hover {background: #ff8225;cursor: pointer;}

/* ============================== NBA ============================== */

#nba-box {border-radius: 3px; border-bottom: 7px solid #172328; transition: border-color 0.2s ease; overflow: hidden; position: relative;}
#nba-box:hover {border-bottom-color: #ff8225;}

.batterie, .elektrotechnik, .photovoltaik, .smarthome, .emobility {position: relative; color: white; z-index: 0; overflow: hidden;}

.batterie::before, .elektrotechnik::before, .photovoltaik::before, .smarthome::before, .emobility::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1; transition: background 0.4s ease;}

/* Background-Image */
.batterie::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('/wp-content/uploads/2025/06/batteriespeicher-teaser.jpg'); background-size: cover; background-position: left; background-repeat: no-repeat; z-index: 0; transition: transform 0.5s ease;}
.elektrotechnik::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('/wp-content/uploads/2025/06/elektrotechnik-teaser.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; transition: transform 0.5s ease;}
.photovoltaik::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('/wp-content/uploads/2025/06/photovoltaik-teaser.jpg'); background-size: cover; background-position: left; background-repeat: no-repeat; z-index: 0; transition: transform 0.5s ease;}
.smarthome::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('/wp-content/uploads/2025/06/smarthome-teaser.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; transition: transform 0.5s ease;}
.emobility::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('/wp-content/uploads/2025/06/elektromobilitaet-teaser.jpg'); background-size: cover; background-position: left; background-repeat: no-repeat; z-index: 0; transition: transform 0.5s ease;}
/* Zoom-in */
.batterie:hover::after, .elektrotechnik:hover::after, .photovoltaik:hover::after, .smarthome:hover::after, .emobility:hover::after {transform: scale(1.1);}
.batterie:hover::before, .elektrotechnik:hover::before, .photovoltaik:hover::before, .smarthome:hover::before, .emobility:hover::before {background: rgba(0, 0, 0, 0);}
/* h4 ausblenden */
.batterie h4, .elektrotechnik h4, .photovoltaik h4, .smarthome h4, .emobility h4 {position: relative;z-index: 2; transition: opacity 0.3s ease, transform 0.3s ease; }
.batterie:hover h4, .elektrotechnik:hover h4, .photovoltaik:hover h4, .smarthome:hover h4, .emobility:hover h4 {opacity: 0;transform: translateY(-10px);}


/* ============================== BUTTONS ============================== */
.button-base-menu {text-transform: uppercase; letter-spacing: 2px; font-size: 15px; border-left: 7px solid #ff8225; border-radius: 3px; display: block; padding: 10px 45px; transition: background 0.15s ease, color 0.15s ease, padding 0.4s ease; user-select: none;}

@media all and (max-width: 980px) {
.button-base-menu {font-size: 13px; padding: 7px 5px;}
.button-base {display: inline-flex;; text-transform: uppercase; letter-spacing: 2px; font-size: 15px; border-left: 7px solid #ff8225; border-radius: 3px; padding: 10px 45px; transition: background 0.15s ease, color 0.15s ease, padding 0.4s ease; width: 100%; max-width: 100%; justify-content: center; user-select: none;}
.button-light {background: #fff; color: #172328; z-index: 0;}
.button-dark {background: #172328; color: #fff; z-index: 0;}
	
.button-base-center { display: inline-flex; text-transform: uppercase; letter-spacing: 2px; font-size: 15px; border-left: 7px solid #ff8225; border-radius: 3px;padding: 10px 45px; transition: background 0.3s ease, color 0.2s ease, padding 0.4s ease; width: 100%; max-width: 100%; justify-content: center; user-select: none;}
}

@media all and (min-width: 981px) {
.button-base {text-transform: uppercase; letter-spacing: 2px; font-size: 15px; border-left: 7px solid #ff8225; border-radius: 3px; display: inline-flex; padding: 10px 45px; transition: background 0.15s ease, color 0.15s ease, padding 0.4s ease; user-select: none;}
.button-base:hover {padding: 10px 70px;}
.button-light {background: #fff; color: #172328; z-index: 0;}
.button-dark {background: #172328; color: #fff; z-index: 0;}
	
.button-base-center {text-transform: uppercase; letter-spacing: 2px; font-size: 15px; border-left: 7px solid #ff8225; border-radius: 3px; display: inline-flex; padding: 10px 45px; transition: background 0.15s ease, color 0.15s ease, padding 0.4s ease; min-width: 350px; justify-content: center; user-select: none;}
}

.button-light:hover, .button-dark:hover {background: #ff8225; color: #000;}


/* ============================== ACCORDEON ============================== */

.accordion-dark, .accordion-light {max-width: 100%;}

/* HEADER */ .accordion-dark .accordion-header, .accordion-light .accordion-header {display: flex; justify-content: space-between; align-items: center; padding: 0px 15px 0px 25px; cursor: pointer; font-family: 'Figtree', sans-serif !important; text-transform: uppercase; letter-spacing: 3px; font-weight: 800; font-size: 10px !important; user-select: none; min-height: 60px; box-sizing: border-box; border-right-width: 7px; border-right-color: #172328; border-right-style: solid; border-radius: 0px 3px 3px 0px; transition: border-radius 0.2s ease;}
.accordion-item:hover .accordion-header {}

/* Header dark */ .accordion-dark .accordion-header {background: #172328; color: #fff;}
/* Header light */.accordion-light .accordion-header{background: #fff; color: #000;}

/* ITEM */ .accordion-item {border-radius: 3px; margin-bottom: 15px; overflow: visible; box-sizing: border-box; border-left-width: 7px; border-left-color: #ff8225; border-left-style: solid;}

/* INHALT */ .accordion-dark .accordion-content, .accordion-light .accordion-content {height: 0;  overflow: hidden; padding: 0 30px; font-family: 'Rubik', sans-serif; font-size: 15px; line-height: 1.7; transition: height 0.3s ease, padding 0.3s ease; box-sizing: border-box; background: transparent;}

/* Inhalt Dark */  .accordion-dark .accordion-content {color: #000;}
/* Inhalt Light */  .accordion-light .accordion-content {color: #fff;}

.link-text {font-size: 15px;flex: 1;}

/* Icon Stil */ .icon-wrapper {flex-shrink: 0; font-size: 13px; display: flex; align-items: center; justify-content: center; user-select: none;}
/* Icon Closed */ .icon-wrapper::before {content: "+"; font-size: 22px; color: #ff8225; display: inline-block; line-height: 1; font-weight: 600;}
/* Icon open */ .accordion-item.active .icon-wrapper::before {content: "–";}

/* Active Accordion:*/
.accordion-item.active .accordion-content {padding-top: 10px; padding-bottom: 10px;}
.accordion-item.active .accordion-header {border-radius: 0px 3px 0px 0px;}
.accordion-content p:first-of-type {margin-top: 15px;}
.accordion-content p:last-of-type {margin-bottom: 25px;}





/* ============================== GRÖSSE BIS 980px - MINIMUM SIZE ============================== */

@media all and (max-width: 980px) {
#navigation-row {max-width: 95%; width: 100%;}
#custom-row {width: 100%; max-width: 94%;}
body:not(.wp-admin) h2 {font-size: 30px; font-weight: 700; text-transform: uppercase; line-height: 1.2em; letter-spacing: 2px;}
body:not(.wp-admin) h3 {font-size: 24px; font-weight: 600; text-transform: uppercase; line-height: 1.2em; letter-spacing: 2px;}
body:not(.wp-admin) h4 {font-size: 20px; text-transform: uppercase; letter-spacing: 5px; font-weight: 700; line-height: 1.2em;}
.stage-title {font-size: 30px; color: #fff; font-weight: 700; text-align: center;margin-top: 20px!important;}
.tagline {border-right: 7px solid #ff8225; text-align: center;}


	



/* Accordion Header */ .accordion-dark .accordion-header, .accordion-light .accordion-header {display: flex; justify-content: space-between; align-items: center; padding: 15px 15px 15px 25px; cursor: pointer; font-family: 'Figtree', sans-serif !important; text-transform: uppercase; letter-spacing: 3px; font-weight: 800; font-size: 10px !important; user-select: none; min-height: 60px; box-sizing: border-box; border-right-width: 7px; border-right-color: #172328; border-right-style: solid; border-radius: 0px 3px 3px 0px; transition: border-radius 0.2s ease;}
}
/* HEADLINES & FONT */
body:not(.wp-admin) h2 {font-weight: 700; text-transform: uppercase; line-height: 1.2em; letter-spacing: 2px;}
body:not(.wp-admin) h3 {font-weight: 700; text-transform: uppercase; line-height: 1.2em; letter-spacing: 2px;}
body:not(.wp-admin) h4 {text-transform: uppercase; letter-spacing: 5px; font-weight: 700; line-height: 1.2em;}

/* ============================== GRÖSSENANPASSUNG AB 980px - SMALL SIZE ============================== */

@media all and (min-width: 981px) {
#navigation-row {max-width: 95%; width: 100%;}
#custom-row {width: 100%; max-width: 90%;}
body:not(.wp-admin) h2 {font-size: 40px;}
body:not(.wp-admin) h3 {font-size: 28px;}
body:not(.wp-admin) h4 {font-size: 20px;}
.stage-title {font-size: 3.5vw; color: #fff; font-weight: 700; text-align: left; letter-spacing: 2px;}
	
	
	
	
	
.menu-image, #hover-image {width: 45vh;}






}


/* ============================== GRÖSSENANPASSUNG AB 1400px - MID SIZE ============================== */

@media all and (min-width: 1401px) {
#navigation-row {max-width: 75%; width: 100%;}
#custom-row {width: 100%; max-width: 80%;}
	
	
	
	

	.menu-image, #hover-image {width: 50vh;}
	
	

}

/* ============================== GRÖSSENANPASUNG AB 2000px - MAX-SIZE==============================  */

@media all and (min-width: 2001px) {
#navigation-row {width: 100%; max-width: 1400px;}
#custom-row {width: 100%; max-width: 1800px;}
.stage-title {font-size: 60px; color: #fff; font-weight: 700;}
	
	
	.menu-image, #hover-image {width: 50vh; max-width: 1000px;}
	
	

}

.tagline {position: relative; overflow: hidden; display: block; line-height: 2em; padding: 0px 25px; font-size: 15px; border-left: 7px solid #ff8225; border-radius: 3px; font-family: 'Figtree', sans-serif!important; background: transparent; text-transform: uppercase; margin-bottom: 13px; margin-left: 2px; font-weight: 800; letter-spacing: 1px}

.tagline-center {position: relative; overflow: hidden; display: block; line-height: 2em; padding: 0px 25px; font-size: 15px; border-left: 7px solid #ff8225; border-right: 7px solid #ff8225; border-radius: 3px; font-family: 'Figtree', sans-serif!important; background: transparent; text-transform: uppercase; font-weight: 800; letter-spacing: 1px; width: 100%; max-width: 200px; justify-content: center; margin: 0 auto;}

/* ============================== FULL SCREEN MENU ============================== */

#full-screen-menu {position: fixed; top: -100%; left: 0; width: 100%; height: 100%; z-index: 9999; transition: top 0.5s ease-in-out; /* Hintergrund mit Blur */ background: linear-gradient(to bottom right, rgba(247, 247, 247, 0.9), rgba(255, 255, 255, 0.9)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* Layout */ display: flex; flex-direction: column; align-items: center; /* optional: zentriert horizontal */ padding: 40px 20px; overflow-y: auto; /* <--- das ist der Schlüssel */}

/* Wenn geöffnet */ #full-screen-menu.open {top: 0;}

/* Menu Icon */ .icon-bar {position: relative; z-index: 11000;} /* Styling +. Position */ #menu-icon, #close-icon {position: fixed; top: 15px; right: 15px; cursor: pointer; z-index: 10000; transition: opacity 0.3s ease;} /* Icon versteckt */ .hidden {opacity: 0; pointer-events: none;} /* Icon sichtbar */ .visible {opacity: 1;pointer-events: auto;}
/* Menu Image */ #hover-image {height: auto; transition: opacity 0.3s ease; text-align: right; border-radius: 3px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);}
/* Social Icons */ .social-icon .et_pb_icon_wrap {background: #172328!important; transition: background 0.2s ease;}
/* Social Icons Hover */ .social-icon .et_pb_icon_wrap:hover {background: #000!important;}
/* Social Icons */ .social-icon-footer .et_pb_icon_wrap {background: #fff!important; transition: background 0.2s ease;}
/* Social Icons Hover */ .social-icon-footer .et_pb_icon_wrap:hover {background: #ff8225!important;}

/* ============================== FONT FORMATIERUNG ============================== */


body:not(.wp-admin) h1,
body:not(.wp-admin) h2,
body:not(.wp-admin) h3,
body:not(.wp-admin) h4,
body:not(.wp-admin) h5,
body:not(.wp-admin) h6
 {
  font-family: 'Figtree', sans-serif;
}

body:not(.wp-admin) p,
body:not(.wp-admin) li,
body:not(.wp-admin) a,
body:not(.wp-admin) input,
body:not(.wp-admin) textarea,
body:not(.wp-admin) label,
body:not(.wp-admin) div {
  font-family: 'Rubik', sans-serif;
}


/* ============================== FONTS ============================== */



/* figtree-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/figtree-v8-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* figtree-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/figtree-v8-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* figtree-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/figtree-v8-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* figtree-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/figtree-v8-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* figtree-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/figtree-v8-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* figtree-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/figtree-v8-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* figtree-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/figtree-v8-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* figtree-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/figtree-v8-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* rubik-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/rubik-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* rubik-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rubik';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/rubik-v30-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* rubik-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/rubik-v30-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* rubik-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/rubik-v30-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* rubik-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/rubik-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* rubik-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rubik';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/rubik-v30-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* rubik-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/rubik-v30-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* rubik-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/rubik-v30-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* ANIMATIONEN */
body:not(.et-fb) .reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.6s ease-out;
  will-change: opacity, transform;
}

body:not(.et-fb) .reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

body:not(.et-fb) .reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.6s ease-out;
  will-change: opacity, transform;
}

body:not(.et-fb) .reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

body:not(.et-fb) .reveal-top {
  opacity: 0;
  transform: translateY(-50px);
  transition: all 0.6s ease-out;
  will-change: opacity, transform;
}

body:not(.et-fb) .reveal-top.visible {
  opacity: 1;
  transform: translateY(0);
}

body:not(.et-fb) .reveal-bottom {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease-out;
  will-change: opacity, transform;
}

body:not(.et-fb) .reveal-bottom.visible {
  opacity: 1;
  transform: translateY(0);
}

.mobile {
	font-size: 18px!important;
}

#legal h1 {font-size: 30px!important; margin-top: 30px;}
#legal h2 {font-size: 27px!important; margin-top: 30px; text-transform: none!important; letter-spacing: 0px!important}
#legal h3 {font-size: 25px!important; margin-top: 30px; text-transform: none!important; letter-spacing: 0px!important}
#legal h4 {font-size: 22px!important; margin-top: 20px; text-transform: none!important; letter-spacing: 0px!important}