@import url('variables.css');
@import url('custom-orange.css');
@import url('product.css');
@import url('registration-simplenews.css');  /*REgisttration form simplenews form*/
@import url('themes/gavias_edmix/css/checkout.css'); /*Checkout panes*/
/*Einzelne Änderung hier zur einfacherem Deployment */



/* Mehrfache Änderungen wie z.B Änderung aller Fonts ind diesen Dateien*

:root {

  --main-orange: #E5A84F ;

  --kk-topbar-color:#000;
  --kk-topbar-a-color:#E5A84F;
  --kk-topbar-a-hover-color:#E5A84F;

  --kk-orange: #D04C00;
  --kk-dunkelbeige: #956F4B;
  --kk-hellbeige: #FAEFE0;
  --kk-hellblau: #E4E2E8;
  --kk-background:#EEE;
  --kk-orange-background-font-color:#FFF;
  --kk-beige-background-font-color:#FFF;
  --kk-grau-background-font-color:#000;
  --haupt-schrift: "open_sans", serif;
  --haupt-schrift-light: "open_sans_light", serif;
  --H1-H2-schrift:  "open_sans_light", serif;
  --kk-links:orange;  
  --topbar-background: #eee;
  --padding: 16px;
  --font-size: 1.2rem;
  --font-size-main-menue: 16px;

  --heading-1-size-value: 3;
  --heading-2-size-value: 2.25;
  --heading-3-size-value: 1.25;
  --heading-4-size-value: 1.1;
  --heading-p-size-value: 0.875;
  --heading-footer-size-value: 0.75;
  --heading-footer-ul-lisize-value: 0.8;   

  --heading-citation-size-value:  1.25;
  --heading-1-citation-size-value:  3;
  --heading-2-citation-size-value:  2.25;
  --heading-3-citation-size-value:  1.25;
  --heading-p-citation-size-value:  0.875;
  --heading-call-to-action-button-size-value:  1.25;


  --heading-frontpage-1-size-value: 4.5;
  --heading-frontpage-2-size-value: 3.8;
  --heading-frontpage-3-size-value: 2.5;
  --heading-frontpage-4-size-value: 2.3;
  --heading-frontpage-p-size-value: 2.2;
  --heading-frontpage-footer-size-value: 0.75;
  --heading-frontpage-footer-ul-lisize-value: 0.8;   

  --heading-frontpage-citation-size-value:  1.25;
  --heading-frontpage-1-citation-size-value:  4.5;
  --heading-frontpage-2-citation-size-value:  3.8;
  --heading-frontpage-3-citation-size-value:  2.5;
  --heading-frontpage-p-citation-size-value:  2.2;
  --heading-frontpage-frontpage-call-to-action-button-size-value:  1.25;


  --color-picker-background-color: #956F4B;
  --webform-legend-background-color: #956F4B;
  --progress-marker-progress-step-is-active: #956F4B;
}

/**/


/*
*  Blöcke
*/
hide-title {  display: none;   }
hide-block-title {display: none;}
/*
*
*/

h1 {  font-size: calc(var(--heading-1-size-value) * 1rem) !important; font-family: var(--H1-H2-schrift) !important; text-transform: uppercase; font-weight: 300 !important;}
h2 {  font-size: calc(var(--heading-2-size-value) * 1rem) !important; font-family: var(--H1-H2-schrift) !important; text-transform: uppercase; font-weight: 300 !important;}
h3 {  font-size: calc(var(--heading-3-size-value) * 1rem) !important; font-weight: bold !important;}
h4 {  font-size: calc(var(--heading-4-size-value) * 1rem) !important; font-weight: 300 !important;}
strong {  font-weight: bold;}

.frontpage h1 {  font-size: calc(var(--heading-frontpage-1-size-value) * 1rem) !important; font-family: var(--H1-H2-schrift) !important; text-transform: uppercase; font-weight: 300 !important;}
.frontpage h2 {  font-size: calc(var(--heading-frontpage-2-size-value) * 1rem) !important; font-family: var(--H1-H2-schrift) !important; text-transform: uppercase; font-weight: 300 !important;}
.frontpage h3 {  font-size: calc(var(--heading-frontpage-3-size-value) * 1rem) !important; font-weight: bold !important;}
.frontpage h4 {  font-size: calc(var(--heading-frontpage-4-size-value) * 1rem) !important; font-weight: 300 !important;}
.frontpage p {  font-size: calc(var(--heading-frontpage-p-size-value) * 1rem) !important; font-weight: 300 !important;}
.frontpage strong {  font-weight: bold;}
/*
* Zitate
*/

.frontpage .citation h1 {
   text-transform: none;
   font-size:   calc(var(--heading-frontpage-1-citation-size-value) * 1rem) !important;
   font-family: var(--haupt-schrift) !important;
   text-align: center;
  }

.frontpage .citation h2 {
   text-transform: none;
   font-size:   calc(var(--heading-frontpage-2-citation-size-value) * 1rem) !important;
   font-family: var(--haupt-schrift-light) !important;
   text-align: center;
   }

.frontpage .citation p {
   text-transform: none;
   font-size:   calc(var(--heading-frontpage-p-citation-size-value) * 1rem) !important;
   font-family: var(--haupt-schrift) !important;
   text-align: center;
  }


body:not(.frontpage) .citation {

  transform: skewX(-10deg);
  font-size: calc(var(--heading-citation-size-value) * 1rem) !important;
  font-family: var(--H1-H2-schrift) !important;
}

body:not(.frontpage) .citation h1 {
   text-transform: none;
   transform: skewX(-10deg);
   font-size:   calc(var(--heading-1-citation-size-value) * 1rem) !important;
   font-family: var(--H1-H2-schrift) !important;
  }


body:not(.frontpage) .citation h2 {
   text-transform: none;
   transform: skewX(-10deg);
/*   font-size:   calc(var(--heading-2-citation-size-value) * 1rem) !important;*/
   font-family: var(--H1-H2-schrift) !important;
  }



/* Tablets (max. 1024px) */
@media (max-width: 1024px) { 
  h1 {    font-size: 30px !important; font-family: var(--H1-H2-schrift) !important;}
  h2 {    font-size: 26px !important; font-family: var(--H1-H2-schrift) !important;}
  h3 {    font-size: 20px !important;}
  h4 {  font-size: 18px! important;}
  strong {    font-weight: 600;  }
}
 
/* Smartphones (max. 768px) */
@media (max-width: 768px) {  

  h1 {    font-size: 20px !important; font-family: var(--H1-H2-schrift) !important;}
  h2 {    font-size: 16px  !important; font-family: var(--H1-H2-schrift) !important;}
  h3 {    font-size: 14px !important;}
  h4 {  font-size: 10px !important;}
  p {  font-size: 10px !important;}

.frontpage   h1 {    font-size: 20px !important; font-family: var(--H1-H2-schrift) !important;}
.frontpage   h2 {    font-size: 16px  !important; font-family: var(--H1-H2-schrift) !important;}
.frontpage   h3 {    font-size: 14px !important;}
.frontpage   h4 {  font-size: 12px !important;}
.frontpage   p {  font-size: 16px !important;}
 strong {    font-weight: 500; }
/*
* Zitate
*/

.frontpage .citation h1 {
   transform: none !important;
   text-align: center;
   font-size:   calc(var(--heading-frontpage-1-citation-size-value) * 0.5rem) !important;
   font-family: var(--haupt-schrift) !important;
  }

.frontpage .citation h2 {
   transform: none !important;
   font-size:   calc(var(--heading-frontpage-2-citation-size-value) * 0.5rem) !important;
   font-family: var(--haupt-schrift-light) !important;
  }

.frontpage .citation p {
   transform: none !important;
   font-size:   calc(var(--heading-frontpage-p-citation-size-value) * 1rem) !important;
   font-family: var(--haupt-schrift) !important;
  }





.citation {
  transform: none !important;
  text-align: center;
  font-size: calc(var(--heading-citation-size-value) * 1rem) !important;
  font-family: var(--H1-H2-schrift) !important;
}

.citation h1 {
   transform: none !important;
   text-align: center;
   font-size:   calc(var(--heading-1-citation-size-value) * 1rem) !important;
   font-family: var(--H1-H2-schrift) !important;
  }


.citation h2 {
   transform: none !important;
   text-align: center;
   font-size:   calc(var(--heading-2-citation-size-value) * 1rem) !important;
   font-family: var(--H1-H2-schrift) !important;
  }


/* 
*header
*/
body.path-frontpage header .widget.gsc-heading {
  outline: 3px solid red;
  background-color: rgba(255, 0, 0, 0.05);
}

body.path-frontpage header .widget.gsc-heading.style-default.align-left {
  display: none !important;
}


/*body.path-frontpage .gsc-heading { /*Header auf Frontpage ausblenden*
  display: none;
}
*/
 #menu-bar {
    width: 48px;
    height: 36px;
    padding: 10px;
  }

  #menu-bar span {
    height: 4px;
    margin: 6px 0;
    background-color: #000;
    border-radius: 2px;
  }

}
/* end @media 767 */
 
.image-bekannt-von {
padding: 0px 0px 0px 0px;
margin: 0px 40px 0px 40px;

}



/*
 *  Topbar 
 */
.topbar {
  padding:  0px;
  margin-top: 15px; 
  border-bottom: 0px solid rgba(0, 0, 0, 0.1) !important;
}

.gva_topbar_menu li {background-color:var(--kk-background) !important; }


.quick-cart {
  padding-bottom: 20px;
}



/* Entferne oder verringere Padding/Margin in der Zeile und den Spalten */
.header-v1 .row {
  margin: 0;
  padding-bottom: 5px;
}

.header-v1 .col-md-3, 
.header-v1 .col-md-9 {
  padding: 0;
  padding-bottom: 5px;
}

/* Optional: Zeilenhöhe für das Menü */
.gva_menu {
  line-height: 1.2;  /* Standardhöhe der Textzeile anpassen */
}

/*
* graue Container
*/

/* Container-Row für Flex-Gleichhöhe */
.bb-container .row-wrapper {
  display: flex;
  flex-wrap: wrap;
}


 /* Alle column-content innerhalb des Containers umrahmen */

 /* Umrahmung und Hintergrund der Container mit der Klasse .graue-box-weisser-rahmen */
 .graue-box-weisser-rahmen {
   border: 2px solid white;  /* Weißer Rahmen */
   padding: 20px;  /* Optional: Abstand innerhalb des Rahmens */
   box-sizing: border-box;  /* Verhindert, dass der Rahmen die Gesamtgröße beeinflusst */
   margin-bottom: 20px;  /* Abstand zwischen den einzelnen Blöcken */
 }




/* Die Spalten sollen gleich hoch sein */
.bb-container .row-wrapper > .gsc-column {
  display: flex;
  flex-direction: column;
}

/* Inhalt der Reihe1 angleichen */
.grundausbildung-reihe1 {
 /* border: 2px solid var(--kk-grau-background-font-color) !important;*/
  padding: 1em; /* optional: Innenabstand */
  flex: 1 1 auto;
  min-height: calc(7 * 2.5em); /* = 12em */
  display: flex;
  flex-direction: column;
  justify-content: center; /* optional: vertikal mittig */
  box-sizing: border-box;
  line-height: 2.4em;

}


/* Inhalt der Reihe1 angleichen */
.grundausbildung-reihe2 {
   border: 4px solid var(--kk-grau-background-font-color);
  flex: 1 1 auto;
   min-height: calc(7 * 2em); /* = 12em */
   display: flex;
   flex-direction: column;
   justify-content: center; /* optional: vertikal mittig */
   box-sizing: border-box;
   line-height: 1.4em;

 }


/* schwarzer Rahmen für Call-to-Action-Buttons */

 .grauer-background .call-to-action-button {
  border: 2px solid #000 !important;
  color: #000; 
  background-color: transparent; 
   display: inline-block;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   text-transform: uppercase; 
   font-weight: bold !important;

 }



.grauer-background {
  background-color: var(--kk-background) !important;
  color: var(--kk-grau-background-font-color) !important;
  padding:10px 30px !important; 
  background-color: var(--kk-background) !important;
  text-align: left;

}


.grauer-background .column-content-inner {
  color: white !important;
  display: flex;
  justify-content: center;  /* Zentriert den Button horizontal */
  align-items: center;      /* Optional: Vertikal zentrieren, falls gewünscht */
  flex-direction: column;   /* Wichtig: stellt sicher, dass der Text oben bleibt und der Button darunter */
  text-align: left;       /* Text innerhalb des Containers zentrieren */
}
 .grauer-background .button-medium {
  display: inline-block;    /* Sicherstellen, dass der Button als Inline-Block behandelt wird */
  padding: 10px 20px;       /* Optional: fügt dem Button etwas Innenabstand hinzu */
  margin-top: 20px;         /* Optional: Abstand zwischen dem Text und dem Button */
}



.grauer-background h1,
.grauer-background h2,
.grauer-background h3,
.grauer-background h4,
.grauer-background h5,
.grauer-background h6,
.grauer-background p,
.grauer-background strong,
.grauer-background a,
.grauer-background span,
.grauer-background li {  color: var(--kk-grau-background-font-color) !important; }


/*
*   image overlay
*/

/* Gemeinsamer Wrapper für beide Spalten */
/* Nur innerhalb von .bb-container */

/* Basis-Container für jede Zeile */
.bb-container .bb-inner {
 padding: 0px;
 margin: 0px;
}
/*
*
*/


/* Alle column-content innerhalb des Containers umrahmen */

/* Umrahmung und Hintergrund der Container mit der Klasse .graue-box-weisser-rahmen */
.graue-box-weisser-rahmen {
  border: 2px solid white;  /* Weißer Rahmen */
  padding: 20px;  /* Optional: Abstand innerhalb des Rahmens */
  box-sizing: border-box;  /* Verhindert, dass der Rahmen die Gesamtgröße beeinflusst */
  margin-bottom: 20px;  /* Abstand zwischen den einzelnen Blöcken */
}




/*
*  beige Container
*/

.beige-background {
  background-color: var(--kk-dunkelbeige);
  color: var(--kk-beige-background-font-color) !important;
  padding:10px 30px;
}

.beige-background .call-to-action-button {
  color: var(--kk-beige-background-font-color) !important; 
  border-color: aliceblue !important;
  text-transform: uppercase; 
  font-weight: bold !important;

 }

.beige-background .call-to-action {
   color: var(--kk-beige-background-font-color) !important; 
 }


.beige-background h1,
 .beige-background h2,
 .beige-background h3,
 .beige-background h4,
 .beige-background h5,
 .beige-background h6,
 .beige-background p,
 .beige-background a,
 .beige-background span,
 .beige-background li,
 .beige-background strong {   color: var(--kk-beige-background-font-color) !important; }


.beige-background .column-content-inner {
  color: white !important;
display: flex;
  justify-content: center;  /* Zentriert den Button horizontal */
  align-items: center;      /* Optional: Vertikal zentrieren, falls gewünscht */
  flex-direction: column;   /* Wichtig: stellt sicher, dass der Text oben bleibt und der Button darunter */
  text-align: left;       /* Text innerhalb des Containers zentrieren */
}

.beige-background .button-medium {
  display: inline-block;    /* Sicherstellen, dass der Button als Inline-Block behandelt wird */
  padding: 10px 20px;       /* Optional: fügt dem Button etwas Innenabstand hinzu */
  margin-top: 20px;         /* Optional: Abstand zwischen dem Text und dem Button */
}



/*
* Orange Container
*/ 

/* 
* Icons center vertical 
* nur wenn Klassen  .orange-background und .icons vorhanden sind
*/

.orange-background.icons .row-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.orange-background {
  color: var(--kk-orange-background-font-color) !important; 
  background-color: var(--kk-orange);
  padding:10px 30px;
}

.orange-background h1,
.orange-background h2,
.orange-background h3,
.orange-background h4,
.orange-background h5,
.orange-background h6,
.orange-background p,
.orange-background a,
.orange-background span,
.orange-background li,
.orange-background strong {   color: var(--kk-orange-background-font-color); }


/*
* mainpage
*/
/*
war fehler testen warum 

.content-main .bb-inner {
  padding-top: 0px;
  padding-bottom: 50px;

}
*/

.content-main {   padding: 3px 10px 3px 10px !important; background-color: var(--kk-background) !important; }

/* RAhmen um Inhalt
*/

.frontpage-full .content-main {
  padding: 0px 0px 30px 1px !important; 
}

/*
*
.beige-background {
  background-color: var(--kk-dunkelbeige);
  color: var(--kk-beige-background-font-color) !important;
  padding:10px 30px;
}
*/
.main .main-page {
  background-color: var(--kk-hellbeige);
}  
body.front .site-branding-logo {
  display: none;
}

/*
* Buttons zentrieren
*/
.call-to-action-button {
  display: inline-block;
  margin: 0 auto;
 font-size: calc(var(--heading-call-to-action-button-size-value) * 1rem);
 margin-bottom: 10px;
 text-transform: uppercase; 
 font-weight: bold !important;

}
.call-to-action {
  text-align: center;
}

/*
*  slider text
*/

slider-hp-text-headline {
color: white !important;
 font-weight: bold !important;
 font-size : calc(var(--heading-1-size-value) * 1rem) !important;
}

.slider-hp-text {
color: white !important;
font-weight: bold !important;
 font-size : calc(var(--heading-2-size-value) * 1rem) !important;

}

/*
* Footer gallgemein 
*/

.footer {
  font-size: 14px;
  background:  var(--kk-orange);
  line-height: 28px;
}
.footer-first .block-content {
  background-color: var(--kk-orange) !important;
  color: var(--kk-orange-background-font-color) !important;
  padding: 20px;
}
.footer-second .block-content {
  background-color: var(--kk-orange) !important;
  color: var(--kk-orange-background-font-color) !important;
  padding: 20px;
}
.footer-third .block-content {
  background-color: var(--kk-orange) !important;
  color: var(--kk-orange-background-font-color) !important;
  padding: 20px;
}
.footer-four .block-content {
  background-color: var(--kk-orange) !important;
  color: var(--kk-orange-background-font-color) !important;
  padding: 20px;
} 
/*
* footer social orange
*/

.contact-info i {  /*Icons im Footer */
  font-size: 20px;
  color: var(--kk-orange-background-font-color);
}

/*.footer-social .contact-info .block-linkfooter{
  background-color: var(--kk-orange);
}
*/

/* Social Media Footer */
.footer-social-orange .footer {
  background-color: var(--kk-orange) !important;
  color: var(--kk-orange-background-font-color) !important;
 background-color: #D04C00 !important;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 0;
}

.footer-social-orange h3,
.footer-social-orange h5 {
  color: var(--kk-orange-background-font-color);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.footer-social-orange h3 {
  font-size: calc(var(--heading-footer-size-value) * 2rem);
  width: 100%;
}

.footer-social-orange h5 {
  font-size: calc(var(--heading-footer-size-value) * 1rem);
  width: 100%;
}

.footer-social-orange ul li {
  padding: 5px;
}

.footer-social-orange ul li a {
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-social-orange ul li a i {
  font-size: calc(var(--heading-footer-ul-lisize-value) * 1rem);
}

.footer-social-orange ul li a:hover {
  color: #000;
}

.footer-social-orange ul li a:hover i {
  color: #fff;
}

/* Icon-Farben im Hover */
.footer-social-orange ul li a:hover i.fa-facebook-square { color: #3b5998; }
.footer-social-orange ul li a:hover i.fa-twitter-square  { color: #4099ff; }
.footer-social-orange ul li a:hover i.fa-skype           { color: #12a5f4; }
.footer-social-orange ul li a:hover i.fa-dribbble        { color: #ea4c89; }
.footer-social-orange ul li a:hover i.fa-linkedin-square { color: #0e76a8; }
.footer-social-orange ul li a:hover i.fa-apple           { color: #f2f2f2; }
.footer-social-orange ul li a:hover i.fa-pinterest       { color: #c92228; }
.footer-social-orange ul li a:hover i.fa-google-plus-square { color: #d34836; }
.footer-social-orange ul li a:hover i.fa-youtube-square  { color: #c4302b; }
.footer-social-orange ul li a:hover i.fa-vimeo-square    { color: #4ebbff; }
.footer-social-orange ul li a:hover i.fa-tumblr-square   { color: #35465c; }
.footer-social-orange ul li a:hover i.fa-xing-square     { color: #126567; }
.footer-social-orange ul li a:hover i.fa-instagram       { color: #e8e2d9; }


/*
* footer social
*/
.social-media {
 background-color: var(--kk-orange);
}
#block-sociallinksfooter {
  background-color:  var(--kk-orange);
}
.block.block-block-content7e26e9e5-a2f4-4e12-9643-7c8954f954ef {
  background-color:  var(--kk-orange) !important;
}

/*
*
*/
[data-history-node-id="199"] {
/*  background-color: #f0fff0;*/
  border: 1px solid #ccc;
  padding: 0px;
}
header.header-v1 .header-main { background-color: var(--kk-background);}
.main-content { background-color: var(--kk-background);}
.content { background-color: var(--kk-background);}
.content-full { background-color: var(--kk-background);}
.main-content-inner { background-color: var(--kk-background);}
#header .header-main {background-color: var(--kk-background);}


.widget.gsc-heading.style-default.align-left .heading-line {
  float: left;
  display: none !important;
}

header .heading-line [data-history-node-id="199"] {
    display: none !important;
 background-color: #f0f0f0;
 

}




header .site-branding-logo{padding: 8px 0 0;}

@media (min-width: 992px) {
    .navigation .gva_menu > li > a {
        padding: 20px 10px;
        font-size: var(--font-size-main-menue);
       
  }
}

.gva-navigation {color:white;}


/*
*
* Content main
*
*/

/*.content-main {background-color: honeydew;}
.content-main {background-color: ivory;}
.content-main {background-color: linen;}
.content-main {background-color: mintcream;}
/*
.content-main {background-color: snow;}
/*.content-main {background-color: antiquewhite;}
/*
ivory linen mintcream snow antiquewhite honeydew
*/
/*
*
* Message Form
*
*/
.contact-message-form .form-item input[type='text'], .contact-message-form .form-item input[type='email'], .contact-message-form .form-item textarea {
  width: 100%;
  border: none;
  background: #C6C6C6;
  position: relative;
  -webkit-transition: all 0.35s;
  -o-transition: all 0.35s;
  transition: all 0.35s;
  -moz-transition: all 0.35s;
  -ms-transition: all 0.35s;
  height: 45px;
  -webkit-box-shadow: none !important;
  -ms-box-shadow: none !important;
  -o-box-shadow: none !important;
  box-shadow: none !important;
  padding-left: 15px;
}

.js-form-item-spammaster-page {
border: none;
display:none;
}


/* Textfarben */


 strong {
/*  font-weight: bold;*/
  color: black;
}


/*  Fonts */ 
body {
  font-family: var(--haupt-schrift);
  font-size: 16px;
  line-height: 1.8;
  color: #636363;
  background-color: #fff;
  font-weight: 400;
}

/* achtung überschreib alles vorherige 
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--haupt-schrift);
  font-weight: 700;
  line-height: 1.1;
  color: #252525;
}
*/
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}


/* Links sichtber anzeigen */

a {
  -webkit-transition: all 0.35s;
  -o-transition: all 0.35s;
  transition: all 0.35s;
  -moz-transition: all 0.35s;
  -ms-transition: all 0.35s;
  outline: none !important;
  color: var(--main-orange);
   

}

/*   
*    Webforms
*/



/* .content-main{padding: 30px 15px;}*/

.webform-submission-form fieldset .fieldset-wrapper{padding: 20px 20px 20px; border: 2px solid #283646!important; border-top: none!important;}
.webform-submission-form fieldset legend{background: var(--webform-legend-background-color); color: #fff; padding: 0 15px; margin: 0; }
.webform-submission-form fieldset.fieldgroup .fieldset-wrapper{padding: 10px; border: none!important;}
/*
.webform-submission-form fieldset .fieldset-wrapper{padding: 20px 20px 20px; border: 2px solid #283646!important; border-top: none!important;}
.webform-submission-form fieldset legend{background: #283646; color: #fff; padding: 0 15px; margin: 0; }
.webform-submission-form fieldset.fieldgroup .fieldset-wrapper{padding: 10px; border: none!important;}
*/


/*
*  Comment word Wrap
*/

comment__content * { margin: 0;
 margin-bottom: 0px;
 text-align: left; /* Aligns the text to the left */
 white-space: normal;
color: red;
 hyphens: auto;
 word-break: normal !important;
} 


/*
* Comment disable TExt hints
*/
.comment-form #edit-comment-body-0-format-help,
.comment-form #edit-comment-body-0-format-guidelines {
  display: none;
}
/*
.slider-front a {
  font-size: 120px; 
  color: white;
}
*/

.frontpage-full .content header {
  display:none;
}
.frontpage-full .content-main {
  padding: 0px 15px 30px 15px;
}
#block-gavias-edmix-gaviassliderlayerhomepage .href {
  font-weight: 400;
  font-size: 102px;
}

.comment__content p { margin: 0;
  margin-bottom: 0px;
  text-align: left; /* Richtet den Text links aus */
  white-space: normal; 
  hyphens: auto;
  word-break: normal;
}

@media (max-width: 767px) { /* Media query for smartphones (up to 767px width) */
  .comment-wrapper {
    display: flex;
    flex-direction: column; /* Arrange elements vertically */
  }

  .comment__content {
    order: 1; /* Make content appear after the meta information */
  }

  .comment__meta {
    order: 0; /* Make meta information appear first */
  }
}


/*
* Image Picker 
.ul.thumbnails.image_picker_selector li .thumbnail.selected {
  background: #D04C00 !important;
}

*/

.image_picker_selector .thumbnail.selected {
  background: var(--color-picker-background-color) !important;

}

/*
*     Progress marker
*/ 

/* Allgemeines Styling für alle Marker */
.progress-marker::before {
  content: attr(data-text);
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  text-align: center;
  border-radius: 50%;
  font-weight: bold;
  color: white;
  background-color: #333; /* Standardfarbe (z. B. für "is-complete") */
}

/* Spezifisches Styling für den aktiven Schritt */
.progress-step.is-active .progress-marker::before {
  background-color: var(--progress-marker-progress-step-is-active); /*  für aktiven Schritt */
}


/*
*  Seite Kundenstimmen 
*/ 

.kundenstimmen  .comment__permalink {
  display: none;
}


/*
* extra classnames Homepage
*/

.margins-homepage {margin-top: 50px;}
.margin-left-homepage {margin-left: 20px;}



.spammaster-sig {
  position: relative !important;
  width: 100% !important;
  float: left !important;
  margin: 5px 0 5px 0 !important;
  display: contents !important;
  clear: both !important;
  display: none !important;
}




body.path-frontpage {
  background: red !important;
}
/****/
header {
  z-index: 99;
}

.single-course .course-meta .meta-item:nth-child(3n+1) {
  clear: both;
}
@media (max-width: 767px) {
  .single-course .course-meta .meta-item {
    width: 50%;
  }
  .single-course .course-meta .meta-item:nth-child(3n+1) {
    clear: none;
  }
  .single-course .course-meta .meta-item:nth-child(2n+1) {
    clear: both;
  }
}
@media (max-width: 400px) {
  .single-course .course-meta .meta-item {
    width: 100%;
  }
}

.icon-level {
  background: url("../images/level-up.png") no-repeat scroll center center transparent;
}

.icon-price {
  background: url("../images/price-tag.png") no-repeat scroll center center transparent;
}

.icon-students {
  background: url("../images/student.png") no-repeat scroll center center transparent;
}

.gbb-row.gsc-equal-height .column-content-inner {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  top: 0;
}

.checkout-pane-payment-information {
  margin-bottom: 20px;
}
.checkout-pane-payment-information .field--name-address {
  width: 100%;
  float: left;
}

.customer-information .field__label {
  font-weight: 600;
  color: #222;
  margin-top: 15px;
}

.order-information {
  margin-bottom: 45px;
}
.order-information .field__label, .order-information .views-field-title {
  font-weight: 600;
  color: #222;
}
.order-information table {
  margin-top: 30px;
}
.order-information table thead th {
  font-weight: 600;
  color: #222;
}

.checkout-pane-payment-information {
  margin-bottom: 20px;
}
.checkout-pane-payment-information .field--name-address {
  width: 100%;
  float: left;
}

.path-user .order-information {
  float: left;
  width: 100%;
}
.path-user .order-information > .field {
  float: left;
  margin-right: 20px;
  width: 30%;
}
@media (max-width: 300px) {
  .path-user .order-information > .field {
    width: 100%;
  }
}
.path-user .order-information > .field .field__label {
  font-weight: 600;
  color: #222;
}
.path-user .order-information > .field.field--name-order-items, .path-user .order-information > .field.field--name-total-price {
  width: 100%;
  margin-top: 20px;
  margin-right: 0;
}

.form-item-payment-information-add-payment-method-billing-information-copy-to-address-book {
  width: 100%;
  float: left;
}

.alert {
  border-radius: 0 !important;
}

.alert.alert-dark {
  background-color: #f5f5f5;
  border: 1px solid rgba(0, 0, 0, 0.2);
}