/*General Style*/
@font-face {
font-family: 'Roboto-Regular';
src: url('Roboto-Regular-webfont.woff') format('woff');
}

* {
box-sizing: border-box;
border: 0;
margin: 0;
padding: 0;
}

body {
background-color: #fff;
color: #333;
}

/* Bilder responsive */
img {
max-width: 100%;
height: auto;
}

h1 {
font-size: 32pt;
font-weight:300;
text-transform:uppercase;
color:#394079;
line-height: 1.0em;
}

h2 {
font-size:22pt;
font-weight:400;
color:#394079;
padding:0.5em 0em 0.5em 0em;
text-align:left;
}

h3 {
font-size: 18pt;
color: #394079;
}

h4 {
color: #394079;
font-size: 16pt;
}

figcaption{
line-height:1.5em;
margin:0em 0em 1.0em 0em;
padding:0;
}

p {
line-height:1.5em;
margin:0em 0em 1.0em 0em;
}

strong {
font-weight:700;
}

ul {
margin: 16px 0;
}

li {
font-weight:300;
line-height:1.8em;
margin:0 0 0 16px;
}

a {
line-height:1.5em;
font-weight:400;
color:#394079;
text-decoration:none;
margin:0em 0em 1.0em 0em;
padding:0;
transition:color 0.7s;
}

hr {
color:#c8c8c8;
height: 1px;
margin: 30px 0 25px 0;
}

main a:hover{
color:#c00;
text-decoration: underline;
}

.bg_gray{
background-color:#e4e4e4;
width:100%;
padding:5em 0 5em 0;
}

.bg_white{
background-color:#fff;
width:100%;
padding:5em 0 5em 0;
}

.floatright{
float:right;
}

.floatleft{
float:left;
}

/* On Top Bar */
#menubar {
display:none;
background-color: #fff;
}

#menubar ul {
display:block;
width:2em;
padding:0.9em
}
#menubar ul li {
display:inline;
}

#menubar ul li a.menubutton{
display:none;
}

/* Header */
header {
width:100%;
display:block;
background-color:#fff;
padding: 0.5em 0;
}

header .headerwrapper {
max-width:1000px;
margin: 0 auto 0 auto;
display:flex;
}

header .logo {
width:27%;
flex:1;
}

header .text {
flex:1;
text-align:right;
margin:7px 0 0 0;
}

header .text p{
padding:0;
}

/* Paginierung */
div.paginierung a, div.paginierung span.gew {
display: inline-block;
margin-bottom: 4px;
min-width: 40px;
padding: 4px;
text-align: center;
text-decoration: none
}

div.paginierung a {
background-color: #eee;
border: 1px solid #555;
}

div.paginierung span.gew {
background-color: #394079;
color: #fff
}

/* Formulare Flexbox */
.form-wrapper {
}

.form-row {
display: flex;
padding: 5px;
}

.form-row label {flex: 2;}
.form-row input {flex: 5;}
.form-row select {flex: 5;}

.form-col {
display: flex;
flex-direction: column;
}

fieldset {
border: 4px solid #aaa;
border-radius: 16px;
margin: 16px auto;
padding: 8px;
}

legend {
color: #394079;
font-size: 140%;
margin-left: 20px;
padding: 4px;
}

label {
display: block;
}

.menue {
background-color: inherit;
border-bottom: 1px dotted #394079;
color: inherit;
font-size: 100%;
padding: 6px;
}

.fehler {
background-color: #c00;
border: 1px dotted #f33;
color: #fff;
font-size: 100%;
padding: 6px;
}

span.fehlt {
color: #c00;
}

span.fehlt:before {
content: "\27bd" " ";
}

.b20 {width: 20px;}

textarea {
font-family: 'Roboto-Regular', Arial, Helvetica, sans-serif;
}

/* Tabellen */
table {
width: 100%;
border-collapse: collapse;
border: 1px solid #ccc;
}

td, th {
padding: 3px;
vertical-align: top;
}

th {
font-weight: bold;
text-align: left;
}

tr:nth-child(odd) {
background-color: #eee;
}

table.blind {
border: none;
}

table.blind tr {
background-color: transparent;
}

table.blind td {
padding-bottom: 3px;
}

table.daten {
margin: 20px 0;
}

table.daten td {
padding: 2px 8px;
vertical-align: middle;
}

table.frei {
border: none;
margin: 10px 0 23px 0;
}

table.frei tr {
background-color: transparent;
}

tr:hover {
background-color: #394079;
color: #fff;
}

/* Allgemein für Module */
.links {
float: left;
margin: 0 20px 20px 0;
}

.rechts {
float: right;
margin: 0 0 20px 20px;
}

.block {
margin: 20px 0 20px 0;
}

/* Mehrspaltige Ausgabe */
div.overview {
display: inline-block;
margin-right: 2%;
vertical-align: top;
width: 100%;
}

.wcol2 {max-width: 47%;}
.wcol3 {max-width: 30%;}
.wcol4 {max-width: 21%;}

/* Navigation */
nav {
width:100%;
display:block;
background-color:#394079;
}

.navline {
max-width:1000px;
margin: 0 auto 0 auto;
line-height:2.3em;
display:flex;
}

nav ul {
flex:6;
}

nav ul li {
display:inline-block;
margin:0;
}

nav ul li a {
color:#acb0d2;
line-height:2.5em;
padding:0 1.0em 0em 1.0em;
transition:color 0.7s;
text-align:left;
}

nav ul li a:hover {
color:#fff;
}

nav ul li a.aktiv {
color: #fff;
}

nav a[href$="anhaenger-humbaur"]:before {
content: url(pix/logo-humbaur24.png);
position: relative;
top: 5px;
}

nav .kontakt {
flex:1.2;
}

nav p {
color:#fff;
padding:0;
margin: 0.313em 0em 0.313em 0em;
line-height:2.0em;
text-align:right;
}

nav .phoneicon {
background: url(images/phoneicon.png) no-repeat;
width:100%;
height:100%;
background-size: auto 38%;
}

/*Secoundnavi*/
.secondnav{
margin: 0 30px 0 0;
padding: 0 10px 0 0;
text-align:right;
border-right: 1px solid #c8c8c8;
min-height:250px;
}

.secondnav li{
text-decoration:none;
list-style: none;
}

.secondnav ul li a{
color:#adadad;
text-decoration:none;
line-height:2.2em;
padding:0 0.8em 0em 0.8em;
transition:color 0.7s;
}

.secondnav ul li a.aktiv {
color:#394079;
font-weight:700;
}


#slider{
text-align:center;
position: relative;
width:100%;
height:550px;
background-color:#394079;
overflow:hidden;
}

#slider .slideshow {
background-size:cover;
position: absolute;
top:0;
left:0;
width:100%;
height:550px;
display:none;
}

#slider .wasserzeichen{
background:url(images/wasserzeichen.png);
position:absolute;
right:-90px;
bottom:0px;
width:591px;
height:513px;
background-repeat:no-repeat;
z-index:1;
}

#slider #ud_load{
position: absolute;
left:0;
bottom:0;
background-color:#394079;
border-right:5px solid #fff;
width:0;
height:5px;
z-index:2;
}

#slider .slider_text{
position:absolute;
top:0;
width:100%;
margin: 0 auto;
}

#slider h1 {
font-size: 55pt;
text-transform:uppercase;
color:#fff;
font-weight:400;
text-align:center;
padding:1.7em 0 0 0;
letter-spacing: 2px;
text-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
margin:0;

}

#slider h2, #slider h3 {
font-size: 40pt;
color:#fff;
font-weight:400;
font-style:italic;
text-align:center;
padding: 0.2em 0 0.2em 0;
text-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
margin:0;
}

#slider h3 {
font-size: 20pt;
background-image: linear-gradient(to right, #232850 0%, #394079 100%);
padding: 10px 20px;
max-width: 700px;
margin: auto;
}

#slider .pfeilicon {
background: url(images/pfeilicon.png) no-repeat;
width:100%;
height:100%;
background-size: auto 40%;
background-position: 0 50%;
padding: 10px 7px 10px 20px;
}

#slider .btn {
font-weight:400;
border-radius: 2px;
color: #fff;
font-size: 16px;
background-image: linear-gradient(to right, #232850 0%, #394079 100%);
padding: 10px 20px 10px 20px;
text-decoration: none;
display:inline-block;
box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.75);
margin:45px 0 0 0;
}

#slider .btn a {
font-weight:400;
color: #fff;
font-size: 16px;
}

#slider .btn:hover {
background-color: #232850;
text-decoration: none;
}

/*Page-Title-Bar (Unterseiten)*/

#page_title_bar{
background-color: #e4e4e4;
background-size: cover;
display:block;
text-align:center;
height:360px;
position:relative;
width:100%;
}

.img_pagetitle {
width:100%;
height:360px;
background:url(images/pagetitlebild.webp);
background-repeat:no-repeat;
background-position: center center;
background-size:cover;
}

/*Content Area */
main {
display:block;
width:100%;
margin:0 auto;
background-color:#fff;
}

.center{
text-align:center;
}

.left{
text-align:left;
}

.right{
text-align:right;
}

.img_privatkunden{
width:100%;
height:240px;
background:url(images/gelaender.webp);
background-repeat:no-repeat;
background-position: center center;
background-size:cover;
position:relative;
}

.img_firmenkunden{
width:100%;
height:240px;
background:url(images/stahlbau.webp);
background-repeat:no-repeat;
background-position: center center;
background-size:cover;
position:relative;
}

.img_industriekunden{
width:100%;
height:240px;
background:url(images/industriekunden.jpg);
background-repeat:no-repeat;
background-position: center center;
background-size:cover;
position:relative;
}

main .btn_gross {
background-image: linear-gradient(to right, #232850 0%, #394079 100%);
padding: 15px 15px 15px 15px;
text-decoration: none;
position:absolute;
right:10px;
bottom:10px;
box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.75);
border-radius: 2px;
}

main .btn_gross a {
line-height:2.2em;
}

main .btn_gross:hover {
background-color: #232850;
text-decoration: none;
}

main .pfeilicon_gross {
background: url(images/pfeilicon.png) no-repeat;
width:100%;
height:100%;
background-size: auto 82%;
background-position: 0 50%;
padding: 15px 15px 15px 15px;
}

/* Footer */
footer {
width:100%;
background: url(images/footer.webp) no-repeat center center;
background-size: cover;
display:block;
text-align:center;
padding: 5em 0;
}

footer h2 {
color:#fff;
text-align:left;
}

footer p{
color:#fff;
padding:0;
margin:1.0em 0em;
text-align:left;
}

footer a{
color:#fff;
text-decoration:underline;
transition:color 0.7s;
margin:0 0 1em 0;
}

footer a:hover{
color:#acb0d2;
}

footer .phoneicon{
background: url(images/phoneicon.png) no-repeat;
width:100%;
height:100%;
background-size: auto 60%;
background-position: 0 50%;
padding: 10px 7px 10px 20px;
}

/*Gridsystem (main/sidebar) für 2-spaltige Unterseiten*/
.columnlayout{
max-width:1000px;
background-color:#fff;
margin: 40px auto 0 auto;
line-height:2.0em;
padding: 20px 50px;
display:flex;
}

.article{
flex:4;
}

.article h1 {
margin:0.3em 0 0.5em -0.05em;
}

.sidebar{
flex:1;
}

/*Gridsystem (spacebetween)*/
.gridrow {
max-width:1000px;
margin: 0 auto;
display: flex;
align-items: strech;
justify-content:space-between;
flex-wrap: wrap;
}

/*1-spaltig*/
.gridrow .col12{
padding:0;
box-sizing:border-box;
flex-basis:100%;
padding: 10px;
margin:0.3em 0 0.3em 0;
}

/*2-spaltig*/
.gridrow .col6{
padding: 10px;
box-sizing:border-box;
flex-basis:48%;
margin:0.3em 0 0.3em 0;
}

/*3-spaltig*/
.gridrow .col4{
padding: 10px;
box-sizing:border-box;
flex-basis:33%;
margin:0.3em 0 0.3em 0;
}

/*4-spaltig*/
.gridrow .col3{
padding: 10px;
box-sizing:border-box;
flex-basis:24%;
margin:0.3em 0 0.3em 0;
}

/*6-spaltig*/
.gridrow .col2{
padding: 10px;
box-sizing:border-box;
flex-basis:14%;
margin:0.3em 0 0.3em 0;
}

/*12-spaltig*/
.gridrow .col1{
padding: 10px;
box-sizing:border-box;
flex-basis:7%;
margin:0.3em 0 0.3em 0;
}


/* Artikelarchiv auflisten */

.news_teaser a, .news_teaser a:hover  {
text-decoration: none
}


/*Mobile Style */

@media screen and (min-width:1048px) {
nav.nav {
display:block !important;
}
}

@media screen and (max-width:1048px) {
header{
display:none;
}

#menubar{
display:block;
width:100%;
margin: 0 auto;
padding: 0;
}

#menubar ul li{
display:block;
}

#menubar a.menubutton{
display:inline-block;
width:18%;
text-align:center;
}

#menubar .logo {
display:inline-block;
width:59%;
margin:15px 0 0 0;
text-align:center;
}

#menubar a.phoneicon {
display:inline-block;
width:18%;
text-align:center;
}

nav {
display:none;
}

nav ul li a{
}

nav ul li {
display:block;
margin:0em 0em 0em 0.5em;
line-height: 3.0em;
text-align:left;
border-bottom: 1px solid #32386b;
}

nav ul {
width:100%;
margin:0 auto;
}

nav .kontakt {
display:none;
}

#slider .wasserzeichen{
display:none;
}

.gridrow {
display: block;
margin: 0 20px;
}

}

@media screen and (max-width:660px) {
.gridrow {
display: block;
margin: 0 20px;
}

.gridrow .col6{
margin:0;
}

.columnlayout{
display: block;
padding: 20px 20px;
}

.bg_gray{
padding:2em 0 2em 0;
}

.bg_white{
padding:2em 0 2em 0;
}

h1{
font-size: 26pt;
hyphens: auto;
}

h2{
font-size: 22pt;
hyphens: auto;
}

.secondnav{
margin: 0 30px 60px 0;
padding: 0 10px 0 0;
text-align:left;
border-left: 1px solid #c8c8c8;
border-right: 0px;
min-height:100px;
}

#slider h1{
font-size: 30pt;
}

#slider h2{
font-size: 24pt;
}

#slider{
height:360px;
}

#slider .img_slider01{
height:360px;
}

/* Formulare Flexbox */
.form-row {
flex-direction: column;
}

/* Mehrspaltige Ausgabe */
.wcol2 {max-width: 95%;}
.wcol3 {max-width: 47%;}
.wcol4 {max-width: 47%;}

form {
margin-bottom: 40px;
}

}

/*Druckvorschau*/

@media print {
body {
background-color: #fff;
color: #000;
font-family: Arial,Helvetica,sans-serif;
font-size: 10pt;
margin: 0;
padding: 0;
}

nav, header, #slider, .secondnav, #page_title_bar, footer{
display: none;
}

h1, h2, p {
text-align:left;
color:#000000;
}

h1{
font-size:16pt;
}

h2{
font-size:14pt;
}

main .btn_gross {
display:none;
}

}
@media screen{input,button,textarea,select{font-family:inherit;line-height:inherit}input{background:inherit;border-bottom:1px dotted #394079;color:inherit;font-size:100%;padding:6px}span.fehlt{color:#c00}.fehler{background-color:hsla(0,90%,70%,.5)}input:invalid{background-color:hsla(0,90%,70%,.5)}.b20{width:20px}.form-row{display:flex;padding-bottom:25px}.form-row label{flex:2}.form-row input{flex:5}.form-row select{flex:5}.form-col{display:flex;flex-direction:column}.btn{border-radius:4px;color:#fff;font-size:100%;min-width:280px;padding:20px}.btn-primary{background-color:#394079;color:#fff}}@media screen and (max-width: 768px){.form-row{flex-direction:column}}