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

#top {
   max-width: 1200px;
   min-height: 100%;
   min-height: 100vh;
   padding-bottom: 59px;
}


/* #Kopfbereich */
#kopfleiste {
   border-bottom: 8px solid #5f44a3;
}

#logo {
   font-size: 50px;
   line-height: 1;
   margin: 5px 10px;
   padding: 3px 15px;
   letter-spacing: 2px;
}
#logo > img {
   margin-right: 20px;
   vertical-align: -13px;
}

#deal {
   position: absolute;
   top: 28%;
   right: 0;
   font-size: 20px;
   width: 192px;
   padding: 3px;
}

#kopfleiste > label,
#kopfleiste > label > hr,
#m-filter {
   display: none;
}

#suche {
   position: absolute;
   top: 14.5%;
   right: 50%;
   margin-right: -230px;
   padding: 2px;
   background-color: lightgrey;
}

#suche > input:first-child {
   width: 285px;
}

#suche > input.button {
   width: 40px;
   height: 26px;
   padding: 3px;
}


/* Inhaltsbereich */
header + div {
   display: table;
   table-layout: fixed;
   width: 100%;
}

header + div > * {
   display: table-cell;
   box-sizing: content-box;
}


/* Inhaltsbereich: Randbereich */
main + aside {
   width: 200px;
   padding-left: 10px;
   background-color: #f5f7fc;
}

main + aside > div {
   width: inherit;
}

main + aside   ul.grob > li {
   font-size: 14.4px;
   font-size: .9rem;
}

#anbieter   li {
   max-width: 88%;
}
#anbieter   li:first-child:nth-last-child(n + 4),
#anbieter   li:first-child:nth-last-child(n + 4) ~ li {
   width: 50%;
}

#anbieter   li > a {
   width: 200px;
}

#anbieter   li:nth-child(odd) > a:hover::after,
#anbieter   li:nth-child(2):last-child > a:hover::after,
#anbieter   li:nth-child(2):nth-last-child(2) > a:hover::after,
#anbieter   li:first-child:nth-last-child(n + 4) ~ li:nth-child(even) > a:hover::before {
   content: "";
   position: absolute;
   top: 16px;
   width: 10px;
   height: 10px;
   margin-left: 1px;
   background-image: url("css/onlineshop_link_v1.svg");
   background-color: white;
}
#anbieter   li:first-child:nth-last-child(n + 4) ~ li:nth-child(even) > a:hover::before {
   margin-left: -11px;

}
/*Deiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiichmann*/


main + aside   .werbung /*aka Skyscraper*/ {
   max-height: 600px;
   padding: 0 26px 0 24px;
}
main + aside   .werbung::after {
   position: absolute;
   bottom: 22px;
   right: -2px;
   -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
       -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
           transform: rotate(90deg);
}


/* Hauptbereich: init */
main > div > article {
   box-sizing: border-box;
   width: 50%;
   padding: 0 30px;
}
main > div > article + article {
   margin-top: .3em;
}

/* Hauptbereich: Angebotsliste */
#liste > label {
   margin-right: 17px;
}

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

/* Hauptbereich: Übersicht */
#vz   aside > div {
   top: 2em;
}

/*Kontakt*/
#kontakt   th {
   font-size: 15px;
   line-height: 1.4;
}

#kontakt   th:first-child {
   padding: .5em;
}

#kontakt   input[type=text],
#kontakt   input[type=email] {
   width: 360px;
}

#kontakt   input[type=url],
#kontakt   textarea {
   width: 620px;
}

#kontakt   span {
   font-size: 15px;
}

#einreichen   col:first-child {
   width: 220px;
}

#spenden   table {
   max-width: 780px;
   margin-left: 220px;
}

/* Datenschutz und Impressum */
#recht   aside > div > div {
   padding: 5px 8px;
}


/* Fußbereich */
footer {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
}