@charset "utf-8";
/* Breakpoints des Responsive Designs */
/* Bei Änderungen auch in allen Bild-Content-Elementen die SrcSet-Angaben anpassen */
/* Box-Size-Model (Elementbreite ist width MINUS margin und border) */
@import "/inc/css/vendor/slick.css";
*, *:before, *:after {
  box-sizing: border-box;
}
/* Scrollbalken immer einblenden und Schrift auf 10px festlegen */
html {
  font-size: 62.5%;
  overflow-y: scroll;
}
/* Clearfix als SCSS-Mixin. Einbinden in Styles über @include clearfix; */
/* Grundlegende Angabe für Sektionen */
section {
  width: 100%;
  margin: 0 auto;
}
section:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}
/* Breite des Contentbereichs */
.inner {
  width: 100%;
  max-width: 1360px;
  padding: 0 12px;
  margin: 0 auto;
}
.inner:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}
/* Silbentrennung */
article section > div {
  hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
}
/* Sichtbarkeits-Hilfsklassen – was ist in S, M, L, XL (nicht) sichtbar */
/* Das einzelne Sichtbarmachen erfolgt in den jeweiligen Stylesheets */
.only-s, .only-m, .only-l, .only-xl {
  display: none !important;
}
/* Entwicklungshilfe zeigt im Browser rechts oben die aktuellen Breiten s,m,l,xl */
/* Zum Launch auf display: none setzen (siehe letzte Zeile) */
body:after {
  position: fixed;
  top: 0;
  right: 0;
  background: grey;
  opacity: 1;
  font-size: 14px;
  color: #fff;
  padding: 5px 10px;
  z-index: 99999999;
  display: none;
}
.grid[cols="2-2-2-2-2-2"] > * {
  grid-column: auto / span 6;
}
.grid {
  display: -ms-grid;
  -ms-grid-columns: 1fr 3.8961vw 1fr 3.8961vw 1fr 3.8961vw 1fr 3.8961vw 1fr 3.8961vw 1fr 3.8961vw 1fr 3.8961vw 1fr 3.8961vw 1fr 3.8961vw 1fr 3.8961vw 1fr 3.8961vw 1fr;
}
.grid > :nth-child(odd) {
  -ms-grid-column: 1;
  -ms-grid-column-span: 24;
}
.grid > :nth-child(even) {
  -ms-grid-column: 1;
  -ms-grid-column-span: 24;
}
.grid[cols="8-4"], .grid[cols="4-8"], .grid[cols="6-6"], .grid[cols="5-7"], .grid[cols="7-5"] {
  -ms-grid-column-span: 24;
  -ms-grid-rows: 1fr 40px 1fr;
}
.grid[cols="8-4"] > *, .grid[cols="4-8"] > *, .grid[cols="6-6"] > *, .grid[cols="5-7"] > *, .grid[cols="7-5"] > *, .grid[cols="4-4-4"] > * {
  -ms-grid-column-span: 24;
}
.grid[cols="8-4"] > :nth-child(2), .grid[cols="4-8"] > :nth-child(2), .grid[cols="6-6"] > :nth-child(2), .grid[cols="5-7"] > :nth-child(2), .grid[cols="7-5"] > :nth-child(2) {
  -ms-grid-row: 3;
}
footer .grid[cols="4-4-4"] {
  -ms-grid-column-span: 24;
  -ms-grid-rows: 1fr 3.8961vw 1fr 3.8961vw 3fr;
}
.grid[cols="4-4-4"] {
  -ms-grid-column-span: 24;
  -ms-grid-rows: 1fr 3.8961vw 1fr 3.8961vw 1fr;
}
.grid[cols="4-4-4"] > :nth-child(2) {
  -ms-grid-row: 3;
}
.grid[cols="4-4-4"] > :nth-child(3) {
  -ms-grid-row: 5;
}
.grid {
  display: grid;
  grid-gap: 24px;
  word-break: break-word;
  grid-template-columns: repeat(12, 1fr);
  /* Grid mit 12 Spalten */
}
/* jk: Richards Idee für vertikale Abstände von Sektionen */
/* ab break-xl gilt statt gridgap ein festes max-gridgap wie in main.scss definiert */
@media (min-width: 1360px) {
  .grid {
    grid-gap: 42px;
  }
}
.grid > * {
  grid-column: span 12;
}
/* mehrspaltiges Grid ab min-width $break-m und aufwärts aktivieren */
@media (min-width: 660px) {
  /* 3-3-3-3 wird unterhalb von break-m zweispaltig mit zwei Zeilen */
  /* die "extremen" Gridspalten werden zu 4/8 bzw. 8/4 reduziert */
  .grid[cols="3-3-3-3"] > * {
    grid-column: auto / span 6;
    height: 100%;
  }
  .grid[cols="2-2-2-2-2-2"] > * {
    grid-column: auto / span 3;
    height: 100%;
  }
  .grid[cols="9-3"] > :nth-child(odd), .grid[cols="3-9"] > :nth-child(even), .grid[cols="10-2"] > :nth-child(odd), .grid[cols="2-10"] > :nth-child(even) {
    grid-column: auto / span 6;
  }
  .grid[cols="9-3"] > :nth-child(even), .grid[cols="3-9"] > :nth-child(odd), .grid[cols="10-2"] > :nth-child(even), .grid[cols="2-10"] > :nth-child(odd) {
    grid-column: auto / span 6;
  }
  .grid {
    display: -ms-grid;
    -ms-grid-columns: 1fr 3.8961vw 1fr 3.8961vw 1fr 3.8961vw 1fr 3.8961vw 1fr 3.8961vw 1fr 3.8961vw 1fr 3.8961vw 1fr 3.8961vw 1fr 3.8961vw 1fr 3.8961vw 1fr 3.8961vw 1fr;
  }
  .grid[cols="12"] > * {
    -ms-grid-column-span: 23;
  }
  .grid[cols="3-3-3-3"] {
    -ms-grid-column-span: 11;
    -ms-grid-rows: 1fr 24px 1fr;
  }
  .grid[cols="3-3-3-3"] > :nth-child(3), .grid[cols="3-3-3-3"] > :nth-child(4) {
    -ms-grid-row: 3;
  }
  .grid[rows="1"] {
    -ms-grid-rows: auto;
  }
  .grid[rows="2"] {
    -ms-grid-rows: auto (40px auto)[1];
  }
  .grid[rows="3"] {
    -ms-grid-rows: auto (40px auto)[2];
  }
  .grid[rows="4"] {
    -ms-grid-rows: auto (40px auto)[3];
  }
  .grid[rows="5"] {
    -ms-grid-rows: auto (40px auto)[4];
  }
  .grid[rows="6"] {
    -ms-grid-rows: auto (40px auto)[5];
  }
  .grid[rows="7"] {
    -ms-grid-rows: auto (40px auto)[6];
  }
  .grid[rows="8"] {
    -ms-grid-rows: auto (40px auto)[7];
  }
  .grid[rows="9"] {
    -ms-grid-rows: auto (40px auto)[8];
  }
}
@media (min-width: 1000px) {
  /* grid-row auf einzeilig überschreiben, da unterhalb von break-m zweizeiliges grid */
  .grid[cols="2-2-2-2-2-2"] > * {
    grid-column: auto / span 2;
  }
  .grid[cols="3-3-3-3"] > * {
    grid-column: auto / span 3;
    height: 100%;
  }
  .grid[cols="4-4-4"] > * {
    grid-column: auto / span 4;
    height: 100%;
  }
  .grid[cols="6-6"] > * {
    grid-column: auto / span 6;
    -ms-grid-column-span: 11;
  }
  .grid[cols="7-5"] > :nth-child(odd), .grid[cols="5-7"] > :nth-child(even) {
    grid-column: auto / span 7;
  }
  .grid[cols="7-5"] > :nth-child(even), .grid[cols="5-7"] > :nth-child(odd) {
    grid-column: auto / span 5;
  }
  .grid[cols="8-4"] > :nth-child(odd), .grid[cols="4-8"] > :nth-child(even) {
    grid-column: auto / span 8;
  }
  .grid[cols="8-4"] > :nth-child(even), .grid[cols="4-8"] > :nth-child(odd) {
    grid-column: auto / span 4;
  }
  .grid[cols="9-3"] > :nth-child(odd), .grid[cols="3-9"] > :nth-child(even) {
    grid-column: auto / span 9;
  }
  .grid[cols="9-3"] > :nth-child(even), .grid[cols="3-9"] > :nth-child(odd) {
    grid-column: auto / span 3;
  }
  .grid[cols="10-2"] > :nth-child(odd), .grid[cols="2-10"] > :nth-child(even) {
    grid-column: auto / span 10;
  }
  .grid[cols="10-2"] > :nth-child(even), .grid[cols="2-10"] > :nth-child(odd) {
    grid-column: auto / span 2;
  }
  .grid > :nth-child(odd) {
    -ms-grid-column: 1;
    -ms-grid-column-span: 11;
  }
  .grid > :nth-child(even) {
    -ms-grid-column: 1;
    -ms-grid-column-span: 11;
  }
  .grid[cols="12"] > * {
    -ms-grid-column-span: 23;
  }
  .grid[cols="8-4"], .grid[cols="4-8"], .grid[cols="6-6"], .grid[cols="5-7"], .grid[cols="7-5"] {
    -ms-grid-column-span: 11;
    -ms-grid-rows: 1fr;
  }
  .grid[cols="8-4"] > *, .grid[cols="4-8"] > *, .grid[cols="6-6"] > *, .grid[cols="5-7"] > *, .grid[cols="7-5"] > *, .grid[cols="4-4-4"] > * {
    -ms-grid-column-span: 11;
  }
  .grid[cols="6-6"] > :first-child, .grid[cols="6-6"] > :last-child {
    -ms-grid-column-span: 11;
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .grid[cols="6-6"] > :last-child {
    -ms-grid-column-span: 11;
    -ms-grid-row: 1;
    -ms-grid-column: 13;
  }
  footer .grid[cols="4-4-4"], .grid[cols="4-4-4"] {
    -ms-grid-column-span: 7;
    -ms-grid-rows: 1fr;
  }
  .grid[cols="4-4-4"] > * {
    -ms-grid-column-span: 7;
    -ms-grid-rows: 1fr;
  }
  .grid[cols="4-4-4"] > :nth-child(2) {
    -ms-grid-column: 9;
    -ms-grid-row: 1;
  }
  .grid[cols="4-4-4"] > :nth-child(3) {
    -ms-grid-column: 17;
    -ms-grid-row: 1;
  }
  .grid[cols="3-3-3-3"] {
    -ms-grid-rows: 1fr;
  }
  .grid[cols="3-3-3-3"] > :nth-child(3), .grid[cols="3-3-3-3"] > :nth-child(4) {
    -ms-grid-row: 1;
  }
  .grid[cols="3-3-3-3"] > * {
    -ms-grid-column-span: 5;
  }
  .grid[cols="3-3-3-3"] > :nth-child(2) {
    -ms-grid-column: 7;
  }
  .grid[cols="3-3-3-3"] > :nth-child(3) {
    -ms-grid-column: 13;
  }
  .grid[cols="3-3-3-3"] > :nth-child(4) {
    -ms-grid-column: 19;
  }
  .grid[cols="5-7"] > :first-child {
    -ms-grid-column-span: 7;
  }
  .grid[cols="5-7"] > :last-child {
    -ms-grid-column-span: 15;
    -ms-grid-column: 9;
    -ms-grid-row: 1;
  }
  .grid[cols="7-5"] > :first-child {
    -ms-grid-column-span: 15;
  }
  .grid[cols="7-5"] > :last-child {
    -ms-grid-column-span: 7;
    -ms-grid-column: 17;
    -ms-grid-row: 1;
  }
  .grid[cols="4-8"] > :first-child {
    -ms-grid-column-span: 7;
  }
  .grid[cols="4-8"] > :last-child {
    -ms-grid-column-span: 15;
    -ms-grid-column: 9;
    -ms-grid-row: 1;
  }
  .grid[cols="8-4"] > :first-child {
    -ms-grid-column-span: 15;
  }
  .grid[cols="8-4"] > :last-child {
    -ms-grid-column-span: 7;
    -ms-grid-column: 17;
    -ms-grid-row: 1;
  }
  .grid[cols="3-9"] > :first-child {
    -ms-grid-column-span: 5;
  }
  .grid[cols="3-9"] > :last-child {
    -ms-grid-column-span: 17;
    -ms-grid-column: 7;
    -ms-grid-row: 1;
  }
  .grid[cols="9-3"] > :first-child {
    -ms-grid-column-span: 17;
  }
  .grid[cols="9-3"] > :last-child {
    -ms-grid-column-span: 5;
    -ms-grid-column: 19;
    -ms-grid-row: 1;
  }
  .grid[cols="2-10"] > :first-child {
    -ms-grid-column-span: 3;
  }
  .grid[cols="2-10"] > :last-child {
    -ms-grid-column-span: 19;
    -ms-grid-column: 5;
    -ms-grid-row: 1;
  }
  .grid[cols="10-2"] > :first-child {
    -ms-grid-column-span: 19;
  }
  .grid[cols="10-2"] > :last-child {
    -ms-grid-column-span: 3;
    -ms-grid-column: 21;
    -ms-grid-row: 1;
  }
}
/* fancyBox v3.5.7 */
body.compensate-for-scrollbar {
  overflow: hidden;
}
.fancybox-active {
  height: auto;
}
.fancybox-is-hidden {
  position: absolute !important;
  top: -9999px;
  left: -9999px;
  margin: 0;
  visibility: hidden;
}
.fancybox-container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-image: url('/inc/img/hintergruende/hintergrund-gruen.jpg');
  /*url(/inc/img/corporate-design/hintergrund-gruen.png);*/
  background-size: cover;
  background-position: top center;
  outline: none;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  z-index: 99992;
}
.fancybox-container * {
  box-sizing: border-box;
}
.fancybox-bg, .fancybox-inner, .fancybox-outer, .fancybox-stage {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.fancybox-outer {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.fancybox-bg {
  opacity: 0;
  transition-duration: inherit;
  transition-timing-function: cubic-bezier(0.47, 0, 0.74, 0.71);
}
.fancybox-is-open .fancybox-bg {
  opacity: 0.9;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fancybox-caption, .fancybox-infobar, .fancybox-navigation .fancybox-button, .fancybox-toolbar {
  position: absolute;
  direction: ltr;
  z-index: 99997;
}
.fancybox-show-caption .fancybox-caption, .fancybox-show-infobar .fancybox-infobar, .fancybox-show-nav .fancybox-navigation .fancybox-button, .fancybox-show-toolbar .fancybox-toolbar {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease 0s, visibility 0s ease 0s;
}
.fancybox-infobar {
  min-width: 44px;
  height: 44px;
  top: 0;
  left: 0;
  font-size: 13px;
  line-height: 44px;
  color: #ccc;
  padding: 0 10px;
  mix-blend-mode: difference;
  pointer-events: none;
  user-select: none;
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.fancybox-toolbar {
  top: 0;
  right: 0;
}
.fancybox-toolbar button {
  margin: 12px 0;
  margin-right: 12px;
}
.fancybox-stage {
  direction: ltr;
  overflow: visible;
  transform: translateZ(0);
  z-index: 99994;
}
.fancybox-is-open .fancybox-stage {
  overflow: hidden;
}
.fancybox-slide {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  padding: 44px;
  outline: none;
  overflow: auto;
  transition-property: transform, opacity;
  white-space: normal;
  -webkit-overflow-scrolling: touch;
  -webkit-backface-visibility: hidden;
  z-index: 99994;
}
.fancybox-slide:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 100%;
  font-size: 0;
  vertical-align: middle;
}
.fancybox-is-sliding .fancybox-slide, .fancybox-slide--current, .fancybox-slide--next, .fancybox-slide--previous {
  display: block;
}
.fancybox-slide--image {
  overflow: hidden;
  padding: 66px 0;
}
.fancybox-slide--image:before {
  display: none;
}
.fancybox-slide--html {
  padding: 6px;
}
.fancybox-content {
  display: inline-block;
  max-width: 100%;
  position: relative;
  text-align: left;
  vertical-align: middle;
  overflow: auto;
  background: #fff;
  padding: 44px;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}
.fancybox-slide--image .fancybox-content {
  max-width: none;
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  background: transparent;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0;
  transform-origin: top left;
  transition-property: transform, opacity;
  user-select: none;
  animation-timing-function: cubic-bezier(0.5, 0, 0.14, 1);
  -webkit-backface-visibility: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  z-index: 99995;
}
.fancybox-can-zoomOut .fancybox-content {
  cursor: zoom-out;
}
.fancybox-can-zoomIn .fancybox-content {
  cursor: zoom-in;
}
.fancybox-can-pan .fancybox-content, .fancybox-can-swipe .fancybox-content {
  cursor: grab;
}
.fancybox-is-grabbing .fancybox-content {
  cursor: grabbing;
}
.fancybox-container [data-selectable=true] {
  cursor: text;
}
.fancybox-image, .fancybox-spaceball {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  border: 0;
  border-radius: 30px;
  padding: 0;
  margin: 0;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.fancybox-spaceball {
  z-index: 1;
}
.fancybox-slide--iframe .fancybox-content, .fancybox-slide--map .fancybox-content, .fancybox-slide--pdf .fancybox-content, .fancybox-slide--video .fancybox-content {
  width: 100%;
  height: 100%;
  overflow: visible;
  padding: 0;
}
.fancybox-slide--video .fancybox-content {
  background: #444;
}
.fancybox-slide--map .fancybox-content {
  background: #e5e3df;
}
.fancybox-slide--iframe .fancybox-content {
  background: #fff;
}
.fancybox-iframe, .fancybox-video {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.fancybox-iframe {
  position: absolute;
  top: 0;
  left: 0;
}
.fancybox-error {
  width: 100%;
  max-width: 400px;
  background: #fff;
  padding: 40px;
  cursor: default;
}
.fancybox-error p {
  font-size: 16px;
  line-height: 20px;
  color: #444;
  padding: 0;
  margin: 0;
}
.fancybox-button {
  display: inline-block;
  width: 42px;
  height: 42px;
  position: relative;
  background: #7DC33F;
  box-shadow: none;
  border: 0;
  border-radius: 50%;
  vertical-align: top;
  padding: 10px;
  margin: 0;
  cursor: pointer;
  visibility: inherit;
  transition: all 0.2s ease-in-out;
}
.fancybox-button, .fancybox-button:link, .fancybox-button:visited {
  color: #fff;
}
.fancybox-button:hover {
  background: #5daf14;
  transition: background 0.3s ease-in-out;
}
.fancybox-button:focus {
  outline: none;
}
.fancybox-button.fancybox-focus {
  outline: 1px dotted;
}
.fancybox-button[disabled], .fancybox-button[disabled]:hover {
  color: #fff;
  outline: none;
  cursor: default;
  display: none !important;
}
.fancybox-button div {
  height: 100%;
}
.fancybox-button svg {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
}
.fancybox-button svg path {
  fill: currentColor;
  stroke-width: 0;
}
.fancybox-button--fsenter svg:nth-child(2), .fancybox-button--fsexit svg:first-child, .fancybox-button--pause svg:first-child, .fancybox-button--play svg:nth-child(2) {
  display: none;
}
.fancybox-progress {
  height: 2px;
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  background: #7DC33F;
  transform: scaleX(0);
  transform-origin: 0;
  transition-property: transform;
  transition-timing-function: linear;
  z-index: 99998;
}
.fancybox-close-small {
  position: absolute;
  top: -44px;
  right: -12px;
  color: #444;
  background: transparent;
  border: 0;
  border-radius: 0;
  opacity: 0.8;
  padding: 8px;
  cursor: pointer;
  z-index: 401;
}
.fancybox-close-small:hover {
  color: #fff;
  opacity: 1;
}
.fancybox-slide--html .fancybox-close-small {
  top: 0;
  right: 0;
  color: currentColor;
  padding: 10px;
}
.fancybox-slide--image.fancybox-is-scaling .fancybox-content {
  overflow: hidden;
}
.fancybox-is-scaling .fancybox-close-small, .fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small {
  display: none;
}
.fancybox-navigation .fancybox-button {
  width: 72px;
  height: 72px;
  border-radius: 0;
  position: absolute;
  top: calc(50% - 42px);
  background-clip: content-box;
  border-radius: 50%;
  opacity: 1;
}
.fancybox-navigation .fancybox-button div {
  padding: 6px;
}
.fancybox-navigation .fancybox-button--arrow_left {
  left: 0;
  /*	left: env(safe-area-inset-left); */
  padding: 12px;
}
.fancybox-navigation .fancybox-button--arrow_right {
  right: 0;
  /*	right: env(safe-area-inset-right); */
  padding: 12px;
}
.fancybox-caption {
  left: 30px;
  bottom: 12px;
  right: 30px;
  font-family: 'Chalkduster';
  font-size: 20px;
  line-height: 30px;
  color: #fff;
  text-align: center;
  padding: 30px;
  pointer-events: none;
  z-index: 99996;
}
@supports (padding: max(0px)) {
  .fancybox-caption {
    /*	padding: 75px max(44px, env(safe-area-inset-right)) max(25px, env(safe-area-inset-bottom)) max(44px, env(safe-area-inset-left)); */
  }
}
.fancybox-caption--separate {
  margin-top: -50px;
}
.fancybox-caption__body {
  max-height: 50vh;
  overflow: auto;
  pointer-events: all;
}
.fancybox-caption a, .fancybox-caption a:link, .fancybox-caption a:visited {
  color: #444;
  text-decoration: none;
}
.fancybox-caption a:hover {
  color: #fff;
  text-decoration: underline;
}
.fancybox-loading {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: transparent;
  border: 4px solid #888;
  border-bottom-color: #fff;
  border-radius: 50%;
  animation: a 1s linear infinite;
  opacity: 0.7;
  padding: 0;
  margin: -25px 0 0 -25px;
  z-index: 99999;
}
@keyframes a {
  to {
    transform: rotate(1turn);
  }
}
.fancybox-animated {
  transition-timing-function: cubic-bezier(0, 0, 0.25, 1);
}
.fancybox-fx-slide.fancybox-slide--previous {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.fancybox-fx-slide.fancybox-slide--next {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.fancybox-fx-slide.fancybox-slide--current {
  opacity: 1;
  transform: translateZ(0);
}
.fancybox-fx-fade.fancybox-slide--next, .fancybox-fx-fade.fancybox-slide--previous {
  opacity: 0;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.fancybox-fx-fade.fancybox-slide--current {
  opacity: 1;
}
.fancybox-fx-zoom-in-out.fancybox-slide--previous {
  opacity: 0;
  transform: scale3d(1.5, 1.5, 1.5);
}
.fancybox-fx-zoom-in-out.fancybox-slide--next {
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
}
.fancybox-fx-zoom-in-out.fancybox-slide--current {
  opacity: 1;
  transform: scaleX(1);
}
.fancybox-fx-rotate.fancybox-slide--previous {
  opacity: 0;
  transform: rotate(-1turn);
}
.fancybox-fx-rotate.fancybox-slide--next {
  opacity: 0;
  transform: rotate(1turn);
}
.fancybox-fx-rotate.fancybox-slide--current {
  opacity: 1;
  transform: rotate(0deg);
}
.fancybox-fx-circular.fancybox-slide--previous {
  opacity: 0;
  transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
}
.fancybox-fx-circular.fancybox-slide--next {
  opacity: 0;
  transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
}
.fancybox-fx-circular.fancybox-slide--current {
  opacity: 1;
  transform: scaleX(1) translateZ(0);
}
.fancybox-fx-tube.fancybox-slide--previous {
  transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg);
}
.fancybox-fx-tube.fancybox-slide--next {
  transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg);
}
.fancybox-fx-tube.fancybox-slide--current {
  transform: translateZ(0) scale(1);
}
@media (max-height: 576px) {
  .fancybox-slide {
    padding-left: 6px;
    padding-right: 6px;
  }
  .fancybox-slide--image {
    padding: 6px 0;
  }
  .fancybox-close-small {
    right: -6px;
  }
  .fancybox-slide--image .fancybox-close-small {
    width: 36px;
    height: 36px;
    top: 0;
    right: 0;
    color: #444;
    background: #7DC33F;
    opacity: 1;
    padding: 6px;
  }
  .fancybox-caption {
    padding-left: 12px;
    padding-right: 12px;
  }
  @supports (padding:max(0px)) {
    .fancybox-caption {
      /*	padding-left: max(12px, env(safe-area-inset-left));
			padding-right: max(12px, env(safe-area-inset-right)); */
    }
  }
}
.fancybox-share {
  max-width: 90%;
  text-align: center;
  background: #7DC33F;
  border-radius: 3px;
  padding: 30px;
}
.fancybox-share h1 {
  font-size: 35px;
  font-weight: 700;
  color: #444;
  margin: 0 0 20px;
}
.fancybox-share p {
  padding: 0;
  margin: 0;
}
.fancybox-share__button {
  display: inline-block;
  min-width: 130px;
  font-size: 14px;
  line-height: 40px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  border-radius: 3px;
  margin: 0 5px 10px;
  padding: 0 15px;
  transition: all 0.2s;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.fancybox-share__button:link, .fancybox-share__button:visited {
  color: #fff;
}
.fancybox-share__button:hover {
  text-decoration: none;
}
.fancybox-share__button--fb {
  background: #7DC33F;
}
.fancybox-share__button--fb:hover {
  background: #344e86;
}
.fancybox-share__button--pt {
  background: #7DC33F;
}
.fancybox-share__button--pt:hover {
  background: #aa0719;
}
.fancybox-share__button--tw {
  background: #0077ae;
}
.fancybox-share__button--tw:hover {
  background: #0d95e8;
}
.fancybox-share__button svg {
  width: 25px;
  height: 25px;
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 7px;
}
.fancybox-share__button svg path {
  fill: #fff;
}
.fancybox-share__input {
  width: 100%;
  color: #444;
  font-size: 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #d7d7d7;
  border-radius: 0;
  outline: none;
  padding: 10px 15px;
  margin: 10px 0 0;
}
.fancybox-thumbs {
  display: none;
  width: 200px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.4);
  padding: 0 4px;
  margin: 0;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  z-index: 99995;
}
.fancybox-thumbs-x {
  overflow-x: auto;
  overflow-y: hidden;
}
.fancybox-show-thumbs .fancybox-thumbs {
  display: block;
}
.fancybox-show-thumbs .fancybox-inner {
  right: 200px;
}
.fancybox-thumbs__list {
  width: 100%;
  height: 100%;
  position: absolute;
  position: relative;
  font-size: 0;
  list-style: none;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  margin: 0;
}
.fancybox-thumbs-x .fancybox-thumbs__list {
  overflow: hidden;
}
.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar {
  width: 7px;
}
.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track {
  background: #fff;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 10px;
}
.fancybox-thumbs__list a {
  width: 100%;
  height: 84px;
  position: relative;
  margin: 4px 0;
  background-color: rgba(0, 0, 0, 0.1);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  outline: none;
  overflow: hidden;
  cursor: pointer;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
}
.fancybox-thumbs__list a:hover {
  opacity: 0.6;
  transition: opacity 0.2s ease-in-out;
}
.fancybox-thumbs__list a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 3px solid #7DC33F;
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 99991;
}
.fancybox-thumbs__list a:focus:before {
  opacity: 0.5;
}
.fancybox-thumbs__list a.fancybox-thumbs-active:before {
  opacity: 1;
}
@media (max-width: 576px) {
  .fancybox-thumbs {
    width: 110px;
  }
  .fancybox-show-thumbs .fancybox-inner {
    right: 110px;
  }
  .fancybox-thumbs__list a {
    max-width: 100%;
  }
}
/* Hint im Entwicklungsmodus. Mit Launch ausschalten in grid.scss */
body:after {
  content: "S";
}
.only-s {
  display: block !important;
}
.no-s {
  display: none !important;
}
/* ------------[ Schriften ]------------ */
@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: local('Maven Pro Regular'), local('MavenPro-Regular'), url('/inc/fonts/maven-pro-v11-latin-500.woff2') format('woff2'), url('/inc/fonts/maven-pro-v11-latin-500.woff') format('woff');
}
@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: local('Maven Pro Bold'), local('MavenPro-Bold'), url('/inc/fonts/maven-pro-v11-latin-700.woff2') format('woff2'), url('/inc/fonts/maven-pro-v11-latin-700.woff') format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('/inc/fonts/open-sans-v15-latin-regular.woff2') format('woff2'), url('/inc/fonts/open-sans-v15-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Chalkduster';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Chalkduster'), local('Chalkduster-Regular'), url('/inc/fonts/chalkduster.woff2') format('woff2'), url('/inc/fonts/chalkduster.woff') format('woff');
}
/* ------------[ Body ]------------ */
body {
  font-family: 'Open Sans';
  font-size: 16px;
  line-height: 24px;
  color: #777;
  background: #fff;
  margin: 0;
  overflow-x: hidden;
}
/* ==============================[ Begrenzung Inhalt ]============================== */
/* Begrenzung des Contentbereichs */
.inner {
  width: 100%;
  padding: 0 18px;
  margin: 0 auto;
}
.small-width {
  width: 100%;
  margin: 0 auto;
}
/* ==============================[ Formate für Sektionen ]============================== */
section {
  position: relative;
  padding: 42px 0;
}
/* ------------[ Spezielle Klassen für Sektionen ]------------ */
/* erste Sektion wenn kein keyvisual vorhanden */
section.first-section {
  margin-top: 152px;
}
/* Sektion mit Hintergrundbild */
section.foto-background {
  position: relative;
  background-image: url('/inc/img/hintergruende/hintergrund-weide.jpg') !important;
  /*url(/images/hintergrundbilder/keyvisual-weide.jpg)*/
  background-size: cover;
  background-position: center;
  padding: 42px 0;
}
/* Sektion mit grünem-Hintergrund/Verlauf */
section.green-background {
  background-image: url('/inc/img/hintergruende/hintergrund-gruen.jpg') !important;
  /*url(/inc/img/corporate-design/hintergrund-gruen.png)*/
  background-size: cover;
  background-position: top center;
  padding: 42px 0;
}
/* Sektion mit Pfad-Icon */
section.foto-background:after {
  content: '';
  display: block;
  width: 100%;
  height: 42px;
  position: absolute;
  bottom: 0;
  background-image: url('/inc/img/corporate-design/abriss-weiss-unten.png');
  /*url(/inc/img/abriss-weiss-unten.png)*/
  z-index: 1;
}
/* Sektionen mit grauen Linien oben und unten */
section.border {
  border-top: 2px solid #f1f1f1;
  border-bottom: 2px solid #f1f1f1;
}
/* Sektion mit grauer Linie oben */
section.border-top {
  border-top: 2px solid #f1f1f1;
}
/* Sektion mit grauer Linie unten */
section.border-bottom {
  border-bottom: 2px solid #f1f1f1;
}
/* Sektion ohne Abstand */
section.no-padding {
  padding: 0;
}
/* Sektion ohne Abstand nach oben */
section.no-padding-top {
  padding: 0 0 42px;
}
/* Sektion ohne Abstand nach unten */
section.no-padding-bottom {
  padding: 42px 0 0;
}
/* Sektion mit wenig Abstand nach unten */
section.small-padding {
  padding: 24px 0;
}
section.small-padding-top {
  padding: 24px 0 42px;
}
section.small-padding-bottom {
  padding: 42px 0 24px;
}
/* ==============================[ universelle Klassen ]============================== */
/* ------------[ Positionierung der Elmente im Grid ]------------ */
section.align-items-center .grid {
  align-items: center;
}
section.align-items-bottom .grid {
  align-items: flex-end;
}
section.align-items-top .grid {
  align-items: flex-start;
}
/* ------------[ verschiedene Abstände ]------------ */
/* kein Abstand nach oben */
.no-margin {
  margin: 0 !important;
}
/* zusätzlicher Abstand nach oben */
.margin-top {
  margin-top: 30px !important;
}
/* zusätzlicher Abstand nach unten */
.margin-bottom {
  margin-bottom: 30px !important;
}
/* ------------[ verschiedene Abstände im Grid ]------------ */
/* kein Abstand im Grid */
.no-grid-gap {
  grid-gap: 0;
}
.no-grid-gap .grid {
  grid-gap: 0;
}
/* kleiner Abstand im Grid */
.small-grid-gap {
  grid-gap: 12px;
}
.small-grid-gap .grid {
  grid-gap: 12px;
}
/* großer Abstand im Grid */
.big-grid-gap {
  grid-gap: 24px;
}
.big-grid-gap .grid {
  grid-gap: 24px;
}
/* ------------[ Klassen für Texte ]------------ */
/* Text rechtsbündig */
.text-right {
  text-align: right;
}
/* Text zentriert */
.text-center {
  text-align: center;
}
/* kleiner Text - identisch mit pic-description */
.minitext {
  font-size: 16px;
  line-height: 20px;
}
/* Tabulator */
.tab {
  display: block;
  width: 4.5em;
  float: left;
  clear: left;
}
/* Meldung wenn Javascript deaktiviert */
p.no-java {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  background-color: #0083C8;
  padding: 30px;
  margin: 0;
  z-index: 99;
}
/* ------------[ Sonstiges ]------------ */
/* Per Script auf ganze DIVs ausgeweitete Links */
.clickbox {
  cursor: pointer;
}
/* Abkürzungen und Akronyme */
abbr {
  border-bottom: 1px dotted #ddd;
  cursor: help;
}
abbr[title], acronym[title] {
  text-decoration: none;
  /* Reset Browser-Default */
}
/* Hintergrundfarbe für selektierten Text */
::selection {
  background: #ddd;
  text-shadow: none;
}
/* ========================[ Header-Bereich ]======================== */
header {
  position: fixed;
  /* Fixierter Header */
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 2px 12px 12px 0px rgba(0, 0, 0, 0.4);
  z-index: 100;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Logo links und Navi rechts per Flex */
  transition: all 0.3s ease-in-out;
}
.header:after {
  content: '';
  display: block;
  width: 100%;
  height: 30px;
  position: absolute;
  bottom: -22px;
  left: 0;
  right: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-image: url('/inc/img/corporate-design/abriss-weiss-unten.png');
  /*url(/inc/img/abriss-weiss-unten.png)*/
  transform: rotate(181deg);
  transition: all 0.3s ease-in-out;
}
/* ------------[ Logo ]------------ */
a.logo {
  display: block;
  width: 100%;
  max-width: 124px;
  background-color: #fff;
  padding: 12px 0;
}
/* ------------[ Hauptnavigation ]------------ */
.mainnav {
  width: 100%;
  position: absolute;
  top: 100px;
  /* Richtet sich nach Höhe des fixierten Headers (Im nächsten Element den gleichen Wert eintragen) */
  left: 0;
  z-index: 100;
}
/* Liste der Hauptnavigation */
.mainnav > ul {
  height: calc(100vh - 100px);
  /* Gesamte Bildschirmhöhe abzüglich fixiertem Header (s.o) */
  overflow: auto;
  background-color: #fff;
  padding: 30px 18px 30px;
  margin: 0;
}
/* einzelne Navigationspunkte */
.mainnav > ul > li {
  display: block;
  background: none;
  padding: 0;
  margin: 0;
}
.mainnav > ul > li:last-child {
  margin: 0;
}
/* einzelne links in den Navigationspunkten */
.mainnav > ul > li > a {
  display: block;
  font-size: 30px;
  line-height: 36px;
  color: #0083C8;
  text-decoration: none;
  border: 2px solid rgba(0, 0, 0, 0);
  padding: 12px 24px;
  margin: 6px 0;
  transition: all 0.3s ease-in-out;
}
/* Navigation verstecken */
.header .mainnav {
  left: -100%;
}
/* Navigation verstecken */
.header.closed .mainnav {
  left: -100%;
  transition: all 0.6s ease-in-out;
}
/* Navigation einblenden */
.header.open .mainnav {
  left: 0;
  transition: all 0.6s ease-in-out;
}
/* hover/focus der Navigationspunkte */
nav.mainnav > ul > li:hover > a, nav.mainnav > ul > li:focus > a {
  color: #7DC33F;
  border: 2px solid #f1f1f1;
  border-radius: 30px;
  transition: all 0.3s ease-in-out;
}
/* current der Navigationspunkte */
nav.mainnav > ul > li.current > a {
  color: #fff;
  background-color: #7DC33F;
  background-image: url('/inc/img/icons/list-icon-white.svg');
  /*url('/inc/img/list-icon-white.svg')*/
  background-size: 72px 20px;
  background-position: center right;
  background-repeat: no-repeat;
  padding-right: 48px;
  border: none;
  border-radius: 30px;
  transition: all 0.3s ease-in-out;
}
/* ------------[ Subnavigation ]------------ */
ul.subnav {
  padding: 0;
  margin: 3px 0 24px;
}
ul.subnav > li {
  display: block;
  background: none;
  padding: 0;
  margin: 0;
}
ul.subnav > li:last-child {
  margin: 0;
}
ul.subnav > li > a {
  display: block;
  font-size: 18px;
  line-height: 24px;
  color: #777;
  text-decoration: none;
  border: 2px solid rgba(0, 0, 0, 0);
  padding: 6px 24px;
  margin: 0;
  transition: all 0.3s ease-in-out;
}
/* hover/current der Subnavigationspunkte */
ul.subnav > li > a:hover {
  color: #7DC33F;
  border: 2px solid #f1f1f1;
  border-radius: 30px;
  transition: all 0.3s ease-in-out;
}
/* current der Subnavigationspunkte */
ul.subnav > li.current > a {
  color: #fff;
  background-image: url('/inc/img/icons/list-icon-white.svg');
  /*url('/inc/img/list-icon-white.svg')*/
  background-size: 66px 14px;
  background-position: center right;
  background-repeat: no-repeat;
  background-color: #7DC33F;
  border: none;
  border-radius: 30px;
  padding-right: 48px;
  transition: all 0.3s ease-in-out;
}
/* ------------[ Mobile Navigation ]------------ */
#nav-toggle-wrap {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  position: relative;
}
.nav-toggle {
  display: block;
  position: relative;
  text-align: left;
  background: #7DC33F;
  padding: 30px;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.3s ease-in-out;
}
.nav-toggle:hover, .nav-toggle:focus, .nav-toggle.open {
  background: #5daf14;
}
/* Hamburger-Icon */
.hamburger-icon {
  width: 24px;
  position: absolute;
  top: 24px;
  right: 18px;
}
/* Styling der 3 Striche des Hamburgers */
.hamburger, .hamburger:after, .hamburger:before {
  height: 3px;
  position: relative;
  background-color: #fff;
  margin-top: 5px;
  transition: all 0.3s ease;
}
.hamburger:after, .hamburger:before {
  content: '';
  width: 100%;
  position: absolute;
}
/* Positionierung oberer Strich */
.hamburger:before {
  top: -12px;
}
/* Positionierung unterer Strich */
.hamburger:after {
  top: 2px;
}
/* Hamburger-Icon beim Öffnen des Menüs */
.header.open .hamburger {
  background: none;
  /* mittlerer der drei Striche wird ausgeblendet */
}
.header.open .hamburger:before {
  top: -6px;
  background: #fff;
  transform: rotate(45deg);
}
.header.open .hamburger:after {
  top: -6px;
  background: #fff;
  transform: rotate(-45deg);
}
/* ========================[ Standard-Elemente ]======================== */
/* ------------[ Überschriften ]------------ */
/* Überschriften */
h1, h2, h3, h4 {
  font-family: 'Maven Pro';
  font-weight: normal;
  color: #0083C8;
  hyphens: none;
}
h1 {
  font-size: 36px;
  line-height: 42px;
  margin: 0 0 12px;
}
h2 {
  font-size: 24px;
  line-height: 30px;
  margin: 30px 0 12px;
}
section h2:first-child {
  margin: 0 0 12px;
}
h3 {
  font-size: 20px;
  line-height: 26px;
  margin: 24px 0 12px;
}
section h3:first-child {
  margin: 0 0 12px;
}
h4 {
  font-size: 18px;
  line-height: 24px;
  margin: 24px 0 6px;
}
/* ------------[ Absätze ]------------ */
p {
  margin: 0 0 1em;
}
p strong {
  font-weight: bold;
}
section p:last-child {
  margin-bottom: 0;
  /* kein Abstand nach unten beim letzten Absatz */
}
/* ------------[ Verlinkungen ]------------ */
/* Links */
a {
  color: #7DC33F;
  text-decoration: none;
}
a:hover, a:focus, a:active {
  color: #5daf14;
}
/* Links mit Pfeil */
a.arrow-link {
  color: #777;
  line-height: 28px;
  background-image: url('/inc/img/arrows/arrow-blue-right.svg');
  /*url('/inc/img/arrows/arrow-blue-right.svg')*/
  background-size: 18px 20px;
  background-repeat: no-repeat;
  background-position: left 0.1em;
  padding-left: 30px;
  transition: all 0.2s ease-in-out;
}
a.arrow-link:hover {
  color: #0083C8;
  padding-left: 36px;
  transition: all 0.2s ease-in-out;
}
/* Buttons */
.button {
  display: inline-block;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #7DC33F;
  border-radius: 30px;
  padding: 16px 30px;
  margin: 12px 0 0;
  transition: all 0.1s ease-in-out;
}
.button:hover {
  color: #fff;
  background-color: #5daf14;
  animation-name: wobble-vertical;
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}
@keyframes wobble-vertical {
  16.65% {
    transform: translateY(8px);
  }
  33.3% {
    transform: translateY(-6px);
  }
  49.95% {
    transform: translateY(4px);
  }
  66.6% {
    transform: translateY(-2px);
  }
  83.25% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}
/* Zurück-Button */
.back-link, .back-link-keyvisual {
  display: inline-block;
  position: absolute;
  color: #fff;
  background-color: #7DC33F;
  background-image: url('/inc/img/arrows/arrow-white-left.svg');
  /*url('/inc/img/arrows/arrow-white-left.svg')*/
  background-size: 48px 18px;
  background-repeat: no-repeat;
  background-position: left center;
  border-radius: 30px;
  padding: 8px 18px 8px 42px;
  transition: all 0.3s ease-in-out;
  z-index: 2;
}
.back-link {
  top: -18px;
  left: 18px;
}
.back-link-keyvisual {
  bottom: -12px;
  left: 18px;
}
.back-link:hover, .back-link-keyvisual:hover {
  color: #fff;
  background-color: #5daf14;
  padding: 8px 24px 8px 54px;
  transition: all 0.3s ease-in-out;
}
/* Verlinkte Bilder */
a img {
  display: block;
  border: none;
}
/* ------------[ seitlich fixierte Buttons ]------------ */
.fixed-buttons {
  display: none;
}
/* ------------[ Bilder ]------------ */
img.pic {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
}
/* Contentbilder */
picture {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}
/* ------------[ Bilder mit weißen Abrisskanten ]------------ */
picture.abriss-rechts {
  margin-bottom: -18px;
}
picture.abriss-links {
  margin-top: -18px;
}
/* weiße Abrisskanten */
picture.abriss-rechts:before, picture.abriss-links:before, picture.abriss-rechts:after, picture.abriss-links:after {
  content: '';
  display: block;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
  z-index: 1;
}
/* weiße Abrisskante rechts */
picture.abriss-rechts:before {
  width: 48px;
  height: 100%;
  background-image: url('/inc/img/corporate-design/abriss-weiss-rechts.png');
  /*url(/inc/img/abriss-weiss-rechts.png)*/
  top: 0;
  right: 0;
}
/* weiße Abrisskante links */
picture.abriss-links:before {
  width: 48px;
  height: 100%;
  background-image: url('/inc/img/corporate-design/abriss-weiss-links.png');
  /*url(/inc/img/abriss-weiss-links.png)*/
  top: 0;
  left: 0;
}
/* weiße Abrisskante unten */
picture.abriss-rechts:after {
  width: 100%;
  height: 48px;
  background-image: url('/inc/img/corporate-design/abriss-weiss-unten.png');
  /*url(/inc/img/abriss-weiss-unten.png)*/
  bottom: 0;
  left: 0;
  right: 0;
}
/* weiße Abrisskante oben */
picture.abriss-links:after {
  width: 100%;
  height: 48px;
  background-image: url('/inc/img/corporate-design/abriss-weiss-unten.png');
  /*url(/inc/img/abriss-weiss-unten.png)*/
  top: 0;
  left: 0;
  right: 0;
  transform: rotate(180deg);
}
/* keine weiße Abrisskante bei Fotos auf Fotostreifen (Hintergrundbild) */
section.foto-background picture:before, section.foto-background picture:after, section.green-background picture:before, section.green-background picture:after {
  background: none;
}
/* ------------[ Contentbild + 3 Siegel ]------------ */
picture .sternenfair-siegel {
  position: absolute;
  bottom: -12px;
  left: 24%;
  margin: 0 -6px;
  z-index: 3;
}
picture .sternenfair-siegel .siegel {
  position: relative;
  float: left;
  width: 28%;
  margin: 0 6px;
}
picture .sternenfair-siegel .siegel > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 100%;
  transition: all 0.3s ease-in-out;
}
picture .sternenfair-siegel .siegel:hover > img {
  text-shadow: 0 0 42px #000;
  transform: scale(1.08);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
/* Siegel + Erklärung */
picture .sternenfair-siegel .siegel .siegel-text {
  width: 156px;
  position: absolute;
  right: -36px;
  bottom: 200%;
  text-shadow: 0 0 42px #000;
  transform: scale(0);
  transition: all 0.3s ease-in-out;
  z-index: 2;
}
picture .sternenfair-siegel .siegel:hover .siegel-text {
  transform: scale(1);
  transition: all 0.3s ease-in-out;
}
/* Siegel + Erklärung (Pfeil) */
picture .sternenfair-siegel .siegel .siegel-text img {
  width: 60px;
  height: auto;
  position: absolute;
  left: 30%;
  top: 200%;
  transform: rotate(-6deg);
  opacity: 0;
  transition: all 0.6s ease-in-out;
}
picture .sternenfair-siegel .siegel:hover .siegel-text img {
  top: 110%;
  opacity: 1;
  transition: all 0.6s ease-in-out;
}
/* Siegel + Erklärung (Text) */
picture .sternenfair-siegel .siegel .siegel-text span {
  font-size: 14px;
  line-height: 18px;
  font-family: 'Chalkduster';
  color: #fff;
}
/* ------------[ Contentbild + Stempel ]------------ */
picture .sternenfair-stempel img {
  width: 36%;
  height: auto;
  position: absolute;
  bottom: 54px;
  right: 30px;
  transform: rotate(-6deg);
  z-index: 1;
}
picture .sternenfair-stempel img:hover {
  animation-name: stempel-shake;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  cursor: pointer;
}
@keyframes stempel-shake {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(2deg) scale(1.04);
  }
  75% {
    transform: rotate(-4deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/* ------------[ Bild größer klicken ]------------ */
.fancybox {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  transition: all 0.2s ease-in-out;
}
.fancybox a picture {
  display: block;
  width: 100%;
  height: 100%;
}
/* Icon auf groß klickbaren Bild */
a.fancybox:after {
  content: '';
  width: 42px;
  height: 42px;
  position: absolute;
  bottom: 24px;
  right: 24px;
  background-color: #7DC33F;
  background-image: url('/inc/img/icons/icon-plus.svg');
  /*url('/inc/img/icon-plus.svg')*/
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 30px;
  transition: all 0.2s ease-in-out;
  z-index: 9;
}
a.fancybox:hover:after {
  background-color: #5daf14;
  transition: all 0.2s ease-in-out;
}
/* ------------[ Unnummerierte Listen ]------------ */
ul {
  padding-left: 0;
  margin: 24px 0 0;
}
/* Liste 1. Ebene */
ul > li {
  text-align: left;
  list-style-type: none;
  background-image: url('/inc/img/icons/list-icon-blue.svg');
  /*url('/inc/img/list-icon-blue.svg')*/
  background-size: 26px 22px;
  background-position: top left;
  background-repeat: no-repeat;
  padding-left: 38px;
  margin: 12px 0;
}
/* Liste 2. Ebene */
li > ul {
  padding-left: 30px;
  margin: 24px 0;
}
li > ul > li {
  text-align: left;
  background-size: 18px 22px;
  padding-left: 30px;
}
/* ------------[ Nummerierte Listen ]------------ */
ol {
  padding-left: 30px;
  margin: 0;
}
/* Liste 1. Ebene */
ol > li {
  text-align: left;
  padding-left: 6px;
  margin: 0;
}
/* Liste 2. Ebene */
li > ol {
  padding-left: 30px;
  margin: 12px 0;
}
li > ol > li {
  text-align: left;
  padding-left: 6px;
}
/* ------------[ Listen Sonderformate ]------------ */
/* ------------[ Tabellen ]------------ */
table {
  display: block;
  width: 100%;
  background-color: #fff;
  border: none;
  border-collapse: collapse;
  border-radius: 12px 12px 0 0;
  overflow-x: scroll;
}
th, td {
  text-align: left;
  min-width: 160px;
  vertical-align: top;
}
th {
  background-color: #0083C8;
  color: #fff;
  text-align: left;
  padding: 12px;
}
td {
  border: 2px solid #f1f1f1;
  border-width: 2px;
  padding: 6px 12px;
}
/* ========================[ Sonderelmente ]======================== */
/* ------------[ Keyvisual ]------------ */
.keyvisual-wrap {
  position: relative;
  margin-top: 100px;
}
.keyvisual-wrap .inner {
  position: relative;
}
/* Abrisskante unten */
.keyvisual-wrap:after {
  content: '';
  display: block;
  width: 100%;
  height: 42px;
  position: absolute;
  bottom: 0;
  background-image: url('/inc/img/corporate-design/abriss-weiss-unten.png');
  /*url(/inc/img/abriss-weiss-unten.png)*/
  z-index: 1;
}
/* Abrisskanten picture zurücksetzen / ausblenden */
.keyvisual-wrap picture:before, .keyvisual-wrap picture:after {
  background-image: none;
}
/* Keyvisual / Hintergrundbild */
.keyvisual {
  display: block;
  height: 240px;
  background-size: cover;
  background-position: center;
}
/* Bundesland-Siegel */
.keyvisual-siegel img {
  width: 100px;
  height: auto;
  position: absolute;
  bottom: 30px;
  right: 148px;
  z-index: 2;
}
/* Kuhkopf */
.keyvisual-kuh img {
  width: 200px;
  height: auto;
  position: absolute;
  bottom: -48px;
  right: -30px;
  z-index: 2;
}
.keyvisual-kuh img:hover {
  animation-name: kuh-shake;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  cursor: pointer;
}
@keyframes kuh-shake {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(3deg) scale(1.05);
  }
  75% {
    transform: rotate(-6deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/* ------------[ Keyvisual Startseite ]------------ */
/* Keyvisual / Hintergrundbild */
#start .keyvisual {
  height: 360px;
  background-position: bottom center;
}
/* ------------[ Intro ]------------ */
.headline-section {
  max-width: 540px;
  padding: 72px 0 42px;
  margin: 0 auto;
}
.headline-section h1 {
  text-align: center;
}
.headline-section p {
  font-size: 18px;
  line-height: 24px;
  text-align: center;
}
/* ------------[ Intro Startseite ]------------ */
.keyvisual-wrap .keyvisual-text {
  max-width: 360px;
  position: absolute;
  top: 72px;
  left: 18px;
  right: 18px;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 60px #000;
  margin: 0 auto;
  z-index: 2;
}
.keyvisual-wrap h1 {
  font-size: 36px;
  line-height: 42px;
  color: #fff;
  margin: 0 auto;
}
.keyvisual-wrap p {
  font-size: 18px;
  line-height: 24px;
  margin: 6px auto 0;
}
/* ------------[ Bildergalerie ]------------ */
.image-gallery {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
/* Auf small alle Bilder vollbreit */
.image-gallery li {
  display: flex;
  flex-basis: 100%;
  position: relative;
  background: none;
  border-radius: 30px;
  padding: 0;
  margin: 12px 0;
  transition: background 0.3s ease-in-out;
}
/* Lupen-icon zum groß klicken */
.image-gallery li a:after {
  content: '';
  width: 36px;
  height: 36px;
  position: absolute;
  bottom: 18px;
  right: 18px;
  background-color: #7DC33F;
  background-image: url('/inc/img/icons/icon-plus.svg');
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 30px;
  padding: 12px;
  transition: all 0.3s ease-in-out;
  z-index: 99;
}
.image-gallery li:hover a:after {
  background-color: #5daf14;
  transition: all 0.3s ease-in-out;
}
.image-gallery li img {
  border-radius: 30px;
  transition: all 0.3s ease-in-out;
}
.image-gallery li:hover img {
  border-radius: 42px;
  transition: all 0.3s ease-in-out;
}
/* ------------[ Infoboxen ]------------ */
section.foto-background .infobox, section.foto-background .infobox-white {
  height: auto;
}
/* ------------[ Infobox Blau ]------------ */
.infobox {
  height: 100%;
  text-align: left;
  color: #fff;
  background-color: #0083C8;
  border-radius: 30px;
  padding: 30px 18px;
}
/* infobox Text */
.infobox h2, .infobox h3 {
  color: #fff;
}
/* infobox Listen */
.infobox ul > li {
  background-image: url('/inc/img/icons/list-icon-white.svg');
  /*url('/inc/img/list-icon-white.svg')*/
}
/* infobox Links */
.infobox a {
  color: #fff;
  text-decoration: underline;
}
.infobox a:hover {
  opacity: 0.8;
}
/* infobox Link mit Pfeil */
.infobox a.arrow-link {
  color: #fff;
  background-image: url('/inc/img/arrows/arrow-white-right.svg');
  /*url('/inc/img/arrows/arrow-white-right.svg')*/
}
/* infobox Button */
.infobox a.button {
  text-decoration: none;
  margin-top: 6px;
}
.infobox a.button:hover {
  opacity: 1;
}
/* ------------[ Infobox Weiß ]------------ */
.infobox-white {
  height: 100%;
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.3);
  padding: 30px;
}
/* infobox Text */
.infobox-white h2, .infobox-white h3 {
  color: #0083C8;
}
.infobox-white p {
  color: #777;
}
/* ------------[ Teaser ]------------ */
.teaser {
  width: 100%;
  height: 100%;
  position: relative;
  color: #777;
  text-align: center;
  border-radius: 30px;
  background: #fff;
  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.3);
  margin: 0 auto;
  transition: all 0.3s ease-in-out;
}
.teaser:hover, .teaser:focus {
  transform: scale(1.04);
  transition: all 0.3s ease-in-out;
}
/* Teaser-Bild */
.teaser-image {
  display: block;
  width: 100%;
  height: 200px;
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 30px 30px 0 0;
}
.teaser-image:after {
  content: '';
  display: block;
  width: 100%;
  height: 42px;
  position: absolute;
  bottom: -2px;
  background-image: url('/inc/img/corporate-design/abriss-weiss-unten.png');
  /*url(/inc/img/abriss-weiss-unten.png)*/
  z-index: 1;
}
/* Teaser-Text*/
.teaser h3 {
  font-size: 24px;
  line-height: 30px;
  padding: 24px 18px 0;
  margin: 0;
}
.teaser p {
  color: #777;
  padding: 12px 18px 24px;
  margin: 0;
}
/* ------------[ Flex-Teaser ]------------ */
section.teaser-group {
  position: relative;
  margin-top: -72px;
}
section.teaser-group img.pfad {
  display: none;
}
/* alle Teaser */
.teaser-flex {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-end;
}
/* Einzelner Teaser */
.teaser-flex .teaser {
  height: 424px;
  /* Standard-Höhe, wird in der Vorlage je nach Bildgröße unterschiedlich ausgegeben (immer 142px höher) */
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  justify-content: flex-end;
  background: none;
  box-shadow: none;
  padding: 0;
}
.teaser-flex .teaser:hover, .teaser-flex .teaser:focus {
  transform: scale(1);
}
.teaser-flex .teaser:hover:after {
  display: none;
  /* Pfeil bei hover der normalen Teaser entfernen */
}
.teaser-flex .teaser a {
  height: 200px;
  background: #fff;
  border-radius: 30px;
  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease-in-out;
}
.teaser-flex .teaser:hover a, .teaser-flex .teaser:focus a {
  height: 240px;
  background: #f9f9f9;
  transition: all 0.3s ease-in-out;
}
.teaser-flex .teaser .teaser-flex-image {
  display: block;
  width: 300px;
  height: auto;
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease-in-out;
}
.teaser-flex .teaser:hover .teaser-flex-image {
  transform: translateX(-50%) scale(1.08);
  transition: all 0.3s ease-in-out;
}
.teaser-flex .teaser h3 {
  display: block;
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  font-size: 22px;
  line-height: 28px;
  color: #777;
  text-align: left;
  padding: 0;
  margin: 0;
}
/* ------------[ Akkordeon ]------------ */
/* Akkordeon Titel */
.accordion .title {
  text-align: left;
  background: #7DC33F;
  border-radius: 30px;
  padding: 0 24px 0 0;
  /* Abstand für Pfeile rechts */
  margin-bottom: 6px;
  /* Abstand zu unterem accordion */
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.accordion .title:last-child {
  margin-bottom: 0;
  /* Abstand zu unterem accordion */
}
.accordion .title:hover {
  background: #5daf14;
}
/* Akkordeon Verlinkung */
.accordion a {
  color: #fff;
  text-decoration: none;
}
/* Akkordeon Überschrift im Titel */
.accordion .title h3 {
  display: block;
  font-size: 20px;
  line-height: 30px;
  color: #fff;
  background: url('/inc/img/arrows/arrow-right.svg') no-repeat right;
  background-size: 16px 16px;
  padding: 18px;
  margin: 0;
}
/* Akkordeon Inhalt */
.accordion .acc-content {
  text-align: left;
  background: #fff;
  padding: 18px 18px 42px;
  /* mehr Abstand nach unterem wegen Abstand durch accordion */
}
.accordion .acc-content a {
  color: #7DC33F;
}
.accordion .acc-content a:hover {
  color: #5daf14;
}
.accordion .acc-content a.button, .accordion .acc-content a.button:hover {
  color: #fff;
}
/* wenn Akkordeon offen */
.accordion .open {
  background: #5daf14;
}
.accordion .open h3 {
  background: url('/inc/img/arrows/arrow-down.svg') no-repeat right;
  background-size: 16px 16px;
}
/* ------------[ Zitat ]------------ */
/* Zitat */
.zitat-box {
  width: 100%;
  max-width: 480px;
  position: relative;
  text-align: center;
  background: #fff;
  border-radius: 30px;
  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.3);
  padding: 30px 18px;
  margin: 0 auto;
}
/* Zitat-Autor */
.zitat-box .zitat-autor, .zitat-box .zitat-autor a, .zitat-box .zitat-autor a:hover {
  color: #0083C8;
}
.zitat-box-milchbauer {
  transition: all 0.3s ease-in-out;
}
.zitat-box-milchbauer:hover {
  transform: scale(1.025);
  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.35);
  transition: all 0.3s ease-in-out;
}
/* ------------[ Aktuelles / News 3er-Sektion ]------------ */
/* alle 3 Meldungen */
.news-meldungen {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin: -12px 0;
}
/* einzelne Meldung */
.news-meldung {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.3);
  margin: 12px 0;
  transition: all 0.3s ease-in-out;
  z-index: 1;
}
.news-meldung:hover {
  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.4);
  transform: scale(1.02);
  transition: all 0.3s ease-in-out;
}
/* News-Bild */
.news-meldung-img {
  position: relative;
}
.news-meldung-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 30px 30px 0 0;
}
.news-meldung-img:after {
  content: '';
  display: block;
  width: 100%;
  height: 48px;
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  background-image: url('/inc/img/corporate-design/abriss-weiss-unten.png');
  /*url(/inc/img/abriss-weiss-unten.png)*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
  z-index: 1;
}
/* News-Datum */
.news-text p.news-date {
  margin: 0 0 6px;
}
/* News-Text */
.news-text {
  text-align: left;
  padding: 0 24px 30px;
}
.news-text h3 {
  font-size: 24px;
  line-height: 30px;
  margin: 0 0 6px 0;
}
.news-text h3 a, .news-text h3 a:hover {
  color: #0083C8;
}
.news-text p {
  margin-bottom: 36px;
}
.news-text a.news-teaser-link {
  display: block;
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  text-align: right;
  padding: 0;
  transition: all 0.3s ease-in-out;
}
.news-meldung:hover .news-text a.news-teaser-link {
  color: #5daf14;
  padding: 0 24px 0 0;
  transition: all 0.3s ease-in-out;
}
section.news .button {
  display: block;
  max-width: 340px;
  margin: 30px auto 0;
}
/* ------------[ Aktuelles / News ]------------ */
.pagination {
  display: block;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
.pagination p {
  display: inline-block;
  font-size: 20px;
  color: #7DC33F;
  padding: 0 30px;
  margin: 0 auto;
}
.pagination a {
  display: inline-block;
  color: #777;
  margin: 0 3px;
}
.pagination a:hover {
  color: #7DC33F;
}
.pagination a.pagination-button {
  color: #fff;
  background-color: #7DC33F;
  border-radius: 30px;
  padding: 6px 24px;
  margin: 0;
}
.pagination a.pagination-button:hover {
  color: #fff;
  background-color: #5daf14;
}
.news-meldung-foto {
  display: block;
  position: relative;
}
.news-meldung-foto:before {
  content: '';
  display: block;
  width: 54px;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  background-image: url('/inc/img/corporate-design/abriss-weiss-rechts.png');
  /*url(/inc/img/abriss-weiss-rechts.png)*/
  z-index: 1;
}
.news-meldung-foto:after {
  content: '';
  display: block;
  width: 100%;
  height: 42px;
  position: absolute;
  bottom: 0;
  background-image: url('/inc/img/corporate-design/abriss-weiss-unten.png');
  /*url(/inc/img/abriss-weiss-unten.png)*/
  z-index: 1;
}
p.news-date {
  margin: 0 0 -36px;
}
.news-meldung-text h1 {
  font-size: 24px;
  line-height: 30px;
  margin-top: 48px;
}
/* ------------[ Presse-Übersicht ]------------ */
.presse-meldung {
  border-top: 2px solid #f1f1f1;
  padding: 42px 24px;
  transition: all 0.3s ease-in-out !important;
}
.presse-meldung:last-child {
  border-bottom: 2px solid #f1f1f1;
}
.presse-meldung-bild {
  position: relative;
  border-radius: 30px 0 0 30px;
}
.presse-meldung-bild:after {
  content: '';
  display: block;
  width: 100%;
  height: 42px;
  position: absolute;
  bottom: 0;
  background-image: url('/inc/img/corporate-design/abriss-weiss-unten.png');
  /*url(/inc/img/abriss-weiss-unten.png)*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
  z-index: 1;
}
.presse-meldung-text {
  text-align: center;
  padding-top: 18px;
}
.presse-meldung-text h2 a {
  color: #0083C8;
}
/* ------------[ Video ]------------ */
/* Video als iFrame responsive einbinden */
.video-embed {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
}
.video-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url('/inc/img/hintergruende/video-umriss.png') no-repeat center;
  background-size: contain;
  padding: 18px;
}
/* Video als PopUp öffnen */
.video-overlay a {
  display: block;
  position: relative;
  cursor: pointer !important;
}
.video-overlay a[mhlightbox]:after {
  display: none;
  /* "Plus" der Lightbox ausblenden */
}
/* Playbutton Youtube */
.m_yt_button {
  display: block;
  width: 84px;
  height: 60px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}
/* grauer Hintergrund des Play-Buttons im SVG */
.ytp-large-play-button-bg {
  fill: #1f1f1f;
  fill-opacity: 0.8;
  transition: fill 0.5s cubic-bezier(0.4, 0, 1, 1) 0s, fill-opacity 0.5s cubic-bezier(0.4, 0, 1, 1) 0s;
}
.video-overlay a:hover .ytp-large-play-button-bg {
  fill: #cc181e;
  fill-opacity: 1;
  transition: fill 0.5s cubic-bezier(0, 0, 0.2, 1) 0s, fill-opacity 0.5s cubic-bezier(0, 0, 0.2, 1) 0s;
}
.responsive-video-popup img {
  width: 100%;
  height: auto;
}
/* ------------[ Video-Beschreibung]------------ */
.video-beschreibung {
  width: 78%;
  max-width: 360px;
  height: auto;
  position: relative;
  font-family: 'Chalkduster';
  font-size: 18px;
  line-height: 26px;
  text-align: left;
  margin: 0 0 0 12px;
}
.video-beschreibung p strong {
  color: #0083C8;
}
.video-beschreibung:after {
  content: '';
  width: 84px;
  height: 54px;
  position: absolute;
  top: 38%;
  left: auto;
  right: -26%;
  background-image: url('/inc/img/arrows/pfeil-blau-rechts.svg');
  /*url(/inc/img/arrows/pfeil-blau-rechts.svg)*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(-24deg);
}
/* ------------[ Formulare ]------------ */
.form-content {
  margin: 12px 0;
}
legend {
  display: block;
  font-size: 18px;
  line-height: 24px;
  padding: 12px 0 0;
}
label {
  display: block;
  font-size: 18px;
  line-height: 24px;
  color: #777;
  cursor: pointer;
}
input, textarea, select, .input-radio-content, .input-checkbox-content {
  width: 100%;
  margin: 10px 0;
}
input, textarea {
  display: block;
  font-size: 15px;
  line-height: 24px;
  background-color: #fff;
  border: 1px solid #f1f1f1;
  border-radius: 30px;
  padding: 12px 18px;
  resize: none;
}
fieldset {
  border: none;
  clear: both;
}
textarea {
  width: 100%;
  min-height: 120px;
}
select {
  color: #7DC33F;
  width: 100%;
  font-size: 16px;
  line-height: 22px;
  background-color: #fff;
  background-image: url('/inc/img/arrows/arrow-down.svg');
  /*url(/inc/img/arrows/arrow-down.svg);*/
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 18px;
  border: 1px solid #7DC33F;
  padding: 12px 18px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-appearance: none;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border: 1px solid #7DC33F;
}
/* Radio/Checkboxen */
input[type="radio"]:checked, input[type="radio"]:not(:checked), input[type="checkbox"]:checked, input[type="checkbox"]:not(:checked) {
  position: absolute;
  left: -9999px;
}
input[type="radio"]:checked + label, input[type="radio"]:not(:checked) + label, input[type="checkbox"]:checked + label, input[type="checkbox"]:not(:checked) + label {
  position: relative;
  font-size: 16px;
  line-height: 22px;
  padding-left: 36px;
  cursor: pointer;
}
input[type="radio"]:checked + label:before, input[type="radio"]:not(:checked) + label:before, input[type="checkbox"]:checked + label:before, input[type="checkbox"]:not(:checked) + label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  border: 1px solid #7DC33F;
  background: #fff;
}
input[type="radio"]:checked + label:after, input[type="radio"]:not(:checked) + label:after, input[type="checkbox"]:checked + label:after, input[type="checkbox"]:not(:checked) + label:after {
  content: '';
  width: 12px;
  height: 12px;
  position: absolute;
  top: 6px;
  left: 6px;
  background: #7DC33F;
  border-radius: 100%;
  transition: all 0.2s ease-in-out;
}
/* Checkbox */
input[type="checkbox"]:checked + label:before, input[type="checkbox"]:not(:checked) + label:before {
  border-radius: 6px;
}
input[type="checkbox"]:checked + label:after, input[type="checkbox"]:not(:checked) + label:after {
  border-radius: 0;
  background: url(/inc/img/icons/icon-check.svg) center no-repeat;
}
/* Radio */
input[type="radio"]:not(:checked) + label:after, input[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
  -webkit-transform: scale(0);
}
input[type="radio"]:checked + label:after, input[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
  -webkit-transform: scale(1);
}
/* option */
option {
  padding: 0.3em 1em 0.3em 1em;
  border-top: 1px solid #777;
  background: #fff;
}
/* Button */
input[type="submit"] {
  color: #fff;
  background-color: #7DC33F;
  border: none;
  padding: 12px 24px;
  cursor: pointer;
  width: auto;
}
input[type="submit"]:hover {
  background-color: #5daf14;
}
/* Fehlermeldungen */
.fieldError {
  border: 1px solid #a94442;
}
.labelError {
  color: #a94442;
}
select::-ms-expand {
  display: none;
}
/* ------------[ Produkt Slider ]------------ */
.section-einleitung {
  display: block;
  width: 100%;
  text-align: center;
  margin: 0 auto 60px;
}
/* ------------[ Rezept-Teaser (Content) ]------------ */
/* Rezept */
.rezept-box {
  width: 100%;
  max-width: 480px;
  position: relative;
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.3);
  margin: 12px auto 0;
  transition: all 0.2s ease-in-out;
}
.rezept-box:first-child {
  margin: 0 auto;
}
.rezept-box:hover {
  transform: scale(1.025);
  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.35);
  transition: all 0.2s ease-in-out;
}
/* Rezept-Text */
.rezept-text {
  padding: 24px 24px 42px 24px;
}
.rezept-box h3 a {
  color: #0083C8;
}
.rezept-box a.rezept-link {
  position: absolute;
  bottom: 24px;
}
/* Rezept-Bild */
.rezept-image {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 30px 30px 0 0;
}
/* ------------[ Rezept-Teaser (Übersichtsseite) ]------------ */
.rezept-teaser {
  border-top: 2px solid #f1f1f1;
  padding: 42px 18px;
  transition: all 0.3s ease-in-out !important;
}
.rezept-teaser:hover {
  border-top: 2px solid rgba(0, 0, 0, 0);
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 3px 3px 12px 0px rgba(0, 0, 0, 0.3);
  margin: 0 0 42px;
  transition: all 0.3s ease-in-out !important;
}
.rezept-teaser:last-child {
  border-bottom: 2px solid #f1f1f1;
}
.rezept-teaser-image {
  position: relative;
  border-radius: 30px 0 0 30px;
}
.rezept-teaser-image:after {
  content: '';
  display: block;
  width: 100%;
  height: 42px;
  position: absolute;
  bottom: 0;
  background-image: url('/inc/img/corporate-design/abriss-weiss-unten.png');
  /*url(/inc/img/abriss-weiss-unten.png)*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
  z-index: 1;
}
.rezept-teaser-text {
  text-align: center;
}
.rezept-teaser-text h2 a {
  color: #0083C8;
}
.rezept-bild picture:before {
  content: '';
  display: block;
  width: 54px;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  background-image: url('/inc/img/corporate-design/abriss-weiss-rechts.png');
  /*url(/inc/img/abriss-weiss-rechts.png)*/
  z-index: 1;
}
.rezept-bild picture:after {
  content: '';
  display: block;
  width: 100%;
  height: 42px;
  position: absolute;
  bottom: 0;
  background-image: url('/inc/img/corporate-design/abriss-weiss-unten.png');
  /*url(/inc/img/abriss-weiss-unten.png)*/
  z-index: 1;
}
/* ------------[ Fotostreifen Milchbauern ]------------ */
section.fotostreifen-milchbauern {
  position: relative;
  width: 100%;
  height: 420px;
  background-image: url('/inc/img/hintergruende/hintergrund-kuehe-auf-der-weide-2.jpg');
  /*url(/images/hintergrundbilder/keyvisual-kuehe-auf-der-weide-3.jpg)*/
  background-size: cover;
  background-position: bottom right;
}
/* weiße Abrisskante unten */
section.fotostreifen-milchbauern:after {
  content: '';
  display: block;
  width: 100%;
  height: 42px;
  position: absolute;
  bottom: 0;
  background-image: url('/inc/img/corporate-design/abriss-weiss-unten.png');
  /*url(/inc/img/abriss-weiss-unten.png)*/
  z-index: 1;
}
/* Schild */
.schild {
  width: 480px;
  position: absolute;
  bottom: 0;
  right: -72px;
}
.schild-hintergrund {
  width: 480px;
  height: auto;
}
/* Text auf Schild */
.schild-background {
  position: absolute;
  top: 36px;
  left: 24px;
  right: 30px;
  bottom: 142px;
  background-color: white;
  transform: rotate(2deg);
  border-radius: 12px;
  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.3);
  z-index: 1;
}
/* Text auf Schild */
.schild-text {
  width: 380px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 18px;
  text-align: center;
}
.schild-text h2:first-child {
  margin: 0 0 12px;
}
section.fotostreifen-milchbauern .biene {
  width: 66px;
  height: auto;
  position: absolute;
  top: -12px;
  left: 330px;
  z-index: 3;
}
/* ========================[ Sonderelmente Startseite ]======================== */
/* ------------[ Produktübersicht Startseite ]------------ */
section.products {
  width: 100%;
  height: 600px;
  position: relative;
  background-image: url('/inc/img/hintergruende/hintergrund-gruen.jpg');
  /*url(/inc/img/corporate-design/hintergrund-gruen.png)*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
}
.product-container {
  width: 100%;
  width: 360px;
  position: relative;
  position: absolute;
  left: 50%;
  top: 96%;
  transform: translate(-50%);
}
.product-container:before {
  content: '';
  width: 96px;
  height: 460px;
  position: absolute;
  bottom: 0;
  left: -40px;
  background-image: url('/inc/img/corporate-design/stempel-gruen-1.png');
  /*url(/inc/img/corporate-design/stempel-gruen-1.png)*/
  background-size: cover;
  background-position: center;
  transform: rotate(-12deg);
  z-index: -1;
}
.product-container:after {
  content: '';
  width: 160px;
  height: 400px;
  position: absolute;
  bottom: -30px;
  right: 0;
  background-image: url('/inc/img/corporate-design/stempel-gruen-2.png');
  /*url(/inc/img/corporate-design/stempel-gruen-2.png)*/
  background-size: cover;
  background-position: center;
  transform: rotate(6deg);
  z-index: -1;
}
/* Link und Bild */
.product-container a.milch, .product-container a.butter, .product-container a.joghurt {
  position: relative;
  position: absolute;
  transition: all 0.3s ease-in-out;
}
.product-container a.milch .pic-milch, .product-container a.butter .pic-butter, .product-container a.joghurt .pic-joghurt {
  display: block;
  height: auto;
  padding: 6px;
  transition: all 0.3s ease-in-out;
}
/* Milch-Link */
.product-container a.milch {
  left: 0;
  bottom: 200px;
  animation-name: milk;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.product-container a.milch .pic-milch {
  width: 240px;
  z-index: 1;
}
.product-container a.milch, .product-container a.milch .pic-milch {
  -webkit-clip-path: polygon(60% 83%, 99% 80%, 99% 42%, 100% 6%, 87% 4%, 87% 1%, 85% 1%, 76% 0, 65% 0, 62% 2%, 57% 2%, 48% 3%, 48% 9%, 46% 9%, 47% 5%, 44% 5%, 28% 4%, 18% 5%, 16% 7%, 1% 8%, 1% 17%, 0 24%, 2% 24%, 2% 38%, 2% 58%, 3% 84%, 3% 88%, 2% 92%, 7% 95%, 13% 100%, 29% 99%, 52% 97%, 60% 97%);
  clip-path: polygon(60% 83%, 99% 80%, 99% 42%, 100% 6%, 87% 4%, 87% 1%, 85% 1%, 76% 0, 65% 0, 62% 2%, 57% 2%, 48% 3%, 48% 9%, 46% 9%, 47% 5%, 44% 5%, 28% 4%, 18% 5%, 16% 7%, 1% 8%, 1% 17%, 0 24%, 2% 24%, 2% 38%, 2% 58%, 3% 84%, 3% 88%, 2% 92%, 7% 95%, 13% 100%, 29% 99%, 52% 97%, 60% 97%);
}
/* Butter-Link */
.product-container a.butter {
  bottom: 60px;
  left: 0;
  animation-name: butter;
  animation-duration: 11s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.product-container a.butter .pic-butter {
  width: 160px;
  z-index: 2;
}
.product-container a.butter, .product-container a.butter .pic-butter {
  -webkit-clip-path: polygon(1% 12%, 20% 9%, 35% 8%, 42% 5%, 60% 4%, 85% 0, 97% 7%, 100% 12%, 99% 51%, 100% 76%, 99% 84%, 77% 89%, 63% 90%, 24% 98%, 6% 99%, 1% 79%, 1% 68%, 0 43%);
  clip-path: polygon(1% 12%, 20% 9%, 35% 8%, 42% 5%, 60% 4%, 85% 0, 97% 7%, 100% 12%, 99% 51%, 100% 76%, 99% 84%, 77% 89%, 63% 90%, 24% 98%, 6% 99%, 1% 79%, 1% 68%, 0 43%);
}
/* Joghurt-Link */
.product-container a.joghurt {
  width: 272px;
  bottom: -20px;
  right: -20px;
  animation-name: joghurt;
  animation-duration: 9s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.product-container a.joghurt .pic-joghurt {
  width: 272px;
  z-index: 3;
}
.product-container a.joghurt, .product-container a.joghurt .pic-joghurt {
  clip-path: polygon(26% 6%, 11% 11%, 6% 19%, 8% 22%, 14% 23%, 16% 37%, 17% 51%, 19% 67%, 20% 75%, 25% 80%, 34% 82%, 44% 83%, 56% 80%, 57% 90%, 63% 94%, 74% 95%, 85% 91%, 91% 58%, 95% 52%, 90% 48%, 75% 45%, 63% 46%, 66% 21%, 71% 18%, 70% 12%, 61% 7%, 51% 6%, 35% 5%);
}
.product-container a.milch:hover, .product-container a.milch:hover .pic-milch, .product-container a.butter:hover, .product-container a.butter:hover .pic-butter, .product-container a.joghurt:hover, .product-container a.joghurt:hover .pic-joghurt {
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}
/* Produktgruppen-Texte mit Pfeil */
.product-container .text-milch, .product-container .text-butter, .product-container .text-joghurt {
  position: absolute;
  font-family: 'Chalkduster';
  font-size: 14px;
  line-height: 20px;
  color: #777;
  background: #fff;
  border-radius: 6px;
  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.3);
  padding: 6px 8px;
  z-index: 4;
}
/* Text Milch */
.product-container .text-milch {
  width: 212px;
  bottom: 318px;
  right: 0;
}
/* Text Butter */
.product-container .text-butter {
  width: 202px;
  bottom: 260px;
  right: 0;
}
/* Text Joghurt */
.product-container .text-joghurt {
  width: 174px;
  bottom: 182px;
  right: 0;
}
/* Animation Milch */
@keyframes milk {
  0% {
    transform: translateY(0px) rotate(-1deg);
  }
  50% {
    transform: translateY(18px) rotate(1deg);
  }
  100% {
    transform: translateY(0px) rotate(-1deg);
  }
}
/* Animation Butter */
@keyframes butter {
  0% {
    transform: translateY(0px) rotate(1deg);
  }
  50% {
    transform: translateY(12px) rotate(-1.5deg);
  }
  100% {
    transform: translateY(0px) rotate(1deg);
  }
}
/* Animation Joghurt */
@keyframes joghurt {
  0% {
    transform: translateY(0px) rotate(-1.5deg);
  }
  50% {
    transform: translateY(9px) rotate(2deg);
  }
  100% {
    transform: translateY(0px) rotate(-1.5deg);
  }
}
/* ------------[ Sternenfair-Teaser Startseite ]------------ */
section.sternenfair.fade-in.inview {
  transform: none;
}
.sternenfair-teaser {
  width: 100%;
  position: relative;
  background: #fff;
  border-radius: 30px;
  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.3);
  padding: 0;
  margin: 0 auto;
}
/* Teaser-Text */
.sternenfair-teaser-text {
  padding: 42px 18px;
}
.sternenfair-teaser-text h3 {
  margin: 0 0 12px;
}
/* Teaser-Bild */
.sternenfair-teaser-pic {
  width: 100%;
  height: 300px;
  background-image: url('/inc/img/hintergruende/hintergrund-gruene-landschaft.jpg');
  /*url(/images/hintergrund-gruene-landschaft.jpg)*/
  background-size: cover;
  background-position: center;
  border-radius: 0 0 30px 30px;
}
/* Biene auf Teaser */
.sternenfair-teaser-pic .biene {
  width: 120px;
  height: auto;
  position: absolute;
  right: 60%;
  bottom: 220px;
}
/* Milchglas auf Teaser */
.sternenfair-teaser-pic picture {
  position: inherit;
}
.sternenfair-teaser-pic .milchglas {
  width: 300px;
  height: auto;
  position: absolute;
  right: 0;
  bottom: 0;
}
/* ========================[ Sonderelmente Milchbauern ]======================== */
/* ------------[ Milchbauern-Teaser (Milchbauern-Übersicht) ]------------ */
section.laender-siegel {
  padding: 0 0 72px;
}
section.laender-siegel .grid[cols="3-3-3-3"] > * {
  grid-column: auto / span 6;
}
/* einzelnes Siegel */
section.laender-siegel img {
  display: block;
  width: 100%;
  height: auto;
  transition: all 0.2s ease-in-out;
}
section.laender-siegel img:hover {
  transform: scale(1.1) rotate(-9deg);
  transition: all 0.2s ease-in-out;
}
/* ------------[ Milchbauern-Teaser (Bundesländer-Übersicht) ]------------ */
.milchbauernlist {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin: -12px 0;
}
/* Milchbauer-Teaser */
.milchbauer-teaser {
  display: flex;
  flex-basis: 100%;
  text-align: center;
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.3);
  margin: 12px 0;
  transition: all 0.2s ease-in-out;
}
.milchbauer-teaser:hover {
  transform: scale(1.025);
  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease-in-out;
}
/* Milchbauer-Teaser Bild*/
.milchbauer-teaser img {
  border-radius: 30px 30px 0 0;
}
/* Milchbauer-Teaser Text */
.milchbauer-teaser-text {
  padding: 0 24px 24px;
}
.milchbauer-teaser-text h3 {
  margin: 0 0 6px;
}
.milchbauer-teaser-text h3 a {
  color: #0083C8;
}
.milchbauer-teaser-text h3 a:hover {
  color: #0083C8;
}
section.milchbauern h3:first-child {
  margin: 0 0 6px;
}
/* ------------[ Milchbauern-Detailseite ]------------ */
/* Zurück-Link Milchbauer-Übersicht */
a.alle-milchbauern {
  display: block;
  width: 100%;
  color: #777;
  text-align: center;
  margin-top: 18px;
}
/* Milchbauer-Foto */
.milchbauern-pic {
  position: relative;
}
.milchbauern-pic:before {
  content: '';
  display: block;
  width: 54px;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  background-image: url('/inc/img/corporate-design/abriss-weiss-rechts.png');
  /*url(/inc/img/abriss-weiss-rechts.png)*/
  z-index: 1;
}
.milchbauern-pic:after {
  content: '';
  display: block;
  width: 100%;
  height: 42px;
  position: absolute;
  bottom: 0;
  background-image: url('/inc/img/corporate-design/abriss-weiss-unten.png');
  /*url(/inc/img/abriss-weiss-unten.png)*/
  z-index: 1;
}
/* ------------[ Fotostreifen Milchbauern Umweltprojekt ]------------ */
section.fotostreifen-milchbauern-umweltprojekt {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('/inc/img/hintergruende/hintergrund-kuehe-auf-der-weide-1.jpg');
  /*url(/images/hintergrundbilder/keyvisual-bluehwiese.jpg)*/
  background-size: cover;
  background-position: bottom right;
  padding: 90px 0;
}
/* weiße Abrisskante unten */
section.fotostreifen-milchbauern-umweltprojekt:after {
  content: '';
  display: block;
  width: 100%;
  height: 42px;
  position: absolute;
  bottom: 0;
  background-image: url('/inc/img/corporate-design/abriss-weiss-unten.png');
  /*url(/inc/img/abriss-weiss-unten.png)*/
  z-index: 1;
}
/* Schild */
section.fotostreifen-milchbauern-umweltprojekt .schild {
  position: relative;
  right: 0;
  left: 0;
  width: calc(100% - 36px);
  margin: 0 auto;
}
/* weißer Text-Hintergrund auf Schild */
section.fotostreifen-milchbauern-umweltprojekt .schild .schild-hintergrund {
  display: none;
}
/* Schild-Text */
section.fotostreifen-milchbauern-umweltprojekt .schild-background {
  position: relative;
  left: 0;
  top: 0;
  background-color: white;
  transform: none;
  border-radius: 30px;
  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.3);
}
section.fotostreifen-milchbauern-umweltprojekt .schild-text {
  width: 100%;
  position: relative;
  left: 0;
  top: 0;
  transform: none;
  padding: 30px 18px;
  text-align: center;
}
/* Biene */
section.fotostreifen-milchbauern-umweltprojekt .schild .biene {
  width: 66px;
  height: auto;
  position: absolute;
  top: -42px;
  right: 42px;
  z-index: 1;
}
/* ========================[ Sonderelmente Produkte ]======================== */
/* ------------[ Nährwerttabelle Produkte ]------------ */
.naehrwert-angaben {
  max-width: 440px;
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.3);
  padding: 0 24px 30px;
  margin: 0 auto 12px;
}
table.naehrwerte {
  table-layout: auto;
  border: none;
  border-collapse: collapse;
}
table.naehrwerte tr {
  border: 2px solid #f1f1f1;
  border-width: 2px 0;
}
table.naehrwerte tr:first-child {
  border: none;
  border-bottom: 2px solid #f1f1f1;
}
table.naehrwerte th, table.naehrwerte td {
  min-width: 90px;
  width: 100%;
  vertical-align: top;
  font-size: 14px;
  line-height: 18px;
  padding: 6px 0;
  border-width: 0;
}
table.naehrwerte th {
  color: #0083C8;
  background-color: #fff;
  padding: 12px 0;
}
table.naehrwerte tr.zusatzfeld {
  border: none;
}
table.naehrwerte td span {
  font-size: 14px;
  line-height: 18px;
  padding-left: 12px;
}
table.naehrwerte tr.zusatzfeld td {
  font-size: 12px;
  line-height: 20px;
  border: none;
  padding: 18px 0 0;
}
table.naehrwerte tr.zusatzfeld td:first-child {
  padding-right: 6px;
}
.table-blue h3:first-child, .table-green h3:first-child {
  font-size: 20px;
  line-height: 26px;
  color: #fff;
  padding: 24px 24px 12px;
  border-radius: 30px 30px 0 0;
  margin: 0 -24px 6px;
}
.table-blue h3:first-child {
  background-color: #0083C8;
}
.table-green h3:first-child {
  background-color: #7DC33F;
}
.table-green table.naehrwerte th {
  color: #7DC33F;
}
/* ------------[ Strichcodes ]------------ */
img.strichcode {
  display: block;
  width: 100%;
  max-width: 120px;
  float: right;
  margin: 0;
}
/* ========================[ Sonderelmente Wissenswertes ]======================== */
/* ------------[ Wissenswertes-Übersicht ]------------ */
.wissenswertes-teaser {
  border-top: 2px solid #f1f1f1;
  padding: 42px 18px;
  transition: all 0.3s ease-in-out !important;
}
.wissenswertes-teaser:last-child {
  border-bottom: 2px solid #f1f1f1;
}
.wissenswertes-teaser:hover {
  border-top: 2px solid rgba(0, 0, 0, 0);
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 3px 3px 12px 0px rgba(0, 0, 0, 0.3);
  margin: 0 0 42px;
  transition: all 0.3s ease-in-out !important;
}
.wissenswertes-teaser-image {
  position: relative;
  border-radius: 30px 0 0 30px;
}
.wissenswertes-teaser-image:after {
  content: '';
  display: block;
  width: 100%;
  height: 42px;
  position: absolute;
  bottom: 0;
  background-image: url('/inc/img/corporate-design/abriss-weiss-unten.png');
  /*url(/inc/img/abriss-weiss-unten.png)*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
  z-index: 1;
}
.wissenswertes-teaser-text {
  text-align: center;
  padding-top: 18px;
}
.wissenswertes-teaser-text h2 a {
  color: #0083C8;
}
/* ------------[ Milchlexikon ]------------ */
/* Milchlexikon Navigation */
ul.pagination {
  display: table;
  table-layout: fixed;
  width: 100%;
  color: #fff;
  background: #0083C8;
  border-radius: 30px;
  padding: 12px;
}
ul.pagination li {
  float: left;
  width: calc(25% - 4px);
  font-size: 24px;
  text-align: center;
  background: none;
  padding: 0;
  margin: 2px;
  transition: all 0.2s ease-in-out;
}
ul.pagination li i {
  display: block;
  color: #fff;
  text-decoration: none;
  font-style: normal;
  border: 1px solid #fff;
  border-radius: 30px;
  padding: 12px;
  transition: all 0.1S ease-in-out;
  cursor: pointer;
}
ul.pagination li i:not(.active):hover {
  color: #0083C8;
  background: #fff;
}
ul.pagination li i.active {
  position: relative;
  font-weight: bold;
  pointer-events: none;
}
ul.pagination li i.active:after {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 50%;
  border-top: 10px solid white;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  margin-left: -7px;
}
/* Lexikon Eintrag */
.lexikon-results .mix {
  display: none;
}
.lexikon-eintrag {
  width: 100%;
  border-bottom: solid #777 1px;
  padding: 24px 18px;
  transition: all 0.2s ease-in-out;
}
.lexikon-eintrag h3 {
  color: #777;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
/* erster Buchstabe des Eintrags */
.lexikon-eintrag h3:first-letter {
  font-size: 48px;
  line-height: 54px;
  color: #0083C8;
}
/* Text unter den Lexikon-Einträgen */
.lexikon-description {
  text-align: center;
  margin-top: 42px;
}
.lexikon-description b {
  color: #7DC33F;
  cursor: pointer;
}
/* ========================[ Sonderelmente Händlersuche ]======================== */
/* ------------[ Händlersuche ]------------ */
section.haendlersuche {
  padding: 0;
}
section.haendlersuche .contactform {
  position: relative;
}
section.haendlersuche input[type="search"], section.haendlersuche input[type="text"] {
  display: block;
  width: 100%;
  position: relative;
  font: 12px/18px 'Open Sans';
  border: 2px solid #f1f1f1;
  outline: none;
  border-radius: 30px;
  box-shadow: none;
  padding: 12px 24px;
  margin: 30px 0 0;
  z-index: 2;
}
section.haendlersuche button[type="submit"] {
  width: auto;
  position: absolute;
  top: -12px;
  right: 0;
  bottom: 0;
  font: 12px/18px 'Open Sans';
  background: #7DC33F;
  border: none;
  border-radius: 0 30px 30px 0;
  box-shadow: none;
  padding: 12px 18px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  z-index: 2;
}
section.haendlersuche .button {
  position: absolute;
  width: 100%;
}
section.haendlersuche .button:hover {
  background-color: #5daf14;
  animation: none;
}
.produkte-haendlersuche {
  width: 120%;
  margin: -48px;
}
#produktfinder {
  max-width: 420px;
  order: 2;
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.3);
  padding: 30px 24px;
  margin: 0 auto 30px;
  z-index: 1;
}
.produkte-haendlersuche {
  order: 1;
}
#mapapp #map {
  height: 360px !important;
  border: 2px solid #f1f1f1;
  border-radius: 30px;
}
/* Marktsuche */
#finderlist {
  margin: 18px auto 0;
}
#finderlist .finderlist-text {
  max-width: 360px;
  text-align: center;
  margin: 0 auto 30px;
}
#finderlist ol {
  margin: 12px 0 -12px;
  padding: 0;
}
#finderlist li {
  width: 100%;
  background-color: #fff;
  border: 2px solid #f1f1f1;
  border-radius: 30px;
  padding: 30px;
  margin: 12px 0;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
#finderlist li img {
  float: left;
  display: block;
  width: 40px;
  margin-right: 12px;
  margin-top: -4px;
}
#finderlist li:hover h2, #finderlist li.selected h2 {
  color: #fff;
  background: #7DC33F;
  transition: all 0.3s ease-in-out;
}
#finderlist h2 {
  font-size: 24px;
  line-height: 30px;
  padding: 30px 30px 6px;
  margin: -30px -30px 6px;
  transition: all 0.3s ease-in-out;
}
/* Loader Händlersuche */
.loader {
  display: none;
  position: relative;
  margin: 12px auto;
  width: 64px;
  height: 64px;
}
.loader div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 51px;
  height: 51px;
  margin: 6px;
  border: 6px solid #0083C8;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #0083C8 transparent transparent transparent;
}
.loader div:nth-child(1) {
  animation-delay: -0.45s;
}
.loader div:nth-child(2) {
  animation-delay: -0.3s;
}
.loader div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* ------------[ Markt-teaser ]------------ */
/* alle Teaser */
.teaser-maerkte {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-end;
  margin: -0.5%;
}
/* Einzelner Teaser */
.teaser-markt {
  display: flex;
  flex-direction: column;
  flex-basis: 32.3%;
  height: 100%;
  background: #fff;
  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  padding: 6px 18px;
  margin: 0.5%;
  transition: all 0.2s ease-in-out;
}
/* ========================[ Gewinnspiel ]======================== */
/* ------------[ Gewinnspiel-Formular ]------------ */
/* komplettes Formular*/
form.gewinnspiel-form {
  color: #fff;
  background-color: #7DC33F;
  border-radius: 30px;
  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.3);
  padding: 18px 18px 42px;
  margin: 0 auto;
}
/* alle Label */
form.gewinnspiel-form label {
  font-size: 14px;
  line-height: 20px;
  color: #fff;
}
/* alle Inputfelder */
form.gewinnspiel-form input {
  font-size: 16px;
  line-height: 22px;
  margin: 6px 0 12px;
}
/* alle Selectfelder */
form.gewinnspiel-form select {
  font-size: 16px;
  line-height: 22px;
  border-radius: 30px;
  margin: 6px 0 12px;
}
/* alle Absätze */
form.gewinnspiel-form p {
  font-size: 16px;
  line-height: 24px;
  margin-top: 24px;
}
/* alle Verlinkungen */
form.gewinnspiel-form a {
  color: #fff;
  text-decoration: underline;
}
/* Button */
form.gewinnspiel-form button {
  display: block;
  width: 100%;
  font-size: 16px;
  line-height: 22px;
  color: #fff;
  background-color: #0083C8;
  border: none;
  border-radius: 30px;
  padding: 18px 30px;
  margin-top: 30px;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
form.gewinnspiel-form button:hover {
  background-color: #07a8fc;
  transition: all 0.3s ease-in-out;
}
/* ... */
form.gewinnspiel-form .cr_form-component--header {
  display: block;
  font-size: 20px;
  line-height: 26px;
  margin: 18px 0 12px;
}
/* ... */
form.gewinnspiel-form .cr_form-component--group label {
  font-size: 16px;
  line-height: 22px;
  color: #fff;
}
/* Radiobuttons */
form.gewinnspiel-form input[type="radio"]:checked + label, form.gewinnspiel-form input[type="radio"]:not(:checked) + label, form.gewinnspiel-form input[type="checkbox"]:checked + label, form.gewinnspiel-form input[type="checkbox"]:not(:checked) + label {
  font-size: 16px;
  line-height: 22px;
  padding-left: 42px;
  margin-top: 12px;
}
form.gewinnspiel-form input[type="radio"]:checked + label:before, form.gewinnspiel-form input[type="radio"]:not(:checked) + label:before, form.gewinnspiel-form input[type="checkbox"]:checked + label:before, form.gewinnspiel-form input[type="checkbox"]:not(:checked) + label:before {
  width: 30px;
  height: 30px;
  border: none;
}
form.gewinnspiel-form input[type="radio"]:checked + label:after, form.gewinnspiel-form input[type="radio"]:not(:checked) + label:after, form.gewinnspiel-form input[type="checkbox"]:checked + label:after, form.gewinnspiel-form input[type="checkbox"]:not(:checked) + label:after {
  width: 14px;
  height: 14px;
  top: 8px;
  left: 8px;
}
/* ========================[ Call to Action ]======================== */
/* ------------[ Call to Action ]------------ */
.calltoaction {
  display: block;
  width: 100%;
  background-image: url('/inc/img/hintergruende/hintergrund-gruen.jpg');
  background-size: cover;
  background-position: top center;
  padding: 72px 0 90px;
  margin: 0 auto;
}
/* Collage */
.calltoaction-bilder {
  position: relative;
}
.calltoaction-bilder .biene {
  width: 66px;
  height: auto;
  position: absolute;
  top: -360px;
  right: 12px;
  z-index: 1;
}
.calltoaction-bilder .produkte {
  width: 680px;
  height: auto;
  position: absolute;
  bottom: -120px;
  right: 50%;
  transform: translateX(50%);
  z-index: 2;
}
/* Textkasten */
.calltoaction-text {
  width: 100%;
  max-width: 360px;
  position: relative;
  text-align: center;
  background: #fff;
  border-radius: 30px;
  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.3);
  padding: 30px 18px;
  margin: 0 auto;
  z-index: 3;
}
/* ------------[ Call to Action – Händlersuche ]------------ */
.calltoaction-haendlersuche {
  display: block;
  width: 100%;
  max-width: 480px;
  height: 540px;
  text-align: center;
}
.calltoaction-haendlersuche-bilder .biene {
  width: 66px;
  height: auto;
  position: absolute;
  bottom: 160px;
  right: 18px;
  z-index: 4;
}
.calltoaction-haendlersuche-bilder .karte {
  width: 460px;
  height: auto;
  position: absolute;
  right: -12%;
  top: 0;
  z-index: 0;
}
.calltoaction-haendlersuche-bilder .milch {
  width: 220px;
  height: auto;
  position: absolute;
  bottom: -54px;
  left: -8%;
  z-index: 1;
}
.calltoaction-haendlersuche-bilder .joghurt {
  width: 180px;
  height: auto;
  position: absolute;
  bottom: -18px;
  left: 36%;
  z-index: 2;
}
/* Text */
.calltoaction-haendlersuche-text {
  width: 96%;
  position: relative;
  background: #fff;
  border-radius: 30px;
  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.3);
  padding: 24px 18px;
  margin: 0 auto;
  z-index: 3;
}
/* Button Händlersuche */
.haendlersuche-button {
  position: relative;
}
.haendlersuche-button input[type="search"], .haendlersuche-button input[type="text"] {
  display: block;
  width: 100%;
  position: relative;
  font: 12px/18px 'Open Sans';
  border: 2px solid #f1f1f1;
  outline: none;
  background: #fff;
  border-radius: 30px;
  box-shadow: none;
  padding: 12px 18px;
  margin: 18px 0 0;
  z-index: 2;
}
.haendlersuche-button input[type="submit"] {
  display: block;
  width: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  font: 12px/18px 'Open Sans';
  background: #7DC33F;
  border-radius: 0 30px 30px 0;
  padding: 12px 18px;
  transition: all 0.2s ease-in-out;
  z-index: 2;
}
.haendlersuche-button input[type="submit"]:hover {
  background: #5daf14;
  animation-name: none;
  transition: all 0.2s ease-in-out;
}
/* ========================[ Footer-Bereich ]======================== */
footer {
  display: block;
  width: 100%;
  position: relative;
  text-align: left;
  background-color: #fff;
  box-shadow: 1px -26px 18px -1px rgba(0, 0, 0, 0.3);
  padding: 30px 0;
  z-index: 6;
}
footer:after {
  content: '';
  display: block;
  width: 100%;
  height: 42px;
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-image: url('/inc/img/corporate-design/abriss-weiss-unten.png');
  /*url(/inc/img/abriss-weiss-unten.png)*/
  z-index: 1;
  transition: all 0.3s ease-in-out;
}
footer section {
  padding: 0;
}
/* Logo */
footer .logo {
  max-width: 300px;
}
footer strong {
  font-size: 20px;
  line-height: 28px;
  color: #0083C8;
}
footer p {
  line-height: 28px;
}
/* Verlinkungen */
footer a {
  color: #777;
}
footer a:hover {
  color: #777;
  opacity: 0.6;
}
/* Verlinkungen mit blauem Pfeil */
footer a.arrow-link {
  display: block;
  width: 100%;
  border-top: 2px solid #f1f1f1;
  background-position: left center;
  padding: 6px 6px 6px 30px;
}
footer a.arrow-link:first-child {
  border-top: none;
}
footer a.arrow-link:hover {
  opacity: 1;
}
@media screen and (min-width: 660px) {
  body:after {
    content: "M";
  }
  .only-m {
    display: block !important;
  }
  .no-m {
    display: none !important;
  }
  /* ------------[ Schriften ]------------ */
  /* ------------[ Body ]------------ */
  body {
    font-size: 18px;
    line-height: 26px;
  }
  /* ==============================[ Begrenzung Inhalt ]============================== */
  .inner {
    max-width: 840px;
    padding: 0 42px;
  }
  .small-width {
    width: 84%;
  }
  /* ==============================[ Formate für Sektionen ]============================== */
  section {
    padding: 60px 0;
  }
  /* ------------[ Spezielle KLassen für Sektionen ]------------ */
  /* Sektion mit Hintergrundbild */
  section.foto-background {
    padding: 60px 0;
  }
  /* ==============================[ universelle Klassen ]============================== */
  /* ------------[ Positionierung der Elmente ]------------ */
  /* ------------[ verschiedene Abstände ]------------ */
  /* Sektion ohne Abstand nach oben */
  section.no-padding-top {
    padding: 0 0 60px;
  }
  /* Sektion ohne Abstand nach unten */
  section.no-padding-bottom {
    padding: 60px 0 0;
  }
  /* ------------[ verschiedene Abstände im Grid ]------------ */
  .small-grid-gap {
    grid-gap: 24px;
  }
  .big-grid-gap {
    grid-gap: 42px;
  }
  /* ------------[ Klassen für Texte ]------------ */
  /* ------------[ Sonstiges ]------------ */
  /* ========================[ Animationen ]======================== */
  /* ========================[ Header-Bereich ]======================== */
  /* ------------[ Logo ]------------ */
  /* ------------[ Hauptnavigation ]------------ */
  .mainnav {
    width: 60%;
    max-width: 440px;
    top: 0;
    box-shadow: 6px 12px 12px 0 rgba(0, 0, 0, 0.4);
    z-index: 120;
  }
  /* Liste der Hauptnavigation */
  .mainnav > ul {
    height: 100vh;
    /* Gesamte Bildschirmhöhe abzüglich fixiertem Header (s.o) */
  }
  /* ------------[ Subnavigation ]------------ */
  /* ------------[ Mobile Navigation ]------------ */
  /* ========================[ Standard-Elemente ]======================== */
  /* ------------[ Überschriften ]------------ */
  h1 {
    font-size: 48px;
    line-height: 60px;
    margin: 0 0 18px;
  }
  h2 {
    font-size: 42px;
    line-height: 48px;
    margin: 42px 0 18px;
  }
  section h2:first-child {
    margin: 0 0 18px;
  }
  h3 {
    font-size: 30px;
    line-height: 36px;
    margin: 30px 0 12px;
  }
  /* ------------[ Absätze ]------------ */
  /* ------------[ Verlinkungen ]------------ */
  /* Buttons */
  .button {
    padding: 18px 42px;
  }
  /* ------------[ seitlich fixierte Buttons ]------------ */
  .fixed-buttons {
    display: block;
    position: fixed;
    top: 124px;
    right: 18px;
    z-index: 90;
  }
  #home .fixed-buttons {
    top: 200px;
  }
  .fixed-buttons ul li {
    margin: 0;
  }
  .fixed-buttons ul li {
    background-image: none;
    padding-left: 0;
    margin-bottom: 12px;
  }
  .fixed-buttons ul li img {
    width: 54px;
    height: 54px;
    position: relative;
    background-color: #fff;
    box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.4);
    border-radius: 100%;
    padding: 12px;
    transition: all 0.3s ease-in-out;
  }
  .fixed-buttons ul li:hover img {
    transform: scale(1.08);
    box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.6);
    transition: all 0.3s ease-in-out;
  }
  /* ------------[ Bilder ]------------ */
  /* Bilder mit weißen Abrisskanten */
  picture.abriss-rechts {
    margin-bottom: -36px;
  }
  picture.abriss-links {
    margin-top: -36px;
  }
  /* Siegel + Erklärung */
  picture .sternenfair-siegel .siegel .siegel-text {
    width: 200px;
    right: -42px;
    bottom: 200%;
  }
  picture .sternenfair-siegel .siegel {
    width: 20%;
  }
  /* Siegel + Erklärung (Pfeil) */
  picture .sternenfair-siegel .siegel .siegel-text img {
    width: 90px;
  }
  /* Siegel + Erklärung (Text) */
  picture .sternenfair-siegel .siegel .siegel-text span {
    font-size: 18px;
    line-height: 24px;
  }
  /* Contentbilder + Stempel */
  picture .sternenfair-stempel img {
    width: 36%;
    bottom: 72px;
    right: 54px;
  }
  /* ------------[ Bild größer klicken ]------------ */
  /* ------------[ Text-Bild-Element ]------------ */
  /* ------------[ Unnummerierte Listen ]------------ */
  /* ------------[ Nummerierte Listen ]------------ */
  /* ------------[ Listen Sonderformate ]------------ */
  /* ------------[ Tabellen ]------------ */
  /* ========================[ Sonderelmente ]======================== */
  /* ------------[ Keyvisual ]------------ */
  .keyvisual-wrap {
    margin-top: 100px;
  }
  /* Keyvisual / Hintergrundbild */
  .keyvisual {
    height: 360px;
  }
  /* Bundesland-Siegel */
  .keyvisual-siegel img {
    width: 140px;
    bottom: -66px;
    right: 180px;
  }
  /* Kuhkopf */
  .keyvisual-kuh img {
    width: 224px;
    bottom: -72px;
  }
  /* ------------[ Keyvisual Startseite ]------------ */
  /* Keyvisual / Hintergrundbild */
  #start .keyvisual {
    height: 540px;
  }
  /* ------------[ Intro ]------------ */
  .headline-section {
    max-width: 660px;
    padding: 72px 0 60px;
  }
  .headline-section p {
    font-size: 20px;
    line-height: 28px;
  }
  /* ------------[ Intro Startseite ]------------ */
  /* Intro (Startseite) */
  .keyvisual-wrap .keyvisual-text {
    max-width: 540px;
    top: 120px;
    left: 100px;
    right: 100px;
  }
  .keyvisual-wrap h1 {
    font-size: 54px;
    line-height: 60px;
  }
  .keyvisual-wrap p {
    font-size: 24px;
    line-height: 30px;
  }
  /* ------------[ Bildergalerie ]------------ */
  .image-gallery {
    margin: -2%;
  }
  /* Auf small alle Bilder vollbreit */
  .image-gallery li {
    flex-basis: 46%;
    margin: 2%;
  }
  /* ------------[ Infoboxen ]------------ */
  .grid[cols="12"] > * .infobox, .grid[cols="12"] > * .infobox-white {
    width: 90%;
    padding: 42px;
    margin: 0 auto;
  }
  /* ------------[ Infobox Blau ]------------ */
  /* ------------[ Infobox Weiß ]------------ */
  /* ------------[ Teaser ]------------ */
  .teaser {
    width: 72%;
    margin: 0 auto;
  }
  /* Teaser-Bild */
  .teaser-image {
    height: 200px;
  }
  /* Teaser-Text*/
  .teaser h3 {
    font-size: 24px;
    line-height: 30px;
    padding: 24px 42px 0;
  }
  .teaser p {
    padding: 12px 42px 42px;
  }
  /* ------------[ Flex-Teaser ]------------ */
  /* alle Teaser */
  .teaser-flex {
    margin: 0 -2%;
  }
  /* Einzelner Teaser */
  .teaser-flex .teaser {
    flex-basis: 46%;
    margin: 0 2%;
  }
  /* ------------[ Akkordeon ]------------ */
  /* ------------[ Zitat ]------------ */
  .zitat-box {
    width: 84%;
    max-width: 100%;
    padding: 42px;
  }
  .zitat-box p {
    font-size: 20px;
    line-height: 28px;
  }
  /* ------------[ Aktuelles / News 3er-Sektion ]------------ */
  /* ------------[ Aktuelles / News ]------------ */
  section.news {
    padding: 72px 0;
  }
  .news-meldungen {
    margin: -2%;
  }
  .news-meldung {
    width: 46%;
    margin: 2% auto;
  }
  /* News-Datum */
  .news-text p.news-date {
    margin: 0 0 12px;
  }
  .news-text {
    padding: 0 18px 30px;
  }
  .news-text h3 {
    font-size: 24px;
    line-height: 30px;
    margin: 0 0 6px 0;
  }
  .news-text a {
    bottom: 30px;
    left: 18px;
    right: 18px;
  }
  .news-meldung-text h1 {
    font-size: 42px;
    line-height: 48px;
  }
  /* ------------[ Presse-Übersicht ]------------ */
  .presse-meldung {
    padding: 42px 72px;
  }
  .presse-meldung-text {
    padding-top: 30px;
  }
  /* ------------[ Video ]------------ */
  .video-embed iframe {
    width: 100%;
    padding: 30px;
  }
  /* ------------[ Video-Beschreibung]------------ */
  .video-beschreibung {
    width: 84%;
    max-width: 510px;
  }
  .video-beschreibung:after {
    top: 18%;
    right: -18%;
    transform: rotate(-18deg);
  }
  /* ------------[ Formulare ]------------ */
  /* ------------[ Produkt Slider ]------------ */
  .section-einleitung {
    width: 84%;
    margin: 0 auto 60px;
  }
  /* ------------[ Rezept-Teaser  (Content) ]------------ */
  .rezept-teaser {
    padding: 42px 72px;
  }
  /* ------------[ Rezept-Teaser (Übersichtsseite) ]------------ */
  .rezept-box {
    width: 60%;
  }
  .rezept-text {
    padding: 30px 30px 48px 30px;
  }
  .rezept-box a.rezept-link {
    bottom: 30px;
  }
  /* ------------[ Fotostreifen Milchbauern ]------------ */
  section.fotostreifen-milchbauern {
    height: 480px;
  }
  .schild {
    width: 540px;
    bottom: 0;
    right: 6%;
  }
  .schild-background {
    top: 36px;
    left: 30px;
    right: 36px;
    bottom: 146px;
  }
  .schild-text {
    width: 480px;
    padding: 36px;
  }
  .schild-text h2 {
    font-size: 36px;
    line-height: 42px;
    margin: 0 0 6px 0;
  }
  .schild .schild-hintergrund {
    width: 540px;
  }
  section.fotostreifen-milchbauern .biene {
    top: -2px;
    left: 72%;
  }
  /* ========================[ Sonderelmente Startseite ]======================== */
  /* ------------[ Produktübersicht Startseite ]------------ */
  section.products {
    height: 720px;
  }
  .product-container {
    width: 660px;
    left: 50%;
    top: 100%;
    transform: translate(-50%);
  }
  .product-container:before {
    width: 136px;
    height: 660px;
    bottom: -20px;
    left: -72px;
  }
  .product-container:after {
    width: 220px;
    height: 540px;
    bottom: 60px;
    right: 60px;
  }
  /* einzelne Produktgruppen */
  .product-container a.milch {
    bottom: 110px;
    left: -30px;
  }
  .product-container a.milch .pic-milch {
    width: 360px;
  }
  .product-container a.butter {
    bottom: 148px;
    left: 210px;
  }
  .product-container a.butter .pic-butter {
    width: 240px;
  }
  .product-container a.joghurt {
    width: 380px;
    bottom: 70px;
    left: 350px;
  }
  .product-container a.joghurt .pic-joghurt {
    width: 380px;
  }
  /* Produktgruppen-Texte mit Pfeil */
  .product-container .text-milch:after, .product-container .text-butter:after, .product-container .text-joghurt:after {
    content: '';
    width: 60px;
    height: 48px;
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease-in-out;
  }
  .product-container .text-milch {
    bottom: 560px;
    right: auto;
    left: 360px;
  }
  .product-container .text-milch:after {
    top: -54px;
    left: -66px;
    background-image: url('/inc/img/arrows/pfeil-blau.svg');
    /*url(/inc/img/arrows/pfeil-blau.svg);*/
    transform: rotate(45deg);
  }
  .product-container .text-butter {
    bottom: 460px;
    right: auto;
    left: 270px;
  }
  .product-container .text-butter:after {
    top: 72px;
    left: 66px;
    background-image: url('/inc/img/arrows/pfeil-blau.svg');
    /*url(/inc/img/arrows/pfeil-blau.svg);*/
    transform: rotate(-24deg);
  }
  .product-container .text-joghurt {
    bottom: 460px;
    right: auto;
    left: 490px;
  }
  .product-container .text-joghurt:after {
    top: 90px;
    right: 0;
    background-image: url('/inc/img/arrows/pfeil-blau-links.svg');
    /*url(/inc/img/arrows/pfeil-blau.svg);*/
  }
  /* ------------[ Sternenfair-Teaser Startseite ]------------ */
  .sternenfair-teaser {
    width: 84%;
    margin: 0 auto;
  }
  .sternenfair-teaser-text {
    padding: 60px 54px 90px 54px;
  }
  .sternenfair-teaser-pic .biene {
    width: 142px;
  }
  .sternenfair-teaser-pic .milchglas {
    width: 390px;
    right: 0;
    bottom: 0;
  }
  /* ========================[ Sonderelmente Milchbauern ]======================== */
  /* ------------[ Milchbauern-Teaser (Milchbauern-Übersicht) ]------------ */
  section.laender-siegel {
    padding: 0 0 72px;
  }
  section.laender-siegel .grid[cols="3-3-3-3"] > * {
    grid-column: auto / span 3;
  }
  /* ------------[ Milchbauern-Teaser (Bundesländer-Übersicht) ]------------ */
  .milchbauernlist {
    margin: -2%;
  }
  /* Milchbauer-Teaser */
  .milchbauer-teaser {
    flex-basis: 46%;
    margin: 2%;
  }
  /* ------------[ Milchbauern-Detailseite ]------------ */
  /* ------------[ Fotostreifen Milchbauern Umweltprojekt ]------------ */
  section.fotostreifen-milchbauern-umweltprojekt {
    height: 720px;
    padding: 60px 0;
  }
  /* Schild */
  section.fotostreifen-milchbauern-umweltprojekt .schild {
    position: absolute;
    width: 720px;
    bottom: 0;
    left: 2%;
  }
  /* weißer Text-Hintergrund auf Schild */
  section.fotostreifen-milchbauern-umweltprojekt .schild .schild-hintergrund {
    width: 600px;
    height: auto;
  }
  /* Schild-Text */
  section.fotostreifen-milchbauern-umweltprojekt .schild-background {
    position: relative;
    position: absolute;
    top: 78px;
    left: 42px;
    right: 54px;
    bottom: 212px;
    background-color: white;
    transform: rotate(2deg);
    border-radius: 12px;
    box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.3);
  }
  section.fotostreifen-milchbauern-umweltprojekt .schild-text {
    width: 620px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    text-align: center;
  }
  section.fotostreifen-milchbauern-umweltprojekt .schild .biene {
    width: 66px;
    top: 60px;
    right: auto;
    left: 500px;
  }
  section.fotostreifen-milchbauern-umweltprojekt .schild .schild-hintergrund {
    display: block;
    width: 720px;
  }
  /* ========================[ Sonderelmente Produkte ]======================== */
  /* ------------[ Nährwerttabelle Produkte ]------------ */
  .naehrwert-angaben {
    max-width: 100%;
  }
  table.naehrwerte th, table.naehrwerte td {
    font-size: 16px;
    line-height: 20px;
    min-width: 140px;
  }
  table.naehrwerte tr.zusatzfeld td {
    font-size: 14px;
    line-height: 22px;
  }
  /* ========================[ Sonderelmente Wissenswertes ]======================== */
  /* ------------[ Wissenswertes-Übersicht ]------------ */
  .wissenswertes-teaser {
    padding: 42px 72px;
  }
  .wissenswertes-teaser-text {
    padding-top: 30px;
  }
  /* ------------[ Milchlexikon ]------------ */
  /* Milchlexikon Navigation */
  ul.pagination li {
    display: table-cell;
    float: none;
    width: auto;
    position: relative;
    text-align: center;
    background: none;
    padding: 0;
    margin: 0;
    border-right: solid #fff 1px;
    border-left: solid transparent 1px;
  }
  ul.pagination li:last-child {
    border-right: none;
  }
  ul.pagination li i {
    display: block;
    text-decoration: none;
    color: #fff;
    border: none;
    border-radius: 0;
    padding: 6px;
    transition: all 0.1S ease-in-out;
  }
  ul.pagination li i:not(.active):hover {
    width: 38px;
    position: absolute;
    top: 0;
    color: #fff;
    background: #0083C8;
    border-radius: 100%;
    border: 1px solid #fff;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
    transform: scale(2, 2);
    z-index: 1;
  }
  ul.pagination li i.active {
    position: relative;
    font-weight: bold;
  }
  ul.pagination li i.active:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid white;
    top: -12px;
    left: 50%;
    margin-left: -7px;
  }
  /* ========================[ Sonderelmente Händlersuche ]======================== */
  /* ------------[ Händlersuche ]------------ */
  section.haendlersuche input[type="search"], section.haendlersuche input[type="text"] {
    font: 14px/18px 'Open Sans';
    padding: 24px;
  }
  section.haendlersuche button[type="submit"] {
    font: 14px/18px 'Open Sans';
    padding: 24px;
  }
  #produktfinder {
    max-width: 600px;
    padding: 60px 42px;
    margin: -120px auto 30px;
  }
  /* Marktsuche */
  #finderlist .finderlist-text {
    max-width: 480px;
    margin: 0 auto 30px;
  }
  #finderlist ol {
    margin: 30px -1%;
  }
  #finderlist li {
    float: left;
    width: 48%;
    margin: 1%;
  }
  /* ------------[ Markt-teaser ]------------ */
  /* alle Teaser */
  .teaser-maerkte {
    margin: -1%;
  }
  /* Einzelner Teaser */
  .teaser-markt {
    flex-basis: 29.3%;
    border-radius: 30px;
    padding: 30px 24px;
    margin: 1%;
  }
  /* ========================[ Gewinnspiel ]======================== */
  /* ------------[ Gewinnspiel-Formular ]------------ */
  /* komplettes Formular*/
  form.gewinnspiel-form {
    padding: 60px;
  }
  /* alle Label */
  form.gewinnspiel-form label {
    font-size: 16px;
    line-height: 22px;
  }
  /* alle Inputfelder */
  form.gewinnspiel-form input {
    font-size: 18px;
    line-height: 24px;
    margin: 6px 0 12px;
  }
  /* alle Selectfelder */
  form.gewinnspiel-form select {
    font-size: 18px;
    line-height: 24px;
  }
  /* alle Absätze */
  form.gewinnspiel-form p {
    font-size: 18px;
    line-height: 26px;
  }
  /* Button */
  form.gewinnspiel-form button {
    font-size: 18px;
    line-height: 26px;
    border-radius: 30px;
    padding: 18px 30px;
    margin-top: 30px;
  }
  /* ... */
  form.gewinnspiel-form .cr_form-component--header {
    font-size: 24px;
    line-height: 30px;
    margin: 20px 0 14px;
  }
  /* ... */
  form.gewinnspiel-form .cr_form-component--group label {
    font-size: 18px;
    line-height: 24px;
  }
  /* ... */
  form.gewinnspiel-form input[type="radio"]:checked + label, form.gewinnspiel-form input[type="radio"]:not(:checked) + label, form.gewinnspiel-form input[type="checkbox"]:checked + label, form.gewinnspiel-form input[type="checkbox"]:not(:checked) + label {
    font-size: 18px;
    line-height: 26px;
    padding-left: 42px;
    margin-top: 18px;
  }
  form.gewinnspiel-form input[type="radio"]:checked + label:before, form.gewinnspiel-form input[type="radio"]:not(:checked) + label:before, form.gewinnspiel-form input[type="checkbox"]:checked + label:before, form.gewinnspiel-form input[type="checkbox"]:not(:checked) + label:before {
    width: 30px;
    height: 30px;
  }
  form.gewinnspiel-form input[type="radio"]:checked + label:after, form.gewinnspiel-form input[type="radio"]:not(:checked) + label:after, form.gewinnspiel-form input[type="checkbox"]:checked + label:after, form.gewinnspiel-form input[type="checkbox"]:not(:checked) + label:after {
    width: 14px;
    height: 14px;
    top: 8px;
    left: 8px;
  }
  /* ========================[ Call to Action ]======================== */
  /* ------------[ Call to Action ]------------ */
  /* Collage */
  .calltoaction-bilder .biene {
    width: 66px;
    top: -448px;
    right: 180px;
    z-index: 4;
  }
  .calltoaction-bilder .produkte {
    width: 860px;
    bottom: -120px;
  }
  /* Textkasten */
  .calltoaction-text {
    width: 84%;
    max-width: 480px;
    padding: 48px;
    margin: 0 auto;
  }
  /* ------------[ Call to Action ]------------ */
  section.calltoaction-haendlersuche {
    height: 600px;
    display: block;
    width: 100%;
    max-width: 780px;
  }
  /* Collage */
  .calltoaction-haendlersuche-bilder .biene {
    width: 72px;
    top: -20px;
    right: 54%;
    animation-duration: 2s;
  }
  .calltoaction-haendlersuche-bilder .karte {
    width: 540px;
    right: 0;
    top: -10px;
  }
  .calltoaction-haendlersuche-bilder .milch {
    width: 300px;
    top: 0;
    left: -6%;
  }
  .calltoaction-haendlersuche-bilder .joghurt {
    width: 240px;
    top: 340px;
    left: 12%;
  }
  /* Text */
  .calltoaction-haendlersuche-text {
    min-width: 442px;
    width: 48%;
    padding: 42px;
    margin: 0 auto;
  }
  .haendlersuche-button input[type="search"], .haendlersuche-button input[type="text"] {
    font: 14px/18px 'Open Sans';
    padding: 24px;
    margin: 30px 0 0;
  }
  .haendlersuche-button input[type="submit"] {
    font: 14px/18px 'Open Sans';
    padding: 24px;
  }
  /* ========================[ Footer-Bereich ]======================== */
  footer {
    padding: 48px 0 60px;
  }
  footer .grid[cols="4-4-4"] > * {
    grid-column: auto / span 6;
  }
  footer .grid[cols="4-4-4"] > *:last-child {
    grid-column: auto / span 12;
  }
  footer .grid[cols="6-6"] > * {
    grid-column: auto / span 6;
  }
}
@media screen and (min-width: 1000px) {
  body:after {
    content: "L";
  }
  .only-l {
    display: block !important;
  }
  .no-l {
    display: none !important;
  }
  /* ------------[ Schriften ]------------ */
  /* ------------[ Body ]------------ */
  body {
    font-size: 20px;
    line-height: 28px;
    text-align: left;
  }
  /* ==============================[ Begrenzung Inhalt ]============================== */
  /* Begrenzung des Contentbereichs */
  .inner {
    max-width: 1420px;
    padding: 0 30px;
  }
  .small-width {
    width: 66%;
  }
  /* ==============================[ Formate für Sektionen ]============================== */
  section {
    padding: 72px 0;
  }
  /* ------------[ Spezielle KLassen für Sektionen ]------------ */
  /* Sektion mit Hintergrundbild */
  section.foto-background {
    padding: 72px 0;
  }
  /* Sektion mit Pfad-Icon */
  section.icon-pfad {
    background-image: url('/inc/img/hintergruende/pfad-grau.svg');
    /*url(/inc/img/hintergruende/pfad-grau.svg);*/
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: left center;
  }
  /* ==============================[ universelle Klassen ]============================== */
  /* ------------[ Positionierung der Elmente ]------------ */
  /* ------------[ verschiedene Abstände ]------------ */
  /* Sektion ohne Abstand nach oben */
  section.no-padding-top {
    padding: 0 0 72px;
  }
  /* Sektion ohne Abstand nach unten */
  section.no-padding-bottom {
    padding: 72px 0 0;
  }
  /* zusätzlicher Abstand nach oben */
  .margin-top {
    margin-top: 42px;
  }
  /* zusätzlicher Abstand nach unten */
  .margin-bottom {
    margin-bottom: 42px;
  }
  /* ------------[ verschiedene Abstände im Grid ]------------ */
  .big-grid-gap {
    grid-gap: 60px;
  }
  /* ------------[ Klassen für Texte ]------------ */
  /* ------------[ Sonstiges ]------------ */
  /* ========================[ Animationen ]======================== */
  /* ========================[ Header-Bereich ]======================== */
  header {
    box-shadow: 2px 14px 12px 2px rgba(0, 0, 0, 0.4);
  }
  .header:after {
    height: 24px;
    bottom: -22px;
    transform: rotate(180deg);
  }
  /* ------------[ Logo ]------------ */
  a.logo {
    max-width: 148px;
    padding: 18px 0 12px;
  }
  /* ------------[ Hauptnavigation ]------------ */
  /* Navigation verstecken */
  .header .mainnav {
    left: 0;
  }
  .mainnav {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    position: relative;
    top: 0;
    box-shadow: none;
    padding: 0;
    z-index: 100;
  }
  .mainnav > ul {
    display: block;
    height: auto;
    position: relative;
    top: 0;
    right: 0;
    background-color: #fff;
    box-shadow: none;
    padding: 0;
    overflow: inherit;
  }
  .mainnav > ul > li {
    display: inline-block;
    position: relative;
  }
  .mainnav > ul > li > a {
    font-family: 'Open Sans';
    font-size: 20px;
    line-height: 30px;
    color: #777;
    border: none;
    padding: 48px 12px 42px;
    margin: 0;
  }
  nav.mainnav > ul > li.current > a, nav.mainnav > ul > li:hover > a, nav.mainnav > ul > li:focus > a {
    color: #7DC33F;
    border: none;
  }
  nav.mainnav > ul > li.current > a {
    background: none;
    padding: 48px 12px 42px;
  }
  /* ------------[ Subnavigation ]------------ */
  ul.subnav {
    position: absolute;
    top: 96px;
    left: -15px;
    right: auto;
    background-color: #fff;
    box-shadow: 1px 3px 4px -1px rgba(0, 0, 0, 0.4);
    border-radius: 0 0 12px 12px;
    padding: 12px 0 12px;
    margin: 0;
    transform-origin: top;
    transform: rotateX(-90deg);
    transition: all 0.3s linear;
    z-index: 130;
  }
  .mainnav > ul > li:hover > ul.subnav {
    transform: rotateX(0deg);
    transition: all 0.3s linear;
  }
  ul.subnav > li {
    padding-left: 0;
    margin: 0;
  }
  .mainnav > ul > li:last-child {
    margin: 0;
  }
  ul.subnav > li > a {
    min-width: 272px;
    font-family: 'Open Sans';
    color: #777;
    background-color: #fff;
    border: none;
    padding: 6px 30px;
    margin: 0;
    z-index: 120;
  }
  ul.subnav > li > a:hover {
    color: #7DC33F;
    border: none;
    border-radius: 0;
  }
  ul.subnav > li.current > a {
    color: #7DC33F;
    background-color: #fff;
    background-image: url('/inc/img/icons/list-icon-dark-green.svg');
    /*url('/inc/img/list-icon-dark-green.svg');*/
    border: none;
    border-radius: 0;
  }
  /* ------------[ Mobile Navigation ]------------ */
  #nav-toggle-wrap {
    display: none;
    flex: none;
  }
  /* ========================[ Standard-Elemente ]======================== */
  /* ------------[ Überschriften ]------------ */
  h1 {
    font-size: 54px;
    line-height: 60px;
  }
  h3 {
    margin: 30px 0 18px;
  }
  section h3:first-child {
    margin: 0 0 18px;
  }
  h4 {
    font-size: 20px;
    line-height: 30px;
    margin: 18px 0 6px;
  }
  /* ------------[ Absätze ]------------ */
  /* ------------[ Verlinkungen ]------------ */
  .fixed-buttons {
    top: 148px;
  }
  #home .fixed-buttons {
    top: 230px;
  }
  .fixed-buttons ul li {
    margin-bottom: 12px;
  }
  .fixed-buttons ul li img {
    width: 60px;
    height: 60px;
  }
  /* ------------[ Bilder ]------------ */
  /* Bilder mit weißen Abrisskanten */
  picture.abriss-rechts {
    margin-bottom: 0;
  }
  picture.abriss-links {
    margin-top: 0;
  }
  /* weiße Abrisskante oben */
  picture.abriss-links:after {
    top: auto;
    bottom: 0;
    transform: rotate(0deg);
  }
  /* Siegel + Erklärung */
  picture .sternenfair-siegel .siegel .siegel-text {
    bottom: 200%;
  }
  /* Siegel + Erklärung (Pfeil) */
  picture .sternenfair-siegel .siegel .siegel-text img {
    left: 20%;
    top: 200%;
  }
  picture .sternenfair-siegel .siegel:hover .siegel-text img {
    top: 120%;
  }
  /* ------------[ Bild größer klicken ]------------ */
  /* ------------[ Text-Bild-Element ]------------ */
  /* ------------[ Unnummerierte Listen ]------------ */
  /* ------------[ Nummerierte Listen ]------------ */
  /* ------------[ Listen Sonderformate ]------------ */
  /* ------------[ Tabellen ]------------ */
  table {
    max-width: 900px;
    border-radius: 30px 30px 0 0;
    margin: 0 auto;
    overflow-x: unset;
  }
  th, td {
    min-width: 260px;
  }
  th {
    padding: 18px 24px;
  }
  td {
    padding: 12px 24px;
  }
  /* ========================[ Sonderelemente ]======================== */
  /* ------------[ Keyvisual ]------------ */
  .keyvisual-wrap {
    margin-top: 120px;
  }
  .keyvisual {
    height: 420px;
  }
  /* Bundesland-Siegel */
  .keyvisual-siegel img {
    width: 160px;
    bottom: -54px;
    right: 300px;
  }
  /* Kuhkopf */
  .keyvisual-kuh img {
    width: 300px;
    right: 42px;
  }
  /* ------------[ Keyvisual Startseite ]------------ */
  #start .keyvisual {
    height: 600px;
  }
  /* ------------[ Intro ]------------ */
  .headline-section {
    max-width: 900px;
    padding: 72px 0;
  }
  .headline-section p {
    font-size: 24px;
    line-height: 32px;
  }
  /* ------------[ Intro Startseite ]------------ */
  .keyvisual-wrap .keyvisual-text {
    max-width: 100%;
    top: 180px;
    left: 30px;
    right: 30px;
  }
  .keyvisual-wrap h1 {
    font-size: 60px;
    line-height: 66px;
  }
  .keyvisual-wrap p {
    font-size: 24px;
    line-height: 30px;
  }
  /* ------------[ Bildergalerie ]------------ */
  .image-gallery {
    margin: -1%;
  }
  /* Auf small alle Bilder vollbreit */
  .image-gallery li {
    flex-basis: 23%;
    margin: 1%;
  }
  /* ------------[ Infoboxen ]------------ */
  .grid[cols="12"] > * .infobox, .grid[cols="12"] > * .infobox-white {
    width: 72%;
    padding: 60px;
  }
  .infobox h3, .infobox-white h3 {
    font-size: 24px;
    line-height: 30px;
  }
  /* ------------[ Infobox Blau ]------------ */
  /* infobox Blau */
  .infobox {
    padding: 42px 30px;
  }
  /* ------------[ Infobox Weiß ]------------ */
  .infobox-white {
    padding: 42px 30px;
  }
  /* ------------[ Teaser ]------------ */
  .teaser {
    width: 100%;
    margin: 0;
  }
  .teaser:after {
    content: '';
    display: none;
    width: 66px;
    height: 66px;
    position: absolute;
    bottom: -18px;
    right: -18px;
    background-color: #7DC33F;
    border-radius: 100%;
    background-image: url('/inc/img/arrows/arrow-white-right.svg');
    /*url(/inc/img/arrows/arrow-white-right.svg);*/
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease-in-out;
    z-index: 1;
  }
  .teaser:hover:after {
    display: block;
    transition: all 0.3s ease-in-out;
  }
  .teaser-image {
    height: 160px;
  }
  /* Verlinkte Überschrift im Teaser */
  .teaser h3 {
    padding: 30px 42px 0;
  }
  .teaser p {
    padding: 12px 42px 42px;
  }
  /* ------------[ Flex-Teaser ]------------ */
  section.teaser-group img.pfad {
    display: block;
    width: 1600px;
    position: absolute;
    left: -660px;
    bottom: 90px;
    z-index: -1;
  }
  /* Einzelner Teaser */
  .teaser-flex .teaser {
    flex-basis: 29.3%;
  }
  .teaser-flex .teaser h3 {
    font-size: 24px;
    line-height: 30px;
  }
  /* ------------[ Akkordeon ]------------ */
  /* ------------[ Zitat ]------------ */
  .zitat-box {
    width: 66%;
    padding: 72px 60px;
  }
  .zitat-box p {
    font-size: 24px;
    line-height: 32px;
  }
  /* ------------[ Aktuelles / News 3er-Sektion ]------------ */
  section.news h2:first-child {
    margin-bottom: 24px;
  }
  /* ------------[ Aktuelles / News ]------------ */
  .news-meldungen {
    margin: -2%;
  }
  .news-meldung {
    width: 29.3%;
    margin: 2%;
  }
  .news-text {
    padding: 0 30px 18px;
  }
  .news-text h3 {
    font-size: 24px;
    line-height: 30px;
    margin: 0 0 6px 0;
  }
  .news-text p {
    margin-bottom: 60px;
  }
  .news-text a {
    bottom: 30px;
    left: 30px;
    right: 30px;
  }
  /* ------------[ Presse-Übersicht ]------------ */
  .presse-meldung {
    padding: 42px 90px;
  }
  .presse-meldung-bild:after {
    width: 48px;
    height: 100%;
    bottom: 0;
    top: 0;
    right: 0;
    background-image: url('/inc/img/corporate-design/abriss-weiss-rechts.png');
    /*url(/inc/img/abriss-weiss-rechts.png);*/
    z-index: 1;
  }
  .presse-meldung-text {
    text-align: left;
    padding-top: 0;
    padding-left: 48px;
  }
  /* ------------[ Video ]------------ */
  .video-embed iframe {
    width: 100%;
    padding: 36px;
  }
  /* ------------[ Video-Beschreibung]------------ */
  .video-beschreibung {
    width: 90%;
    max-width: none;
    height: 100%;
    position: relative;
    font-size: 20px;
    line-height: 30px;
    margin: 72px auto 0;
  }
  .video-beschreibung:after {
    width: 90px;
    height: 72px;
    top: 140px;
    left: -110px;
    transform: rotate(18deg);
  }
  /* ------------[ Formulare ]------------ */
  /* ------------[ Produkt Slider ]------------ */
  .section-einleitung {
    width: 66%;
    margin: 0 auto 60px;
  }
  /* ------------[ Rezept-Teaser  (Content) ]------------ */
  .rezept-box {
    width: 100%;
    max-width: 100%;
  }
  /* ------------[ Rezept-Teaser (Übersichtsseite) ]------------ */
  .rezept-teaser {
    padding: 42px 90px;
  }
  .rezept-teaser-image:after {
    width: 48px;
    height: 100%;
    bottom: 0;
    top: 0;
    right: 0;
    background-image: url('/inc/img/corporate-design/abriss-weiss-rechts.png');
    /*url(/inc/img/abriss-weiss-rechts.png);*/
    z-index: 1;
  }
  .rezept-teaser-text {
    text-align: left;
    padding-top: 0;
    padding-left: 48px;
  }
  /* ------------[ Fotostreifen Milchbauern ]------------ */
  section.fotostreifen-milchbauern {
    height: 600px;
    background-position: left top;
  }
  .schild {
    width: 660px;
    bottom: 0;
    right: 6%;
  }
  .schild-background {
    top: 54px;
    left: 48px;
    right: 54px;
    bottom: 192px;
  }
  .schild-text {
    width: 600px;
    padding: 42px;
  }
  .schild .biene {
    width: 72px;
    top: 42px;
    left: 78px;
  }
  .schild .schild-hintergrund {
    width: 660px;
  }
  section.fotostreifen-milchbauern .biene {
    width: 72px;
    top: 12px;
    left: 14%;
  }
  /* ========================[ Sonderelmente Startseite ]======================== */
  /* ------------[ Produktübersicht Startseite ]------------ */
  section.products {
    height: 840px;
  }
  .product-container {
    width: 1300px;
    left: 45%;
    top: 105%;
    transform: translate(-50%);
  }
  .product-container:before {
    width: 190px;
    height: 900px;
    bottom: -60px;
    left: 140px;
  }
  .product-container:after {
    width: 300px;
    height: 700px;
    bottom: -60px;
    right: 0;
  }
  /* einzelne Produktgruppen-Bilder */
  .product-container a.milch {
    bottom: 120px;
    left: 240px;
  }
  .product-container a.milch .pic-milch {
    width: 420px;
  }
  .product-container a.butter {
    bottom: 170px;
    left: 580px;
  }
  .product-container a.butter .pic-butter {
    width: 280px;
  }
  .product-container a.joghurt {
    width: 440px;
    bottom: 100px;
    left: 800px;
  }
  .product-container a.joghurt .pic-joghurt {
    width: 440px;
  }
  /* Produktgruppen-Texte mit Pfeil */
  .product-container .text-milch, .product-container .text-butter, .product-container .text-joghurt {
    font-size: 18px;
    line-height: 24px;
    background: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }
  .product-container .text-milch {
    width: 335px;
    bottom: 760px;
    left: 580px;
  }
  .product-container .text-butter {
    width: 265px;
    bottom: 540px;
    left: 672px;
  }
  .product-container .text-joghurt {
    width: 314px;
    bottom: 640px;
    left: 848px;
  }
  /* Produktgruppen-Text-Pfeil */
  .product-container .text-milch:after, .product-container .text-butter:after, .product-container .text-joghurt:after {
    width: 70px;
    height: 56px;
  }
  .product-container .text-milch:after {
    top: 6px;
    left: -90px;
    transform: rotate(0deg);
  }
  .product-container .text-butter:after {
    top: 72px;
    left: 60px;
  }
  .product-container .text-joghurt:after {
    top: 64px;
    left: 140px;
  }
  /* ------------[ Sternenfair-Teaser Startseite ]------------ */
  .sternenfair-teaser {
    width: 80%;
    margin: 0 auto;
  }
  .sternenfair-teaser-text {
    padding: 120px 90px 120px 60px;
  }
  .sternenfair-teaser-pic {
    width: 100%;
    height: 100%;
    border-radius: 0px 6px 6px 0px;
  }
  .sternenfair-teaser-pic .biene {
    width: 136px;
    right: 24%;
    top: 60px;
    bottom: auto;
    animation-duration: 1.5s;
  }
  .sternenfair-teaser-pic .milchglas {
    width: 390px;
    right: 0;
    bottom: 0;
  }
  /* ========================[ Sonderelmente Milchbauern ]======================== */
  /* ------------[ Milchbauern-Teaser (Milchbauern-Übersicht) ]------------ */
  /* ------------[ Milchbauern-Teaser (Bundesländer-Übersicht) ]------------ */
  .milchbauer-teaser {
    text-align: left;
  }
  .milchbauer-teaser img {
    border-radius: 30px 0 0 30px;
  }
  .milchbauer-teaser-text {
    padding: 0;
  }
  /* ------------[ Milchbauern-Detailseite ]------------ */
  /* ------------[ Fotostreifen Milchbauern Umweltprojekt ]------------ */
  section.fotostreifen-milchbauern-umweltprojekt {
    height: 720px;
  }
  section.fotostreifen-milchbauern-umweltprojekt .schild {
    width: 780px;
    bottom: 0;
    left: 6%;
  }
  section.fotostreifen-milchbauern-umweltprojekt .schild-background {
    top: 84px;
    left: 42px;
    right: 48px;
    bottom: 224px;
  }
  section.fotostreifen-milchbauern-umweltprojekt .schild-text {
    width: 680px;
    padding: 42px;
  }
  section.fotostreifen-milchbauern-umweltprojekt .schild .biene {
    width: 72px;
    top: 54px;
    left: 560px;
  }
  section.fotostreifen-milchbauern-umweltprojekt .schild .schild-hintergrund {
    width: 780px;
  }
  /* ========================[ Sonderelmente Produkte ]======================== */
  /* ------------[ Nährwerttabelle Produkte ]------------ */
  section.naehrwerte .grid[cols="6-6"] {
    grid-column: auto / span 6 !important;
  }
  .naehrwert-angaben {
    padding: 0 42px 42px;
  }
  .table-blue h3:first-child, .table-green h3:first-child {
    font-size: 24px;
    line-height: 30px;
    padding: 42px 42px 24px;
    border-radius: 30px 30px 0 0;
    margin: 0 -42px 12px;
  }
  /* ========================[ Sonderelmente Wissenswertes ]======================== */
  /* ------------[ Wissenswertes-Übersicht ]------------ */
  .wissenswertes-teaser {
    padding: 42px 90px;
  }
  .wissenswertes-teaser-image:after {
    width: 48px;
    height: 100%;
    bottom: 0;
    top: 0;
    right: 0;
    background-image: url('/inc/img/corporate-design/abriss-weiss-rechts.png');
    /*url(/inc/img/abriss-weiss-rechts.png);*/
    z-index: 1;
  }
  .wissenswertes-teaser-text {
    text-align: left;
    padding-top: 0;
    padding-left: 48px;
  }
  /* ------------[ Milchlexikon ]------------ */
  .lexikon-eintrag {
    padding: 42px 60px;
  }
  /* ========================[ Sonderelmente Händlersuche ]======================== */
  /* ------------[ Händlersuche ]------------ */
  section.haendlersuche input[type="search"], section.haendlersuche input[type="text"] {
    font: 18px/24px 'Open Sans';
  }
  section.haendlersuche button[type="submit"] {
    font: 18px/24px 'Open Sans';
  }
  #produktfinder {
    order: 1;
    max-width: 100%;
    margin: 0;
  }
  .produkte-haendlersuche {
    order: 2;
  }
  #mapapp #map {
    width: 65%;
    height: 532px !important;
    float: left;
    margin: 1% 1% 1% 0;
  }
  /* Marktsuche */
  #finderlist .finderlist-text {
    max-width: 660px;
    margin: 48px auto 24px;
  }
  #finderlist ol {
    margin: 0 -1%;
  }
  #finderlist li {
    float: left;
    width: 31.3%;
    margin: 1%;
  }
  #finderlist li:after {
    content: '';
    height: 100%;
    clear: both;
  }
  /* ------------[ Markt-teaser ]------------ */
  /* alle Teaser */
  /* Einzelner Teaser */
  .teaser-markt {
    flex-basis: 14.66%;
    padding: 12px;
  }
  /* ========================[ Gewinnspiel ]======================== */
  /* ------------[ Gewinnspiel-Formular ]------------ */
  /* komplettes Formular*/
  form.gewinnspiel-form {
    min-width: 900px;
    max-width: 72%;
  }
  /* Felder 2-spaltig nebeneinander */
  .input-name {
    display: flex;
    justify-content: space-between;
  }
  .input-vorname {
    width: 100%;
    margin-right: 12px;
  }
  .input-nachname {
    width: 100%;
    margin-left: 12px;
  }
  /* ========================[ Call to Action ]======================== */
  /* ------------[ Call to Action ]------------ */
  /* Collage */
  .calltoaction-bilder .biene {
    width: 72px;
    top: -42px;
    right: 240px;
  }
  .calltoaction-bilder .produkte {
    width: 920px;
    right: -18%;
    top: -60px;
    transform: none;
  }
  /* Text.Kasten */
  .calltoaction-text {
    width: 100%;
    padding: 42px;
  }
  /* ------------[ Call to Action ]------------ */
  section.calltoaction-haendlersuche {
    max-width: 100%;
    height: 100%;
    text-align: left;
    padding: 180px 0 120px;
  }
  /* Collage */
  .calltoaction-haendlersuche-bilder {
    position: relative;
  }
  .calltoaction-haendlersuche-bilder .biene {
    width: 72px;
    top: -142px;
    right: 440px;
    animation-duration: 3s;
  }
  .calltoaction-haendlersuche-bilder .karte {
    width: 540px;
    right: -12px;
    top: -180px;
  }
  .calltoaction-haendlersuche-bilder .milch {
    width: 300px;
    top: auto;
    bottom: -200px;
    left: auto;
    right: 180px;
    animation-duration: 1s;
  }
  .calltoaction-haendlersuche-bilder .joghurt {
    width: 240px;
    top: auto;
    bottom: -148px;
    right: -30px;
    left: auto;
  }
  /* Text */
  .calltoaction-haendlersuche-text {
    min-width: auto;
    width: 100%;
    max-width: 480px;
    background: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
  }
  /* Button Händlersuche */
  .haendlersuche-button input[type="search"], .haendlersuche-button input[type="text"] {
    font: 18px/24px 'Open Sans';
  }
  .haendlersuche-button input[type="submit"] {
    font: 18px/24px 'Open Sans';
  }
  /* ========================[ Footer-Bereich ]======================== */
  footer .grid[cols="4-4-4"] > * {
    grid-column: auto / span 4;
  }
  footer .grid[cols="4-4-4"] > *:last-child {
    grid-column: auto / span 4;
  }
  footer a.arrow-link {
    display: inline-block;
    background-position: left 0.1em;
    border-top: none;
    padding: 0 0 0 30px;
  }
}
@media screen and (min-width: 1360px) {
  > body:after {
    content: "XL";
  }
  .only-xl {
    display: block !important;
  }
  .no-xl {
    display: none !important;
  }
  /* ------------[ Schriften ]------------ */
  /* ------------[ Body ]------------ */
  /* ==============================[ Begrenzung Inhalt ]============================== */
  /* ==============================[ Formate für Sektionen ]============================== */
  /* ------------[ Spezielle KLassen für Sektionen (HTML-Code im section.tmpl ab ca. Zeile 26) ]------------ */
  /* ==============================[ universelle Klassen ]============================== */
  /* ------------[ Positionierung der Elmente ]------------ */
  /* ------------[ verschiedene Abstände ]------------ */
  /* ------------[ verschiedene Abstände im Grid ]------------ */
  /* ------------[ Klassen für Texte ]------------ */
  /* ------------[ Sonstiges ]------------ */
  /* ========================[ Header-Bereich ]======================== */
  header {
    box-shadow: 2px 14px 30px 2px rgba(0, 0, 0, 0.4);
  }
  .header:after {
    height: 36px;
    bottom: -36px;
  }
  /* ------------[ Logo ]------------ */
  /* ------------[ Hauptnavigation ]------------ */
  /* ------------[ Subnavigation ]------------ */
  /* ------------[ Mobile Navigation ]------------ */
  /* ========================[ Standard-Elemente ]======================== */
  /* ------------[ Überschriften ]------------ */
  /* ------------[ Absätze ]------------ */
  /* ------------[ Verlinkungen ]------------ */
  /* ------------[ Verlinkungen ]------------ */
  .fixed-buttons {
    top: 164px;
  }
  #home .fixed-buttons {
    top: 290px;
  }
  /* ------------[ Bilder ]------------ */
  /* ------------[ Bild größer klicken ]------------ */
  /* ------------[ Text-Bild-Element ]------------ */
  /* ------------[ Unnummerierte Listen ]------------ */
  /* ------------[ Nummerierte Listen ]------------ */
  /* ------------[ Listen Sonderformate ]------------ */
  /* ------------[ Tabellen ]------------ */
  /* ========================[ Sonderelemente ]======================== */
  /* ------------[ Keyvisual ]------------ */
  .keyvisual {
    height: 480px;
  }
  /* Bundesland-Siegel */
  .keyvisual-siegel img {
    width: 180px;
    bottom: -48px;
    right: 380px;
  }
  /* Kuhkopf */
  .keyvisual-kuh img {
    width: 342px;
    bottom: -60px;
    right: 90px;
  }
  /* ------------[ Keyvisual Startseite ]------------ */
  #start .keyvisual {
    height: 720px;
  }
  /* ------------[ Intro ]------------ */
  .headline-section {
    max-width: 960px;
    padding: 72px 0;
    margin: 0 auto;
  }
  /* ------------[ Intro Startseite ]------------ */
  .keyvisual-wrap h1 {
    top: 180px;
    left: 30px;
    right: 30px;
    font-size: 60px;
    line-height: 66px;
  }
  .keyvisual-wrap p {
    top: 256px;
    left: 120px;
    right: 120px;
    font-size: 24px;
    line-height: 30px;
  }
  /* ------------[ Bildergalerie ]------------ */
  /* ------------[ Infoboxen ]------------ */
  /* ------------[ Infobox Blau ]------------ */
  /* ------------[ Infobox Weiß ]------------ */
  /* ------------[ Teaser ]------------ */
  /* ------------[ Flex-Teaser ]------------ */
  section.teaser-group img.pfad {
    left: 0;
    bottom: 84px;
  }
  /* alle Teaser */
  .teaser-flex {
    margin: 0 -1%;
  }
  /* Einzelne Teaser auf small alle gleich */
  .teaser-flex .teaser {
    flex-basis: 23%;
    margin: 0 1%;
  }
  /* ------------[ Akkordeon ]------------ */
  /* ------------[ Zitat ]------------ */
  /* ------------[ Aktuelles / News 3er-Sektion ]------------ */
  /* ------------[ Aktuelles / News ]------------ */
  /* ------------[ Video ]------------ */
  /* ------------[ Video-Beschreibung]------------ */
  .video-beschreibung {
    font-size: 24px;
    line-height: 34px;
    margin-top: 78px;
  }
  /* ------------[ Formulare ]------------ */
  /* ------------[ Produkt Slider ]------------ */
  /* ------------[ Rezept-Teaser  (Content) ]------------ */
  /* ------------[ Rezept-Teaser (Übersichtsseite) ]------------ */
  /* ------------[ Fotostreifen Milchbauern ]------------ */
  .schild {
    right: 20%;
  }
  /* ========================[ Sonderelmente Startseite ]======================== */
  /* ------------[ Produktübersicht Startseite ]------------ */
  /* ------------[ Sternenfair-Teaser Startseite ]------------ */
  /* ========================[ Sonderelmente Milchbauern ]======================== */
  /* ------------[ Milchbauern-Teaser (Milchbauern-Übersicht) ]------------ */
  /* ------------[ Milchbauern-Teaser (Bundesländer-Übersicht) ]------------ */
  /* ------------[ Milchbauern-Detailseite ]------------ */
  /* ------------[ Fotostreifen Milchbauern Umweltprojekt ]------------ */
  section.fotostreifen-milchbauern-umweltprojekt .schild {
    left: 18%;
  }
  /* ========================[ Sonderelmente Produkte ]======================== */
  /* ------------[ Nährwerttabelle Produkte ]------------ */
  /* ========================[ Sonderelmente Wissenswertes ]======================== */
  /* ------------[ Wissenswertes-Übersicht ]------------ */
  .wissenswertes-teaser {
    padding: 60px 120px;
  }
  /* ------------[ Milchlexikon ]------------ */
  /* ========================[ Sonderelmente Händlersuche ]======================== */
  /* ------------[ Händlersuche ]------------ */
  /* ------------[ Markt-teaser ]------------ */
  /* ========================[ Call to Action ]======================== */
  /* ------------[ Call to Action ]------------ */
  section.calltoaction {
    padding: 120px 0;
  }
  .calltoaction-bilder .produkte {
    width: 1042px;
    right: -18%;
    top: -120px;
  }
  .calltoaction-text {
    width: 90%;
  }
  /* ------------[ Call to Action ]------------ */
  /* Collage */
  .calltoaction-haendlersuche-bilder .karte {
    right: 0;
  }
  /* ========================[ Footer-Bereich ]======================== */
}
@media print {
  /* ========================[ Basiselemente ]======================== */
  * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
  /* Remove shadow and background */
  *, *:before, *:after, p:first-letter, div:first-letter, blockquote:first-letter, li:first-letter, p:first-line, div:first-line, blockquote:first-line, li:first-line {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  /* ------------[ Pagebreak ]------------ */
  .page-break, .page-break-before {
    page-break-before: always;
  }
  .page-break-after {
    page-break-after: always;
  }
  .no-print {
    display: none;
  }
  /* ------------[ HTML ]------------ */
  html {
    font-size: 12px;
    padding: 0;
    margin: 0;
  }
  /* Section */
  article section {
    margin: 24px 0;
  }
  section {
    padding: 0;
  }
  /* ------------[ Nummerierte Listen ]------------ */
  /* Placeholder WebKit browsers*/
  ::-webkit-input-placeholder {
    color: transparent;
  }
  /* Mozilla Firefox 4 to 18 */
  :-moz-placeholder {
    color: transparent;
  }
  /* Mozilla Firefox 19+ */
  ::-moz-placeholder {
    color: transparent;
  }
  /* Internet Explorer 10+*/
  :-ms-input-placeholder {
    color: transparent;
  }
  /* ========================[ Content-Bereich ]======================== */
  /* Padding */
  /* Colors*/
  /* Note: Black prints faster (http://www.sanbeiji.com/archives/953) (thanks to html5 boilerplate) */
  body {
    max-width: 21cm;
    font-family: arial;
    font-size: 12px;
    line-height: 16pt;
    color: #000 !important;
    background: #fff !important;
    padding: 24px;
    margin: 0 auto;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
  }
  /* ------------[ Header-Bereich ]------------ */
  header {
    position: relative;
  }
  /* Allgemein */
  .mainnav, .keyvisual, .keyvisual-kuh, .nav-toggle-wrap {
    display: none;
  }
  /* ========================[ Schriften ]======================== */
  /* Font family Taken from bootstrap */
  /* Font size */
  /* Base */
  /* ------------[ Überschriften ]------------ */
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.2;
    color: #000;
    margin-top: 0;
    margin-bottom: 0.75rem;
  }
  h1, .keyvisual-wrap h1 {
    font-size: 18px;
    line-height: 20px;
  }
  h2 {
    font-size: 16px;
  }
  h3 {
    font-size: 15px;
  }
  h4 {
    font-size: 14px;
  }
  h5 {
    font-size: 13px;
  }
  h6, .keyvisual-wrap p {
    font-size: 12px;
  }
  /* ------------[ Absätze ]------------ */
  p, blockquote, table, ul, ol, dl {
    margin-top: 0;
    margin-bottom: 1.5rem;
  }
  p:last-child, ul:last-child, ol:last-child {
    margin-bottom: 0;
  }
  /* Intro */
  .intro {
    margin-bottom: 24px;
  }
  /* kleiner Text */
  .minitext {
    font-size: 13px;
  }
  /* ========================[ Contentelemente ]======================== */
  /* ------------[ Trennlinie ]------------ */
  hr {
    height: 0;
    border: 0;
    border-bottom: 2px solid #bbb;
    padding: 0;
    margin: 2.25rem 0;
  }
  /* ------------[ Links ]------------ */
  /* Links*/
  a, a:visited {
    color: #000;
    text-decoration: underline;
    word-wrap: break-word;
  }
  a.arrowlink {
    padding-left: 0;
  }
  .button {
    padding: 0;
    color: #000;
    margin: 0;
    text-decoration: underline;
  }
  /* ------------[ Bilder ]------------ */
  img.pic {
    display: block;
    max-width: 200px !important;
    max-height: 150px !important;
    height: auto;
    width: auto;
    border: 0;
    vertical-align: top;
  }
  .pic-description {
    font-size: 14px;
  }
  .image-gallery li {
    display: inline-block;
    vertical-align: top;
  }
  /* ------------[ Tabellen ]------------ */
  table {
    border-collapse: collapse;
  }
  thead {
    display: table-header-group;
  }
  tr, .modern tr {
    border: none;
  }
  table, th, td, table.modern, .modern th, .modern td {
    border: 1px solid #bdbdbd;
  }
  td, th, .modern th, .modern td {
    padding: 7px 14px;
    page-break-inside: avoid;
  }
  /* ========================[ Sonderelmente ]======================== */
  /* ------------[ Infobox ]------------ */
  .infobox {
    border: 2px solid #e7e7e7;
    padding: 12px;
  }
  .infobox.rahmen {
    padding: 12px;
  }
  .infobox.hgColor, .infobox.hgColor a {
    color: #000;
  }
  /* ------------[ Teaser ]------------ */
  .teaser-flex .teaser {
    width: calc(100% / 2 - 48px);
    padding: 0;
    margin-right: 24px;
  }
  .teaser-flex .teaser-image {
    height: auto;
  }
  .teaser.clickbox {
    padding: 0;
  }
  .teaser.clickbox span.button {
    display: none;
  }
  /* ------------[ Akkordion ]------------ */
  .accordion .acc-item .title h2, .title h3, .accordion .title h3 {
    font-size: 16px;
    line-height: inherit;
    color: #000;
  }
  /* ------------[ Call to Action ]------------ */
  .calltoaction {
    font-size: 1rem;
    text-align: left;
    padding: 0;
    margin: 0;
  }
  .calltoaction span {
    font-size: 1rem;
  }
  /* ------------[ Grid ]------------ */
  .grid > div {
    padding: 12px !important;
    margin: 4px;
  }
  .grid[cols="4-4-4"], .grid[cols="6-6"], .grid[cols="3-3-3-3"], .grid[cols="4-8"], .grid[cols="8-4"], .grid[cols="5-7"], .grid[cols="7-5"], .grid[cols="3-9"], .grid[cols="9-3"], .grid[cols="10-2"], .grid[cols="2-10"] {
    grid-template-columns: none;
    display: block;
  }
  .grid[cols="4-4-4"] > div, .grid[cols="6-6"] > div, .grid[cols="3-3-3-3"] > div, .grid[cols="4-8"] > div, .grid[cols="8-4"] > div, .grid[cols="5-7"] > div, .grid[cols="7-5"] > div, .grid[cols="3-9"] > div, .grid[cols="9-3"] > div, .grid[cols="10-2"] > div, .grid[cols="2-10"] > div {
    display: inline-block;
    vertical-align: top;
    padding: 0 16px 16px 0;
  }
  .grid[cols="4-4-4"] > div {
    width: calc(100% / 3 - 20px);
  }
  .grid[cols="6-6"] > div, .grid[cols="8-4"] > div, .grid[cols="5-7"] > div, .grid[cols="7-5"] > div {
    width: calc(100% / 2 - 20px);
  }
  .grid[cols="9-3"] > div:last-child, .grid[cols="3-9"] > div:first-child, .grid[cols="4-8"] > div:first-child, .grid[cols="8-4"] > div:last-child, .grid[cols="10-2"] > div:last-child, .grid[cols="2-10"] > div:first-child {
    width: 25%;
  }
  .grid[cols="3-9"] > div:last-child, .grid[cols="9-3"] > div:first-child, .grid[cols="4-8"] > div:last-child, .grid[cols="8-4"] > div:first-child, .grid[cols="10-2"] > div:first-child, .grid[cols="2-10"] > div:last-child {
    width: 70%;
  }
  .grid[cols="3-3-3-3"] > div {
    width: calc(100% / 4 - 20px);
  }
  /* ========================[ Sonstiges ]======================== */
  /* ------------[ Others ]------------ */
  blockquote {
    border: 0;
    border-left: 5px solid #bbb;
    padding: 12px 1.5rem;
    margin-left: 1px;
  }
  [dir='rtl'] blockquote {
    border-left: 0;
    border-right: 5px solid #bbb;
    margin-left: 0;
    margin-right: 1px;
  }
  blockquote:first-child {
    margin-top: 0;
  }
  blockquote p:last-child, blockquote ul:last-child, blockquote ol:last-child {
    margin-bottom: 0;
  }
  blockquote footer {
    display: block;
    font-size: 80%;
  }
  /* ------------[ Others ]------------ */
  dt {
    font-weight: bold;
  }
  dd {
    margin: 0;
    margin-bottom: 50%;
  }
  abbr[title], acronym[title] {
    border: 0;
    text-decoration: none;
  }
  abbr[title].no-reformat:after, acronym[title].no-reformat:after {
    content: '';
  }
  .no-reformat abbr:after, .no-reformat acronym:after, .no-reformat a:after {
    content: '';
  }
  /* ------------[ Code, Pre ]------------ */
  code, pre, kbd {
    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
    font-size: 85%;
    border: 1px solid #bbb;
  }
  code, kbd {
    padding: 3px;
  }
  pre {
    padding: 10px 12px;
    margin-bottom: 1.5rem;
  }
  pre code, kbd {
    border: 0;
  }
  /* ////////////////  Projektbezogene änderungen  //////////////////////*/
  section.no-padding-bottom, section.no-padding-top, section.icon-background, section.rezepte, section.laender-siegel {
    padding: 0;
  }
  .headline-section {
    max-width: 100%;
    padding: 0;
  }
  .headline-section h1, .headline-section p {
    text-align: left;
  }
  .text-center {
    text-align: left;
  }
  ul > li {
    list-style: disc;
    margin: 12px 0 12px 16px;
    padding: 0;
  }
  .keyvisual-wrap {
    margin: 0;
  }
  .keyvisual-wrap .keyvisual-text, .keyvisual-wrap h1, .keyvisual-wrap p {
    color: #000;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
  }
  .keyvisual-wrap:after, .product-container:before, .news-meldung-img:after, picture.abriss-rechts:before, picture.abriss-rechts:after {
    content: none;
  }
  section.products, .product-container, .product-container .text-milch, .product-container .text-butter, .product-container .text-joghurt, .product-container a.milch, .product-container a.butter, .product-container a.joghurt {
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transform: translate(0, 0);
    height: auto;
  }
  .product-container .text-milch, .product-container .text-butter, .product-container .text-joghurt {
    display: inline-block;
    vertical-align: top;
    width: 32%;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
  }
  .product-container a.milch, .product-container a.butter, .product-container a.joghurt {
    animation: none;
    display: inline-block;
    vertical-align: top;
    width: 33%;
  }
  .product-container a.milch .pic-milch, .product-container a.butter .pic-butter, .product-container a.joghurt .pic-joghurt {
    width: 100%;
  }
  .sternenfair-teaser-pic .milchglas, .sternenfair-teaser-pic .biene {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    max-width: 200px !important;
    max-height: 150px !important;
    height: auto;
    width: auto;
    border: 0;
    vertical-align: top;
  }
  section.fotostreifen-milchbauern {
    height: auto;
  }
  .schild, .schild-background, .schild-text, .news-teaser-link, .news-text a.news-teaser-link, .calltoaction-haendlersuche-bilder .karte {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translate(0, 0);
    width: 100%;
  }
  .schild img, .calltoaction-haendlersuche-bilder .milch, .calltoaction-haendlersuche-bilder .biene, .calltoaction-haendlersuche-bilder .joghurt, .teaser-image, picture .sternenfair-stempel img {
    display: none;
  }
  .video-beschreibung, .news-text h3, .slider-item h3, .teaser h3 {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
  }
  .uc-embedding-container {
    min-height: auto !important;
  }
  .news-meldung {
    flex-direction: row;
  }
  .news-meldung:hover {
    transform: scale(1);
  }
  .news-text {
    padding: 0 24px;
  }
  .news-text p {
    margin: 0;
  }
  .slick-dotted.slick-slider {
    margin-bottom: 0;
  }
  .infobox {
    color: #000;
  }
  .infobox h3, .infobox h2, .infobox a {
    color: #000;
  }
  .teaser, .wissenswertes-teaser-text {
    text-align: left;
  }
  .wissenswertes-teaser {
    padding: 0;
  }
  ul.pagination {
    color: #000;
  }
  ul.pagination li {
    float: none;
    display: inline-block;
    font-size: inherit;
    width: auto;
  }
  ul.pagination li i {
    color: #000;
    border: 1px solid #000;
  }
  .lexikon-eintrag {
    padding: 12px 0;
  }
  .rezept-teaser {
    padding: 0;
  }
  .rezept-teaser-text {
    text-align: left;
  }
  section.foto-background {
    background-image: none !important;
    padding: 0;
  }
  section.icon-background {
    background-image: none !important;
  }
  .calltoaction-haendlersuche {
    max-width: 100%;
    height: auto;
  }
  .grid[cols="5-7"] > .calltoaction-text {
    width: 100%;
    max-width: 100%;
  }
  .grid[cols="5-7"] > .calltoaction-bilder, .calltoaction-bilder img {
    display: none;
  }
  .accordion .title h3, .accordion .acc-content {
    padding: 12px 0 0;
  }
  .printstyle.grid[cols="6-6"] > div {
    width: 90%;
  }
  section.teaser-group {
    margin: 0;
  }
  .teaser-flex .teaser a, .teaser-flex .teaser:hover a, .teaser-flex .teaser:focus a {
    height: auto;
  }
  .teaser-flex .teaser h3, .teaser-flex .teaser .teaser-flex-image, .keyvisual-siegel img {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translate(0, 0);
  }
  .teaser-flex .teaser .teaser-flex-image {
    width: 100%;
    display: inline-block;
    max-width: 200px;
  }
  .teaser-flex .teaser:hover .teaser-flex-image {
    transform: translateX(0) scale(1);
  }
  .teaser-flex .teaser h3 {
    font-size: inherit;
    line-height: inherit;
  }
  .teaser-flex .teaser, .milchbauer-teaser {
    width: 33%;
    flex-basis: auto;
    justify-content: flex-start;
    height: auto !important;
    margin-bottom: 24px;
  }
  .milchbauer-teaser .grid[cols="5-7"] > div {
    width: 100%;
    padding: 0 12px !important;
  }
  .calltoaction-haendlersuche-bilder .karte {
    width: 100%;
    max-width: 200px;
    max-height: 200px;
  }
  footer .grid[cols="4-4-4"] > div {
    width: calc(100% / 2 - 16px);
  }
  .footer-links.grid.small-grid-gap {
    display: none;
  }
}