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




/* ======================================================== SPANS ======================================================== */
.bgyellow {background: #f4e3b7; color: #262626; padding-left: 15px; padding-right: 15px; font-weight: 700; text-transform: uppercase;}
.bgyellow2 {background: #f4c449; color: #000; padding-left: 15px; padding-right: 15px; font-weight: 700; text-transform: uppercase;}
.bgreferenzen {background: #f4e3b7; color: #262626; padding-left: 15px; padding-right: 15px; font-weight: 700 ;text-transform: uppercase;}
.bgblack {background: #262626; color: #fff; padding-left: 15px; padding-right: 15px; font-weight: 700 ;text-transform: uppercase;}
.bgwhite {background: #fff; color: #263947; padding-left: 15px; padding-right: 15px; font-weight: 700; text-transform: uppercase;}
.bgblue {background: #263947; color: #fff; padding-left: 15px; padding-right: 15px; font-weight: 700; text-transform: uppercase;}

/* SERVICE BOX */
#service-box {transition: background 0.2s ease, transform 0.2s ease;}
@media all and (min-width: 980px) {#service-box:hover {background: #f4c449; transform: scale(1.05);}}



/* ============================== MEDIA QUERIES: LAYOUT ============================== */
#custom-row {max-width: 100%;}

@media all and (max-width: 550px) {
	/* Button */ .button-base {display: block; width: 100%;}
}

@media all and (max-width: 980px) {
	#basic-section {padding: 7vh 0;}
	#custom-row {width: 95%;}
	/* Accordion Header Höhe */ .accordion-header {padding: 0px 5% 0px 5%; min-height: 70px;}
	/* Accordion Text Weite */ .accordion-content {padding: 0px 5%;}
	/* Service-Box (Webdeisgn / Webcare) */ #service-box {padding: 40px 20px;}
	/* Angebot / Preise */ #offer-box {padding: 50px 25px;}
}

@media all and (min-width: 981px) and (max-width: 1399px) {
	#basic-section {padding: 10vh 0;}
	#custom-row {width: 95%;}
	/* Accordion Header Höhe */ .accordion-header {padding: 0px 25px 0px 25px; min-height: 90px;}
	/* Accordion Text Weite */ .accordion-content {padding: 0px 25px;}
	/* Service-Box (Webdeisgn / Webcare) */ #service-box {padding: 6% 3%;}
	/* Angebot / Preise */ #offer-box {padding: 4% 2%;}
}

@media all and (min-width: 1400px) {
	#basic-section {padding: 13vh 0;}
	#custom-row {width: 90%;}
	/* Accordion Header Höhe */ .accordion-header {padding: 0px 25px 0px 25px; min-height: 90px;}
	/* Accordion Text Weite */ .accordion-content {padding: 0px 25px;}
	/* Service-Box (Webdeisgn / Webcare) */ #service-box {padding: 7% 4%;}
	/* Angebot / Preise */ #offer-box {padding: 4% 2%;}
}

@media all and (min-width: 2001px) {
	#basic-section {padding: 13vh 0;}
	#custom-row {max-width: 1650px; width: 100%;}
	/* Service-Box (Webdeisgn / Webcare) */ #service-box {padding: 8% 5%;}
}



/* ============================== TEXTFORMATIERUNG ============================== */
.starttitle {font-weight: 700; line-height: 1.5em;}
body:not(.wp-admin) h2 {font-family: 'Poppins', sans-serif; text-transform: uppercase; margin-top: 10px; letter-spacing: 1px; font-weight: 700; line-height: 1.2em;}
body:not(.wp-admin) h3 {font-family: 'Poppins', sans-serif; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; line-height: 1.7em;}
#offer-box h3 {font-size: 24px!important; letter-spacing: 1px; font-weight: 700;}
#offer-box .et_pb_text_inner {font-size: 17px!important; line-height: 1.7em!important;}

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: 'Poppins', sans-serif;}
body:not(.wp-admin) h1, body:not(.wp-admin) h4, body:not(.wp-admin) h5, body:not(.wp-admin) h6 {font-family: 'Poppins', sans-serif;}


/* ============================== Min-Size (Mobile and small Screens) ==============================  */
@media all and (max-width: 980px) {
	.title {font-size: 9vw!important; text-align: center; text-transform: uppercase; letter-spacing: 1px; font-weight: 700;}
	.starttitle {font-size: 30px; text-align: center;}
	.icon-list-text {font-size: 16px; line-height: 1.4; margin: 0; padding: 0; font-weight: 700; letter-spacing: 1px;}
	/* Headline H2 */ body:not(.wp-admin) h2 {font-size: 40px;}
	/* Headline H3 */body:not(.wp-admin) h3 {font-size: 28px;}
	/* Normaler Text */ .basic-text {font-size: 16px; line-height: 1.8em!important;}
	/* Große Zwischenheadline */ .headline-big {font-size: 60px!important;}
	/* Accordeon Header-Text */ .link-text {font-size: 17px;}
	/* Accordion Body Text */ .accordion-content {font-size: 16px; line-height: 1.8em;}
	.accordion-content  {font-size: 16px!important; line-height: 1.8em!important;}
}
/* ============================== Grow-Area ==============================  */
@media all and (min-width: 981px) {
	.starttitle {font-size: 4.5vw; text-align: left;}
	.title {font-size: 9vw!important; text-align: left; text-transform: uppercase; letter-spacing: 1px; font-weight: 700;}
	.icon-list-text {font-size: 20px; line-height: 1.4; margin: 0; padding: 0; font-weight: 700; letter-spacing: 1px;}
	/* Headline H2*/ body:not(.wp-admin) h2 {font-size: 3.5vw;}
	/* Headline H3 */body:not(.wp-admin) h3 {font-size: 2.2vw;}
	/* Normaler Text */ .basic-text {font-size: 17px; line-height: 1.8em;}
	/* Große Zwischenheadline */ .headline-big {font-size: 5vw!important;}
	/* Accordion Header-Text*/ .link-text {font-size: 20px;}
	/* Accordion Body Text */ .accordion-content {font-size: 17px; line-height: 1.8em;}
}
/* ============================== Max-Size: 2000px ==============================  */
@media all and (min-width: 2001px) {
	.title {font-size: 180px!important; text-align: left; text-transform: uppercase; letter-spacing: 1px; font-weight: 700;}
	.starttitle {font-size: 90px; text-align: left;}
	/* Headline H2*/ body:not(.wp-admin) h2 {font-size: 70px;}
	/* Headline H3 */body:not(.wp-admin) h3 {font-size: 40px;}
	/* Normaler Text */ .basic-text {font-size: 18px; line-height: 1.9em;}
	/* Große Zwischenheadline */ .headline-big {font-size: 100px!important;}
}




/* Kontaktformular Styling */
.et_pb_contact_field_options_title {color: #fff; margin-top: 60px; line-height: 1.4em;}
.et-pb-contact-message {color: #fff;}
.et_contact_bottom_container {margin-top: 0px!important;}

/* ============================== Icon List ============================== */
.icon-list {display: flex; flex-direction: column; gap: 1.2rem; max-width: 800px; margin: 0 auto; align-items: center;}
.icon-list-item {display: flex; align-items: center; gap: 1rem;}
.icon-list-wrapper {width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.icon-list-blue {background-color: #263947;}
.icon-list-wrapper img {width: 50%; height: auto;}




/* ============================ BUTTONS ============================ */
.button-wrapper {text-align: center;}

.button-menu, .button-base-single, .button-base, .button-menu-mobile {text-transform: uppercase; letter-spacing: 1px; font-weight: 700; transition: background-color 0.2s ease, border-radius 0.2s ease, padding 0.2s ease, color 0.2s ease, width 0.5s ease; cursor: pointer; user-select: none;}

.button-menu {font-size: 23px; background: #fff; color: #263947; display: inline-block; padding: 7px 35px; margin-bottom: 10px!important; }
.button-menu-mobile {font-size: 17px; background: #fff; color: #263947; display: inline-block; padding: 5px 0px; margin-bottom: 10px!important; width: 100%; max-width: 400px;}
.button-base {font-size: 20px; display: inline-block; padding: 7px 28px;}
.button-base-single {font-size: 24px; display: inline-block; padding: 15px 35px; margin-bottom: 10px!important;}

.button-menu:hover {background: #f4c449}
.button-base:hover, .button-base-single:hover {border-radius: 50px;}

.button-white {background: #fff; color: #263947;}
.button-white-yellow {background: #fff; color: #263947;}
.button-blue {background: #263947; color: #fff;}

.button-white:hover {background: #263947; color: #fff;}
.button-white-yellow:hover {background: #f4c449; color: #262626;}
.button-blue:hover {background: #fff; color: #263947;}

.nav-left .button-menu:hover {padding-right: 15%; padding-left: 15%;}
.nav-right .button-menu:hover {padding-left: 15%; padding-right: 15%;}

/* ============================ 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; background: rgba(38,57,71,0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow-y: auto; align-content: center;}

#full-screen-menu.open {top: 0;}

/* Menu Icon */ .icon-bar {position: relative; z-index: 11000;} #menu-icon, #close-icon {position: fixed; top: 20px; right: 20px; cursor: pointer; z-index: 10000; transition: opacity 0.3s ease; background: transparent;} .hidden {opacity: 0; pointer-events: none;} .visible {opacity: 1;pointer-events: auto;}

.nav-left {display: flex; flex-direction: column; align-items: flex-end;}
.nav-right {display: flex; flex-direction: column; align-items: flex-start;}
.nav-center {display: flex; flex-direction: column; align-items: center;}

/* 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;}

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

/* poppins-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: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/poppins-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-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: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/poppins-v22-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-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: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/poppins-v22-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-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: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/poppins-v22-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-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: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/poppins-v22-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-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: 'Poppins';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/poppins-v22-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ============================== SELECTIONS ============================== */
.selector-dark ::-moz-selection { background: #263947; color: #f4c449; }
	::selection { background: #263947; color: #f4c449; }

::-moz-selection { background: #f4c449; color: #262626; }
	::selection { background: #f4c449; color: #262626; }


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

.accordion-cream, .accordion-blue, .accordion-offer {max-width: 100%;}

 /* Accordion Header Styling */ .accordion-header {display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-family: 'Poppins', sans-serif; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; user-select: none; box-sizing: border-box;}

/* Header Text */ .link-text {flex: 1;  padding-right: 20px;}

/* Accordion Header Hover*/ .accordion-item:hover .accordion-header {}

/* Item */ .accordion-item {margin-bottom: 15px; overflow: visible; box-sizing: border-box;}

/* Accordion Content */ .accordion-content {height: 0; overflow: hidden; font-family: 'Poppins', sans-serif; line-height: 1.7em; transition: height 0.3s ease, padding 0.3s ease; box-sizing: border-box; background: transparent;}


/* Icon Styling */ .icon-wrapper {width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; user-select: none;}

/* Icon Closed */ .icon-wrapper::before {content: "+"; font-size: 18px; display: inline-block; line-height: 1; font-weight: 600; padding-left: 1px;}
/* Icon Open */ .accordion-item.active .icon-wrapper::before {content: "–";}


/* Accordion Color Versions */
/* Header Cream */ .accordion-cream .accordion-header {background: #f4e3b7; color: #2d2d2d;}
/* Header Blue */.accordion-blue .accordion-header {background: #263947; color: #fff;}

/* Inhalt Cream */  .accordion-cream .accordion-content {color: #fff;}
/* Inhalt Blue */  .accordion-blue .accordion-content {color: #262626;}

/* Icon Cream */ .icon-cream {background: #263947; color: #f4e3b7;}
/* Icon Blue */ .icon-blue {background: #fff; color: #263947;}
/* Icon Yellow */ .icon-yellow {background: #f4c449; color: #263947;}

/* Accordion Offer Styling */
 /* Accordion Header Styling (Offer) */ .accordion-offer .accordion-header {display: flex; justify-content: space-between; align-items: center; padding: 0px 10px 0px 0px; cursor: pointer; font-family: 'Poppins', sans-serif; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; user-select: none; min-height: 35px; box-sizing: border-box; border-left-width: 5px; color: #fff;}

/* Headline */ .accordion-offer .link-text {font-size: 17px; flex: 1;}

/* Content*/ .accordion-offer .accordion-content {height: 0; overflow: hidden; padding: 0px; font-family: 'Poppins', sans-serif; font-size: 17px; line-height: 1.7em; transition: height 0.3s ease, padding 0.3s ease; box-sizing: border-box; background: transparent; color: #fff;}


/* 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;}
.accordion-offer .accordion-item.active .accordion-header {color: #f4c449;}
.accordion-offer .accordion-item.active .icon-blue {background: #f4c449; color: #263947;}



/* ============================== 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);
}


/* ============================== LEGAL ============================== */

#legal h1, #legal h2, #legal h3, #legal h4, #legal h5 {color: #fff!important; margin-top: 30px;}

#legal h1, #legal h2 {font-size: 25px;}
#legal h3 {font-size: 22px;}
#legal h4 {font-size: 20px;}
#legal h5 {font-size: 18px;}