@charset 'utf-8';

/* Reset based on http://meyerweb.com/eric/tools/css/reset/ */
*{box-sizing:border-box;box-decoration-break:clone}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,button,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,input,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,select,small,span,strike,strong,sub,summary,sup,table,tbody,td,textarea,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none}html{overflow-y:scroll}body{background-color:white}b,strong{font-weight:700}em,i{font-style:italic}h1,h2,h3,h4,h5,h6{font-weight:400}button,input[type=button],input[type=submit],label{cursor:pointer}q:lang(de){quotes:'»' '«' '›' '‹'}q:lang(en){quotes:'»' '«' '›' '‹'}abbr[title]{border-bottom:1px dotted #eee;cursor:help}a abbr{cursor:pointer!important}.clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden}
/* Reset Ende */

:root {
scroll-behavior: smooth;
}

@font-face {
font-family: 'Sassoon';
src: url('../fonts/sassoon.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'CharisSIL';
src: url('../fonts/charissilr-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'CharisSIL';
src: url('../fonts/charissilb-webfont.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'CharisSIL';
src: url('../fonts/charissili-webfont.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
}

a,
a img:hover,
a#shop span {
-webkit-transition-property: all;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: all;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: all;
-o-transition-duration: 400ms;
-o-transition-timing-function: ease-out;
transition-property: all;
transition-duration: 400ms;
transition-timing-function: ease-out;
}

::selection {
background: rgba(180,0,10,0.1);
color: black;
}

img, ul.seitenvorschau li {
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
-moz-user-drag: none;
-webkit-user-drag: none;
user-drag: none;
}

ul.seitenvorschau {
margin: auto;
}

ul.seitenvorschau li img {
max-width: 100%;
max-height: 100%;
}

body,
div.suche form input {
font-family: 'CharisSIL', Georgia, Serif;
font-size: 15px;
line-height: 22px;
text-shadow: 0 1px 0 white;
}

body.vorschau {
display: flex;
flex-flow: row wrap;
width: 100vw;
height: 100vh;
background: transparent;
}

div.tuete div,
header div,
footer div.mitte,
section {
position: relative;
width: 992px;
margin: 0 auto;
}

.programm header div,
.programm section {
width: 100%;
padding: 0 2em;
margin: 0 auto;
}

.programm footer div.mitte {
width: 100%;
padding: 1em 2em;
}

.programm footer div.mitte img.figur {
left: 1em;
}

div.suche {
background: rgb(248,230,231);
padding: 8px 16px;
}

div.suche form {
text-align: right;
}

div.suche form label {
margin: 0 8px 0 0;
}

div.suche form input {
padding: 2px 8px;
border: 2px solid white;
-webkit-border-radius: 4px;
border-radius: 4px;
}

div.suche form input:focus {
border-color: rgb(180,0,10);
outline: none;
}

nav.haupt ul li.suche,
.js div.suche {
display: none;
}

.js div.suche.aktiv {
display: block;
}

.js nav.haupt ul li.suche {
display: inline-block;
}

li.suche svg circle,
li.suche svg line {
fill: none;
stroke: black;
stroke-width: 2px;
}

li.suche a:hover svg circle,
li.suche a:hover svg line {
stroke: rgb(180,0,10);
}

li.suche span svg circle,
li.suche span svg line {
stroke: white;
}


header {
-webkit-box-shadow: 0 0 24px rgba(0,0,0,0.08);
-moz-box-shadow: 0 0 24px rgba(0,0,0,0.08);
box-shadow: 0 0 24px rgba(0,0,0,0.08);
}

header h1,
nav.haupt,
aside,
article {
display: inline-block;
vertical-align: top;
}

header h1 a,
a#shop,
a#shop div {
display: block;
font-size: 0;
line-height: 0;
color: transparent;
background-repeat: no-repeat;
}

header h1 a {
width: 192px;
height: 59px;
margin: 24px 64px 24px 0;
background-image: url(../img/rieder.svg);
background-size: auto 100%;
}

div.shoplink {
margin: 0 0 32px 0;
text-align: center;
font-size: 13px;
line-height: 18px;
}

a#shop {
position: relative;
width: 192px;
height: 144px;
margin: 0 0 12px 0;
}

a#shop div {
position: relative;
top: 0;
left: 0;
width: 192px;
height: 144px;
background-image: url(../img/shop.svg);
}

a#shop span {
position: relative;
font-family: 'Sassoon';
font-size: 24px;
color: white;
background: rgb(180,0,10);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: none;
text-decoration: none;
padding: 14px 24px 12px 24px;
width: 192px;
top: 128px;
}

a#shop:hover span {
color: rgb(180,0,10);
background: rgb(248,230,231);
}

img#e {
position: absolute;
top: 112px;
right: 0px;
width: 704px;
height: 576px;
z-index: 1;
}

nav.haupt {
float: right;
}

nav.haupt ul {
text-align: right;
float: left;
padding: 64px 0 0 0;
}

nav.haupt ul li {
display: inline-block;
vertical-align: top;
margin: 0 0 0 8px;
}

nav.haupt ul li a,
nav.haupt ul li span {
position: relative;
display: inline;
font-family: 'Sassoon';
font-size: 18px;
vertical-align: bottom;
padding: 6px 10px;
text-decoration: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

nav.haupt ul li a {
background-position: 0 -48px;
color: black;
background: rgb(240,240,240);
}

nav.haupt ul li a:hover {
color: rgb(180,0,10);
background: rgb(248,230,231);
}

nav.haupt ul li span {
color: white;
background: rgb(180,0,10);
text-shadow: none;
}

nav.haupt ul li span:after,
ul.mmlm-filter li.aktiv a:after,
a.reinschauen:after {
top: 100%;
left: 50%;
border: solid transparent;
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0,0,0,0);
border-top-color: rgb(180,0,10);
border-width: 6px;
margin-left: -6px;
}

aside {
width: 192px;
padding: 32px 0 0 0;
margin: 8px 64px 32px 0;
position: relative;
z-index: 9;
}

aside div {
margin: 0 0 32px 0;
}

div.tuete {
background: rgb(248,230,231);
margin: 0 0 16px 0;
padding: 6px 0 10px 0;
}

div.tuete img {
float: left;
margin: -16px 24px 0 0;
width: 42px;
height: 69px;
}

div.tuete a.knopf {
display: inline-block;
float: none;
margin: 8px 0 4px 0;
}

div.tuete h3 {
display: inline;
font-size: 18px;
font-weight: bold;
color: rgb(180,0,10);
margin: 8px 0 0 0;
}

div.tuete p {
display: inline;
margin: 0 4px 0 4px;
}

article {
margin: 24px 0 32px 0;
position: relative;
z-index: 10;
}

article.aside {
width: 736px;
}

article.programm,
article.suche {
width: 100%;
}

b {
font-family: 'CharisSIL';
font-weight: bold;
}

.knopf {
display: block;
float: left;
text-decoration: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 1px 7px;
border: 1px solid rgb(204,204,204);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

.knopf.top {
display: inline-block;
clear: both;
float: none;
margin: 16px 0;
}

div.rand {
clear: both;
display: inline-block;
border: 12px solid rgb(240,204,206);
background: rgb(240,204,206);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin: 16px 0 24px 0;
box-sizing: border-box;
width: 50%;
}

div.rand.single {
width: auto;
}

div.rand.weiter {
border-color: white;
border-left-width: 0;
}

div.rand.text {
border-bottom-width: 4px;
}

div.rand .knopf {
width: 100%;
box-sizing: border-box;
text-align: center;
}

aside div.tuete .knopf {
width: 160px;
text-align: center;
margin: 0 0 10px 8px;
}

.knopf.zurueck {
margin: 0 0 24px 0;
border-width: 1px;
border-color: rgb(210,210,210);
background: rgb(220,220,220);
}

aside div.programm div {
position: relative;
width: 192px;
height: 252px;
margin: 0 0 4px 0;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 4px 4px 0 0px;
border-radius: 4px 4px 0 0px;
background: rgb(232,232,232);
}

aside div.programm div a {
text-decoration: none;
}

aside div.programm img.programm {
width: 136px;
height: auto;
margin: 24px 0 0 24px;
-webkit-box-shadow: 0 0px 16px 0 rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 0px 16px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 0px 16px 0 rgba(0, 0, 0, 0.25);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}

aside div.programm img.programm:hover {
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
}

aside div.programm img.pfeilnachoben {
position: absolute;
bottom: 0;
left: 88px;
}

nav.unter ul {
display: block;
margin: 32px 0 0 0;
position: relative;
z-index: 10;
}

aside nav.unter ul {
padding-right: 16px;
}

nav.unter ul li {
display: inline;
}

aside nav.unter ul li {
display: block;
}

nav.unter ul li a,
nav.unter ul li span {
display: inline-block;
margin: 0 8px 8px 0;
text-decoration: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 1px 7px;
}

.knopf,
article form.bestellung input.knopf {
background: white;
background: -moz-linear-gradient(top,  rgb(255,255,255) 50%, rgb(230,230,230) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,rgb(255,255,255)), color-stop(100%,rgb(230,230,230)));
background: -webkit-linear-gradient(top,  rgb(255,255,255) 50%,rgb(230,230,230) 100%);
background: -o-linear-gradient(top,  rgb(255,255,255) 50%,rgb(230,230,230) 100%);
background: -ms-linear-gradient(top,  rgb(255,255,255) 50%,rgb(230,230,230) 100%);
background: linear-gradient(top,  rgb(255,255,255) 50%,rgb(230,230,230) 100%);
color: black;
}

.knopf:hover {
background: rgb(180,0,10); /* Old browsers */
background: -moz-linear-gradient(top,  rgb(214,115,120) 0%, rgb(180,0,10) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(214,115,120)), color-stop(100%,rgb(180,0,10))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgb(214,115,120) 0%,rgb(180,0,10) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgb(214,115,120) 0%,rgb(180,0,10) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgb(214,115,120) 0%,rgb(180,0,10) 100%); /* IE10+ */
background: linear-gradient(top,  rgb(214,115,120) 0%,rgb(180,0,10) 100%); /* W3C */
color: white;
border-color: rgb(180,0,10);
text-shadow: none;
}

nav.unter ul li a {
color: rgb(180,0,10);
background: rgb(248,230,231);
}

nav.unter ul li span,
nav.unter ul li a:hover {
color: white;
background: rgb(180,0,10);
text-shadow: none;
}

nav.unter ul li a:active {
background: black;
}

.knopf:active {
background-color: rgb(180,0,10);
filter: none;
}

article a,
aside p a,
footer a {
text-decoration: none;
color: black;
border-bottom: 1px solid rgb(248,230,231);
-webkit-box-shadow: inset 0 -6px 0 rgb(248,230,231);
-moz-box-shadow: inset 0 -6px 0 rgb(248,230,231);
box-shadow: inset 0 -6px 0 rgb(248,230,231);
}

article a:hover,
aside p a:hover,
footer a:hover {
color: rgb(180,0,10);
border-bottom: 1px solid transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

article a:active,
aside p a:active,
footer a:active {
color: black;
}

article a.huepfer {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: none;
background: rgb(242,242,242);
padding: 4px 6px 5px 6px;
display: inline-block;
margin: 14px 0 0 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

/* 
p i.rot + article a.huepfer {
margin: 14px 0 0 0;
}
 */

article a.huepfer:hover {
background: rgb(248,230,231);
}

article a.huepfer:active {
background: white;
}

article article {
margin: 0 0 4px 0;
position: static;
padding-bottom: 12px;
border-bottom: 1px solid rgb(230,230,230);
}

article article:last-child {
border-bottom: none;
}

article img,
article p img,
article article a img,
article article img.klein {
display: block;
float: left;
-webkit-box-shadow: 0 0px 16px 0 rgba(0,0,0,0.1);
-moz-box-shadow: 0 0px 16px 0 rgba(0,0,0,0.1);
box-shadow: 0 0px 16px 0 rgba(0,0,0,0.1);
}

article article a:first-child img,
article article img.klein {
margin: 20px 20px 12px 0px;
}

div.gruppe {
border-top: 1px solid rgb(180,0,10);
padding-top: 8px;
margin-top: 8px;
clear: both;
}

div.intro {
margin: 0 0 1em 0;
border-bottom: 1px solid rgb(180,0,10);
width: 100%;
}

li.titel {
padding: 8px 16px 8px 16px;
}

ul.titel,
ul.sparten {
display: flex;
flex-flow: row wrap;
width: calc(100% + 1em);
margin: 0 -1em 0 0;
}

article ul.titel li.titel,
article.programm ul.sparten li {
flex: 1 1 calc(50% - 1em);
margin: 0 1em 1em 0;
border-radius: 4px;
box-shadow: 0 0px 16px 0 rgba(0,0,0,0.08);
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

li.titel:before,
ul.sparten li:before {
content: '' !important;
}

ul.sparten li a {
display: block;
height: 100%;
padding: 8px 16px 16px 16px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-bottom: none;
}

ul.sparten li a br.klar {
height: 1px;
}

ul.sparten li a:hover {
background: rgb(248,230,231);
}

article ul.sparten li a h3 {
margin: 4px 0 8px 0;
}

article img#wurm {
display: inline-block;
width: 90px;
height: 130px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: none;
margin: 24px 0 0 64px;
float: none;
clear: both;
}

body.offline article h2 {
padding-top: 32px;
}

body.offline article img {
margin: 64px 0 0 0;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

body.offline section {
width: 400px;
padding: 0 32px;
}

article p img {
margin: 8px 20px 12px 0px;
}

article p strong {
font-family: 'CharisSIL';
font-weight: bold;
}

div.haenger {
width: 524px;
float: right;
}

article h2 {
font-size: 28px;
line-height: 32px;
font-family: 'Sassoon', Georgia;
font-weight: normal;
color: rgb(180,0,10);
margin: 8px 0;
}

article h3 {
font-size: 18px;
line-height: 24px;
font-weight: bold;
margin: 16px 0 8px 0;
color: rgb(180,0,10);
}

article h3.titel {
margin: 4px 0 0 0;
}

article h3 span {
font-size: 15px;
line-height: 22px;
font-style: italic;
font-weight: normal;
color: black;
}

article span.typ {
font-family: Arial, Helvetica, Sans;
font-weight: bold;
background: rgb(248,230,231);
color: rgb(180,0,10);
text-transform: uppercase;
letter-spacing: 0.2em;
padding: 2px 2px 3px 4px;
margin: 0 0.25em;
font-size: 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

article p.alter {
font-weight: bold;
display: inline;
float: right;
padding: 2px 6px;
margin: 8px 0 0 8px;
background: rgb(248,230,231);
color: rgb(180,0,10);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

article p.error {
padding: 4px 8px;
margin: 0 0 8px 0;
background: rgb(248,230,231);
color: rgb(180,0,10);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
clear: both;
}

article ul.tuete p {
float: left;
}

article ul.tuete p.alter {
float: right;
width: 80px;
text-align: center;
background: rgb(240,240,240);
color: rgb(80,80,80);
}

article ul.tuete li.summe {
padding-left: 120px;
border-bottom: none;
}

article ul.tuete.bestellung li.summe {
padding-left: 0;
}

article ul.tuete.bestellung {
margin-top: 16px;
}

article ul.tuete li p.alter {
margin-top: -2px;
}

article ul.tuete li.summe p.alter {
float: right;
background: rgb(248,230,231);
color: rgb(180,0,10);
}

article ul.tuete li.summe h2 {
float: left;
margin: 0;
}

article ul.tuete.bestellung li {
line-height: 20px;
display: inline-block;
width: 100%;
}

article ul.tuete fieldset {
margin-bottom: 12px;
}

article ul.tuete fieldset p {
margin: 8px 0 0 0;
}

article div.cover {
position: relative;
float: left;
margin: 0 0 8px 0;
padding: 0;
width: 208px;
}

div.cover form fieldset {
display: block;
width: 176px;
min-height: 32px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: rgb(248,230,231);
padding: 8px;
margin: 0;
}

.links {
float: left;
}

input.anzahl {
width: 38px;
height: 24px;
border: 1px solid rgb(171,171,171);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-align: center;
font-family: 'CharisSIL', Georgia, Serif;
font-size: 14px;
}

div.cover form fieldset label,
ul.tuete form fieldset label {
margin-left: 8px;
}

div.cover form fieldset input.knopf,
ul.tuete form fieldset input.knopf {
font-family: 'CharisSIL', Georgia, Serif;
font-size: 15px;
line-height: 22px;
width: 176px;
}

ul.tuete form fieldset input.knopf {
float: none;
margin: 8px 0 0 0;
}

div.cover form fieldset input.knopf {
margin: 6px 0 0 0;
}

div.cover img.pfeil {
display: block;
width: 16px;
height: 8px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius: none;
-moz-border-radius: none;
border-radius: none;
border: none;
padding: 8px 0 0 0;
margin: 0 0 -2px 88px;
float: none;
}

article ul.downloads,
article ul.tuete li {
border-bottom: 1px solid black;
padding-bottom: 8px;
}

article ul.downloads:last-child,
article ul.tuete li:last-child {
border-bottom: none;
}

article ul.tuete li:before {
content: none;
}

article ul.tuete ul {
padding-top: 8px;
}

article h4 {
font-style: italic;
margin: 16px 0 0 0;
color: rgb(180,0,10);
}

article h5,
article h6 {
font-style: italic;
margin: 16px 0 0 0;
}

article hr {
background: rgb(180,0,10);
border: none;
height: 1px;
margin: 16px 0;
clear: both;
}

article hr.pfeilnachunten {
background: transparent url(../img/hr-pfeilnachunten.png) no-repeat center top;
height: 10px;
margin: 8px 0 32px 0;
}

form.newsletter textarea {
background: grey;
background: rgba(180,0,10,.25);
border: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

aside h3 {
font-weight: bold;
}

i, em {
font-style: italic;
}

.rot {
color: rgb(180,0,10);
}

article p {
margin: 0 0 8px 0;
padding: 0 16px 0 0;
max-width: 40em;
}

article ul:not(.galerie),
article ol:not(.galerie) {
margin: 0 0 8px 0;
}

article ul:not(.galerie) li {
margin: 0 0 4px 0;
}

article ul:not(.galerie) li:before {
content: '› ';
color: rgb(180,0,10);
font-weight: bold;
}

article ul.gruppe {
overflow: visible;
padding: 8px 0 0 0;
width: calc(100% + 24px);
}

article ul.gruppe li {
display: inline-block;
position: relative;
margin-right: 9px;
}

article ul.gruppe li img,
article ul.tuete li img {
width: 94px;
border-width: 4px;
z-index: 99;
margin: 0;
}

article ul.gruppe li img {
margin-top: 0;
}

article ul.tuete li img {
margin: 4px 16px 12px 0;
}

article ul.gruppe li:before {
content: '' !important;
}

article blockquote {
display: block;
font-style: italic;
color: rgb(180,0,10);
background: rgb(248,230,231);
background: rgba(180,0,10,.1);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin: 0 8px 8px 0;
padding: 6px 8px;
clear: both;
max-width: 40em;
}

article p cite {
display: block;
font-size: 14px;
margin: 2px 16px 0 8px;
padding: 0 0 8px 0;
}

article img {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 176px;
border: 8px solid white;
margin: 8px 16px 8px 0;
float: left;
}

article a img:hover {
border-color: rgb(180,0,10);
}

article a span img:hover {
border-color: white;
}

article form.bestellung fieldset {
width: 100%;
}

article form.bestellung label {
display: inline-block;
vertical-align: top;
line-height: 28px;
color: rgb(80,80,80);
margin: 0 16px 0 0;
}

article form.bestellung input,
article form.bestellung textarea,
article form.bestellung select {
display: block;
width: 100%;
height: 24px;
font-family: 'CharisSIL', Georgia, Serif;
font-size: 15px;
line-height: 22px;
background: rgba(0,0,0,0.1);
text-shadow: 0 1px 0 white;
border: 1px solid rgb(200,200,200);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin: 0 0 8px 0;
padding: 0 4px;
}

article form.bestellung .error input,
article form.bestellung .error textarea,
article form.bestellung .error select {
border-color: rgb(180,0,0);
background: rgba(180,0,0,0.1);
}

article form.bestellung input[type='checkbox'].error + label {
color: rgb(180,0,0);
}

article form.bestellung input.knopf {
margin-bottom: 0;
}

article form.bestellung fieldset {
padding: 0 0 16px 0;
}

article form.bestellung fieldset.data {
max-width: 640px;
}

article form.bestellung fieldset.data label {
width: calc(50% - 16px);
}

article form.bestellung fieldset.data label[for='fields[firma-institution]'],
article form.bestellung fieldset.data label[for='fields[adresszusatz]'],
article form.bestellung fieldset.data label[for='fields[land]'],
article form.bestellung fieldset.data label[for='fields[kommentar]'] {
width: calc(100% - 16px);
}

article form.bestellung fieldset.data label[for='fields[plz]'],
article form.bestellung fieldset.data label[for='fields[hausnummer]'] {
width: calc(25% - 16px);
}

article form.bestellung fieldset.data label[for='fields[strasse]'],
article form.bestellung fieldset.data label[for='fields[ort]'] {
width: calc(75% - 16px);
}

article form.bestellung fieldset.data textarea {
min-height: 48px;
}

article form.bestellung fieldset.abschicken {
border-top: 1px solid rgb(180,0,10);
padding: 32px 0 0 0;
}

article form.bestellung input[type='checkbox'] {
width: 22px;
height: auto;
padding: 0;
display: inline-block;
vertical-align: top;
margin: 3px 8px 4px 0;
}

article form.bestellung fieldset.abschicken label {
width: calc(100% - 46px);
line-height: 20px;
float: none;
display: inline-block;
vertical-align: top;
margin: 0;
}

.versteckt {
display: none!important;
}

.no-js ul.mmlm-filter {
display: none;
}

ul.mmlm-filter {
width: calc(100% + 1em);
display: flex;
flex-flow: row wrap;
margin: 0 -1em 0 0;
}

article ul.mmlm-filter li {
flex: 0 1 calc(20% - 1em);
margin: 0 1em 1em 0;
}

ul.mmlm-filter li:before {
content: '' !important;
}

ul.mmlm-filter li a {
position: relative;
display: flex;
flex-flow: column nowrap;
border-radius: 4px;
width: 100%;
height: 100%;
font-family: 'Sassoon', Georgia;
font-size: 18px;
color: rgb(180,0,10);
text-align: center;
border-bottom: none;
background: rgba(180,0,10,0.1);
-webkit-box-shadow: 0 0px 16px 0 rgba(0,0,0,0.1);
-moz-box-shadow: 0 0px 16px 0 rgba(0,0,0,0.1);
box-shadow: 0 0px 16px 0 rgba(0,0,0,0.1);
}

ul.mmlm-filter li.aktiv a,
ul.mmlm-filter li a:hover {
background: rgb(180,0,10);
color: white;
text-shadow: none;
}

ul.mmlm-filter li a:hover {
-webkit-box-shadow: 0 0px 16px 0 rgba(0,0,0,0.1);
-moz-box-shadow: 0 0px 16px 0 rgba(0,0,0,0.1);
box-shadow: 0 0px 16px 0 rgba(0,0,0,0.1);
}

ul.mmlm-filter li a img {
display: inline-block;
float: none;
border-radius: 4px;
width: auto;
max-width: calc(100% - 32px);
height: auto;
border: none;
margin: 16px auto 4px auto;
}

ul.mmlm-filter li a p {
display: inline-block;
width: 100%;
padding: .75em;
margin: auto 0 0 0;
}

footer {
clear: both;
background: white url(../img/fuss-bg.png) repeat-x top left;
position: relative;
z-index: 10;
min-height: 64px;
margin: 72px 0 0 0;
}

footer div.mitte {
position: relative;
padding: 32px 0;
}

footer div.mitte div.intern {
width: 224px;
float: left;
margin: 0 32px 0 0;
}

footer ul,
footer p,
footer a {
color: rgb(64,64,64);
}

footer p {
margin: 0 0 8px 0;
}

footer ul {
line-height: 24px;
}

footer ul li:before {
content: '› ';
}

footer div.mitte img.figur {
display: block;
position: absolute;
top: -100px;
left: 0;
width: 91px;
height: 100px;
z-index: 30;
}

footer div.mitte div.sozial {
float: left;
width: 280px;
border: 1px solid rgb(230,230,230);
margin: 0 0 32px 0;
padding: 16px 16px 12px 16px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 0px 8px 0 rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 0px 8px 0 rgba(0, 0, 0, 0.05);
box-shadow: inset 0 0px 8px 0 rgba(0, 0, 0, 0.05);
}

footer iframe {
margin-top: 8px;
}

footer a.mgfacebook {
display: block;
width: 304px;
height: 89px;
text-decoration: none;
border: 1px solid rgb(194,209,227);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-size: 0;
line-height: 0;
color: transparent;
background: transparent url(../img/mister-gluecklich-facebook.png) no-repeat top left;
float: right;
box-shadow: none;
}

footer a.mgfacebook:hover {
border-color: rgb(10,70,145);
}

.klar {
display: block;
clear: both;
line-height: 0;
font-size: 0;
}

.inline-block {
display: inline-block;
}

a.reinschauen {
display: inline-block;
position: relative;
font-family: 'Sassoon';
font-size: 18px;
vertical-align: bottom;
text-align: center;
padding: 2px 10px;
margin: 8px 0 4px 0;
width: calc(100% - 36px);
text-decoration: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: white;
background: rgb(180,0,10);
text-shadow: none;
border-bottom: none !important;
box-shadow: none;
}

a.reinschauen:hover {
color: rgb(180,0,10);
background: rgb(248,230,231);
}

a.reinschauen:hover:after {
border-top-color: rgb(248,230,231);
}

html.vorschau {
overflow: hidden;
}

html.vorschau body {
padding: 16px;
}

.stf__block li {
box-shadow: 0 0 .5em rgba(0,0,0,.25);
}

.stf__item:not(:last-of-type) {
cursor: pointer;
}

li.--left:after {
position: absolute;
content: '' !important;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 80%,rgba(0,0,0,.1) 100%);
}


div.bulletin {
background: rgb(255,240,240);
background: rgba(180,0,10,0.1);
border: 1px solid rgb(180,0,10);
padding: 0 16px 8px 16px;
margin: 0 0 16px 0;
-webkit-border-radius: 4px;
border-radius: 4px;
}

.news ul.galerie {
display: inline-block;
}

div.kooperation a {
display: block;
border-radius: 50%;
overflow: hidden;
}

div.kooperation a:hover {
border-radius: 5%;
filter: saturate(150%);
}

div.kooperation a img {
display: block;
}


/*! Flickity v2.0.2
http://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
position:relative
}

.flickity-enabled:focus {
outline:0
}

.flickity-viewport {
overflow: hidden;
position: static;
height:100%
}

.flickity-slider {
position: absolute;
width: 100%;
height:100%
}

.flickity-enabled.is-draggable {
-webkit-tap-highlight-color: transparent;
tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select:none
}

.flickity-enabled.is-draggable .flickity-viewport {
cursor: move;
cursor: -webkit-grab;
cursor:grab
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
cursor: -webkit-grabbing;
cursor:grabbing
}

.flickity-prev-next-button {
position: absolute;
top: 50%;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: #fff;
background: hsla(0, 0%, 100%, .75);
cursor: pointer;
-webkit-transform: translateY(-50%);
transform:translateY(-50%)
}

.flickity-prev-next-button:hover {
background:#fff
}

.flickity-prev-next-button:focus {
outline: 0;
box-shadow:0 0 0 5px #09F
}

.flickity-prev-next-button:active {
opacity:.6
}

.flickity-prev-next-button.previous {
left:10px
}

.flickity-prev-next-button.next {
right:10px
}

.flickity-rtl .flickity-prev-next-button.previous {
left: auto;
right:10px
}

.flickity-rtl .flickity-prev-next-button.next {
right: auto;
left:10px
}

.flickity-prev-next-button:disabled {
opacity: .3;
cursor:auto
}

.flickity-prev-next-button svg {
position: absolute;
left: 20%;
top: 20%;
width: 60%;
height:60%
}

.flickity-prev-next-button .arrow {
fill:#333
}

.flickity-page-dots {
position: absolute;
width: 100%;
bottom: -25px;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
line-height:1
}

.flickity-rtl .flickity-page-dots {
direction:rtl
}

.flickity-page-dots .dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 8px;
background: #333;
border-radius: 50%;
opacity: .25;
cursor:pointer
}

.flickity-page-dots .dot.is-selected {
opacity: 1
}

/* FlickityBox */
div.fbox {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 48px 0 32px 0;
background-color: rgba(250,250,250,.975);
z-index: 1000;
text-align: center;
}

div.fbox .flickity-viewport {
position: static;
margin: auto;
}

div.fbox ul {
display: flex;
max-width: 100%;
height: 100%;
}

div.fbox ul li {
display: flex;
width: 100%;
height: 100%;
}

.flickity-enabled div.fbox figure {
opacity: 0.2;
-webkit-transition: opacity 250ms ease-in;
-moz-transition: opacity 250ms ease-in;
transition: opacity 250ms ease-in;
}

div.fbox figure {
margin: auto;
}

div.fbox .is-selected figure {
opacity: 1;
}

div.fbox figure img {
margin: 16px;
display: inline-block;
box-shadow: none;
}

div.fbox .is-selected figure img {
box-shadow: 0 0 16px rgba(0, 0, 0, .4);
}

div.fbox figure img {
max-height: calc(100vh - 128px);
max-width: calc(100vw - 64px);
}

div.fbox figcaption {
color: black;
margin: 0 auto;
padding: .5em 0;
max-width: calc(100vw - 100px);
}

div.fbox .flickity-page-dots {
bottom: auto;
top: -32px;
text-align: left;
padding: 0 8px;
}

div.fbox .flickity-page-dots .dot {
background: rgba(180,0,10,.4);
opacity: 1;
margin: 0 4px;
}

div.fbox .flickity-page-dots .dot.is-selected {
background: rgb(180,0,10);
}

button.zu {
font-weight: bold;
-webkit-appearance: none;
-moz-appearance: none;
text-overflow: '';
border: none;
padding: 4px 8px;
color: rgb(180,0,10);
background: transparent;
cursor: pointer;
}

button.zu:hover {
color: white;
background: rgb(180,0,10);
}

div.fbox button.zu {
position: absolute;
top: 8px;
right: 8px;
z-index: 1001;
}

div.fbox.iframe figure {
height: 98%;
width: 100%;
}

div.fbox.iframe figure iframe {
height: 100%;
width: 100%;
}


/* ############# Screens AB 1440px ############# */
@media only screen and (min-width: 1440px) {

  li.titel, ul.sparten li {
	flex-basis: calc(100% / 3 - 1em);
	}

}

/* ############# Screens AB 1920px ############# */
@media only screen and (min-width: 1920px) {

  li.titel, ul.sparten li {
	flex-basis: calc(25% - 1em);
	}

}






/* ############# Screens bis 1040px ############# */
@media only screen and (max-width: 1040px) {

  div.tuete div,
  header div,
  footer div.mitte,
  section,
  div.suche form {
  width: auto;
  margin: 0 24px;
  }
  
  article.aside {
  width: calc(100% - 192px - 64px);
  }
  
  div.haenger {
  width: calc(100% - 212px);
  }

}

/* ############# Screens bis 980px ############# */
@media only screen and (max-width: 980px) {

  nav.haupt {
  float: none;
  margin: 0 0 8px 0;
  width: 100%;
  }
  
  nav.haupt ul {
  float: none;
  padding: 0;
  text-align: left;
  }
  
  nav.haupt ul li {
  margin: 0 8px 12px 0;
  }
  
}

/* ############# Screens bis 767px ############# */
@media only screen and (max-width: 767px) {

  div.suche form {
  text-align: center;
  }

  nav.haupt ul li a, nav.haupt ul li span {
  padding: 4px 8px;
  }
  
  nav.unter ul {
  margin: 16px 0 0 0;
  }
  
  aside,
  article,
  article.aside {
  display: block;
  width: 100%;
  }
  
  aside {
  padding: 8px 0 0 0;
  border-bottom: 1px solid #E6E6E6;
  }
  
  article img, article p img, article article a img, article article img.klein,
  div.haenger {
  display: inline-block;
  vertical-align: top;
  float: none;
  clear: both;
  }
  
  article img {
  margin-bottom: 12px;
  }
  
  article a.fancy,
  article a.group {
  border-bottom: none;
  box-shadow: none;
  }
  
  div.shoplink,
  div.programm {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  box-sizing: border-box;
  text-align: left;
  }
  
  div.shoplink p {
  display: inline;
  }
  
  div.shoplink p + p:before,
  aside div.programm h3:after {
  content: ' ';
  }
  
  a#shop {
  width: auto;
  height: auto;
  margin-bottom: 24px;
  }
  
  a#shop div {
  width: 96px;
  height: 72px;
  background-size: 96px 58px;
  margin: 0;
  }
  
  a#shop span {
  padding: 8px 8px 6px 16px;
  top: 74px;
  width: auto;
  }
  
  aside div.programm div {
  width: 100%;
  height: auto;
  text-align: center;
  }
  
  aside div.programm img.pfeilnachoben {
  left: calc(50% - 8px);
  }
  
  aside div.programm h3,
  aside div.programm p {
  display: inline;
  }
  
  aside div.programm img.programm {
  width: 68px;
  height: auto;
  margin: 16px 16px 8px 16px;
  display: inline-block;
  }

  ul.mmlm-filter li {
	flex: 1 1 auto;
	}
	
	ul.mmlm-filter li a img {
	max-width: auto;
	max-height: 64px;
	}
  
  ul.mmlm-filter li a p {
  font-size: 16px;
  line-height: 20px;
  }
  
  article ul.tuete li.summe p.hinweis {
  float: none;
  }
  
  article form.bestellung fieldset,
  article form.bestellung fieldset.abschicken {
  width: auto;
  }
  
  article form.bestellung label {
  line-height: 24px;
  }
  
  article form.bestellung input,
  article form.bestellung textarea,
  article form.bestellung select {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 8px 0;
  }
  
  article ul.tuete p {
  max-width: calc(100% - 100px);
  }
  
  article ul.tuete p.hinweis {
  max-width: 100%;
  }
  
  footer {
  margin: 128px 0 0;
  }
  
}

/* ############# Screens bis 639px ############# */
@media only screen and (max-width: 639px) {

  article ul.tuete li.summe {
  padding-left: 0;
  }
  
  ul.mmlm-filter {
	width: calc(100% + .25em);
	margin: 0 -.5em 0 0;
	}
	
	ul.mmlm-filter li {
	flex: 1 1 auto;
	margin: 0 .5em .5em 0;
	}
  
  .programm header div,
  .programm section {
	padding: 0 1em;
	}
  
	ul.mmlm-filter li a img {
	display: none;
	}

  ul.mmlm-filter li a p {
  margin: auto;
  padding: .25em;
  }

  footer div.mitte div.intern,
  footer a.mgfacebook {
  float: none;
  }
  
  footer a.mgfacebook {
  margin: 12px 0 0 0;
  max-width: 100%;
  }
    
}

/* ############# Screens bis 513px ############# */
@media only screen and (max-width: 513px) {

  body {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  }

  ul.titel, ul.sparten {
  width: 100%;
  }

  li.titel, ul.sparten li {
  width: 100%;
  }
  
  li.titel, ul.sparten li span {
  float: left;
  }
  
  ul.sparten li img.klein {
  width: 68px;
  height: auto;
	}
  
  article div.cover {
  width: 160px;
  margin-right: 16px;
  }
  
  article div.cover img {
  width: 144px;
  height: auto;
  }
  
  div.cover form fieldset,
  div.cover form fieldset input.knopf,
  ul.tuete form fieldset input.knopf {
  width: 100%;
  box-sizing: border-box;
  }
  
  div.gruppe {
  margin-top: -17px;
  }
  
  article form.bestellung fieldset.data label {
  width: 100% !important;
  }

}

/* ############# Screens bis 399px ############# */
@media only screen and (max-width: 399px) {

  div.tuete div,
  header div,
  footer div.mitte,
  section,
  div.suche form {
  margin: 0 16px;
  }

  div.suche form label,
  a#shop div,
  aside div.programm div {
  display: none;
  }
  
  div.suche form input {
  width: 100%;
  box-sizing: border-box;
  }
  
  div.shoplink, div.programm {
  width: 100%;
  margin-bottom: 0;
  background: rgb(248,230,231);
  padding: 8px;
  }
  
  nav.unter ul li span, nav.unter ul li a {
  font-size: 14px;
  line-height: 20px;
  margin: 0 4px 4px 0;
  }
  
  div.programm {
  -webkit-border-radius: 0px 0px 4px 4px;
  -moz-border-radius: 0px 0px 4px 4px;
  border-radius: 0px 0px 4px 4px;
  }
  
  div.shoplink {
  border-bottom: 1px solid white;
  -webkit-border-radius: 4px 4px 0px 0px;
  -moz-border-radius: 4px 4px 0px 0px;
  border-radius: 4px 4px 0px 0px;
  }
  
  a#shop,
  a#shop span {
  position: static;
  display: inline;
  }
  
  a#shop span {
  font-size: 18px;
  padding: 4px 4px 4px 8px;
  margin: 0 8px 0 0;
  }
  
  a#shop span,
  a#shop p {
  line-height: 32px;
  }
  
  aside {
  border-bottom: none;
  }
  
  article article a:first-child img,
  article article img.klein {
  width: 132px;
  margin: 8px 8px 0 0;
  }
  
  div.haenger {
  display: block;
  width: 100%;
  }
  
  article ul.gruppe {
  width: 100%;
  }
  
  article form.bestellung label {
  width: 100%;
  }

}

/* ############# Screens bis 320px ############# */
@media only screen and (max-width: 320px) {

  article div.cover {
  float: none;
  width: 100%;
  }
  
  article div.cover img {
  width: auto;
  }

}