/*
 Theme Name:     Carsten Hinz
 Theme URI:      https://carsten-hinz.de
 Description:    Theme of Carsten Hinz
 Author:         MZDN
 Author URI:     https://ad-emotion.marketing
 Template:       Divi
 Version:        1.0.0
*/
:root {
    /* Hauptfarbe für Balken, Lautstärke & Auswahl */
    --plyr-color-main: #C56E5E;
    
    /* Die Icons (Play-Pfeil etc.) */
    --plyr-video-control-color: #ffffff;
    
    /* Hintergrund des Einstellungs-Menüs */
    --plyr-menu-background: rgba(20, 20, 20, 0.95);
    --plyr-menu-color: #ffffff;
}
body{
	hyphens: auto;
}
#hero-header .et_pb_slider .et-pb-slider-arrows{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  position: absolute;
  background: linear-gradient(120deg, #f78316 0%, #ea571d 100%);
  padding-left: 0;
  left: 0;
  bottom: 0;
  left: unset;
  z-index: 50;
  width: 100%;
  max-width: 90px;
  height: 100%;
  text-align: center;
box-shadow: -12px 0 20px 15px #7e483f69;
}
#hero-header .et_pb_slider .et-pb-slider-arrows a{
  position: static;
  opacity: 1;
  display: inline-block;
  width: 50%;
  padding: 18px 0;
}
#hero-header .et_pb_slider .et-pb-slider-arrows a:before{
  display: block;
  font-size: 20px;
}
#hero-header .et-pb-slider-arrows a:hover{
  background-color: #f78316;
}
#hero-header .et-pb-slider-arrows:after{
  content: 'Herzlich Willkommen';
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  overflow: hidden;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
#hero-header .et-pb-controllers{
  position: absolute;
  bottom: 100px;
  left: 0;
  left: unset;
  width: 90px;
  text-align: center;
  z-index: 81;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  font-size: 15px;
}
#hero-header .et-pb-controllers a {
  counter-increment: slides;
  position: absolute;
  visibility: hidden;
}
#hero-header .et-pb-controllers .et-pb-active-control{
  visibility: visible;
  text-indent: 0;
  background-color: transparent;
  color: #fff;
}
#hero-header .et-pb-controllers:after {
  content: '/ ' counter(slides);
  position: relative;
  margin-left: 13px;
	font-weight: 900;
  color: #fff;
}
#hero-header .et_pb_slide_description{
position: relative;
  padding: 8%;
  background: linear-gradient(120deg, #f78316 0%, #ea571d 100%);
  border-radius: 10px;
}
#hero-header .et_pb_slide_description:before{
	content: "";
    background: linear-gradient(120deg, #f78316 0%, #ea571d 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    margin-top: -4%;
    margin-left: -12%;
    border-radius: 10px;
    z-index: -1;
	opacity: .3;
}
#hero-header .et_pb_container.clearfix{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#hero-header .et_pb_slides .et_pb_slider_container_inner{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-bottom: 2.5em;
}

#fullwidth-code-partner-logos .row-partner-logos{
	background: #ffffff6e;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
	padding: 20px !important;
    border-radius: 15px;
    backdrop-filter: blur(4px);
	border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #ffffff52;
    border-right: 1px solid #ffffff52;
    animation: borderGlowWhite 3s ease-in-out infinite alternate,
		moveRow 5s linear infinite alternate;
}
.heroheader-logos{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-right: 1em;
}
.heroheader-logos img:nth-child(2){
	margin: 0px 3em;
}
.heroheader-logos img{
	height: 45px;
}

/* Der Container: Modern und abgerundet */
.plyr {
    border-radius: 12px;
    overflow: hidden;  
    box-shadow: 0 15px 30px rgba(234, 81, 120, 0.15); 
}

/* Der Play-Button*/
.plyr--video .plyr__control--overlaid {
    background: #C56E5E; 
    opacity: 0.9;        
    border: none;
}

/* Lautstärke & kleine Buttons beim Hover einfärben */
.plyr--full-ui input[type=range] {
    color: #C56E5E;
}

.plyr__control:hover {
    background: #ea5178;
}
.gradient-headline .et_pb_text_inner,
.gradient-headline .et_pb_module_heading{
	/*color: #ea571d;
  	background: linear-gradient(102deg, #ea571d 0%, #f78316 100%);
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
  	background-clip: text;
	*/
	color: #ea571d; /* Fallbackfarbe */
	background: linear-gradient(102deg, #ea571d 0%, #f78316 50%, #ea571d 100%);
	background-size: 200% 200%;
	background-position: 0% 50%;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
  	background-clip: text;
	animation: gradientShift 4s ease-in-out infinite alternate;
}
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes borderGlowWhite {
    0% {
        border-top-color: #fff;
        border-bottom-color: #fff;
        border-left-color: #ffffff52;
        border-right-color: #ffffff52;
        box-shadow: 0 0 5px #ffffff33, 0 0 10px #ffffff1f;
    }
    50% {
        border-top-color: #ffffffd9;
        border-bottom-color: #ffffffd9;
        border-left-color: #ffffff7f;
        border-right-color: #ffffff7f;
        box-shadow: 0 0 10px #ffffff33, 0 0 15px #ffffff1f;
    }
    100% {
        border-top-color: #fff;
        border-bottom-color: #fff;
        border-left-color: #ffffff52;
        border-right-color: #ffffff52;
        box-shadow: 0 0 5px #ffffff33, 0 0 10px #ffffff1f;
    }
}
@keyframes moveRow {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(30px);
    }
    100% {
        transform: translateX(0);
    }
}

/* =========================================
   CF7 Floating Label & Modern Design
   Color: #ea571d
   ========================================= */

/* --- 1. Container & Reset --- */
.custom-cf7 {
  max-width: 800px;
  margin: 0 auto;
  font-family: inherit;
  box-sizing: border-box;
}

.custom-cf7 * {
  box-sizing: border-box;
}

.custom-cf7 p {
  margin: 0;
  padding: 0;
}

/* --- 2. Grid Layout (Spalten) --- */
.cf7-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 25px;
}

.cf7-col {
  position: relative;
}

.full-width {
  flex: 0 0 100%;
}

.half-width {
  flex: 1;
  min-width: 250px;
}

/* --- 3. Field Wrapper (Der Container um jedes Input) --- */
.field-wrap {
  position: relative;
  margin-top: 5px;
}

/* --- 4. Input & Select Styling --- */
.custom-cf7 input[type="text"],
.custom-cf7 input[type="email"],
.custom-cf7 input[type="tel"],
.custom-cf7 textarea,
.custom-cf7 select {
  width: 100%;
  height: 52px; /* Einheitliche Höhe */
  padding: 15px 12px 0 12px; /* Oben Platz lassen für Text */
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: transparent; /* Wichtig! */
  font-size: 16px;
  color: #333;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
  appearance: none; /* Entfernt Standard-Select-Pfeil */
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Textarea Höhe */
.custom-cf7 textarea {
  height: 120px;
  padding-top: 15px;
  resize: vertical;
}

/* Fokus-Effekt für alle Felder */
.custom-cf7 input:focus,
.custom-cf7 select:focus,
.custom-cf7 textarea:focus,
.field-wrap.active input,
.field-wrap.active select {
  border-color: #ea571d;
  box-shadow: 0 4px 10px rgba(234, 87, 29, 0.1);
	background-color: #fff !important;
}

/* --- 5. Das Floating Label (Die Magie) --- */
.field-wrap label {
  position: absolute;
  left: 12px;
  top: 16px; /* Startposition (Mittig im Feld) */
  color: #888;
  font-size: 16px;
  font-weight: normal;
  pointer-events: none; /* Klicks gehen durch das Label durch */
  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: transparent;
  z-index: 1;
}

/* --- 6. Aktiver Zustand (Label wandert hoch) --- */
.field-wrap.active label {
  top: -9px; /* Schiebt Label genau auf den Rahmen */
  left: 10px;
  font-size: 12px;
  color: #ea571d;
  font-weight: 600;
  
  /* DER FIX: Weißer Hintergrund verdeckt den Rahmen */
  background-color: #fff; 
  padding: 0 5px; /* Etwas Luft links/rechts */
  z-index: 5;
}

/* --- 7. Dropdown Pfeil (Custom Arrow) --- */
/* Wir bauen einen Pfeil mit CSS nach, da wir den Standard ausgeblendet haben */
.select-wrap::after {
  content: '';
  position: absolute;
  right: 15px;
  top: 22px;
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #888; /* Pfeilfarbe inaktiv */
  pointer-events: none;
  transition: transform 0.3s;
}

/* Pfeil drehen/färben bei Fokus */
.field-wrap.active.select-wrap::after {
  border-top-color: #ea571d;
  transform: rotate(180deg);
}

/* --- 8. Statische Labels (Radio/Checkbox Titel) --- */
.static-label {
  display: block;
  font-size: 14px;
  color: #333;
  font-weight: 600;
  margin-bottom: 10px;
}

/* --- 9. Checkboxen Styling --- */
.checkbox-group span.wpcf7-list-item {
  margin: 0 15px 10px 0;
  display: inline-block;
}

.checkbox-group input[type="checkbox"] {
  accent-color: #ea571d;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  cursor: pointer;
  vertical-align: middle;
}

/* --- 10. DSGVO --- */
.dsgvo-wrap {
  font-size: 13px;
  line-height: 1.5;
  color: #666;
  margin-top: 10px;
}
.dsgvo-wrap input[type="checkbox"] {
  accent-color: #ea571d;
  margin-right: 8px;
  transform: translateY(2px);
}

/* --- 11. Submit Button --- */
.custom-cf7 input[type="submit"] {
  background-color: #ea571d;
  color: #fff;
  border: none;
  padding: 15px 40px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
  -webkit-appearance: none; /* iOS Reset */
}

.custom-cf7 input[type="submit"]:hover {
  background-color: #d14614;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(234, 87, 29, 0.3);
}

.select-wrap label {
  top: -9px !important;
  left: 10px !important;
  font-size: 12px !important;
  background-color: #fff !important;
  padding: 0 5px !important;
  z-index: 5 !important;
  /* Farbe ist standardmäßig grau (#888) */
}

/* Wenn man das Dropdown anklickt, wird das Label orange (durch das JS) */
.field-wrap.active.select-wrap label {
  color: #ea571d !important;
}



/* --- 12. Mobile Responsiveness --- */
@media (max-width: 768px) {
  .half-width {
    flex: 0 0 100%; /* Alles untereinander */
  }
  
  .cf7-row {
    gap: 15px;
    margin-bottom: 20px;
  }
  
  .custom-cf7 input[type="submit"] {
    width: 100%; /* Button volle Breite */
  }
}
@media screen and (min-width: 981px) {
	#hero-header .et_pb_container.clearfix{	
		width: 40%;
		margin-left: 15%;
	}
}
@media only screen and (max-width: 980px){
	.heroheader-logos{
		justify-content: center;
	}
 #hero-header .et-pb-slider-arrows:after{
   content: none;
 }
 #hero-header .et-pb-controllers{
   display: none;
 }
 #hero-header .et_pb_slider .et-pb-slider-arrows{
   height: 0;
 }
 #hero-header .et-pb-slider-arrows a{
   background-color: #ea571d;
 }
}
@media only screen and (max-width:980px) and (orientation:landscape) {
    #hero-header .et_pb_module.et_pb_slider,
	#hero-header .et_pb_module.et_pb_slider .et_pb_slide{
      min-height: 350px !important;
      max-height: 350px !important;
	}
}
@media only screen and (max-width: 980px){
	
	#hero-header .et_pb_slider .et-pb-slider-arrows{
		left: 0px;
		right: 0px;
		margin: auto;
	}
	
	#fullwidth-code-partner-logos {
		position: relative !important;
	}
	#fullwidth-code-partner-logos .row-partner-logos{
		margin-bottom: 0px !important;
	}
}
@media only screen and (max-width: 878px){
  /*
	#hero-header .et_pb_slider .et_pb_slide .et_pb_slide_description .et_pb_slide_title{
    font-size: 60px !important;
  }
  #hero-header .et_pb_slider.et_pb_module .et_pb_slide .et_pb_slide_description .et_pb_slide_content{
    font-size: 34px !important;
  }
	*/
  body #page-container #hero-header.et_pb_section .et_pb_slider .et_pb_slide .et_pb_more_button.et_pb_button{
    margin-top: 25px!important;
  }
}
@media only screen and (max-width: 800px){
 /*
  #hero-header .et_pb_slider .et_pb_slide .et_pb_slide_description .et_pb_slide_title{
    font-size: 45px !important;
  }
  #hero-header .et_pb_slider.et_pb_module .et_pb_slide .et_pb_slide_description .et_pb_slide_content{
    font-size: 30px !important;
  }
  body #page-container #hero-header.et_pb_section .et_pb_slider .et_pb_slide .et_pb_more_button.et_pb_button{
    font-size: 15px;
  }
	*/
  #hero-header .et_pb_slides .et_pb_slide_1 .et_pb_slider_container_inner{
    display: table-cell !important;
  }
  #hero-header  .et_pb_slides .et_pb_slide_1 .et_pb_container{
    display: table !important;
    table-layout: fixed !important;
  }
}
@media only screen and (max-width: 678px){
	
  /* #hero-header .et_pb_slider .et-pb-slider-arrows{
    max-width: 100%;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    background: transparent;
   top: 50%;
  } */
  #hero-header .et_pb_slider .et-pb-slider-arrows a{
    width: 35px;
    padding: 10px 0;
  }
  #fullwidth-code-partner-logos .heroheader-logos{
	flex-wrap: wrap;
  }
}

@media only screen and (max-width: 480px){
	/*
  #hero-header .et_pb_slider .et_pb_slide .et_pb_slide_description .et_pb_slide_title{
    font-size: 35px !important;
  }
  #hero-header .et_pb_slider.et_pb_module .et_pb_slide .et_pb_slide_description .et_pb_slide_content{
    font-size: 26px !important;
  }
	*/
}

@media only screen and (max-width: 375px){
/*
  #hero-header .et_pb_slider .et_pb_slide .et_pb_slide_description .et_pb_slide_title{
    font-size: 30px !important;
  }
  #hero-header .et_pb_slider.et_pb_module .et_pb_slide .et_pb_slide_description .et_pb_slide_content{
    font-size: 20px !important;
  }
	*/
}