/**/
.banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 3em;
  padding-top: 10px;
  padding-bottom: 10px;
}


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

.path-frontpageh1 {  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;}
.path-frontpageh2 {  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;}
.path-frontpageh3 {  font-size: calc(var(--heading-frontpage-3-size-value) * 1rem) !important; font-weight: bold !important;}
.path-frontpageh4 {  font-size: calc(var(--heading-frontpage-4-size-value) * 1rem) !important; font-weight: 300 !important;}
.path-frontpagep {  font-size: calc(var(--heading-frontpage-p-size-value) * 1rem) !important; font-weight: 300 !important;}
.path-frontpagestrong {  font-weight: bold;}



/*
* Zitate
*/

.path-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;
  }

.path-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;
   }

.path-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(.path-frontpage) .citation {

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

body:not(.path-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(.path-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;}

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

.path-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;
  }

.path-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;
  }

.path-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 in Layout Builder */
.layout {
  display: flex;
  flex-wrap: wrap;
}

/* 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 */
.layout > .layout__region {
  display: flex;
  flex-direction: column;
}


/* Inhalt der Reihe1 angleichen */
.grundausbildung-image {
  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-reihe1 {
  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 Reihe2 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; 
  text-align: left;
}

/* Flex-Inhalt in Blöcken (Layout Builder) */
.grauer-background .block .content,
.grauer-background .content {
  color: white !important;
  display: flex;
  justify-content: center;  /* Zentriert den Button horizontal */
  align-items: center;      /* Vertikal zentrieren, falls gewünscht */
  flex-direction: column;   /* 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 */
}

/* WICHTIG: 'div' hinzugefügt, damit Layout Builder Standard-Texte gefärbt werden */
.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,
.grauer-background div {  color: var(--kk-grau-background-font-color) !important; }

/*
*  beige Container
*/

.beige-background {
  background-color: var(--kk-dunkelbeige)  !important; 
  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; 
}

/* WICHTIG: 'div' hinzugefügt */
.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 div,
.beige-background strong {   color: var(--kk-beige-background-font-color) !important; }

.beige-background .block .content,
.beige-background .content {
  color: white !important  !important; 
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: left;
}

.beige-background .button-medium {
  display: inline-block;
  padding: 10px 20px;
  margin-top: 20px;
}



/*
* Orange Container
*/ 

/* 
* Icons center vertical 
* nur wenn Klassen  .orange-background und .icons vorhanden sind
*/
/*
* Orange Container - Absolute Priorität
*/ 

.orange-background.icons .layout,
.orange-background.icons .layout__region {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* 1. Hintergrund erzwingen */
body .orange-background,
body .orange-background .block,
body .orange-background .content {
  background-color: var(--kk-orange) !important;
  padding: 10px 30px;
}

/* 2. Flex-Layout für den Inhalt */
body .orange-background .block .content,
body .orange-background .content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: left;
}

/* 3. Textfarben gnadenlos auf Weiß (bzw. Variable) zwingen */
body .orange-background,
body .orange-background h1,
body .orange-background h2,
body .orange-background h3,
body .orange-background h4,
body .orange-background h5,
body .orange-background h6,
body .orange-background p,
body .orange-background a,
body .orange-background span,
body .orange-background li,
body .orange-background div,
body .orange-background strong,
body .orange-background .field {
  color: var(--kk-orange-background-font-color) !important; 
}

/* 4. Button Styling im orangen Bereich */
body .orange-background .button-medium {
  display: inline-block;
  padding: 10px 20px;
  margin-top: 20px;
  color: #000 !important; /* Beispiel: Button Text Schwarz */
  background-color: #fff !important; /* Beispiel: Button Hintergrund Weiß */
}
/*
* mainpage
*/
.content-main {   padding: 3px 10px 3px 10px !important; background-color: var(--kk-background) !important; }

/* Rahmen um Inhalt */
.frontpage-full .content-main {
  padding: 0px 0px 0px 0px !important; 
}

.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 allgemein 
*/
.footer {
  font-size: 14px;
  background:  var(--kk-orange);
  line-height: 28px;
}
.footer-first .block-content,
.footer-second .block-content,
.footer-third .block-content,
.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);
}

/* Social Media Footer */
.footer-social-orange .footer {
  background-color: var(--kk-orange) !important;
  color: var(--kk-orange-background-font-color) !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"] {
  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;}

/*
* 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 {
  color: black;
}

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

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

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


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

/*.frontpage-full .content header {
  display:none;
}
*/
#block-gavias-edmix-gaviassliderlayerhomepage .href {
  font-weight: 400;
  font-size: 102px;
}

.comment__content p { 
  margin: 0;
  margin-bottom: 0px;
  text-align: left; 
  white-space: normal; 
  hyphens: auto;
  word-break: normal;
}

@media (max-width: 767px) { 
  .comment-wrapper {
    display: flex;
    flex-direction: column; 
  }
  .comment__content {
    order: 1; 
  }
  .comment__meta {
    order: 0; 
  }
}

/* Image Picker */
.image_picker_selector .thumbnail.selected {
  background: var(--color-picker-background-color) !important;
}

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

.progress-step.is-active .progress-marker::before {
  background-color: var(--progress-marker-progress-step-is-active); 
}

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

/*
* Fix rectes Bild im Blocbuilder zu groß
*/
.third-image-buxfix {
  img-border: 0;
  vertical-align: top;
  max-width: 95%;
  height: auto;
}

/* Firefox Desktop Fix – Newsletter Seite (angepasst an Layout Builder) */
@media (min-width: 992px) {
  .node-newsletter-temp .layout-builder__section--full-width,
  .node-newsletter-temp .layout {
    height: auto !important;
    min-height: 100vh;
  }

  .node-newsletter-temp .layout {
    display: flex;
    flex-wrap: wrap;
  }

  .node-newsletter-temp .layout__region {
    min-width: 0;
  }
}
.frontbild-container {
/* Macht Responsive Bilder im Frontbild-Container 100% breit */
.frontbild-container img {
  width: 100% !important; /* Zwingt das Bild auf volle Breite des Containers */
  height: auto !important; /* Behält die Proportionen bei */
  display: block; /* Verhindert kleine Abstände unter dem Bild */
  max-width: 100%;
}

/*======================================================
    Layoutbuilder spalten usw.

  ======================================================*
.layout--threecol-10-80-10 {
  display: grid;
  grid-template-columns: 10% 80% 10%;
}
*/