/*  heyd-messzeuge.de  */

@import 'fonts.css';

/* HTML, BODU, .CONT */
html{background: #58585a;   font-family:'Roboto Condensed', 'Arial Condensed', sans-serif;
    font-size: 16px;    line-height: 22px;    color: #111111;}
body{background: transparent;font-family:inherit; line-height:inherit; min-width:360px}

.cont{ box-sizing: border-box;    max-width: 980px;    padding:0;margin: 0 auto 30px;background-color: #fff;} 
@media (min-width: 1220px) {.cont {  max-width: 1200px; }}

/* Mobile Version */
@media (max-width: 850px){
  .cont{width:100%; min-width:360px}
} 
  /* HEADER I */
.container-header {    background-color: #58585a; background-image: none;    box-shadow: inset 0 0 0 transparent;}
.kopf{display:flex; padding: 0 45px;background-color: #fff;}
@media (min-width: 360px) {.kopf {padding: 0 10px;}}
@media (min-width: 450px) {.kopf {padding: 0 25px;}}
@media (min-width: 810px) {.kopf {padding: 0 45px;}}
@media (min-width: 1220px) {.kopf {padding: 0 55px;}}

@media (max-width: 700px) {.kopf {flex-wrap:wrap }}

/* Logo */
.container-header .grid-child {position:relative;  background: #fff;padding-top:35px; padding-bottom:25px}
.container-header .grid-child.container-below-top{width:50%} 
.container-header .navbar-brand{margin: 20px 0 45px; height: 133px; position:absolute; left:20px; top:0;}
@media (min-width: 810px) {.container-header .navbar-brand {left:40px;}}
.container-header .navbar-brand a img {width:500px}

/*  ----------------- Meta-Navi -------------------  */
.container-below-top.grid-child{gap:30px}
.container-below-top{justify-content:flex-end;}
.container-below-top ul.mod-menu{justify-content:flex-end; flex-direction:column;flex:0; padding-right:10px}
@media (min-width: 1220px){ .container-below-top ul.mod-menu{padding-right:30px} }
.container-header .container-below-top ul li{padding:0; line-height:24px}
.container-header .container-below-top ul li a{color: #9C9EA0;padding-bottom:2px;}
.container-header .container-below-top ul li.current a{}
.container-header .container-below-top ul li a:hover{color: #666; outline: none;}
.container-header .container-below-top ul>li+li{margin:0} 
@media (width < 992px) {
  .nav.meta-pc{display:none}
  .kopf{height:150px}
}
@media (min-width: 450px) {.kopf {padding: 0 25px;}}

/* Sprachen Menu */
div.mod-languages li {margin-left: 0px;margin-right: 0px;padding:0 3px 0 7px; }
div.mod-languages li:first-child{border-right:2px solid #007bc2;text-align:right}
div.mod-languages li.lang-active{font-weight:700}
div.mod-languages ul li.lang-active { background-color:#fff;}

.mod-languages{padding-right:20px; /* display:block */display:none} /* Sprachauswahl vorübergehend ausschalten */
@media (min-width: 1220px){ .mod-languages{padding-right:30px} }

@media (width < 810px) {
.container-header .grid-child.container-below-top{width:100px; position:absolute; padding:0; right:10px; top:10px}
.mod-languages{padding-right:0}
  }

  /* Header II */
/* Navigation */
.main-nav{background-color:  #005488;padding: 5px 20px 0; }
@media (min-width: 810px) {.main-nav {padding: 5px 40px 0;}}
@media (min-width: 1220px) {.main-nav {padding: 5px 55px 0;}}
.main-nav  .container-nav{background-color: transparent;}

/*.grid-child, */.site-grid .grid-child {
    width: 100%;    margin:0 auto;    display: flex;    box-sizing: border-box;
padding: 0 45px;
}
@media (min-width: 360px) {.site-grid .grid-child {padding: 0 10px;}}
@media (min-width: 450px) {.site-grid .grid-child {padding: 0 25px;}}
@media (min-width: 810px) {.site-grid .grid-child {padding: 0 45px;}}
@media (min-width: 1220px) {.site-grid .grid-child {padding: 0 55px;}}

.container-component {background-color:  #fff;}

/* Hamburger-Button Korrektur  */
@media (width < 992px) {
.container-header .main-nav .grid-child{ padding-top:5px; padding-bottom:5px;}
  }
.container-header .navbar-toggler { border: 0 solid transparent;}
@media (width <= 767.98px) {
    .container-header .container-nav .container-search, .container-header .container-nav nav {        margin-top:0;    }
}

@media (min-width: 810px) {.main-nav  .grid-child{padding: 0 40px;}}
@media (min-width: 450px) {.main-nav  .grid-child {padding: 0 20px;}}
@media (min-width: 1220px){.main-nav  .grid-child{padding: 0 20px; }
.grid-child, .site-grid .grid-child {padding: 0 55px;  max-width: 1200px;}}

/* OFFCANVAS */

@media (width<992px) {
.offcanvas {  color: #fff; background-color: #005488;background-image: linear-gradient(160deg, #005488, #007bc2);}
.offcanvas.offcanvas-end {  width: 300px;}
.container-header .mod-list li a{display:block; padding:5px}
.container-header .mod-list li a:hover {background-color: #007bc2;}
}

.btn-close {  --btn-close-color: #fff; --btn-close-bg: none!important;}
.btn-close:after {content: "X";    vertical-align: middle;  color:#fff;}
/* *** Hauptmenü *** */
.container-header nav {margin-top: 0;}

@media (width>=992px) {
 .container-header .mod-menu > li::after
 {  transition:none;  display:none; /* animierte unterstreichung ausschalten */ }}

/* I-te EBENE */
.main-nav ul li a{color: #ffffff;font-family: 'Montserrat', sans-serif;font-size:18px; padding-top:.25em; padding-bottom:.25em}
.main-nav  ul li a:hover{color: #ffffff;text-decoration:none}
.main-nav ul li.current>a, .main-nav  ul li.active>a{color:#ffffff;}
.main-nav  ul li.active ul, 
.main-nav ul li:hover ul {display:block; width:180px;margin-left:0;padding-left:14px; /* background:rgba(255,255,255,0.7)*/}
.main-nav ul li ul li a{font-size:1rem; display:block} 
 /* Verlauf nur für PC Version */
@media (width >= 992px) {
  .main-nav ul li:hover ul{position:absolute}
    .navbar-expand-lg .offcanvas .offcanvas-body .main-nav   ul > li > a:hover, .main-nav   ul > li > a:focus, .main-nav   ul > li > a:active, .main-nav   ul > li.active > a {
    color: #ffffff;    background: linear-gradient(to right, #005488 0%,#007bc2 50%,#005488 100%);
   }
}
.container-header .mod-menu li.parent:hover >ul {display: block;}

/* II-te EBENE */
@media (width >= 992px) {
.container-header .mod-menu li.active ul, .container-header .mod-menu li:hover ul{margin-top: 0;
    color: #ffffff;    top: 31px!important;    font-family: 'Montserrat', sans-serif;
    font-size: 16px;  background: linear-gradient(135deg, #005488, #007bc2); background-repeat:no-repeat;
    position: absolute; width: 220px; margin-left: 0; padding: 14px 0;z-index: 1020;
    box-sizing: border-box;border-top: 8px solid transparent;}
.container-header .mod-menu li.active ul::before,  .container-header .mod-menu li:hover ul::before { left:25px;
  top: -8px;position: absolute;  border-bottom: 9px solid #005488;
  border-left: 8px solid transparent;  border-right: 8px solid transparent; content: "";}
}
.container-header .mod-menu li.active ul li.active a, .container-header .mod-menu li:hover ul li:hover a {background: #005488}
.container-header .mod-menu li ul li a{padding: 0.25em 20px;}

  .navbar .mod-menu__sub > li > a:hover, .navbar .mod-menu__sub > li > a:focus {
    background: #005488;    color: #ffffff;    outline: none;}

/* Breadcrumbs */
.breadcrumb {background-color: #fff; }
.px-3 { padding-left: 0!important;}
/* main */
main{padding-bottom:40px}
/*Footer*/
.footer {background-color: transparent;     background-image: none;}
 footer.footer {padding:0 35px; background: #58585a; } 
@media (min-width: 1220px){
 footer.footer {padding:0 45px} 
}
.footer .grid-child {    padding: .5rem .5em;}
footer a:not([class]) {text-decoration:none}
footer a:not([class]):hover {text-decoration:underline}
div.footermenu{width:100%}
div.footermenu>div {display:flex;justify-content: space-between; gap: 2mm;}
.footer ul{padding:5px 20px 5px 5px; list-style-type: none;}
.footermenu div div:last-child ul{padding:5px}
.footermenu div div{max-width:20%}
.footermenu ul:first-child li:first-child{font-weight:700}
@media (width < 992px) {
  div.footermenu>div{flex-wrap:wrap }
  .footermenu div div{max-width:30%}
}
@media (width < 500px) {
   .footermenu div div{max-width:50%}
}

/* *** *** Typografie *** *** */
/* RESET */
* + p, * + ul, * + ol, * + dl, * + blockquote, * + pre, * + address, * + fieldset, * + figure{margin-top:0}
p, ul, ol, dl, blockquote, pre, address, fieldset, figure{margin:0 0 16px 0}
* + h1, * + h2, * + h3, * + h4, * + h5, * + h6 {margin-top: 0px;}
.uk-grid + .uk-grid, .uk-grid-margin, .uk-grid > * > .uk-panel + .uk-panel {margin-top:0;}
h3, h4, h5, h6 {margin: 0 0 12px 0;}
* + .uk-margin { margin-top: 0px;}
h3{padding-top:24px} /* löschen? */
@media (min-width: 1220px){.uk-grid + .uk-grid, .uk-grid-margin, .uk-grid > * > .uk-panel + .uk-panel{margin-top:0;}}

.uk-grid{display:flex}
.uk-grid > * { float: none;}

a.tm-logo-small{}

/* Elemente */

pre{padding:0;background: transparent; font: 15px / 12px "Roboto Condensed", sans-serif;-moz-tab-size: 1; tab-size:1;line-height:12px;overflow:visible;}
.klein{font-size:0.9em}
h1,h2,h3,h4,h5,h6{font-family: 'Montserrat', sans-serif;}
h1,h2{font-size:30px; color:#005488;font-weight:600; line-height:1.2em; margin-bottom:19px}
h3 {font-size:21px; color:#005488;font-weight:600;line-height: 24px;margin-bottom:14px}
h4 {font-size:18px; color:#333;font-weight:600;line-height: 18px;margin-bottom:13px}

hr.hr-grau{height:1px;border-width:0;color: #bbbdbe;background-color: #bbbdbe; opacity:1 }

.hr-weiss .hr-grau{color: #ffffff;background-color: #ffffff }
hr.clear-all{clear:both}

ul.liste{list-style:none;padding-left:20px}
ul.liste li{margin-bottom:14px; background-image:url(../images/plus.png); padding-left:16px; background-repeat: no-repeat;background-position:left 7px}
.hl-box ul.liste li{background-image:url(../images/plus-w.png);}
ul.liste.prod{padding-left:0}
ul.liste.prod li{margin-bottom:10px;} 
h3 a, h3 a:not([class]){text-decoration:none}

/* *** Produkte FLEX-Struktur ***  */

.prod-row img{display:block}
@media (min-width: 600px){
.prod-row{display: flex;box-sizing: border-box;margin-bottom:19px}
.prod-row div[class*="prod-cell-"]{margin-right:2%}
.prod-row div[class*="prod-cell-"]:last-child{margin-right:0}
.prod-cell-1{flex:1.8;max-width:340px} /*   1/3 spalten */
.prod-cell-ta{flex:1;max-width:517px}/*   1/2 spalten */
.prod-cell-2{flex:2.2;max-width:720px}/*   2/3 spalten */
}
.prod-row h4{font-family: "Roboto Condensed", sans-serif;color:#005488;font-size:15px; margin-bottom:6px; font-weight:700}
.prod-row h3{padding-top:0}
.prod-row .prod-row{margin-bottom:20px}
.prod-row .prod-row:last-child{margin-bottom:0}

@media (min-width: 980px){
  .prod-row:nth-child(2) .prod-cell-1 img{margin-top:-40px;}
   
}
ul.arrow{padding-left:0;list-style:none}
ul.arrow li{padding-left:24px;background:transparent url("../images/arrow.png") no-repeat left 5px; /*height:28px*/margin-bottom:10px}

/* Produkttabellen und -formate *//* siehe auch *//* Tabelle */
table.einfachmischer, table.treppenteile, table.tech {width:100%;}
table.treppenteile tr{border-bottom:#111 solid 1px}
table.treppenteile tr:last-child{border-bottom:#fff solid 0px}
table.einfachmischer tr.tabkopf, table.treppenteile tr.tabkopf{border-bottom:#111 solid 1px}
p.prod-name{font-weight:700;border-bottom:#111 solid 1px}
table.einfachmischer, table.einfachmischer th, table.einfachmischer td{vertical-align:baseline}
table.treppenteile th, table.treppenteile td{vertical-align:top}

table.tech{border: 5px solid #fefefe; margin-bottom:26px}
table.tech th, table.tech td {padding:0 2px; border: 1px solid #fff}
table.tech tr:nth-child(even){background-color:#F4F4F4}

table.raeder{border: 5px solid #fefefe}
table.raeder th, table.raeder td{padding:10px 12px 6px;border:1px solid #fefefe }
table.raeder th{text-align:left; padding-left:1px}
table.raeder tr td:first-child {padding:0}
table.raeder tr:nth-child(odd) {    background-color: #F9F9F9;}
/* PDF symbol innerhalb Produktgruppen */
img.pdf-icon{display: inline; vertical-align: baseline;}
/* Bildheadlines */
.bildheadline-u-r{color:#fff;text-align:right; position:absolute; bottom:0; right:20px; font-weight:400}

/* Technische Anleitungen */
.anleitung ol li{margin-bottom:18px}

/* Seiten */
.jahr{display:none}

/* aktuell */
.aktuell .jahr{display:block}

/* KONTAKT */
.com_contact h1, .com-contact .com-contact__container h2 {display:none}
.contentpane {background:#fff} /* background im Pop-up*/

/* sitemap */
.sitemap .com-content-article__body>div{display:flex;  justify-content:space-between; flex-wrap:wrap;}
.sitemap ul.mod-menu.hmenu-de{display:flex;  flex-direction:row;flex-wrap:nowrap;gap:10px; justify-content:space-between}
ul.mod-menu.mod-list.nav.meta-de{padding-left:0}
.sitemap .sitemap-de:first-child{width:82%}
@media (min-width: 1150px){
ul.mod-menu.mod-list.nav.meta-de{padding-left:25px}
  }
@media (max-width: 980px){
  .sitemap .com-content-article__body div{flex-wrap:wrap;}
}
@media (max-width: 650px){
  .sitemap ul.mod-menu.hmenu-de{flex-wrap:wrap;gap:0px}
  .sitemap ul.mod-menu.hmenu-de li{width:30%}
}

.nav {display:block}
.hmenu-de>li{width:24%}
.hmenu-de>li:nth-child(1){width:14%}
.hmenu-de>li:nth-child(2){width:18%}
.hmenu-de>li:last-child{width:18%}
.sitemap .com-content-article__body .mod-list li a{padding:2px 16px 2px 0; display:block}
 .sitemap .com-content-article__body .mod-list li ul.mod-menu__sub {padding:0 3px 3px 0; max-width:155px }
.sitemap-de>ul>li>a{font-size:18px; font-weight:700}
.sitemap .sitemap-de .mod-list li.active > a, .sitemap .mod-list li > a:hover {
    text-decoration: none;
}
/* Qualitätsicherung Table */
table{width:80%; margin:15px auto 30px}
table, td, th{border:1px solid #111; padding:2px 8px 2px 4px;}
tr:first-child th:first-child{padding:2px;}
th{ text-align: center;}
td{ text-align: right;}

/* Zertifizierung */
.zert{display: flex; align-items:flex-start}
.zert img{max-width:100%; vertical-align: text-top; margin-left: auto;
    margin-right: auto;    display: block;}
@media (max-width: 767px){
  .zert{flex-direction:column}
  .zert div{margin-left:auto; margin-right:auto}
}