:root {
    --base-color: #54595F;
}

html {
}

a {
    color: #4e5b62;
    -webkit-transition: opacity .3s ease, color .3s ease;
    -moz-transition: opacity .3s ease, color .3s ease;
    -o-transition: opacity .3s ease, color .3s ease;
    transition: opacity .3s ease, color .3s ease;
}

a:hover {
    color: #90a4b2;
}

strong, b {
    font-family: "Greta Sans Bold", sans-serif;
}

body {
    font-size: 20px;
    font-family: 'Greta Text Light', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-weight: 300;
    min-height: 100%;
    line-height: 140%;
}

h1 {
    position: relative;
    display: block;
    margin-bottom: 20px;
    /*font-family: GretaSans, sans-serif;*/
    font-size: 46px;
    line-height: 135%;
    color: #677379;
}

h1.divider {
    float: left;
    width: 100%;
    border-top: 2px solid rgb(103, 115, 121, .5);
    padding-top: 20px;
}

h1.divider:first-child {
    border-top: 0;
    padding-top: 0;
}

h2 {
    margin: 0.5em 0;
    color: #677379;
    font-family: "Greta Sans Bold", sans-serif;
    font-size: 24px;
}

h2.divider {
    text-align: center;
    border-bottom: 2px solid rgb(103, 115, 121, .5);
    margin-top: 70px;
    font-size: 28px;
}

h3 {
    color: #677379;
    font-family: "Greta Sans Bold", sans-serif;
    font-size: 19px;
}

p {
    margin-bottom: 0.8em;
}

.body ul {
    list-style-type: disc;
    margin-left: 1.5em;
}

div.content {
    position: relative;
    clear: both;
    width: 90%;
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    flex-wrap: wrap;
}

div.content.column {
    flex-direction: column;
}

div.content .body,
div.content .aside {
    width: calc(100% - 15px);
}

div.content .full {
    width: calc(100% - 15px);
}

figure {
    margin: 0;
    padding: 0;
    display: block;
}

figure img {
    width: 100%;
}

figure.article-wide {
    width: 100%;
    margin: 10px 0 20px 0;
}

figure.article-right {
    float: right;
    width: 35%;
    margin: 0 0 35px 35px;
}

p.image-source,
figure div.caption {
    text-align: center;
    color: #808080;
}

p.image-source:before {
    content: '© ';
}


.toTop {
    bottom: 65px;
    display: none;
    height: 46px;
    position: fixed;
    width: 46px;
    font-size: 16px;
    overflow: visible;
    z-index: 900;
    right: 25px;
    background-color: #FFFFFF;
}

.toTop div.background {
    position: absolute;
    background-color: #585858;
    width: 46px;
    height: 46px;
    margin-top: 0;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    opacity: 1;
    z-index: -1;
}

.toTop:hover div.background {
    width: 46px;
    height: 46px;
    opacity: 0.8;
}

.toTop span {
    position: absolute;
    color: #ffffff;
    z-index: 999;
    opacity: 1;
    left: 18px;
    top: 15px;
}

.sprung-fussnote {
    visibility: hidden;
    height: 0;
    position: absolute;
    margin-top: -110px;
}

.sprung {
    position: relative;
    top: -110px;
    visibility: hidden;
}

/*******************************************/
/* Header-Bereich
/*******************************************/

.search-wrapper {
    width: 100%;
    max-width: 1150px;
    height: 0;
    display: flex;
    margin: 0 auto;
    -webkit-transition: all .33s ease-in-out;
    -moz-transition: all .33s ease-in-out;
    -o-transition: all .33s ease-in-out;
    transition: all .33s ease-in-out;
    z-index: 99;
    overflow: hidden;
    background-color: transparent;
}

.search-wrapper.show {
    width: 100%;
    max-width: 1150px;
    height: 50px;
    display: flex;
    margin: 0 auto;
}

.search-wrapper.full {
    width: 100%;
    max-width: 100%;
    background-color: #4e5b62;
}

#searchform {
    background-color: #4e5b62;
    color: #ffffff;
    padding: 0 25px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

#searchform input {
    width: 90%;
    padding: 0 0 0 10px;
    font-family: "Greta Sans Bold", sans-serif;
    font-size: 18px;
    background-color: transparent;
    border: none;
    box-shadow: none;
    color: #fff;
    display: inline-block;
    line-height: 20px;
    height: 20px;
    margin: 15px 0;
    outline: 0;
    outline-offset: 0;
    -webkit-appearance: none;
    float: left;
}

#searchform input::placeholder {
    color: #FFFFFF;
    font-size: 18px;
}

.search_form input[type=submit] {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px !important;
    margin: -1px;
    padding: 0;
    position: absolute !important;
    width: 1px !important;
    visibility: hidden;
}

.search_form i {
    color: #fff;
    font-size: 13px;
    display: inline-block;
    padding: 0;
    float: left;
    line-height: 50px;
}

.search_close {
    line-height: 50px;
    height: 50px;
    margin: 0 0 0 auto;
}

header {
    position: relative;
    width: 100%;
    z-index: 99;
    background-color: #ffffff;
}

header div.content {
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    flex-wrap: wrap;
    /*    width: 77%;
    max-width: 1100px;*/
    width: 74%;
    max-width: 1120px;
}

header a#logo {
    width: 142px;
    height: 100px;
    display: flex;
}

header a#logo img,
header a#logo svg {
    width: 100%;
    display: block;
    margin: auto 0;
}

header ul.main-nav {
    display: none;
}

a#offcanvas-menu {
    display: block;
    position: relative;
    width: 50px;
    margin-top: 20px;
    margin-right: 20px;
    border-radius: 8px;
    cursor: pointer;
}

#mobile-menu {
    width: 100%;
    margin-top: 0px;
    display: none;
    -webkit-transition: all .33s ease-in-out;
    -moz-transition: all .33s ease-in-out;
    -o-transition: all .33s ease-in-out;
    transition: all .33s ease-in-out;
}

#mobile-menu ul {
    width: 100%;
}

#mobile-menu ul li ul.dropdown {
    display: none;
}

#mobile-menu ul li {
    line-height: 35px;
    font-family: 'Greta Text Light', sans-serif;
    font-size: 14px;
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #eaeaea;
    width: 100%;
    position: relative;
}

#mobile-menu ul li a {
    line-height: 17px;
    padding: 9px 0;
    width: 100%;
    display: block;
    font-family: 'Greta Sans Bold', sans-serif;
    font-size: 14px;
}

#mobile-menu ul li a:hover {
    color: #4e5b62;
}

#mobile-menu ul li a:after {
    font-family: "Font Awesome 5 Pro", sans-serif;
    font-weight: bold;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    content: "\f105";
    position: absolute;
    right: 0;
    top: 6px;
    color: #0a0a0a;
    font-size: 20px;
}

#mobile-menu ul li.open a:after {
    content: "\f107";
}

#mobile-menu ul.dropdown li a:after {
    content: "";
}

#mobile-menu ul li:last-of-type {
    border-bottom: none;
}

#mobile-menu ul li ul {
    border-top: 1px solid #eaeaea;
}

#mobile-menu ul li ul li {
    margin-left: 20px;
    width: calc(100% - 20px);
}

a#mini-cart {
    display: inline-block;
    position: relative;
    font-size: 23px;
    margin: auto 0 auto auto;
}

a#search {
    display: inline-block;
    position: relative;
    width: 20px;
    color: #4e5b62;
    font-size: 23px;
    vertical-align: baseline;
    margin: auto 0 auto auto;
}

a#mini-cart span {
    background-color: #4e5b62;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: block;
    position: absolute;
    top: -8px;
    right: -8px;
    text-align: center;
    font-family: "Greta Sans Bold";
    font-size: 16px;
    line-height: 100%;
    padding-top: 5px;
}

a#offcanvas-menu {
    display: inline-block;
    position: relative;
    width: 20px;
    color: #4e5b62;
    font-size: 23px;
    vertical-align: baseline;
    margin: auto auto auto 0;
}

a#offcanvas-menu:hover,
a#search:hover {
    color: #90a4b2;
}

main {
    width: 100%;
    margin-top: 10px;
}

.slogan {
    width: 100%;
    font-size: 35px;
    color: #677379;
    border-bottom: 1px solid #4e5b62;
    padding: 0;
    margin-bottom: 10px;
    line-height: 125%;
}

.slogan.margin {
    margin-top: 106px;
}

section {
    width: 100%;
}

.banner p.ad {
    text-align: center;
    font-size: 12px;
    color: #808080;
    text-transform: uppercase;
    font-family: "Greta Sans Bold", sans-serif;
    margin-bottom: 0;
}

/*******************************************/
/* Grid
/*******************************************/

.grid {
    width: calc(100% + 30px);
    float: left;
    display: flex;
    flex-basis: auto;
    margin-left: -30px;
}

.grid.wrap {
    flex-wrap: wrap;
}

.grid .item {
    margin-left: 30px;
    /*margin-right: auto;*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 30px;
    align-items: flex-start;
    margin-top: 1em;
    width: 100%;
}

.grid .item.issue {
    width: calc(50% - 30px);
}

.grid.row,
.grid .item.row {
    flex-direction: row;
}

.grid.column,
.grid .item.column {
    flex-direction: column;
}

.grid.wrap,
.grid .item.wrap {
    flex-wrap: wrap;
}

.grid .item.block {
    display: block;
}

.grid .item.half {
    width: calc(100% - 30px);
    margin-left: 30px;
}

.grid .item figure {
    margin: 0;
}

.grid .item img {
    width: 100%;
    display: block;
    margin-bottom: 10px;
}

.grid .item.issue img {
    margin-bottom: 3px;
    border: 1px solid rgb(180, 180, 180);
}

.grid .item.issue h4 {
    margin: 0;
}

.grid .item h3 {
    /* color: #b0b418;*/
    color: #54595F;
    margin: 0.5em 0 0 0;
}

.grid .item .text {
    color: rgba(0, 0, 0, 0.85);
    width: 100%;
}

.flavors {
    display: block;
    margin-bottom: 35px;
}

.flavors form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    padding: 10px 0;
}

.flavors form div.text {
    display: block;

}

.flavors form div.text span.title {
    font-family: 'Greta Text Light', sans-serif;
    font-size: 20px;
}

.flavors form div.text span.price {
    font-size: 22px;
}

.flavors form div.fields {
    display: block;

}

.flavors form div.fields button {
    margin-bottom: 0;
}

/*******************************************/
/* Article List
/*******************************************/

.grid.article-list .item figure {
    margin-right: 0;
    width: 100%;
}

span.more {
    color: #90a4b2;
    display: inline-block;
}

a:hover span.more {
    color: #4e5b62;
}

span.prehead {
    padding: 3px 8px 3px 8px;
    color: #FFFFFF;
    text-transform: uppercase;
    /* background-color: #b0b418;*/
    background-color: #36847c;
    display: inline;
    margin-bottom: 0.5em;
    font-family: "Greta Sans Bold", sans-serif;
    letter-spacing: 1px;
    font-size: 14px;
}

span.author {
    display: block;
    margin: 0 0 0.5em 0;
}

span.subtitle {
    display: block;
    margin: 0.5em 0;
    font-family: 'Greta Text Light', serif;
}

img.issue-cover {
    display: block;
    width: 100%;
    margin: 0 auto 10px auto;
}

div.aside img.issue-cover {
    margin-top: 10px;
}

/*******************************************/
/* Article
/*******************************************/

img.article-main {
    display: block;
    margin: 30px 0;
}

h3.more-article-grid {
    margin-top: 50px;
}

.grid.more-article .item {
    width: calc(100% - 30px);
}

.grid.more-article .item .text {
    width: 100%;
}

.payer-page-audio {
    width: 90%;
}

/*******************************************/
/* Anzeigen
/*******************************************/
div.body.anzeigen {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-basis: auto;
}

.grid.anzeigen-list .item {
    width: calc(100% - 60px);
    margin-left: auto;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    margin-bottom: 0;
}

.grid.anzeigen-list .item:last-of-type {
    border-bottom: none;
}

span.prehead.anzeigen {
    display: inline-block;
    box-sizing: border-box;
    margin-right: auto;
}

.aside ul.menu {
    margin: 10px 0;
}

.aside ul.menu > li {
    margin: 5px 0;
}

.aside ul.menu > li.selected > a {
    font-weight: bold;
    pointer-events: none;
    cursor: default;
    color: #4e5b62;
}


/*******************************************/
/* Events
/*******************************************/

.grid.event-list .item {
    width: calc(100% - 30px);
}


/*******************************************/
/* Shop
/*******************************************/

.grid.product .item {
    width: calc(100% - 30px);
    flex-direction: column;
}

.grid.product .item img {
    width: 100%;
    display: block;
}

.grid.add_to_cart_form .item {
    width: calc(100% - 30px);
    margin-bottom: 0;
}

.grid.add_to_cart_form .item .price-wrap {
    margin-left: 15px;
}

.grid.add_to_cart_form .item:first-of-type {
    flex-direction: row;
}

img.product-img {
    display: block;
    width: 100%;
}

/*******************************************/
/* Form
/*******************************************/

#payment-form {
    margin-top: 2em;
}

form {
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    flex-wrap: wrap;
    align-items: flex-start;
}

form .counter {
    margin-left: auto;
    font-size: 16px;
}

form h3 {
    margin-bottom: 0.8em;
}

label {
    width: 100%;
    float: left;
    margin-left: 0;
    font-size: 18px;
    margin-bottom: 3px;
}

label.required {

}

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    border-radius: 0;
    font-size: 14px;
    width: 100%;
    margin: 0 auto 0 auto;
}

/* remove standard-styles */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    /* appearance: none; */
    border-radius: 0;
}

/* hide browser-styling (arrow) in IE10 */
select::-ms-expand {
    display: none;
}

.lt-ie10 select {
    background-image: none;
}

select {
    background: rgba(102, 153, 255, 0.1) url("/styles/images/select-arrow.png") no-repeat scroll right center / 23px auto;
    margin-bottom: 15px;
}

select:focus {
    background: rgba(102, 153, 255, 0.1) url("/styles/images/select-arrow-active.png") no-repeat scroll right center / 23px auto;
    margin-bottom: 15px;
}

input[type='text'],
input[type='tel'],
input[type='email'],
input[type='password'],
textarea,
select {
    font-size: 18px;
    font-family: 'Greta Text Light', sans-serif;
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid #e3e5e5;
    width: 100%;
    margin-left: 0;
    padding: 6px 12px;
    margin-bottom: 10px;
    border-radius: 0;
    font-weight: normal;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

input:focus,
textarea:focus {
    border: 2px solid #54595F !important;
}

form div.checkbox {
    float: left;
    margin-bottom: 15px;
    width: 100%;
}

form div.small {
    width: 100%;
    padding-top: 5px;
}

div.body.subscribe {
    margin-bottom: 30px;
}

form input.error, form textarea.error {
    border: 1px solid rgba(219, 8, 18, 1);
}

form input.checkbox-type {
    width: 60%;
}

form input[type="checkbox"] {
    margin-left: 0;
}

form .grid .item {
    flex-direction: column;
}

label.checkbox input {
    display: none;
}

label.checkbox span {
    border: 2px solid;
    display: inline-block;
    float: left;
    font-size: 22px;
    height: 18px;
    margin-right: 10px;
    margin-top: 2px;
    position: relative;
    width: 18px;
}

select.error,
label.checkbox.error span {
    border: 1px solid rgba(219, 8, 18, 1);
}

label.checkbox i {
    padding-left: 7px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    font-style: normal;
    display: inline-block;
    width: calc(100% - 28px);
}

[type=checkbox]:checked + span:before {
    content: '\2714';
    position: absolute;
    color: #54595F;
    top: -5px;
    left: 0;
}

[type=checkbox]:checked + label.checkbox span {
    border: 0.5px solid #54595F;
}

textarea {
    height: 175px !important;
}

.date_wrap {
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    flex-wrap: wrap;
    align-items: flex-end;
}

.date_wrap input {
    margin-right: 4px;
    margin-left: 4px;
}

.date_wrap input:first-of-type {
    margin-left: 0;
}

span.validatormessage {
    color: rgba(219, 8, 18, 1);
    display: block;
    margin-top: -10px;
    font-size: 14px;
}

.checkbox span.missing {
    color: rgba(219, 8, 18, 1);
    display: block;
    margin-left: 35px;
}

.maxlength-indicator {
    margin-top: -10px;
    float: right;
}

.maxlength-indicator.warning {
    color: rgb(255, 174, 0);
}

.maxlength-indicator.error {
    color: rgba(219, 8, 18, 1);
}

button,
a.button {
    background-color: #677379;
    padding: 16px 46px 15px 46px;
    color: #FFFFFF;
    display: inline-block;
    margin: 0 0 20px auto;
    text-align: center;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    border-radius: 3px;
    width: auto;
    font-size: 16px;
    border: none;
    font-family: "Greta Sans Bold", sans-serif;
    cursor: pointer;
    line-height: 120%;
}

button i.glyphicons:before {
    padding: 2px 8px 0 0;
}

button.left,
a.button.left {
    margin: 0 auto 20px 0;
}

button.right,
a.button.right {
    margin: 0 0 20px auto;
}

button.center,
a.button.center {
    margin: 0 auto 20px auto;
}

button.inline,
a.button.inline {
    display: inline-block;
}

.aside .button {
    display: block;
    width: 100%;
}

button:hover,
a.button:hover {
    background-color: #9F9F9F;
}

/*******************************************/
/* Footer
/*******************************************/

footer {
    float: left;
    width: 100%;
    margin-top: 40px;
}

footer div.content {
    padding-top: 15px;
    padding-bottom: 15px;
    border-top: 1px solid #4e5b62;
    font-family: "Greta Text Light", sans-serif;
    letter-spacing: 1px;
    font-size: 14px;
}

footer div.content h4 {
    font-family: "Greta Sans Bold";
}

.footer-nav.grid {
    margin-top: 30px;
    margin-bottom: 30px;
}

.footer-nav.grid .item {
    width: calc(100% - 30px);
}

.footer-nav.grid .item ul:last-of-type {
    margin-bottom: -1em;
}

.footer-nav ul {
    margin-bottom: 25px;
}

.footer-nav ul li {
    line-height: 22px;
}

.anzeige-text {
    width: 100%;
}

.anzeige-text .event-info {
    color: black;
    font-family: "Greta Sans Bold", sans-serif;
    font-size: 19px;
    float: right;
}

.anzeige-text .event-info span {
    display: block;
    text-align: right;
}