@font-face {font-family: 'Exo';font-style: normal;font-weight: 400;src: url('fonts/exo-v21-latin-regular.woff2') format('woff2');}
@font-face {font-family: 'Exo';font-style: italic;font-weight: 400;src: url('fonts/exo-v21-latin-italic.woff2') format('woff2');}
@font-face {font-family: 'Exo';font-style: normal;font-weight: 500;src: url('fonts/exo-v21-latin-500.woff2') format('woff2');}
@font-face {font-family: 'Exo';font-style: italic;font-weight: 500;src: url('fonts/exo-v21-latin-500italic.woff2') format('woff2');}
@font-face {font-family: 'Exo';font-style: normal;font-weight: 600;src: url('fonts/exo-v21-latin-600.woff2') format('woff2');}
@font-face {font-family: 'Exo';font-style: italic;font-weight: 600;src: url('fonts/exo-v21-latin-600italic.woff2') format('woff2');}
@font-face {font-family: 'Exo';font-style: normal;font-weight: 700;src: url('fonts/exo-v21-latin-700.woff2') format('woff2');}
@font-face {font-family: 'Exo';font-style: italic;font-weight: 700;src: url('fonts/exo-v21-latin-700italic.woff2') format('woff2');}
html {
overflow-y:  scroll;
}
body {
margin:0 0 0 0;
height:100%;
background-color:#646970;
font-family: 'Exo', Tahoma, Geneva, sans-serif;
font-size: 1em;
line-height: 1.4em;
}
/* Kopf */
#kopf {
width: 100%;
position: relative;
}
#kopfbreite {
position:relative;
width: 100%;
}
#kopflogos {
margin:0 auto 0 auto;
width:80%;
display: flex;
flex-wrap: wrap;
align-items: center;
}
#hammlogo {
width: 30%;
height: 100%;
text-align:left;
}
#hammlogo img{
max-width: 350px;
margin: 0 0 0 10px;
}
#servicelogos {
width: 70%;
height: 100%;
text-align:right;
}
#servicelogos img{
margin:5px 10px 0 0;
background: #cf0000;
background-image: linear-gradient(#cf0000 0%, #930000 100%);
border-radius:5px;
box-shadow:#222 0px 0px 8px;
}
#servicelogos p{
color:#FFF;
font-size: 1.2em;
font-weight: 600;
text-shadow:#000 1px 1px 2px;
margin: 5px 10px 5px 10px; 
}
/* Navi */
#navi-mobil{ display:none;}
#navi, #navi-mobil {
z-index: 2;
text-align:center;
position:relative;
margin: 0;
background: #cf0000;
background-image: linear-gradient(#cf0000 0%, #930000 100%);
box-shadow:#222 0px 0px 8px;
text-shadow:#000 1px 1px 2px;
}
#navi .fas{ 
margin-right: 3px;
}
#navi ul{ 
padding: 0;
margin: 0;
}
#navi ul li {
display: inline;
text-align:center;
text-decoration:none;
}
#navi ul li a {
font-weight:700;
font-size: 1.2em;
line-height: 1.6em;
padding: 0 10px 0 10px;
margin: 0 5px 0 5px;
color: #fff;
white-space:nowrap;
}
#navi ul li a:hover,
#navi ul li.active a { 
color: #d7d7d7;
}
#navibox {
display:none;
width:80%;
margin:0 auto 0 auto;
}
#subnavi{
position:relative;
line-height: 1.1em;
background-color:#FFF;
margin:0 10px 0 10px;
padding:15px 25% 0 25%;
box-shadow:#222 0px 0px 8px;
border-radius:0 0 5px 5px;
}
#subnavi ul{ 
list-style:none;
margin:0;
padding:0;
}
#subnavi li { 
padding:0;
margin:0;
display:inline;
float:left;
width:50%;
}
#subnavi ul li ul {
margin: 10px 0 10px 0;
}
#subnavi ul li a {
padding: 0 10px 0 10px;
display:block;
text-transform: uppercase;
text-align:center;
font-weight:bold;
text-decoration:none;
font-size:1em;
}
#subnavi ul li a:hover, #subnavi ul li.rex-active a, #subnavi ul li.rex-current a { 
color:#b30f02;
}
#subnavi li li {
float:none;
}
#subnavi ul.rex-navi2 li a,
#subnavi ul.rex-navi2 rex-normal li a {
color: #555;
font-size:1em;
font-weight:500;
text-transform: none;
padding:4px 10px 4px 10px;
}
#subnavi ul.rex-navi2 li a:hover, #subnavi ul.rex-navi2 li.rex-active a, #subnavi ul.rex-navi2 li.rex-current a { 
color:#b30f02;
}
/* Allgemein*/
#website {
margin:20px auto 0 auto;
width:80%;
color:#000;
text-align:left;
padding:0px;
}
#main,
#main-transparent .textblock {
width:auto;
padding: 0 0 5px 0;
margin: 20px 10px 10px 10px;
background-color:#FFF;
box-shadow:#333 0px 0px 5px;
border-radius:5px;
}
#main::after, #subnavi::after {
content: "";
clear: both;
display: table;
}
#kontaktspalte {
width:auto;
}
/* Textformate */
p {
margin:15px;
}
figure {
margin-inline-start: 15px;
margin-inline-end: 15px;
}
strong {
font-weight:600;
}
a {
color: #666;
text-decoration:none;
font-weight:600;
}
a:hover, #fusszeile a:hover {
color: #b30f02;
}
:link,:visited {
text-decoration:none;
}
#main h1, #main-transparent .textblock h1, .box h1, .team h2, .kontaktbox h1 {
margin:0;
font-size: 1.2em;
text-align:center;
color:#fff;
display:block;
padding:5px 10px 5px 10px;
font-weight: 700;
background: #cf0000;
background-image: linear-gradient(#cf0000 0%, #930000 100%);
border-radius:5px 5px 0 0;
text-shadow:#000 1px 1px 2px;
}
#main h2, #main-transparent .textblock h2, #main-transparent .box h2 {
color: #ab2c25;
font-size:1.2em;
line-height:1.4em;
font-weight: 600;
margin: 20px 15px 10px 15px;
}
#main h3, #main-transparent .textblock h3, #main-transparent .box h3 {
color: #ab2c25;
font-size:1.1em;
line-height:1.2em;
font-weight: 600;
margin: 30px 15px 15px 15px;
}
hr {
margin: 15px 15px 10px 15px;
border: 0;
border-top: 2px solid #bb0427;
}
#kontaktspalte img{
margin-top: 5px;
}
#main ul {
line-height:1.4em;
margin:8px 10px 8px 40px;
padding:0px;
list-style-type: disc;	
}
#main ol {
line-height:1.4em;
margin:8px 10px 8px 40px;
padding:0px;
list-style-type: decimal;
}
#main li {
margin: 15px 0 15px 0;
}
table { width: 100%; border:0; padding:0px; border-spacing:0px; }
tr { border:none; padding:0px; margin:0px; }
td { border:none;  padding:2px 15px 2px 15px; margin:0px; vertical-align:top; border-spacing:0px;}
table p {margin: 2px 0px 2px 0px;
}
.clear, .clear2 {
clear:both;
}
#fusszeile {
text-align:center;
color: #fff;
text-shadow:#222 2px 2px 3px;
}
#fusszeile p {
margin:0 0 10px 0;
}
#fusszeile a{
color: #fff;
font-weight:600;
}
#fusszeile p img {
margin: 10px;
vertical-align: middle;
}
/* Textboxen */
#main-transparent, #kontaktspalte {
display: flex;
flex-wrap: wrap;
}
.boxwrap {
margin-bottom:20px;
}
.breit {
width: 100%;
}
.halb {
width: 50%;
}
.drittel {
width: calc(100%/3);
}
.viertel {
width: calc(100%/3);
}
.box {
position: relative;
width:auto;
text-align:center;
margin: 0 10px 0 10px;
background-color: #fff;
border-radius:5px;
box-shadow:#222 0px 0px 8px;
height: 100%;
}
.boxbild {line-height: 0;}
.box .textfeld {
width: 100%;
line-height: 1.4em;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.9);
}
.box ul {
text-align:left;
margin:2px 0 2px 25px;
}
.boxbild img{
padding: 0;
margin:0;
line-height:0;
width:100%;
}
.mehr a{
padding: 5px;
text-align:center;
font-size:0.9em;
font-weight:700;
color: #fff;
text-shadow:#000 1px 1px 2px;
background: #cf0000;
background-image: linear-gradient(#cf0000 0%, #930000 100%);
border-radius: 5px;
}
.mehr a:hover {
color:#d7d7d7;
}
/* Bilder */
img {
max-width: 100%;
height: auto;
border:0;
}
.picgalerie {
line-height:0;
}

.picgalerie a:hover img {
outline: 5px solid #bb0427;
outline-offset: -5px;
}
.einzelbild {
text-align:center;
}
.pleft,.pright {
max-width: 50%;
}
.pleft {
float: left;
margin: 0 10px 8px 0;
}
.pright {
float: right;
margin: 0 0 8px 10px;
}
.pnormal {
clear: both;
margin-bottom: 5px;
}
#matomo-opt-out {
padding: 15px;
}
@media only screen and (min-width:1800px) {
body {
font-size: 1.1em;
}
#website, #kopflogos, #navibox {
width:70%;
max-width: 2000px;
}
.halb {
width: 50%;
}
.drittel{
width: calc(100%/3);
}
.viertel {
width: 25%;
}
.picgalerie img{
width: 25%;
}
}
@media only screen and (min-width:500px) and (max-width:1200px) {
body {
font-size: 0.9em;
}
#website, #kopflogos, #navibox {
width:100%;
max-width: 2000px;
}
}
@media only screen and (min-width:1201px) and (max-width:1799px) {
.picgalerie img{
width: calc(100%/3);
}
}
@media only screen and (min-width:900px) and (max-width:1200px) {
.box3 {
width: calc(100%/3);
}
.picgalerie img{
width: calc(100%/3);
}
#hammlogo img{
max-width: 100%;
margin: 5px 10px 5px 10px;
}
}
@media only screen and (min-width:600px) and (max-width:899.99px) {
#hammlogo img{
max-width: 100%;
margin: 5px 10px 5px 10px;
}
#servicelogos img{
margin:5px 10px 0 0;
width: 15%;
}
#servicelogos p{
font-size:0.9em;
}

#navi ul li a {
padding: 0 8px 0 8px;
}
#subnavi{
padding:15px 0 0 0%;
}
.halb, .drittel, .viertel {
width: 100%;
}
.picgalerie img{
width: 50%;
}
}
@media only screen and (min-width:1px) and (max-width:599px) {
#hammlogo {
width: 100%;
text-align:center;
}
#hammlogo img{
width: 70%;
margin: 10px 10px 2px 10px;
}
#servicelogos {
width: 100%;
text-align:center;
}
#servicelogos img{
margin:0 5px 2px 5px;
width: 15%;
}
#servicelogos p{
font-size: 0.9em;
margin: 0px 10px 5px 10px; 
}
.breit, .halb, .drittel, .viertel, .picgalerie img {
width:100%;
}
#navi{ display:none;}
#navi-mobil {
display:inherit;
text-align:left;
padding:5px 15px 5px 15px;
}
#navi-mobil a {
color: #fff;
font-size: 1.1em;
font-weight:700;
}
#navibox {
position:absolute;
display:none;
width: auto;
z-index: 2;
width:auto;
}
#subnavi {
padding:0;
}
#subnavi ul {
margin:0 0 5px 0;
}
#subnavi li { 
padding:0;
margin:0;
display:block;
float:none;
width:auto;
}
#subnavi ul li a {
display: block;
text-align:left;
float: none;
padding:12px 10px 5px 10px;
}
#subnavi ul li ul {
margin:5px 0 0 0;
}
#subnavi ul.rex-navi2 li a,
#subnavi ul.rex-navi2 rex-normal li a {
background-color:#eee;
border-bottom: 2px solid #FFF;
padding:8px 10px 8px 10px;
}
}
@media only screen and (min-width:1px) and (max-width:900px) {
body {
font-size: 1em;
}
#website, #kopflogos {
width:100%;
max-width: none;
}
.leistungen {
width: 20%;
padding:0;
float:left;
margin:0;
}
.leistungen img{
width: auto;
margin:5px 0 10px 0;
}
.clear2 {
display:none;
}
#main, #main-transparent .textblock {
width: auto;
margin-top:0;
}
#footer {
float:none;
text-align:center;
width:100%;
}
.sbox-wrap {
width:100%;
float:none;
}
.pleft,
.pright  {
float: none;
margin: 0 0 5px 0;
max-width:none;
width: 100%;
}
}