@charset "UTF-8"; /*© Christof Grusdat*/

body > div {
   min-width: 320px;
}

#m-navi:checked ~ header > #kopfleiste > label {
   opacity: 1;
   -webkit-transition: background-color 500ms linear;
      -moz-transition: background-color 500ms linear;
       -ms-transition: background-color 500ms linear;
        -o-transition: background-color 500ms linear;
           transition: background-color 500ms linear;
}
#m-navi:checked ~ header > #kopfleiste > label::before,
#m-navi:checked ~ header > #kopfleiste > label::after {
   -webkit-transition: border-top,border-bottom,-webkit-transform 100ms ease 50ms;
      -moz-transition: border-top,border-bottom,-moz-transform 100ms ease 50ms;
       -ms-transition: border-top,border-bottom,-ms-transform 100ms ease 50ms;
        -o-transition: border-top,border-bottom,-o-transform 100ms ease 50ms;
           transition: border-top,border-bottom,transform 100ms ease 50ms;
}
#m-navi:checked ~ header > #kopfleiste > label::before {
   top: 7px;
   -webkit-transform: rotate(42deg);
      -moz-transform: rotate(42deg);
       -ms-transform: rotate(42deg);
        -o-transform: rotate(42deg);
           transform: rotate(42deg);
}
#m-navi:checked ~ header > #kopfleiste > label > hr {
   display: none;
}
#m-navi:checked ~ header > #kopfleiste > label::after {
   top: 4px;
   -webkit-transform: rotate(-42deg);
      -moz-transform: rotate(-42deg);
       -ms-transform: rotate(-42deg);
        -o-transform: rotate(-42deg);
           transform: rotate(-42deg);
}

#m-navi:checked ~ header > nav > ul,
#m-navi:checked ~ header > nav + label {
   display: block;
}

nav > ul,
nav + label,
#m-navi:checked ~ header + div > main {
   display: none;
}

#m-navi:checked ~ header + div > aside {
   margin-top: 0;
}


/* #Kopfbereich */
#kopfleiste {
   padding: 4px 0;
}

#logo {
   font-size: 26px;
   width: 48%;
   line-height: 1.2;
   vertical-align: middle;
   letter-spacing: 1px;
   outline-offset: 1px;
}

#logo > img {
   margin: 0 4% 0 2%;
   width: auto;
   height: 30px;
   vertical-align: top;
}

#deal {
   font-size: 18px;
   padding: 3px 6px 2px;
   vertical-align: top;
}

#deal + label {
   position: absolute;
   right: 2%;
   width: 35px;
   height: 18px;
   padding: 7px 0;
   text-align: center;
   background-color: white;
   opacity: .7;
   -webkit-transition: opacity 200ms ease 150ms;
      -moz-transition: opacity 200ms ease 150ms;
       -ms-transition: opacity 200ms ease 150ms;
        -o-transition: opacity 200ms ease 150ms;
           transition: opacity 200ms ease 150ms;
}
#deal + label:focus {
   outline: goldenrod 1px solid;
   outline-offset: 1px;
}

#deal + label::before,
#deal + label::after {
   content: "";
   display: block;
   width: 100%;
}
#deal + label::before {
   border-top: 3px solid black;
}
#deal + label > hr {
   height: 3px;
   margin: 5px 0;
}

#deal + label::after {
   border-bottom: 3px solid black;
}

#suche {
   width: 100%;
   padding: 8px 0;
   text-align: center;
   background-color: #5f44a3; /*#FFF2AA*/
}

#suche > input:first-child {
   font-size: 17px;
   width: 78%;
   padding-top: 0;
}

#suche > input.button {
   max-width: 70px;
   width: 15%;
   height: 26px;
   padding: 3px 0;
}

nav + label {
   position: relative;
   font-size: .9em;
   padding: 4px 0;
   border-top: 1px solid #a9a9a9;
   border-bottom: 1px solid gray;
   text-align: center;
   font-style: italic;
   font-weight: 700;
   background-color: #d3d3d3;
   cursor: pointer;
}
nav + label::before {
   content: "Navigation ausblenden";
}
nav + label::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   height: 10px;
   bottom: 25px;
   background-repeat: no-repeat;
   background-position: top center;
   background-size: contain;
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAMCAAAAAA4ttDWAAAAAnRSTlMAAHaTzTgAAABFSURBVHjajdC5DQAgDENRj+512JIIAeLIYTdp/msCuCOhj2N63GwamLEGVrwPpZgswR0X4I8T4McBiGMH5PEDjiezALYOxFmfs3QzR6sAAAAASUVORK5CYII=");
}

nav   li {
   min-width: 180px;
   max-width: 240px;
   width: 40%;
   text-align: center;
}
nav   li + li {
   margin-top: 3px;
   border-left: 0 none transparent;
}

main + aside {
   margin-top: 20px;
}


/* Inhaltsbereich: Randbereich */
main + aside > div {
   text-align: center;
}

#m-filter {
   width: 80%;
   padding: 0;
   background-color: transparent;
}
#m-filter::after
{
   content: "";
   display: block;
   height: 26px;
   padding: 2px 0;
   border: 1px solid lightgray;
   border-top: 0 none;
   border-bottom-left-radius: 80px;
   border-bottom-right-radius: 80px;
   background-repeat: no-repeat;
   background-origin: content-box;
   background-position: center center;
   background-size: contain;
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAaCAYAAABLlle3AAADRklEQVR42rWVS0iUURTHr9ljkSVtCoLatYgW0bK1qMz4IF+D5hAqijSJ4kLRzaSCgqkYik4wD8UEHUFT1NFRx0EddR4647hpEdSqFkFWC2kRePqfyzcyTWNm+h34cb9777nnf++5j08IxTIyMq6A2+A+0Gm12ufAptFonGAHfAB7YB/8BAdKua+0vwchxd+mjNcp8ThukogSuwrMcAinp6d/S01NJQyiwsJCKi8vp5qaGmpubqb29nbq7u6m3t5e6uvrI5PJRP39/bLO7dzPfvX19WQwGKi4uFjGSUlJobS0tK/43oWOBdxg0R1AJSUlcuDIyAg5HA6amZmh+fl58nq95PP5ZHkc7Mf4/X4KBAK0tbVFCwsLcnK8ANYBPpGdne3Lysqi2tpaam1tlSsYHh6m6elpCgaDku3tbRmA4WCxRPrYj/1DoRBtbm7KSfMienp6qLGxUYpCzy+ampqS0RDMyckhpDgyGwm3lZaWyhQ3NDTI9LW1tcmMdHR0yJLr3M797McZ43GZmZmHcThuXl4etbS0fBkYGLgp95WIEsLh8KvZ2Vmy2WzU1dVFRqOR6urqqKqqiioqKqR4QUEB5efnywAcODc3V37rdDoqKioivV5PZWVlVFlZSdXV1XIinZ2dcruQBS90kkW0IT0J2Jcnkf3h9GxsbND6+jqtra1JnE4nmc1mslgsf2C1WuWEGayGBgcHZWo9Hg/HQkjvZXGUweEh+Mii8eBscMC/waKjo6NywhjzRvyLwfE6CMQT5SxMTk7KFR0lOD4+LrMEfxNIFCcxDLDGE+ZrYbfb44pOTEzIfvi9EP9rGKyPJ7yyskJDQ0O/rXBubu5AOQ9PxWkNQe6Az7FpnpqaOjw0LpcrcgAfibMyBLsF3LErZkG+EhD8gbpGnLUh6IPY1Y6NjdHS0hLXPwk1DIGvxTvJy8vLXPepJXopVpTvrdvt5rpdLdGLYC9alB91PsmnuiLHiF4A76JF+de1urrKdYNaouf5HY0WXVxcjLyvWrVEE4EjWpRPrvLG3lNL9Bx4HSuq1JPUEk0AL6NF+SXib6GmQcAY+waj/K626DNwEBFVDtFbtUUfx/nruNQW5btqUR6JfeABd08S4xe3SRxy4MKh5QAAAABJRU5ErkJggg==");
   background-color: whitesmoke;
   opacity: .9;
}

.anbieter > h4,
#anbieter > h4 {
   text-shadow: 0 0 1px black;
}
/*
.anbieter > h4::before,
#anbieter > h4::before {
   content: "";
   right: .3em;
   width: .9em;
   height: .9em;
   margin-right: .3em;
   background-image: url("css/externer_link_button_v1.svg");
}
*/
.anbieter > h4::after,
#anbieter > h4::after {
   content: "";
   left: .3em;
   width: .9em;
   height: .9em;
   margin-left: .2em;
   background-image: url("css/onlineshop_link_mobile_v1.svg");
}

.anbieter > ul,
#anbieter > ul {
   white-space: nowrap;
   overflow-x: auto;
   padding-bottom: 5px;
}

.anbieter > ul.z2,
.anbieter > ul.z3,
#anbieter > ul.z2,
#anbieter > ul.z3 {
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: min-content;
}
.anbieter > ul.z2,
#anbieter > ul.z2 {
   grid-template-rows: auto auto;
}
.anbieter > ul.z3,
#anbieter > ul.z3 {
   grid-template-rows: auto auto auto;
}

.anbieter > ul::-webkit-scrollbar,
#anbieter > ul::-webkit-scrollbar {
   height: 25px;
}

.anbieter > ul::-webkit-scrollbar-thumb,
#anbieter > ul::-webkit-scrollbar-thumb {
   background-color: lightgray;
   border-radius: 5px;
}

.anbieter   li > a,
#anbieter   li > a {
   width: 100px; /*120px*/
}
/*
.anbieter   li > a > *,
#anbieter   li > a > * {
   margin-right: 15px;
}
.anbieter   li > a::after,
#anbieter   li > a::after {
   content: "";
   position: absolute;
   top: 50%;
   right: 5px;
   width: 10px;
   height: 10px;
   margin-top: -5px;
   background-image: url("css/onlineshop_link_v1.svg");
}
*/

/* Hauptbereich: init */
main > div > article {
   padding: 0 5px;
}
main > div > article + article {
   margin-top: 1em;
}

/* Hauptbereich: Angebotsliste */
#liste > label {
   right: 0;
}

#liste > iframe {
   height: 568px;
   height: 100vh;
}

/* Hauptbereich: Angebotdetail */
#empfehlungen > div > div {
   width: 47.684%;
}

#empfehlungen   h5 {
   font-size: .9em;
}

#empfehlungen > div > div > div > * {
   width: 90%;
}

/* Hauptbereich: Übersicht */
#vz   main > ul > li {
   width: 49.8%;
   margin-left: .2%;
}

#vz   .wenden > li {
   position: relative;
}
#vz   .wenden > li:first-child,
#vz   .wenden > li:first-child + li {
   top: 29px;
}

#vz   .wenden > li:first-child + li ~ li {
   top: -29px;
}

#vz   main   img {
   display: block;
   margin: .4em auto .8em;
}

/* Kontakt */
#kontakt   th {
   font-size: small;
   line-height: 2;
}

#kontakt   th:first-child {
   padding-right: 3px;
}

#kontakt   label {
   font-size: .9em;
}

#kontakt   textarea,
#kontakt   input[type=text],
#kontakt   input[type=email],
#kontakt   input[type=url] {
   width: 100%;
}

#kontakt   textarea {
   font-size: small;
   resize: vertical;
}

#kontakt   span {
   font-size: .9em;
   display: inline-block;
}

/* Datenschutz und Impressum */
#recht   h2,
#recht   h3 {
   padding: 0 3%;
}

#recht   h2 + h3,
#recht   h2 + h3 + pre {
   display: none;
}


/* Fußbereich */
footer {
   margin-top: 15px;
}