:root {
    --bs-light-rgb: 255, 255, 255;  /* Weiss */
    --bs-primary-rgb: 2, 156, 158; /* Thürkis - Bordercolor */
    /*--accordion-button-active-bg: 2, 156, 158;  Thürkis - Accordion Aktiv  */
     /* --bs-accordion-active-bg: #ffcccc; Thürkis - Accordion Aktiv  */ 
}

body {
    font-family: 'Open Sans', sans-serif;
	font-weight: inherit;
	font-size: 14px;
}

.header-placeholder-scroller { height: 50px; }
.header-placeholder { height: 20px; }
.content-trenner { height: 25px; }
.container-fluid { max-width: 2000px; }

.trenner_top { height: 150px; }
.trenner_top_ohne_slider { height: 75px; }

.txt_color { color:#212529; }
.text-danger { color: rgba(195, 19, 21, 1.0); }

.grau-teilweise { filter: grayscale(100%); opacity: 0.8; }
.grau-teilweise:hover { filter: grayscale(0%); opacity: 1.0; }

/* Text "Besuchen Sie unsere Partnershops" */
.txt_pt_shp { font-size: 1.0rem; }

/* Reihe Kontakt Container */
.custom-bg, .custom-bg td  {
   background-color: rgb(238, 237, 245)!important; /*Hellgrau */
}

/* Titel */
h1, .h1 { font-size: 1.75rem; /*text-transform: uppercase;*/ color: rgba(195, 19, 21, 1.0);  }

h2, .h2 { 
    font-size: 1.55rem; 
    /*text-transform: uppercase;*/ 
    color: rgba(195, 19, 21, 1.0); 
    /*border-bottom: 1px solid rgba(195, 19, 21, 1.0); */
    border-bottom: 1px solid rgba(2, 156, 158, 1.0);
    margin-bottom: 20px; 
    padding-bottom: 10px; 
}
/* H2 ohne Border - Bottom bei Unterseiten */
#impressum h2, #impressum .h2, #datenschutz h2, #datenschutz .h2  { border-bottom: none; margin-bottom: .5rem; padding-bottom: 0px;  }

h3, .h3 { font-size: 1.25rem;   }
h4, .h4 { font-size: 1.15rem;   }
.contactRow { font-size: 1rem; }

.title_main { color: rgba(0, 0, 0, 1.00); text-transform: uppercase; }

.title_mit_bckgr_thrks {
    background: rgba(2, 156, 158, 1.0);
    color: #ffffff;
    padding: 5px 10px;
}
.title_mit_bckgr_rot {
    background: rgba(195, 19, 21, 1.0);
    color: #ffffff;
    padding: 5px 10px;
}

.h2_title_kleiner { font-size: 1.25rem; }

/* Links */
a { text-decoration: none; color: rgba(2, 156, 158, 1.0);  }
a:hover { text-decoration: none; color: rgba(195, 19, 21, 1.0); }

/* Kontakt Container Reihe */
.contact_container a { color: rgb(33, 3, 41)!important; }


/* Button */
.btn-primary {
  background-color: rgba(2, 156, 158, 1.0); /* neue Hintergrundfarbe */
  border-color: rgba(2, 156, 158, 1.0);     /* neue Rahmenfarbe */
}
.btn-primary:hover {
  background-color: rgba(0,135,136,1.00); /* Hover-Farbe */
  border-color: rgba(0,135,136,1.00);
}

.btn-danger {
  background-color: rgba(195, 19, 21, 1.0); /* neue Hintergrundfarbe */
  border-color: rgba(195, 19, 21, 1.0);     /* neue Rahmenfarbe */
}
.btn-danger:hover {
  background-color: rgba(172,19,21,1.00); /* Hover-Farbe */
  border-color: rgba(172,19,21,1.00);
}

.header-info { background-color:rgba(195, 19, 21, 1.0); color:#FFFFFF; }
.header-info a { color:#FFFFFF; }
.header-info a:hover { color:rgba(255, 255, 255, 0.8);  }

.logo_header { display:none; height: 100px; transition: all 0.3s ease 0s; }
.logo_header_scroll { height: 50px; padding-top: 0px !important; padding-bottom: 0px !important; transition: all 0.3s ease 0s; }

.produktsuche_anz { display:inherit; color:#FFFFFF; }
.produktsuche_verst { display:none!important; }

.logo_header_mobil { display:inherit; border-top: 1px solid #029c9e; border-bottom: 1px solid #029c9e; }
.logo_header_mobil_scroll { display:none; }

/* Navbar ################################# */
.nav-item { padding: 0px 0px 0px 0px; letter-spacing: 0.05em; }
 
.navbar-nav .nav-link {
    margin: 0px 1px;
    text-transform: uppercase;
    font-weight: normal;
    color: rgba(255, 255, 255, 1.0);
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}
.navbar-nav .nav-link:focus, .navbar-nav .nav-link:hover {
    background-color: rgba(195, 19, 21, 1.0)!important;
     color: rgba(255, 255, 255, 1.0)!important;
}

/* Aktiver Menupunkt */
.nav-link.active, .nav-link:active  {
    background-color: rgba(195, 19, 21, 1.0)!important;
     color: rgba(255, 255, 255, 1.0)!important;
}

/* Dropdown styling */
.dropdown-menu {
    background-color: #FFF;
    font-size: 0.9rem;
    text-decoration: none;
}

.dropdown-item { white-space: break-spaces; }

/* Aktiver Menupunkt Parent bei Dropdown */
#kontakt .navbar-nav .nav-link.dropdown-toggle.kontakt,
#kundenbereich .navbar-nav .nav-link.dropdown-toggle.kundenbereich,
#produkte .navbar-nav .nav-link.dropdown-toggle.produkte
{
    background-color: rgba(195, 19, 21, 1.0)!important;
     color: rgba(255, 255, 255, 1.0)!important;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1.0rem;
    padding-left: 1.0rem;
}

/* ##################  Megamenu #################################### */
/* Styling für das Megamenu */
/* ist direkt in der Datei  inc/inc.nav_header.php eingebunden */
/* ##################  Megamenu Ende #################################### */


/* Kategorie-Teaser, Zubehör */
.kat_teaser_card, .zub_teaser_card { min-height: 210px; }
.kat_teaser, .zub_teaser { 
    font-size: 1.0rem; color: #FFFFFF; background-color: rgba(195, 19, 21, 1.0); background-color: #029c9e; padding: 10px 0px; min-height: 80px; 
}
.zub_teaser { padding: 10px; min-height: 160px;  }
.kat_teaser h3, .kat_teaser .h3, .zub_teaser h3, .zub_teaser .h3,  
.kat_teaser h2, .kat_teaser .h2, .zub_teaser h2, .zub_teaser .h2 { 
    font-size: 1.0rem; color: #FFFFFF; border-bottom: 0px; margin-bottom: 0px; padding-bottom: 0px; 
}

/* Produktteaser ################################ */
/* Produktteaser Standard */
.produkt_teaser_card { min-height: 240px; }

.produkt_teaser_card:hover,
.kat_teaser_card:hover,
.zub_teaser_card:hover{ 
    /*border-color: rgba(195, 19, 21, 1.0)!important; */
    border-color: #029c9e!important; 
}

/*.produkt_teaser_body { padding: 0.2rem !important; }*/
.produkt_teaser_body { padding: 0.0rem !important; }
h3.produkt_teaser, .h3.produkt_teaser { 
    font-size: 1.0rem; color: #FFFFFF; background-color: rgba(195, 19, 21, 1.0); background-color: #029c9e;  padding: 10px 5px; margin-bottom: 5px; min-height: 60px; 
}
.produkt_teaser_card_img { min-height: 115px; }
.produkt_s_titel { font-size: 0.8rem; line-height: normal; margin-bottom: 0px; }

/* Zoom Out Effekt */
.zoom-out .card {
transition: transform 0.3s ease; /* Sanfte Animation */
    transform: scale(1); /* Standardgröße */  
}
.zoom-out .card:hover {
  transform: scale(1.2); /* Herauszoomen bei Mouseover */
}

.card:hover { border-color: rgba(0,135,136,1.00); }
.card a:hover { text-decoration: none; }

/* Produktteaser höher */
.produkt_teaser_card_2 { min-height: 750px; }
.produkt_teaser_card_img_2 { min-height: 230px; }
.zoom-out2 .card:hover {
  transform: scale(1.05); /* Herauszoomen bei Mouseover */
}
/* Produktteaser Ende ################################ */

/* Ankerlink mit Abstand von oben */
.anker { 
	display: block;
	content: "";
	width: 10px;
	height:120px;
	margin-top: -120px;
	visibility: hidden;
}

/* Accordion */
.accordion-header { border-bottom: none; }
.accordion-button {
    background-color: #fff3cd; /* Beige */
    background-color: #e7f5f6; /* Hellblau */
    background-color: rgba(2, 156, 158, 0.2); /* Thürkis */
    
}
.accordion-button:not(.collapsed) {
    color:#FFFFFF;
    background-color: rgba(2, 156, 158, 1.0);
    
}

#accordionBestellungen button.accordion-button.collapsed, #accordionOnlBestellungen button.accordion-button.collapsed {
    font-size: 0.9rem !important;
}

/* Accordion Abstand Content */
.accordion-body { padding: 0.3rem 0.7rem; }

/* UL Listen */
ul.liste, ul.druckinfo { list-style-type: none; padding-left: 0; }
ul.liste li, ul.druckinfo li { position: relative; padding-left: 1.5em; /* Platz fürs Icon */ margin-bottom: 5px;}
ul.liste li::before {
    content: "\f101"; /* Icon-Code */
    font-family: "FontAwesome";
    font-weight: 900; /* wichtig für Solid Icons */
    color: #cc2513;
    position: absolute;
    left: 0;
    top: 0;
}

ul.druckinfo li:before {
    content: '\f00c'; /* Icon-Code */
    font-family: "FontAwesome";
    font-weight: 900; /* wichtig für Solid Icons */
    color: #029c9e;
    position: absolute;
    left: 0;
    top: 0;
}

.table-thuerkis th { background-color: rgba(2, 156, 158, 1.0)!important; color:#FFF; font-weight: 600; }

.table_footer { 
    border: none; 
    border-collapse: collapse;   /* replaces cellspacing="0" */ 
}
.table_footer td,
.table_footer th {
    padding: 10px;               /* replaces cellpadding="10" */
}

/* Rechner Formatierung */
.rechner_reihe {
/*
    background-color: #e7f5f6;
    box-sizing: border-box;
    font-weight: bold;
    color: #029c9e;
    border-bottom: 2px solid #e7f5f6;    */
    background: rgb(2 156 158 / 20%);
    margin: 0 0 5px 10px;
    padding: 5px 15px;
    font-weight: normal;
}

.rechner_reihe_label { font-weight: bold; }

.rechner_info_box { padding: 0.5rem; font-size: 0.8rem; font-weight: 600; }

.verstecken { }

/* Formular Label */
.col-form-label { font-weight: bold; text-align: right; }
.custom-checkbox { transform: scale(1.5);transform-origin: center; }

.rechner_error_active, .form_error_active, .invalid-feedback {
    color: #c31315;
    font-size: 0.75rem;
    font-style: italic;
    font-weight: 600;
    padding-left: 5px;
}
.rechner_error_border, .form_error_border { border: 1px solid #c31315; }

.border-top-dotted-red { border-top: 1px dotted rgba(195, 19, 21, 1.0)!important; }
.border-bottom-dotted-red { border-bottom: 1px dotted rgba(195, 19, 21, 1.0)!important; }

.border-top-dotted-grau { border-top: 1px dotted rgba(79,79,79,1.00)!important; }
.border-bottom-dotted-grau { border-bottom: 1px dotted rgba(79,79,79,1.00)!important; }

.subtitel_rechner { color: rgba(195, 19, 21, 1.0); font-size: 1.4rem; font-weight: 600; }

.input-fixed {  width: 100px; /* gewünschte Breite */ }

/* Zentriert Text, verkleinert, ändert Farben */
.accordion-button-rechner {
  justify-content: center;      /* flex-Zentrierung */
  text-align: center;
  font-size: 0.85rem;
  background-color: rgba(2, 156, 158, 0.75);
  color: #FFF;
  position: relative;           /* für absolut positioniertes Caret */
  padding: 10px;
}
.accordion-button-rechner:not(.collapsed) {
  background-color: rgba(2, 156, 158, 0.8);
  color: #FFF;
  box-shadow: none;
}
/* Caret nicht mehr als Flex-Item schieben, sondern rechts fixieren */
.accordion-button-rechner::after {
  margin-left: 0;               /* überschreibt Bootstrap */
  position: absolute;
  right: 1rem;
}
.accordion-button-rechner::after {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg); /* weiss */
}


/* Kontakt-Button / Tab zum Öffnen rechts vertikal */
.contact-tab {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: right center;
    border-radius: .5rem .5rem 0 0;
    border-color: #ffffff;
    z-index: 1050; /* über normalen Inhalten */
    padding: .5rem 1rem;
    margin-right: 20px;
    x-shadow: 0 4px 12px rgba(0,0,0,.2);
}
/* Optional sanfte Drehung */
.contact-tab .icon {
  transition: transform 0.3s ease;
}
/* Virtueller Rundgang */
.iframe-container-rund {
  position: relative;
  width: 100%;
  max-height: 250px;
  overflow: hidden;
  padding-top: 45%; /* 16:9 Aspect Ratio */
}
.iframe-container-rund iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.iframe-container {
  position: relative;
  width: 100%;
  min-height: 1000px;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.footer_top_backgr { padding: 30px 10px; background-color: rgba(52, 58, 64, 1.00); color:#FFFFFF; }
.footer_top_backgr h5 { color:rgba(255, 255, 255, 1.00); padding-bottom: 10px; }
.footer_top_backgr a { color:#FFFFFF; }
.footer_top_backgr a:hover { color:rgba(255, 255, 255, 0.80); text-decoration: none; }

.footer { padding-top: 10px; }
footer small { /*background-color: rgb(255 255 255 / 80%);*/ padding: 5px; }


@media (max-width: 1846.00px) {
    
    .logo_header { height: 90px; }
    .navbar-nav .nav-link { padding-right: 1.0rem !important; padding-left: 1.0rem !important; }
    
}

@media (max-width: 1629.00px) {
    
    .logo_header { height: 80px; }
    .navbar-nav .nav-link { padding-right: 0.8rem !important; padding-left: 0.8rem !important; font-size:0.9rem; }
    
}

@media (max-width: 1554.00px) {
    
    .logo_header { height: 75px; }
    .navbar-nav .nav-link { padding-right: 0.8rem !important; padding-left: 0.8rem !important; font-size:0.85rem; }
    
}

@media (max-width: 1399.98px) {
    
/*    .navbar_abs { top: 175px; }*/
    
}

@media (min-width: 993px) and (max-width: 1199.99px) {
    .navbar-nav .nav-link { font-size: 0.9rem; }
}

@media (max-width: 1199.98px) {
    
    /*main { padding-top: 125px; }*/
    .logo_header, .logo_header_scroll { height: 70px; }
}

@media (min-width: 992px) { 
    
    .logo_header_top { max-height: 120px; }	
	.deskt_ver { display:none!important; }
}

@media (max-width: 991.98px) {
    
    /*body { padding-top: 116px; }
    main { padding-top: 150px; }*/
    .logo_header_top { max-height: 110px; }	
    .logo_header, .logo_header_scroll { height: 70px; }
    
/*    .navbar_abs { top: 260px; }*/
    /*.navbar-collapse { padding-top: 25px; }*/
    
    .nav-link { 
        border-top: 1px solid #FFFFFF!important;
        /*border-right: 1px solid #FFFFFF!important;*/
        /*border-bottom: 1px solid #FFFFFF!important;*/
        /*border-left: 1px solid #FFFFFF!important;*/ 
        padding-right: .5rem!important; 
        padding-left: .5rem!important; 
    }
	/*.nav-link:focus, .nav-link:hover { 
       border-top: 1px solid rgba(15, 86, 36, 1.00)!important;
        border-right: 1px solid rgba(15, 86, 36, 1.00)!important;
        border-bottom: 1px solid rgba(15, 86, 36, 1.00)!important;
        border-left: 1px solid rgba(15, 86, 36, 1.00)!important;  
    }*/
    ul.dropdown-menu.show { margin: 0 10px; }
    
    .mobil_ver { display:none!important; }
    
}

@media (max-width: 767.98px) {
    
    .h1, h1 { font-size: 1.75rem; }
    .h2, h2 { font-size: 1.6rem; }
    
    .logo_header_top { max-height: 110px; }	
    .logo_header, .logo_header_scroll { height: 65px; }
    
    .txt_pt_shp { font-size: 0.9rem; }
}


@media (max-width: 575.98px) {
    
    .header-placeholder { height: 10px; }
    .header-info { font-size: 0.75rem;  }
    .logo_header_top { max-height: 100px; padding: 10px; }	
    .logo_header, .logo_header_scroll { height: 50px; }
    .iframe-container {  min-height: 1000px; }
    .col-form-label { text-align: left; }
    .txt_pt_shp { font-size: 0.8rem; }
    
}


/* ########### Back to Top Button###########  */
#back-to-top{
		position:fixed;
		bottom: 0px;
		right:35px;
		z-index: 99;
}
#back-to-top a{
    text-align:center;
    text-decoration:none;
    color:#cfd0d4;
    display:block;
    width:25px;
    -moz-transition:color 1s; 
    -webkit-transition:color 1s;
    -o-transition:color 1s;
}

#back-to-top a span {
border-radius: 6px;
display: block;
height: 35px;
width: 35px;
-moz-transition: background 1s;
-webkit-transition: background 1s;
-o-transition: background 1s;
font-size: 35px;
color: rgba(0,0,0,1.00);
border: 1px solid rgba(0,0,0,1.00);
}
#back-to-top a:hover span{
color: rgba(195, 19, 21, 1.0);
border: 1px solid rgba(195, 19, 21, 1.0);
}
/* ########### Back to Top Button ENDE ###########  */