:root {
  --hintergrundfarbe-hellbraun: #edebe8;
  --schriftfarbe-auf-hellbraun: #948c84;
  --schriftfarbe-hell: #eeeeea;
  --schriftfarbe-dunkel: #211f1d;
  --schriftfarbe-nav-hover: #948c84;
  --hintergrundfarbe-subnav: #edebe8;
  --schriftgroesse-text: 18px;
}

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  font-family: "Catamaran", sans-serif;
  margin: 0px;
  color: var(--schriftfarbe-dunkel);
  font-size: var(--schriftgroesse-text);
}

table {
  border: none;
  border-collapse: collapse;
}

td {
  vertical-align: top;
}

ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

img {
  border: none;
  outline: none;
}

input {
  outline: none;
}

a {
  outline: none;
}

h1 {
  margin: 0px;
  padding: 0px;
  padding-bottom: 20px;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  font-size: 72px;
  color: var(--schriftfarbe-auf-hellbraun);
  line-height: 100%;
}

h2 {
  margin: 0px;
  padding: 0px;
  font-family: "Catamaran", sans-serif;
  font-weight: 300;
  display: inline;
  font-size: 30px;
  font-weight: 300;
  color: var(--schriftfarbe-auf-hellbraun);
  border-top: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 200%;
}

div.h2fake {
  margin: 0px;
  padding: 0px;
  font-family: "Catamaran", sans-serif;
  font-weight: 300;
  font-size: 30px;
  font-weight: 300;
  color: var(--schriftfarbe-hell);
  border-top: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 140%;
}

h3 {
  margin: 0px;
  padding: 0px;
  font-family: "Catamaran", sans-serif;
  font-weight: 500;
  font-size: 30px;
}

h4 {
  margin: 0px;
  padding: 0px;
  font-family: "Catamaran", sans-serif;
  font-weight: 300;
  font-size: 32px;
  color: #333333;
}

div.table {
  display: table;
  width: 100%;
  border-spacing: 0px;
  border-collapse: collapse;
}

div.tr {
  display: table-row;
}

div.td {
  display: table-cell;
}

.show-elem {
  display: block !important;
}

.pink {
  background-color: #a20952 !important;
  background-image: none !important;
}

.bordeaux {
  background-color: #a60051 !important;
  background-image: none !important;
}

/**** layout ****/
div.sticky-nav {
  position: fixed;
  width: 100%;
  z-index: 2;
}

header {
  padding-top: 20px;
  padding-bottom: 20px;
  width: 100%;
  background-color: rgba(34, 34, 30, 0.9);
}

header.small {
  height: 63px;
  overflow: hidden;
}

div.center {
  max-width: 1600px;
  min-width: 980px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
}

div.center2 {
  max-width: 980px;
  width: 980px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
}

img.logo {
  float: left;
}

.suche-form {
  position: relative;
}

.suche-datalist {
  display: none;
  position: absolute;
  left: -5px;
  width: 100%;
  background-color: #FFFFFF;
  top: 30px;
  padding: 10px;
  border-radius: 8px;
  text-align: left;
}

.suche-datalist a {
  float: none !important;
  color: #333333;
  text-decoration: none !important;
}

.suche-datalist a:hover {
  font-weight: 600;
}

.suche-datalist li {
  padding-bottom: 10px;
  line-height: 120%;
}

a.beratung {
  z-index: 1005;
  position: fixed;
  right: -72px;
  top: 300px;
  padding: 10px;
  padding-left: 60px;
  padding-right: 40px;
  padding-bottom: 5px;
  transform: rotate(-90deg);
  background-color: #a60051;
  color: #FFFFFF;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 17px;
  border-radius: 8px 8px 0px 0px;
  background-image: url("/images/icon-telefon.svg");
  background-position: 15px 12px;
  background-repeat: no-repeat;
}

section.home-1 {
  width: 100%;
  height: 100%;
  background-image: url("/images/teaser-mehr-als-wein.png"), url("/images/bg-home.jpg");
  background-position: 80% bottom, center center;
  background-size: 400px auto, cover;
  background-repeat: no-repeat, no-repeat;
}

section.home-veranstaltung {
  position: relative;
  top: -1px;
  background-color: #ffffff;
  border-top: 10px solid #a80052;
  padding-top: 100px;
  padding-bottom: 100px;
}

section.home-veranstaltung h1 {
  color: var(--schriftfarbe-auf-hellbraun);
}

section.home-veranstaltung h2 {
  color: var(--schriftfarbe-auf-hellbraun);
  border-top: 1px solid var(--schriftfarbe-auf-hellbraun);
  border-bottom: 1px solid var(--schriftfarbe-auf-hellbraun);
}

a.button {
  padding-left: 40px;
  padding-right: 30px;
  padding-top: 5px;
  padding-bottom: 3px;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  background-color: #a80052;
  background-position: 10px 10px;
  background-repeat: no-repeat;
  background-size: 15px 15px;
}

a.button:hover {
  background-color: #c51068;
}

section.home-weinverkauf {
  background-color: var(--hintergrundfarbe-hellbraun);
  padding-top: 100px;
  color: #939383;
  font-size: 24px;
  font-weight: 300;
  line-height: 140%;
}

section.home-weinverkauf h1 {
  color: #939383;
}

section.home-weinverkauf h2 {
  color: #939383;
  border-top: 1px solid #939383;
  border-bottom: 1px solid #939383;
}

div.home-weinverkauf-adresse {
  float: left;
  color: var(--schriftfarbe-dunkel);
  font-size: var(--schriftgroesse-text);
  font-weight: 400;
  line-height: 130%;
}

div.home-weinverkauf-buttons {
  float: left;
  padding-left: 200px;
}

img.home-weinverkauf-flasche {
  float: right;
  position: relative;
  top: 200px;
  -webkit-filter: drop-shadow(5px 5px 10px #666);
  filter: drop-shadow(5px 5px 10px #666);
}

a.telefon {
  background-image: url("/images/icon-telefon.svg");
  padding-right: 66px;
}

a.email {
  background-image: url("/images/icon-email.svg");
  padding-right: 33px;
}

a.lageplan {
  background-image: url("/images/icon-lageplan.svg");
  padding-right: 88px;
}

a.virtuelletour {
  background-image: url("/images/icon-lageplan.svg");
  padding-right: 20px;
}

section.home-online-torkel {
  padding-top: 100px;
  padding-bottom: 100px;
  color: var(--schriftfarbe-hell);
  font-size: 24px;
  font-weight: 300;
  background-image: url("/images/bg-home-online-torkel.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
  background-color: var(--hintergrundfarbe-hellbraun);
}

section.home-online-torkel h1,
section.home-online-torkel h2 {
  color: var(--schriftfarbe-hell);
}

div.artikel-teaser-slider {
  width: 100%;
  height: 400px;
  padding: 20px;
  overflow: hidden;
  margin-top: 50px;
}

div.artikel-teaser-slider--item {
  display: block;
  width: 100%;
  height: 360px;
  color: var(--schriftfarbe-dunkel);
  font-size: var(--schriftgroesse-text);
  font-weight: 400;
  outline: none;
}

div.artikel-teaser-slider--item tr td {
  padding-right: 30px;
}

div.artikel-teaser-slider--item div.preis {
  color: #22221e !important;
}

div.artikel-teaser-slider h1 {
  padding-top: 20px;
  color: var(--schriftfarbe-hell);
  font-size: 48px;
}

div.artikel-teaser-slider--item .button {
  background-image: url("/images/icon-glas.svg");
}

img.artikelbild-teaser {
  float: left !important;
  margin-right: 50px !important;
  margin-left: 20px;
  height: 360px !important;
  width: auto !important;
}

section.home-more {
  background-color: var(--hintergrundfarbe-hellbraun);
  padding-top: 100px;
  padding-bottom: 130px;
}

section.home-more img {
  height: 190px;
  width: auto;
  margin-bottom: 30px;
}

div.more-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
}

div.more {
  flex-grow: 1;
  flex-basis: 25%;
  text-align: center;
  color: var(--schriftfarbe-dunkel);
  font-size: var(--schriftgroesse-text);
  font-weight: 300;
}

div.more span {
  font-family: "EB Garamond", serif;
  font-size: 30px;
  color: var(--schriftfarbe-auf-hellbraun);
  line-height: 120%;
}

section.content {
  padding-top: 260px;
  background-image: url("/images/bg-home-online-torkel.jpg");
  background-repeat: no-repeat;
  background-position: 0px 0px;
  background-size: 100% 1000px;
  background-color: var(--hintergrundfarbe-hellbraun);
  padding-bottom: 130px;
  min-height: 75%;
}

section.contentX {
  padding-top: 260px;
  background-image: url("/images/bg-home-online-torkel.jpg");
  background-repeat: no-repeat;
  background-position: 0px 0px;
  background-size: 100% 1250px;
  background-color: var(--hintergrundfarbe-hellbraun);
  padding-bottom: 130px;
}

section.content2 {
  padding-top: 260px;
  background-color: var(--hintergrundfarbe-hellbraun);
  padding-bottom: 130px;
}

section.content3 {
  background-repeat: no-repeat;
  background-position: 0px 0px;
  background-size: 100% 600px;
  background-color: var(--hintergrundfarbe-hellbraun);
  padding-top: 260px;
  padding-bottom: 130px;
}

section.content3 h1 {
  color: #939383;
}

section.content3 h2 {
  color: #939383;
  border-top: 1px solid #939383;
  border-bottom: 1px solid #939383;
}

div.quadrate-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

div.quadrat, a.quadrat {
  flex-grow: 1;
  flex-basis: auto;
  width: 465px;
  height: 465px;
  margin-bottom: 10px;
  margin-right: 10px;
  padding: 20px;
  background-repeat: no-repeat;
  background-position: 0px 0px;
  background-size: cover;
  background-color: #FFFFFF;
  font-size: 30px;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--schriftfarbe-hell);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

a.quadrat {
  text-decoration: none;
  cursor: pointer;
}

a.quadrat:hover {
  filter: brightness(1.5);
}

div.quadrate-container--no-hover a:hover {
  filter: none !important;
}

div.quadrate-container--no-hover a.quadrat {
  font-size: 22px;
}

div.quadrat-hover {
  display: none;
  padding-top: 20px;
  font-size: var(--schriftgroesse-text);
  font-weight: 400;
  width: 100%;
  height: auto;
  text-transform: none;
  justify-content: center;
  text-shadow: none;
}

img.content-bild--nebeneinander {
  float: left;
  margin-bottom: 10px;
  margin-right: 10px;
}

iframe.map {
  width: 465px;
  height: 465px;
  border: none;
}

.anreise-auto {
  background-image: url("/images/ihr-besuch-kontakt-anreise-traktor.jpg");
}

.anreise-oev {
  background-image: url("/images/ihr-besuch-kontakt-anreise-bahnhof-maienfeld.jpg");
}

.anreise-spaziergang {
  background-image: url("/images/ihr-besuch-kontakt-anreise-spaziergang.jpg");
}

.oeffnungszeiten-taeglich {
  background-image: url("/images/ihr-besuch-weinverkauf-freie-degustation-1.jpg");
}

.oeffnungszeiten-samstags {
  background-image: url("/images/ihr-besuch-weinverkauf-freie-degustation-2.jpg");
}

.kellerfuehrung {
  background-image: url("/images/ihr-besuch-kellerfuehrung-weine-und-trauben.jpg");
}

.geschlossene-kellerfuehrung {
  background-image: url("/images/ihr-besuch-kellerfuehrung-marc-faesser.jpg");
}

.essig-oel-fuehrung {
  background-image: url("/images/ihr-besuch-kellerfuehrung-essig-oel.jpg");
}

.von-der-rebe-ins-glas {
  background-image: url("/images/ihr-besuch-kellerfuehrung-reife-traube-in-den-reben.jpg");
}

.entdeckungsreise-delikat-essig-wein {
  background-image: url("/images/ihr-besuch-kellerfuehrung-delikat-essig-im-baum.jpg");
}

.fassprobe {
  background-image: url("/images/ihr-besuch-kellerfuehrung-faessergang.jpg");
}

.die-guten-geister-silas-hoerler {
  background-image: url("/images/team/silas-hoerler-2.jpg");
}

.die-guten-geister-fadri-itin {
  background-image: url("/images/team/fadri-itin-2.jpg");
}

.die-guten-geister-sonja-boppart {
  background-image: url("/images/team/sonja-boppart-2.jpg");
}

.die-guten-geister-david-hasler {
  background-image: url("/images/team/david-hasler-2.jpg");
}

.die-guten-geister-melissa-schaefer {
  background-image: url("/images/team/melissa-schaefer.jpg");
}

.die-guten-geister-sandro-senti {
  background-image: url("/images/team/sandro-senti-2.jpg");
}

.die-guten-geister-offene-stellen {
  background-color: #a60051 !important;
}

.die-guten-geister-heinz-zindel {
  background-image: url("/images/team/heinz-zindel.jpg");
}

.die-guten-geister-markus-v-gugelberg {
  background-image: url("/images/team/markus-v-gugelberg.jpg");
}

.die-guten-geister-helene-v-gugelberg {
  background-image: url("/images/team/helene-v-gugelberg.jpg");
}

.die-guten-geister-molina {
  background-image: url("/images/team/molina.jpg");
}

.die-guten-geister-luca-bonzani {
  background-image: url("/images/team/luca-bonzani.jpg");
  background-color: #a60051 !important;
}

.weinbau-ab-2000 {
  background-image: url("/images/das-weingut-modell-des-neubaus.jpg");
}

.weinbau-ab-1900 {
  background-image: url("/images/das-weingut-wimmlet-zu-pferde.jpg");
}

.ernteertaege {
  background-image: url("/images/das-weingut-wein-gugelberger-completer-1841.jpg");
}

.annus-horribilis {
  background-image: url("/images/das-weingut-annus-horribilis-1956-dickmaulruessler.jpg");
}

.oekosystemleistungen {
  background-image: url("/images/das-weingut-oekosystemleistungen.jpg");
}

.pflanzenschutz {
  background-image: url("/images/das-weingut-pflanzenschutz.jpg");
}

.weinbau-ab-ursprung {
  background-image: url("/images/das-weingut-ereignisse-im-weinbau-ab-ursprung.jpg");
}

.kirchturmchronik {
  background-image: url("/images/das-weingut-kirchturmchronik-jenins.jpg");
}

.weinbauern-klage {
  background-image: url("/images/das-weingut-des-weinbauern-klage.jpg");
}

.erzaehlung-fahnenkopf {
  background-image: url("/images/das-weingut-erzaehlung-des-fahnenkopfes.jpg");
}

.die-reblaus {
  background-image: url("/images/das-weingut-die-reblaus.jpg");
}

.mehltau {
  background-image: url("/images/das-weingut-mehltau.jpg");
}

.gestalten-nicht-verwalten {
  background-image: url("/images/schloss-geschichten-gestalten-nicht-verwalten.jpg");
}

.schloss-leben-erhalten {
  background-image: url("/images/schloss-geschichten-schloss-leben-erhalten.jpg");
}

.im-wandel-baeume {
  background-image: url("/images/schloss-geschichten-im-wandel-baueme.jpg");
}

.rainer-maria-rilke {
  background-image: url("/images/schloss-geschichten-rainer-maria-rilke-auf-salenegg.jpg");
}

.kriegswirren-schoene-briefe {
  background-image: url("/images/schloss-geschichten-kriegswirren-schoen-briefe.jpg");
}

.hortensia-gugelberg-von-moos {
  background-image: url("/images/schloss-geschichten-hortensia-gugelberg-von-moos.jpg");
}

.molina-tristram {
  background-image: url("/images/schloss-geschichten-molina-tristram.jpg");
}

.von-prestenegg-zu-salenegg {
  background-image: url("/images/schloss-geschichten-von-prestenegg-zu-salenegg.jpg");
}

.baugeschichtliches {
  background-image: url("/images/schloss-geschichten-baugeschichtliches.jpg");
}

.vertriebspartner-spezialitaetengeschaefte {
  background-image: url("/images/weintorkel-essige-im-licht.jpg");
}

.vertriebspartner-moevenpick {
  background-image: url("/images/moevenpick-weinkeller.jpg");
}

.vertriebspartner-manor {
  background-image: url("/images/manor.jpg");
}

img.quadrat--rechts {
  float: right;
  margin-left: 20px;
}

div.timeline {
  width: 100%;
}

div.timeline:nth-of-type(odd) {
  margin-right: 50%;
  width: 481px;
  padding-right: 20px;
  text-align: right;
  border-right: 1px solid #a80052;
}

div.timeline:nth-of-type(even) {
  margin-left: 50%;
  width: 480px;
  padding-left: 20px;
  text-align: left;
  border-left: 1px solid #a80052;
}

div.timeline:nth-of-type(odd) div.timeline-jahreszahl::after {
  position: relative;
  left: 25px;
  content: "\a";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #b83b3b;
  display: inline-block;
}

div.timeline:nth-of-type(even) div.timeline-jahreszahl::before {
  position: relative;
  left: -25px;
  content: "\a";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #a80052;
  display: inline-block;
}

div.timeline-jahreszahl {
  font-weight: 600;
  font-size: 24px;
  padding-top: 20px;
  padding-bottom: 10px;
}

/** nav **/
nav > ul {
  margin-top: 10px;
  float: right;
}

nav > ul > li {
  float: left;
  padding-left: 60px;
}

nav > ul > li:nth-child(1) {
  padding-left: 0px;
}

nav > ul > li:nth-child(2) {
  padding-left: 0px;
}

nav > ul > li > a {
  color: #FFFFFF;
  font-family: "Catamaran", sans-serif;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
}

nav > ul > li > a:hover, a.navSel {
  color: var(--schriftfarbe-nav-hover);
}

/** metanav **/
ul.metanav {
  margin-top: 20px;
  float: right;
}

ul.metanav > li {
  float: left;
  margin-left: 40px;
}

ul.metanav > li > a {
  color: #FFFFFF;
  display: block;
  width: 25px;
  height: 25px;
  background-repeat: no-repeat;
  background-position: center center;
}

a.metanav-home {
  background-image: url("/images/icon-home.svg");
  background-size: auto 23px;
}

a.metanav-home:hover {
  background-image: url("/images/icon-home-hover.svg");
  background-size: auto 23px;
}

a.metanav-kontakt {
  background-image: url("/images/icon-kontakt.svg");
  background-size: auto 20px;
}

a.metanav-kontakt:hover, a.metanav-kontakt--sel {
  background-image: url("/images/icon-kontakt-hover.svg");
  background-size: auto 20px;
}

a.metanav-warenkorb {
  background-image: url("/images/icon-warenkorb.svg");
  background-size: auto 23px;
}

a.metanav-warenkorb:hover, a.metanav-warenkorb--sel {
  background-image: url("/images/icon-warenkorb-hover.svg");
  background-size: auto 23px;
}

a.metanav-suche {
  background-image: url("/images/icon-suche.svg");
  background-size: auto 23px;
}

a.metanav-suche:hover {
  background-image: url("/images/icon-suche-hover2.svg");
  background-size: auto 23px;
}

a.metanav-suche--sel {
  background-image: url("/images/icon-suche-hover.svg");
  background-size: auto 23px;
  margin-top: 5px;
}

a.metanav-suche--sel2 {
  background-image: url("/images/icon-suche-hover2.svg");
  background-size: auto 23px;
}

/** subnav **/
div.subnav {
  background-color: var(--hintergrundfarbe-subnav);
}

ul.subnav {
  width: 100%;
  display: flex;
}

ul.subnav li {
  flex-grow: 1;
}

ul.subnav li a {
  display: inline-block;
  width: 100%;
  text-align: center;
  height: 80px;
  padding-top: 25px;
  width: 100%;
  color: #000000;
  text-decoration: none;
  font-weight: 500;
}

ul.subnav li a:hover, a.subnavSel {
  color: var(--schriftfarbe-nav-hover) !important;
}

ul.subnav li a.no-hover:hover {
  color: #000000 !important;
}

/** subsubnav **/
ul.subsubnav {
  width: 230px;
  min-height: 700px;
  padding-right: 30px;
  padding-top: 50px;
  margin-right: 30px;
  text-align: right;
  border-right: 1px solid #FFFFFF;
}

ul.subsubnav li {
  padding-bottom: 8px;
}

ul.subsubnav li a {
  color: #000000;
  text-decoration: none;
  font-size: 17px;
}

ul.subsubnav li a:hover, a.subsubnavSel {
  color: var(--schriftfarbe-hell) !important;
}

div.kategorie-bild {
  vertical-align: bottom;
  padding-right: 30px;
}

img.kategorie-bild {
  height: 560px;
  width: auto;
}

div.kategorie-titel {
  vertical-align: bottom;
  color: var(--schriftfarbe-hell);
  font-size: 24px;
  font-weight: 300;
  line-height: 120%;
  padding-bottom: 20px;
}

div.kategorie-titel h1 {
  color: var(--schriftfarbe-hell);
}

div.kategorie-titel h2 {
  color: var(--schriftfarbe-hell);
}

div.kategorie-titel img {
  margin-right: 30px;
}

div.kategorie-liste, div.kategorie-liste-klein {
  margin-top: 100px;
  margin-bottom: 100px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

div.kategorie-liste a, div.kategorie-liste-klein a {
  z-index: 1;
  position: relative;
  flex-grow: 1;
  flex-basis: auto;
  width: 310px;
  height: 470px;
  margin-right: 5px;
  margin-bottom: 15px;
  padding-top: 300px;
  font-size: 20px;
  font-weight: 400;
  color: #22221e;
  text-decoration: none;
  text-align: center;
  line-height: 120%;
  background-color: #FFFFFF;
  background-position: center 20px;
  background-repeat: no-repeat;
  background-size: auto 240px;
}

div.kategorie-liste a:hover, div.kategorie-liste-klein a:hover {
  box-shadow: 5px -5px 5px rgba(0, 0, 0, 0.2);
}

div.kategorie-liste a div.pseudo-button, div.kategorie-liste-klein a div.pseudo-button {
  position: absolute;
  bottom: 0px;
  height: 50px;
  width: 100%;
  padding-top: 15px;
  background: linear-gradient(to bottom, #a80052, #890043);
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 700;
}

div.kategorie-liste-klein {
  margin-top: 50px;
  margin-bottom: 50px;
  flex-wrap: nowrap;
}

div.kategorie-liste-klein a {
  width: 230px;
  height: 410px;
  margin-right: 5px;
  margin-bottom: 15px;
  padding-top: 280px;
  font-size: 17px;
  font-weight: 400;
  color: #22221e;
  text-decoration: none;
  text-align: center;
  line-height: 120%;
}

img.auszeichnung, img.trinkreif, img.ausverkauft {
  position: absolute;
  z-index: 1;
  right: 20px;
  top: 20px;
  height: 90px;
  width: auto;
}

div.kategorie-details {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #22221e;
  margin-bottom: 50px;
  margin-top: 50px;
  padding-bottom: 50px;
}

div.aussergewoehnlich, div.passtzu, div.vegetarisch, div.rohstoffe {
  flex-grow: 1;
  flex-basis: 25%;
  padding-left: 30px;
  padding-right: 30px;
  font-weight: 300;
  text-align: center;
}

div.aussergewoehnlich img, div.passtzu img, div.vegetarisch img, div.rohstoffe img {
  margin-bottom: 50px;
  height: 150px;
  width: auto;
}

/** artikel **/
a.zurueck {
  color: var(--schriftfarbe-hell);
  text-decoration: none;
}

a.zurueck2 {
  color: var(--schriftfarbe-dunkel);
  text-decoration: none;
}

div.artikelbilder-slider {
  width: 400px;
  height: 400px;
  background-color: #FFFFFF;
  padding: 20px;
  float: left;
  overflow: hidden;
}

img.artikelbild {
  height: 100%;
  width: auto;
  max-height: 360px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

div.artikeldetails {
  width: 515px;
  float: right;
}

div.artikeldetails h1,
div.artikeldetails h2 {
  color: var(--schriftfarbe-hell);
}

div.preis {
  padding-top: 30px;
  padding-bottom: 30px;
  font-size: 30px;
  font-weight: 300;
  color: var(--schriftfarbe-hell);
}

div.kaufen {
  background-color: #FFFFFF;
  border-radius: 8px;
  float: left;
  padding: 5px;
  padding-right: 20px;
  margin-right: 10px;
}

input[type=number] {
  border: none;
  margin-left: 10px;
  padding: 5px;
  width: 60px;
}

a.indenwarenkorb {
  float: left;
  background-image: url("/images/icon-warenkorb.svg");
  background-repeat: no-repeat;
  background-size: 15px auto;
  background-position: 10px 10px;
}

div.warenkorb-in {
  width: 60%;
  height: auto;
  padding: 30px;
  background-color: var(--hintergrundfarbe-hellbraun);
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
}

div.warenkorb-in h2 {
  color: #939383;
  border: none;
}

div.warenkorb {
  width: 100%;
  box-shadow: 10px 10px 27px 0px rgba(55, 75, 95, 0.18);
}

div.warenkorb div.tr:nth-child(odd) {
  background-color: #e5e5e1;
}

div.warenkorb div.tr:nth-child(even) {
  background-color: var(--hintergrundfarbe-hellbraun);
}

div.warenkorb div.td {
  padding: 10px;
  color: #50626f;
  vertical-align: middle;
}

div.warenkorb img {
  max-width: 200px;
  max-height: 200px;
}

input.artikelwarenkorb {
  float: left;
  width: 28%;
  padding: 10px;
  border: none;
  font-size: 16px;
  font-weight: 300;
  float: right;
  margin-right: 20px;
}

.artikelwarenkorb.anzahl {
  width: 70px !important;
}

div.warenkorb-box {
  box-shadow: 10px 10px 27px 0px rgba(55, 75, 95, 0.18);
  background-color: #edebe8;
  padding: 30px;
  padding-left: 60px;
  padding-right: 60px;
}

.warenkorb-box input, .warenkorb-box select, .warenkorb-box textarea, textarea {
  font-family: "Catamaran", sans-serif;
  padding: 10px;
  margin-bottom: 30px;
  width: 50%;
  border: none;
  font-size: 16px;
  font-weight: 300;
}

.warenkorb-box select {
  background: rgb(255, 255, 255);
}

.warenkorb-box input[type=checkbox], .warenkorb-box input[type=radio] {
  width: 20px;
}

.warenkorb-box textarea, textarea {
  height: 100px;
}

.anmeldung input[type=radio] {
  float: left;
  margin-top: 7px;
}

.warenkorb-box button, input[type=submit].button {
  font-family: "Catamaran", sans-serif;
  border: none;
  cursor: pointer;
  width: auto !important;
  padding-left: 40px;
  padding-right: 30px;
  padding-top: 5px;
  padding-bottom: 3px;
  height: 35px;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  background-color: #a80052;
  background-position: 10px 10px;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

img.icon-aktualisieren, img.icon-loeschen {
  float: left;
}

img.icon-aktualisieren {
  margin-top: 5px;
  float: right;
}

div.warenkorb-box--bestelluebersicht-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

div.warenkorb-box--bestelluebersicht {
  width: 25%;
  box-shadow: none;
  padding: 20px;
  color: #50626f;
  font-size: 16px;
  font-weight: 300;
  flex-grow: 1;
  flex-basis: auto;
  display: flex;
  flex-direction: column;
}

div.warenkorb-box--bestelluebersicht:nth-child(odd) {
  background-color: var(--hintergrundfarbe-hellbraun);
}

div.fetch-container {
  position: fixed;
  top: 0px;
  left: 0px;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

ul.toggle-details-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;
  border: 1px solid #FFFFFF;
  border-radius: 8px;
  font-size: var(--schriftgroesse-text);
  font-weight: 400;
  color: #000000;
}

ul.toggle-details-nav li {
  flex-basis: auto;
  flex-grow: 1;
  text-align: center;
}

ul.toggle-details-nav li a {
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 8px;
  cursor: pointer;
}

ul.toggle-details-nav li a.toggle-details-nav--sel {
  background-color: rgba(255, 255, 255, 0.5);
}

div.toggle-details-container--flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

div.toggle-details-container {
  margin-top: 50px;
  display: block;
}

div.eigenschaft {
  flex-grow: 1;
  flex-basis: 30%;
  width: 300px;
  height: 200px;
  padding-top: 0px;
  text-align: center;
}

div.eigenschaft img {
  height: 90px;
}

.online-degustation-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0;
  height: 0;
  overflow: hidden;
  width: 100%;
}

.online-degustation-container iframe,
.online-degustation-container object,
.online-degustation-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

footer {
  position: relative;
  background-color: #22221e;
  padding-top: 60px;
  padding-bottom: 30px;
  text-align: center;
}

footer pre {
  font-family: "Catamaran", sans-serif;
  font-size: 16px;
  color: var(--schriftfarbe-hell);
}

footer img {
  height: 90px;
  width: auto;
  margin-right: 70px;
}

footer a {
  color: #939383;
  text-decoration: none;
}

footer a:hover img {
  filter: brightness(2);
}

footer a:hover {
  filter: brightness(2);
}

img.footer-silhouette {
  width: 380px;
  height: auto;
  position: absolute;
  top: -130px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

/**** content ****/
img.rezepte {
  float: right;
}

a.text {
  color: #a80052;
  text-decoration: none;
  font-weight: 600;
}

ul.text {
  list-style: disc;
}

ul.text li {
  margin-left: 20px;
}

div.suche-container {
  position: relative;
  top: -8px;
  display: none;
  background-color: #FFFFFF;
  border-radius: 5px;
  padding: 5px;
  padding-bottom: 0px;
  padding-right: 10px;
}

input.suche {
  border: none;
  float: left;
  width: 300px;
  padding: 10px;
  margin-right: 10px;
  font-size: var(--schriftgroesse-text);
  font-weight: 400;
  color: #22221e;
}

div.suche-container a {
  float: right;
}

div.geschenkskarteauswahl {
  float: left;
  margin-right: 10px;
  background-color: var(--hintergrundfarbe-hellbraun);
  width: 140px;
  text-align: center;
}

ul.subsubnav.suche {
  min-height: 400px;
}

div.quadrat-farbig--mit-inhalt {
  flex-grow: 1;
  flex-basis: auto;
  width: 465px;
  /*min-height: 465px;*/
  margin-bottom: 10px;
  margin-right: 10px;
  padding: 20px;
  padding-top: 50px;
  background-repeat: no-repeat;
  background-position: 0px 0px;
  background-size: cover;
  font-size: var(--schriftgroesse-text);
  font-weight: 300;
  color: var(--schriftfarbe-dunkel);
  display: flex;
  flex-direction: column;
}

div.quadrat-farbig--mit-inhalt h1 {
  font-size: 28px;
  color: var(--schriftfarbe-dunkel);
}

div.quadrat-farbig--mit-inhalt h2 {
  font-size: 18px;
  color: var(--schriftfarbe-dunkel);
}

.bg-farbe-1 {
  background-color: #dfdfc7;
}

.bg-farbe-2 {
  background-color: #dedeb4;
}

.bg-farbe-3 {
  background-color: #dedea4;
}

.kalender-auf {
  margin-top: 10px;
  margin-left: 10px;
  display: block;
  width: 30px;
  height: 20px;
  background-image: url("/images/icon-kalender-auf.svg");
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}

/** akkordeon **/
details {
  border-top: 1px solid var(--schriftfarbe-auf-hellbraun);
  padding-top: 10px;
  padding-bottom: 5px;
  font-weight: 300;
  overflow: hidden;
}

details:last-of-type {
  border-bottom: 1px solid var(--schriftfarbe-auf-hellbraun);
  margin-bottom: 10px;
}

summary {
  color: var(--schriftfarbe-dunkel);
  display: block;
  width: 100%;
  cursor: pointer;
  font-weight: 400;
}

summary:hover {
  color: var(--schriftfarbe-nav-hover);
}

summary::after {
  color: var(--schriftfarbe-dunkel);
  display: inline-block;
  content: "";
  transition: 0.2s;
  line-height: 1;
  background-image: url("/images/icon-pfeil-akkordeon.svg");
  background-repeat: no-repeat;
  background-size: 18px 18px;
  float: right;
  margin-top: 4px;
  margin-right: 10px;
  padding-left: 5px;
  width: 10px;
  height: 20px;
}

details[open] > summary::after {
  transform: rotate(90deg);
  padding-left: 0px;
  padding-right: 5px;
  width: 10px;
  height: 18px;
}

details[open] summary ~ * {
  animation: sweep 0.5s ease-in-out;
}

@keyframes sweep {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
details table tr td:first-child {
  font-weight: 400;
  padding-right: 20px;
}

details > div {
  margin-block-start: 1em;
  margin-block-end: 1em;
}

/**** powered by ****/
#poweredby {
  padding-top: 20px;
  font-size: 12px;
}

.orange {
  color: #FF9900;
}

.gray {
  color: var(--schriftfarbe-hell);
}
/*# sourceMappingURL=0styles.css.map */