/* Hamburger Button */
.offcanvas-toggle {
    width: 35px;
    height: 28px;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 9999;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.offcanvas-toggle span {
    display: block;
    height: 4px;
    background: #000;
    border-radius: 2px;
    transition: 0.3s ease;
}

/* Off-Canvas Menü */
#offcanvas-menu {
    position: fixed;
		font-size:16px;
    top: 0;
    left: -300px; /* ausgeblendet */
    width: 250px;
    height: 100vh;
    background: #dadad9;
    color: #000;
    padding: 20px;
    transition: left 0.3s ease;
    z-index: 9998;
    overflow-y: auto;
}

/* Overlay (wird beim Öffnen angezeigt) */
#offcanvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
    z-index: 9997;
}

/* Off-Canvas geöffnet */
.offcanvas-open #offcanvas-menu {
    left: 0;
}

/* Hamburger-Icon Animation beim Öffnen */
.offcanvas-open .offcanvas-toggle span:nth-child(1) {
    transform: translateY(12px) rotate(45deg);
}

.offcanvas-open .offcanvas-toggle span:nth-child(2) {
    opacity: 0;
}

.offcanvas-open .offcanvas-toggle span:nth-child(3) {
    transform: translateY(-12px) rotate(-45deg);
}

/* Style für das Overlay */
.offcanvas-open #offcanvas-overlay {
    opacity: 1;
    visibility: visible;
}
/* Normale Groesser 1500 Pixel */
/* +++++++++++++++++ */
/* Kopfzeile u. Logo */
/* +++++++++++++++++ */
#sp_logo{
width:100%;
height:auto;
text-align:left;
}
#logo{
width:371px;
height:auto;
}
#sp_kopf{
position:fixed;
top:0px;
left:0px;
width:100%;
max-height:70px;
margin-top:0px;
background:#ffffff;
border-bottom:solid 1px #2F652F;
z-index:99;
}
#sp_kopf_inner{
width:1200px;
height:70px;
padding-left:0px;
padding-right:0px;
text-align:left;
}
#sp_header1{
display:table;
min-width:100%;
padding-top:0px;
}
#sp_header2{
display:table-row;
}
#sp_header3{
display:table-cell;
width:50%;
}
#sp_header4{
display:table-cell;
width:50%;
text-align:right;
}
#navigation_top{
display:none;
}
/* +++++++++++++++++ */
/* Banner Rotation */
/* +++++++++++++++++ */
#sp_rel{
position:relative;
top:70px;
left:0px;
width:100%;
z-index:1;
}
#sp_banner1{
display:inline-block;
width:100%;
height:250px;
background:#89B189;
border-bottom:solid 3px #ffffff;
}
#sp_banner2{
width:1210px;
height:250px;
padding-left:0px;
padding-right:0px;
}
#sp_banner3{
width:1210px;
height:250px;
background:#ffffff;
}
/* +++++++++++++++++ */
/* Banner Mobile */
/* +++++++++++++++++ */
#sp_mobile_banner_container{
display:none;
min-width:100%;
height:250px;
background:#ffffff;
}
/* +++++++++++++++++ */
/* Content und Menue */
/* +++++++++++++++++ */
#sp_centent{
width:100%;
min-height:430px;
margin-bottom:20px;
}
#sp_content_inner{
width:1200px;
padding-left:5px;
padding-right:5px;
background:#ffffff;
padding-bottom:20px;
}
#sp_frame1{
display:table;
width:1200px;
}
#sp_frame2{
display:table-row;
}
#sp_frame3{
display:table-cell;
width:300px;
padding-left:15px;
text-align:left;
vertical-align:top;
}
#sp_frame4{
display:table-cell;
width:20px;
}
#sp_frame5{
display:table-cell;
width:880px;
padding-left:20px;
padding-right:20px;
text-align:left;
}
#sp_frame6{
display:table-row;
}
#sp_frame7{
display:table-cell;
width:200p
}
#sp_frame8{
display:table-cell;
width:40px;
}
#sp_frame9{
display:table-cell;
width:760px;
}
/* +++++++++++++++++ */
/* Fusszeile  */
/* +++++++++++++++++ */
#fuss_bottom{
width:1200px;
padding-top:20px;
padding-left:20px;
padding-right:20px;
padding-bottom:20px;
text-align:left;
}
/* +++++++++++++++++ */
/* Urheber Copyright  */
/* +++++++++++++++++ */
#fuss_copy{
color:#ffffff;
width:1200px;
height:20px;
padding:5px;
text-align:center;
}
/* Responsive kleiner 1500 Pixel */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
@media only screen and (max-width: 1200px){
img{
max-width: 100%;
height: auto;
}
/* +++++++++++++++++ */
/* Kopfzeile u. Logo */
/* +++++++++++++++++ */
#sp_logo{
width:100%;
height:auto;
text-align:left;
}
#logo{
width:371px;
height:auto;
}
#sp_kopf{
position:fixed;
top:0px;
left:0px;
width:100%;
max-height:70px;
margin-top:0px;
background:#ffffff;
border-bottom:solid 1px #2F652F;
z-index:99;
}
#sp_kopf_inner{
width:100%;
height:70px;
padding-left:0px;
padding-right:0px;
text-align:left;
}
#sp_header1{
display:table;
min-width:100%;
padding-top:0px;
}
#sp_header2{
display:table-row;
}
#sp_header3{
display:table-cell;
width:50%;
}
#sp_header4{
display:table-cell;
width:50%;
text-align:right;
}
#navigation_top{
display:none;
}
/* +++++++++++++++++ */
/* Banner Rotation */
/* +++++++++++++++++ */
#sp_rel{
position:relative;
top:70px;
left:0px;
width:100%;
z-index:1;
}
#sp_banner1{
display:inline-block;
width:100%;
height:250px;
background:#89B189;
border-bottom:solid 3px #ffffff;
}
#sp_banner2{
width:1210px;
height:250px;
padding-left:0px;
padding-right:0px;
}
#sp_banner3{
width:1210px;
height:250px;
background:#ffffff;
}
/* +++++++++++++++++ */
/* Banner Mobile */
/* +++++++++++++++++ */
#sp_mobile_banner_container{
display:none;
min-width:100%;
height:250px;
background:#ffffff;
}
/* +++++++++++++++++ */
/* Content und Menue */
/* +++++++++++++++++ */
#sp_centent{
width:100%;
min-height:430px;
margin-bottom:20px;
}
#sp_content_inner{
width:100%;
padding-left:5px;
padding-right:5px;
background:#ffffff;
padding-bottom:20px;
}
#sp_frame1{
display:table;
width:100%;
}
#sp_frame2{
display:table-row;
}
#sp_frame3{
display:table-cell;
width:300px;
padding-left:15px;
text-align:left;
vertical-align:top;
}
#sp_frame4{
display:table-cell;
width:20px;
}
#sp_frame5{
display:table-cell;
width:880px;
padding-left:20px;
padding-right:20px;
text-align:left;
}
#sp_frame6{
display:table-row;
}
#sp_frame7{
display:table-cell;
width:200p
}
#sp_frame8{
display:table-cell;
width:40px;
}
#sp_frame9{
display:table-cell;
width:760px;
}
/* +++++++++++++++++ */
/* Fusszeile  */
/* +++++++++++++++++ */
#fuss_bottom{
width:100%;
padding-top:20px;
padding-left:20px;
padding-right:20px;
padding-bottom:20px;
text-align:left;
}
/* +++++++++++++++++ */
/* Urheber Copyright  */
/* +++++++++++++++++ */
#fuss_copy{
color:#ffffff;
width:1200px;
height:20px;
padding:5px;
text-align:center;
}
}
/* Responsive kleiner 1000 Pixel */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
@media only screen and (max-width: 1000px){
img{
max-width: 100%;
height: auto;
}
/* +++++++++++++++++ */
/* Kopfzeile u. Logo */
/* +++++++++++++++++ */
#sp_logo{
width:100%;
height:auto;
text-align:right;
}
#logo{
width:300px;
height:auto;
}
#sp_kopf{
position:fixed;
top:0px;
left:0px;
width:100%;
max-height:70px;
margin-top:0px;
background:#ffffff;
border-bottom:solid 1px #2F652F;
z-index:99;
}
#sp_kopf_inner{
width:100%;
height:70px;
padding-left:0px;
padding-right:0px;
text-align:left;
}
#sp_header1{
display:table;
min-width:100%;
padding-top:0px;
}
#sp_header2{
display:table-row;
}
#sp_header3{
display:table-cell;
width:100%;
}
#sp_header4{
display:none;
width:50%;
text-align:right;
}
#navigation_top{
display:inline;
}
/* +++++++++++++++++ */
/* Banner Rotation */
/* +++++++++++++++++ */
#sp_rel{
position:relative;
top:70px;
left:0px;
width:100%;
z-index:1;
}
#sp_banner1{
display:none;
width:100%;
height:250px;
background:#89B189;
border-bottom:solid 3px #ffffff;
}
#sp_banner2{
width:0px;
height:250px;
padding-left:0px;
padding-right:0px;
}
#sp_banner3{
width:0px;
height:250px;
background:#ffffff;
}
/* +++++++++++++++++ */
/* Banner Mobile */
/* +++++++++++++++++ */
#sp_mobile_banner_container{
display:inline-block;
min-width:100%;
height:250px;
background:#ffffff;
}
/* +++++++++++++++++ */
/* Content und Menue */
/* +++++++++++++++++ */
#sp_centent{
width:100%;
min-height:430px;
margin-bottom:20px;
}
#sp_content_inner{
width:100%;
padding-left:5px;
padding-right:5px;
background:#ffffff;
padding-bottom:20px;
}
#sp_frame1{
display:table;
width:100%;
}
#sp_frame2{
display:table-row;
}
#sp_frame3{
display:none;
width:0%;
padding-left:15px;
text-align:left;
vertical-align:top;
}
#sp_frame4{
display:none;
width:0%;
}
#sp_frame5{
display:table-cell;
width:100%;
padding-left:20px;
padding-right:20px;
text-align:left;
}
#sp_frame6{
display:table-row;
}
#sp_frame7{
display:table-cell;
width:0px;
}
#sp_frame8{
display:table-cell;
width:0px;
}
#sp_frame9{
display:table-cell;
width:0px;
}
/* +++++++++++++++++ */
/* Fusszeile  */
/* +++++++++++++++++ */
#fuss_bottom{
width:100%;
padding-top:20px;
padding-left:10px;
padding-right:10px;
padding-bottom:20px;
text-align:left;
}
/* +++++++++++++++++ */
/* Urheber Copyright  */
/* +++++++++++++++++ */
#fuss_copy{
color:#ffffff;
width:100%;
height:20px;
padding:5px;
text-align:center;
}
}