/*
Theme Name: CeeQoo Divi Child Theme
Theme URI: https://ceeqoo.com
Description: Child Theme For online-makers.camp
Author: CeeQoo
Author URI: https://ceeqoo.com
Template: Divi
*/

/* Start your custom CSS bellow this comment
============================================ */

/*Mehr Abstand bei den Standard-Buttons*/
/*
.et_pb_button {
    padding-top: 14px!important;
    padding-right: 38px!important;
    padding-bottom: 14px!important;
    padding-left: 38px!important;
}
*/
/* ========================== Mobile Breite ================================ */
@media (max-width: 980px) {
	.et_pb_row {
    	width: 86%;
	}
}


/* ========================== Menü-Anpassungen ================================ */
/* mehr Abstand zwischen den Menüpunkten */
.et_pb_menu_0_tb_header .et_pb_menu .et-menu>li {
    padding-left: 16px !important;
    padding-right: 16px !important;
}
@media (max-width: 1303px) {
	.et_pb_menu_0_tb_header .et_pb_menu .et-menu>li {
    padding-left: 11px !important;
    padding-right: 11px !important;
}
}

@media (min-width: 981px) {
	.et_pb_sticky.et_pb_section_0_tb_header:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
		transition: width 500ms ease 0ms;
		width: 55%;
	}
}

/* Footer menu vertical */
.vertical_menu.et_pb_menu .et_pb_menu__menu > nav > ul{
		display: block;
	}
/* Mobile menu fix 08.08.2024 */
@media (max-width: 980px) {
	.et_pb_row_0_tb_header {
    	transform: none !important;
  	}
	.et_mobile_menu {
		text-align: right !important;
		/*left: unset; für Hamburgermenü ganz rechts wichtig*/ 
		right: 10px;
		border-radius: 5px;
	}
	footer .et_pb_menu__menu {
		display: block !important;
		/*margin-left: -5px;*/
	}
	footer .et_pb_menu__wrap {
		justify-content: normal !important;
	}

	footer .et_mobile_nav_menu {
		display: none!important;
	}
}
/* Mobil: */
@media (max-width: 767px) {
	.et_mobile_menu {
		width: 50vw !important;
		top: 41px !important;
	}
	
}
/* Tablet: */
@media (min-width: 768px) {
	.et_mobile_menu {
		width: 30vw !important;
		top: 56px !important;
	}
}

/*=========================== Sidebar Anpassungen =============================*/
#recent-posts-2 > ul > li {
	font-size: 0.9em;
	line-height: 1.3em;
}

/*=========================== Blog-Modul - Abstände =============================*/
.blog-modul-mehr-zum-thema .et_pb_post{
	margin-bottom: 20px;
}

/*=========================== Blurb with round shadow =============================*/
.blurb_with_shadow .et_pb_main_blurb_image .et_pb_image_wrap{
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2) !important;
}

/*=========================== Rows auf mobil oben/unten tauschen =============================*/
@media only screen and (max-width: 980px) {
	.et_pb_row {
        display: flex;
        flex-direction: column;
	}
    .row-unten {
        order: 2;
    }
    .row-oben {
        order: 1;
    }
}

/*=========================== Carousel =============================*/
.dmpro_carousel_child .dmpro-carousel-item-content {
	padding-top: 0px !important;	
}
/*.dmpro_carousel.dmpro_carousel_0 .dmpro-carousel-item-content .dmpro-carousel-button-wrapper .dmpro-carousel-button {
	font-size: 16px !important;
}*/
/*.dmpro_carousel.dmpro_carousel_0 .dmpro-carousel-item-content > h2 {
	margin-top: 8px !important;
}
.et_pb_button .dmpro-carousel-button {
	font-size: 16px !important;
	border-width: 4px;
	border-color: #944000 !important;
}
.dmpro_carousel .dmpro-carousel-button-wrapper a:hover {
	background-color: rgb(255, 255, 255, 0.2);
	border-width: 4px !important;
	border-color: #944000 !important;
}*/

/*=========================== FAQ Toggle Element =============================*/
.et_pb_toggle_content {
    margin-bottom: 0; /* Set the initial state */
    -webkit-transition: margin-bottom 0.2s ease;
    transition: margin-bottom 0.2s ease;
}

.et_pb_toggle_open .et_pb_toggle_content {
    margin-bottom: 4vh; /* The state after the toggle is open */
}

.et_pb_toggle_close .et_pb_toggle_content {
    margin-bottom: 0; /* The state after the toggle is closed */
}

/*=========================== Kontaktformular-Anpassungen =============================*/
.wpcf7-form p {
	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    width: 100%;
    padding: 10px 20px; /* Innenabstand des Feldes */
    border: 2px solid #ffb985; /* Rahmenfarbe, passend zum Button */
    border-radius: 30px; /* Abgerundete Ecken */
    font-size: 16px; /* Schriftgröße */
    color: #333; /* Textfarbe */
    background-color: white; /* Hintergrundfarbe */
    box-sizing: border-box; /* Box-Sizing, um Padding und Border innerhalb der Breite zu halten */
	margin-top: 6px;
}
/* Größe der Radio-Buttons anpassen */
input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: rgb(255, 185, 133); /* Farbe des Kreises anpassen */
    margin-right: 8px; /* Abstand zum Text */
	vertical-align: middle;
}
.wpcf7-list-item-label{
	vertical-align: text-top;
}
.wpcf7-list-item {
	margin-left: 0px;
}
/* Stil für das Zahlenfeld */
input[type="number"].wpcf7-form-control {
    background-color: rgb(255, 255, 255);
    border-color: rgb(255, 185, 133);
    border-style: solid;
    border-width: 2px;
    border-radius: 30px;
    box-sizing: border-box;
    color: rgb(51, 51, 51);
    cursor: text;
    display: inline-block;
    font-family: Inter, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    height: 44px;
    line-height: normal;
    padding: 10px 20px;
	margin-left: 8px;
	margin-right: 12px;
    width: 12%;
    -webkit-font-smoothing: antialiased;
}
.wpcf7 #rabattcode {
	width: 50%;
	margin-left: 8px;
	margin-right: 12px;
}
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    color: #aaa; /* Hellgraue Farbe für den Platzhaltertext */
    opacity: 1; /* Stellt sicher, dass die Farbe wie gewünscht dargestellt wird */
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus {
    outline: none; /* Entfernt den Standard-Umriss bei Fokus */
    border-color: #ffb985; /* Rahmenfarbe bei Fokus */
}

.wpcf7 textarea {
    resize: none; /* Verhindert das Vergrößern des Textbereichs */
}

.wpcf7-submit {
    background-color: rgba(255,255,255,0.3); /* Hintergrundfarbe des Buttons */
    color: #141414; /* Textfarbe */
    padding: 10px 18px; /* Innenabstand des Buttons */
    border: 3px solid #ffb985; /* Rahmenfarbe, passend zum Button */
    border-radius: 20px; /* Abgerundete Ecken */
    font-size: 18px; /* Schriftgröße */
	font-weight: 700;
    text-transform: uppercase; /* Text in Großbuchstaben */
    cursor: pointer; /* Mauszeiger wird zur Hand bei Hover */
    transition: background-color 0.3s ease, color 0.3s ease; /* Weicher Übergang bei Hover */
}

.wpcf7-submit:hover {
    background-color: #ffb9854d; /* Hintergrundfarbe bei Hover */
}

/*=========================== Tickera-Anpassungen =============================*/
.tickera-button {
	border-radius: 30px;
	border: 0px !important;
	background-color: #ffb985;
	color: #141414;
	text-transform: uppercase;
	font-weight: 600 !important;
}
.tickera-button:hover {
	background-color: #ffdcc4;
	color: #141414;
}
.tickera-checkout {
	font-family: "Inter", Arial, sans-serif;
	font-weight: 400;
}
.proceed-to-checkout-container{
	padding-bottom: 40px;
}
/* Links in Tabelle unterstreichen */
.tc_in_cart a{
	text-decoration: underline;
}

/*=========================== Warenkorb-Icon hinzufügen ===========================*/
.menu-item a[href*="/warenkorb/"]:before {
    content: "\f07a"; /* Icon code for shopping cart */
    font-family: "FontAwesome";
    padding-right: 8px;
}

/* Den Text des Warenkorb-Links komplett ausblenden */
.menu-item a[href*="/warenkorb/"] {
    font-size: 0 !important;  /* Textgröße auf 0 setzen, um Text unsichtbar zu machen */
}
/* Das Icon bleibt unverändert sichtbar */
.menu-item a[href*="/warenkorb/"]:before {
    font-size: 20px; /* Setze die gewünschte Icon-Größe */
}