/* **************************************************************************************** */
/* ********************************************************************* Cookiebar ******** */
/* **************************************************************************************** */

  #ckBar {
    background-color : rgba(231, 227, 227, 1);
  }


  #ckBar {
    color : rgba(105, 106, 107, 1);
  }



/* **************************************************************************************** */
/* *********************************************************************** Infobar ******** */
/* **************************************************************************************** */

  #topbar .custom_bg,
  .searchForm-item .dropdown-menu,
  #nav_mobile,
  .accountLinks {
    background-color : rgba(194, 194, 194, 1);
  }
  .accountLinks {
    border-color : rgba(194, 194, 194, 1);
  }
  .searchForm-item .dropdown-menu {
    border-color : rgba(194, 194, 194, 1);
  }


  #topbar,
  #topbar .navbar-dark .navbar-nav .nav-link,
  #topbar .nav-link,
  #topbar a,
  .searchForm-item .btn-outline-secondary,
  .navbar-dark .navbar-toggler,
  .btn-link.grey {
    color : rgba(255, 255, 255, 1);
  }
  .searchForm-item .btn-outline-secondary,
  .searchForm-item .form-control,
  .navbar-dark .navbar-toggler,
  #nav_mobile .btn-link.grey {
    border-color : rgba(255, 255, 255, 1);
  }
  .navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }
  #nav_mobile hr {
    border-top-color : rgba(255, 255, 255, 1);
  }
  #nav_mobile .btn-link.grey {
  }


  #topbar .navbar {
    padding-top:5px;
  }


  #topbar .navbar {
    padding-bottom:5px;
  }


  #nav_mobile a.active,
  #nav_mobile li.subItem.actStyle a { 
    color: rgba(26, 150, 47, 1);
  }  



/* **************************************************************************************** */
/* ********************************************************* Kopfbereich allgemein ******** */
/* **************************************************************************************** */

  #header {
    margin-top:1px;
  }


  #header {
    margin-bottom:0px;
  }


  #header {
    padding-top:20px;
  }


  #header {
    padding-bottom:20px;
  }






/* **************************************************************************************** */
/* ********************************************************* Kategorie Navigation ********* */
/* **************************************************************************************** */



  #naviTop .level_1_li a.link_level_1 {
    color: rgba(33, 37, 41, 1);
  }


  #naviTop .level_1_li.actItem,
  #naviTop .level_1_li.actItem a.link_level_1,
  #naviTop .level_1_li a.active {
    background-color: rgba(255, 255, 255, 1);
  }
  #naviTop .level_1_li .actArrow {
    border-top-color: rgba(255, 255, 255, 1);
  }


  #naviTop .level_1_li.actItem a.link_level_1 {
    color: rgba(27, 154, 56, 1);
  }



  .level_2_layer .inner,
  #naviTop .level_1 li .level_2 li a,
  #naviTop .level_1 li .level_2 li a:hover {
    background-color: rgba(255, 255, 255, 1);
  }


  #naviTop .level_1 li .level_2 li a {
    color: rgba(54, 57, 59, 1);
  }


  #naviTop .level_1 li .level_2 li a:hover {
    color: rgba(27, 154, 56, 1);
  }



  #naviTop hr { 
    border-top-color: rgba(0, 0, 0, 0.1);
  }  


/* **************************************************************************************** */
/* ********************************************************************* Homepage ********* */
/* **************************************************************************************** */

  .col-dyn.onslider {
    width: 57%;
    -ms-flex: 0 0 57%;
    flex: 0 0 57%;
    max-width: 57%;
  }
  
  
  
  .col-dyn.onteaser {
    width: 43%;
    -ms-flex: 0 0 43%;
    flex: 0 0 43%;
    max-width: 43%;
  }  



/* **************************************************************************************** */
/* *********************************************************************** Footer ********* */
/* **************************************************************************************** */

  footer {
    width:100%;
    max-width:100%;
  }
  
    footer {
      background-color: rgba(243, 243, 243, 1);
    }
  



  footer .container {
    background-color: rgba(243, 243, 243, 1);
  }



  footer,
  footer a,
  footer a:hover,
  footer hr {
    color:rgba(33, 37, 41, 1);
  }



  footer hr {
    background-color : rgba(246, 246, 246, 1);
  }



  footer {
    margin-top : 20px;
  }



/* **************************************************************************************** */
/* ********************************************************************* Listenansicht **** */
/* **************************************************************************************** */


  .articlelist_item .card {
    border-color:rgba(0, 0, 0, 0.13);
  }  


  .articlelist_item.onlastRow .card {
    border-color:transparent;
  }
  .articlelist_cont.masonry_list .card {
    border-color:transparent;
  }









/* **************************************************************************************** */
/* ********************************************************************* Detailansicht **** */
/* **************************************************************************************** */

  .line-bar .indicator {
    background-color: rgba(247, 120, 37, 1);
  }




/* **************************************************************************************** */
/* ********************************************************************** Buttons ********* */
/* **************************************************************************************** */

  .btn-secondary {
    background-color: rgba(192, 192, 192, 1);
  }


  .btn-secondary,
  a.btn-secondary:not([href]):not([tabindex]) {
    color: rgba(255, 255, 255, 1);
  }


  .btn-secondary {
    border-color: rgba(192, 192, 192, 1);
  }



  .btn-secondary:hover {
    background-color: rgba(192, 192, 192, 1);
  }


  .btn-secondary:hover {
    color: rgba(255, 255, 255, 1);
  }


  .btn-secondary:hover {
    border-color: rgba(192, 192, 192, 1);
  }




/* **************************************************************************************** */
/* ********************************************************************** Markers ********* */
/* **************************************************************************************** */
/* ***************************************************************** NEW ****************** */

  .marker_new .badge-bgr-custom {
    background-color: rgba(130, 64, 193, 1);
  }


  .marker_new .badge-bgr-custom {
    color: rgba(255, 255, 255, 1);
  }


/* ***************************************************************** SPECIAL ************** */

  .marker_special .badge-bgr-custom {
    background-color: rgba(102, 169, 198, 1);
  }


  .marker_special .badge-bgr-custom {
    color: rgba(255, 255, 255, 1);
  }


/* ***************************************************************** TOP ****************** */

  .marker_top .badge-bgr-custom {
    background-color: rgba(118, 169, 64, 1);
  }


  .marker_top .badge-bgr-custom {
    color: rgba(255, 255, 255, 1);
  }


/* ***************************************************************** Rabatt *************** */

  .article_salesicon .badge-bgr-custom {
    background-color: rgba(247, 120, 37, 1);
  }


  .article_salesicon .badge-bgr-custom {
    color: rgba(255, 255, 255, 1);
  }




/* **************************************************************************************** */
/* ****************************************************************** Hintergrund ********* */
/* **************************************************************************************** */



  body {
    background-repeat: repeat;
  }


  body {
    background-position: 0 0;
  }




/* **************************************************************************************** */
/* ****************************************************************** Elemente ************ */
/* **************************************************************************************** */








/* **************************************************************************************** */
/* ****************************************************************** Fonts *************** */
/* **************************************************************************************** */
/* ***************************************************************** Global Font ********** */



  
    body {
      font-family: Arial, Arial,apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    }
  
  

/* ***************************************************************** H1 ****************** */
h1 {
  font-family: inherit, Arial,apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  
  
  color: rgba(33, 37, 41, 1);
  font-weight:normal; 
}

/* ***************************************************************** H2 ****************** */
h2 {
  font-family: inherit, Arial,apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  
  
  color: rgba(33, 37, 41, 1);
  font-weight:normal; 
}

/* ***************************************************************** H3 ****************** */
h3 {
  font-family: inherit, Arial,apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  
  
  color: rgba(33, 37, 41, 1);
  font-weight:normal; 
}




/* **************************************************************************************** */
/* ********************************************************************* Preis ************ */
/* **************************************************************************************** */
.price_main {
  font-family: inherit, Arial,apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  
  
  
  font-weight:bold; 
}
.article_list_price {
  font-family: inherit, Arial,apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  
  font-size: 1rem;
  
  font-weight:normal;
}



/* **************************************************************************************** */
/* ************************************************************* Bestellprozess Steps ***** */
/* **************************************************************************************** */

  .steps {
    margin-top:0px;
  }


  .steps {
    margin-bottom:0px;
  }












@media (max-width: 768px) {
  .arrow_box_1:after,
  .arrow_box_2:after,
  .arrow_box_3:after {
    border-color: rgba(179, 181, 181, 0);
    
  }
  .arrow_box_1:before,
  .arrow_box_2:before,
  .arrow_box_3:before {
    border-color: rgba(247, 247, 247, 0);
    
  }
  .arrow_box_3:before {
    
  }
  .arrow_box_1.current_step:after,
  .arrow_box_2.current_step:after,
  .arrow_box_3.current_step:after,
  .arrow_box_1.current_step.w_border:after,
  .arrow_box_2.current_step.w_border:after,
  .arrow_box_3.current_step.w_border:after {
    border-color: rgba(179, 181, 181, 0);
  }
  .arrow_box_1.current_step:before,
  .arrow_box_2.current_step:before,
  .arrow_box_3.current_step:before,
  .arrow_box_1.current_step.w_border:before,
  .arrow_box_2.current_step.w_border:before,
  .arrow_box_3.current_step.w_border:before {
    border-color: rgba(247, 247, 247, 0);
    
  }
  .arrow_box_1.current_step.w_border,
  .arrow_box_1.w_arrow_w,
  .arrow_box_2.current_step.w_border,
  .arrow_box_2.w_arrow_w,
  .arrow_box_3.current_step.w_border,
  .arrow_box_3.w_arrow_w {
    
  }
  .arrow_box_1.current_step.w_border:before
  .arrow_box_1.w_arrow_w:before,
  .arrow_box_2.current_step.w_border:before,
  .arrow_box_2.w_arrow_w:before,
  .arrow_box_3.current_step.w_border:before,
  .arrow_box_3.w_arrow_w:before {
    
  }
  .arrow_box_1.w_arrow_w:after,
  .arrow_box_1.current_step.w_border:after,
  .arrow_box_2.current_step.w_border:after,
  .arrow_box_2.w_arrow_w:after,
  .arrow_box_3.current_step.w_border:after,
  .arrow_box_3.w_arrow_w:after {
    border-color: rgba(179, 181, 181, 0);
     
  }
  .arrow_box_1:hover:after,
  .arrow_box_2:hover:after,
  .arrow_box_3:hover:after {
    border-color: rgba(179, 181, 181, 0);
    
  }
  .arrow_box_1:hover:before,
  .arrow_box_2:hover:before,
  .arrow_box_3:hover:before {
    border-color: rgba(179, 181, 181, 0);
    
  }
  .steps-steps:hover,
  .arrow_box_2:hover,
  .arrow_box_3:hover,
  .arrow_box_4:hover {
     
  }
  .arrow_box_3:hover {
    
  }
  .arrow_box_1.w_arrow_w:before,
  .arrow_box_1.current_step.w_border:before,
  .arrow_box_2.current_step.w_border:before,
  .arrow_box_2.w_arrow_w:before,
  .arrow_box_3.current_step.w_border:before,
  .arrow_box_3.w_arrow_w:before {
    
  }
  .arrow_box_1.w_arrow_w:after,
  .arrow_box_1.current_step.w_border:after,
  .arrow_box_2.current_step.w_border:after,
  .arrow_box_2.w_arrow_w:after,
  .arrow_box_3.current_step.w_border:after,
  .arrow_box_3.w_arrow_w:after {
     
  }
}
/* **************************************************************************************** */
/* ******************************************** HR Akademie — eigene Anpassungen ********** */
/* **************************************************************************************** */
/* Angelegt 09/2026. Gehört ans Ende von theme_styles.css.liquid.             */
/*                                                                            */
/* Die Hintergrundfarbe wird BEWUSST NICHT gesetzt. Die Schaltflächen sind    */
/* bereits #88BD2A — derselbe Ton wie die Seitenbanner und die grünen         */
/* Inhaltsbänder. Damit bleibt die Farbe an EINER Stelle in main.css und      */
/* die Schaltflächen ziehen automatisch mit, wenn sie dort je geändert wird.  */
/*                                                                            */
/* !important ist nötig: Das Theme setzt Farbe und Innenabstand selbst mit    */
/* !important. Ohne wirkt der Block nicht.                                    */

/* 1. Alle Schaltflächen im Seiteninhalt.
      display:inline-block ist wichtig — die Schaltflächen sind im Theme
      display:inline, dabei wird der senkrechte Innenabstand gezeichnet,
      aber nicht mitgerechnet. Sie ragen dadurch aus ihrem Absatz heraus.

      Die Schriftfarbe wird von Weiß auf Dunkel geändert. Weiß auf #88BD2A
      ergibt ein Kontrastverhältnis von 2,2:1 und erfüllt die
      Barrierefreiheitsanforderungen nicht. Dunkel liegt bei 6,8:1. */
.round-button{
  display:inline-block !important;
  border-radius:0 !important;
  color:#232620 !important;
  border:2px solid #88BD2A !important;
  padding:15px 20px !important;
  font-weight:700 !important;
}

/* 2. Schaltfläche in der Navigation: nur Form und Schriftfarbe.
      display und Innenabstand bleiben, damit die Kopfzeile nicht wächst. */
#naviTop .round-button{
  display:block !important;
  color:#232620 !important;
}

/* 3. Burger-Menü und Bootstrap-Knöpfe eckig */
.navbar-toggler,
.btn{
  border-radius:0 !important;
}

/* 4. Mauszeiger darüber: eine Nuance dunkler */
.round-button:hover,
.round-button:focus,
#naviTop .round-button:hover{
  background:#78A824 !important;
  border-color:#78A824 !important;
  color:#232620 !important;
}

/* 5. WICHTIG — muss ganz zum Schluss stehen:
      Deaktivierte Knöpfe bleiben grau. Ohne diese Regel würde der Knopf
      "Ausbildung buchen" aussehen wie ein aktiver, obwohl er erst nach
      dem Ausfüllen des Formulars klickbar ist. */
.round-button.disabled,
.round-button:disabled{
  background:#D6D6D6 !important;
  border-color:#D6D6D6 !important;
  color:#FFFFFF !important;
  cursor:default !important;
}

/* 6. Formular-Knöpfe (Senden, Buchung absenden, Anmelden ...).
      Nur nötig, wenn ihr die sechs Farbfelder in den Style-Einstellungen
      NICHT ändert. Kein !important nötig, weil die erzeugten Regeln
      weiter oben in derselben Datei stehen. */
.btn-secondary{
  background-color:#88BD2A;
  color:#232620;
  border-color:#88BD2A;
}
.btn-secondary:hover,
.btn-secondary:focus{
  background-color:#78A824;
  color:#232620;
  border-color:#78A824;
}

/* 7. Häufige Fragen auf der Startseite: das Plus-Zeichen.
      Geprüft am 08.09.2026: <summary> kommt auf der gesamten Website
      nur in diesem einen Abschnitt vor (7 Stück, alle auf der Startseite).
      Die Regel kann deshalb ohne Klassennamen stehen.
 
      Nötig wird sie, weil jetzt keine Antwort mehr aufgeklappt ist:
      Sieben zugeklappte Zeilen brauchen ein sichtbares Zeichen, dass
      sich etwas öffnet. Das + dreht sich beim Aufklappen zum –. */
summary{
  position:relative;
  padding-right:44px !important;
}
summary::after{
  content:"+";
  position:absolute;
  right:4px;
  top:14px;
  font-size:25px;
  font-weight:400;
  color:#557000;
}
details[open] summary::after{ content:"\2013"; }
summary::-webkit-details-marker{ display:none; }
 
/* 8. Die Schaltfläche unter dem Infokasten in der rechten Spalte
      ("Beratungsgespräch vereinbaren", "Nachricht senden.",
      "Kontaktiere uns", "Book appointment now").
 
      Sie klebt bisher am linken Rand des Kastens, während der Block
      "Ihre Ansprechpartnerin" direkt darüber zentriert ist. Gemessen
      auf der MASTERS-Seite: Kasten 354 px, Schaltfläche 289 px,
      links 0 px, rechts 65 px Luft. Genau das wirkt gequetscht.
 
      display:block + width:fit-content + margin:auto zentriert sie,
      ohne sie auf die volle Kastenbreite zu ziehen. Am 08.09.2026
      geprüft: 16 Seiten, überall dieselbe Struktur in der
      rechten Spalte (.col-lg-4) — eine Regel genügt für alle. */
.more-about-modules-link{
  display:block !important;
  width:fit-content;
  max-width:100%;
  margin:6px auto 26px !important;
  text-align:center;
}