﻿/*Dev. M. Gerska*/ 
/*style.css*/
@font-face {
    font-family: 'Montserrat-Regular';
    src: url('font/montserrat-v26-latin-regular.woff2') format('woff2'),
         url('font/Montserrat-Regular.woff') format('woff');
    font-display: swap;
}
body {
 font-family: 'Montserrat-Regular', sans-serif;
 margin: 0;
 padding: 0;
 background-color: #fff;
 display: flex;
 flex-direction: column;
 min-height: 100vh;
 justify-content: center;
}
::selection {
 color: #fff; 
 background-color: #256623;
}
h1 {
 margin-top: 26px;
 font-size: 30px;
 color: #fff;
 font-weight: bold;
 text-shadow: -2px 2px 4px rgba(0, 0, 0, 0.5);
}
h2 {
 color: #3d3846;
 font-weight: 400;
 font-size: 26px;
}
#h2-rechts {
 margin-left: 50px;
}
h3 {
 color: #3d3846;
 font-weight: 600;
 font-size: 23px;
}
h4 {
 font-family: 'Montserrat-Light.ttf', sans-serif;
 color: #3d3846;
 font-weight: normal;
 font-size: 22px;
}
.icon-call-hd {
 width: 32px;
 height: 32px;
}
.subtitel-hd {
 margin-top: 20px;
 margin-bottom: 20px;
 color: #fff;
 font-weight: bold;
 font-size: 24px;
 text-shadow: -2px 2px 4px rgba(0, 0, 0, 0.5);
}
.sec-div {
 margin: 0;
 padding: 0;
 width: 100%;
}
/*Header-Style*/
header {
 color: #fff;
 text-align: center;
 padding: 1em 0;
 background-image: url('picture/webp/header.webp');
 background-size: cover;
 background-position: center;
}
/*Menue-Style*/
nav {
 background-color: #1f511e;
 color: #fff;
 font-size: 24px;
 text-align: center;
 padding: 0.5em 0;
}
nav a {
 text-decoration: none;
 color: #fff;
 margin-left: 10px;
 margin-right: 10px;
}
nav a:hover {
    color: #256623;
    font-weight: bold;
}
nav a.active {
    color: #4caf50;
    /*font-weight: bold;*/
    border-top: 1px dotted #4caf50;
    border-bottom: 1px dotted #4caf50;
}
.menu-container {
    padding: 0px;
    position: relative;
    z-index: 999;
}

/*Footer-Style*/
footer {
 background-color: #256623;
 color: #fff;
 text-align: center;
 padding: 1em 0;
}
/*Sektionen */
.text-und-bild {
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
 padding: 20px;
 max-width: 1200px;
 margin: 0 auto;
 margin-top: 20px;
}
/*Style TXT-links*/ 
.text {
 flex: 1;
 max-width: 100%;
 margin-right: 20px;
 align-items: center;
 font-size: 21px;
}
.section-ueb {
 width: 100%;
 text-align: center;
 padding: 50px 0;
 color: #3d3846;
}
#ueb {
 align-items: center;
 font-size: 76px;
}
#text-ueb {
 align-items: center;
 font-size: 42px;
}
#text-ueb-u {
 align-items: center;
 font-size: 32px;
}
#text-ueb-u2 {
 align-items: center;
 font-size: 38px;
}
/*Style TXT-rechts*/ 
.text2 {
 flex: 1;
 max-width: 100%;
 margin-left: 50px;
 align-items: center;
 font-size: 21px;
}
/*Style TXT-Kontakt*/
.text-kon-top {
 flex: 1;
 max-width: 100%;
 margin-right: 30px;
 align-items: center;
 font-size: 24px;
}
#text-bot {
 margin-top: 50px;
}
/*Style Container Text & Bild*/
.container-text-r {
 flex: 1;
 max-width: 100%;
}
.container-text-l {
 flex: 1;
 max-width: 100%;
}
.container-bild-r {
 flex: 1;
 max-width: 100%;
}
.container-bild-l {
 flex: 1;
 max-width: 100%;
}
/*Zeilenabstand für die gesamte Liste*/
.liste {
 line-height: 2.0;
 margin-left: 20px;
 padding: 0px;
}
/*Zeilenabstand für Listenelemente*/
.liste li {
 line-height: inherit;
 margin-top: 0;
}
/*Style TXT Impressum & Datenschutz*/ 
.textimp {
 flex: 1;
 max-width: 100%;
 margin-left: 15%;
 margin-right: 15%;
 align-items: center;
 font-size: 18px;
}	
/*Bild rechts*/
.bild {
 flex: 1;
 max-width: 100%;
}
.bild img {
 max-width: 100%;
 max-height: 100%;
 margin-bottom: 20px;
 margin-top: 20px;
 margin-left: 50px;
 margin-right: 20px;
 box-shadow: 10px 20px 15px silver;
 border-radius: 20px;
}
/*Bild Links*/
.bild2 {
 flex: 1;
 max-width: 100%;
}
.bild2 img {
 max-width: 100%;
 max-width: 100%;
 margin-bottom: 20px;
 margin-top: 20px;
 box-shadow: 10px 20px 15px silver;
 border-radius: 20px;
}
.bild-404 {
    flex: 1;
   }
   .bild-404 img {
    max-width: 70%;
    max-height: 70%;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 50px;
    margin-right: 20px;
    box-shadow: 10px 20px 15px silver;
    border-radius: 20px;
   }
.container {
 display: inline;
 flex-direction: column;
 margin: 0 auto;
}
/*Style Links*/ 
#ou-cw-hd {
 color: #ffffff;
 text-decoration: none;
 display: inline-block;
 margin-left: 10px;
 font-size: 28px;
 text-shadow: -2px 2px 4px rgba(0, 0, 0, 0.5);
}
#ou-cw-fd {
 color: #ffffff;
 text-decoration: none;
 display: inline-block;
 margin-left: 10px;
 font-size: 26px;
}
#ou-cw-fd-call {
 color: #ffffff;
 text-decoration: none;
 display: inline-block;
 margin-left: 10px;
 font-size: 26px;
}
#ou-cw-fd-mail {
 color: #ffffff;
 text-decoration: none;
 display: inline-block;
 margin-left: 10px;
 font-size: 26px;
}
#con {
 color: #000;
 text-decoration: none;
 display: inline-block;
 margin-left: 10px;
 font-size: 24px;
}
.farbiger-link {
 color: #4caf50;
 text-decoration: none;
}
.farbiger-link:hover {
 color: #256623; 
}
.nur-hover:hover {
 color: #ae63b1;
}
footer nav {
margin-top: 10px;
}
span {
 color: s#3d3846;
}
/*Scroll to top */
#scroll-to-top {
 display: none;
 position: fixed;
 bottom: 20px;
 right: 20px;
 background-color: #1f511e80;
 color: #fff;
 border: none;
 border-radius: 5px;
 padding: 10px 20px;
 cursor: pointer;
}
#scroll-to-top:hover {
 background-color: #4caf5080;
}
.umrahmtes-paragraph {
 border-top: 1px dotted white;
 border-bottom: 1px dotted white;
 padding: 10px;
 border-radius: 0px;
 color: white;
 font-size: 26px;
 box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); 
}
.margin-jubi {
 margin-bottom: 10px;
}
.margin-copyright {
 margin-top: 10px;
}
.con {
 margin-left: 0px;
}
.scroll-line {
    position: fixed;
    top: 0;
    left: 0;
    height: 5px;
    background: linear-gradient(to right, #256623, #3d8e3d);
    transition: width 0.3s ease;
    z-index: 9999;
}
/*DSGVO Buttons*/
.button-ack {
    display: inline-block;
    padding: 5px 10px;
    font-size: 24px;
    font-weight: 400;
    text-decoration: none;
    color: #fff;
    background-color: #0374c4;
    border-radius: .5rem;
    border: 1px solid #fff;
    transition: box-shadow 0.3s, border 0.3s;
}

.button-ack:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    border: 1px solid #256623;
}

.button-no {
    display: inline-block;
    padding: 5px 10px;
    font-size: 24px;
    font-weight: 400;
    text-decoration: none;
    color: #fff;
    background-color: #FF4500;
    border-radius: .5rem;
    border: 1px solid #fff;
    transition: box-shadow 0.3s, border 0.3s;
}

.button-no:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    border: 1px solid #256623;
}

/*Style change to mobile */ 
/*Alte Mobiltelefone */
@media only screen and (max-width: 359px) {
    h1 {
    font-size: 22px;
    }
    h2 {
    font-size: 20px;
    }
    #h2-rechts {
    margin-left: 50px;
    }
    h3 {
    color: #3d3846;
    font-weight: 600;
    font-size: 18px;
    }	
    p {
    font-size: 12px;	
    }	
    .subtitel-hd {
    font-size: 18px;
    }
    #ou-cw-hd {
    font-size: 18px;
    }
    #ou-cw-fd-call {
    font-size: 18px;
    }
    #ou-cw-fd-mail {
    font-size: 18px;
    }
    nav {
    flex-direction: column;
    font-size: 16px;
    }
    .text-und-bild {
    flex-direction: column;
    }
    .container-text-r {
    order: 1;
    }
    .container-bild-l {
    order: 2;
    } 
    .text2 {
    margin-left: 0%;
    } 
    .bild2 img {
    margin-left: 0%;
    }
    .text {
    margin: 0 auto;
    }
    .bild img {
    margin-left: 0px;
    }
    #h2-rechts {
    margin-left: 0px;
    }
    .umrahmtes-paragraph {
    font-size: 18px;
    }
    .section-ueb {
        width: 100%;
        text-align: center;
        padding: 50px 0;
        color: #3d3846;
    }
    #ueb {
        align-items: center;
        font-size: 76px;
    }
    #text-ueb {
        align-items: center;
        font-size: 42px;
    }
    #text-ueb-u {
        align-items: center;
        font-size: 32px;
    }
    #text-ueb-u2 {
        align-items: center;
        font-size: 38px;
    }
    .button-ack {
        font-size: 18px;
    }
    .button-no {
        font-size: 18px;
    }
    .textimp {
        flex: 1;
        margin-left: 5%;
        margin-right: 5%;
        font-size: 16px;
    }
}
/*iPhone XR bis iPhone 14 max*/
@media only screen and (min-width: 360px) and (max-width: 480px) {
    h1 {
    font-size: 26px;
    }
    h2 {
    font-size: 22px;
    } 	
    #h2-rechts {
    margin-left: 50px;
    }	
    h3 {
    font-weight: 600;
    font-size: 20px;
    }
    p {
    font-size: 18px;	
    }	
    .subtitel-hd {
    font-size: 24px;
    }
    #ou-cw-hd {
    font-size: 24px;
    }
    #ou-cw-fd-call {
    font-size: 24px;
    }
    #ou-cw-fd-mail {
    font-size: 24px;
    }	
    .margin-jubi {
    margin-bottom: 10px;
    }	
    nav {
    flex-direction: column;
    font-size: 16px;
    }	
    .text-und-bild {
    flex-direction: column;
    }
    .container-text-r {
    order: 1;
    }
    .container-bild-l {
    order: 2;
    } 
    .text2 {
    margin-left: 0%;
    }  
    .bild2 img {
    margin-left: 0%;
    }
    .text {
    margin: 0 auto;
    }
    .bild img {
    margin-left: 0px;
    }	
    #h2-rechts {
    margin-left: 0px;
    }
    .umrahmtes-paragraph {
    font-size: 16px;
    margin-bottom: 20px;
    }
    .section-ueb {
        width: 100%;
        text-align: center;
        padding: 50px 0;
        color: #3d3846;
    }
    #ueb {
        align-items: center;
        font-size: 64px;
    }
    #text-ueb {
        align-items: center;
        font-size: 24px;
        margin-left: 20px;
        margin-right: 20px;
    }
    #text-ueb-u {
        align-items: center;
        font-size: 24px;
        margin-left: 20px;
        margin-right: 20px;
    }
    #text-ueb-u2 {
        align-items: center;
        font-size: 32px;
    }
    .button-ack {
        font-size: 18px;
    }
    .button-no {
        font-size: 18px;
    }
    .textimp {
        flex: 1;
        margin-left: 5%;
        margin-right: 5%;
        font-size: 16px;
    }
}
/*Stile für mittlere Bildschirme (Tablets)*/
@media only screen and (min-width: 481px) and (max-width: 768px) {
    h1 {
    font-size: 26px;
    }
    h2 {
    font-size: 24px;
    }
    #h2-rechts {
    margin-left: 50px;
    }
    h3 {
    font-size: 20px;
    }
    .subtitel-hd {
    font-size: 24px;
    }
    #ou-cw-hd {
    font-size: 24px;
    }
    #ou-cw-fd-call {
    font-size: 24px;
    }
    #ou-cw-fd-mail {
    font-size: 24px;
    }
    nav {
    flex-direction: column;
    font-size: 20px;
    text-align: center;
    }	
    .text-und-bild {
    flex-direction: column;
    }
    .container-text-r {
    order: 1;
    }
    .container-bild-l {
    order: 2;
    } 
    .text2 {
    margin-left: 0%;
    } 
    .bild2 img {
    margin-left: 0%;
    }
    .text {
    margin: 0 auto;
    }
    .bild img {
    margin-left: 0px;
    }
    #h2-rechts {
    margin-left: 0px;
    }
    .umrahmtes-paragraph {
    font-size: 20px;
    }
    .section-ueb {
        width: 100%;
        text-align: center;
        padding: 50px 0;
        color: #3d3846;
    }
    #ueb {
        align-items: center;
        font-size: 76px;
    }
    #text-ueb {
        align-items: center;
        font-size: 24px;
        margin-left: 20px;
        margin-right: 20px;
    }
    #text-ueb-u {
        align-items: center;
        font-size: 24px;
        margin-left: 20px;
        margin-right: 20px;
    }
    #text-ueb-u2 {
        align-items: center;
        font-size: 36px;
    }
}
/*Stile für mittlere Bildschirme (Tablets)*/
@media only screen and (min-width: 769px) and (max-width: 1366px) {
    h1 {
    font-size: 26px;
    }
    h2 {
    font-size: 26px;
    }
    h3 {
    font-weight: 600;
    font-size: 28px;
    }
    .subtitel-hd {
    font-size: 26px;
    } 
    .text-und-bild {
    max-width: 900px;
    }
    .text {
    margin-right: 200px;
    font-size: 26px;
    }
    .text-kon-top {
    margin-bottom: 20px;
    margin-right: 410px;
    }
    #ou-cw-hd {
    font-size: 24px;
    }
    #ou-cw-fd-call {
    font-size: 24px;
    }
    #ou-cw-fd-mail {
    font-size: 24px;
    } 
    nav {
    flex-direction: column;
    font-size: 26px;
    }	
    .text-und-bild {
    flex-direction: column;
    }
    .container-text-r {
    order: 1;
    }
    .container-bild-l {
    order: 2;
    } 
    .text2 {
    margin-left: 0%;
    font-size: 26px;
    }   
    .bild2 img {
    margin-left: 0%;
    }
    .bild img {
    margin-left: 0px;
    }
    #h2-rechts {
    margin-left: 0px;
    }
    .umrahmtes-paragraph {
    font-size: 26px;
    }
    .breadcrumb {
    font-size: 18px;
    }
    .section-ueb {
        width: 100%;
        text-align: center;
        padding: 50px 0;
        color: #3d3846;
    }
    #ueb {
        align-items: center;
        font-size: 76px;
    }
    #text-ueb {
        align-items: center;
        font-size: 26px;
        margin-left: 20px;
        margin-right: 20px;
    }
    #text-ueb-u {
        align-items: center;
        font-size: 26px;
        margin-left: 20px;
        margin-right: 20px;
    }
    #text-ueb-u2 {
        align-items: center;
        font-size: 36px;
    }
}
