/* =========================================================
Störk Metallbearbeitung GmbH
Custom page styles
========================================================= */

* {
  box-sizing: border-box;
  }

html,
body {
margin: 0;
padding: 0;
}

body {
background: #ffffff;
color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.6;
}

/* =========================================================
BACKGROUND
========================================================= */

.background_image {
position: fixed;
z-index: -1;
inset: 0;
background: #f2f2f2;
}

/* =========================================================
HEADER
========================================================= */

.oben {
width: 100%;
background: #ffffff;
border-bottom: 1px solid #d8d8d8;
}

.header {
width: 100%;
}

.header_padding {
width: 100%;
max-width: 1180px;
min-height: 125px;
margin: 0 auto;
padding: 20px 30px;

```
display: flex;
align-items: center;
justify-content: space-between;
gap: 35px;
```

}

.logo {
flex: 0 0 auto;
}

.logo a {
display: block;
line-height: 0;
}

.logo img {
display: block;
max-width: 260px;
width: auto;
height: auto;
}

/* =========================================================
DESKTOP NAVIGATION
========================================================= */

.navi1 {
flex: 1 1 auto;
}

.navi1 ul {
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;

```
margin: 0;
padding: 0;
list-style: none;
```

}

.navi1 li {
margin: 0;
padding: 0;
}

.navi1 a {
display: block;
padding: 12px 14px;

```
color: #333333;
text-decoration: none;
font-size: 14px;
font-weight: 500;
line-height: 1.2;

border-bottom: 3px solid transparent;

transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
```

}

.navi1 a:hover {
color: #b40000;
}

.navi1 a.active {
color: #b40000;
border-bottom-color: #b40000;
}

/* =========================================================
SOCIAL MEDIA
========================================================= */

.socialmedia {
flex: 0 0 auto;
}

/* =========================================================
MOBILE NAVIGATION
========================================================= */

.mobilnavi {
display: none;
}

/* =========================================================
MAIN PAGE
========================================================= */

.seite {
width: 100%;
max-width: 1180px;
margin: 0 auto;
padding: 45px 30px 70px;
}

.content.startseite {
position: relative;
width: 100%;
}

/* =========================================================
PAGE TITLE
========================================================= */

.ueberschrift {
width: 100%;
margin-bottom: 40px;
padding: 30px 0;

```
border-bottom: 1px solid #d5d5d5;
```

}

.ueberschrift h1 {
margin: 0;

```
color: #333333;
font-size: 52px;
font-weight: 300;
line-height: 1.05;
letter-spacing: -1px;
```

}

.ueberschrift h1 b {
color: #a90000;
font-weight: 700;
}

/* =========================================================
TWO-COLUMN CONTENT
========================================================= */

.content.startseite > .left {
float: left;
width: 68%;
padding-right: 45px;
}

.content.startseite > .right {
float: right;
width: 32%;
}

/* =========================================================
LEFT CONTENT
========================================================= */

.content_normal {
width: 100%;
background: #ffffff;
border: 1px solid #e0e0e0;
}

.content_normal .content_padding {
padding: 35px 40px;
}

.content_normal h1 {
margin: 0 0 25px;

```
color: #333333;
font-size: 28px;
font-weight: 400;
line-height: 1.3;
```

}

.content_normal h1 .break {
display: inline;
}

.content_normal p {
margin: 0 0 18px;

```
color: #555555;
font-size: 17px;
line-height: 1.75;
```

}

/* =========================================================
RIGHT CONTACT BOX
========================================================= */

.content_right {
width: 100%;
background: #eeeeee;
border-left: 5px solid #a90000;
}

.content_right .content_padding {
padding: 28px 30px;
}

.content_right p {
margin: 0 0 25px;

```
color: #444444;
font-size: 16px;
line-height: 1.7;
```

}

.content_right p:last-child {
margin-bottom: 0;
}

.content_right b {
color: #333333;
font-weight: 700;
}

/* =========================================================
CLEAR
========================================================= */

.clear {
clear: both;
height: 0;
margin: 0;
padding: 0;
}

/* =========================================================
GENERAL TYPOGRAPHY
========================================================= */

.seite a {
color: #a90000;
}

.seite a:hover {
color: #700000;
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 950px) {

```
.header_padding {
    padding-left: 20px;
    padding-right: 20px;
    gap: 20px;
}

.logo img {
    max-width: 220px;
}

.navi1 a {
    padding: 9px 8px;
    font-size: 13px;
}

.seite {
    padding-left: 20px;
    padding-right: 20px;
}

.ueberschrift h1 {
    font-size: 44px;
}

.content.startseite > .left {
    width: 64%;
    padding-right: 30px;
}

.content.startseite > .right {
    width: 36%;
}

.content_normal .content_padding {
    padding: 30px;
}

.content_normal h1 {
    font-size: 25px;
}

.content_normal p {
    font-size: 16px;
}
```

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 700px) {

```
body {
    font-size: 15px;
}

/* Header */

.header_padding {
    min-height: 80px;
    padding: 15px 20px;

    justify-content: center;
}

.logo {
    width: 100%;
    text-align: center;
}

.logo img {
    max-width: 220px;
    max-height: 60px;
    margin: 0 auto;
}

/* Hide desktop navigation */

.navi1,
.socialmedia {
    display: none;
}

/* Mobile navigation */

.mobilnavi {
    display: block;
    position: relative;
    width: 100%;
    background: #333333;
}

.mobilnavi-open {
    position: relative;

    display: block;
    width: 100%;
    height: 50px;

    margin: 0;
    padding: 0;

    border: 0;
    background: #333333;

    cursor: pointer;
}

.mobilnavi-open span,
.mobilnavi-open span::before,
.mobilnavi-open span::after {
    position: absolute;
    left: 50%;

    display: block;
    width: 25px;
    height: 2px;

    background: #ffffff;

    transform: translateX(-50%);
    transition: all 0.2s ease;
}

.mobilnavi-open span {
    top: 24px;
}

.mobilnavi-open span::before,
.mobilnavi-open span::after {
    content: "";
    left: 0;
    transform: none;
}

.mobilnavi-open span::before {
    top: -8px;
}

.mobilnavi-open span::after {
    top: 8px;
}

.mobilnavi-root {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobilnavi-root li {
    position: relative;
    margin: 0;
    padding: 0;

    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.mobilnavi-root li a {
    display: block;

    padding: 14px 45px 14px 20px;

    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    line-height: 1.3;
}

.mobilnavi-root li a.active {
    background: #a90000;
}

.mobilnavi-root li a:hover {
    background: #444444;
}

.mobilnavi-root button.expand {
    display: none;
}

/* Main */

.seite {
    width: 100%;
    padding: 25px 15px 45px;
}

.ueberschrift {
    margin-bottom: 25px;
    padding: 20px 0;
}

.ueberschrift h1 {
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

/* Columns */

.content.startseite > .left,
.content.startseite > .right {
    float: none;
    width: 100%;
    padding: 0;
}

.content.startseite > .left {
    margin-bottom: 25px;
}

.content_normal {
    border: 1px solid #e0e0e0;
}

.content_normal .content_padding {
    padding: 25px 20px;
}

.content_normal h1 {
    font-size: 23px;
    line-height: 1.35;
}

.content_normal h1 .break {
    display: block;
}

.content_normal p {
    font-size: 15px;
    line-height: 1.7;
}

.content_right .content_padding {
    padding: 22px 20px;
}

.content_right p {
    font-size: 15px;
}
```

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

```
.header_padding {
    min-height: 70px;
    padding: 10px 15px;
}

.logo img {
    max-width: 190px;
    max-height: 50px;
}

.ueberschrift {
    padding: 15px 0;
}

.ueberschrift h1 {
    font-size: 30px;
}

.content_normal .content_padding {
    padding: 20px 16px;
}

.content_normal h1 {
    font-size: 21px;
}

.content_normal p {
    font-size: 14px;
}

.content_right .content_padding {
    padding: 20px 16px;
}
```

}