/* noto-sans-regular - latin */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
src: url('https://www.renner-medien.de/webfonts/noto-sans-v7-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Noto Sans'), local('NotoSans'),
url('https://www.renner-medien.de/webfonts/noto-sans-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://www.renner-medien.de/webfonts/noto-sans-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('https://www.renner-medien.de/webfonts/noto-sans-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
url('https://www.renner-medien.de/webfonts/noto-sans-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://www.renner-medien.de/webfonts/noto-sans-v7-latin-regular.svg#NotoSans') format('svg'); /* Legacy iOS */
}

html {
}

body {
margin: 0;
padding: 0;
font-family: 'Noto Sans', Arial, Helvetica, Sans-Serif;
font-size: 100%;
line-height: 1.5em;
text-align: center;
color: #3C3B3E;
background: #FFFFFF;
}

h1 {
font-size: 4.5vw;
line-height: 1.3em;
font-weight: bold;
margin: 0;
padding: 0;
margin-bottom: 20px;
text-align: center;
color: #3C3B3E;
letter-spacing: -0.1rem;
}

h1 br {
display: none;
}

h2, h3 {
font-size: 170%;
font-weight: normal;
line-height: 1.3em;
margin: 0;
padding: 0;
margin-bottom: 30px;
text-align: center;
color: #E72300;
}

h2.hltext {
font-size: 100%;
font-weight: normal;
line-height: 1.6em;
margin: 0;
padding: 0;
color: #3C3B3E;
}

h2.hlbg, h3.hlbg {
color: #FFFFFF;
}

h3.hlkundenstimme {
font-size: 100%;
font-weight: bold;
line-height: 1.7em;
padding: 0;
margin: 0;
margin-bottom: 10px;
}

a {
color: #3C3B3E;
text-decoration: underline;
}

a:hover {
text-decoration: none;
}

input, select {
font-family: 'Noto Sans', Arial, Helvetica, Sans-Serif;
font-size: 100%;
color: #3C3B3E;
border: 1px solid #7E7D81;
background-color: #FFFFFF;
box-sizing: border-box;
padding: 10px 2%;
width: 100%;
margin-bottom: 15px;
transition: all 200ms ease-out;
-webkit-transition: all 200ms ease-out;
}

input[type='checkbox'] {
padding: 0;
margin: 0;
width: 20px;
cursor: pointer;
border: 1px solid #7E7D81;
}

input:hover, select:hover, input[type='checkbox']:hover {
border: 1px solid #E72300;
}

.button {
font-family: 'Noto Sans', Arial, Helvetica, Sans-Serif;
text-align: center;
font-size: 100%;
line-height: 1em;
box-sizing: border-box;
padding: 10px 2%;
width: 100%;
cursor: pointer;
margin-top: 25px;
border: 1px solid #E41F13;
background-color: #E41F13;
color: #FFFFFF;
font-weight: bold;
padding: 12px 45px;
transition: all 0.3s ease;
}

.button:hover {
-moz-transform: scale(1.03);
-webkit-transform: scale(1.03);
transform: scale(1.03);
}

img {
border: none;
}

.imgsize {
max-width: 100%;
height: auto;
}

.imgsizemax {
width: 100%;
height: auto;
}

ul.liste {
list-style-type: none;
list-style-position: outside;
padding: 0;
margin-left: 28px;
text-align: left;
font-weight: bold;
}

ul.liste li {
padding: 10px;
background-image: linear-gradient(to right, #333 20%, rgba(255, 255, 255, 0) 20%);
background-position: top;
background-size: 10px 1px;
background-repeat: repeat-x;
}

ul.liste li:first-child {
background-image: none;
}

ul.liste li i {
color: #E41F13;
}

.hidden, .formsubject, .wehinweis {
display: none;
}

/**************************************************************************************/

#container {
margin: 0em auto;
width: 90%;
text-align: center;
}

article {
margin-top: 20px;
}

/**************************************************************************************/

header {
background: #FFFFFF;
padding-top: 25px;
}

header a {
pointer-events: none;
cursor: default;
}

#logo img {
-moz-transform: scale(0.8);
-webkit-transform: scale(0.8);
transform: scale(0.8);
}

#headerkontakt {
display: none;
}

/**************************************************************************************/

.margtop {
margin-top: 50px;
}

.margtop2 {
margin-top: 80px;
}

#btn {
margin-top: 50px;
text-align: center;
}

.btn {
display: inline-block;
border: 1px solid #E41F13;
background-color: #E41F13;
color: #FFFFFF;
font-weight: bold;
padding: 12px 45px;
text-decoration: none;
transition: all 0.3s ease;
}

.btn:hover {
-moz-transform: scale(1.03);
-webkit-transform: scale(1.03);
transform: scale(1.03);
}

.btn i {
margin-right: 8px;
}

#icon {
font-size: 120%;
margin-bottom: 10px;
}

#bg {
color: #FFFFFF;
background-color: #3C3B3E;
padding: 50px 0;
}

#bg .btn {
border: 1px solid #FFFFFF;
background-color: #FFFFFF;
color: #3C3B3E;
}

#tabzweier, #tabdreier {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
gap: 30px;
}

/**************************************************************************************/

#steps {
display: flex;
align-items: center;
padding: 0 40px;
margin-top: 60px;
}

#stepeinzel {
display: flex;
align-items: center;
flex-direction: column;
position: relative;
z-index: 1;
}

#stepicon {
height: 50px;
width: 50px;
border-radius: 50%;
background-color: #7E7D81;
font-size: 10px;
text-align: center;
color: #FFFFFF;
position: relative;
line-height: 50px;
font-size: 20px;
}

#stepeinzel p {
text-align: center;
position: absolute;
bottom: -60px;
color: #7E7D81;
}

#stepeinzel .step2 p, #stepeinzel .step3 p {
left: 50%;
transform: translateX(-50%);
}

#stepline {
width: 100%;
height: 2px;
background-color: #7E7D81;
flex: 1;
}

.stepaktiv #stepicon, #stepline.stepaktiv {
background-color: #E72300;
}

#stepeinzel p.stepaktiv {
color: #E72300;
}

/**************************************************************************************/

footer {
font-size: 80%;
margin-top: 60px;
padding: 60px 0;
background-color: #F7F8F8;
width: 100%;
border-top: 1px solid #E4E5E6;
}

footer a {
text-decoration: none;
opacity: 0.5;
transition: all 150ms ease-out;
-webkit-transition: all 150ms ease-out;
}

footer a:hover {
opacity: 1.0;
}

#footerkontakt {
display: none;
margin-bottom: 15px;
line-height: 1.5em;
}

#footerkontakt a {
opacity: 1.0;
}

#footerkontakt i {
padding-right: 5px;
}

#footersocials {
font-size: 230%;
margin-bottom: 10px;
}

#footersocials i {
padding: 0 3px;
}

#footerlinks a {
padding: 0 7px;
}

#footerlinks a:nth-child(1), #footerlinks a:nth-child(2) {
display: none;
}

/****************************************************************************************************************************************************************************/

@media (min-width : 1000px) {
/**************************************************************************************/

#tabzweier {
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}

#tabzweier > div:nth-child(2n + 1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
}

#tabzweier > div:nth-child(2n + 2) {
-ms-grid-column: 2;
-ms-grid-row: 1;
}

#tabzweier {
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
gap: 60px;
}

#tabzweier > div:nth-child(2n + 1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
}

#tabzweier > div:nth-child(2n + 2) {
-ms-grid-column: 2;
-ms-grid-row: 1;
}

#tabdreier {
-ms-grid-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
gap: 30px;
}

#tabdreier > div:nth-child(3n + 1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
}

#tabdreier > div:nth-child(3n + 2) {
-ms-grid-column: 2;
-ms-grid-row: 1;
}

#tabdreier > div:nth-child(3n + 3) {
-ms-grid-column: 3;
-ms-grid-row: 1;
}

/**************************************************************************************/
}

@media (min-width : 1200px) {
/**************************************************************************************/

body {
font-size: 110%;
line-height: 1.7em;
}

h1 {
font-size: 2.2vw;
line-height: 1.4em;
}

h1 br {
display: block;
}

#container {
width: 1200px;
}

/**************************************************************************************/
}