From ace420d43921be0e09088f5e4af5eeb907c3ca2b Mon Sep 17 00:00:00 2001
From: DerSchlnken <163151280+DerSchlnken@users.noreply.github.com>
Date: Fri, 31 Jan 2025 18:44:53 +0100
Subject: [PATCH] feat: Add responsive grid for unsere_mitglieder.html

---
 css/mobile.css |  439 ++++++++++++++++++-
 css/style.css  | 1111 +++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 1548 insertions(+), 2 deletions(-)

diff --git a/css/mobile.css b/css/mobile.css
index 2b14cb9..3563657 100644
--- a/css/mobile.css
+++ b/css/mobile.css
@@ -1 +1,438 @@
-@media only screen and (min-width :320px) and (max-width :568px){html{-webkit-text-size-adjust:none}img{max-width:100%}body #page{margin:0;overflow:hidden;padding:0;width:auto}#header{width:100%}#header div{max-width:none;overflow:hidden;padding:90px 0 13%;width:100%}#header div a.logo{display:block;float:none;height:auto;margin:0 auto;padding:0}#header div a.logo img{display:block;margin:0 auto;padding:0;width:50%}#header span#mobile-navigation{background:url(../images/mobile/mobile-menu.webp) no-repeat;display:block;height:50px;margin:0;padding:0;position:absolute;right:6%;top:20px;width:50px;z-index:999}#header div>ul#navigation{background-image:none;background:rgba(121,101,102,.91);border:1px solid #f8f8f8;border-radius:0;display:none;height:auto;padding:0;position:absolute;right:6%;top:70px;width:88%;z-index:1000}#header div>ul#navigation>li{border-left:0;border-top:1px solid #f8f8f8;margin:0;padding:0;position:relative;text-align:left;width:100%}#header div>ul#navigation>li:first-child{border-top:0}#header div>ul#navigation>li:hover{background-color:transparent}#header div ul#navigation li a{color:#f8f8f8;display:block;font-family:Arial;font-size:1.125em;font-weight:400;height:3em;line-height:3.125em;padding:0 10px;text-align:left;text-shadow:none;width:auto}#header .mobile-submenu{background:url(../images/mobile/mobile-expand.webp) center no-repeat rgba(121,101,102,.91);border-left:1px solid #f8f8f8;display:inline-block;height:3.4em;position:absolute;right:0;top:0;width:50px;z-index:0}#header div ul#navigation li ul{background:0 0;border-top:1px solid #f8f8f8;padding:0;position:static;right:0;text-align:left;width:100%;z-index:999}#header div ul#navigation li ul,#header div ul#navigation li:hover ul{display:none}#header div ul#navigation li{width:100%;z-index:40}#header div ul#navigation li ul li{background:rgba(121,101,102,.91);border-top:1px solid #f8f8f8;display:block;margin:0;padding:0;text-align:left;width:100%}#header div ul#navigation li ul li:first-child{border:none}#header div ul#navigation li ul li a{background:rgba(121,101,103,.91);color:#f8f8f8;padding-left:20px;text-align:left;width:auto}#header div ul#navigation li ul li.selected a,#header div ul#navigation li.selected a,#header div ul#navigation li:hover a,#header div ul#navigation li:hover ul li a,#header div ul#navigation li:hover ul li a:hover{display:block}#header div ul#navigation li.selected>a{background:rgba(204,60,104,.91);color:#f8f8f8}#body,#body.home{margin:0;padding:0;width:100%}}@media only screen and (max-width :918px){#body div.blog,#body div.singlepost{margin:0;max-width:none;overflow:hidden;padding:10% 0;width:100%}#body.home div.header div{margin:0 auto;max-width:960px;min-height:470px;padding:0;position:relative}#body div.body img,#body.home div.header img{display:block;left:0;margin:0 auto;position:absolute}#body.home div.header img{height:21%;padding:0;width:100%}#body.home div.header div a{margin:0 auto;padding:52px 0 0;position:relative;right:0;top:292px}#body.home div.body div,#body.home div.footer div{margin:0 auto;max-width:none;width:90%}#body div ul li,#body.home div.body div div{float:none;margin:0 auto;padding:0;width:90%}#body.home div.body div div h1,#body.home div.body div div h2,#body.home div.body div div p{width:100%}#body.home div.body div img{display:block;float:none;margin:0 auto;padding:0;position:inherit;width:100%}#body.home div.footer div ul li{float:none;margin:0;padding:0 0 8%;width:100%}#body.home div.footer div ul li a.contact{float:none}#body div.body{min-height:280px}#body div.body img{height:15%;padding:0;width:100%}#body div.footer{margin:0;max-width:none;overflow:hidden;padding:0;width:100%}#body div.footer div.sidebar{float:none;margin:10% auto 0;padding:36px 0 34px;width:90%}#body div.footer div.article{float:none;margin:0 auto;padding:8% 0 0;width:90%}#body div ul{padding:10% 0;width:100%}#body div ul li h1,#body div ul li p{margin:0;padding:0;width:100%}#body div.blog .featured,#body div.blog .featured ul li div{float:none;margin:0;padding:0;width:100%}#body div.blog .sidebar{background-color:#efedee}#body div.blog .featured ul li:first-child{margin:10% auto}#body div.blog .featured ul li{background:0 0;margin:10% auto;width:90%}#body div.blog .featured ul li img{float:none;margin:5% auto}#body div.singlepost .featured h1,#body div.singlepost .featured img,#body div.singlepost .featured p,#body div.singlepost .featured span{padding:4% 0}#body div.blog .featured a.load,#body div.singlepost .featured a.load{display:none}#body div.blog .sidebar,#body div.singlepost .featured,#body div.singlepost .sidebar{float:none;margin:0 auto;padding:0 0 35px;width:90%}#body.contact div.body div{padding:4% 0;max-width:none;width:100%}#body.contact div.body div div{padding:5% 0;width:90%}#body.contact div.body div div img{float:none;margin:0 auto}#body.contact div.body div div h1,#body.contact div.body div div p{padding:0 0 0 4%;width:96%}#footer div{margin:0 auto;width:90%}#body div.footer .contact{float:none;margin:0 auto;max-width:none;padding:4% 0;width:90%}#body div.footer .contact form{margin:0;overflow:hidden;padding:0;width:100%}#body div.footer .contact form input,#body div.footer .contact form textarea{-webkit-appearance:none;border-radius:0;margin:0 auto 8px;width:90%}#body div.footer .contact form input#submit{-webkit-appearance:none;margin:0 0 0 2%}#body div.footer .section{background-color:#efedee;float:none;margin:0 auto 5%;max-width:none;padding:0 0 35px;width:90%}}
\ No newline at end of file
+@media only screen and (max-width: 768px) {
+    
+    #body.unsere_mitglieder .logo-grid {
+        display: grid;
+        grid-template-columns: repeat(3,minmax(150px, 1fr));
+        gap: 10px;
+        list-style: none;
+        max-width: 960px;
+        width: 100%;
+        justify-content: center;
+        box-sizing: border-box;
+        padding: 0 20px;
+        
+        margin: 0 auto;
+    }
+    #body.unsere_mitglieder .logo-grid li {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 10px;
+        width: 140px;
+        height: 150px;
+        background-color: white;
+        overflow: visible;
+        aspect-ratio: 1 / 1;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        
+    }
+    #body.unsere_mitglieder .logo-grid img {
+        max-width: 100%;
+        max-height: 100%;
+        width: 150px;
+        height: 120px;
+        object-fit: contain;
+        margin: auto;
+        display: block;
+    }
+    
+}
+
+
+@media only screen  and (max-width: 558px) {
+    html {
+        -webkit-text-size-adjust: none;
+    }
+    img {
+        max-width: 100%;
+    }
+    body #page {
+        margin: 0;
+        overflow: hidden;
+        padding: 0;
+        width: auto;
+    }
+    #header {
+        width: 100%;
+    }
+    #header div {
+        max-width: none;
+        overflow: hidden;
+        padding: 90px 0 13%;
+        width: 100%;
+    }
+    #header div a.logo {
+        display: block;
+        float: none;
+        height: auto;
+        margin: 0 auto;
+        padding: 0;
+    }
+    #header div a.logo img {
+        display: block;
+        margin: 0 auto;
+        padding: 0;
+        width: 50%;
+    }
+    #header span#mobile-navigation {
+        background: url(../images/mobile/mobile-menu.webp) no-repeat;
+        display: block;
+        height: 50px;
+        margin: 0;
+        padding: 0;
+        position: absolute;
+        right: 6%;
+        top: 20px;
+        width: 50px;
+        z-index: 999;
+    }
+    #header div > ul#navigation {
+        background-image: none;
+        background: rgba(121, 101, 102, 0.91);
+        border: 1px solid #f8f8f8;
+        border-radius: 0;
+        display: none;
+        height: auto;
+        padding: 0;
+        position: absolute;
+        right: 6%;
+        top: 70px;
+        width: 88%;
+        z-index: 1000;
+    }
+    #header div > ul#navigation > li {
+        border-left: 0;
+        border-top: 1px solid #f8f8f8;
+        margin: 0;
+        padding: 0;
+        position: relative;
+        text-align: left;
+        width: 100%;
+    }
+    #header div > ul#navigation > li:first-child {
+        border-top: 0;
+    }
+    #header div > ul#navigation > li:hover {
+        background-color: transparent;
+    }
+    #header div ul#navigation li a {
+        color: #f8f8f8;
+        display: block;
+        font-family: Verdana, Geneva, Tahoma, sans-serif;
+        font-size: 1.125em;
+        font-weight: 400;
+        height: 3em;
+        line-height: 3.125em;
+        padding: 0 10px;
+        text-align: left;
+        text-shadow: none;
+        width: auto;
+    }
+    #header .mobile-submenu {
+        background: url(../images/mobile/mobile-expand.webp) center no-repeat rgba(121, 101, 102, 0.91);
+        border-left: 1px solid #f8f8f8;
+        display: inline-block;
+        height: 3.4em;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 50px;
+        z-index: 0;
+    }
+    #header div ul#navigation li ul {
+        background: 0 0;
+        border-top: 1px solid #f8f8f8;
+        padding: 0;
+        position: static;
+        right: 0;
+        text-align: left;
+        width: 100%;
+        z-index: 999;
+    }
+    #header div ul#navigation li ul,
+    #header div ul#navigation li:hover ul {
+        display: none;
+    }
+    #header div ul#navigation li {
+        width: 100%;
+        z-index: 40;
+    }
+    #header div ul#navigation li ul li {
+        background: rgba(121, 101, 102, 0.91);
+        border-top: 1px solid #f8f8f8;
+        display: block;
+        margin: 0;
+        padding: 0;
+        text-align: left;
+        width: 100%;
+    }
+    #header div ul#navigation li ul li:first-child {
+        border: none;
+    }
+    #header div ul#navigation li ul li a {
+        background: rgba(121, 101, 103, 0.91);
+        color: #f8f8f8;
+        padding-left: 20px;
+        text-align: left;
+        width: auto;
+    }
+    #header div ul#navigation li ul li.selected a,
+    #header div ul#navigation li.selected a,
+    #header div ul#navigation li:hover a,
+    #header div ul#navigation li:hover ul li a,
+    #header div ul#navigation li:hover ul li a:hover {
+        display: block;
+    }
+    #header div ul#navigation li.selected > a {
+        background: rgba(204, 60, 104, 0.91);
+        color: #f8f8f8;
+    }
+    #body,
+    #body.home {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+    }
+    #body.unsere_mitglieder .logo-grid {
+        display: grid;
+        grid-template-columns: repeat(2,minmax(150px, 1fr));
+        gap: 10px;
+        list-style: none;
+        max-width: 960px;
+        width: 100%;
+        justify-content: center;
+        box-sizing: border-box;
+        padding: 0 20px;
+        margin: 0 auto;
+    }
+    #body.unsere_mitglieder .logo-grid li {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 10px;
+        width: 140px;
+        height: 150px;
+        background-color: white;
+        overflow: visible;
+        aspect-ratio: 1 / 1;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        
+    }
+    #body.unsere_mitglieder .logo-grid img {
+        max-width: 100%;
+        max-height: 100%;
+        width: 150px;
+        height: 120px;
+        object-fit: contain;
+        margin: auto;
+        display: block;
+    }
+}
+@media only screen and (max-width: 980px) {
+    #body div.blog,
+    #body div.singlepost {
+        margin: 0;
+        max-width: none;
+        overflow: hidden;
+        padding: 10% 0;
+        width: 100%;
+    }
+    #body.home div.header div {
+        margin: 0 auto;
+        max-width: 960px;
+        min-height: 470px;
+        padding: 0;
+        position: relative;
+    }
+    #body div.body img,
+    #body.home div.header img {
+        display: block;
+        left: 0;
+        margin: 0 auto;
+        position: absolute;
+    }
+    #body.home div.header img {
+        height: 21%;
+        padding: 0;
+        width: 100%;
+    }
+    #body.home div.header div a {
+        margin: 0 auto;
+        padding: 52px 0 0;
+        position: relative;
+        right: 0;
+        top: 292px;
+    }
+    #body.home div.body div,
+    #body.home div.footer div {
+        margin: 0 auto;
+        max-width: none;
+        width: 90%;
+    }
+    #body div ul li,
+    #body.home div.body div div {
+        float: none;
+        margin: 0 auto;
+        padding: 0;
+        width: 90%;
+    }
+    #body.home div.body div div h1,
+    #body.home div.body div div h2,
+    #body.home div.body div div p {
+        width: 100%;
+    }
+    #body.home div.body div img {
+        display: block;
+        float: none;
+        margin: 0 auto;
+        padding: 0;
+        position: inherit;
+        width: 100%;
+    }
+    #body.home div.footer div ul li {
+        float: none;
+        margin: 0;
+        padding: 0 0 8%;
+        width: 100%;
+    }
+    #body.home div.footer div ul li a.contact {
+        float: none;
+    }
+    #body div.body {
+        min-height: 280px;
+    }
+    #body div.body img {
+        height: 15%;
+        padding: 0;
+        width: 100%;
+    }
+    #body div.footer {
+        margin: 0;
+        max-width: none;
+        overflow: hidden;
+        padding: 0;
+        width: 100%;
+    }
+    #body div.footer div.sidebar {
+        float: none;
+        margin: 10% auto 0;
+        padding: 36px 0 34px;
+        width: 90%;
+    }
+    #body div.footer div.article {
+        float: none;
+        margin: 0 auto;
+        padding: 8% 0 0;
+        width: 90%;
+    }
+    #body div ul {
+        padding: 10% 0;
+        width: 100%;
+    }
+    #body div ul li h1,
+    #body div ul li p {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+    }
+    #body div.blog .featured,
+    #body div.blog .featured ul li div {
+        float: none;
+        margin: 0;
+        padding: 0;
+        width: 100%;
+    }
+    #body div.blog .sidebar {
+        background-color: #efedee;
+    }
+    #body div.blog .featured ul li:first-child {
+        margin: 10% auto;
+    }
+    #body div.blog .featured ul li {
+        background: 0 0;
+        margin: 10% auto;
+        width: 90%;
+    }
+    #body div.blog .featured ul li img {
+        float: none;
+        margin: 5% auto;
+    }
+    #body div.singlepost .featured h1,
+    #body div.singlepost .featured img,
+    #body div.singlepost .featured p,
+    #body div.singlepost .featured span {
+        padding: 4% 0;
+    }
+    #body div.blog .featured a.load,
+    #body div.singlepost .featured a.load {
+        display: none;
+    }
+    #body div.blog .sidebar,
+    #body div.singlepost .featured,
+    #body div.singlepost .sidebar {
+        float: none;
+        margin: 0 auto;
+        padding: 0 0 35px;
+        width: 90%;
+    }
+    #body.contact div.body div {
+        padding: 4% 0;
+        max-width: none;
+        width: 100%;
+    }
+    #body.contact div.body div div {
+        padding: 5% 0;
+        width: 90%;
+    }
+    #body.contact div.body div div img {
+        float: none;
+        margin: 0 auto;
+    }
+    #body.contact div.body div div h1,
+    #body.contact div.body div div p {
+        padding: 0 0 0 4%;
+        width: 96%;
+    }
+    #footer div {
+        margin: 0 auto;
+        width: 90%;
+    }
+    #body div.footer .contact {
+        float: none;
+        margin: 0 auto;
+        max-width: none;
+        padding: 4% 0;
+        width: 90%;
+    }
+    #body div.footer .contact form {
+        margin: 0;
+        overflow: hidden;
+        padding: 0;
+        width: 100%;
+    }
+    #body div.footer .contact form input,
+    #body div.footer .contact form textarea {
+        -webkit-appearance: none;
+        border-radius: 0;
+        margin: 0 auto 8px;
+        width: 90%;
+    }
+    #body div.footer .contact form input#submit {
+        -webkit-appearance: none;
+        margin: 0 0 0 2%;
+    }
+    #body div.footer .section {
+        background-color: #efedee;
+        float: none;
+        margin: 0 auto 5%;
+        max-width: none;
+        padding: 0 0 35px;
+        width: 90%;
+    }
+    
+    
+}
+
+
diff --git a/css/style.css b/css/style.css
index 8fc62bf..209acc4 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1 +1,1110 @@
-#header div ul li a,#header div ul li ul li a{font-family:lato-regular-webfont;font-size:15px;text-align:center;margin:0;line-height:15px}#body.home,#header{background-color:#b0c95e;position:relative}#body,#body.home,#body.home div.header div,#header,#header div ul li,body{position:relative}#body,#body.home,#body.home div.body,#header{width:100%;padding:0}#body.home div.body div div h1,#body.home div.header div a,#header div ul li a,#header div ul li ul li a{text-transform:uppercase;font-weight:400}#footer a,a{text-decoration:none}body{width:auto}body #page{margin:0;overflow:hidden;padding:0;width:auto;display:flex;flex-direction:column;min-height:100vh}a{outline:0}a:active{background:0 0}img{border:none}body,html{height:100%;margin:0;padding:0}#body{flex:1;margin:0;overflow:hidden}@font-face{font-family:roboto-regular-webfont;src:url('../fonts/roboto-regular-webfont.eot');src:url('../fonts/roboto-regular-webfont.woff') format('woff'),url('../fonts/roboto-regular-webfont.ttf') format('truetype'),url('../fonts/roboto-regular-webfont.svg') format('svg')}@font-face{font-family:quicksand-bold-webfont;src:url('../fonts/quicksand-bold-webfont.eot');src:url('../fonts/quicksand-bold-webfont.woff') format('woff'),url('../fonts/quicksand-bold-webfont.ttf') format('truetype'),url('../fonts/quicksand-bold-webfont.svg') format('svg')}@font-face{font-family:magra-bold-webfont;src:url('../fonts/magra-bold-webfont.eot');src:url('../fonts/magra-bold-webfont.woff') format('woff'),url('../fonts/magra-bold-webfont.ttf') format('truetype'),url('../fonts/magra-bold-webfont.svg') format('svg')}@font-face{font-family:lato-regular-webfont;src:url('../fonts/lato-regular-webfont.eot');src:url('../fonts/lato-regular-webfont.woff') format('woff'),url('../fonts/lato-regular-webfont.ttf') format('truetype'),url('../fonts/lato-regular-webfont.svg') format('svg')}@font-face{font-family:lato-bold-webfont;src:url('../fonts/lato-bold-webfont.eot');src:url('../fonts/lato-bold-webfont.woff') format('woff'),url('../fonts/lato-bold-webfont.ttf') format('truetype'),url('../fonts/lato-bold-webfont.svg') format('svg')}#header div{margin:0 auto;max-width:940px;overflow:hidden;padding:41px 10px 27px}#header div a.logo{float:left;margin:0 0 0 29px;padding:0;width:auto}#header div a.logo img{display:block;margin:0;padding:0;width:auto}#header div ul{display:inline-block;float:right;list-style:none;margin:0 auto;padding:17px 0 0;text-align:center;width:513px}#header div ul li{display:inline-block;margin:0 35px;padding:0;width:auto}#header div ul li a{color:#7a6666;padding:0}#header div ul li.selected a,#header div ul li.selected a:hover{color:#cb3362}#body.home div.body div div p a:hover,#header div ul li a:hover,#header div ul li.menu:hover ul li a{color:#c8c10d}#body div.blog .featured a.load,#body div.blog .featured ul li div a.more,#body div.blog .sidebar a.more,#body div.footer .contact form input#submit,#body div.singlepost .featured a.load,#body div.singlepost .sidebar a.more{color:#a5838e;font-family:lato-bold-webfont;font-size:16px;line-height:36px}#header div ul li ul li a{color:#cb3362;padding:0}#header div ul li.menu{min-height:35px;z-index:80}#header div ul li.menu ul{display:block;float:none;left:-99999px;margin:0;padding:0;position:absolute;top:24px;width:106px;z-index:90}#header div ul li.menu ul#selected.primary,#header div ul li.menu:hover ul.primary{left:-30px}#header div ul li.menu ul#selected.secondary,#header div ul li.menu:hover ul.secondary{left:-27px}#header div ul li.menu ul li{float:none;margin:0;padding:0}#body.home{margin:0;overflow:hidden}#body.datenschutz,#body.impressum{padding:20px;font-family:Verdana,Geneva,Tahoma,sans-serif}#body.impressum a{color: #fff; text-decoration: underline;}#body.home div.header{background-color:#1a6c68;margin:0;max-width:none;overflow:hidden;padding:0;width:100%}#body.home div.header img{display:block;margin:0;padding:0;position:relative;max-width:960px;min-height:660px}#body.home div.header div{margin:0 auto;max-width:960px;height:660px;padding:0}#body.home div.header div a{background:url(../images/icons.webp) 0 -128px no-repeat;color:#fff;display:block;font-family:quicksand-bold-webfont;font-size:24px;height:99px;line-height:24px;margin:0;padding:52px 0 0;position:absolute;right:130px;text-align:center;top:437px;width:156px;z-index:90}#body.home div.body{margin:0;max-width:none}#body.home div.body div{margin:0 auto;max-width:960px;overflow:hidden;padding:0;text-align:left;font-family:Verdana,Geneva,Tahoma,sans-serif;color:#253a01;font-size:20px}#body.home div.body div a{color:#253a01;margin:0 10px;text-decoration:underline}#body.home div.body div div{float:left;margin:0;padding:0 0 0 40px;width:560px}#body.home div.body div img{display:block;float:right;left:0;margin:0;padding:0;position:relative;width:auto}#body.home div.body div div h1{color:#7a6666;display:block;font-family:lato-bold-webfont;font-size:18px;line-height:24px;margin:0;padding:47px 0 18px;text-align:left;width:560px}#body.home div.body div div h2{color:#e32a62;display:block;font-family:magra-bold-webfont;font-size:30px;font-weight:400;line-height:30px;margin:0;padding:0 0 26px;text-align:left;text-transform:none;width:560px}#body.home div.body div div p,#body.home div.body div div p a{display:block;font-family:roboto-regular-webfont;font-size:14px;line-height:24px;margin:0;font-weight:400;color:#7a6666}#body.home div.body div div p{padding:0;text-align:left;width:560px}#body.home div.body div div p a{padding:0;text-decoration:underline}#body div.footer div h1,#body div.header div h1,#body.home div.footer div ul li h1{font-family:lato-regular-webfont;text-transform:uppercase}#body.home div.footer{background-color:#1a6c68;margin:0;max-width:none;padding:0;width:100%;min-height:136px}#body.home div.footer div{margin:0 auto;max-width:960px;overflow:hidden;padding:0;text-align:left;font-family:Verdana,Geneva,Tahoma,sans-serif;color:#fff;font-size:20px}#body.home div.footer div a{color:#fff;margin:0 auto;text-decoration:underline;text-align:left}#body.home div.footer div ul{display:inline-block;list-style:none;margin:0;padding:36px 0 32px;width:100%}#body.home div.footer div ul li{float:left;margin:0 10px;padding:0;width:220px}#body.home div.footer div ul li a{background:url(../images/icons.webp) no-repeat;display:block;height:44px;margin:0 auto 22px;padding:0;width:80px}#body.home div.footer div ul li a.product{background-position:0 -372px}#body.home div.footer div ul li a.about{background-position:0 -418px}#body.home div.footer div ul li a.flavor{background-position:0 -280px}#body.home div.footer div ul li a.contact{float:none;background-position:0 -326px}#body.home div.footer div ul li h1{color:#fff;font-size:20px;font-weight:400;line-height:20px;margin:0;padding:0;text-align:center}#body div.header{background-color:#c8c10d;margin:0 auto;max-width:none;overflow:hidden;padding:0}#body div.body,#footer{background-color:#b0c95e}#body div.header div{margin:0 auto;max-width:960px;padding:0}#body div.header div h1{color:#fff;font-size:30px;font-weight:400;line-height:30px;margin:0;padding:28px 0 23px;text-align:center}#body div.body{margin:0;max-width:none;min-height:136px;overflow:hidden;padding:0;width:100%}#body div.body img{display:block;left:50%;margin:0 auto 0 -507px;padding:0;position:absolute;width:1014px}#body div.footer{margin:0 auto;max-width:960px;overflow:hidden;padding:40px 0 110px}#body div.footer div.sidebar{background-color:#efedee;float:left;margin:0 10px 0 40px;padding:36px 0 34px;width:280px}#body div.footer div.article{float:left;margin:0;padding:0 0 0 30px;width:560px}#body div.footer div.sidebar h1{display:block;line-height:48px;margin:0 auto;padding:0 0 50px;text-align:center;width:193px}#body div.footer div.sidebar p{display:block;line-height:48px;margin:0 auto;text-align:center;width:169px}#body div ul li h2,#body div ul li p,#body div.footer div h1,#body div.footer div p a{font-weight:400;line-height:24px}#body div.footer div h1{color:#cb3362;font-size:24px;margin:0;padding:0 0 27px;text-align:left}#body div.footer div span{display:block;margin:0;padding:0}#body div.footer div p a{color:#7a6666;font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:20px;margin:0;padding:0;text-decoration:underline}#body div{margin:0 auto;max-width:960px;padding:7px 0 57px}#body div ul{display:inline-block;margin:0;overflow:hidden;width:100%}#body div ul li{margin:0 10px;padding:0}#body div ul li h1{color:#e32a62;font-family:magra-bold-webfont;font-size:28px;font-weight:400;line-height:28px;margin:0;padding:87px 0 27px 30px;text-align:left;text-transform:capitalize}#body div ul li p{color:#7a6666;font-family:roboto-regular-webfont;font-size:14px;margin:0;padding:0 0 0 30px;text-align:left;width:190px}#body div ul li p a,#body div.blog .featured ul li div p a,#body div.blog .sidebar p a,#body div.singlepost .sidebar p a,#body.contact div.body div div p a{color:#7a6666;font-family:roboto-regular-webfont;font-size:14px;font-weight:400;line-height:24px;margin:0;padding:0;text-decoration:underline}#body div ul li h2,#body div.blog .featured ul li div h1{font-family:lato-regular-webfont;text-transform:uppercase}#body div ul li img{display:block;margin:0 auto 15px;padding:0;width:auto}#body div ul li h2{color:#e32a62;font-size:20px;margin:0;padding:0;text-align:center}#body div.blog{margin:0 auto;max-width:960px;overflow:hidden;padding:98px 0 146px}#body div.singlepost{margin:0 auto;max-width:960px;overflow:hidden;padding:98px 0 99px}#body div.blog .featured,#body div.singlepost .featured{float:left;margin:0 10px;padding:0;width:620px}#body div.blog .featured ul{display:inline-block;list-style:none;margin:0;overflow:hidden;padding:0;width:100%}#body div.blog .featured ul li:first-child{margin:0 0 50px}#body div.blog .featured ul li{background:url(../images/bg-border.gif) bottom center no-repeat;float:none;margin:0 0 39px;overflow:hidden;padding:0;width:auto}#body div.blog .featured ul li img{float:left;margin:2px 0 0;padding:0 30px;width:auto}#body div.blog .featured ul li div{float:left;margin:0;padding:0 0 36px 10px;width:370px}#body div.blog .featured ul li div h1{color:#cb3362;font-size:24px;font-weight:400;line-height:24px;margin:0;padding:0 0 3px;text-align:left}#body div.blog .featured ul li div p,#body div.blog .featured ul li div span{color:#7a6666;font-family:roboto-regular-webfont;text-align:left;margin:0;font-weight:400;line-height:24px}#body div.blog .featured ul li div span{display:block;font-size:12px;padding:0 0 24px;text-transform:none}#body div.blog .featured ul li div p{font-size:14px;padding:0 0 39px;width:100%}#body div.blog .featured ul li div a.more{border:2px solid #cbb5bc;display:block;font-weight:400;height:36px;margin:0;padding:0;text-align:center;text-transform:uppercase;width:156px}#body div.blog .featured ul li div a.more:hover,#body div.blog .sidebar a.more:hover,#body div.singlepost .featured a.load:hover,#body div.singlepost .sidebar a.more:hover{background-color:#c8c10d;border:none;color:#fff;height:40px;line-height:40px;width:160px}#body div.blog .featured a.load{border:2px solid #cbb5bc;display:block;font-weight:400;height:36px;margin:0 auto;padding:0;text-align:center;text-transform:uppercase;width:156px}#body div.blog .featured a.load:hover{background-color:#cb3362;border:none;color:#fff;height:40px;line-height:40px;width:160px}#body div.blog .sidebar,#body div.singlepost .sidebar{background-color:#efedee;float:left;margin:0;padding:0 0 71px;width:280px}#body div.blog .sidebar h1,#body div.singlepost .sidebar h1{color:#cb3362;font-family:magra-bold-webfont;font-size:30px;font-weight:400;line-height:30px;margin:0;padding:42px 0 29px;text-align:center;text-transform:capitalize}#body div.blog .sidebar img,#body div.singlepost .sidebar img{display:block;margin:0 auto;padding:0;width:auto}#body div.blog .sidebar h2,#body div.singlepost .sidebar h2{color:#cb3362;font-family:lato-regular-webfont;font-size:24px;font-weight:400;line-height:24px;margin:0;padding:34px 0 3px;text-align:center;text-transform:uppercase}#body div.blog .sidebar p,#body div.blog .sidebar span,#body div.singlepost .sidebar p,#body div.singlepost .sidebar span{font-family:roboto-regular-webfont;text-transform:none;font-weight:400;line-height:24px;color:#7a6666;display:block;text-align:center}#body div.blog .sidebar span,#body div.singlepost .sidebar span{font-size:12px;margin:0;padding:0 0 24px}#body div.blog .sidebar p,#body div.singlepost .sidebar p{font-size:14px;margin:0 auto;padding:0 0 64px;width:200px}#body div.blog .sidebar a.more,#body div.singlepost .sidebar a.more{border:2px solid #d3c2c7;display:block;font-weight:400;height:36px;margin:0 auto;padding:0;text-align:center;text-transform:uppercase;width:156px}#body div.singlepost .featured img{display:block;margin:0;padding:1px 0 0 30px;width:auto}#body div.singlepost .featured h1{color:#cb3362;font-family:lato-regular-webfont;font-size:24px;font-weight:400;line-height:24px;margin:0;padding:40px 0 4px 30px;text-align:left;text-transform:uppercase}#body div.singlepost .featured span{color:#7a6666;display:block;font-family:Arial;font-size:12px;font-weight:400;line-height:24px;margin:0;padding:0 0 23px 30px;text-align:left;text-transform:none}#body div.singlepost .featured p,#body div.singlepost .featured p a{color:#7a6666;font-family:Arial;font-size:14px;font-weight:400;margin:0;line-height:24px}#body div.singlepost .featured p{padding:0 0 24px 30px;text-align:left}#body div.footer .contact h1,#body div.footer .section h1,#body.contact div.body div div h1{color:#cb3362;font-size:24px;text-transform:uppercase}#body div.singlepost .featured p a{padding:0;text-decoration:underline}#body div.singlepost .featured a.load{border:2px solid #cbb5bc;display:block;font-weight:400;height:36px;margin:63px auto 0;padding:0;text-align:center;text-transform:uppercase;width:156px}#body.contact div.body{background:url(../images/map.jpg) center top no-repeat #b5aaad;margin:0;max-width:none;padding:0;width:100%}#body.contact div.body div{margin:0 auto;max-width:960px;overflow:hidden;padding:39px 0 0}#body.contact div.body div div{background:url(../images/bg-transparent.webp);margin:0 auto;overflow:hidden;padding:30px 0 35px 133px;width:747px}#body div.footer .contact form input,#body div.footer .contact form textarea{border:1px solid #b6adb0;width:548px;background:0 0;display:block;font-family:lato-regular-webfont}#body.contact div.body div div img{float:left;left:auto;margin:0 38px 0 0;padding:0;position:relative;width:auto}#body.contact div.body div div h1{float:left;font-family:lato-regular-webfont;font-weight:400;line-height:24px;margin:0;padding:15px 0 4px;text-align:left;width:510px}#body div.footer .contact form input,#body div.footer .contact form textarea,#body.contact div.body div div p{color:#7a6666;font-size:14px;text-align:left;font-weight:400}#body.contact div.body div div p{float:left;font-family:roboto-regular-webfont;line-height:24px;margin:0;padding:0;width:510px}#body div.footer .contact{float:left;margin:0 10px 0 0;max-width:none;padding:0 0 61px 40px;width:590px}#body div.footer .contact h1{float:none;font-family:lato-regular-webfont;font-weight:400;line-height:24px;margin:0;padding:0 0 43px;text-align:left;width:auto}#body div.footer .contact form{margin:0;overflow:hidden;padding:0;width:560px}#body div.footer .contact form input{height:38px;line-height:38px;margin:0 0 8px;padding:0 0 0 10px}#body div.footer .contact form textarea{height:270px;line-height:24px;margin:0 0 9px;overflow:auto;padding:7px 0 0 10px;resize:none}#body div.footer .contact form input#submit{background:0 0;border:2px solid #c5abb4;cursor:pointer;display:block;font-weight:400;height:40px;margin:0;padding:0;text-align:center;text-transform:uppercase;width:141px}#body div.footer .contact form input#submit:hover{background-color:#c8c10d;border:none;height:40px;width:141px}#body div.footer .section{background-color:#efedee;float:left;margin:0;max-width:none;padding:0 0 35px;width:280px}#body div.footer .section h1{display:block;font-family:lato-regular-webfont;font-weight:400;line-height:24px;margin:0 auto;padding:24px 0 27px;text-align:center;width:202px}#body div.footer .section p,#footer div p{display:block;font-family:roboto-regular-webfont;font-weight:400;text-align:center}#body div.footer .section p{color:#7a6666;font-size:14px;line-height:24px;margin:0 auto;padding:0;width:202px}.background-div{position:relative;width:100%;height:100%;overflow:hidden}.background-img{object-fit:contain;object-position:center;background-size:contain}#body.impressum{background-color:#1a6c68;color:#fff;text-align:center;font-size:20px}#body.datenschutz{background-color:#1a6c68;color:#fff;text-align:left;font-size:20px}#body.datenschutz a{color:#fff;text-decoration:underline}#footer{margin:0;padding:0;width:100%;text-align:center}#footer div{margin:0 auto;max-width:960px;overflow:hidden;padding:59px 0 13px}#footer div p{color:#fff;font-size:12px;line-height:15px;margin:0;padding:33px 0 50px;text-transform:none}#footer a{color:#253a01;margin:0 10px;font-size:20px;font-family:Verdana,Geneva,Tahoma,sans-serif}#footer a:hover{text-decoration:underline}
\ No newline at end of file
+#header div ul li a,
+#header div ul li ul li a {
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    font-size: 15px;
+    text-align: center;
+    margin: 0;
+    line-height: 15px;
+}
+#body.home,
+#header {
+    background-color: #b0c95e;
+    position: relative;
+}
+#body,
+#body.home,
+#body.home div.header div,
+#header,
+#header div ul li,
+body {
+    position: relative;
+}
+#body,
+#body.home,
+#body.home div.body,
+#header {
+    width: 100%;
+    padding: 0;
+}
+#body.home div.body div div h1,
+#body.home div.header div a,
+#header div ul li a,
+#header div ul li ul li a {
+    text-transform: uppercase;
+    font-weight: 400;
+}
+#footer a,
+a {
+    text-decoration: none;
+}
+body {
+    width: auto;
+}
+body #page {
+    margin: 0;
+    overflow: hidden;
+    padding: 0;
+    width: auto;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+a {
+    outline: 0;
+}
+a:active {
+    background: 0 0;
+}
+img {
+    border: none;
+}
+body,
+html {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+#body {
+    flex: 1;
+    margin: 0;
+    overflow: hidden;
+}
+@font-face {
+    font-family: roboto-regular-webfont;
+    src: url("../fonts/roboto-regular-webfont.eot");
+    src: url("../fonts/roboto-regular-webfont.woff") format("woff"), url("../fonts/roboto-regular-webfont.ttf") format("truetype"), url("../fonts/roboto-regular-webfont.svg") format("svg");
+}
+@font-face {
+    font-family: quicksand-bold-webfont;
+    src: url("../fonts/quicksand-bold-webfont.eot");
+    src: url("../fonts/quicksand-bold-webfont.woff") format("woff"), url("../fonts/quicksand-bold-webfont.ttf") format("truetype"), url("../fonts/quicksand-bold-webfont.svg") format("svg");
+}
+@font-face {
+    font-family: magra-bold-webfont;
+    src: url("../fonts/magra-bold-webfont.eot");
+    src: url("../fonts/magra-bold-webfont.woff") format("woff"), url("../fonts/magra-bold-webfont.ttf") format("truetype"), url("../fonts/magra-bold-webfont.svg") format("svg");
+}
+@font-face {
+    font-family: lato-regular-webfont;
+    src: url("../fonts/lato-regular-webfont.eot");
+    src: url("../fonts/lato-regular-webfont.woff") format("woff"), url("../fonts/lato-regular-webfont.ttf") format("truetype"), url("../fonts/lato-regular-webfont.svg") format("svg");
+}
+@font-face {
+    font-family: lato-bold-webfont;
+    src: url("../fonts/lato-bold-webfont.eot");
+    src: url("../fonts/lato-bold-webfont.woff") format("woff"), url("../fonts/lato-bold-webfont.ttf") format("truetype"), url("../fonts/lato-bold-webfont.svg") format("svg");
+}
+#header div {
+    margin: 0 auto;
+    max-width: 940px;
+    overflow: hidden;
+    padding: 41px 10px 27px;
+}
+#header div a.logo {
+    float: left;
+    margin: 0 0 0 29px;
+    padding: 0;
+    width: auto;
+}
+#header div a.logo img {
+    display: block;
+    margin: 0;
+    padding: 0;
+    width: auto;
+}
+#header div ul {
+    display: inline-block;
+    float: right;
+    list-style: none;
+    margin: 0 auto;
+    padding: 17px 0 0;
+    text-align: center;
+}
+#header div ul li {
+    display: inline-block;
+    margin: 0 35px;
+    padding: 0;
+    width: auto;
+}
+#header div ul li a {
+    color: #253a01;
+    padding: 0;
+}
+#header div ul li.selected a,
+#header div ul li.selected a:hover {
+    color: #cb3362;
+}
+#body.home div.body div div p a:hover,
+#header div ul li a:hover,
+#header div ul li.menu:hover ul li a {
+    text-decoration: underline;
+}
+#body div.blog .featured a.load,
+#body div.blog .featured ul li div a.more,
+#body div.blog .sidebar a.more,
+#body div.footer .contact form input#submit,
+#body div.singlepost .featured a.load,
+#body div.singlepost .sidebar a.more {
+    color: #a5838e;
+    font-family: lato-bold-webfont;
+    font-size: 16px;
+    line-height: 36px;
+}
+#header div ul li ul li a {
+    color: #cb3362;
+    padding: 0;
+}
+#header div ul li.menu {
+    min-height: 35px;
+    z-index: 80;
+}
+#header div ul li.menu ul {
+    display: block;
+    float: none;
+    left: -99999px;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    top: 24px;
+    width: 106px;
+    z-index: 90;
+}
+#header div ul li.menu ul#selected.primary,
+#header div ul li.menu:hover ul.primary {
+    left: -30px;
+}
+#header div ul li.menu ul#selected.secondary,
+#header div ul li.menu:hover ul.secondary {
+    left: -27px;
+}
+#header div ul li.menu ul li {
+    float: none;
+    margin: 0;
+    padding: 0;
+}
+#body.home {
+    margin: 0;
+    overflow: hidden;
+}
+#body.datenschutz,
+#body.impressum {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+#body.impressum a {
+    color: #fff;
+    text-decoration: underline;
+}
+#body.home div.header {
+    background-color: #1a6c68;
+    margin: 0;
+    max-width: none;
+    overflow: hidden;
+    padding: 0;
+    width: 100%;
+}
+#body.home div.header img {
+    display: block;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    max-width: 960px;
+    min-height: 660px;
+}
+#body.home div.header div {
+    margin: 0 auto;
+    max-width: 960px;
+    height: 660px;
+    padding: 0;
+}
+#body.home div.header div a {
+    background: url(../images/icons.webp) 0 -128px no-repeat;
+    color: #fff;
+    display: block;
+    font-family: quicksand-bold-webfont;
+    font-size: 24px;
+    height: 99px;
+    line-height: 24px;
+    margin: 0;
+    padding: 52px 0 0;
+    position: absolute;
+    right: 130px;
+    text-align: center;
+    top: 437px;
+    width: 156px;
+    z-index: 90;
+}
+#body.home div.body {
+    margin: 0;
+    max-width: none;
+}
+#body.home div.body div {
+    margin: 0 auto;
+    max-width: 960px;
+    overflow: hidden;
+    padding: 0;
+    text-align: left;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    color: #253a01;
+    font-size: 20px;
+}
+#body.home div.body div a {
+    color: #253a01;
+    margin: 0 10px;
+    text-decoration: underline;
+}
+#body.home div.body div div {
+    float: left;
+    margin: 0;
+    padding: 0 0 0 40px;
+    width: 560px;
+}
+#body.home div.body div img {
+    display: block;
+    float: right;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    width: auto;
+}
+#body.home div.body div div h1 {
+    color: #7a6666;
+    display: block;
+    font-family: lato-bold-webfont;
+    font-size: 18px;
+    line-height: 24px;
+    margin: 0;
+    padding: 47px 0 18px;
+    text-align: left;
+    width: 560px;
+}
+#body.home div.body div div h2 {
+    color: #e32a62;
+    display: block;
+    font-family: magra-bold-webfont;
+    font-size: 30px;
+    font-weight: 400;
+    line-height: 30px;
+    margin: 0;
+    padding: 0 0 26px;
+    text-align: left;
+    text-transform: none;
+    width: 560px;
+}
+#body.home div.body div div p,
+#body.home div.body div div p a {
+    display: block;
+    font-family: roboto-regular-webfont;
+    font-size: 14px;
+    line-height: 24px;
+    margin: 0;
+    font-weight: 400;
+    color: #7a6666;
+}
+#body.home div.body div div p {
+    padding: 0;
+    text-align: left;
+    width: 560px;
+}
+#body.home div.body div div p a {
+    padding: 0;
+    text-decoration: underline;
+}
+#body div.footer div h1,
+#body div.header div h1,
+#body.home div.footer div ul li h1 {
+    font-family: lato-regular-webfont;
+    text-transform: uppercase;
+}
+#body.home div.footer {
+    background-color: #1a6c68;
+    margin: 0;
+    max-width: none;
+    padding: 0;
+    width: 100%;
+    min-height: 136px;
+}
+#body.home div.footer div {
+    margin: 0 auto;
+    max-width: 960px;
+    overflow: hidden;
+    padding: 0;
+    text-align: left;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    color: #fff;
+    font-size: 20px;
+}
+#body.home div.footer div a {
+    color: #fff;
+    margin: 0 auto;
+    text-decoration: underline;
+    text-align: left;
+}
+#body.home div.footer div ul {
+    display: inline-block;
+    list-style: none;
+    margin: 0;
+    padding: 36px 0 32px;
+    width: 100%;
+}
+#body.home div.footer div ul li {
+    float: left;
+    margin: 0 10px;
+    padding: 0;
+    width: 220px;
+}
+#body.home div.footer div ul li a {
+    background: url(../images/icons.webp) no-repeat;
+    display: block;
+    height: 44px;
+    margin: 0 auto 22px;
+    padding: 0;
+    width: 80px;
+}
+#body.home div.footer div ul li a.product {
+    background-position: 0 -372px;
+}
+#body.home div.footer div ul li a.about {
+    background-position: 0 -418px;
+}
+#body.home div.footer div ul li a.flavor {
+    background-position: 0 -280px;
+}
+#body.home div.footer div ul li a.contact {
+    float: none;
+    background-position: 0 -326px;
+}
+#body.home div.footer div ul li h1 {
+    color: #fff;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 20px;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+}
+#body div.header {
+    background-color: #c8c10d;
+    margin: 0 auto;
+    max-width: none;
+    overflow: hidden;
+    padding: 0;
+}
+#body div.body,
+#footer {
+    background-color: #b0c95e;
+}
+#body div.header div {
+    margin: 0 auto;
+    max-width: 960px;
+    padding: 0;
+}
+#body div.header div h1 {
+    color: #fff;
+    font-size: 30px;
+    font-weight: 400;
+    line-height: 30px;
+    margin: 0;
+    padding: 28px 0 23px;
+    text-align: center;
+}
+#body div.body {
+    margin: 0;
+    max-width: none;
+    min-height: 136px;
+    overflow: hidden;
+    padding: 0;
+    width: 100%;
+}
+#body div.body img {
+    display: block;
+    left: 50%;
+    margin: 0 auto 0 -507px;
+    padding: 0;
+    position: absolute;
+    width: 1014px;
+}
+#body div.footer {
+    margin: 0 auto;
+    max-width: 960px;
+    overflow: hidden;
+    padding: 40px 0 110px;
+}
+#body div.footer div.sidebar {
+    background-color: #efedee;
+    float: left;
+    margin: 0 10px 0 40px;
+    padding: 36px 0 34px;
+    width: 280px;
+}
+#body div.footer div.article {
+    float: left;
+    margin: 0;
+    padding: 0 0 0 30px;
+    width: 560px;
+}
+#body div.footer div.sidebar h1 {
+    display: block;
+    line-height: 48px;
+    margin: 0 auto;
+    padding: 0 0 50px;
+    text-align: center;
+    width: 193px;
+}
+#body div.footer div.sidebar p {
+    display: block;
+    line-height: 48px;
+    margin: 0 auto;
+    text-align: center;
+    width: 169px;
+}
+#body div ul li h2,
+#body div ul li p,
+#body div.footer div h1,
+#body div.footer div p a {
+    font-weight: 400;
+    line-height: 24px;
+}
+#body div.footer div h1 {
+    color: #cb3362;
+    font-size: 24px;
+    margin: 0;
+    padding: 0 0 27px;
+    text-align: left;
+}
+#body div.footer div span {
+    display: block;
+    margin: 0;
+    padding: 0;
+}
+#body div.footer div p a {
+    color: #7a6666;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    font-size: 20px;
+    margin: 0;
+    padding: 0;
+    text-decoration: underline;
+}
+#body div {
+    margin: 0 auto;
+    max-width: 960px;
+    padding: 7px 0 57px;
+}
+#body div ul {
+    display: inline-block;
+    margin: 0;
+    overflow: hidden;
+    width: 100%;
+}
+#body div ul li {
+    margin: 0 10px;
+    padding: 0;
+}
+#body div ul li h1 {
+    color: #e32a62;
+    font-family: magra-bold-webfont;
+    font-size: 28px;
+    font-weight: 400;
+    line-height: 28px;
+    margin: 0;
+    padding: 87px 0 27px 30px;
+    text-align: left;
+    text-transform: capitalize;
+}
+#body div ul li p {
+    color: #7a6666;
+    font-family: roboto-regular-webfont;
+    font-size: 14px;
+    margin: 0;
+    padding: 0 0 0 30px;
+    text-align: left;
+    width: 190px;
+}
+#body div ul li p a,
+#body div.blog .featured ul li div p a,
+#body div.blog .sidebar p a,
+#body div.singlepost .sidebar p a,
+#body.contact div.body div div p a {
+    color: #7a6666;
+    font-family: roboto-regular-webfont;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 24px;
+    margin: 0;
+    padding: 0;
+    text-decoration: underline;
+}
+#body div ul li h2,
+#body div.blog .featured ul li div h1 {
+    font-family: lato-regular-webfont;
+    text-transform: uppercase;
+}
+#body div ul li img {
+    display: block;
+    margin: 0 auto 15px;
+    padding: 0;
+    width: auto;
+}
+#body div ul li h2 {
+    color: #e32a62;
+    font-size: 20px;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+}
+#body div.blog {
+    margin: 0 auto;
+    max-width: 960px;
+    overflow: hidden;
+    padding: 98px 0 146px;
+}
+#body div.singlepost {
+    margin: 0 auto;
+    max-width: 960px;
+    overflow: hidden;
+    padding: 98px 0 99px;
+}
+#body div.blog .featured,
+#body div.singlepost .featured {
+    float: left;
+    margin: 0 10px;
+    padding: 0;
+    width: 620px;
+}
+#body div.blog .featured ul {
+    display: inline-block;
+    list-style: none;
+    margin: 0;
+    overflow: hidden;
+    padding: 0;
+    width: 100%;
+}
+#body div.blog .featured ul li:first-child {
+    margin: 0 0 50px;
+}
+#body div.blog .featured ul li {
+    background: url(../images/bg-border.gif) bottom center no-repeat;
+    float: none;
+    margin: 0 0 39px;
+    overflow: hidden;
+    padding: 0;
+    width: auto;
+}
+#body div.blog .featured ul li img {
+    float: left;
+    margin: 2px 0 0;
+    padding: 0 30px;
+    width: auto;
+}
+#body div.blog .featured ul li div {
+    float: left;
+    margin: 0;
+    padding: 0 0 36px 10px;
+    width: 370px;
+}
+#body div.blog .featured ul li div h1 {
+    color: #cb3362;
+    font-size: 24px;
+    font-weight: 400;
+    line-height: 24px;
+    margin: 0;
+    padding: 0 0 3px;
+    text-align: left;
+}
+#body div.blog .featured ul li div p,
+#body div.blog .featured ul li div span {
+    color: #7a6666;
+    font-family: roboto-regular-webfont;
+    text-align: left;
+    margin: 0;
+    font-weight: 400;
+    line-height: 24px;
+}
+#body div.blog .featured ul li div span {
+    display: block;
+    font-size: 12px;
+    padding: 0 0 24px;
+    text-transform: none;
+}
+#body div.blog .featured ul li div p {
+    font-size: 14px;
+    padding: 0 0 39px;
+    width: 100%;
+}
+#body div.blog .featured ul li div a.more {
+    border: 2px solid #cbb5bc;
+    display: block;
+    font-weight: 400;
+    height: 36px;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    text-transform: uppercase;
+    width: 156px;
+}
+#body div.blog .featured ul li div a.more:hover,
+#body div.blog .sidebar a.more:hover,
+#body div.singlepost .featured a.load:hover,
+#body div.singlepost .sidebar a.more:hover {
+    background-color: #c8c10d;
+    border: none;
+    color: #fff;
+    height: 40px;
+    line-height: 40px;
+    width: 160px;
+}
+#body div.blog .featured a.load {
+    border: 2px solid #cbb5bc;
+    display: block;
+    font-weight: 400;
+    height: 36px;
+    margin: 0 auto;
+    padding: 0;
+    text-align: center;
+    text-transform: uppercase;
+    width: 156px;
+}
+#body div.blog .featured a.load:hover {
+    background-color: #cb3362;
+    border: none;
+    color: #fff;
+    height: 40px;
+    line-height: 40px;
+    width: 160px;
+}
+#body div.blog .sidebar,
+#body div.singlepost .sidebar {
+    background-color: #efedee;
+    float: left;
+    margin: 0;
+    padding: 0 0 71px;
+    width: 280px;
+}
+#body div.blog .sidebar h1,
+#body div.singlepost .sidebar h1 {
+    color: #cb3362;
+    font-family: magra-bold-webfont;
+    font-size: 30px;
+    font-weight: 400;
+    line-height: 30px;
+    margin: 0;
+    padding: 42px 0 29px;
+    text-align: center;
+    text-transform: capitalize;
+}
+#body div.blog .sidebar img,
+#body div.singlepost .sidebar img {
+    display: block;
+    margin: 0 auto;
+    padding: 0;
+    width: auto;
+}
+#body div.blog .sidebar h2,
+#body div.singlepost .sidebar h2 {
+    color: #cb3362;
+    font-family: lato-regular-webfont;
+    font-size: 24px;
+    font-weight: 400;
+    line-height: 24px;
+    margin: 0;
+    padding: 34px 0 3px;
+    text-align: center;
+    text-transform: uppercase;
+}
+#body div.blog .sidebar p,
+#body div.blog .sidebar span,
+#body div.singlepost .sidebar p,
+#body div.singlepost .sidebar span {
+    font-family: roboto-regular-webfont;
+    text-transform: none;
+    font-weight: 400;
+    line-height: 24px;
+    color: #7a6666;
+    display: block;
+    text-align: center;
+}
+#body div.blog .sidebar span,
+#body div.singlepost .sidebar span {
+    font-size: 12px;
+    margin: 0;
+    padding: 0 0 24px;
+}
+#body div.blog .sidebar p,
+#body div.singlepost .sidebar p {
+    font-size: 14px;
+    margin: 0 auto;
+    padding: 0 0 64px;
+    width: 200px;
+}
+#body div.blog .sidebar a.more,
+#body div.singlepost .sidebar a.more {
+    border: 2px solid #d3c2c7;
+    display: block;
+    font-weight: 400;
+    height: 36px;
+    margin: 0 auto;
+    padding: 0;
+    text-align: center;
+    text-transform: uppercase;
+    width: 156px;
+}
+#body div.singlepost .featured img {
+    display: block;
+    margin: 0;
+    padding: 1px 0 0 30px;
+    width: auto;
+}
+#body div.singlepost .featured h1 {
+    color: #cb3362;
+    font-family: lato-regular-webfont;
+    font-size: 24px;
+    font-weight: 400;
+    line-height: 24px;
+    margin: 0;
+    padding: 40px 0 4px 30px;
+    text-align: left;
+    text-transform: uppercase;
+}
+#body div.singlepost .featured span {
+    color: #7a6666;
+    display: block;
+    font-family: Arial;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 24px;
+    margin: 0;
+    padding: 0 0 23px 30px;
+    text-align: left;
+    text-transform: none;
+}
+#body div.singlepost .featured p,
+#body div.singlepost .featured p a {
+    color: #7a6666;
+    font-family: Arial;
+    font-size: 14px;
+    font-weight: 400;
+    margin: 0;
+    line-height: 24px;
+}
+#body div.singlepost .featured p {
+    padding: 0 0 24px 30px;
+    text-align: left;
+}
+#body div.footer .contact h1,
+#body div.footer .section h1,
+#body.contact div.body div div h1 {
+    color: #cb3362;
+    font-size: 24px;
+    text-transform: uppercase;
+}
+#body div.singlepost .featured p a {
+    padding: 0;
+    text-decoration: underline;
+}
+#body div.singlepost .featured a.load {
+    border: 2px solid #cbb5bc;
+    display: block;
+    font-weight: 400;
+    height: 36px;
+    margin: 63px auto 0;
+    padding: 0;
+    text-align: center;
+    text-transform: uppercase;
+    width: 156px;
+}
+#body.contact div.body {
+    background: url(../images/map.jpg) center top no-repeat #b5aaad;
+    margin: 0;
+    max-width: none;
+    padding: 0;
+    width: 100%;
+}
+#body.contact div.body div {
+    margin: 0 auto;
+    max-width: 960px;
+    overflow: hidden;
+    padding: 39px 0 0;
+}
+#body.contact div.body div div {
+    background: url(../images/bg-transparent.webp);
+    margin: 0 auto;
+    overflow: hidden;
+    padding: 30px 0 35px 133px;
+    width: 747px;
+}
+#body div.footer .contact form input,
+#body div.footer .contact form textarea {
+    border: 1px solid #b6adb0;
+    width: 548px;
+    background: 0 0;
+    display: block;
+    font-family: lato-regular-webfont;
+}
+#body.contact div.body div div img {
+    float: left;
+    left: auto;
+    margin: 0 38px 0 0;
+    padding: 0;
+    position: relative;
+    width: auto;
+}
+#body.contact div.body div div h1 {
+    float: left;
+    font-family: lato-regular-webfont;
+    font-weight: 400;
+    line-height: 24px;
+    margin: 0;
+    padding: 15px 0 4px;
+    text-align: left;
+    width: 510px;
+}
+#body div.footer .contact form input,
+#body div.footer .contact form textarea,
+#body.contact div.body div div p {
+    color: #7a6666;
+    font-size: 14px;
+    text-align: left;
+    font-weight: 400;
+}
+#body.contact div.body div div p {
+    float: left;
+    font-family: roboto-regular-webfont;
+    line-height: 24px;
+    margin: 0;
+    padding: 0;
+    width: 510px;
+}
+#body div.footer .contact {
+    float: left;
+    margin: 0 10px 0 0;
+    max-width: none;
+    padding: 0 0 61px 40px;
+    width: 590px;
+}
+#body div.footer .contact h1 {
+    float: none;
+    font-family: lato-regular-webfont;
+    font-weight: 400;
+    line-height: 24px;
+    margin: 0;
+    padding: 0 0 43px;
+    text-align: left;
+    width: auto;
+}
+#body div.footer .contact form {
+    margin: 0;
+    overflow: hidden;
+    padding: 0;
+    width: 560px;
+}
+#body div.footer .contact form input {
+    height: 38px;
+    line-height: 38px;
+    margin: 0 0 8px;
+    padding: 0 0 0 10px;
+}
+#body div.footer .contact form textarea {
+    height: 270px;
+    line-height: 24px;
+    margin: 0 0 9px;
+    overflow: auto;
+    padding: 7px 0 0 10px;
+    resize: none;
+}
+#body div.footer .contact form input#submit {
+    background: 0 0;
+    border: 2px solid #c5abb4;
+    cursor: pointer;
+    display: block;
+    font-weight: 400;
+    height: 40px;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    text-transform: uppercase;
+    width: 141px;
+}
+#body div.footer .contact form input#submit:hover {
+    background-color: #c8c10d;
+    border: none;
+    height: 40px;
+    width: 141px;
+}
+#body div.footer .section {
+    background-color: #efedee;
+    float: left;
+    margin: 0;
+    max-width: none;
+    padding: 0 0 35px;
+    width: 280px;
+}
+#body div.footer .section h1 {
+    display: block;
+    font-family: lato-regular-webfont;
+    font-weight: 400;
+    line-height: 24px;
+    margin: 0 auto;
+    padding: 24px 0 27px;
+    text-align: center;
+    width: 202px;
+}
+#body div.footer .section p,
+#footer div p {
+    display: block;
+    font-family: roboto-regular-webfont;
+    font-weight: 400;
+    text-align: center;
+}
+#body div.footer .section p {
+    color: #7a6666;
+    font-size: 14px;
+    line-height: 24px;
+    margin: 0 auto;
+    padding: 0;
+    width: 202px;
+}
+.background-div {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+.background-img {
+    object-fit: contain;
+    object-position: center;
+    background-size: contain;
+}
+#body.impressum {
+    background-color: #1a6c68;
+    color: #fff;
+    text-align: center;
+    font-size: 20px;
+  
+}
+
+#body.datenschutz {
+    background-color: #1a6c68;
+    color: #fff;
+    text-align: left;
+    font-size: 20px;
+}
+#body.datenschutz a {
+    color: #fff;
+    text-decoration: underline;
+}
+#body.unsere_mitglieder {
+    background-color: #1a6c68;
+    
+}
+#body.unsere_mitglieder .logo-grid {
+    display: grid;
+    grid-template-columns: repeat(3,minmax(150px, 1fr));
+    gap: 10px;
+    list-style: none;
+    max-width: 960px;
+    width: 100%;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 0 20px;
+    padding-left: 60px;
+    margin: 0 auto;
+}
+#body.unsere_mitglieder .logo-grid li {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+    width: 140px;
+    height: 150px;
+    background-color: white;
+    overflow: visible;
+    aspect-ratio: 1 / 1;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    
+    
+}
+#body.unsere_mitglieder .logo-grid img {
+    max-width: 100%;
+    max-height: 100%;
+    width: 150px;
+    height: 120px;
+    object-fit: contain;
+    margin: auto;
+    display: block;
+}
+
+
+
+/* Hintergrund-Overlay */
+.popup-container {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5); /* Dunkler Hintergrund */
+    justify-content: center;
+    align-items: center;
+}
+
+/* Pop-up-Fenster */
+.popup-content {
+    background: white;
+    padding: 20px;
+    width: 80%;
+    max-width: 400px;
+    border-radius: 8px;
+    text-align: center;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+    position: relative;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+
+/* Schließen-Button */
+.close-btn {
+    position: absolute;
+    top: 10px;
+    right: 15px;
+    font-size: 24px;
+    cursor: pointer;
+    color: #333;
+}
+
+.close-btn:hover {
+    color: red;
+}
+
+
+#footer {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    text-align: center;
+}
+#footer div {
+    margin: 0 auto;
+    max-width: 960px;
+    overflow: hidden;
+    padding: 59px 0 13px;
+}
+#footer div p {
+    color: #fff;
+    font-size: 12px;
+    line-height: 15px;
+    margin: 0;
+    padding: 33px 0 50px;
+    text-transform: none;
+}
+#footer a {
+    color: #253a01;
+    margin: 0 10px;
+    font-size: 20px;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+#footer a:hover {
+    text-decoration: underline;
+}