/*!
 * @package lgs20-18
 * @version 1.7.6
 * @build Mon, 07 Jun 2021 08:35:46 GMT
 */
.carousel .control-arrow,.carousel.carousel-slider .control-arrow{-webkit-transition:all .25s ease-in;-moz-transition:all .25s ease-in;-ms-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in;opacity:.4;position:absolute;z-index:2;top:20px;background:0 0;border:0;font-size:32px;cursor:pointer}.carousel .control-arrow:hover{opacity:1}.carousel .control-arrow:before,.carousel.carousel-slider .control-arrow:before{margin:0 5px;display:inline-block;border-top:8px solid transparent;border-bottom:8px solid transparent;content:''}.carousel .control-disabled.control-arrow{opacity:0;cursor:inherit;display:none}.carousel .control-prev.control-arrow{left:0}.carousel .control-prev.control-arrow:before{border-right:8px solid #fff}.carousel .control-next.control-arrow{right:0}.carousel .control-next.control-arrow:before{border-left:8px solid #fff}.carousel{position:relative;width:100%}.carousel *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.carousel img{width:100%;display:inline-block;pointer-events:none}.carousel .carousel{position:relative}.carousel .control-arrow{outline:0;border:0;background:0 0;top:50%;margin-top:-13px;font-size:18px}.carousel .thumbs-wrapper{margin:20px;overflow:hidden}.carousel .thumbs{-webkit-transition:all .15s ease-in;-moz-transition:all .15s ease-in;-ms-transition:all .15s ease-in;-o-transition:all .15s ease-in;transition:all .15s ease-in;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);position:relative;list-style:none;white-space:nowrap}.carousel .thumb{-webkit-transition:border .15s ease-in;-moz-transition:border .15s ease-in;-ms-transition:border .15s ease-in;-o-transition:border .15s ease-in;transition:border .15s ease-in;display:inline-block;width:80px;margin-right:6px;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px}.carousel .thumb:focus{border:3px solid #ccc;outline:0}.carousel .thumb.selected,.carousel .thumb:hover{border:3px solid #333}.carousel .thumb img{vertical-align:top}.carousel.carousel-slider{position:relative;margin:0;overflow:hidden}.carousel.carousel-slider .control-arrow{top:0;color:#fff;font-size:26px;bottom:0;margin-top:0;padding:5px}.carousel.carousel-slider .control-arrow:hover{background:rgba(0,0,0,.2)}.carousel .slider-wrapper{overflow:hidden;margin:auto;width:100%;-webkit-transition:height .15s ease-in;-moz-transition:height .15s ease-in;-ms-transition:height .15s ease-in;-o-transition:height .15s ease-in;transition:height .15s ease-in}.carousel .slider-wrapper.axis-horizontal .slider{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-horizontal .slider .slide{flex-direction:column;flex-flow:column}.carousel .slider-wrapper.axis-vertical{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-vertical .slider{-webkit-flex-direction:column;flex-direction:column}.carousel .slider{margin:0;padding:0;position:relative;list-style:none;width:100%}.carousel .slider.animated{-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;-ms-transition:all .35s ease-in-out;-o-transition:all .35s ease-in-out;transition:all .35s ease-in-out}.carousel .slide{min-width:100%;margin:0;position:relative;text-align:center;background:#000}.carousel .slide img{width:100%;vertical-align:top;border:0}.carousel .slide iframe{display:inline-block;width:calc(100% - 80px);margin:0 40px 40px;border:0}.carousel .slide .legend{-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;position:absolute;bottom:40px;left:50%;margin-left:-45%;width:90%;border-radius:10px;background:#000;color:#fff;padding:10px;font-size:12px;text-align:center;opacity:.25;-webkit-transition:opacity .35s ease-in-out;-moz-transition:opacity .35s ease-in-out;-ms-transition:opacity .35s ease-in-out;-o-transition:opacity .35s ease-in-out;transition:opacity .35s ease-in-out}.carousel .control-dots{position:absolute;bottom:0;margin:10px 0;text-align:center;width:100%}@media (min-width:960px){.carousel .control-dots{bottom:0}}.carousel .control-dots .dot{-webkit-transition:opacity .25s ease-in;-moz-transition:opacity .25s ease-in;-ms-transition:opacity .25s ease-in;-o-transition:opacity .25s ease-in;transition:opacity .25s ease-in;opacity:.3;box-shadow:1px 1px 2px rgba(0,0,0,.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px}.carousel .control-dots .dot.selected,.carousel .control-dots .dot:hover{opacity:1}.carousel .carousel-status{position:absolute;top:0;right:0;padding:5px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,.9);color:#fff}.carousel:hover .slide .legend{opacity:1}.PresetDateRangePicker_panel {
  padding: 0 22px 11px
}
.PresetDateRangePicker_button {
  position: relative;
  height: 100%;
  text-align: center;
  background: 0 0;
  border: 2px solid #00a699;
  color: #00a699;
  padding: 4px 12px;
  margin-right: 8px;
  font: inherit;
  font-weight: 700;
  line-height: normal;
  overflow: visible;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer
}
.PresetDateRangePicker_button:active {
  outline: 0
}
.PresetDateRangePicker_button__selected {
  color: #fff;
  background: #00a699
}
.SingleDatePickerInput {
  display: inline-block;
  background-color: #fff
}
.SingleDatePickerInput__withBorder {
  border-radius: 2px;
  border: 1px solid #dbdbdb
}
.SingleDatePickerInput__rtl {
  direction: rtl
}
.SingleDatePickerInput__disabled {
  background-color: #f2f2f2
}
.SingleDatePickerInput__block {
  display: block
}
.SingleDatePickerInput__showClearDate {
  padding-right: 30px
}
.SingleDatePickerInput_clearDate {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  padding: 10px;
  margin: 0 10px 0 5px;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%)
}
.SingleDatePickerInput_clearDate__default:focus,
.SingleDatePickerInput_clearDate__default:hover {
  background: #dbdbdb;
  border-radius: 50%
}
.SingleDatePickerInput_clearDate__small {
  padding: 6px
}
.SingleDatePickerInput_clearDate__hide {
  visibility: hidden
}
.SingleDatePickerInput_clearDate_svg {
  fill: #82888a;
  height: 12px;
  width: 15px;
  vertical-align: middle
}
.SingleDatePickerInput_clearDate_svg__small {
  height: 9px
}
.SingleDatePickerInput_calendarIcon {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
  margin: 0 5px 0 10px
}
.SingleDatePickerInput_calendarIcon_svg {
  fill: #82888a;
  height: 15px;
  width: 14px;
  vertical-align: middle
}
.SingleDatePicker {
  position: relative;
  display: inline-block
}
.SingleDatePicker__block {
  display: block
}
.SingleDatePicker_picker {
  z-index: 1;
  background-color: #fff;
  position: absolute
}
.SingleDatePicker_picker__rtl {
  direction: rtl
}
.SingleDatePicker_picker__directionLeft {
  left: 0
}
.SingleDatePicker_picker__directionRight {
  right: 0
}
.SingleDatePicker_picker__portal {
  background-color: rgba(0,0,0,.3);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%
}
.SingleDatePicker_picker__fullScreenPortal {
  background-color: #fff
}
.SingleDatePicker_closeButton {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  z-index: 2
}
.SingleDatePicker_closeButton:focus,
.SingleDatePicker_closeButton:hover {
  color: darken(#cacccd,10%);
  text-decoration: none
}
.SingleDatePicker_closeButton_svg {
  height: 15px;
  width: 15px;
  fill: #cacccd
}
.DayPickerKeyboardShortcuts_buttonReset {
  background: 0 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  cursor: pointer;
  font-size: 14px
}
.DayPickerKeyboardShortcuts_buttonReset:active {
  outline: 0
}
.DayPickerKeyboardShortcuts_show {
  width: 33px;
  height: 26px;
  position: absolute;
  z-index: 2
}
.DayPickerKeyboardShortcuts_show::before {
  content: "";
  display: block;
  position: absolute
}
.DayPickerKeyboardShortcuts_show__bottomRight {
  bottom: 0;
  right: 0
}
.DayPickerKeyboardShortcuts_show__bottomRight::before {
  border-top: 26px solid transparent;
  border-right: 33px solid #00a699;
  bottom: 0;
  right: 0
}
.DayPickerKeyboardShortcuts_show__bottomRight:hover::before {
  border-right: 33px solid #008489
}
.DayPickerKeyboardShortcuts_show__topRight {
  top: 0;
  right: 0
}
.DayPickerKeyboardShortcuts_show__topRight::before {
  border-bottom: 26px solid transparent;
  border-right: 33px solid #00a699;
  top: 0;
  right: 0
}
.DayPickerKeyboardShortcuts_show__topRight:hover::before {
  border-right: 33px solid #008489
}
.DayPickerKeyboardShortcuts_show__topLeft {
  top: 0;
  left: 0
}
.DayPickerKeyboardShortcuts_show__topLeft::before {
  border-bottom: 26px solid transparent;
  border-left: 33px solid #00a699;
  top: 0;
  left: 0
}
.DayPickerKeyboardShortcuts_show__topLeft:hover::before {
  border-left: 33px solid #008489
}
.DayPickerKeyboardShortcuts_showSpan {
  color: #fff;
  position: absolute
}
.DayPickerKeyboardShortcuts_showSpan__bottomRight {
  bottom: 0;
  right: 5px
}
.DayPickerKeyboardShortcuts_showSpan__topRight {
  top: 1px;
  right: 5px
}
.DayPickerKeyboardShortcuts_showSpan__topLeft {
  top: 1px;
  left: 5px
}
.DayPickerKeyboardShortcuts_panel {
  overflow: auto;
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 2;
  padding: 22px;
  margin: 33px;
  text-align: left
}
.DayPickerKeyboardShortcuts_title {
  font-size: 16px;
  font-weight: 700;
  margin: 0
}
.DayPickerKeyboardShortcuts_list {
  list-style: none;
  padding: 0;
  font-size: 14px
}
.DayPickerKeyboardShortcuts_close {
  position: absolute;
  right: 22px;
  top: 22px;
  z-index: 2
}
.DayPickerKeyboardShortcuts_close:active {
  outline: 0
}
.DayPickerKeyboardShortcuts_closeSvg {
  height: 15px;
  width: 15px;
  fill: #cacccd
}
.DayPickerKeyboardShortcuts_closeSvg:focus,
.DayPickerKeyboardShortcuts_closeSvg:hover {
  fill: #82888a
}
.CalendarDay {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 14px;
  text-align: center
}
.CalendarDay:active {
  outline: 0
}
.CalendarDay__defaultCursor {
  cursor: default
}
.CalendarDay__default {
  border: 1px solid #e4e7e7;
  color: #484848;
  background: #fff
}
.CalendarDay__default:hover {
  background: #e4e7e7;
  border: 1px solid #e4e7e7;
  color: inherit
}
.CalendarDay__hovered_offset {
  background: #f4f5f5;
  border: 1px double #e4e7e7;
  color: inherit
}
.CalendarDay__outside {
  border: 0;
  background: #fff;
  color: #484848
}
.CalendarDay__outside:hover {
  border: 0
}
.CalendarDay__blocked_minimum_nights {
  background: #fff;
  border: 1px solid #eceeee;
  color: #cacccd
}
.CalendarDay__blocked_minimum_nights:active,
.CalendarDay__blocked_minimum_nights:hover {
  background: #fff;
  color: #cacccd
}
.CalendarDay__highlighted_calendar {
  background: #ffe8bc;
  color: #484848
}
.CalendarDay__highlighted_calendar:active,
.CalendarDay__highlighted_calendar:hover {
  background: #ffce71;
  color: #484848
}
.CalendarDay__selected_span {
  background: #66e2da;
  border: 1px double #33dacd;
  color: #fff
}
.CalendarDay__selected_span:active,
.CalendarDay__selected_span:hover {
  background: #33dacd;
  border: 1px double #33dacd;
  color: #fff
}
.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
  background: #00a699;
  border: 1px double #00a699;
  color: #fff
}
.CalendarDay__hovered_span,
.CalendarDay__hovered_span:hover {
  background: #b2f1ec;
  border: 1px double #80e8e0;
  color: #007a87
}
.CalendarDay__hovered_span:active {
  background: #80e8e0;
  border: 1px double #80e8e0;
  color: #007a87
}
.CalendarDay__blocked_calendar,
.CalendarDay__blocked_calendar:active,
.CalendarDay__blocked_calendar:hover {
  background: #cacccd;
  border: 1px solid #cacccd;
  color: #82888a
}
.CalendarDay__blocked_out_of_range,
.CalendarDay__blocked_out_of_range:active,
.CalendarDay__blocked_out_of_range:hover {
  background: #fff;
  border: 1px solid #e4e7e7;
  color: #cacccd
}
.CalendarDay__hovered_start_first_possible_end {
  background: #eceeee;
  border: 1px double #eceeee
}
.CalendarDay__hovered_start_blocked_min_nights {
  background: #eceeee;
  border: 1px double #e4e7e7
}
.CalendarMonth {
  background: #fff;
  text-align: center;
  vertical-align: top;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}
.CalendarMonth_table {
  border-collapse: collapse;
  border-spacing: 0
}
.CalendarMonth_verticalSpacing {
  border-collapse: separate
}
.CalendarMonth_caption {
  color: #484848;
  font-size: 18px;
  text-align: center;
  padding-top: 22px;
  padding-bottom: 37px;
  caption-side: initial
}
.CalendarMonth_caption__verticalScrollable {
  padding-top: 12px;
  padding-bottom: 7px
}
.CalendarMonthGrid {
  background: #fff;
  text-align: left;
  z-index: 0
}
.CalendarMonthGrid__animating {
  z-index: 1
}
.CalendarMonthGrid__horizontal {
  position: absolute;
  left: 9px
}
.CalendarMonthGrid__vertical {
  margin: 0 auto
}
.CalendarMonthGrid__vertical_scrollable {
  margin: 0 auto;
  overflow-y: scroll
}
.CalendarMonthGrid_month__horizontal {
  display: inline-block;
  vertical-align: top;
  min-height: 100%
}
.CalendarMonthGrid_month__hideForAnimation {
  position: absolute;
  z-index: -1;
  opacity: 0;
  pointer-events: none
}
.CalendarMonthGrid_month__hidden {
  visibility: hidden
}
.DayPickerNavigation {
  position: relative;
  z-index: 2
}
.DayPickerNavigation__horizontal {
  height: 0
}
.DayPickerNavigation__verticalDefault {
  position: absolute;
  width: 100%;
  height: 52px;
  bottom: 0;
  left: 0
}
.DayPickerNavigation__verticalScrollableDefault {
  position: relative
}
.DayPickerNavigation__bottom {
  height: auto
}
.DayPickerNavigation__bottomDefault {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between
}
.DayPickerNavigation_button {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 0;
  padding: 0;
  margin: 0
}
.DayPickerNavigation_button__default {
  border: 1px solid #e4e7e7;
  background-color: #fff;
  color: #757575
}
.DayPickerNavigation_button__default:focus,
.DayPickerNavigation_button__default:hover {
  border: 1px solid #c4c4c4
}
.DayPickerNavigation_button__default:active {
  background: #f2f2f2
}
.DayPickerNavigation_button__disabled {
  cursor: default;
  border: 1px solid #f2f2f2
}
.DayPickerNavigation_button__disabled:focus,
.DayPickerNavigation_button__disabled:hover {
  border: 1px solid #f2f2f2
}
.DayPickerNavigation_button__disabled:active {
  background: 0 0
}
.DayPickerNavigation_button__horizontalDefault {
  position: absolute;
  top: 18px;
  line-height: .78;
  border-radius: 3px;
  padding: 6px 9px
}
.DayPickerNavigation_bottomButton__horizontalDefault {
  position: static;
  margin: -10px 22px 30px
}
.DayPickerNavigation_leftButton__horizontalDefault {
  left: 22px
}
.DayPickerNavigation_rightButton__horizontalDefault {
  right: 22px
}
.DayPickerNavigation_button__verticalDefault {
  padding: 5px;
  background: #fff;
  box-shadow: 0 0 5px 2px rgba(0,0,0,.1);
  position: relative;
  display: inline-block;
  text-align: center;
  height: 100%;
  width: 50%
}
.DayPickerNavigation_nextButton__verticalDefault {
  border-left: 0
}
.DayPickerNavigation_nextButton__verticalScrollableDefault {
  width: 100%
}
.DayPickerNavigation_svg__horizontal {
  height: 19px;
  width: 19px;
  fill: #82888a;
  display: block
}
.DayPickerNavigation_svg__vertical {
  height: 42px;
  width: 42px;
  fill: #484848
}
.DayPickerNavigation_svg__disabled {
  fill: #f2f2f2
}
.DayPicker {
  background: #fff;
  position: relative;
  text-align: left
}
.DayPicker__horizontal {
  background: #fff
}
.DayPicker__verticalScrollable {
  height: 100%
}
.DayPicker__hidden {
  visibility: hidden
}
.DayPicker__withBorder {
  box-shadow: 0 2px 6px rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.07);
  border-radius: 3px
}
.DayPicker_portal__horizontal {
  box-shadow: none;
  position: absolute;
  left: 50%;
  top: 50%
}
.DayPicker_portal__vertical {
  position: initial
}
.DayPicker_focusRegion {
  outline: 0
}
.DayPicker_calendarInfo__horizontal,
.DayPicker_wrapper__horizontal {
  display: inline-block;
  vertical-align: top
}
.DayPicker_weekHeaders {
  position: relative
}
.DayPicker_weekHeaders__horizontal {
  margin-left: 9px
}
.DayPicker_weekHeader {
  color: #757575;
  position: absolute;
  top: 62px;
  z-index: 2;
  text-align: left
}
.DayPicker_weekHeader__vertical {
  left: 50%
}
.DayPicker_weekHeader__verticalScrollable {
  top: 0;
  display: table-row;
  border-bottom: 1px solid #dbdbdb;
  background: #fff;
  margin-left: 0;
  left: 0;
  width: 100%;
  text-align: center
}
.DayPicker_weekHeader_ul {
  list-style: none;
  margin: 1px 0;
  padding-left: 0;
  padding-right: 0;
  font-size: 14px
}
.DayPicker_weekHeader_li {
  display: inline-block;
  text-align: center
}
.DayPicker_transitionContainer {
  position: relative;
  overflow: hidden;
  border-radius: 3px
}
.DayPicker_transitionContainer__horizontal {
  -webkit-transition: height .2s ease-in-out;
  -moz-transition: height .2s ease-in-out;
  transition: height .2s ease-in-out
}
.DayPicker_transitionContainer__vertical {
  width: 100%
}
.DayPicker_transitionContainer__verticalScrollable {
  padding-top: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow-y: scroll
}
.DateInput {
  margin: 0;
  padding: 0;
  background: #fff;
  position: relative;
  display: inline-block;
  width: 130px;
  vertical-align: middle
}
.DateInput__small {
  width: 97px
}
.DateInput__block {
  width: 100%
}
.DateInput__disabled {
  background: #f2f2f2;
  color: #dbdbdb
}
.DateInput_input {
  font-weight: 200;
  font-size: 19px;
  line-height: 24px;
  color: #484848;
  background-color: #fff;
  width: 100%;
  padding: 11px 11px 9px;
  border: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 2px solid transparent;
  border-left: 0;
  border-radius: 0
}
.DateInput_input__small {
  font-size: 15px;
  line-height: 18px;
  letter-spacing: .2px;
  padding: 7px 7px 5px
}
.DateInput_input__regular {
  font-weight: auto
}
.DateInput_input__readOnly {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}
.DateInput_input__focused {
  outline: 0;
  background: #fff;
  border: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 2px solid #008489;
  border-left: 0
}
.DateInput_input__disabled {
  background: #f2f2f2;
  font-style: italic
}
.DateInput_screenReaderMessage {
  border: 0;
  clip: rect(0,0,0,0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px
}
.DateInput_fang {
  position: absolute;
  width: 20px;
  height: 10px;
  left: 22px;
  z-index: 2
}
.DateInput_fangShape {
  fill: #fff
}
.DateInput_fangStroke {
  stroke: #dbdbdb;
  fill: transparent
}
.DateRangePickerInput {
  background-color: #fff;
  display: inline-block
}
.DateRangePickerInput__disabled {
  background: #f2f2f2
}
.DateRangePickerInput__withBorder {
  border-radius: 2px;
  border: 1px solid #dbdbdb
}
.DateRangePickerInput__rtl {
  direction: rtl
}
.DateRangePickerInput__block {
  display: block
}
.DateRangePickerInput__showClearDates {
  padding-right: 30px
}
.DateRangePickerInput_arrow {
  display: inline-block;
  vertical-align: middle;
  color: #484848
}
.DateRangePickerInput_arrow_svg {
  vertical-align: middle;
  fill: #484848;
  height: 24px;
  width: 24px
}
.DateRangePickerInput_clearDates {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  padding: 10px;
  margin: 0 10px 0 5px;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%)
}
.DateRangePickerInput_clearDates__small {
  padding: 6px
}
.DateRangePickerInput_clearDates_default:focus,
.DateRangePickerInput_clearDates_default:hover {
  background: #dbdbdb;
  border-radius: 50%
}
.DateRangePickerInput_clearDates__hide {
  visibility: hidden
}
.DateRangePickerInput_clearDates_svg {
  fill: #82888a;
  height: 12px;
  width: 15px;
  vertical-align: middle
}
.DateRangePickerInput_clearDates_svg__small {
  height: 9px
}
.DateRangePickerInput_calendarIcon {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
  margin: 0 5px 0 10px
}
.DateRangePickerInput_calendarIcon_svg {
  fill: #82888a;
  height: 15px;
  width: 14px;
  vertical-align: middle
}
.DateRangePicker {
  position: relative;
  display: inline-block
}
.DateRangePicker__block {
  display: block
}
.DateRangePicker_picker {
  z-index: 1;
  background-color: #fff;
  position: absolute
}
.DateRangePicker_picker__rtl {
  direction: rtl
}
.DateRangePicker_picker__directionLeft {
  left: 0
}
.DateRangePicker_picker__directionRight {
  right: 0
}
.DateRangePicker_picker__portal {
  background-color: rgba(0,0,0,.3);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%
}
.DateRangePicker_picker__fullScreenPortal {
  background-color: #fff
}
.DateRangePicker_closeButton {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  z-index: 2
}
.DateRangePicker_closeButton:focus,
.DateRangePicker_closeButton:hover {
  color: darken(#cacccd,10%);
  text-decoration: none
}
.DateRangePicker_closeButton_svg {
  height: 15px;
  width: 15px;
  fill: #cacccd
}@charset "UTF-8";
/**
 * Base
 *
 * Styleguide base
 */
/**
 * Farben
 *
 * <div class="kss-color">
 *     <div class="kss-color__fill" style="background-image: linear-gradient(-32deg, #298452 0%, #3aa462 100%);"></div>
 *     `@include createGradientGreen`
 * </div>
 * <br><br>
 * <div class="kss-color">
 *     <div class="kss-color__fill" style="background-color: #18492b;"></div>
 *     `$colorPrimaryDark`
 * </div>
 * <div class="kss-color">
 *     <div class="kss-color__fill" style="background-color: #409560;"></div>
 *     `$colorPrimaryMedium`
 * </div>
 * <div class="kss-color">
 *     <div class="kss-color__fill" style="background-color: #afcc56;"></div>
 *     `$colorPrimaryLight`
 * </div>
 * <div class="kss-color">
 *     <div class="kss-color__fill" style="background-color: #dce9c8;"></div>
 *     `$colorPrimaryUltralight`
 * </div>
 * <br><br>
 * <div class="kss-color">
 *     <div class="kss-color__fill" style="background-color: #ce115d;"></div>
 *     `$colorAccent`
 * </div>
 * <div class="kss-color">
 *     <div class="kss-color__fill" style="background-color: #720A34;"></div>
 *     `$colorAccentDark`
 * </div>
 * <br><br>
 * <div class="kss-color">
 *     <div class="kss-color__fill" style="background-color: #77A2D4;"></div>
 *     `$colorAccentBlue`
 * </div>
 * <br><br>
 * <div class="kss-color">
 *     <div class="kss-color__fill" style="background-color: #4a4a4a;"></div>
 *     `$colorMonoDark`
 * </div>
 * <div class="kss-color">
 *     <div class="kss-color__fill" style="background-color: #9b9b9b;"></div>
 *     `$colorMonoMedium`
 * </div>
 * <div class="kss-color">
 *     <div class="kss-color__fill" style="background-color: #f8f8f8;"></div>
 *     `$colorMonoLight`
 * </div>
 * <div class="kss-color">
 *     <div class="kss-color__fill" style="background-color: #eaeaea;"></div>
 *     `$colorMonoMediumLight`
 * </div>
 * <div class="kss-color">
 *     <div class="kss-color__fill" style="background-color: #ffffff;"></div>
 *     `$colorMonoWhite`
 * </div>
 * <br><br>
 * <div class="kss-color">
 *     <div class="kss-color__fill" style="background-color: #fd6d6d;"></div>
 *     `$colorSystemError`
 * </div>
 *
 * Styleguide base.colors
 */
/**
 * Fonts
 *
 * Schriftfamilie | Schnitt | Sass | Beispiel
 * --- | --- | --- | ---
 * Noto Sans | Normal | `$fontPrimary;` | <span style="font-family: 'Noto Sans', sans-serif">Grumpy wizards make toxic brew for the evil Queen and Jack.</span>
 * &nbsp; | Bold | `$fontPrimary; font-weight: 700;` | <span style="font-family: 'Noto Sans', sans-serif; font-weight: 700">Grumpy wizards make toxic brew for the evil Queen and Jack.</span>
 * UrgeText-SemiBold | Semibold | `$fontSecondary;` | <span style="font-family: 'UrgeText-SemiBold', sans-serif; ">Grumpy wizards make toxic brew for the evil Queen and Jack.</span>
 *
 * Styleguide base.fonts
 */
.kss-color {
  margin-bottom: 5px;
  padding: 5px;
  border: 1px solid #ccc;
  display: inline-block;
  text-align: center; }
  .kss-color__fill {
    width: 220px;
    height: 160px;
    margin-bottom: 5px; }

html {
  font-size: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

body {
  margin: 0;
  color: #4a4a4a;
  font-family: sans-serif;
  font-size: 15px;
  position: relative;
  overflow-x: hidden; }
  .fl body {
    font-family: "Noto Sans", sans-serif; }
  body.has-pattern {
    background-image: url(data:image/svg+xml;base64,phn2zyb3awr0ad0imtmzmsigagvpz2h0psixmtg3iib2awv3qm94psiwidagmtmzmsaxmtg3iib4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmcipjxnigzpbgw9iingquzbrkeiigzpbgwtcnvszt0izxzlbm9kzci+phbhdgggzd0ittg1mc40nya1mtyuotqxbc0yni45odutmjkumzy2yy0zljmxmy0zljmxni0zljmxmy04lja1miawltexljm2oem4ntcumsa0ndeumtu3idg5my4woca0mjygoti1lji3mia0mjzjntyumzm4idagotkuodk0idmwljmxnca5os44otqgotiuodm2idagmjcundcxlte3ljk5idu5ljiwni0zos4yotugodguntcztdkync44idy4os44mjroodmunzk3yzqumjygmca4lja0ocazljc5idgumdq4idgumduydjq0lja1yzagnc4ynjitmy43odcgoc4wntitoc4wndggoc4wntjiodmzljljltqumjygmc04lja0oc0zljc5ltgumdq4ltgumduydi0xmc40mmmwltuumjexideunditmtaundixidqunzm0lte0ljy4ngwxmdcuotqxlte0ny4zmdzjmjauodmxlti5ljm2niaync4xndutndyunde3idi0lje0ns01mi41nzugmc0xni4xmdqtoc41mjetmzmunjmtmzyuoti3ltmzljyzlte4ljkznyawltqwlji0msaxmi4zmtytnjmuotezidmzljyzltmumze0idmumze2ltgumdq4idiuodqyltexljm2miawem0zntuuntq1ltkwljq2n2m5ns42mzigmcaxmjquotg1idk3lja5ocaxmjquotg1ide2mi45mzygmca2ny43mzitmjkumzuzide2my40ms0xmjquotg1ide2my40ms05ns4xntkgmc0xmjqumdm4ltk1ljy3oc0xmjqumdm4lte2my40msawlty1ljgzocayoc44oc0xnjiuotm2ideync4wmzgtmtyyljkznnptmcaynjkumdm0yzuylju1idagnjaumti1ltgwljuymsa2mc4xmjutmta2lja5ocawlti1lju3ny03lju3nc0xmduumtutnjaumti1ltewns4xns01mi4wnzcgmc02mc4xmjugnzkuntczltywljeynsaxmduumtugmcayns41nzcgoc4wndggmta2lja5oca2mc4xmjugmta2lja5ohpnoduwljq3msa5nteumtiybc0yni45odytmjkumzy3yy0zljmxmy0zljmxns0zljmxmy04lja1miawltexljm2nyazmy42mtqtmzuumdugnjkuntk0ltuwljiwocaxmdeunzg3ltuwljiwoca1ni4zmzggmca5os44otqgmzaumze0idk5ljg5nca5mi44mzygmcayny40nzitmtcuotkgntkumja3ltm5lji5nsa4oc41nznsltyxlja3mia4mi40mtvoodmunzk3yzqumjygmca4lja0ocazljc5idgumdq4idgumduydjq0lja1yzagnc4ynjmtmy43odcgoc4wntitoc4wndggoc4wntjiodmzljljltqumjygmc04lja0oc0zljc5ltgumdq4ltgumduydi0xmc40mmmwltuumjegms40mi0xmc40mia0ljcznc0xnc42odrsmta3ljk0ms0xndcumza1yziwljgzms0yos4znjcgmjqumtq1ltq2ljqxocaync4xndutntiuntc1idatmtyumta1ltguntixltmzljyzltm2ljkyny0zmy42my0xoc45mzcgmc00mc4yndegmtiumze1ltyzljkxmyazmy42my0zljmxncazljmxns04lja0ocayljg0ms0xms4znjigmhpnnjquntm4ideyljcxn1yynjmuoddomtexljm1yzqumdkgmca3ljcyniazljyzmya3ljcynia3ljcydjqzljzjmca0lja4oc0zljyznia3ljcymi03ljcynia3ljcymkg3ljcynmmtnc4wosawltcunzi2ltmunjm0ltcunzi2ltcunzixvjeyljcxn2mwltqumdg4idmunjm2ltcunzixidcunzi2ltcunzixadq5lja4nwm0lja5idagny43mjcgmy42mzmgny43mjcgny43mnptmzg0lja0ncaxotguoti1ac01nc45otnjltqumdkgmc03ljcyny0zljyznc03ljcyny03ljcymxytndiunjkyyzatnc4wodcgmy42mzytny43mia3ljcyny03ljcyadexms44mdrjnc4wosawidcunzi2idmunjmzidcunzi2idcunzjwmjcyljvjmca0ljk5ni0xljgxoca5ljuzoc01ljq1myaxmy4xny0yos4wodggmjyumzqylty0ljuzoca0ms4zmy0xmteumzugndeumzmtmtixljm1idatmtu4lje2my05ns4znzutmtu4lje2my0xnjmunumymzgumtuzidk3lje5miaynzquoty3ljq1ncazotyumze1ljq1ngm0oc4xnzygmca4my4xnzigmtcumju4idexmi4ynia0ni4zmjugmy4xodegmy4xocazlje4msa4lje3nsawidexljm1ngwtmjkumdg4idmxljmzogmtmi43mjcgmi43mjutny4ynzigmi43mjutmtaunduzidatmtgunjm0lte1ljg5ni00oc4xnzytmjkumdy3ltcyljcxos0yos4wnjctodeumzuzidatotiunze2idc2ljmtotiunze2idewmi4xodggmcayns44odcgmteumzyzidewns44mia5mi43mtygmta1ljgyide3ljcyniawidqwljkwns02ljm1oca1mi4ynjctmtyumzv2ltqwljqyek02mzguntu5idg5ljq3yy45mdkgmjeumzq2idi3lji3idi5ljk3nsa1oc42mjkgndauodc1idq5lju0ide2ljgwncaxmtiunze0idm2ljc4nyaxmdgunjizidewnc45mtitmy4xodegnteunzc1ltq5lju0idkxlji4oc0xmtuuodk1idkxlji4oc00nc45otqgmc03os45os05ljk5mi0xmtyumzutmjgunjezltmunjm1lteuode2ltquotk5ltyuodeyltmumtgtmtaundq1bdiwljkwni0zos41mtnjms44mtgtmy42mzmgni44mtctns40nsaxmc40ntmtmy42mzmgmjgumtc4idezlje3idu2ljm1nyaymi43mdggodquotkgmjiunza4idi3ljcyncawidq3ljcyms0xms44mdggntauotazltmwljqzidmunjm1ltiyljcwoc0xos45otgtmzquotctntauotazltq0ljuwny00oc4xnzytmtquotg4ltexmi43mtqtmzaundmtmteyljcxnc05os40njmgmc01oc4xmzmgndmumtc3ltkyljy1idewmy4xny05mi42nsaxny4ynyawidu4ljyyosazljyzmyaxmdkumdc3idi1ljg4nyazljyzniaxljgxnya1ljq1nca2ljm1osazljyzniaxmc40ndzslte2ljgxniazos41mtnjlteuode4idqumdg3ltyumzyziduuota0ltewljq1mya0lju0ms0xoc42mzutny43mi01my4xnzytmjaundm3ltgwljktmjaundm3ltiylji3idatndiumjy3idcumjy3ltqzlje3niayos41mnoilz48cgf0acbkpsjnmti1mi43mdugmte4nwm0ljm5miawidgumjk1ltmuota2idgumjk1ltgum1y4njium2mwltqumzk0ltmuotazltgumy04lji5ns04ljnolte5ljuxn2mtns4znjcgmc0xmc43mzugms45ntmtmtqunjm4idquodgybc05ms4yndmgnzaunzljltmunde2idiuoti4ltqumzkxidcuodetms45ntigmteunze2bde5ljuxnyazmc43ntdjmi40ncazljkwnsa3ljmyidquodgyidexljcxidiuoti5bdm4lja2ltiwljk5m3yymjiunjjjmca0ljm5myazljkwmya4lji5osa4lji5nca4lji5owg0os43n3oiigzpbgwtcnvszt0ibm9uemvybyivpjwvzz48l3n2zz4kcgo=);
    background-repeat: no-repeat;
    background-position: center 200px; }
  body.no-scroll {
    overflow: hidden; }

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit; }

pre > code {
  background: none !important; }

.bkss-desc {
  padding: 0;
  border: none;
  font-style: normal;
  font-family: inherit; }

.bkss-copy {
  font-family: inherit; }

.l-bkss-main {
  max-width: 2200px; }

/*
Grid

Styleguide mixins.grid
*/
/*
Container

```markup
.classname {
    @include grid((
        gutter: $rasterfari__gutter,
        valign: top
    ));
}
```

Styleguide mixins.grid.1-container
*/
/*
Col

Use this mixin only as a first child of ```@include grid;```

```markup
.classname {
    @include grid__col((
        cols: 12,
        move: 0             // -Number to pull || Number to push 
    ));
}
```

Styleguide mixins.grid.2-col
*/
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0; }

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block; }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
  /* 1 */
  display: block; }

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px; }

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */ }

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */ }

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit; }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic; }

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000; }

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block; }

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none; }

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden; }

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */ }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible; }

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none; }

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */ }

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em; }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */ }

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto; }

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block; }

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item; }

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block; }

/**
 * Add the correct display in IE.
 */
template {
  display: none; }

/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none; }

.bdot {
  padding-left: 5px;
  text-decoration: none;
  color: #1fc2f4;
  font-family: arial;
  font-size: 32px;
  vertical-align: middle;
  line-height: 1; }
  .bdot span {
    visibility: hidden;
    font-size: 0;
    color: transparent; }

/**
 * Layout
 *
 * Styleguide layout
 */
/**
 * Flag
 *
 * Das Flag-Modul stellt standardmäßig ein Bild neben einem Text dar.
 *
 * <style>
 *     .flag--rev {
 *         margin-top: 80px;
 *     }
 * </style>
 *
 * .flag--top     - vertical alignment: top
 * .flag--bottom  - vertical alignment: bottom
 * .is-condensed   - weniger Gutter ($spacer / 2)
 *
 * Markup:
 * <div class="flag  {{modifier_class}}">
 *     <div class="flag__image">
 *         <img src="http://placehold.it/50x50" alt="">
 *     </div>
 *     <div class="flag__text  copy">
 *         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum modi fugit, doloribus quam, dolore id.
 *     </div>
 * </div>
 * <div class="flag  flag--rev  {{modifier_class}}">
 *     <div class="flag__text  copy">
 *         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum modi fugit, doloribus quam, dolore id.
 *     </div>
 *     <div class="flag__image">
 *         <img src="http://placehold.it/50x50" alt="">
 *     </div>
 * </div>
 *
 * Styleguide layout.Flag
 */
.flag {
  display: table; }
  .flag__image, .flag__text {
    display: table-cell;
    vertical-align: middle; }
    .flag--top .flag__image, .flag--top .flag__text {
      vertical-align: top; }
    .flag--bottom .flag__image, .flag--bottom .flag__text {
      vertical-align: bottom; }
  .flag__image {
    padding-right: 20px; }
    .flag--rev .flag__image {
      padding-right: 0;
      padding-left: 20px; }
    .is-condensed .flag__image {
      padding-right: 10px; }
      .flag--rev .is-condensed .flag__image {
        padding-right: 0;
        padding-left: 10px; }
    .flag__image img {
      max-width: none;
      display: block; }
  .flag__text {
    width: 100%; }

/*
Wrapper

<style>.__wrapper-content {
    width: 100%;
    background: lightblue;
    text-align: center;
    padding: 20px;
}</style>

```css
@include createWrapper((
    size?: string = default |â large,
    innerspace?: boolean true |â false
));
```
<div class="__wrapper"><div class="__wrapper-content">1440px</div></div>
<br>
<div class="__wrapper--large"><div class="__wrapper-content">2000px</div></div>

Styleguide layouts.wrapper
*/
.__wrapper {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px; }

.__wrapper--large {
  max-width: 1440px;
  margin: 0 auto;
  max-width: 2000px; }

/**
 * Media
 *
 * Styleguide media
 */
/*
Poster

Markup:
<div class="poster  js-poster" style="height: 400px">
    <picture class="poster__img">
        <source srcset="http://placehold.it/1280x400&text=Large%20Screens" media="(min-width: 64em)">
        <source srcset="http://placehold.it/800x400&text=Medium%20Screens" media="(min-width: 40em)">
        <img srcset="http://placehold.it/320x400&text=Default%20Image" alt="">
    </picture>
    <div class="poster__content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita fugit id, dicta eius nemo debitis saepe sequi! Aut expedita officiis, qui provident! Aspernatur, molestiae asperiores! Voluptatem sed, repellat suscipit ratione.</p>
    </div>
</div>

Styleguide media.poster
*/
.poster {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center; }
  .poster__img {
    height: 0; }
  .poster__content {
    position: relative;
    z-index: 1; }

/*
Fluid Media

Styleguide media.fluid
*/
/*
Fluid Images

Markup:
<img src="http://placehold.it/800x600" class="fluid">

Styleguide media.fluid.1
*/
.fluid {
  max-width: 100%; }

.fluid--full {
  width: 100%; }

/*
Cookie

.cookie--floating - Floating Position

Markup:
<div class="cookie  {{modifier_class}}" id="js-cookie">
    <div class="cookie__wrapper">
        <div class="cookie__text">Diese Webseite verwendet Cookies. Klicken Sie
            <a href="">hier</a> für mehr Informationen. Wenn Sie damit einverstanden sind, surfen Sie einfach weiter.</div>
        <div class="cookie__btn">
            <button id="js-cookie-close">Ok, verstanden</button>
        </div>
    </div>
</div>

Styleguide media.cookie
*/
.cookie {
  position: relative;
  text-align: center;
  background: #f0efec; }

.cookie--floating {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10; }

.cookie__wrapper {
  margin: 0 auto;
  display: inline-block;
  position: relative; }
  @media (min-width: 64em) {
    .cookie__wrapper {
      padding: 10px 0; } }

.cookie__wrapper > * {
  vertical-align: middle; }

.cookie__text {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 17px;
  margin: 10px 20px; }
  @media (min-width: 64em) {
    .cookie__text {
      display: inline-block;
      margin: 5px 20px;
      text-align: left; } }
  .cookie__text a {
    color: inherit; }

.cookie__btn {
  margin: 10px; }
  @media (min-width: 64em) {
    .cookie__btn {
      margin: 5px 20px;
      display: inline-block; } }

.cookie__btn button {
  min-width: 150px;
  padding: 10px 20px;
  border: 1px solid currentColor;
  border-radius: 0;
  display: inline-block;
  background-color: transparent;
  font-weight: 700;
  letter-spacing: 0.45px;
  line-height: 1.23;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: currentColor;
  font-size: 13px;
  -webkit-transition: background-color 0.3s ease-out;
  -o-transition: background-color 0.3s ease-out;
  transition: background-color 0.3s ease-out;
  cursor: pointer; }

.cookie__btn button:hover {
  background-color: inherit;
  outline: currentColor solid 1px; }

/*
Loader

Markup:
<div class="loader"></div>
<div style="padding: 10px; background: darkgray">
    <div class="loader  is-white"></div>
</div>

Styleguide media.loader
*/
.loader {
  width: 45px;
  height: 45px;
  display: inline-block;
  position: relative; }
  .loader:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(data:image/svg+xml;base64,phn2zyb4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmciihdpzhropsi0nsigagvpz2h0psi0nsi+phbhdgggzmlsbd0ii0qxrdfemsigzd0ittagmjiunwgyqzigmzmuodiyidexlje3oca0myaymi41idqzuzqzidmzljgymia0myaymi41idmzljgymiayidiyljugmmeymc40idiwljqgmcawidatmtiumtm0idmuotc1tdkumtgxidqumzy0qtiyljqgmjiuncawidagmsaymi41idbdmzquoti2idagndugmtaumdc0idq1idiyljvtmzquoti2idq1idiyljugndugmcaznc45mjygmcaymi41eiivpjwvc3znpgo=);
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transition: -webkit-transform ease-in-out 0.4s;
    transition: -webkit-transform ease-in-out 0.4s;
    -o-transition: transform ease-in-out 0.4s;
    transition: transform ease-in-out 0.4s;
    transition: transform ease-in-out 0.4s, -webkit-transform ease-in-out 0.4s;
    -webkit-animation: loading 0.8s linear infinite;
            animation: loading 0.8s linear infinite; }
  .loader.is-white:after {
    background-image: url(data:image/svg+xml;base64,phn2zyb4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmciihdpzhropsi0nsigagvpz2h0psi0nsi+phbhdgggzmlsbd0ii2zmzmzmziigzd0ittagmjiunwgyqzigmzmuodiyidexlje3oca0myaymi41idqzuzqzidmzljgymia0myaymi41idmzljgymiayidiyljugmmeymc40idiwljqgmcawidatmtiumtm0idmuotc1tdkumtgxidqumzy0qtiyljqgmjiuncawidagmsaymi41idbdmzquoti2idagndugmtaumdc0idq1idiyljvtmzquoti2idq1idiyljugndugmcaznc45mjygmcaymi41eiivpjwvc3znpgo=); }
  .loader--small {
    width: 30px;
    height: 30px; }

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes loading {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

/**
 * Icons
 *
 * Styleguide icons
 */
/*
Icons

Styleguide icons.icon
*/
.icon {
  width: 2em;
  height: 2em;
  display: inline-block;
  position: relative;
  top: -0.0625em;
  fill: currentColor;
  vertical-align: middle; }

/*
Download

Markup:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M6 19.167h12V17.5H6v1.667zM18 10h-3.429V5H9.43v5H6l6 5.833L18 10z"/></svg>

Styleguide icons.icon.download
*/
/*
Facebook

Markup:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M17 2v4h-2c-.69 0-1 .81-1 1.5V10h3v4h-3v8h-4v-8H7v-4h3V6a4 4 0 0 1 4-4h3z"/></svg>

Styleguide icons.icon.facebook
*/
/*
Instagram

Markup:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2zm-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6zm9.65 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/></svg>

Styleguide icons.icon.instagram
*/
/*
Twitter

Markup:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M22.92 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.83 4.5 17.72 4 16.46 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98-3.56-.18-6.73-1.89-8.84-4.48-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.9 20.29 6.16 21 8.58 21c7.88 0 12.21-6.54 12.21-12.21 0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/></svg>

Styleguide icons.icon.twitter
*/
/*
YouTube

Markup:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M10 16.5v-9l6 4.5-6 4.5zM20 4.4c-.6-.2-4.3-.4-8-.4s-7.4.19-8 .38C2.44 4.9 2 8.4 2 12c0 3.59.44 7.1 2 7.61.6.2 4.3.39 8 .39s7.4-.19 8-.39c1.56-.51 2-4.02 2-7.61 0-3.6-.44-7.09-2-7.6z"/></svg>

Styleguide icons.icon.youtube
*/
/*
Shovel

Markup:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M6.633 3.084c-.61.353-1.22.704-1.83 1.058-.167.097-.371.206-.243.417.1.166.287.099.443.009 1.221-.704 2.442-1.409 3.66-2.116.156-.09.297-.217.185-.391-.113-.175-.286-.089-.439-.001-.592.34-1.184.683-1.776 1.024zm7.913 12.87c-.205-.355-.425-.7-.609-1.065-.152-.302-.341-.24-.595-.088-.24.143-.423.252-.238.554.438.714.847 1.445 1.261 2.173.148.26.379.373.664.215.29-.16.31-.418.16-.676-.218-.37-.43-.742-.643-1.113zm-4.132-5.738c.695 1.203 1.386 2.409 2.09 3.607.085.146.117.445.41.305.35-.165.112-.382.018-.546a1830.025 1830.025 0 0 0-4.139-7.169c-.1-.174-.203-.468-.49-.281-.234.152-.033.363.059.523.68 1.19 1.368 2.374 2.052 3.561zm-.877-4.36l.12-.128c-.378-.656-.762-1.309-1.133-1.969-.143-.255-.325-.158-.518-.048-.537.309-1.075.616-1.608.931-.14.082-.364.177-.263.362.382.704.794 1.392 1.195 2.086l.157-.048c-.2-.624-.26-1.215.468-1.625.71-.398 1.157-.016 1.582.44zm8.415 10.561c-.182-.314-.287-.503-.398-.687-.445-.742-.278-.795-1.184-.276-.804.46-.803.462-.404 1.236.327.635.128 1.309-.499 1.692-.657.4-1.375.272-1.793-.33-.111-.16-.198-.338-.3-.506-.06-.1-.138-.24-.277-.165-.452.242-.967.441-1.307.79-.24.248.176.544.302.814.14.3.326.58.494.868.921 1.587 2.532 2.252 4.492 1.882.255-.048.356-.196.485-.361 1.341-1.717 1.464-3.411.389-4.957zM7.99 1.396c.649-.362 1.166-.325 1.536.086.327.363.286.873-.177 1.406-.191.22-.122.357-.02.531.334.577.663 1.157 1.001 1.731.258.438.294.864-.192 1.235-.26.2-.193.365-.075.57 1.249 2.154 2.439 4.346 3.775 6.445.353.555.835 1.061 1.18 1.645.128.216.289.156.472.05.427-.247.851-.499 1.284-.734.416-.226.826-.189 1.049.17.506.814 1.073 1.606 1.401 2.512.544 1.505.23 2.946-.708 4.385-.513.788-1.064 1.12-2.01 1.17-2.139.116-3.688-.634-4.697-2.34-.26-.44-.512-.883-.765-1.325-.42-.734-.314-1.082.464-1.537.314-.184.625-.378.948-.545.29-.15.32-.293.199-.576-1.216-2.853-2.922-5.435-4.424-8.13-.155-.279-.278-.467-.706-.289-.475.199-.789-.083-1.003-.449-.338-.574-.673-1.15-1-1.732-.125-.22-.238-.368-.575-.264-.572.176-.981-.05-1.197-.54-.21-.48-.027-.978.51-1.315.636-.398 1.297-.756 1.947-1.131.594-.345 1.184-.695 1.783-1.03z"/></svg>

Styleguide icons.icon.shovel
*/
/*
Map

Markup:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M15.774 19.405l-.27-.37c-.103.08-.17.125-.17.125l.245.388c.003-.002.078-.052.195-.143zM8.911 7.013l-.047-.46a2.823 2.823 0 0 1 .487-.01l-.029.462a2.387 2.387 0 0 0-.411.008zm1.204.19a2.157 2.157 0 0 0-.386-.135l.105-.45c.161.04.318.095.465.163l-.184.422zm-1.984.043l-.205-.411c.143-.076.297-.139.458-.186l.125.444c-.133.04-.26.091-.378.153zm2.622.441a1.697 1.697 0 0 0-.29-.277l.265-.373c.137.103.26.221.367.351l-.342.3zm-3.389.008l-.238-.393c.119-.076.249-.155.398-.24l.22.403a9.321 9.321 0 0 0-.38.23zm-.688.526l-.305-.34c.108-.103.232-.207.368-.31l.266.373a3.797 3.797 0 0 0-.329.277zm4.417.189a1.717 1.717 0 0 0-.126-.384l.404-.202c.072.153.127.318.162.49l-.44.096zm-4.886.467l-.42-.168c.059-.153.144-.307.253-.457l.359.28c-.085.115-.15.23-.192.345zm5.327.454l-.439-.099c.012-.058.022-.116.027-.173.008-.08.012-.16.012-.237h.45c0 .092-.006.187-.015.283a2.02 2.02 0 0 1-.035.226zm-5.737.45a1.531 1.531 0 0 1-.106-.533l.45-.006c0 .12.026.244.073.368l-.417.17zm5.346.469l-.379-.25c.08-.128.148-.255.201-.376l.41.19c-.063.143-.141.29-.232.436zm-4.782.36a3.116 3.116 0 0 1-.317-.377l.363-.272c.074.105.165.213.27.32l-.316.329zm4.2.399l-.33-.315c.103-.114.198-.227.284-.338l.351.289c-.092.12-.195.242-.305.364zm-3.47.209a6.289 6.289 0 0 1-.375-.285l.28-.362c.106.088.223.177.348.265l-.253.382zm2.803.45l-.295-.349c.114-.102.224-.205.325-.305l.31.334a9.963 9.963 0 0 1-.34.32zm-2.016.042c-.14-.078-.273-.157-.398-.235l.232-.396c.12.074.248.15.382.225l-.216.406zm.815.423c-.14-.067-.279-.136-.41-.204l.202-.414c.127.066.261.133.399.2l-.19.418zm.833.377a22.22 22.22 0 0 1-.418-.183l.045-.105-.242-.332c.12-.093.238-.187.35-.28l.28.361-.034.03.19.082-.171.427zm-1.09.294l-.25-.385c.124-.086.248-.173.366-.26l.26.378c-.122.089-.249.179-.377.267zm1.933.05a29.6 29.6 0 0 1-.423-.169l.165-.43c.134.054.274.11.417.165l-.159.433zm.852.316a35.982 35.982 0 0 1-.427-.156l.153-.435.421.154-.147.437zm-3.555.137l-.232-.397c.126-.078.253-.159.379-.24l.24.39c-.128.084-.258.167-.387.247zm4.412.158c-.146-.048-.29-.097-.43-.145l.143-.439c.139.048.28.096.425.144l-.138.44zm.862.279l-.431-.137.134-.442.428.136-.13.443zm.85.276a15.969 15.969 0 0 0-.421-.142l.134-.441c.148.047.294.096.433.146l-.145.437zm.827.324c-.131-.057-.27-.114-.41-.17l.159-.432c.146.057.29.116.425.175l-.174.427zm.79.39a7.726 7.726 0 0 0-.39-.205l.194-.418c.144.071.282.144.412.217l-.217.406zm.72.484a4.595 4.595 0 0 0-.348-.256l.244-.389c.137.092.266.186.383.282l-.278.363zm.578.612a2.465 2.465 0 0 0-.263-.324l.32-.324c.12.124.225.254.313.385l-.37.263zm.284.747a1.521 1.521 0 0 0-.094-.387l.417-.17c.064.164.106.335.124.507l-.447.05zm.3.967l-.418-.17c.051-.134.088-.267.108-.397l.443.073a2.4 2.4 0 0 1-.133.494zm-.493.852l-.352-.287a3.49 3.49 0 0 0 .242-.356l.384.24c-.079.134-.17.27-.274.403zm-.65.698l-.297-.347c.11-.1.216-.204.313-.307l.323.321a5.84 5.84 0 0 1-.34.333zm-8.874-5.55l-.221-.403-.191.11.21.408c.004-.002.076-.042.202-.115zm11.867-.98c-.105-.083-.253-.068-.35.034l-.494.51c-.038.038-.038.038-.076 0-.169-.175-.337-.35-.507-.523a.248.248 0 0 0-.367.004c-.086.089-.09.258.014.36.176.173.344.354.517.53.025.024.023.037 0 .06-.17.173-.339.348-.508.522-.059.062-.095.134-.083.222.015.106.07.183.173.217.1.032.185.004.259-.072.17-.176.342-.351.512-.528.023-.024.035-.023.057 0 .171.18.345.356.517.534.064.066.14.09.229.073.127-.025.215-.16.194-.291a.31.31 0 0 0-.095-.17l-.494-.508c-.022-.022-.024-.034-.001-.058l.527-.541a.233.233 0 0 0 .07-.172.251.251 0 0 0-.094-.204zm-5.47-5.579c-.106-.082-.254-.067-.352.035l-.493.51c-.038.038-.038.038-.075 0-.17-.175-.338-.35-.508-.523a.248.248 0 0 0-.367.004c-.086.09-.09.258.014.36.176.173.344.354.517.53.025.024.024.037 0 .06l-.508.523c-.059.06-.095.133-.083.22.015.107.07.184.173.218.1.032.185.004.259-.072.17-.176.342-.351.512-.528.023-.024.035-.023.057 0l.517.534c.064.066.14.09.229.073.127-.025.215-.16.194-.291a.31.31 0 0 0-.095-.17l-.494-.508c-.022-.022-.024-.034 0-.058l.526-.541a.233.233 0 0 0 .07-.172.251.251 0 0 0-.093-.204zM7.344 12.88c-.106-.083-.253-.067-.35.035l-.495.509c-.037.039-.037.039-.075 0-.17-.174-.338-.349-.508-.522a.248.248 0 0 0-.366.003c-.087.09-.09.259.014.361.175.173.344.353.517.53.025.024.023.036 0 .06-.17.173-.34.348-.508.522-.06.061-.095.134-.083.221.014.106.07.184.172.217.1.033.186.005.26-.07l.512-.53c.022-.023.034-.022.056 0 .172.18.345.357.518.535.064.066.14.09.228.073.128-.025.216-.16.195-.292a.309.309 0 0 0-.095-.169l-.495-.508c-.022-.022-.023-.035 0-.058.176-.18.351-.36.526-.542a.233.233 0 0 0 .07-.17.251.251 0 0 0-.093-.205zm-3.57-1.84c0 2.294 0 4.59-.002 6.884 0 .064.017.098.075.127 1.344.69 2.688 1.383 4.032 2.076.045.023.08.025.126 0l4.294-2.212a.382.382 0 0 1 .356-.013l1.09.515 1.443.685 2.175 1.03c.041.02.072.02.11-.002.329-.186.658-.369.987-.553l1.525-.858c.386-.217.771-.436 1.16-.65.068-.037.084-.08.084-.153-.002-4.578-.002-9.156-.002-13.734v-.049c.003-.05-.012-.057-.055-.033l-1.53.86-2.015 1.129a.372.372 0 0 1-.35.018c-.32-.148-.637-.301-.955-.453-.338-.16-.675-.323-1.013-.484l-1.724-.82c-.341-.163-.683-.324-1.024-.488-.04-.02-.072-.016-.111.004-.485.253-.97.504-1.456.755-.944.487-1.889.972-2.831 1.462a.45.45 0 0 1-.45-.002C6.43 5.417 5.146 4.756 3.86 4.094c-.087-.045-.087-.045-.087.053v6.891zM3 10.827V3.407c0-.241.176-.417.407-.407.063.003.12.028.175.057 1.432.737 2.863 1.474 4.293 2.212a.122.122 0 0 0 .127 0l4.275-2.205a.422.422 0 0 1 .405-.01c.387.187.777.37 1.166.553l1.73.82 1.123.532.678.321c.03.014.053.014.083-.003.382-.216.765-.43 1.148-.645l1.563-.877.997-.558c.079-.044.156-.09.236-.133.152-.083.302-.08.442.03.108.084.145.205.15.34v.068L22 18.171c0 .22-.082.368-.274.474-.722.4-1.44.808-2.16 1.212l-1.39.78-.551.308a.388.388 0 0 1-.383.006l-1.853-.883-1.214-.58c-.541-.258-1.083-.516-1.625-.776-.04-.019-.068-.003-.1.013l-1.774.915c-.84.434-1.68.867-2.52 1.303a.43.43 0 0 1-.426 0c-1.498-.773-2.996-1.544-4.495-2.315A.403.403 0 0 1 3 18.236v-7.408z"/></svg>

Styleguide icons.icon.map
*/
/*
Gallery

Markup:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><g transform="rotate(-5 33.904 -12.904)"><path d="M1 5.7a.3.3 0 0 0-.3.3v11a.3.3 0 0 0 .3.3h18a.3.3 0 0 0 .3-.3V6a.3.3 0 0 0-.3-.3H1zM1 5h18a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z"/><path d="M6.845 4.65h6.31L10 1.495 6.845 4.65zM10 .505l4.845 4.845h-9.69L10 .505z"/><circle cx="10" cy="1" r="1"/><path d="M5 13.495l-3.753 3.752-.494-.494L5 12.505l1.976 1.977 5.018-6.021 7.269 8.309-.526.46-6.731-7.691-4.982 5.979zM4 10.35a1.35 1.35 0 1 1 0-2.7 1.35 1.35 0 0 1 0 2.7zm0-.7a.65.65 0 1 0 0-1.3.65.65 0 0 0 0 1.3z"/></g></svg>

Styleguide icons.icon.gallery
*/
/*
Micro

Markup:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M12.031 10.112a.3.3 0 0 0 .056.362c.195.205.392.409.596.605.133.129.294.134.424.004a76.18 76.18 0 0 0 1.203-1.225c.126-.131.12-.301-.003-.434-.194-.207-.392-.409-.595-.606-.13-.126-.308-.123-.426-.007-.126.124-.127.302.004.447.094.105.195.205.297.304.06.058.059.102-.002.161-.135.132-.264.27-.397.404-.29.296-.29.296-.579.004-.086-.088-.167-.188-.308-.182-.12.002-.215.05-.27.163m4.758-.174c.167-.028.333-.06.501-.084.127-.019.118-.069.04-.143-.027-.024-.05-.05-.076-.075l-3.832-3.91c-.024-.024-.039-.07-.078-.062-.05.01-.046.064-.052.103-.027.177-.047.354-.078.53-.021.12.023.2.104.283 1.061 1.077 2.12 2.156 3.177 3.237.085.087.167.148.294.121m2.394-.627c.002-.182-.112-.268-.206-.363-1.63-1.667-3.262-3.333-4.894-4.998-.12-.123-.298-.139-.428-.027-.125.108-.246.22-.36.34-.14.144-.14.33-.002.477.088.095.19.176.281.268.919.934 1.836 1.87 2.754 2.805.65.661 1.3 1.322 1.948 1.985.117.12.25.208.402.101.182-.128.335-.296.469-.478.026-.036.03-.088.036-.11m-2.52-6.688c-.681.008-1.39.306-2.015.835-.086.072-.087.12-.007.195.133.126.258.26.386.391 1.435 1.463 2.871 2.924 4.302 4.39.117.12.177.117.278-.014.307-.4.545-.832.671-1.325.57-2.226-1.18-4.476-3.616-4.472m-.645 7.595c-.037-.04-.075-.085-.116-.127-.946-.966-1.895-1.93-2.838-2.899-.114-.117-.171-.117-.276.014-.85 1.063-1.707 2.12-2.562 3.178-1.733 2.144-3.465 4.289-5.2 6.43-.084.105-.09.166.01.263.382.377.762.758 1.13 1.15.124.132.198.132.336.015 2.06-1.737 4.124-3.467 6.187-5.199l3.206-2.69c.045-.037.099-.067.123-.135m-1.322 11.287c-.965-.005-1.9-.181-2.785-.574-1.152-.511-2.356-.615-3.593-.542-.923.055-1.763.403-2.61.731-.296.114-.594.222-.887.341a1.542 1.542 0 0 1-.864.075c-.438-.077-.743-.342-.887-.774-.151-.454-.052-.864.272-1.205.419-.442.85-.871 1.276-1.306.091-.092.18-.188.274-.277.068-.064.062-.113-.003-.176-.168-.166-.332-.336-.497-.506-.248-.255-.253-.356-.026-.637.919-1.137 1.84-2.272 2.758-3.41l5.376-6.652a.403.403 0 0 0 .1-.257c.009-.372.114-.728.197-1.087.017-.072.02-.13-.023-.2-.266-.431-.243-.814.086-1.196a4.8 4.8 0 0 1 .483-.467.598.598 0 0 1 .422-.152c.185.011.302-.078.428-.192 1.99-1.798 4.815-1.11 6.082.855.746 1.156.942 2.41.473 3.736a4.026 4.026 0 0 1-.85 1.387c-.073.079-.122.157-.104.268.002.012 0 .024 0 .036-.024.518-.694 1.208-1.203 1.238a.86.86 0 0 1-.563-.165c-.074-.053-.138-.07-.225-.04a4.103 4.103 0 0 1-1.068.2.407.407 0 0 0-.25.105c-.481.407-.965.811-1.448 1.216l-8.41 7.062c-.288.241-.383.238-.652-.034-.153-.156-.31-.309-.458-.47-.074-.08-.126-.096-.212-.008-.505.522-1.016 1.038-1.523 1.559a.53.53 0 0 0-.123.608c.093.226.273.331.51.344.18.009.348-.022.515-.087.623-.242 1.246-.487 1.874-.716 1.061-.388 2.157-.44 3.271-.348.842.07 1.636.292 2.42.609 1.778.718 3.544.64 5.284-.162.794-.366 1.592-.723 2.39-1.082.2-.09.375-.03.446.141.069.168-.003.325-.191.42-.037.02-.075.036-.112.053l-2.422 1.096a7.147 7.147 0 0 1-2.948.642"/></svg>

Styleguide icons.icon.micro
*/
/*
Lamp

Markup:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M11.89 12.903c-.294-.287-.586-.575-.88-.86-.112-.107-.235-.196-.405-.13-.253.096-.3.368-.092.575.33.33.663.658 1.002.98a.418.418 0 0 1 .145.334c-.005 1.119-.003 2.238-.003 3.357 0 .439 0 .439.455.439.229 0 .23 0 .23-.228 0-1.2 0-2.402-.003-3.603a.34.34 0 0 1 .115-.27c.33-.315.654-.637.98-.956a.729.729 0 0 0 .138-.167.315.315 0 0 0-.126-.437c-.149-.084-.292-.055-.45.099-.326.319-.65.64-.987.973-.052-.045-.087-.074-.12-.106zm-.418 7.849c.16.208.345.298.573.28a.594.594 0 0 0 .475-.28h-1.048zm2.44-1.881h-3.828v.838c.001.281.098.376.389.376h2.108c.34 0 .681.002 1.022-.002.17-.002.3-.1.305-.25.01-.317.003-.634.003-.962zm-.02-.675c.033-.068.022-.125.022-.18 0-.437-.002-.873.001-1.31.003-.44.11-.85.365-1.22.221-.321.499-.594.77-.873.341-.352.66-.724.836-1.182.438-1.136.395-2.264-.156-3.352-.866-1.709-2.778-2.592-4.674-2.152-1.462.34-2.457 1.23-2.986 2.61-.214.559-.267 1.14-.226 1.738.05.74.27 1.415.712 2.02.314.426.705.787 1.047 1.189.32.377.492.803.483 1.298-.008.416-.002.832 0 1.248 0 .054-.018.113.029.166h3.776zm-4.481.062c0-.488-.007-.976.002-1.464.006-.358-.124-.655-.357-.924-.333-.384-.704-.734-1.01-1.14a4.338 4.338 0 0 1-.842-2.076c-.113-.855-.044-1.688.288-2.49.526-1.273 1.446-2.166 2.745-2.683a4.609 4.609 0 0 1 1.746-.327c1.206.008 2.28.388 3.194 1.168a4.651 4.651 0 0 1 1.558 2.574c.14.617.14 1.24.043 1.863-.14.896-.578 1.637-1.212 2.28-.215.218-.43.435-.624.672a1.548 1.548 0 0 0-.354 1.012c0 1.006-.014 2.013.005 3.019.01.534-.443 1.048-1.029 1-.205-.018-.31.034-.407.235-.237.499-.673.744-1.231.713-.558-.031-.947-.329-1.149-.842-.038-.097-.091-.109-.175-.104-.305.017-.598-.01-.841-.22-.22-.189-.347-.422-.35-.71-.002-.52 0-1.038 0-1.556zM5.153 5.647a.35.35 0 1 1 .494-.494L7.2 6.705a.35.35 0 0 1-.495.495L5.153 5.647zm-2.202 4.9a.35.35 0 1 1 .098-.694l2.174.306a.35.35 0 1 1-.097.693l-2.175-.305zm15.763.699a.35.35 0 0 1-.228-.662l2.076-.715a.35.35 0 1 1 .228.662l-2.076.715zM11.85 3.012a.35.35 0 0 1 .7-.024l.076 2.194a.35.35 0 0 1-.7.025l-.076-2.195zm6.552 2.175a.35.35 0 1 1 .478.512l-1.606 1.497a.35.35 0 0 1-.478-.512l1.606-1.497z"/></svg>

Styleguide icons.icon.lamp
*/
/*
News

Markup:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M18.74 11.832c.482 0 .965.01 1.447-.004.285-.008.714.12.73-.324.017-.476-.424-.38-.727-.38-2.141-.002-4.283.004-6.424.007-.246 0-.394.114-.384.364.01.25.163.332.413.331 1.648-.007 3.296-.004 4.944-.004v.01zm-1.604 2.044l3.336-.001c.246 0 .454-.088.456-.359.001-.275-.207-.35-.455-.35-2.21 0-4.419 0-6.628-.002-.262 0-.486.066-.467.378.017.275.227.334.472.333 1.096-.003 2.191-.001 3.286-.001v.002zm-3.193-4.774c-.254 0-.546-.015-.561.327-.016.364.275.385.554.385l6.447-.002c.265 0 .538-.027.542-.355.004-.336-.27-.356-.535-.355-1.068.002-2.135 0-3.202 0h-3.245zm6.45 6.795c.266.001.533-.024.532-.359 0-.302-.247-.351-.501-.351-2.178 0-4.356 0-6.534-.002-.253 0-.499.042-.51.345-.012.342.256.366.522.366h3.245c1.082 0 2.163-.001 3.245.001zm.076 4.063c.247 0 .454-.076.458-.348.004-.274-.2-.358-.45-.357H13.945c-.274 0-.574 0-.563.37.01.336.297.335.554.335H20.47zm-.094-2.022c.262 0 .542-.021.55-.352.007-.338-.27-.358-.534-.358H6.378c-.257 0-.543-.002-.548.343-.006.338.27.362.533.366.131.002.263.001.395.001h13.617zM9.08 5.038c-.937 0-1.874 0-2.811.002-.249 0-.447.081-.44.364.006.254.191.334.422.338l.264.002h13.75c.089 0 .177.001.264-.003.238-.01.406-.116.399-.363-.006-.222-.16-.329-.381-.335a13.985 13.985 0 0 0-.395-.005H9.08zM20.418 7.77c.252 0 .503-.035.51-.341.005-.3-.234-.365-.492-.368l-.22-.001H6.553c-.16 0-.325.002-.48.037-.177.04-.261.177-.247.359.013.163.109.27.27.296.13.021.263.017.394.017h6.855l7.074.001zm-9.127 4.742h.002c0-.778-.01-1.556.006-2.334.005-.285-.096-.372-.38-.37-1.331.01-2.663.01-3.994 0-.271-.001-.4.068-.398.362.01 1.558.007 3.116.003 4.674 0 .225.062.346.322.345 1.376-.008 2.751-.007 4.127-.003.216.001.318-.064.316-.296-.01-.793-.004-1.585-.004-2.378zm.721-.012c0 .966-.005 1.932.003 2.898.003.346-.147.5-.5.5a1061.42 1061.42 0 0 0-5.226-.001c-.333 0-.48-.153-.48-.475.003-1.949.004-3.897.001-5.846 0-.323.145-.475.478-.474 1.743.004 3.485.004 5.227-.001.353-.001.503.153.5.499-.008.966-.003 1.933-.003 2.9zm-8.92-7.361c0-.296.12-.74-.349-.754-.483-.014-.37.434-.371.728-.007 4.937-.006 9.874-.002 14.81 0 .288-.084.702.37.693.444-.01.353-.422.354-.71.005-2.468.003-4.937.003-7.405 0-2.454.003-4.908-.004-7.362zm10.288-1.42l-8.303.001c-.617 0-.618.001-.618.615v15.68c0 .274.04.563-.094.81-.226.415-.046.46.336.459 5.447-.008 10.895-.005 16.343-.007.898 0 1.237-.345 1.238-1.242 0-5.256-.005-10.512.011-15.768.001-.443-.125-.559-.565-.556-2.782.018-5.565.01-8.348.009zM12 21.998c-3.016 0-6.033-.003-9.05.003-.652.001-1.214-.17-1.615-.709-.243-.326-.335-.694-.335-1.098.004-4.736.002-9.472.002-14.208 0-.073.001-.145.004-.217.01-.216.11-.369.34-.375.254-.006.358.161.37.392.006.13.003.26.003.39 0 4.65 0 9.3.002 13.949 0 .683.35 1.107.932 1.145.57.038 1.03-.343 1.079-.905.016-.187.008-.376.008-.563V3.773c0-.726.043-.772.76-.772h17.795c.653 0 .704.053.705.689l-.001 16.418c0 1.198-.681 1.883-1.904 1.886-3.031.009-6.063.003-9.094.003z"/></svg>

Styleguide icons.icon.news
*/
/*
Calendar

Markup:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M3.687 4.35V21c0 .193-.154.35-.344.35A.347.347 0 0 1 3 21V3.65h18.007c.19 0 .343.157.343.35 0 .193-.154.35-.343.35H3.687z"/><path d="M23 21.35c-.824 0-1.442-.24-1.838-.7H23v.7H7A2.35 2.35 0 0 1 4.65 19V4a.35.35 0 0 1 .7 0v15c0 .911.739 1.65 1.65 1.65h14.162c-.337-.393-.512-.947-.512-1.65V4a.35.35 0 1 1 .7 0v15c0 1.14.51 1.65 1.65 1.65v.7z"/><path d="M8.172 5.522v-.7a.65.65 0 1 0-.65-.65h-.7a1.35 1.35 0 1 1 1.35 1.35zm4 0v-.7a.65.65 0 1 0-.65-.65h-.7a1.35 1.35 0 1 1 1.35 1.35zm4 0v-.7a.65.65 0 1 0-.65-.65h-.7a1.35 1.35 0 1 1 1.35 1.35zM7 10h1v1H7zm0 2h1v1H7zm0 2h1v1H7zm0 2h1v1H7zm2-6h1v1H9zm0 2h1v1H9zm0 2h1v1H9zm0 2h1v1H9zm2-6h1v1h-1zm0 2h1v1h-1zm0 2h1v1h-1zm0 2h1v1h-1zm2-6h1v1h-1zm0 2h1v1h-1zm0 2h1v1h-1zm0 2h1v1h-1zm2-6h1v1h-1zm0 2h1v1h-1zm0 2h1v1h-1zm0 2h1v1h-1zm2-6h1v1h-1zm0 2h1v1h-1zm0 2h1v1h-1zm0 2h1v1h-1z"/></svg>

Styleguide icons.icon.calendar
*/
/*
Finish

Markup:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M2.35 3.35v17.678a.35.35 0 0 1-.7 0V2.65h20.7v18.378a.35.35 0 0 1-.7 0V3.35H2.35z"/><path d="M2 9.35v-.7h20v.7zM8.983 6.94h1.427c.043 0 .082.038.082.082v.462a.084.084 0 0 1-.082.082H8.082A.084.084 0 0 1 8 7.484v-.029c0-.053.014-.106.039-.154l1.383-2.487H8.14a.084.084 0 0 1-.082-.081v-.458c0-.044.038-.082.082-.082h2.207c.043 0 .082.038.082.082v.038a.348.348 0 0 1-.039.154L8.983 6.94zm2.906-1.701v2.245a.084.084 0 0 1-.082.082h-.491a.084.084 0 0 1-.082-.082V5.24c0-.044.038-.082.082-.082h.491c.044 0 .082.038.082.082zm-.694-.868c0-.207.16-.371.371-.371.207 0 .367.164.367.371a.357.357 0 0 1-.367.366.358.358 0 0 1-.37-.366zm3.542 1.788c0 .077-.004.154-.014.231 0 .049-.039.082-.087.082H13.21c.038.285.217.53.53.53a.985.985 0 0 0 .535-.168c.038-.024.086-.02.115.019l.222.304a.09.09 0 0 1-.014.12c-.27.207-.53.318-.858.318-.92 0-1.205-.718-1.205-1.238 0-.506.284-1.234 1.205-1.234.64 0 .997.41.997 1.036zm-1.508-.072h.863c-.005-.198-.073-.376-.352-.381-.27 0-.439.16-.511.38zM16 4.27v3.214a.084.084 0 0 1-.082.082h-.496a.084.084 0 0 1-.082-.082V4.27c0-.043.038-.082.082-.082h.496c.043 0 .082.039.082.082z"/></svg>

Styleguide icons.icon.finish
*/
/*
Info

Markup:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path fill="currentColor" fill-rule="evenodd" d="M23 11.853c.032 3.044-1.007 5.647-3.119 7.807-2.111 2.16-4.69 3.274-7.734 3.34-3.044.032-5.647-1.007-7.807-3.119-2.16-2.111-3.274-4.69-3.34-7.734C.969 9.103 2.008 6.5 4.12 4.34 6.23 2.18 8.809 1.066 11.853 1 14.897.969 17.5 2.008 19.66 4.12c2.16 2.111 3.274 4.69 3.34 7.734zM12.94 5.56c-.29-.29-.66-.435-1.112-.435-.451 0-.822.145-1.112.435-.29.29-.435.66-.435 1.112 0 .451.145.822.435 1.112.29.29.661.435 1.112.435.451 0 .822-.145 1.112-.435.29-.29.435-.661.435-1.112 0-.451-.145-.822-.435-1.112zm1.123 13.315v-.537h-1.118v-8.4H9.594v.586h1.117v7.814H9.594v.537h4.469z"/></svg>

Styleguide icons.icon.info
*/
/*
Download Icon

Styleguide icons.download-icon
*/
/*
Standard

Markup:
<div class="download-icon">
    <span>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon  download-icon__icon"><path d="M6 19.167h12V17.5H6v1.667zM18 10h-3.429V5H9.43v5H6l6 5.833L18 10z"/></svg>
    </span>
    <div class="download-icon__label">download</div>
    <a href="#0"></a>
</div>

Styleguide icons.download-icon.1
*/
.download-icon {
  display: inline-block;
  text-align: center;
  position: relative;
  color: #ce115d; }
  .download-icon span {
    width: 45px;
    height: 45px;
    display: inline-block;
    position: relative; }
    .download-icon span:after {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-image: url(data:image/svg+xml;base64,phn2zyb4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmciihdpzhropsi0nsigagvpz2h0psi0nsi+phbhdgggzmlsbd0ii0qxrdfemsigzd0ittagmjiunwgyqzigmzmuodiyidexlje3oca0myaymi41idqzuzqzidmzljgymia0myaymi41idmzljgymiayidiyljugmmeymc40idiwljqgmcawidatmtiumtm0idmuotc1tdkumtgxidqumzy0qtiyljqgmjiuncawidagmsaymi41idbdmzquoti2idagndugmtaumdc0idq1idiyljvtmzquoti2idq1idiyljugndugmcaznc45mjygmcaymi41eiivpjwvc3znpgo=);
      background-repeat: no-repeat;
      -webkit-transition: -webkit-transform ease-in-out 0.4s;
      transition: -webkit-transform ease-in-out 0.4s;
      -o-transition: transform ease-in-out 0.4s;
      transition: transform ease-in-out 0.4s;
      transition: transform ease-in-out 0.4s, -webkit-transform ease-in-out 0.4s; }
  .download-icon a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
  .download-icon:hover {
    cursor: pointer; }
    .download-icon:hover span:after {
      -webkit-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
              transform: rotate(360deg); }
  *:hover > .download-icon.include-parent-hover span:after {
    -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
            transform: rotate(360deg); }

.download-icon__icon {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -12px;
  margin-top: -12px; }

.download-icon__label {
  margin-top: 5px;
  font-size: 12px;
  color: #4a4a4a; }

/*
Mit Hover auf Parent

Markup:
<div style="background: rgba(180, 180, 0, .2);">
    <div class="download-icon  include-parent-hover">
        <span>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon  download-icon__icon"><path d="M6 19.167h12V17.5H6v1.667zM18 10h-3.429V5H9.43v5H6l6 5.833L18 10z"/></svg>
        </span>
        <div class="download-icon__label">download</div>
        <a href="#0"></a>
    </div>
</div>

Styleguide icons.download-icon.2
*/
/**
* Typographie
*
* Styleguide typography
*/
/*
Copy

Styleguide typography.copy
*/
/*
Standard 15px

```css
@include createCopy($props: (
    color?: string = $colorMonoDark
))
```
<div class="__copy">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere doloremque, temporibus tempore error harum ea nostrum. Molestiae tempora odio quo cumque ratione, velit veniam sint deserunt ex eveniet magni perspiciatis.</p>
    <ul>
        <li>Lorem ipsum dolor sit.</li>
        <li>Sunt sit, hic soluta.</li>
        <li>Adipisci voluptatibus distinctio omnis.</li>
        <li>Perspiciatis sit eum laudantium.</li>
        <li>Eius molestias, aspernatur maiores.</li>
    </ul>
    <ol>
        <li>Lorem ipsum dolor sit.</li>
        <li>Nemo modi quos, at.</li>
        <li>Tempora dignissimos, voluptates impedit.</li>
        <li>Accusamus veniam, voluptates tempora!</li>
        <li>Itaque nihil, ducimus laboriosam.</li>
    </ol>
    <p>
        <a href="#0">Link</a><br>
        <b>Bold</b><br>
        <i>Italic</i>
    </p>
</div>

Styleguide typography.copy.1
*/
.__copy {
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  letter-spacing: 0;
  line-height: 1.8; }
  @media (min-width: 40em) {
    .__copy {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .__copy a:not([class]) {
    color: currentColor; }
    .__copy a:not([class]):hover {
      opacity: 0.75; }
  .__copy *:first-child {
    margin-top: 0; }
  .__copy *:last-child {
    margin-bottom: 0; }
  @media (min-width: 64em) {
    .__copy {
      line-height: 2; } }

/*
Small 12px

```css
@include createCopySmall($props: (
    color?: string = $colorMonoDark,
    fontWeight?: 400 | 700
))
```

<div class="__copy--small">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere doloremque, temporibus tempore error harum ea nostrum. Molestiae tempora odio quo cumque ratione, velit veniam sint deserunt ex eveniet magni perspiciatis.</p>
    <ul>
        <li>Lorem ipsum dolor sit.</li>
        <li>Sunt sit, hic soluta.</li>
        <li>Adipisci voluptatibus distinctio omnis.</li>
        <li>Perspiciatis sit eum laudantium.</li>
        <li>Eius molestias, aspernatur maiores.</li>
    </ul>
    <ol>
        <li>Lorem ipsum dolor sit.</li>
        <li>Nemo modi quos, at.</li>
        <li>Tempora dignissimos, voluptates impedit.</li>
        <li>Accusamus veniam, voluptates tempora!</li>
        <li>Itaque nihil, ducimus laboriosam.</li>
    </ol>
    <p>
        <a href="#0">Link</a><br>
        <b>Bold</b><br>
        <i>Italic</i>
    </p>
</div>

Styleguide typography.copy.2
*/
.__copy--small {
  font-weight: 400;
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.41; }
  @media (min-width: 40em) {
    .__copy--small {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .__copy--small a:not([class]) {
    color: currentColor; }
    .__copy--small a:not([class]):hover {
      opacity: 0.75; }
  .__copy--small *:first-child {
    margin-top: 0; }
  .__copy--small *:last-child {
    margin-bottom: 0; }

/*
Navigation 15px

```css
@include createCopyNav($props: (
    color?: string = $colorMonoMedium
))
```
<div class="__copy--nav">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere doloremque, temporibus tempore error harum ea nostrum. Molestiae tempora odio quo cumque ratione, velit veniam sint deserunt ex eveniet magni perspiciatis.</p>
    <ul>
        <li>Lorem ipsum dolor sit.</li>
        <li>Sunt sit, hic soluta.</li>
        <li>Adipisci voluptatibus distinctio omnis.</li>
        <li>Perspiciatis sit eum laudantium.</li>
        <li>Eius molestias, aspernatur maiores.</li>
    </ul>
    <ol>
        <li>Lorem ipsum dolor sit.</li>
        <li>Nemo modi quos, at.</li>
        <li>Tempora dignissimos, voluptates impedit.</li>
        <li>Accusamus veniam, voluptates tempora!</li>
        <li>Itaque nihil, ducimus laboriosam.</li>
    </ol>
    <p>
        <a href="#0">Link</a><br>
        <b>Bold</b><br>
        <i>Italic</i>
    </p>
</div>

Styleguide typography.copy.3
*/
.__copy--nav {
  font-weight: 400;
  color: #9b9b9b;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1.2; }
  @media (min-width: 40em) {
    .__copy--nav {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .__copy--nav a:not([class]) {
    color: currentColor; }
    .__copy--nav a:not([class]):hover {
      opacity: 0.75; }
  .__copy--nav *:first-child {
    margin-top: 0; }
  .__copy--nav *:last-child {
    margin-bottom: 0; }

/*
Headings

Styleguide typography.headings
*/
/*
H1

```css
 @include createH1( $props? :(
    color?: string = $colorPrimaryDark
    family?: string = 'sans' | 'serif'
 ) );
```
<h1 class="__h1">Lorem ipsum dolor sit amet</h1>
<h1 class="__h1-sans">Lorem ipsum dolor sit amet</h1>

Styleguide typography.headings.h1
*/
.__h1 {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 36px;
  color: #18492b;
  line-height: 1.26;
  text-decoration: underline; }
  @media (min-width: 40em) {
    .__h1 {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .__h1 {
    font-family: "UrgeText-SemiBold", serif; }
  .__h1 sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .__h1 {
      font-size: 45px; } }

.__h1-sans {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-family: serif;
  font-size: 36px;
  color: #18492b;
  line-height: 1.26;
  text-decoration: underline;
  text-decoration: none; }
  @media (min-width: 40em) {
    .__h1-sans {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .__h1-sans {
    font-family: "UrgeText-SemiBold", serif; }
  .fl .__h1-sans {
    font-family: "Noto Sans", sans-serif; }
  .__h1-sans sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .__h1-sans {
      font-size: 45px; } }

/*
H2

```css
 @include createH2( $props? :(
    color?: string = $colorPrimaryDark,
    family?: 'serif' | 'sans'
 ) );
```
<h2 class="__h2">Lorem ipsum dolor sit amet</h2>
<h2 class="__h2-sans">Lorem ipsum dolor sit amet</h2>

Styleguide typography.headings.h2
*/
.__h2 {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 28px;
  color: #18492b;
  line-height: 1.25; }
  @media (min-width: 40em) {
    .__h2 {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .__h2 {
    font-family: "UrgeText-SemiBold", serif; }
  .__h2 sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .__h2 {
      font-size: 36px; } }

.__h2-sans {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-family: serif;
  font-size: 28px;
  color: #18492b;
  line-height: 1.25; }
  @media (min-width: 40em) {
    .__h2-sans {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .__h2-sans {
    font-family: "UrgeText-SemiBold", serif; }
  .fl .__h2-sans {
    font-family: "Noto Sans", sans-serif; }
  .__h2-sans sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .__h2-sans {
      font-size: 36px; } }

/*
H3

```css
 @include createH3( $props? :(
    color?: string = $colorPrimaryDark,
    family?: 'serif' | 'sans'
 ) );
```
<h3 class="__h3">Lorem ipsum dolor sit amet</h3>
<h3 class="__h3-sans">Lorem ipsum dolor sit amet</h3>

Styleguide typography.headings.h3
*/
.__h3 {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 20px;
  color: #18492b;
  line-height: 1.27; }
  @media (min-width: 40em) {
    .__h3 {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .__h3 {
    font-family: "UrgeText-SemiBold", serif; }
  .__h3 sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .__h3 {
      font-size: 26px; } }

.__h3-sans {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-family: serif;
  font-size: 20px;
  color: #18492b;
  line-height: 1.27; }
  @media (min-width: 40em) {
    .__h3-sans {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .__h3-sans {
    font-family: "UrgeText-SemiBold", serif; }
  .fl .__h3-sans {
    font-family: "Noto Sans", sans-serif; }
  .__h3-sans sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .__h3-sans {
      font-size: 26px; } }

/*
H4

```css
 @include createH4( $props? :(
    color?: string = $colorPrimaryDark
 ) );
```
<h4 class="__h4">Lorem ipsum dolor sit amet</h4>

Styleguide typography.headings.h4
*/
.__h4 {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 16px;
  color: #18492b;
  line-height: 1.45; }
  @media (min-width: 40em) {
    .__h4 {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .__h4 {
    font-family: "UrgeText-SemiBold", serif; }
  .__h4 sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .__h4 {
      font-size: 20px; } }

/*
H5

```css
 @include createH5( $props? :(
    color?: string = $colorPrimaryLight
 ) );
```
<h5 class="__h5">Lorem ipsum dolor sit amet</h5>

Styleguide typography.headings.h5
*/
.__h5 {
  margin: 0;
  font-style: normal;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #afcc56;
  letter-spacing: 1.75px;
  line-height: 1.3;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto; }
  @media (min-width: 40em) {
    .__h5 {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none;
      font-size: 14px; } }
  .fl .__h5 {
    font-family: "Noto Sans", sans-serif; }

/*
HAccent

```css
 @include createHAccent( $props? :(
    color?: string = $colorPrimaryLight
 ) );
```
<h5 class="__h-accent">Lorem ipsum dolor sit amet</h5>

Styleguide typography.headings.haccent
*/
.__h-accent {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 24px;
  color: #afcc56;
  line-height: 1.6; }
  @media (min-width: 40em) {
    .__h-accent {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .__h-accent {
    font-family: "UrgeText-SemiBold", serif; }
  .__h-accent sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .__h-accent {
      font-size: 30px; } }

/*
HCard

```css
 @include createHCard( $props? :(
    color?: string = $colorPrimaryDark
 ) );
```
<h5 class="__h-card">Lorem ipsum dolor sit amet</h5>

Styleguide typography.headings.hcard
*/
.__h-card {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-family: serif;
  font-size: 20px;
  font-weight: 700;
  color: #18492b;
  line-height: 1.3; }
  @media (min-width: 40em) {
    .__h-card {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .__h-card {
    font-family: "UrgeText-SemiBold", serif; }
  .fl .__h-card {
    font-family: "Noto Sans", sans-serif; }
  .__h-card sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .__h-card {
      font-size: 25px; } }

/*
HCardSmall

```css
 @include createHCardSmall( $props? :(
    color?: string = $colorPrimaryDark
 ) );
```
<h5 class="__h-card-small">Lorem ipsum dolor sit amet</h5>

Styleguide typography.headings.hcard-small
*/
.__h-card-small {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-family: serif;
  font-size: 14px;
  font-weight: 700;
  color: #18492b;
  line-height: 1.18; }
  @media (min-width: 40em) {
    .__h-card-small {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .__h-card-small {
    font-family: "UrgeText-SemiBold", serif; }
  .fl .__h-card-small {
    font-family: "Noto Sans", sans-serif; }
  .__h-card-small sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .__h-card-small {
      font-size: 17px; } }

/*
Quote

```css
@include createQuote($props: (
    color?: string = $colorPrimaryDark
))
```
<blockqoute class="__quote">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere doloremque, temporibus tempore error harum ea nostrum. Molestiae tempora odio quo cumque ratione, velit veniam sint deserunt ex eveniet magni perspiciatis.</p>
</blockqoute>

Styleguide typography.quote
*/
.__quote {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: serif;
  letter-spacing: 0;
  line-height: 1.45;
  color: #18492b;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto; }
  @media (min-width: 40em) {
    .__quote {
      font-size: 20px;
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .__quote:before {
    content: '\201E';
    font-size: 3em;
    line-height: 0; }
  .fl .__quote {
    font-family: "UrgeText-SemiBold", serif; }

/*
Label

```css
 @include createLabel( $props? :(
    color?: string = $colorMonoDark
 ) );
```
<h5 class="__label">Lorem ipsum dolor<br /> sit amet</h5>
<div class="__label">Lorem ipsum dolor<br /> sit amet</div>
<p class="__label">Lorem ipsum dolor<br /> sit amet</p>

Styleguide typography.label
*/
.__label {
  margin: 0;
  font-family: sans-serif;
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 400;
  color: #4a4a4a;
  line-height: 1.15; }
  @media (min-width: 40em) {
    .__label {
      font-size: 14px; } }
  .fl .__label {
    font-family: "Noto Sans", sans-serif; }

/*
Fact

```css
 @include createFact;
```
<div class="__fact"><img src="http://placehold.it/"><span>Gesundheit und Natur</span></div>

Styleguide typography.fact
*/
.__fact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .__fact img,
  .__fact svg {
    width: 20px;
    height: 20px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 20px;
            flex: 0 0 20px; }
    @media (min-width: 40em) {
      .__fact img,
      .__fact svg {
        width: 24px;
        height: 24px;
        -webkit-box-flex: 0;
            -ms-flex: 0 0 24px;
                flex: 0 0 24px; } }
  .__fact span:not([class]) {
    margin: 0;
    font-family: sans-serif;
    letter-spacing: 0;
    font-size: 11px;
    font-weight: 400;
    color: "inherit";
    line-height: 1.15;
    margin-left: 10px;
    font-weight: 700; }
    @media (min-width: 40em) {
      .__fact span:not([class]) {
        font-size: 14px; } }
    .fl .__fact span:not([class]) {
      font-family: "Noto Sans", sans-serif; }
    @media (min-width: 40em) {
      .__fact span:not([class]) {
        margin-left: 15px; } }
    .__fact span:not([class]) a {
      color: inherit; }
      .__fact span:not([class]) a:hover {
        opacity: 0.75; }

/**
 * Lists
 *
 * Styleguide lists
 */
/*
Inline List

.inline-list--top - valign top
.inline-list--center - valign center

Markup:
<ul class="inline-list  {{modifier_class}}">
    <li>Some Text</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li><img src="http://placehold.it/300x220" alt=""></li>
    <li><img src="http://placehold.it/80x80" alt=""></li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Sit amet.</li>
</ul>

Styleguide lists.inline-list
*/
.inline-list {
  margin: 0;
  margin-left: -20px;
  margin-bottom: -20px;
  padding: 0;
  list-style: none; }
  .inline-list li {
    padding-left: 20px;
    padding-bottom: 20px;
    display: inline-block; }

.inline-list--top li {
  vertical-align: top; }

.inline-list--center li {
  vertical-align: middle; }

/*
Download List

Markup:
<ul class="download-list">
    <li>
        <span class="download-icon">
            <span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon  download-icon__icon"><path d="M6 19.167h12V17.5H6v1.667zM18 10h-3.429V5H9.43v5H6l6 5.833L18 10z"/></svg>
            </span>
        </span>
        <span class="download-list__label">27.11.2017 Verkehrskonzept - Ein Zwischenstand</span>
        <a href=""></a>
    </li>
    <li>
        <span class="download-icon">
            <span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon  download-icon__icon"><path d="M6 19.167h12V17.5H6v1.667zM18 10h-3.429V5H9.43v5H6l6 5.833L18 10z"/></svg>
            </span>
        </span>
        <span class="download-list__label">27.11.2017 Verkehrskonzept - Ein Zwischenstand</span>
        <a href=""></a>
    </li>
    <li>
        <span class="download-icon">
            <span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon  download-icon__icon"><path d="M6 19.167h12V17.5H6v1.667zM18 10h-3.429V5H9.43v5H6l6 5.833L18 10z"/></svg>
            </span>
        </span>
        <span class="download-list__label">27.11.2017 Verkehrskonzept - Ein Zwischenstand</span>
        <a href=""></a>
    </li>
    <li>
        <span class="download-icon">
            <span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon  download-icon__icon"><path d="M6 19.167h12V17.5H6v1.667zM18 10h-3.429V5H9.43v5H6l6 5.833L18 10z"/></svg>
            </span>
        </span>
        <span class="download-list__label">27.11.2017 Verkehrskonzept - Ein Zwischenstand</span>
        <a href=""></a>
    </li>
</ul>

Styleguide lists.download-list
*/
.download-list {
  margin: 0;
  padding: 0;
  list-style: none; }
  .download-list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    margin-bottom: 20px; }
    .download-list li > * {
      vertical-align: middle; }
    .download-list li a {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0; }

.download-list__label {
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  letter-spacing: 0;
  line-height: 1.8;
  margin-left: 20px;
  text-decoration: underline; }
  @media (min-width: 40em) {
    .download-list__label {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .download-list__label a:not([class]) {
    color: currentColor; }
    .download-list__label a:not([class]):hover {
      opacity: 0.75; }
  .download-list__label *:first-child {
    margin-top: 0; }
  .download-list__label *:last-child {
    margin-bottom: 0; }
  @media (min-width: 64em) {
    .download-list__label {
      line-height: 2; } }

/*
Pagination

Markup:
<ul class="pagination">
    <li><a href="#0">erste Seite ‹</a></li>
    <li><a href="#0">‹‹</a></li>
    <li class="has-decorator"><a href="#0">1</a></li>
    <li class="has-decorator"><a class="is-active" href="#0?page=2">2</a></li>
    <li class="has-decorator"><a href="#0">3</a></li>
    <li><a href="#0">››</a></li>
    <li><a href="#0">› letzte Seite</a></li>
</ul>

Styleguide lists.pagination
*/
.pagination {
  margin: 80px 0;
  padding: 0;
  list-style: none;
  text-align: center;
  color: #afcc56; }
  .pagination li {
    position: relative;
    display: inline-block; }
    .pagination li.has-decorator:after {
      content: '';
      width: 40px;
      height: 1px;
      display: inline-block;
      position: absolute;
      top: 18px;
      right: -15px;
      -webkit-transform: rotate(-65deg);
          -ms-transform: rotate(-65deg);
              transform: rotate(-65deg);
      background-color: currentColor; }
    .pagination li a {
      padding: 10px 20px;
      display: inline-block;
      color: currentColor;
      text-decoration: none;
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s; }
      .pagination li a:hover {
        text-decoration: underline; }
      .pagination li a.is-active {
        font-weight: 700; }

/*
Navigation

Markup:
<div style="padding: 20px; background: #409560">
<nav class="nav">
    <ul>
        <li>
            <span class="nav__item  is-big">Aktuelles</span>
            <ul class="nav__sub-nav">
                <li><a href="#0">Lorem</a></li>
                <li><a href="#0">Lorem</a></li>
                <li><a href="#0">Lorem</a></li>
                <li><a href="#0">Lorem</a></li>
                <li><a href="#0">Lorem</a></li>
            </ul>
        </li>
        <li>
            <span class="nav__item  is-active  is-big" >Konzept</span>
            <ul class="nav__sub-nav  is-open">
                <li><a href="#0">Lorem</a></li>
                <li><a href="#0">Lorem</a></li>
                <li><a href="#0">Lorem</a></li>
                <li><a href="#0">Lorem</a></li>
                <li><a href="#0">Lorem</a></li>
            </ul>
        </li>
        <li>
            <span class="nav__item">Sponsoren</span>
            <ul class="nav__sub-nav">
                <li><a href="#0">Lorem</a></li>
                <li><a href="#0">Lorem</a></li>
                <li><a href="#0">Lorem</a></li>
                <li><a href="#0">Lorem</a></li>
                <li><a href="#0">Lorem</a></li>
            </ul>
        </li>
        <li>
            <span class="nav__item">Partner</span>
            <ul class="nav__sub-nav">
                <li><a href="#0">Lorem</a></li>
                <li><a href="#0">Lorem</a></li>
                <li><a href="#0">Lorem</a></li>
                <li><a href="#0">Lorem</a></li>
                <li><a href="#0">Lorem</a></li>
            </ul>
        </li>
        <li>
            <span class="nav__item">Vorfreude</span>
            <ul class="nav__sub-nav">
                <li><a href="#0">Lorem</a></li>
                <li><a href="#0">Lorem</a></li>
                <li><a href="#0">Lorem</a></li>
                <li><a href="#0">Lorem</a></li>
                <li><a href="#0">Lorem</a></li>
            </ul>
        </li>
        <li>
            <span class="nav__item">Presse</span>
            <ul class="nav__sub-nav">
                <li><a href="#0">Lorem</a></li>
                <li><a href="#0">Lorem</a></li>
                <li><a href="#0">Lorem</a></li>
                <li><a href="#0">Lorem</a></li>
                <li><a href="#0">Lorem</a></li>
            </ul>
        </li>
    </ul>
</nav>
<!-- <div class="nav__backdrop"></div> -->
</div>

Styleguide lists.nav
*/
.nav {
  color: #ffffff;
  height: 50px;
  overflow: hidden;
  font-size: 14px;
  position: relative;
  z-index: 2; }
  .nav ul {
    margin: 0;
    padding: 0;
    list-style: none; }
    .nav ul li {
      display: inline-block; }
      .nav ul li + li {
        margin-left: 15px; }

.nav__item {
  padding: 15px 0;
  margin-left: 10px;
  margin-bottom: 10px;
  display: inline-block;
  position: relative;
  color: currentColor;
  text-decoration: none;
  font-size: 14px; }
  .nav__item:after {
    content: '';
    display: block;
    width: 0;
    height: 6px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #ce115d;
    -webkit-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out; }
  .touch .nav__item:after {
    display: none; }
  .touch .nav__item.is-active {
    border-bottom: 6px solid #ce115d;
    padding-bottom: 13px; }
  .nav__item.is-active:after {
    width: 100%; }
  .nav__item.is-big {
    font-weight: 700;
    font-size: 16px; }
  .nav__item:hover {
    cursor: pointer; }
    .nav__item:hover:after {
      width: 45%; }

.nav__sub-nav {
  display: none; }

.nav__backdrop {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1; }

/*
Flyout

Markup:
<div style="padding: 20px; background: #409560">
<ul class="flyout" style="top: 20px; left: 20px;">
    <li>
        <a href="#0" class="flyout__item">
            <img src="http://placehold.it/24" alt="">   <!-- Replace with SVG -->
            <span>News</span>
        </a>
    </li>
    <li>
        <a href="#0" class="flyout__item">
            <img src="http://placehold.it/24" alt="">   <!-- Replace with SVG -->
            <span>Termine</span>
        </a>
    </li>
    <li>
        <a href="#0" class="flyout__item">
            <img src="http://placehold.it/24" alt="">   <!-- Replace with SVG -->
            <span>Baustellenreport</span>
        </a>
    </li>
    <li>
        <a href="#0" class="flyout__item">
            <img src="http://placehold.it/24" alt="">   <!-- Replace with SVG -->
            <span>Interviews</span>
        </a>
    </li>
    <li>
        <a href="#0" class="flyout__item">
            <img src="http://placehold.it/24" alt="">   <!-- Replace with SVG -->
            <span>Bildergalerie</span>
        </a>
    </li>
</ul>
</div>

Styleguide lists.flyout
*/
.flyout {
  width: 100%;
  max-width: 220px;
  margin: 0;
  padding: 10px 0;
  background: #fff;
  list-style: none;
  -webkit-box-shadow: 0 9px 22px -4px rgba(0, 0, 0, 0.23);
          box-shadow: 0 9px 22px -4px rgba(0, 0, 0, 0.23);
  position: absolute;
  z-index: 2;
  display: none; }
  .flyout.is-open {
    display: inline-block; }

.flyout__item {
  padding: 12px 20px;
  display: block;
  color: #4a4a4a;
  text-decoration: none;
  font-size: 13px; }
  .flyout__item:hover, .flyout__item.is-active {
    cursor: pointer;
    background-color: #eaeaea; }
  .flyout__item > * {
    vertical-align: middle; }
  .flyout__item img,
  .flyout__item svg {
    margin-right: 10px; }

/*
Full Nav

Wenn ein Kind-Element aktiv ist, muss ihm die Klasse ```is-active``` und der gesamten Navigation (```nav-full```) die Klasse ```is-child-open``` gegeben werden.

.is-child-open - Aktives Kindelement

Markup:
<div class="nav-full  {{modifier_class}}">
    <ul class="nav-full__list">
        <li class="nav-full__list__item">
            <div class="nav-full__label">Aktuelles</div>
            <nav class="nav-full__sub-nav">SUB-NAVIGATION</nav>
        </li>
        <li class="nav-full__list__item  is-open">
            <div class="nav-full__label  is-active">Konzept</div>
            <nav class="nav-full__sub-nav">
                <ul class="nav-full__sub-nav__items">
                    <li><a href="#0">Ziel der Planung</a></li>
                    <li><a href="#0">Bereiche</a></li>
                    <li><a href="#0" class="is-active">Ausstellungskonuept</a></li>
                    <li><a href="#0">Bürgerbeteiligung</a></li>
                    <li><a href="#0">Beteiligte</a></li>
                    <li><a href="#0">Zahlen, Daten, Fakten</a></li>
                    <li><a href="#0">Download-Bereich</a></li>
                </ul>
            </nav>
        </li>
        <li class="nav-full__list__item">
            <a href="#0" class="nav-full__link">Sponsoren</a>
        </li>
        <li class="nav-full__list__item">
            <a href="#0" class="nav-full__link">Partner</a>
            <nav class="nav-full__sub-nav">SUB-NAVIGATION</nav>
        </li>
        <li class="nav-full__list__item">
            <div class="nav-full__label">Vorfreude</div>
            <nav class="nav-full__sub-nav">SUB-NAVIGATION</nav>
        </li>
        <li class="nav-full__list__item">
            <div class="nav-full__label">Presse</div>
            <nav class="nav-full__sub-nav">SUB-NAVIGATION</nav>
        </li>
    </ul>
    <div class="nav-full__additional">
        <nav class="nav-full__sub-nav">
            <ul class="nav-full__sub-nav__items">
                <li><a href="#0">LGS Plus</a></li>
                <li><a href="#0">Green Team</a></li>
                <li><a href="#0" class="is-active">Ausschreibung</a></li>
                <li><a href="#0">Mitmachen</a></li>
                <li><a href="#0">Shop</a></li>
                <li><a href="#0">Kontakt</a></li>
            </ul>
        </nav>
    </div>
    <div class="nav-full__social-title">Folgen Sie uns:</div>
    <ul class="inline-list  nav-full__social-icons">
        <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M17 2v4h-2c-.69 0-1 .81-1 1.5V10h3v4h-3v8h-4v-8H7v-4h3V6a4 4 0 0 1 4-4h3z"/></svg></a></li>
        <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2zm-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6zm9.65 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/></svg></a></li>
        <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M22.92 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.83 4.5 17.72 4 16.46 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98-3.56-.18-6.73-1.89-8.84-4.48-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.9 20.29 6.16 21 8.58 21c7.88 0 12.21-6.54 12.21-12.21 0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/></svg></a></li>
        <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M10 16.5v-9l6 4.5-6 4.5zM20 4.4c-.6-.2-4.3-.4-8-.4s-7.4.19-8 .38C2.44 4.9 2 8.4 2 12c0 3.59.44 7.1 2 7.61.6.2 4.3.39 8 .39s7.4-.19 8-.39c1.56-.51 2-4.02 2-7.61 0-3.6-.44-7.09-2-7.6z"/></svg></a></li>
    </ul>
</div>

Styleguide lists.nav-full
*/
.nav-full {
  text-align: center; }

.nav-full__list {
  list-style: none;
  margin: 60px 0;
  padding: 0; }

.nav-full__list__item {
  will-change: transform;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s; }
  .is-child-open .nav-full__list__item {
    height: 0;
    overflow: hidden; }
  .nav-full__list__item.is-open {
    height: auto; }

.nav-full__label {
  margin: 0;
  padding: 15px 0;
  position: relative;
  font-size: 20px;
  cursor: pointer; }
  .nav-full__list__item.is-active .nav-full__label, .nav-full__label:hover {
    text-decoration: underline; }
  .nav-full__label::after {
    content: '\203A';
    position: absolute;
    margin-left: 20px;
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
    line-height: 1; }
    .nav-full__list__item.is-open .nav-full__label::after {
      -webkit-transform: rotate(-90deg);
          -ms-transform: rotate(-90deg);
              transform: rotate(-90deg); }

.nav-full__link {
  margin: 0;
  padding: 15px 0;
  display: block;
  position: relative;
  font-size: 20px;
  color: currentColor;
  text-decoration: none;
  cursor: pointer; }
  .nav-full__link:hover {
    text-decoration: underline; }

.nav-full__sub-nav {
  margin: 0 0 40px;
  display: none; }
  .nav-full__list__item.is-open .nav-full__sub-nav {
    display: block; }

.nav-full__sub-nav__items {
  list-style: none;
  margin: 0;
  padding: 0; }
  .nav-full__sub-nav__items li a {
    display: block;
    padding: 10px 0;
    color: currentColor;
    text-decoration: none; }
    .nav-full__sub-nav__items li a.is-active, .nav-full__sub-nav__items li a:hover {
      text-decoration: underline; }

.nav-full__additional {
  margin: 60px 0; }
  .nav-full__additional .nav-full__sub-nav {
    display: block; }
  .is-child-open .nav-full__additional {
    height: 0;
    overflow: hidden; }

.nav-full__social-icons a {
  color: currentColor;
  -webkit-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out; }
  .nav-full__social-icons a:hover {
    opacity: 0.6; }

.nav-full__social-title {
  font-weight: 400;
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.41;
  color: inherit;
  margin-bottom: 15px; }
  @media (min-width: 40em) {
    .nav-full__social-title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .nav-full__social-title a:not([class]) {
    color: currentColor; }
    .nav-full__social-title a:not([class]):hover {
      opacity: 0.75; }
  .nav-full__social-title *:first-child {
    margin-top: 0; }
  .nav-full__social-title *:last-child {
    margin-bottom: 0; }

/*
Fact List 

Markup:
<ul class="fact-list">
    <li class="fact-list__item">
        <img src="http://placehold.it/24" alt=""/>
        <span>Gesundheit und Natur</span>
    </li>
    <li class="fact-list__item">
        <img src="http://placehold.it/24" alt=""/>
        <span>Menzinger Gärten</span>
    </li>
    <li class="fact-list__item">
        <img src="http://placehold.it/24" alt=""/>
        <span>Netzwerk Garten Obst-<br />und Gartenbauvereine und LandFrauen</span>
    </li>
    <li class="fact-list__item">
        <img src="http://placehold.it/24" alt=""/>
        <span>Termin merken</span>
    </li>
</ul>

Styleguide lists.fact-list
*/
.fact-list {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left; }
  .fact-list li + li {
    margin-top: 10px; }
    @media (min-width: 40em) {
      .fact-list li + li {
        margin-top: 15px; } }

.fact-list__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .fact-list__item img,
  .fact-list__item svg {
    width: 20px;
    height: 20px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 20px;
            flex: 0 0 20px; }
    @media (min-width: 40em) {
      .fact-list__item img,
      .fact-list__item svg {
        width: 24px;
        height: 24px;
        -webkit-box-flex: 0;
            -ms-flex: 0 0 24px;
                flex: 0 0 24px; } }
  .fact-list__item span:not([class]) {
    margin: 0;
    font-family: sans-serif;
    letter-spacing: 0;
    font-size: 11px;
    font-weight: 400;
    color: "inherit";
    line-height: 1.15;
    margin-left: 10px;
    font-weight: 700; }
    @media (min-width: 40em) {
      .fact-list__item span:not([class]) {
        font-size: 14px; } }
    .fl .fact-list__item span:not([class]) {
      font-family: "Noto Sans", sans-serif; }
    @media (min-width: 40em) {
      .fact-list__item span:not([class]) {
        margin-left: 15px; } }
    .fact-list__item span:not([class]) a {
      color: inherit; }
      .fact-list__item span:not([class]) a:hover {
        opacity: 0.75; }

/*
Share Panel

Markup:
<div class="share-panel">
    <div class="share-panel__text">Diese Seite teilen auf:</div>
    <ul class="share-panel__list">
        <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M17 2v4h-2c-.69 0-1 .81-1 1.5V10h3v4h-3v8h-4v-8H7v-4h3V6a4 4 0 0 1 4-4h3z"/></svg></a></li>
        <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2zm-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6zm9.65 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/></svg></a></li>
        <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M22.92 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.83 4.5 17.72 4 16.46 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98-3.56-.18-6.73-1.89-8.84-4.48-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.9 20.29 6.16 21 8.58 21c7.88 0 12.21-6.54 12.21-12.21 0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/></svg></a></li>
        <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M10 16.5v-9l6 4.5-6 4.5zM20 4.4c-.6-.2-4.3-.4-8-.4s-7.4.19-8 .38C2.44 4.9 2 8.4 2 12c0 3.59.44 7.1 2 7.61.6.2 4.3.39 8 .39s7.4-.19 8-.39c1.56-.51 2-4.02 2-7.61 0-3.6-.44-7.09-2-7.6z"/></svg></a></li>
    </ul>
</div>

Styleguide lists.share-panel
*/
.share-panel {
  padding: 20px 0;
  border-top: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea; }

.share-panel__text {
  font-weight: 400;
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.41;
  margin-bottom: 10px; }
  @media (min-width: 40em) {
    .share-panel__text {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .share-panel__text a:not([class]) {
    color: currentColor; }
    .share-panel__text a:not([class]):hover {
      opacity: 0.75; }
  .share-panel__text *:first-child {
    margin-top: 0; }
  .share-panel__text *:last-child {
    margin-bottom: 0; }

.share-panel__list {
  margin: 0;
  padding: 0;
  list-style: none; }
  .share-panel__list li {
    margin: 0 5px;
    position: relative;
    display: inline-block; }
  .share-panel__list li:first-child {
    margin-left: 0; }
  .share-panel__list li:last-child {
    margin-right: 0; }
  .share-panel__list a {
    color: currentColor;
    -webkit-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out; }
    .share-panel__list a:hover {
      opacity: 0.6; }

/*
Table

Markup:
<table class="table">
    <tbody>
        <tr>
            <td>Tageskarte Erwachsene</td>
            <td>18,00 €</td>
        </tr>
        <tr>
            <td>Tageskarte ermäßigt <sup>2</sup></td>
            <td>15,00 €</td>
        </tr>
        <tr>
            <td>Tageskarte mit Ãœberlinger Sozialpass <sup>3</sup></td>
            <td>9,00 €</td>
        </tr>
        <tr>
            <td>Tageskarte 13–17 Jahre</td>
            <td>9,00 €</td>
        </tr>
        <tr>
            <td>Tageskarte 0–12 Jahre</td>
            <td>frei</td>
        </tr>
        <tr>
            <td>
                Tageskarte Familie »klein«<br />
                <span>(1 Erw.+ beliebig viele eigene Kinder bis 17 Jahre)</span>
            </td>
            <td>22,00 €</td>
        </tr>
        <tr>
            <td>
                Tageskarte Familie »groß«<br />
                <span>(2 Erw.+ beliebig viele eigene Kinder bis 17 Jahre)</span>
            </td>
            <td>40,00 €</td>
        </tr>
        <tr>
            <td>Tageskarte Gruppe</td>
            <td>15,00 €</td>
        </tr>
    </tbody>
</table>

Styleguide lists.table
*/
.table {
  font-weight: 700;
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  letter-spacing: 0;
  line-height: 1.8;
  line-height: 1.4;
  width: 100%;
  border-spacing: 0; }
  @media (min-width: 40em) {
    .table {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .table a:not([class]) {
    color: currentColor; }
    .table a:not([class]):hover {
      opacity: 0.75; }
  .table *:first-child {
    margin-top: 0; }
  .table *:last-child {
    margin-bottom: 0; }
  @media (min-width: 64em) {
    .table {
      line-height: 2; } }
  .table tr td {
    padding: 10px 15px;
    min-width: 100px; }
    .table tr td span {
      font-weight: 400;
      color: #4a4a4a;
      font-style: normal;
      -webkit-transition: color 0.25s;
      -o-transition: color 0.25s;
      transition: color 0.25s;
      -webkit-hyphens: auto;
          -ms-hyphens: auto;
              hyphens: auto;
      font-size: 12px;
      letter-spacing: 0;
      line-height: 1.41;
      display: block;
      margin-top: 5px; }
      @media (min-width: 40em) {
        .table tr td span {
          -webkit-hyphens: none;
              -ms-hyphens: none;
                  hyphens: none; } }
      .table tr td span a:not([class]) {
        color: currentColor; }
        .table tr td span a:not([class]):hover {
          opacity: 0.75; }
      .table tr td span *:first-child {
        margin-top: 0; }
      .table tr td span *:last-child {
        margin-bottom: 0; }
    .table tr td:first-child {
      padding-left: 28px; }
  .table tr:nth-child(odd) {
    background: #dce9c8;
    background: rgba(220, 233, 200, 0.4); }

/*
Column List

Markup:
<ul class="column-list">
    <li>Lorem, ipsum dolor.</li>
    <li>Eos, tenetur? Repudiandae.</li>
    <li>Illum, numquam facere.</li>
    <li>Et, doloribus molestias.</li>
    <li>Temporibus, aspernatur labore.</li>
    <li>Asperiores, iste eius!</li>
    <li>Impedit, totam expedita.</li>
    <li>Accusamus, ratione placeat.</li>
    <li>Neque, asperiores itaque!</li>
    <li>Quidem, reiciendis nihil!</li>
    <li>Corrupti, aliquid veniam.</li>
    <li>Animi, expedita odio?</li>
    <li>Expedita, doloremque hic!</li>
    <li>Quibusdam, consequuntur impedit.</li>
    <li>Accusantium, mollitia nesciunt?</li>
    <li>Iure, assumenda impedit!</li>
    <li>Laudantium, nulla vel?</li>
    <li>Eaque, quaerat consequatur.</li>
    <li>Alias, unde qui!</li>
    <li>Repellendus, dolorem enim.</li>
    <li>Excepturi, consequuntur hic.</li>
    <li>Recusandae, maiores non!</li>
    <li>Corporis, eius beatae.</li>
    <li>Nostrum, laborum suscipit!</li>
    <li>Vel, architecto eius!</li>
</ul>

Styleguide lists.column-list
*/
.column-list {
  font-weight: 400;
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.41;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  overflow: hidden;
  margin-left: -20px; }
  @media (min-width: 40em) {
    .column-list {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .column-list a:not([class]) {
    color: currentColor; }
    .column-list a:not([class]):hover {
      opacity: 0.75; }
  .column-list *:first-child {
    margin-top: 0; }
  .column-list *:last-child {
    margin-bottom: 0; }
  .column-list li {
    min-width: 200px;
    max-width: 50%;
    padding: 10px 20px;
    -webkit-box-flex: 1;
        -ms-flex: 1 0 50%;
            flex: 1 0 50%; }
    @media (min-width: 40em) {
      .column-list li {
        max-width: 33.33%;
        -webkit-box-flex: 1;
            -ms-flex: 1 0 33.33%;
                flex: 1 0 33.33%; } }
    @media (min-width: 64em) {
      .column-list li {
        max-width: 25%;
        -webkit-box-flex: 1;
            -ms-flex: 1 0 25%;
                flex: 1 0 25%; } }
    @media (min-width: 90em) {
      .column-list li {
        max-width: 20%;
        -webkit-box-flex: 1;
            -ms-flex: 1 0 20%;
                flex: 1 0 20%; } }
    .column-list li:before {
      content: '';
      position: absolute;
      height: 100%;
      width: 1px;
      background: #eaeaea;
      margin-left: -21px; }

/**
* Buttons
*
* Styleguide buttons
*/
/*
Buttons

Styleguide buttons.btn
*/
/*
cta - grün (standard)

```css
 @include createBtn;
```
<a href="#0" class="__btn1"><img src="http://placehold.it/24">Link-Button</a><br />
<a href="#0" class="__btn1"><span>Link-Button</span><img src="http://placehold.it/24"></a><br />
<button class="__btn1">Button Element</button>

Styleguide buttons.btn.1
*/
.__btn1.__btn1 {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  -webkit-box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
          box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
  background: #afcc56; }
  @media (min-width: 40em) {
    .__btn1.__btn1 {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .__btn1.__btn1 svg,
  .__btn1.__btn1 img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .__btn1.__btn1 * + svg,
  .__btn1.__btn1 * + img {
    margin-right: 0;
    margin-left: 15px; }
  .__btn1.__btn1:hover {
    cursor: pointer;
    color: #ffffff; }
  .__btn1.__btn1:hover {
    background-color: #88a431; }
  .__btn1.__btn1:disabled, .__btn1.__btn1.is-disabled {
    pointer-events: none;
    opacity: 0.25; }

/*
cta - rot

```css
@include createBtn((color: 'red'));
```
<a href="#0" class="__btn2"><img src="http://placehold.it/24">Link-Button</a><br />
<a href="#0" class="__btn2"><span>Link-Button</span><img src="http://placehold.it/24"></a><br />
<button class="__btn2">Button Element</button>

Styleguide buttons.btn.2
*/
.__btn2.__btn2 {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  -webkit-box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
          box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
  background: #ce115d; }
  @media (min-width: 40em) {
    .__btn2.__btn2 {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .__btn2.__btn2 svg,
  .__btn2.__btn2 img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .__btn2.__btn2 * + svg,
  .__btn2.__btn2 * + img {
    margin-right: 0;
    margin-left: 15px; }
  .__btn2.__btn2:hover {
    cursor: pointer;
    color: #ffffff; }
  .__btn2.__btn2:hover {
    background-color: #870b3d; }
  .__btn2.__btn2:disabled, .__btn2.__btn2.is-disabled {
    pointer-events: none;
    opacity: 0.25; }

/*
ghost - weiß

```css
 @include createBtn((type: 'ghost', color: 'white'));
```
<div style="background: #ccc; padding: 10px">
    <a href="#0" class="__btn3"><img src="http://placehold.it/24">Link-Button</a><br />
    <a href="#0" class="__btn3"><span>Link-Button</span><img src="http://placehold.it/24"></a><br />
    <button class="__btn3">Button Element</button>
</div>

Styleguide buttons.btn.3
*/
.__btn3.__btn3 {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  background-color: transparent;
  border: 1px solid currentColor; }
  @media (min-width: 40em) {
    .__btn3.__btn3 {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .__btn3.__btn3 svg,
  .__btn3.__btn3 img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .__btn3.__btn3 * + svg,
  .__btn3.__btn3 * + img {
    margin-right: 0;
    margin-left: 15px; }
  .__btn3.__btn3:hover {
    cursor: pointer;
    color: #ffffff; }
  .__btn3.__btn3:disabled, .__btn3.__btn3.is-disabled {
    pointer-events: none;
    opacity: 0.25; }

/*
ghost - dunkel

```css
 @include createBtn((type: 'ghost', color: 'dark'));
```
<a href="#0" class="__btn4"><img src="http://placehold.it/24">Link-Button</a><br />
<a href="#0" class="__btn4"><span>Link-Button</span><img src="http://placehold.it/24"></a><br />
<button class="__btn4">Button Element</button>

Styleguide buttons.btn.4
*/
.__btn4.__btn4 {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  background-color: transparent;
  border: 1px solid currentColor;
  color: #4a4a4a; }
  @media (min-width: 40em) {
    .__btn4.__btn4 {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .__btn4.__btn4 svg,
  .__btn4.__btn4 img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .__btn4.__btn4 * + svg,
  .__btn4.__btn4 * + img {
    margin-right: 0;
    margin-left: 15px; }
  .__btn4.__btn4:hover {
    cursor: pointer;
    color: #ffffff; }
  .__btn4.__btn4:hover {
    color: #4a4a4a; }
  .__btn4.__btn4:disabled, .__btn4.__btn4.is-disabled {
    pointer-events: none;
    opacity: 0.25; }

/*
flat - rot

```css
 @include createBtn((type: 'flat', color: 'red'));
```
<a href="#0" class="__btn5"><img src="http://placehold.it/24">Link-Button</a><br />
<a href="#0" class="__btn5"><span>Link-Button</span><img src="http://placehold.it/24"></a><br />
<button class="__btn5">Button Element</button>

Styleguide buttons.btn.5
*/
.__btn5.__btn5 {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  padding: 0 !important;
  min-height: auto !important;
  border: none;
  color: #ce115d; }
  @media (min-width: 40em) {
    .__btn5.__btn5 {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .__btn5.__btn5 svg,
  .__btn5.__btn5 img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .__btn5.__btn5 * + svg,
  .__btn5.__btn5 * + img {
    margin-right: 0;
    margin-left: 15px; }
  .__btn5.__btn5:hover {
    cursor: pointer;
    color: #ffffff; }
  .__btn5.__btn5:hover {
    color: #870b3d; }
  .__btn5.__btn5:disabled, .__btn5.__btn5.is-disabled {
    pointer-events: none;
    opacity: 0.25; }

/*
Standard

```css
 @include createToggleBtn($props: (
    type?: string = more | less
));
```
<a href="#0" class="__btn-toggle-more"><img src="http://placehold.it/24"> Link-Button</a>
<a href="#0" class="__btn-toggle-less"><img src="http://placehold.it/24"> Link-Button</a>
<button class="__btn-toggle-more"><img src="http://placehold.it/24"> Button Element</button>
<button class="__btn-toggle-less"><img src="http://placehold.it/24"> Button Element</button>

Styleguide buttons.toggle
*/
.__btn-toggle-more.__btn-toggle-more {
  margin: 0;
  padding-right: 12px;
  display: inline-block;
  position: relative;
  color: #ce115d;
  text-decoration: none;
  text-transform: uppercase;
  border: none;
  outline: none;
  font-size: 12px;
  line-height: 1.16;
  letter-spacing: 0.86px; }
  .__btn-toggle-more.__btn-toggle-more svg,
  .__btn-toggle-more.__btn-toggle-more img {
    width: 1.2em;
    height: 1.2em;
    margin-right: 10px;
    fill: currentColor;
    vertical-align: middle; }
  .__btn-toggle-more.__btn-toggle-more::before {
    content: '';
    width: 7px;
    height: 7px;
    position: absolute;
    right: -3px; }
  .__btn-toggle-more.__btn-toggle-more::after {
    content: '';
    bottom: 2px;
    width: 1px;
    height: 10px;
    position: absolute;
    right: 0;
    display: inline-block;
    background-color: currentColor;
    -webkit-transition: width 0.25s ease-in-out;
    -o-transition: width 0.25s ease-in-out;
    transition: width 0.25s ease-in-out; }
  .__btn-toggle-more.__btn-toggle-more::before {
    content: '';
    top: 12px;
    background: url(data:image/svg+xml;base64,phn2zyb3awr0ad0inyigagvpz2h0psi3iib2awv3qm94psiwidagnya3iib4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmcipjxwyxroigq9ik0zljugn0myljcynsa0ljg1myaxljqgmi4xosawic41mzhmmy41ideuodqgnyauntm5qzuuntk5idiumtg4idqumjc1idquoduyidmunsa3eiigzmlsbd0ii2nlmte1zcigzmlsbc1ydwxlpsjldmvub2rkii8+pc9zdmc+cg==); }
  .__btn-toggle-more.__btn-toggle-more::after {
    top: 1px; }
  .__btn-toggle-more.__btn-toggle-more:hover::before {
    top: 15px; }
  .__btn-toggle-more.__btn-toggle-more:hover::after {
    height: 15px; }

.__btn-toggle-less.__btn-toggle-less {
  margin: 0;
  padding-right: 12px;
  display: inline-block;
  position: relative;
  color: #ce115d;
  text-decoration: none;
  text-transform: uppercase;
  border: none;
  outline: none;
  font-size: 12px;
  line-height: 1.16;
  letter-spacing: 0.86px; }
  .__btn-toggle-less.__btn-toggle-less svg,
  .__btn-toggle-less.__btn-toggle-less img {
    width: 1.2em;
    height: 1.2em;
    margin-right: 10px;
    fill: currentColor;
    vertical-align: middle; }
  .__btn-toggle-less.__btn-toggle-less::before {
    content: '';
    width: 7px;
    height: 7px;
    position: absolute;
    right: -3px; }
  .__btn-toggle-less.__btn-toggle-less::after {
    content: '';
    bottom: 2px;
    width: 1px;
    height: 10px;
    position: absolute;
    right: 0;
    display: inline-block;
    background-color: currentColor;
    -webkit-transition: width 0.25s ease-in-out;
    -o-transition: width 0.25s ease-in-out;
    transition: width 0.25s ease-in-out; }
  .__btn-toggle-less.__btn-toggle-less::before {
    content: '';
    bottom: 12px;
    background: url(data:image/svg+xml;base64,phn2zyb3awr0ad0inyigagvpz2h0psi3iib2awv3qm94psiwidagnya3iib4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmcipjxwyxroigq9ik0zljuuntm4qzqumjc1idiunjg2iduunia1ljm0oca3iddmmy41iduunyawidddms40mdegns4zndkgmi43mjugmi42odygmy41ljuzohoiigzpbgw9iinjztexnwqiigzpbgwtcnvszt0izxzlbm9kzcivpjwvc3znpgo=); }
  .__btn-toggle-less.__btn-toggle-less:hover::before {
    bottom: 15px; }
  .__btn-toggle-less.__btn-toggle-less:hover::after {
    height: 15px; }

/*
Quote

```css
@include createPointer($props: (
    direction?: string = right | right
))
```
<a href="#0" class="__pointer-right">Lorem ipsum dolor sit </a><br>
<a href="#0" class="__pointer-left">Lorem ipsum dolor sit </a>

Styleguide buttons.pointer
*/
.__pointer-right.__pointer-right {
  margin: 0;
  padding-left: 40px;
  position: relative;
  font-size: 12px;
  text-decoration: none;
  letter-spacing: 0;
  color: #4a4a4a; }
  .__pointer-right.__pointer-right:before {
    content: '';
    width: 15px;
    height: 1px;
    background: currentColor;
    display: inline-block;
    position: absolute;
    top: 50%;
    margin-top: -1px;
    -webkit-transition: 0.1s;
    -o-transition: 0.1s;
    transition: 0.1s; }
  .__pointer-right.__pointer-right:after {
    content: '';
    width: 9px;
    height: 9px;
    display: inline-block;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    top: 50%;
    margin-top: -5px;
    -webkit-transition: 0.1s;
    -o-transition: 0.1s;
    transition: 0.1s; }
  .__pointer-right.__pointer-right:hover {
    cursor: pointer; }
  .__pointer-right.__pointer-right::before {
    left: 0; }
  .__pointer-right.__pointer-right::after {
    left: 15px;
    background-image: url(data:image/svg+xml;base64,phn2zyb3awr0ad0imtiiighlawdodd0imtmiihzpzxdcb3g9ijagmcaxmiaxmyigeg1sbnm9imh0dha6ly93d3cudzmub3jnlziwmdavc3znij48cgf0acbkpsjnmtegni41qzcundayidcuotqgmi45ncaxmc40lje3myaxm2wylje4ltyunuwumtcyidbdmi45mzkgmi42mdigny40mdmgns4wnjegmtegni41eiigzmlsbd0iizrhnge0ysigzmlsbc1ydwxlpsjldmvub2rkii8+pc9zdmc+cg==); }
  .__pointer-right.__pointer-right:hover:before {
    width: 20px; }
  .__pointer-right.__pointer-right:hover:after {
    left: 20px; }

.__pointer-left.__pointer-left {
  margin: 0;
  padding-left: 40px;
  position: relative;
  font-size: 12px;
  text-decoration: none;
  letter-spacing: 0;
  color: #4a4a4a; }
  .__pointer-left.__pointer-left:before {
    content: '';
    width: 15px;
    height: 1px;
    background: currentColor;
    display: inline-block;
    position: absolute;
    top: 50%;
    margin-top: -1px;
    -webkit-transition: 0.1s;
    -o-transition: 0.1s;
    transition: 0.1s; }
  .__pointer-left.__pointer-left:after {
    content: '';
    width: 9px;
    height: 9px;
    display: inline-block;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    top: 50%;
    margin-top: -5px;
    -webkit-transition: 0.1s;
    -o-transition: 0.1s;
    transition: 0.1s; }
  .__pointer-left.__pointer-left:hover {
    cursor: pointer; }
  .__pointer-left.__pointer-left::before {
    left: 5px; }
  .__pointer-left.__pointer-left::after {
    left: 0;
    background-image: url(data:image/svg+xml;base64,phn2zyb3awr0ad0imtiiighlawdodd0imtmiihzpzxdcb3g9ijagmcaxmiaxmyigeg1sbnm9imh0dha6ly93d3cudzmub3jnlziwmdavc3znij48cgf0acbkpsjnlje3mya2ljvdmy43nzegns4wnia4ljizmyayljygmtegmew4ljgyidyunsaxmsaxm0m4ljizmyaxmc4zotggmy43nya3ljkzos4xnzmgni41eiigzmlsbd0iizrhnge0ysigzmlsbc1ydwxlpsjldmvub2rkii8+pc9zdmc+cg==); }
  .__pointer-left.__pointer-left:hover::before {
    width: 20px; }

/*
Chip

Markup:
<a href="#0" class="chip"><img src="http://placehold.it/24" class="chip__icon"><span class="chip__label">Gesundheit <br/>& Natur</span><span class="chip__close"></span></a>
<button class="chip"><img src="http://placehold.it/24" class="chip__icon"><span class="chip__label">Gesundheit & Natur</span><span class="chip__close"></span></button>
<div class="chip"><img src="http://placehold.it/24" class="chip__icon"><span class="chip__label">Gesundheit & Natur</span><span class="chip__close"></span></div>

Styleguide buttons.chip
*/
.chip {
  min-height: 38px;
  margin: 0;
  padding: 5px 5px 5px 12px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  border: 1px solid transparent;
  border-radius: 50px;
  outline: none;
  text-decoration: none;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  background: rgba(114, 10, 52, 0.4); }

.chip__icon {
  width: 18px;
  height: 18px; }

.chip__label {
  margin: 0 8px; }

.chip__close {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 24px;
          flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: block;
  position: relative;
  border-radius: 50%;
  background: rgba(114, 10, 52, 0.7);
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s; }
  .chip__close:hover {
    cursor: pointer;
    background: #720a34; }
  .chip__close:before, .chip__close:after {
    content: '';
    display: block;
    width: 14px;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 5px;
    background: currentColor;
    -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
            transform-origin: center center; }
  .chip__close:before {
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg); }
  .chip__close:after {
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg); }

/**
* Forms
*
* Styleguide forms
*/
/*
Checkbox

.checkbox--decent - Dezent
.has-error - Error

Markup:
<div class="checkbox  {{modifier_class}}">
    <input type="checkbox" id="cb-1" value="spring">
    <label for="cb-1">Frühling</label>
</div>
<div class="checkbox  {{modifier_class}}">
    <input type="checkbox" id="cb-2" value="summer">
    <label for="cb-2">Sommer</label>
</div>
<div class="checkbox  {{modifier_class}}">
    <input type="checkbox" id="cb-3" value="autumn">
    <label for="cb-3">Herbst</label>
</div>
<div class="checkbox  {{modifier_class}}">
    <input type="checkbox" id="cb-4" value="winter">
    <label for="cb-4"><img src="http://placehold.it/24"><span>Gesundheit und Natur</span></label>
</div>

Styleguide forms.checkbox
*/
.checkbox {
  position: relative; }
  .checkbox + .checkbox {
    margin-top: 40px; }
  .checkbox.has-error {
    color: #fd6d6d; }
    .checkbox.has-error label:before {
      border-color: currentColor; }
  .checkbox.is-disabled {
    opacity: 0.3;
    pointer-events: none; }
  .checkbox label {
    display: inline-block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-width: 240px;
    min-height: 24px;
    max-width: 500px;
    padding-left: 40px;
    cursor: pointer; }
    .checkbox label img,
    .checkbox label svg {
      width: 20px;
      height: 20px;
      -webkit-box-flex: 0;
          -ms-flex: 0 0 20px;
              flex: 0 0 20px; }
      @media (min-width: 40em) {
        .checkbox label img,
        .checkbox label svg {
          width: 24px;
          height: 24px;
          -webkit-box-flex: 0;
              -ms-flex: 0 0 24px;
                  flex: 0 0 24px; } }
    .checkbox label span:not([class]) {
      margin: 0;
      font-family: sans-serif;
      letter-spacing: 0;
      font-size: 11px;
      font-weight: 400;
      color: "inherit";
      line-height: 1.15;
      margin-left: 10px;
      font-weight: 700; }
      @media (min-width: 40em) {
        .checkbox label span:not([class]) {
          font-size: 14px; } }
      .fl .checkbox label span:not([class]) {
        font-family: "Noto Sans", sans-serif; }
      @media (min-width: 40em) {
        .checkbox label span:not([class]) {
          margin-left: 15px; } }
      .checkbox label span:not([class]) a {
        color: inherit; }
        .checkbox label span:not([class]) a:hover {
          opacity: 0.75; }
    .checkbox label img,
    .checkbox label svg {
      margin-right: 15px; }
    .checkbox label:before {
      content: '';
      width: 24px;
      height: 24px;
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -12px;
      display: block;
      border: 1px solid currentColor; }
    .checkbox label:after {
      content: '';
      width: 20px;
      height: 17px;
      position: absolute;
      top: 50%;
      margin-top: -9px;
      left: 4px;
      background: url(data:image/svg+xml;base64,phn2zyb3awr0ad0imjqiighlawdodd0imjqiihzpzxdcb3g9ijagmcayncayncigeg1sbnm9imh0dha6ly93d3cudzmub3jnlziwmdavc3znij48cgf0acbkpsjnmtaunjyyide2ljk1mmwtnc42ni00ljy2muw1idezlji5mmw1ljk2iduuotygny44otctmtmuntm4tde3ljyznca1eiigzmlsbc1ydwxlpsjub256zxjviibmawxspsijzmzmii8+pc9zdmc+cg==) no-repeat;
      background-size: contain;
      display: none; }
    .checkbox label a:not([class]) {
      position: relative;
      text-decoration: none;
      color: inherit;
      font-weight: 500;
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s; }
      .checkbox label a:not([class]):hover {
        color: currentColor; }
  .checkbox input[type='checkbox'] {
    position: absolute;
    left: -9999px;
    opacity: 0; }
  .checkbox input[type='checkbox']:checked + label:before {
    background: currentColor; }
  .checkbox input[type='checkbox']:checked + label:after {
    display: block; }

.checkbox--decent {
  font-size: 12px; }
  .checkbox--decent label {
    max-width: none; }
    .checkbox--decent label a:not([class]) {
      font-weight: 700;
      text-decoration: underline;
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s; }
      .checkbox--decent label a:not([class]):hover {
        opacity: 0.75; }

/*
Dropdown

is-active - Offenes Dropdown

Markup:
<div style="background: #f0efec; padding: 10px;">
    <div class="dropdown  {{modifier_class}}">
        <span class="dropdown__value">2</span>
        <ul class="dropdown__options">
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>...</li>
            <li>11</li>
        </ul>
        <input type="hidden" name="my-counter" value="2" />
        <!--<div class="dropdown__backdrop"></div>-->
    </div>
</div>

Styleguide forms.dropdown
*/
.dropdown {
  padding: 15px 30px 15px 20px;
  display: inline-block;
  background: #fff;
  color: #4a4a4a;
  position: relative; }
  .dropdown::after {
    content: '\203A';
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -7px;
    font-weight: 700;
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
    color: currentColor;
    pointer-events: none; }
  .dropdown.is-active::after {
    -webkit-transform: rotate(90deg) scale(-1, 1);
        -ms-transform: rotate(90deg) scale(-1, 1);
            transform: rotate(90deg) scale(-1, 1); }
  .dropdown--small {
    padding: 11px 20px; }

.dropdown__value {
  margin: 0;
  font-family: sans-serif;
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 400;
  color: #4a4a4a;
  line-height: 1.15;
  line-height: 1;
  font-weight: 700;
  margin-right: 40px;
  vertical-align: middle;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  @media (min-width: 40em) {
    .dropdown__value {
      font-size: 14px; } }
  .fl .dropdown__value {
    font-family: "Noto Sans", sans-serif; }

.dropdown__options {
  min-width: 100%;
  max-height: 320px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  margin-top: 10px;
  padding: 10px 0;
  list-style: none;
  position: absolute;
  background: #fff;
  top: 100%;
  left: 0;
  z-index: 2;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
  -webkit-transform-origin: top;
      -ms-transform-origin: top;
          transform-origin: top;
  -webkit-transform: scale(1, 0);
      -ms-transform: scale(1, 0);
          transform: scale(1, 0);
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s; }
  .is-active .dropdown__options {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1); }
  .dropdown__options li {
    padding: 5px 20px; }
    .dropdown__options li:hover {
      cursor: pointer; }

.dropdown__backdrop {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1; }

.DatepickerView {
  display: inline-block;
  position: relative;
  background: #ffffff;
  color: #4a4a4a; }
  .DatepickerView::after {
    content: '\203A';
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -7px;
    font-weight: 700;
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
    color: currentColor;
    pointer-events: none; }
  .DatepickerView.is-active::after {
    -webkit-transform: rotate(90deg) scale(-1, 1);
        -ms-transform: rotate(90deg) scale(-1, 1);
            transform: rotate(90deg) scale(-1, 1); }
  .DatepickerView.is-disabled {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2); }

.DatepickerFieldView {
  display: block; }

.DatepickerFieldView__label {
  position: absolute;
  left: 20px;
  top: 20px;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.41; }

.DatepickerView .SingleDatePicker,
.DatepickerView .SingleDatePickerInput,
.DatepickerView .DateInput {
  width: 100%; }

.DatepickerView .DateInput_input {
  margin: 0;
  font-family: sans-serif;
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 400;
  color: #4a4a4a;
  line-height: 1.15;
  font-weight: 700;
  padding: 16px 30px 16px 20px;
  display: inline-block;
  border: none;
  cursor: default; }
  @media (min-width: 40em) {
    .DatepickerView .DateInput_input {
      font-size: 14px; } }
  .fl .DatepickerView .DateInput_input {
    font-family: "Noto Sans", sans-serif; }

.DatepickerView.DatepickerFieldView .DateInput_input {
  font-weight: 700;
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  letter-spacing: 0;
  line-height: 1.8;
  font-size: 15px;
  line-height: 1;
  padding: 45px 20px 10px 20px;
  display: block;
  border-left: 3px solid #acd389; }
  @media (min-width: 40em) {
    .DatepickerView.DatepickerFieldView .DateInput_input {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .DatepickerView.DatepickerFieldView .DateInput_input a:not([class]) {
    color: currentColor; }
    .DatepickerView.DatepickerFieldView .DateInput_input a:not([class]):hover {
      opacity: 0.75; }
  .DatepickerView.DatepickerFieldView .DateInput_input *:first-child {
    margin-top: 0; }
  .DatepickerView.DatepickerFieldView .DateInput_input *:last-child {
    margin-bottom: 0; }
  @media (min-width: 64em) {
    .DatepickerView.DatepickerFieldView .DateInput_input {
      line-height: 2; } }

.DatepickerView.DatepickerFieldView.has-error .DateInput_input {
  outline: 1px solid #fd6d6d; }

.DatepickerView .DateInput_input::-webkit-input-placeholder {
  color: inherit; }

.DatepickerView .DateInput_input:-ms-input-placeholder {
  color: inherit; }

.DatepickerView .DateInput_input::placeholder {
  color: inherit; }

.DatepickerView .DayPickerNavigation_button {
  border: none; }

.DatepickerView .CalendarDay {
  outline: none;
  border-color: transparent; }

.DatepickerView .CalendarDay__selected {
  background: #409560; }

.DatepickerView .DayPicker_weekHeader {
  color: #9b9b9b; }

.DatepickerView .DateInput_fang {
  margin-top: -6px; }

.DatepickerView .SingleDatePicker_picker {
  margin-top: -8px; }

.DatepickerView.DatepickerFieldView .DateInput_fang {
  margin-top: 26px; }

.DatepickerView.DatepickerFieldView .SingleDatePicker_picker {
  margin-top: 25px; }

.DatepickerView .DateInput__disabled {
  background: transparent; }

.DatepickerView .DateInput_input__disabled {
  background: transparent;
  color: #ffffff;
  font-style: normal; }

.DatepickerView .SingleDatePickerInput {
  background: transparent; }

.DatepickerFieldView__error {
  font-weight: 700;
  color: #fd6d6d;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.41;
  display: none;
  margin-left: 20px;
  margin-top: 5px; }
  @media (min-width: 40em) {
    .DatepickerFieldView__error {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .DatepickerFieldView__error a:not([class]) {
    color: currentColor; }
    .DatepickerFieldView__error a:not([class]):hover {
      opacity: 0.75; }
  .DatepickerFieldView__error *:first-child {
    margin-top: 0; }
  .DatepickerFieldView__error *:last-child {
    margin-bottom: 0; }

.DatepickerFieldView.has-error + .DatepickerFieldView__error {
  display: block; }

/*
Searchfield

Markup:
<div style="padding: 10px; background: #666;">
<div class="searchfield">
    <div class="searchfield__icon">
        <img src="http://placehold.it/24" />
    </div>
    <input type="text" name="" placeholder="Geben Sie einen Suchbegriff ein">
</div>
</div>

Styleguide forms.searchfield
*/
.searchfield {
  position: relative;
  color: #ffffff; }
  .searchfield__icon {
    position: absolute;
    top: 50%;
    left: 10px;
    margin-top: -12px;
    pointer-events: none; }
  .searchfield input {
    margin: 0;
    font-family: sans-serif;
    letter-spacing: 0;
    font-size: 11px;
    font-weight: 400;
    color: #4a4a4a;
    line-height: 1.15;
    width: 100%;
    font-weight: 700;
    padding: 15px;
    padding-left: 60px;
    -webkit-box-shadow: 0;
            box-shadow: 0;
    border: 1px solid #ffffff;
    border-radius: 0px;
    background: transparent;
    color: inherit;
    outline: none;
    -webkit-appearance: none; }
    @media (min-width: 40em) {
      .searchfield input {
        font-size: 14px; } }
    .fl .searchfield input {
      font-family: "Noto Sans", sans-serif; }
    .searchfield input::-webkit-input-placeholder {
      font-size: 12px;
      color: #ffffff; }
    .searchfield input:-ms-input-placeholder {
      font-size: 12px;
      color: #ffffff; }
    .searchfield input::placeholder {
      font-size: 12px;
      color: #ffffff; }

/*
Textfield

Styleguide forms.textfield
*/
/*
Textfield

.has-error - Error
.has-value - mit Value
.has-outline - mit Outline

Markup:
<div style="background: #f0efec; padding: 20px;">
    <div class="textfield   {{modifier_class}}" >
        <div class="textfield__holder">
            <input type="text" class="textfield__input"/>
            <span class="textfield__label">Ihr Name</span>
        </div>
        <div class="textfield__error">Bitte geben Sie Ihren Namen ein.</div>
     </div>
</div>

Styleguide forms.textfield.1
*/
/*
Textarea

.has-error - Error
.has-value - mit Value
.has-outline - mit Outline

Markup:
<div style="background: #f0efec; padding: 20px;">
    <div class="textfield  is-area  {{modifier_class}}" >
        <div class="textfield__holder">
            <textarea class="textfield__input"></textarea>
            <span class="textfield__label">Ihr Name</span>
        </div>
        <div class="textfield__error">Bitte geben Sie Ihren Namen ein.</div>
     </div>
</div>

Styleguide forms.textfield.2
*/
.textfield {
  font-weight: 700;
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  letter-spacing: 0;
  line-height: 1.8; }
  @media (min-width: 40em) {
    .textfield {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .textfield a:not([class]) {
    color: currentColor; }
    .textfield a:not([class]):hover {
      opacity: 0.75; }
  .textfield *:first-child {
    margin-top: 0; }
  .textfield *:last-child {
    margin-bottom: 0; }
  @media (min-width: 64em) {
    .textfield {
      line-height: 2; } }

.textfield__holder {
  position: relative; }
  .textfield.is-area .textfield__holder:before {
    content: '';
    width: calc(100% - 3px);
    height: 45px;
    position: absolute;
    top: 0;
    left: 3px;
    background: #fff; }

.textfield__input {
  width: 100%;
  border: none;
  border-left: 3px solid transparent;
  padding: 45px 20px 15px 20px;
  -webkit-appearance: none; }
  .textfield__input:focus,
  .textfield.has-value .textfield__input {
    border-left: 3px solid #acd389;
    outline: none; }
  .textfield.has-outline .textfield__input {
    outline: 1px solid #9b9b9b; }
  .textfield.has-error .textfield__input {
    outline: 1px solid #fd6d6d; }
  .textfield.is-area .textfield__input {
    min-height: 150px;
    resize: vertical; }

.textfield__label {
  position: absolute;
  left: 20px;
  top: 40px;
  pointer-events: none;
  -webkit-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out; }
  input:focus ~ .textfield__label,
  textarea:focus ~ .textfield__label,
  .textfield.is-floating .textfield__label,
  .textfield.has-value .textfield__label {
    top: 20px;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0;
    line-height: 1.41; }
  .textfield.is-area .textfield__label {
    top: 20px; }

.textfield__error {
  font-weight: 700;
  color: #fd6d6d;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.41;
  display: none;
  margin-left: 20px;
  margin-top: 5px; }
  @media (min-width: 40em) {
    .textfield__error {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .textfield__error a:not([class]) {
    color: currentColor; }
    .textfield__error a:not([class]):hover {
      opacity: 0.75; }
  .textfield__error *:first-child {
    margin-top: 0; }
  .textfield__error *:last-child {
    margin-bottom: 0; }
  .textfield.has-error .textfield__error {
    display: block; }

/*
Radio Button

Markup:
<div style="background: #f0efec; padding: 20px;">
    <div class="radio-button">
        <input type="radio" id="rb-1" name="gender" value="female" />
        <label for="rb-1">Frau</label>
    </div>
    <div class="radio-button">
        <input type="radio" id="rb-2" name="gender" value="male" />
        <label for="rb-2">Herr</label>
    </div>
    <div class="radio-button">
        <input type="radio" id="rb-3" name="gender" value="other" />
        <label for="rb-3">Divers</label>
    </div>
</div>

Styleguide forms.radio-button
*/
.radio-button {
  position: relative; }
  .radio-button.is-disabled {
    opacity: 0.3;
    pointer-events: none; }
  .radio-button label {
    display: inline-block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-weight: 700;
    color: #4a4a4a;
    font-style: normal;
    -webkit-transition: color 0.25s;
    -o-transition: color 0.25s;
    transition: color 0.25s;
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
    letter-spacing: 0;
    line-height: 1.8;
    min-height: 24px;
    max-width: 500px;
    padding-left: 40px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer; }
    .radio-button label img,
    .radio-button label svg {
      width: 20px;
      height: 20px;
      -webkit-box-flex: 0;
          -ms-flex: 0 0 20px;
              flex: 0 0 20px; }
      @media (min-width: 40em) {
        .radio-button label img,
        .radio-button label svg {
          width: 24px;
          height: 24px;
          -webkit-box-flex: 0;
              -ms-flex: 0 0 24px;
                  flex: 0 0 24px; } }
    .radio-button label span:not([class]) {
      margin: 0;
      font-family: sans-serif;
      letter-spacing: 0;
      font-size: 11px;
      font-weight: 400;
      color: "inherit";
      line-height: 1.15;
      margin-left: 10px;
      font-weight: 700; }
      @media (min-width: 40em) {
        .radio-button label span:not([class]) {
          font-size: 14px; } }
      .fl .radio-button label span:not([class]) {
        font-family: "Noto Sans", sans-serif; }
      @media (min-width: 40em) {
        .radio-button label span:not([class]) {
          margin-left: 15px; } }
      .radio-button label span:not([class]) a {
        color: inherit; }
        .radio-button label span:not([class]) a:hover {
          opacity: 0.75; }
    @media (min-width: 40em) {
      .radio-button label {
        -webkit-hyphens: none;
            -ms-hyphens: none;
                hyphens: none; } }
    .radio-button label a:not([class]) {
      color: currentColor; }
      .radio-button label a:not([class]):hover {
        opacity: 0.75; }
    .radio-button label *:first-child {
      margin-top: 0; }
    .radio-button label *:last-child {
      margin-bottom: 0; }
    @media (min-width: 64em) {
      .radio-button label {
        line-height: 2; } }
    .radio-button label:before {
      content: '';
      width: 24px;
      height: 24px;
      border: 1px solid transparent;
      border-radius: 50%;
      background-color: #ffffff;
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -12px;
      display: block; }
    .radio-button label:after {
      content: '';
      width: 20px;
      height: 17px;
      position: absolute;
      top: 50%;
      left: 4px;
      margin-top: -9px;
      background: url(data:image/svg+xml;base64,phn2zyb3awr0ad0imjqiighlawdodd0imjqiihzpzxdcb3g9ijagmcayncayncigeg1sbnm9imh0dha6ly93d3cudzmub3jnlziwmdavc3znij48cgf0acbkpsjnmtaunjyyide2ljk1mmwtnc42ni00ljy2muw1idezlji5mmw1ljk2iduuotygny44otctmtmuntm4tde3ljyznca1eiigzmlsbc1ydwxlpsjub256zxjviibmawxspsijzmzmii8+pc9zdmc+cg==) no-repeat;
      background-size: contain;
      display: none; }
    .radio-button label a:not([class]) {
      position: relative;
      text-decoration: none;
      color: inherit;
      font-weight: 500;
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s; }
      .radio-button label a:not([class]):hover {
        color: currentColor; }
  .radio-button input[type='radio'] {
    position: absolute;
    left: -9999px;
    opacity: 0; }
  .radio-button input[type='radio']:checked + label:before {
    background: #afcc56;
    border: 1px solid transparent; }
  .radio-button input[type='radio']:checked + label:after {
    display: block; }

/*
Radio Block

Markup:
    <div class="radio-block">
        <input type="radio" name="tour" id="rb-4"/>
        <label class="radio-block__label" for="rb-4">
            <div class="radio-block__content">
                <h4 class="radio-block__title">Tour 1: <br/> Uferpark, Villengärten, kapuzinerkirche (blumenschau)</h4>
                <ul class="radio-block__list">
                    <li class="radio-block__list-item">
                        <div class="radio-block__list-fact">    
                            <img src="http://placehold.it/24">
                            <b>Kosten</b>
                        </div>
                        <div class="radio-block__list-text">130,00 € pro Gruppe (max. 25 Personen pro Führung) zzgl. Eintritt</div>
                    </li>
                    <li class="radio-block__list-item">
                        <div class="radio-block__list-fact">    
                            <img src="http://placehold.it/24">
                            <b>Dauer</b>
                        </div>
                        <div class="radio-block__list-text">ca. 1,5 – 2 Stunden</div>
                    </li>
                    <li class="radio-block__list-item">
                        <div class="radio-block__list-fact">    
                            <img src="http://placehold.it/24">
                            <b>Treffpunkt</b>
                        </div>
                        <div class="radio-block__list-text">Uferpark, <div class="radio-block__tooltip" data-tooltip="Die Tour ist stufenlos aber die natürliche Topographie Überlingens ist in Teilbereichen (Menzinger Gärten und der obere Bereich der Rosenobelgärten) mit starken Steigungen/Gefällen von ca. 15% versehen."><div class="radio-block__tooltip__nobreak">diese Route ist nicht barrierefrei<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon  radio-block__tooltip__icon"><path fill="currentColor" fill-rule="evenodd" d="M23 11.853c.032 3.044-1.007 5.647-3.119 7.807-2.111 2.16-4.69 3.274-7.734 3.34-3.044.032-5.647-1.007-7.807-3.119-2.16-2.111-3.274-4.69-3.34-7.734C.969 9.103 2.008 6.5 4.12 4.34 6.23 2.18 8.809 1.066 11.853 1 14.897.969 17.5 2.008 19.66 4.12c2.16 2.111 3.274 4.69 3.34 7.734zM12.94 5.56c-.29-.29-.66-.435-1.112-.435-.451 0-.822.145-1.112.435-.29.29-.435.66-.435 1.112 0 .451.145.822.435 1.112.29.29.661.435 1.112.435.451 0 .822-.145 1.112-.435.29-.29.435-.661.435-1.112 0-.451-.145-.822-.435-1.112zm1.123 13.315v-.537h-1.118v-8.4H9.594v.586h1.117v7.814H9.594v.537h4.469z"/></svg></div></div></div>
                    </li>
                </ul>
            </div>
        </label>
    </div>

Styleguide forms.radio-block
*/
.radio-block {
  position: relative;
  background-color: #ffffff; }
  .radio-block.is-disabled {
    opacity: 0.3;
    pointer-events: none; }
  .radio-block input[type='radio'] {
    position: absolute;
    left: -9999px;
    opacity: 0; }
  .radio-block input[type='radio']:checked + label:before {
    background: #afcc56;
    border: 1px solid transparent; }
  .radio-block input[type='radio']:checked + label:after {
    display: block; }

.radio-block__label {
  display: block;
  padding-left: 60px;
  cursor: pointer; }
  .radio-block__label:before {
    content: '';
    width: 44px;
    height: 44px;
    border: 1px solid #9b9b9b;
    border-radius: 50%;
    background-color: #ffffff;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    left: 8px;
    display: block; }
  .radio-block__label:after {
    content: '';
    width: 40px;
    height: 37px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    left: 11px;
    background: url(data:image/svg+xml;base64,phn2zyb3awr0ad0imjqiighlawdodd0imjqiihzpzxdcb3g9ijagmcayncayncigeg1sbnm9imh0dha6ly93d3cudzmub3jnlziwmdavc3znij48cgf0acbkpsjnmtaunjyyide2ljk1mmwtnc42ni00ljy2muw1idezlji5mmw1ljk2iduuotygny44otctmtmuntm4tde3ljyznca1eiigzmlsbc1ydwxlpsjub256zxjviibmawxspsijzmzmii8+pc9zdmc+cg==) no-repeat;
    background-size: contain;
    display: none; }
  .radio-block__label a:not([class]) {
    position: relative;
    text-decoration: none;
    color: inherit;
    font-weight: 500;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s; }
    .radio-block__label a:not([class]):hover {
      color: currentColor; }

.radio-block__content {
  padding: 10px 20px;
  border-left: 2px solid #eaeaea; }

.radio-block__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-family: serif;
  font-size: 14px;
  font-weight: 700;
  color: #4a4a4a;
  line-height: 1.18;
  margin-bottom: 20px; }
  @media (min-width: 40em) {
    .radio-block__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .radio-block__title {
    font-family: "UrgeText-SemiBold", serif; }
  .fl .radio-block__title {
    font-family: "Noto Sans", sans-serif; }
  .radio-block__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .radio-block__title {
      font-size: 17px; } }

.radio-block__list {
  padding: 0;
  margin: 0; }

.radio-block__list-item {
  font-weight: 400;
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.41;
  list-style: none; }
  @media (min-width: 40em) {
    .radio-block__list-item {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .radio-block__list-item a:not([class]) {
    color: currentColor; }
    .radio-block__list-item a:not([class]):hover {
      opacity: 0.75; }
  .radio-block__list-item *:first-child {
    margin-top: 0; }
  .radio-block__list-item *:last-child {
    margin-bottom: 0; }
  .radio-block__list-item + .radio-block__list-item {
    margin-top: 20px; }
  @media (min-width: 40em) {
    .radio-block__list-item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start; }
      .radio-block__list-item + .radio-block__list-item {
        margin-top: 10px; } }

.radio-block__list-fact {
  margin-bottom: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .radio-block__list-fact > * + * {
    margin-left: 5px; }
  @media (min-width: 40em) {
    .radio-block__list-fact {
      margin-bottom: 0;
      padding-right: 10px;
      -webkit-box-flex: 1;
          -ms-flex: 1 0 25%;
              flex: 1 0 25%; } }

.radio-block__list-text {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 75%;
          flex: 1 0 75%;
  text-align: left; }

.radio-block__tooltip {
  display: inline-block;
  text-decoration: underline;
  position: relative; }
  .radio-block__tooltip:before {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 11px;
    -webkit-transform: translate(100%, 0);
        -ms-transform: translate(100%, 0);
            transform: translate(100%, 0);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #4a4a4a;
    -webkit-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
    opacity: 0;
    pointer-events: none; }
  .radio-block__tooltip:after {
    content: attr(data-tooltip);
    min-width: 220px;
    max-width: 100%;
    padding: 18px 10px 15px;
    position: absolute;
    z-index: 1;
    bottom: -5px;
    right: 10px;
    -webkit-transform: translate(50%, 100%);
        -ms-transform: translate(50%, 100%);
            transform: translate(50%, 100%);
    color: #ffffff;
    background: #4a4a4a;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
    -webkit-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
    opacity: 0;
    pointer-events: none; }
    @media (min-width: 64em) {
      .radio-block__tooltip:after {
        right: 40px;
        -webkit-transform: translate(100%, 100%);
            -ms-transform: translate(100%, 100%);
                transform: translate(100%, 100%); } }
  .radio-block__tooltip:hover:before, .radio-block__tooltip:hover:after {
    opacity: 1; }

.radio-block__tooltip__nobreak {
  white-space: nowrap; }

.radio-block__tooltip__icon {
  width: 12px;
  height: 12px;
  margin-left: 5px;
  -webkit-transform: translate(0, -3px);
      -ms-transform: translate(0, -3px);
          transform: translate(0, -3px); }

/**
* Buidling Blocks
*
* Styleguide blocks
*/
/*
Combo

Styleguide blocks.combo
*/
/*
Standard

Markup:
<div class="combo">
    <h2 class="combo__supertitle">Bürgerinformation</h2>
    <h1 class="combo__title">Immer eine offene Türe</h1>
    <div class="combo__text">
        Das Green-Team hat seinen Sitz im ehemaligen Haus des Gastes in der Bahnhofstraße 19, mitten im künftigen Landesgartenschau-Gelände. Hier können die Bürgerinnen und Bürger die Pläne einsehen von Montag bis Freitag 9 bis 16 und Donnerstag bis 18 Uhr. In der neuen Geschäftsstelle ist genügend Platz für das Team, das in den kommenden Jahren mit mehr und mehr Aufgaben betraut wird.
    </div>
    <div class="combo__actions">
        <a href="#0" class="combo__action">Lorem Ipsum</a>
    </div>
</div>

Styleguide blocks.combo.1
*/
.combo > *:last-child {
  margin-bottom: 0; }

.combo__supertitle {
  margin: 0;
  font-style: normal;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #afcc56;
  letter-spacing: 1.75px;
  line-height: 1.3;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  margin-bottom: 10px; }
  @media (min-width: 40em) {
    .combo__supertitle {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none;
      font-size: 14px; } }
  .fl .combo__supertitle {
    font-family: "Noto Sans", sans-serif; }
  @media (min-width: 40em) {
    .combo__supertitle {
      margin-bottom: 20px; } }

.combo__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 36px;
  color: #18492b;
  line-height: 1.26;
  text-decoration: underline;
  margin-bottom: 20px;
  hyphens: auto; }
  @media (min-width: 40em) {
    .combo__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .combo__title {
    font-family: "UrgeText-SemiBold", serif; }
  .combo__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .combo__title {
      font-size: 45px; } }
  @media (min-width: 40em) {
    .combo__title {
      margin-bottom: 40px; } }
  @media (min-width: 64em) {
    .combo__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .combo__title a {
    color: inherit;
    text-decoration: none; }

.combo__text {
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  letter-spacing: 0;
  line-height: 1.8;
  margin-bottom: 40px; }
  @media (min-width: 40em) {
    .combo__text {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .combo__text a:not([class]) {
    color: currentColor; }
    .combo__text a:not([class]):hover {
      opacity: 0.75; }
  .combo__text *:first-child {
    margin-top: 0; }
  .combo__text *:last-child {
    margin-bottom: 0; }
  @media (min-width: 64em) {
    .combo__text {
      line-height: 2; } }
  .combo__text ul {
    overflow: hidden;
    padding-left: 20px; }
  .combo__text table,
  .combo__text tbody {
    vertical-align: top; }
    .combo__text table td,
    .combo__text tbody td {
      min-width: 80px; }

.combo__action {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  -webkit-box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
          box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
  background: #afcc56; }
  @media (min-width: 40em) {
    .combo__action {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .combo__action svg,
  .combo__action img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .combo__action * + svg,
  .combo__action * + img {
    margin-right: 0;
    margin-left: 15px; }
  .combo__action:hover {
    cursor: pointer;
    color: #ffffff; }
  .combo__action:hover {
    background-color: #88a431; }
  .combo__action:disabled, .combo__action.is-disabled {
    pointer-events: none;
    opacity: 0.25; }

.combo__action-cta {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  -webkit-box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
          box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
  background: #ce115d; }
  @media (min-width: 40em) {
    .combo__action-cta {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .combo__action-cta svg,
  .combo__action-cta img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .combo__action-cta * + svg,
  .combo__action-cta * + img {
    margin-right: 0;
    margin-left: 15px; }
  .combo__action-cta:hover {
    cursor: pointer;
    color: #ffffff; }
  .combo__action-cta:hover {
    background-color: #870b3d; }
  .combo__action-cta:disabled, .combo__action-cta.is-disabled {
    pointer-events: none;
    opacity: 0.25; }

/*
mit Zitat

Markup:
<div class="combo">
    <h2 class="combo__supertitle">Bürgerinformation</h2>
    <h1 class="combo__title">Immer eine offene Türe</h1>
    <div class="combo__text">
        Das Green-Team hat seinen Sitz im ehemaligen Haus des Gastes in der Bahnhofstraße 19, mitten im künftigen Landesgartenschau-Gelände. Hier können die Bürgerinnen und Bürger die Pläne einsehen von Montag bis Freitag 9 bis 16 und Donnerstag bis 18 Uhr. In der neuen Geschäftsstelle ist genügend Platz für das Team, das in den kommenden Jahren mit mehr und mehr Aufgaben betraut wird.
    </div>
    <blockquote class="combo__quote">
        Das Green-Team hat seinen Sitz im ehemaligen Haus des Gastes in der Bahnhofstraße 19, mitten im künftigen Landesgartenschau-Gelände. Hier können die Bürgerinnen und Bürger die Pläne einsehen von Montag bis Freitag 9 bis 16 und Donnerstag bis 18 Uhr. In der neuen Geschäftsstelle ist genügend Platz für das Team, das in den kommenden Jahren mit mehr und mehr Aufgaben betraut wird.
    </blockquote>
    <div class="combo__text">
        Das Green-Team hat seinen Sitz im ehemaligen Haus des Gastes in der Bahnhofstraße 19, mitten im künftigen Landesgartenschau-Gelände. Hier können die Bürgerinnen und Bürger die Pläne einsehen von Montag bis Freitag 9 bis 16 und Donnerstag bis 18 Uhr. In der neuen Geschäftsstelle ist genügend Platz für das Team, das in den kommenden Jahren mit mehr und mehr Aufgaben betraut wird.
    </div>
    <div class="combo__actions">
        <a href="#0" class="combo__action">Lorem Ipsum</a>
    </div>
</div>

Styleguide blocks.combo.2
*/
.combo__quote {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 24px;
  color: #afcc56;
  line-height: 1.6;
  margin-bottom: 40px; }
  @media (min-width: 40em) {
    .combo__quote {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .combo__quote {
    font-family: "UrgeText-SemiBold", serif; }
  .combo__quote sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .combo__quote {
      font-size: 30px; } }

/*
Mit kleinem Titel

Markup:
<div class="combo">
    <h2 class="combo__supertitle">Bürgerinformation</h2>
    <h1 class="combo__small-title">Immer eine offene Türe</h1>
    <div class="combo__text">
        Das Green-Team hat seinen Sitz im ehemaligen Haus des Gastes in der Bahnhofstraße 19, mitten im künftigen Landesgartenschau-Gelände. Hier können die Bürgerinnen und Bürger die Pläne einsehen von Montag bis Freitag 9 bis 16 und Donnerstag bis 18 Uhr. In der neuen Geschäftsstelle ist genügend Platz für das Team, das in den kommenden Jahren mit mehr und mehr Aufgaben betraut wird.
    </div>
    <div class="combo__actions">
        <a href="#0" class="combo__action">Lorem Ipsum</a>
    </div>
</div>

Styleguide blocks.combo.3
*/
.combo__small-title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 28px;
  color: #18492b;
  line-height: 1.25;
  margin-bottom: 20px; }
  @media (min-width: 40em) {
    .combo__small-title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .combo__small-title {
    font-family: "UrgeText-SemiBold", serif; }
  .combo__small-title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .combo__small-title {
      font-size: 36px; } }
  @media (min-width: 40em) {
    .combo__small-title {
      margin-bottom: 40px; } }
  .combo__small-title a {
    color: inherit;
    text-decoration: none; }

/*
Mit Subtitle

Markup:
<div class="combo">
    <h2 class="combo__supertitle">Immer informiert</h2>
    <h1 class="combo__title">Pressemitteilungen</h1>
    <h3 class="combo__subtitle">Liebe Medienschaffende,<br><br>
    hier finden Sie aktuelle Pressemitteilungen und Downloads zur Landesgartenschau Ãœberlingen 2020.</h3>
</div>

Styleguide blocks.combo.4
*/
.combo__subtitle {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 20px;
  color: #18492b;
  line-height: 1.27;
  margin-bottom: 20px; }
  @media (min-width: 40em) {
    .combo__subtitle {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .combo__subtitle {
    font-family: "UrgeText-SemiBold", serif; }
  .combo__subtitle sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .combo__subtitle {
      font-size: 26px; } }
  @media (min-width: 40em) {
    .combo__subtitle {
      margin-bottom: 40px; } }

/*
Boxes

Styleguide blocks.box
*/
/*
Kontaktbox

Markup:
<div class="box">
    <h2 class="box__super">Pressekontakt</h2>
    <h3 class="box__subtitle">Petra Pinscher</h3>
    <div class="box__text">
        T + 49 75551 / 309739-16<br>
        Mobil +491752416621<br>
        p.pintscher@ueberlingen2020.de
    </div>
    <h3 class="box__subtitle">Susanne Suchy</h3>
    <div class="box__text">
        T + 49 75551 / 309739-26<br>
        s.suchy@ueberlingen2020.de
    </div>
</div>

Styleguide blocks.box.1
*/
.box {
  border: 10px solid #dce9c8;
  padding: 20px; }
  .box *:last-child {
    margin-bottom: 0; }

.box__super {
  font-weight: 400;
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.41;
  margin: 0;
  margin-bottom: 20px; }
  @media (min-width: 40em) {
    .box__super {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .box__super a:not([class]) {
    color: currentColor; }
    .box__super a:not([class]):hover {
      opacity: 0.75; }
  .box__super *:first-child {
    margin-top: 0; }
  .box__super *:last-child {
    margin-bottom: 0; }
  @media (min-width: 64em) {
    .box__super {
      margin-bottom: 30px; } }

.box__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 16px;
  color: #18492b;
  line-height: 1.45;
  margin-bottom: 10px; }
  @media (min-width: 40em) {
    .box__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .box__title {
    font-family: "UrgeText-SemiBold", serif; }
  .box__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .box__title {
      font-size: 20px; } }

.box__subtitle {
  margin: 0;
  font-style: normal;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #afcc56;
  letter-spacing: 1.75px;
  line-height: 1.3;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  margin-bottom: 10px; }
  @media (min-width: 40em) {
    .box__subtitle {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none;
      font-size: 14px; } }
  .fl .box__subtitle {
    font-family: "Noto Sans", sans-serif; }
  * + .box__subtitle {
    margin-top: 30px; }

.box__text {
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  letter-spacing: 0;
  line-height: 1.8;
  margin-bottom: 10px; }
  @media (min-width: 40em) {
    .box__text {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .box__text a:not([class]) {
    color: currentColor; }
    .box__text a:not([class]):hover {
      opacity: 0.75; }
  .box__text *:first-child {
    margin-top: 0; }
  .box__text *:last-child {
    margin-bottom: 0; }
  @media (min-width: 64em) {
    .box__text {
      line-height: 2; } }

.box__action {
  color: #ce115d;
  text-decoration: underline;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s; }
  .box__action:hover {
    color: #700932; }

/*
Infobox

Markup:
<div class="box">
    <h2 class="box__title">Erhältlich in der Geschäftsstelle der Landesgartenschau Überlingen 2020 GmbH in der Bahnhofstraße oder in der Kur und Touristik am Landungsplatz.</h2>
    <div class="box__text">
        Montag bis Freitag<br>
        09:30 to 19:00
    </div>
    <a href="#0" class="box__action">› Google Maps</a>
</div>

Styleguide blocks.box.2
*/
/*
Ticketbox

Markup:
<div class="box">
    <h2 class="box__subtitle">Vorverkaufsstellen in Ãœberlingen</h2>
    <div class="box__text-small">
        <p><b>Tourist-Info am Landungsplatz</b><br/>
        (Bis 20. Oktober 2019)<br />
        Montag–Freitag: 9:00–18:00 Uhr <br/>
        Samstag: 9:00–13:00 Uhr <br/>
        Sonntag: 10:00–13:00 Uhr <br/>
        (nur noch September)</p>
        <p>Montag-Freitag: 9:00–12:30 Uhr und 14:00–16:30 Uhr<br />
        Donnerstag: 9:00–12:30 Uhr und 14:00-18:00 Uhr<br />
        (21. Oktober bis 31. Dezember 2019)</p>
    </div>
    <div class="box__text-small">
        <b>LGS-Ticketshop auf der Hofstatt</b><br />
        Mittwoch und Samstag von 8:00 – 14:00 Uhr
    </div>
    <div class="box__text-small">
        <b>Bürgerservice Ü-Punkt, Christophstraße 1</b>
        Montag: 8:00–16:00 Uhr<br />
        Dienstag u. Mittwoch: 8:00–12:00 Uhr<br />
        Donnerstag: 8:00–17:00 Uhr<br />
        Freitag: 8:00–12:00 Uhr
    </div>
</div>

Styleguide blocks.box.3
*/
.box__text-small {
  font-weight: 400;
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.41;
  margin-bottom: 10px; }
  @media (min-width: 40em) {
    .box__text-small {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .box__text-small a:not([class]) {
    color: currentColor; }
    .box__text-small a:not([class]):hover {
      opacity: 0.75; }
  .box__text-small *:first-child {
    margin-top: 0; }
  .box__text-small *:last-child {
    margin-bottom: 0; }

/*
Datebox

Markup:
<div class="datebox">
    <div class="datebox__weekday">Dienstag</div>
    <div class="datebox__date">04.06.</div>
    <div class="datebox__year">2018</div>
</div>

Styleguide blocks.box.4
*/
.datebox {
  padding: 15px 10px;
  border: 5px solid #afcc56;
  display: inline-block;
  background: #ffffff;
  -webkit-box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
          box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
  color: #afcc56;
  text-transform: uppercase;
  letter-spacing: 0.75px; }

.datebox__weekday {
  font-size: 14px; }

.datebox__date {
  font-size: 28px;
  font-weight: 700; }

.datebox__year {
  margin-top: 5px;
  font-size: 13px; }

/*
Notification-Box

Markup:
<div class="notification-box">
    <div class="notification-box__title">Ersatztermin</div>
    <div class="notification-box__text">Freitag, 10. Mai 2021<br>09:00 – 19:00 Uhr</div>
    <a href="#0" class="notification-box__link"><span>Mehr Details</span><img src="http://placehold.it/24"></a>
</div>

Styleguide blocks.box.5
*/
.notification-box {
  width: 100%;
  max-width: 250px;
  padding: 10px;
  padding-bottom: 0;
  background-color: #409560;
  border-left: 6px solid #afcc56;
  color: #fff; }

.notification-box__title {
  font-size: 11px;
  line-height: 1.3625; }

.notification-box__text {
  margin-top: 5px;
  font-weight: 700;
  line-height: 1.3625; }

.notification-box__link {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  padding: 0 !important;
  min-height: auto !important;
  border: none; }
  @media (min-width: 40em) {
    .notification-box__link {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .notification-box__link svg,
  .notification-box__link img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .notification-box__link * + svg,
  .notification-box__link * + img {
    margin-right: 0;
    margin-left: 15px; }
  .notification-box__link:hover {
    cursor: pointer;
    color: #ffffff; }
  .notification-box__link:disabled, .notification-box__link.is-disabled {
    pointer-events: none;
    opacity: 0.25; }
  .notification-box__link:hover {
    color: #d9d9d9; }

/*
Voice

Markup:
<article class="voice">
    <img src="http://placehold.it/640x400" alt="" class="voice__image">
    <h2 class="voice__caption"><b>Jürgen Jankowiak</b><br>Geschäftsleitung Kur und Touristik Überlingen GmbH</h2>
    <h1 class="voice__title">Ich freue mich auf die Landesgartenschau, weil …</h1>
    <blockquote class="voice__text">
        … der Tourismus in Überlingen dadurch viele wichtige Impulse erhält mit neuen attraktiven Angeboten für unsere Gäste, mit dem Uferpark und seinen Seezugängen, dem Pflanzenhaus oder der Modernisierung der Promenade. Auch wird das Profil Überlingens als die Gartenstadt am Bodensee gestärkt und wir profitieren von einer Vielzahl von Marketing- und Vertriebsaktivitäten für die Landesgartenschau. Wir freuen uns auf die weitere kreative Zusammenarbeit mit der Landesgartenschau Überlingen 2020 GmbH in den nächsten Jahren.
    </blockquote>
    <a class="voice__action">Alle Baustellenreports ansehen</a>
</article>

Styleguide blocks.voice
*/
.voice__image {
  max-width: 100%;
  margin-bottom: 5px; }

.voice__caption {
  font-weight: 400;
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.41;
  margin-bottom: 20px; }
  @media (min-width: 40em) {
    .voice__caption {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .voice__caption a:not([class]) {
    color: currentColor; }
    .voice__caption a:not([class]):hover {
      opacity: 0.75; }
  .voice__caption *:first-child {
    margin-top: 0; }
  .voice__caption *:last-child {
    margin-bottom: 0; }
  @media (min-width: 40em) {
    .voice__caption {
      margin-bottom: 40px; } }

.voice__title {
  margin: 0;
  font-style: normal;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #afcc56;
  letter-spacing: 1.75px;
  line-height: 1.3;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  margin-bottom: 20px; }
  @media (min-width: 40em) {
    .voice__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none;
      font-size: 14px; } }
  .fl .voice__title {
    font-family: "Noto Sans", sans-serif; }
  @media (min-width: 40em) {
    .voice__title {
      margin-bottom: 30px; } }

.voice__text {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: serif;
  letter-spacing: 0;
  line-height: 1.45;
  color: #18492b;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  margin-bottom: 20px; }
  @media (min-width: 40em) {
    .voice__text {
      font-size: 20px;
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .voice__text:before {
    content: '\201E';
    font-size: 3em;
    line-height: 0; }
  .fl .voice__text {
    font-family: "UrgeText-SemiBold", serif; }

.voice__action {
  margin: 0;
  padding-left: 40px;
  position: relative;
  font-size: 12px;
  text-decoration: none;
  letter-spacing: 0;
  color: #4a4a4a; }
  .voice__action:before {
    content: '';
    width: 15px;
    height: 1px;
    background: currentColor;
    display: inline-block;
    position: absolute;
    top: 50%;
    margin-top: -1px;
    -webkit-transition: 0.1s;
    -o-transition: 0.1s;
    transition: 0.1s; }
  .voice__action:after {
    content: '';
    width: 9px;
    height: 9px;
    display: inline-block;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    top: 50%;
    margin-top: -5px;
    -webkit-transition: 0.1s;
    -o-transition: 0.1s;
    transition: 0.1s; }
  .voice__action:hover {
    cursor: pointer; }
  .voice__action::before {
    left: 0; }
  .voice__action::after {
    left: 15px;
    background-image: url(data:image/svg+xml;base64,phn2zyb3awr0ad0imtiiighlawdodd0imtmiihzpzxdcb3g9ijagmcaxmiaxmyigeg1sbnm9imh0dha6ly93d3cudzmub3jnlziwmdavc3znij48cgf0acbkpsjnmtegni41qzcundayidcuotqgmi45ncaxmc40lje3myaxm2wylje4ltyunuwumtcyidbdmi45mzkgmi42mdigny40mdmgns4wnjegmtegni41eiigzmlsbd0iizrhnge0ysigzmlsbc1ydwxlpsjldmvub2rkii8+pc9zdmc+cg==); }
  .voice__action:hover:before {
    width: 20px; }
  .voice__action:hover:after {
    left: 20px; }

/*
Teaser

Markup:
<article class="teaser">
    <div class="teaser__image-container">
        <img src="http://placehold.it/640x400" alt="" class="teaser__image">
        <a href="#0"></a>
        <a href="#0" class="teaser__image-action"><img src="http://placehold.it/24">Baustellenreport</a>
    </div>
    <h1 class="teaser__title"><a href="#0">Vereine in Aufbruchstimmung, lorem ipsum dolor lorem ipsum dolor</a></h1>
    <div class="teaser__date"><a href="#0">11. Oktober 2018</a></div>
    <div class="teaser__text">
        Am 14. Oktober wird die Landesgartenschaufahne in Lahr an Überlingen überlegen. „Dann sind wir ganz offiziell Landesgartenschaustadt. Da kann man schon mal aufgeregt sein“, sagte Oberbürgermeister Jan Zeitler am Dienstag bei der zweiten Informationsveranstaltung für die Überlinger Vereine. 150 Interessierte waren …
    </div>
    <a class="teaser__action" href="#0">Alle Baustellenreports ansehen</a>
</article>

Styleguide blocks.teaser
*/
.teaser__image-container {
  position: relative;
  margin-bottom: 30px; }
  .teaser__image-container a:not([class]) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }

.teaser__image {
  max-width: 100%;
  padding-bottom: 20px; }

.teaser__image-action {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  -webkit-box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
          box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
  background: #afcc56;
  position: absolute;
  right: -20px;
  bottom: 0; }
  @media (min-width: 40em) {
    .teaser__image-action {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .teaser__image-action svg,
  .teaser__image-action img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .teaser__image-action * + svg,
  .teaser__image-action * + img {
    margin-right: 0;
    margin-left: 15px; }
  .teaser__image-action:hover {
    cursor: pointer;
    color: #ffffff; }
  .teaser__image-action:hover {
    background-color: #88a431; }
  .teaser__image-action:disabled, .teaser__image-action.is-disabled {
    pointer-events: none;
    opacity: 0.25; }

.teaser__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 20px;
  color: #18492b;
  line-height: 1.27;
  margin-bottom: 15px; }
  @media (min-width: 40em) {
    .teaser__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .teaser__title {
    font-family: "UrgeText-SemiBold", serif; }
  .teaser__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .teaser__title {
      font-size: 26px; } }
  .teaser__title a {
    color: inherit;
    text-decoration: none; }

.teaser__date {
  margin: 0;
  font-style: normal;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #afcc56;
  letter-spacing: 1.75px;
  line-height: 1.3;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  margin-bottom: 15px; }
  @media (min-width: 40em) {
    .teaser__date {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none;
      font-size: 14px; } }
  .fl .teaser__date {
    font-family: "Noto Sans", sans-serif; }
  .teaser__date a {
    color: inherit;
    text-decoration: none; }

.teaser__text {
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  letter-spacing: 0;
  line-height: 1.8;
  margin-bottom: 20px; }
  @media (min-width: 40em) {
    .teaser__text {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .teaser__text a:not([class]) {
    color: currentColor; }
    .teaser__text a:not([class]):hover {
      opacity: 0.75; }
  .teaser__text *:first-child {
    margin-top: 0; }
  .teaser__text *:last-child {
    margin-bottom: 0; }
  @media (min-width: 64em) {
    .teaser__text {
      line-height: 2; } }

.teaser__action {
  margin: 0;
  padding-left: 40px;
  position: relative;
  font-size: 12px;
  text-decoration: none;
  letter-spacing: 0;
  color: #4a4a4a; }
  .teaser__action:before {
    content: '';
    width: 15px;
    height: 1px;
    background: currentColor;
    display: inline-block;
    position: absolute;
    top: 50%;
    margin-top: -1px;
    -webkit-transition: 0.1s;
    -o-transition: 0.1s;
    transition: 0.1s; }
  .teaser__action:after {
    content: '';
    width: 9px;
    height: 9px;
    display: inline-block;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    top: 50%;
    margin-top: -5px;
    -webkit-transition: 0.1s;
    -o-transition: 0.1s;
    transition: 0.1s; }
  .teaser__action:hover {
    cursor: pointer; }
  .teaser__action::before {
    left: 0; }
  .teaser__action::after {
    left: 15px;
    background-image: url(data:image/svg+xml;base64,phn2zyb3awr0ad0imtiiighlawdodd0imtmiihzpzxdcb3g9ijagmcaxmiaxmyigeg1sbnm9imh0dha6ly93d3cudzmub3jnlziwmdavc3znij48cgf0acbkpsjnmtegni41qzcundayidcuotqgmi45ncaxmc40lje3myaxm2wylje4ltyunuwumtcyidbdmi45mzkgmi42mdigny40mdmgns4wnjegmtegni41eiigzmlsbd0iizrhnge0ysigzmlsbc1ydwxlpsjldmvub2rkii8+pc9zdmc+cg==); }
  .teaser__action:hover:before {
    width: 20px; }
  .teaser__action:hover:after {
    left: 20px; }

/*
Highlight

Markup:
<article class="highlight">
    <div class="highlight__image-container">
        <picture>
            <source srcset="http://placehold.it/640&text=Large%20Screens" media="(min-width: 64em)">
            <source srcset="http://placehold.it/1024x576&text=Medium%20Screens" media="(min-width: 40em)">
            <img srcset="http://placehold.it/640x480&text=Default%20Image" alt="" class="highlight__image">
        </picture>
        <div class="highlight__image-label"><img src="http://placehold.it/36/ff00ff"><span>Gesundheit & Natur</span></div>
        <a href="#0"></a>
        <a href="#0" class="highlight__image-action"><span>Mehr Details</span><img src="http://placehold.it/24"></a>
    </div>
    <div class="highlight__date"><a href="#0"><b>Do, 24.04.2020 | 10:00 – 18:00 Uhr</b><br />Kapuziner Kirche</a></div>
    <h1 class="highlight__title"><a href="#0">Große Eröffnung der Blumenhalle</a></h1>
    <div class="highlight__text">
        Die konkrete Planung der dauerhaften gastronomischen Einrichtung im Ãœberlinger Uferpark und die Suche nach einem Betreiber kann beginnen. 
    </div>
</article>

Styleguide blocks.highlight
*/
.highlight__image-container {
  position: relative;
  margin-bottom: 20px; }
  .highlight__image-container a:not([class]) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }

.highlight__image {
  max-width: 100%;
  padding-bottom: 20px; }

.highlight__image-action {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  -webkit-box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
          box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
  background: #ce115d;
  position: absolute;
  right: 20px;
  bottom: 0; }
  @media (min-width: 40em) {
    .highlight__image-action {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .highlight__image-action svg,
  .highlight__image-action img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .highlight__image-action * + svg,
  .highlight__image-action * + img {
    margin-right: 0;
    margin-left: 15px; }
  .highlight__image-action:hover {
    cursor: pointer;
    color: #ffffff; }
  .highlight__image-action:hover {
    background-color: #870b3d; }
  .highlight__image-action:disabled, .highlight__image-action.is-disabled {
    pointer-events: none;
    opacity: 0.25; }
  .highlight__image-action span {
    display: none; }
    @media (min-width: 64em) {
      .highlight__image-action span {
        display: block;
        margin-right: 20px; } }
  .highlight__image-action img,
  .highlight__image-action svg {
    margin-right: 0;
    margin-left: 0; }

.highlight__image-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  left: 0;
  top: 8%;
  background: #ffffff; }
  .highlight__image-label img,
  .highlight__image-label svg {
    width: 36px;
    height: 36px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 36px;
            flex: 0 0 36px; }
  .highlight__image-label span {
    margin: 0;
    font-family: sans-serif;
    letter-spacing: 0;
    font-size: 11px;
    font-weight: 400;
    color: #4a4a4a;
    line-height: 1.15;
    padding: 0 10px;
    font-weight: 700; }
    @media (min-width: 40em) {
      .highlight__image-label span {
        font-size: 14px; } }
    .fl .highlight__image-label span {
      font-family: "Noto Sans", sans-serif; }

.highlight__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-family: serif;
  font-size: 20px;
  font-weight: 700;
  color: #18492b;
  line-height: 1.3;
  margin-bottom: 15px;
  max-height: 80px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; }
  @media (min-width: 40em) {
    .highlight__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .highlight__title {
    font-family: "UrgeText-SemiBold", serif; }
  .fl .highlight__title {
    font-family: "Noto Sans", sans-serif; }
  .highlight__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .highlight__title {
      font-size: 25px; } }
  @media (min-width: 40em) {
    .highlight__title {
      max-height: 100px; } }
  .highlight__title a {
    color: inherit;
    text-decoration: none; }

.highlight__date {
  margin: 0;
  font-family: sans-serif;
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 400;
  color: #4a4a4a;
  line-height: 1.15;
  margin-bottom: 20px; }
  @media (min-width: 40em) {
    .highlight__date {
      font-size: 14px; } }
  .fl .highlight__date {
    font-family: "Noto Sans", sans-serif; }
  .highlight__date a {
    color: inherit;
    text-decoration: none; }

.highlight__text {
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  letter-spacing: 0;
  line-height: 1.8;
  max-height: 135px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical; }
  @media (min-width: 40em) {
    .highlight__text {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .highlight__text a:not([class]) {
    color: currentColor; }
    .highlight__text a:not([class]):hover {
      opacity: 0.75; }
  .highlight__text *:first-child {
    margin-top: 0; }
  .highlight__text *:last-child {
    margin-bottom: 0; }
  @media (min-width: 64em) {
    .highlight__text {
      line-height: 2; } }
  @media (min-width: 40em) {
    .highlight__text {
      max-height: 158px;
      -webkit-line-clamp: 5; } }

/*
Highlight Poster

Markup:
<div class="poster  highlight-poster  js-poster">
    <picture class="poster__img">
        <source
            srcset="http://placehold.it/1440x400&text=Large%20Screens"
            media="(min-width: 64em)"
        />
        <source
            srcset="http://placehold.it/800x400&text=Medium%20Screens"
            media="(min-width: 40em)"
        />
        <img srcset="http://placehold.it/320x400&text=Default%20Image" alt="" />
    </picture>
    <div class="poster__content  highlight-poster__content">
        <div class="highlight-poster__grid">
            <div class="highlight-poster__container">
                <div class="highlight-poster__date">27.09 – 06.10.2020</div>
                <h2 class="highlight-poster__title">SWR 1 Band mit Britta Medeiros</h2>
                <h3 class="highlight-poster__subtitle">
                    23. Internationales Festiaval zeitgenössischer Musik
                </h3>
                <div class="highlight-poster__actions">
                    <a href="#0" class="highlight-poster__btn-primary">
                        <span>Mehr Details</span>
                        <img src="http://placehold.it/24" />
                    </a>
                    <a href="#0" class="highlight-poster__btn-ghost">
                        <img src="http://placehold.it/24" />
                        <span>Zur Tagesübersicht</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Styleguide blocks.highlight-poster
*/
.highlight-poster {
  position: relative; }
  .highlight-poster:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: -webkit-linear-gradient(264deg, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.84) 100%);
    background-image: -o-linear-gradient(264deg, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.84) 100%);
    background-image: linear-gradient(-174deg, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.84) 100%); }

.highlight-poster__content {
  min-height: 400px;
  padding: 40px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end; }
  @media (min-width: 40em) {
    .highlight-poster__content {
      min-height: 500px;
      padding: 80px 20px; } }

.highlight-poster__grid {
  width: 100%;
  margin-left: -20px;
  display: block;
  font-size: 0; }
  .highlight-poster__grid > * {
    padding-left: 20px;
    vertical-align: top;
    display: inline-block;
    font-size: 16px; }

.highlight-poster__container {
  width: 100%;
  position: relative; }
  @media (min-width: 64em) {
    .highlight-poster__container {
      width: 85.71429%;
      position: relative;
      right: auto;
      left: 7.14286%; } }
  @media (min-width: 90em) {
    .highlight-poster__container {
      width: 71.42857%;
      position: relative;
      right: auto;
      left: 14.28571%; } }

.highlight-poster__date {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-family: serif;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  margin-bottom: 10px; }
  @media (min-width: 40em) {
    .highlight-poster__date {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .highlight-poster__date {
    font-family: "UrgeText-SemiBold", serif; }
  .fl .highlight-poster__date {
    font-family: "Noto Sans", sans-serif; }
  .highlight-poster__date sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .highlight-poster__date {
      font-size: 25px; } }

.highlight-poster__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-family: serif;
  font-size: 36px;
  color: #ffffff;
  line-height: 1.26;
  text-decoration: underline;
  text-decoration: none; }
  @media (min-width: 40em) {
    .highlight-poster__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .highlight-poster__title {
    font-family: "UrgeText-SemiBold", serif; }
  .fl .highlight-poster__title {
    font-family: "Noto Sans", sans-serif; }
  .highlight-poster__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .highlight-poster__title {
      font-size: 45px; } }

.highlight-poster__subtitle {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-family: serif;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3; }
  @media (min-width: 40em) {
    .highlight-poster__subtitle {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .highlight-poster__subtitle {
    font-family: "UrgeText-SemiBold", serif; }
  .fl .highlight-poster__subtitle {
    font-family: "Noto Sans", sans-serif; }
  .highlight-poster__subtitle sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .highlight-poster__subtitle {
      font-size: 25px; } }

.highlight-poster__actions {
  margin-top: 30px; }

.highlight-poster__btn-primary {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  -webkit-box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
          box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
  background: #ce115d;
  margin-top: 10px;
  margin-right: 10px;
  vertical-align: middle; }
  @media (min-width: 40em) {
    .highlight-poster__btn-primary {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .highlight-poster__btn-primary svg,
  .highlight-poster__btn-primary img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .highlight-poster__btn-primary * + svg,
  .highlight-poster__btn-primary * + img {
    margin-right: 0;
    margin-left: 15px; }
  .highlight-poster__btn-primary:hover {
    cursor: pointer;
    color: #ffffff; }
  .highlight-poster__btn-primary:hover {
    background-color: #870b3d; }
  .highlight-poster__btn-primary:disabled, .highlight-poster__btn-primary.is-disabled {
    pointer-events: none;
    opacity: 0.25; }

.highlight-poster__btn-ghost {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  background-color: transparent;
  border: 1px solid currentColor;
  margin-top: 10px;
  margin-right: 10px;
  vertical-align: middle; }
  @media (min-width: 40em) {
    .highlight-poster__btn-ghost {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .highlight-poster__btn-ghost svg,
  .highlight-poster__btn-ghost img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .highlight-poster__btn-ghost * + svg,
  .highlight-poster__btn-ghost * + img {
    margin-right: 0;
    margin-left: 15px; }
  .highlight-poster__btn-ghost:hover {
    cursor: pointer;
    color: #ffffff; }
  .highlight-poster__btn-ghost:disabled, .highlight-poster__btn-ghost.is-disabled {
    pointer-events: none;
    opacity: 0.25; }

/*
Download Image

Markup:
<div class="download-image">
    <div class="download-image__image-container">
        <img src="http://placehold.it/640x400" class="fluid">
        <a href="#0"></a>
        <span>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon  download-image__icon"><path d="M6 19.167h12V17.5H6v1.667zM18 10h-3.429V5H9.43v5H6l6 5.833L18 10z"/></svg>
        </span>
    </div>
    <div class="download-image__caption">Baustelle 2015 (43 Bilder/2GB)</div>
</div>

Styleguide blocks.download-image
*/
.download-image {
  position: relative; }

.download-image__image-container {
  position: relative;
  font-size: 0; }
  .download-image__image-container span {
    width: 45px;
    height: 45px;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -22.5px;
    margin-top: -22.5px;
    color: #ffffff;
    pointer-events: none; }
    .download-image__image-container span:after {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-image: url(data:image/svg+xml;base64,phn2zyb4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmciihdpzhropsi0nsigagvpz2h0psi0nsi+phbhdgggzmlsbd0ii2zmzmzmziigzd0ittagmjiunwgyqzigmzmuodiyidexlje3oca0myaymi41idqzuzqzidmzljgymia0myaymi41idmzljgymiayidiyljugmmeymc40idiwljqgmcawidatmtiumtm0idmuotc1tdkumtgxidqumzy0qtiyljqgmjiuncawidagmsaymi41idbdmzquoti2idagndugmtaumdc0idq1idiyljvtmzquoti2idq1idiyljugndugmcaznc45mjygmcaymi41eiivpjwvc3znpgo=);
      background-repeat: no-repeat;
      -webkit-transition: -webkit-transform ease-in-out 0.4s;
      transition: -webkit-transform ease-in-out 0.4s;
      -o-transition: transform ease-in-out 0.4s;
      transition: transform ease-in-out 0.4s;
      transition: transform ease-in-out 0.4s, -webkit-transform ease-in-out 0.4s; }
  .download-image__image-container a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(74, 74, 74, 0.45); }
  .download-image__image-container:hover {
    cursor: pointer; }
    .download-image__image-container:hover span:after {
      -webkit-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
              transform: rotate(360deg); }

.download-image__icon {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -12px;
  margin-top: -12px; }

.download-image__caption {
  font-weight: 400;
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.41;
  margin-top: 5px; }
  @media (min-width: 40em) {
    .download-image__caption {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .download-image__caption a:not([class]) {
    color: currentColor; }
    .download-image__caption a:not([class]):hover {
      opacity: 0.75; }
  .download-image__caption *:first-child {
    margin-top: 0; }
  .download-image__caption *:last-child {
    margin-bottom: 0; }

/*
Download Block

Markup:
<div class="download-block">
    <aside class="download-block__aside">
        <div class="download-icon"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon  download-icon__icon"><path d="M6 19.167h12V17.5H6v1.667zM18 10h-3.429V5H9.43v5H6l6 5.833L18 10z" /></svg></span>
            <div class="download-icon__label">download</div>
        </div>
    </aside>
    <main class="download-block__main">
        <h2 class="download-block__title">Riess Gruppe übergibt Dienstfahrzeuge an Landesgartenschau-Team</h2>
        <div class="download-block__date">11. Oktober 2018</div>
        <div class="download-block__text">Die Landesgartenschau Überlingen 2020 GmbH verzeichnet den ersten Erfolg beim Thema Sponsoring. „Wir freuen uns sehr, mit
        der Riess Gruppe einen kompetenten und verlässlichen Mobilitätspartner für die Landesgartenschau gefunden zu haben“, sagte
        Roland Leitner, Geschäftsführer der Landesgartenschau Überlingen 2020 GmbH. ….</div>
    </main>
    <aside class="download-block__image-container">
        <img src="http://placehold.it/320x180" alt="" class="fluid">
    </aside>
</div>

Styleguide blocks.download-block
*/
.download-block {
  margin-left: -20px;
  display: block;
  font-size: 0; }
  .download-block > * {
    padding-left: 20px;
    vertical-align: top;
    display: inline-block;
    font-size: 16px; }

.download-block__aside {
  width: 28.57143%;
  position: relative; }
  @media (min-width: 40em) {
    .download-block__aside {
      width: 14.28571%;
      position: relative; } }
  @media (min-width: 64em) {
    .download-block__aside {
      width: 10.71429%;
      position: relative; } }

.download-block__main {
  width: 71.42857%;
  position: relative; }
  @media (min-width: 40em) {
    .download-block__main {
      width: 57.14286%;
      position: relative; } }

.download-block__image-container {
  display: none;
  position: relative; }
  @media (min-width: 40em) {
    .download-block__image-container {
      display: inline-block;
      width: 28.57143%;
      position: relative; } }
  @media (min-width: 64em) {
    .download-block__image-container {
      width: 25%;
      position: relative;
      right: auto;
      left: 7.14286%; } }
  .download-block__image-container a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; }

.download-block__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 16px;
  color: #18492b;
  line-height: 1.45;
  margin-bottom: 10px; }
  @media (min-width: 40em) {
    .download-block__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .download-block__title {
    font-family: "UrgeText-SemiBold", serif; }
  .download-block__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .download-block__title {
      font-size: 20px; } }
  .download-block__title a {
    text-decoration: none;
    color: inherit; }
  @media (min-width: 40em) {
    .download-block__title {
      margin-bottom: 15px; } }

.download-block__date {
  margin: 0;
  font-style: normal;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #afcc56;
  letter-spacing: 1.75px;
  line-height: 1.3;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  margin-bottom: 10px; }
  @media (min-width: 40em) {
    .download-block__date {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none;
      font-size: 14px; } }
  .fl .download-block__date {
    font-family: "Noto Sans", sans-serif; }
  @media (min-width: 40em) {
    .download-block__date {
      margin-bottom: 20px; } }

.download-block__text {
  font-weight: 400;
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.41; }
  @media (min-width: 40em) {
    .download-block__text {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .download-block__text a:not([class]) {
    color: currentColor; }
    .download-block__text a:not([class]):hover {
      opacity: 0.75; }
  .download-block__text *:first-child {
    margin-top: 0; }
  .download-block__text *:last-child {
    margin-bottom: 0; }

/*
Event Block

.is-canceled - Abgesagt
.is-postponed - Verschoben

Markup:
<div class="event-block  {{modifier_class}}">
    <div class="event-block__image-container">
        <picture>
            <source srcset="http://unsplash.it/400/300" media="(min-width: 64em)">
            <source srcset="http://unsplash.it/1024/576" media="(min-width: 40em)">
            <img srcset="http://unsplash.it/640/480" alt="" class="fluid">
        </picture>
    </div>
    <div class="event-block__time-container">
        <div class="event-block__date">Samstag, 01. April 2020</div>
        <div class="event-block__time">9:00 – 10:00 Uhr</div>
        <img src="http://placehold.it/36" class="event-block__like">
        <ul class="fact-list  event-block__time-icons">
            <li class="fact-list__item">
                <img src="http://placehold.it/24" alt="">
                <span>Wöchentlich</span>
            </li>
            <li class="fact-list__item">
                <img src="http://placehold.it/24" alt="">
                <span>Termin merken</span>
            </li>
        </ul>
    </div>
    <div class="event-block__details">
        <div class="event-block__title-container">
            <h2 class="event-block__title">Lorem ipsum dolor sit amet</h2>
            <h3 class="event-block__subtitle">consetetur sadipscing elitr, sed diam non</h3>
        </div>
        <div class="event-block__text  isHiddenOnMobile">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur quasi consequatur hic. Ex necessitatibus ad molestias obcaecati possimus corporis accusantium.</div>
        <a href="#0" class="event-block__action"><span>Mehr Details</span><img src="http://placehold.it/24"></a>
    </div>
    <div class="event-block__facts">
        <ul class="fact-list">
            <li class="fact-list__item">
                <img src="http://placehold.it/24" alt="">
                <span>Natur und Gesundheit</span>
            </li>
            <li class="fact-list__item">
                <img src="http://placehold.it/24" alt="">
                <span>Menzinger Gärten</span>
            </li>
            <li class="fact-list__item  isFlexHiddenOnMobile">
                <img src="http://placehold.it/24" alt="">
                <span>Netzwerk Garten Obst-und Gartenbauvereine und LandFrauen</span>
            </li>
        </ul>
    </div>
</div>

Styleguide blocks.event-block
*/
.event-block {
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eaeaea; }
  @media (min-width: 64em) {
    .event-block {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; } }
  .event-block .isFlexHiddenOnMobile {
    display: none; }
    @media (min-width: 64em) {
      .event-block .isFlexHiddenOnMobile {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; } }
  .event-block.is-canceled, .event-block.is-postponed {
    position: relative; }
    .event-block.is-canceled::after, .event-block.is-canceled::before, .event-block.is-postponed::after, .event-block.is-postponed::before {
      content: '';
      position: absolute; }
    .event-block.is-canceled::after, .event-block.is-postponed::after {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: rgba(255, 255, 255, 0.75); }
    .event-block.is-canceled::before, .event-block.is-postponed::before {
      content: 'Abgesagt';
      left: 50%;
      top: 50%;
      z-index: 1;
      -webkit-transform: translate(-50%, -50%) rotate(-11.75deg);
          -ms-transform: translate(-50%, -50%) rotate(-11.75deg);
              transform: translate(-50%, -50%) rotate(-11.75deg);
      font-family: "UrgeText-SemiBold", serif;
      font-size: 60px;
      line-height: 1.16;
      color: #ce115d; }
  .event-block.is-postponed::before {
    content: 'Verschoben'; }

.event-block__image-container {
  margin-bottom: 20px; }
  @media (min-width: 64em) {
    .event-block__image-container {
      min-width: 150px;
      max-width: 250px;
      -webkit-box-flex: 1;
          -ms-flex: 1 1 250px;
              flex: 1 1 250px;
      margin-left: 20px;
      -webkit-box-ordinal-group: 2;
          -ms-flex-order: 1;
              order: 1; } }

.event-block__time-container {
  margin-bottom: 20px;
  position: relative; }
  @media (min-width: 64em) {
    .event-block__time-container {
      -webkit-box-flex: 1;
          -ms-flex: 1 0 200px;
              flex: 1 0 200px;
      margin: 0; } }

.event-block__details {
  margin-bottom: 25px; }
  @media (min-width: 64em) {
    .event-block__details {
      margin-left: 20px;
      margin-bottom: 0;
      -webkit-box-flex: 1;
          -ms-flex: 1 0 25%;
              flex: 1 0 25%; } }

@media (min-width: 64em) {
  .event-block__facts {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 25%;
            flex: 1 0 25%;
    margin-left: 20px;
    padding: 10px 0 10px 20px;
    border-left: 1px solid #eaeaea; } }

.event-block__title-container {
  margin-bottom: 20px; }

.event-block__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-family: serif;
  font-size: 14px;
  font-weight: 700;
  color: #18492b;
  line-height: 1.18;
  max-height: 50px;
  overflow: hidden;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; }
  @media (min-width: 40em) {
    .event-block__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .event-block__title {
    font-family: "UrgeText-SemiBold", serif; }
  .fl .event-block__title {
    font-family: "Noto Sans", sans-serif; }
  .event-block__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .event-block__title {
      font-size: 17px; } }
  @media (min-width: 40em) {
    .event-block__title {
      max-height: 61px; } }

.event-block__subtitle {
  margin: 0;
  font-family: sans-serif;
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 400;
  color: #18492b;
  line-height: 1.15;
  font-weight: 700;
  margin-top: 5px;
  max-height: 25px;
  overflow: hidden;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; }
  @media (min-width: 40em) {
    .event-block__subtitle {
      font-size: 14px; } }
  .fl .event-block__subtitle {
    font-family: "Noto Sans", sans-serif; }
  @media (min-width: 40em) {
    .event-block__subtitle {
      max-height: 33px; } }

.event-block__text {
  font-weight: 400;
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.41;
  display: none;
  overflow: hidden; }
  @media (min-width: 40em) {
    .event-block__text {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .event-block__text a:not([class]) {
    color: currentColor; }
    .event-block__text a:not([class]):hover {
      opacity: 0.75; }
  .event-block__text *:first-child {
    margin-top: 0; }
  .event-block__text *:last-child {
    margin-bottom: 0; }
  @media (min-width: 64em) {
    .event-block__text {
      max-height: 83px;
      display: block;
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical; } }

.event-block__time {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-family: serif;
  font-size: 20px;
  font-weight: 700;
  color: #4a4a4a;
  line-height: 1.3;
  font-weight: 700; }
  @media (min-width: 40em) {
    .event-block__time {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .event-block__time {
    font-family: "UrgeText-SemiBold", serif; }
  .fl .event-block__time {
    font-family: "Noto Sans", sans-serif; }
  .event-block__time sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .event-block__time {
      font-size: 25px; } }
  @media (min-width: 64em) {
    .event-block__time {
      margin-bottom: 20px; } }

.event-block__date {
  margin: 0;
  font-family: sans-serif;
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 400;
  color: #4a4a4a;
  line-height: 1.15;
  font-weight: 700; }
  @media (min-width: 40em) {
    .event-block__date {
      font-size: 14px; } }
  .fl .event-block__date {
    font-family: "Noto Sans", sans-serif; }

.event-block__action {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  padding: 0 !important;
  min-height: auto !important;
  border: none;
  color: #ce115d; }
  @media (min-width: 40em) {
    .event-block__action {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .event-block__action svg,
  .event-block__action img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .event-block__action * + svg,
  .event-block__action * + img {
    margin-right: 0;
    margin-left: 15px; }
  .event-block__action:hover {
    cursor: pointer;
    color: #ffffff; }
  .event-block__action:hover {
    color: #870b3d; }
  .event-block__action:disabled, .event-block__action.is-disabled {
    pointer-events: none;
    opacity: 0.25; }
  @media (min-width: 64em) {
    .event-block__action {
      margin-top: 15px; } }

.event-block__like {
  width: 25px;
  height: 25px;
  position: absolute;
  top: -5px;
  right: 0;
  color: #ce115d; }
  @media (min-width: 64em) {
    .event-block__like {
      display: none; } }
  .event-block__like .wishlist-toggle svg {
    width: 100%;
    height: 100%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%; }

/*
with Notification-Box

Markup:
<div class="event-block  is-postponed">
    <div class="event-block__image-container">
        <picture>
            <source srcset="http://unsplash.it/400/300" media="(min-width: 64em)">
            <source srcset="http://unsplash.it/1024/576" media="(min-width: 40em)">
            <img srcset="http://unsplash.it/640/480" alt="" class="fluid">
        </picture>
    </div>
    <div class="event-block__time-container">
        <div class="event-block__date">Samstag, 01. April 2020</div>
        <div class="event-block__time">9:00 – 10:00 Uhr</div>
        <img src="http://placehold.it/36" class="event-block__like">
        <ul class="fact-list  event-block__time-icons">
            <li class="fact-list__item">
                <img src="http://placehold.it/24" alt="">
                <span>Wöchentlich</span>
            </li>
            <li class="fact-list__item">
                <img src="http://placehold.it/24" alt="">
                <span>Termin merken</span>
            </li>
        </ul>
    </div>
    <div class="event-block__details">
        <div class="event-block__title-container">
            <h2 class="event-block__title">Lorem ipsum dolor sit amet</h2>
            <h3 class="event-block__subtitle">consetetur sadipscing elitr, sed diam non</h3>
        </div>
        <div class="event-block__text  isHiddenOnMobile">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur quasi consequatur hic. Ex necessitatibus ad molestias obcaecati possimus corporis accusantium.</div>
        <a href="#0" class="event-block__action"><span>Mehr Details</span><img src="http://placehold.it/24"></a>
    </div>
    <div class="event-block__facts">
        <ul class="fact-list">
            <li class="fact-list__item">
                <img src="http://placehold.it/24" alt="">
                <span>Natur und Gesundheit</span>
            </li>
            <li class="fact-list__item">
                <img src="http://placehold.it/24" alt="">
                <span>Menzinger Gärten</span>
            </li>
            <li class="fact-list__item  isFlexHiddenOnMobile">
                <img src="http://placehold.it/24" alt="">
                <span>Netzwerk Garten Obst-und Gartenbauvereine und LandFrauen</span>
            </li>
        </ul>
    </div>
    <div class="notification-box  event-block__notification">
        <div class="notification-box__title">Ersatztermin</div>
        <div class="notification-box__text">Freitag, 10. Mai 2021<br>09:00 – 19:00 Uhr</div>
        <a href="#0" class="notification-box__link"><span>Mehr Details</span><img src="http://placehold.it/24"></a>
    </div>
</div>

Styleguide blocks.event-block.1
*/
.event-block__notification {
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 1; }
  @media (min-width: 40em) {
    .event-block__notification {
      top: 80px; } }

/*
Event Card

Markup:
<div style="padding: 10px; background: #eee">
<div class="event-card">
    <img src="http://placehold.it/36" class="event-card__like">
    <div class="event-card__facts">
        <ul class="fact-list">
            <li class="fact-list__item">
                <img src="http://placehold.it/24" alt="">
                <span>Donnerstags 10:00 – 18:00 Uhr</span>
            </li>
            <li class="fact-list__item  isFlexHiddenOnMobile">
                <img src="http://placehold.it/24" alt="">
                <span>Kapuziner Kirche</span>
            </li>
            <li class="fact-list__item  isFlexHiddenOnMobile">
                <img src="http://placehold.it/24" alt="">
                <span>Termin merken</span>
            </li>
        </ul>
    </div>
    <div class="event-card__details">
        <div class="event-card__category">
            <img src="http://placehold.it/24" alt="">
            <span>Gesundheit und Natur</span>
        </div>
        <h2 class="event-card__title">Music & Dance lorem ispum dolor sit ametlorem ispum dolor sit amet</h2>
        <a href="#0" class="event-card__action"><span>Mehr Details</span><img src="http://placehold.it/24"></a>
    </div>
    <div class="event-card__mobile-facts">
        <ul class="fact-list">
            <li class="fact-list__item">
                <img src="http://placehold.it/24" alt="">
                <span>Gesundheit und Natur</span>
            </li>
            <li class="fact-list__item">
                <img src="http://placehold.it/24" alt="">
                <span>Kapuziner Kirche</span>
            </li>
        </ul>
    </div>
    <a href="#0" class="event-card__mobile-action"><span>Mehr Details</span><img src="http://placehold.it/24"></a>
</div>
</div>

Styleguide blocks.event-card
*/
.event-card {
  position: relative;
  padding: 10px;
  background: #ffffff; }
  @media (min-width: 40em) {
    .event-card {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }
  .event-card.isFlexHiddenOnMobile {
    display: none; }
    @media (min-width: 40em) {
      .event-card.isFlexHiddenOnMobile {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; } }

.event-card__facts {
  display: none; }
  @media (min-width: 40em) {
    .event-card__facts {
      display: block;
      padding-right: 30px;
      -webkit-box-flex: 1;
          -ms-flex: 1 0 40%;
              flex: 1 0 40%; } }

.event-card__mobile-facts {
  margin-top: 25px; }
  @media (min-width: 40em) {
    .event-card__mobile-facts {
      display: none; } }

@media (min-width: 40em) {
  .event-card__details {
    padding: 10px 0 10px 30px;
    border-left: 1px solid #eaeaea;
    -webkit-box-flex: 1;
        -ms-flex: 1 0 60%;
            flex: 1 0 60%; } }

.event-card__category {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .event-card__category img,
  .event-card__category svg {
    width: 20px;
    height: 20px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 20px;
            flex: 0 0 20px; }
    @media (min-width: 40em) {
      .event-card__category img,
      .event-card__category svg {
        width: 24px;
        height: 24px;
        -webkit-box-flex: 0;
            -ms-flex: 0 0 24px;
                flex: 0 0 24px; } }
  .event-card__category span:not([class]) {
    margin: 0;
    font-family: sans-serif;
    letter-spacing: 0;
    font-size: 11px;
    font-weight: 400;
    color: "inherit";
    line-height: 1.15;
    margin-left: 10px;
    font-weight: 700; }
    @media (min-width: 40em) {
      .event-card__category span:not([class]) {
        font-size: 14px; } }
    .fl .event-card__category span:not([class]) {
      font-family: "Noto Sans", sans-serif; }
    @media (min-width: 40em) {
      .event-card__category span:not([class]) {
        margin-left: 15px; } }
    .event-card__category span:not([class]) a {
      color: inherit; }
      .event-card__category span:not([class]) a:hover {
        opacity: 0.75; }

.event-card__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-family: serif;
  font-size: 14px;
  font-weight: 700;
  color: #18492b;
  line-height: 1.18;
  margin-top: 20px; }
  @media (min-width: 40em) {
    .event-card__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .event-card__title {
    font-family: "UrgeText-SemiBold", serif; }
  .fl .event-card__title {
    font-family: "Noto Sans", sans-serif; }
  .event-card__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .event-card__title {
      font-size: 17px; } }

.event-card__like {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 5px;
  right: 5px;
  color: #ce115d; }
  @media (min-width: 40em) {
    .event-card__like {
      display: none; } }
  .event-card__like .wishlist-toggle svg {
    width: 100%;
    height: 100%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%; }

.event-card__action,
.event-card__mobile-action {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  padding: 0 !important;
  min-height: auto !important;
  border: none;
  color: #ce115d;
  height: auto !important;
  min-height: none !important;
  margin-top: 20px; }
  @media (min-width: 40em) {
    .event-card__action,
    .event-card__mobile-action {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .event-card__action svg,
  .event-card__action img,
  .event-card__mobile-action svg,
  .event-card__mobile-action img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .event-card__action * + svg,
  .event-card__action * + img,
  .event-card__mobile-action * + svg,
  .event-card__mobile-action * + img {
    margin-right: 0;
    margin-left: 15px; }
  .event-card__action:hover,
  .event-card__mobile-action:hover {
    cursor: pointer;
    color: #ffffff; }
  .event-card__action:hover,
  .event-card__mobile-action:hover {
    color: #870b3d; }
  .event-card__action:disabled, .event-card__action.is-disabled,
  .event-card__mobile-action:disabled,
  .event-card__mobile-action.is-disabled {
    pointer-events: none;
    opacity: 0.25; }

.event-card__action {
  display: none; }
  @media (min-width: 40em) {
    .event-card__action {
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex; } }

@media (min-width: 40em) {
  .event-card__mobile-action {
    display: none; } }

/*
Wishlist Card

Markup:
<div class="wishlist-card">
    <a href="#0" class="wishlist-card__hidden-link"></a>
    <img src="http://placehold.it/36" class="wishlist-card__like">
    <div class="wishlist-card__date">02. Juli 2020 | <span>10:00 – 18:00 Uhr</span></div>
    <h2 class="wishlist-card__title">Music & Dance lorem ispum dolor sit ametlorem ispum dolor sit amet</h2>
    <div class="wishlist-card__category">
        <img src="http://placehold.it/24" alt="">
        <span>Gesundheit und Natur</span>
    </div>
</div>

Styleguide blocks.wishlist-card
*/
.wishlist-card {
  position: relative;
  padding: 10px;
  text-align: left;
  color: #4a4a4a;
  background: #ffffff;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2); }

.wishlist-card__date {
  margin: 0;
  font-family: sans-serif;
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 400;
  color: #4a4a4a;
  line-height: 1.15;
  font-weight: 700;
  margin-bottom: 15px;
  padding-right: 30px; }
  @media (min-width: 40em) {
    .wishlist-card__date {
      font-size: 14px; } }
  .fl .wishlist-card__date {
    font-family: "Noto Sans", sans-serif; }
  .wishlist-card__date span {
    white-space: nowrap; }

.wishlist-card__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-family: serif;
  font-size: 14px;
  font-weight: 700;
  color: #18492b;
  line-height: 1.18; }
  @media (min-width: 40em) {
    .wishlist-card__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .wishlist-card__title {
    font-family: "UrgeText-SemiBold", serif; }
  .fl .wishlist-card__title {
    font-family: "Noto Sans", sans-serif; }
  .wishlist-card__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .wishlist-card__title {
      font-size: 17px; } }

.wishlist-card__category {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 10px; }
  .wishlist-card__category img,
  .wishlist-card__category svg {
    width: 20px;
    height: 20px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 20px;
            flex: 0 0 20px; }
    @media (min-width: 40em) {
      .wishlist-card__category img,
      .wishlist-card__category svg {
        width: 24px;
        height: 24px;
        -webkit-box-flex: 0;
            -ms-flex: 0 0 24px;
                flex: 0 0 24px; } }
  .wishlist-card__category span:not([class]) {
    margin: 0;
    font-family: sans-serif;
    letter-spacing: 0;
    font-size: 11px;
    font-weight: 400;
    color: "inherit";
    line-height: 1.15;
    margin-left: 10px;
    font-weight: 700; }
    @media (min-width: 40em) {
      .wishlist-card__category span:not([class]) {
        font-size: 14px; } }
    .fl .wishlist-card__category span:not([class]) {
      font-family: "Noto Sans", sans-serif; }
    @media (min-width: 40em) {
      .wishlist-card__category span:not([class]) {
        margin-left: 15px; } }
    .wishlist-card__category span:not([class]) a {
      color: inherit; }
      .wishlist-card__category span:not([class]) a:hover {
        opacity: 0.75; }

.wishlist-card__hidden-link {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0; }

.wishlist-card__like {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 5px;
  right: 5px;
  color: #ce115d; }
  .wishlist-card__like .wishlist-toggle {
    width: 100%;
    height: 100%; }

/*
TeaserCard

Markup:
<div class="teasercard">
    <div class="teasercard__title">Teaser</div>
    <div class="teasercard__date">12.-13. April</div>
    <div class="teasercard__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Totam accusamus velit tempore, voluptatem nesciunt atque optio. Voluptatem et rerum veniam.</div>
    <a class="teasercard__link" href="#0">Weiterlesen</a>
</div>

Styleguide blocks.teasercard
*/
.teasercard {
  background-color: #fff;
  position: relative;
  padding: 30px;
  max-width: 320px;
  -webkit-box-shadow: 0px 2px 66px rgba(0, 0, 0, 0.19);
          box-shadow: 0px 2px 66px rgba(0, 0, 0, 0.19);
  margin-left: auto;
  margin-right: auto; }
  @media (min-width: 64em) {
    .teasercard {
      max-width: 460px; } }
  .teasercard:before {
    content: '';
    background-image: url(data:image/svg+xml;base64,phn2zyb4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmciihdpzhropsiymtuiighlawdodd0imtayiib2awv3qm94psiwidagmje1idewmii+ciagica8zybmawxspsjub25liibmawxslxj1bgu9imv2zw5vzgqipgogicagicagidxwyxroigzpbgw9iim2nei0oduiigq9ik0xnc41myazljy3qzkunca0ljm3idqumzygni4ylji5idgumdvsls4ymy4yn2mymy42mi02ljy3idm5ljugmzeumjigodkunzcgnzcumdygntaumya0ns45ideyns4yns0xoc40niaxmjuumjutmtgundztmtgwidc1ljm2ide0mc4xnsazms43n0mxmdkuotmtms4zidgxljk2ljm3idgylje5lji3yy00ljm4ljmtmteunjuuodgtmjauntcgms45lte0ljc4ideunjctmzuuos0umdqtndcumsaxljuilz4kicagicagica8cgf0acbzdhjva2u9iingruzfrkuiihn0cm9rzs13awr0ad0ilji1iibkpsjnms4wnia3ljq4qzquodkgns4yoca5lju5iduundqgmtqgns42oew0nc45oca3ljnjmjuumzmgms4zmya1mi40ncazljmgnziundmgmtguotcgoc45nia3ljayide1ljggmtyumzmgmjmundigmjquocazljkgnc4zidgumsa4ljugmtmumyaxms4woca0lje1idiumdygoc43nsazidezlji5idmuodggmtqumtmgmi43ncayoc43msa1lje0idqyljgyidiumzqumzktlja4ljgtljiyideumtktljqilz4kicagicagica8cgf0acbzdhjva2u9iingruzfrkuiihn0cm9rzs13awr0ad0ilji1iibkpsjnms4ymia3lju2yzqumzqumjegos4zmyawidezljugms4znyazljm1ideumsa2ljiyidiumzcgos43nyazlja2idkumdegms43nyaxny45ocazljggmjyunzggni40myaxny4yosa1lje2idm0lje0ideyljczidq3ljcyidi0ljgyiduunzmgns4xidewljggmtauotqgmtyunjugmtuuotigmtyunzcgmtqumjkgmzkumsaymc43nia2ms4xidiyljiziduunzyumzggmteunjyundqgmtcumtqtms4znmeyni4yidi2ljigmcawmdyums0yljk0ii8+ciagicagicagphbhdgggc3ryb2tlpsijrkvgruzfiibzdhjva2utd2lkdgg9ii4ynsigzd0itti0ljm2ide1lja3yzizljqgni40mia0mi42idiyljuzidywljkxidm4lji5iduunjkgnc44osaxms40mia5ljgzide4ljazidezljqgnc43ncaylju1idkuodqgnc4zniaxnc45nya2yti4nc4xosayodqumtkgmcawmdywljkgmtiundrjncaumzcgoc4yms42miaxms44os0xii8+ciagicagicagphbhdgggc3ryb2tlpsijrkvgruzfiibzdhjva2utd2lkdgg9ii4ynsigzd0ittmyljk0idi0ljy4yty3lju3idy3lju3idagmdexnc40msa5lje3yzmumsaylju4iduuotygns40mya4ljkxidgumthdodguntqgnziumtugmtmyljegotaumsaxnzyunsa5ms42miivpgogicagicagidxwyxroihn0cm9rzt0ii0zfrkvgrsigc3ryb2tllxdpzhropsiumjuiigq9ik01ny4zoca1ms4yyzkumzggmi4wniaxnc45myaxms41nyaymy4wncaxni42osa0lji2idiunjkgos4xoca0ljeyidezljc1idyumjygns44miayljczidexlja1idyunjegmtyuosa5ljmgnc42niayljeyidkunjmgmy40nsaxnc41osa0ljdhntyzljy5idu2my42osawidawmzyunca3ljk1ttgwljg4idc3lja1yte1my4xide1my4xidagmda2ny42nyaymi4yii8+ciagica8l2c+cjwvc3znpgo=);
    position: absolute;
    bottom: -25px;
    left: -70px;
    height: 72px;
    width: 185px;
    background-repeat: no-repeat;
    background-size: contain; }
    @media (min-width: 40em) {
      .teasercard:before {
        height: 92px;
        width: 195px;
        left: -130px;
        bottom: -32px; } }
    @media (min-width: 64em) {
      .teasercard:before {
        height: 102px;
        width: 215px;
        bottom: -35px; } }
  .teasercard:after {
    content: '';
    background-image: url(data:image/svg+xml;base64,phn2zyb4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmciihdpzhropsiymtciighlawdodd0imjgxiib2awv3qm94psiwidagmje3idi4msi+ciagpgcgzmlsbd0ibm9uzsigzmlsbc1ydwxlpsjldmvub2rkij4kicagidxwyxroigzpbgw9iim2nei0oduiigq9ik0yljqgmjmundndljczide1ljyzljcgny4zniaxlji1ljq2tdeunsawqzqumyazny43osa2ny43oca0mc44miaxnjegodkuntugmju0ljm0idezoc4yosaymdaundqgmjgxidiwmc40ncayodfzltyumy01ns4znc05mc43nc05mc4xngmtnjqumdmtmjyumzktnzyundmtnjcuodqtnzyundutnjcundzhnzi3lju3idcyny41nyawidaxltgumtitmzauodvdmtkunzugnzaumjmgni4woca0mc40ocayljqgmjmundmilz4kicagidxwyxroihn0cm9rzt0ii0zfrkvgrsigc3ryb2tllxdpzhropsiumjuiigq9ik0xljigm0mumdmgos43miayljc1ide2ljq0iduundigmjiunzjsmtgunya0nc4wngmxns4zidm2ljaxidmyljq0idc0lji2idy1ljcyidk0ljk3ide0ljkgos4yocazmiaxnc4yosa0oc4zidiwljg3idgumyazljm1ide2ljygny4yncaymy4wocaxmy40mia1lje3idquotmgoc45niaxms4xideyljyzide3ljixidexljq0ide5lja0idiyljygmzguosaynia2mc44my4wos42ljegms4yoc4wmyaxljk0ii8+ciagica8cgf0acbzdhjva2u9iingruzfrkuiihn0cm9rzs13awr0ad0ilji1iibkpsjnljkyidnjmi42mia2lje3idquotygmtmuntegos4xniaxoc44idmumzggnc4yosa2ljc2idcunzcgos42niaxmi41nca3ljm3ideyljegmtuumsaync4wmiaymy42idm1ljm3ide2ljcgmjiumyazni43idqyljcgnjeuntmgntuuotcgmtaunsa1ljyxidixljy5idkuodggmziumdygmtuunzegmjkunzqgmtyunzugnteumdmgnduunjqgnjquodcgnzyunzigmy42msa4ljeyidyuodigmtyunjmgny4xidi1ljuumtegmy41ls4ymya3lteumdmgmtaumzkilz4kicagidxwyxroihn0cm9rzt0ii0zfrkvgrsigc3ryb2tllxdpzhropsiumjuiigq9ik0ymi45miazmwmyms43ncazmc41idu1ljm3idq5ljgyidg4ljaxidy4lja0idewlje0iduunjugmjaumzcgmteumzugmjkumdygmtkumdugni4ymya1ljugmteuntygmteuotqgmtyunjggmtgunwe0mzcunjugndm3ljy1idagmde1mc4zoca4ms42n2myljy1iduunia1lji1idexlju1idquodmgmtcunzqilz4kicagidxwyxroihn0cm9rzt0ii0zfrkvgrsigc3ryb2tllxdpzhropsiumjuiigq9ik00ms45miazowexmdquosaxmdquosawidawmjeumdugmtyumdhjns40msazljezidexljegns43ocaxni42oca4ljzdmtqwljc3idk0ljyyide5mc4xmyaxndgumzqgmje1ljkyidixmiivpgogicagphbhdgggc3ryb2tlpsijrkvgruzfiibzdhjva2utd2lkdgg9ii4ynsigzd0ittk0ljkyidywyzcuotkgmtiunsaync44ide1ljuyidm2lju2idi0lju4idyumtggnc43nsaxmc44ocaxms4xmyaxni40miaxni42mia3lja3idcgmtuunsaxmi41myaymi41miaxos42iduuntcgns42miaxmc4xnsaxmi4xmiaxnc42msaxoc42nwe4njgunia4njguniawidaxmzauosa0oc41nu0xndquotigodfhmjm1ljm2idizns4zniawidaxnjggodyilz4kica8l2c+cjwvc3znpgo=);
    position: absolute;
    right: -22px;
    top: -100px;
    height: 191px;
    width: 157px;
    background-size: contain;
    background-repeat: no-repeat; }
    @media (min-width: 40em) {
      .teasercard:after {
        height: 231px;
        width: 177px;
        top: -130px;
        right: -15px; } }
    @media (min-width: 64em) {
      .teasercard:after {
        height: 281px;
        width: 217px;
        right: -17px; } }

.teasercard__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-family: serif;
  font-size: 20px;
  font-weight: 700;
  color: #18492b;
  line-height: 1.3;
  margin-bottom: 10px; }
  @media (min-width: 40em) {
    .teasercard__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .teasercard__title {
    font-family: "UrgeText-SemiBold", serif; }
  .fl .teasercard__title {
    font-family: "Noto Sans", sans-serif; }
  .teasercard__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .teasercard__title {
      font-size: 25px; } }

.teasercard__date {
  margin: 0;
  font-style: normal;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #afcc56;
  letter-spacing: 1.75px;
  line-height: 1.3;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto; }
  @media (min-width: 40em) {
    .teasercard__date {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none;
      font-size: 14px; } }
  .fl .teasercard__date {
    font-family: "Noto Sans", sans-serif; }

.teasercard__text {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-family: serif;
  font-size: 14px;
  font-weight: 700;
  color: #18492b;
  line-height: 1.18;
  margin-top: 20px;
  line-height: 1.34;
  margin-bottom: 20px; }
  @media (min-width: 40em) {
    .teasercard__text {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .teasercard__text {
    font-family: "UrgeText-SemiBold", serif; }
  .fl .teasercard__text {
    font-family: "Noto Sans", sans-serif; }
  .teasercard__text sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .teasercard__text {
      font-size: 17px; } }

.teasercard__link {
  margin: 0;
  font-style: normal;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #afcc56;
  letter-spacing: 1.75px;
  line-height: 1.3;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  text-decoration: none; }
  @media (min-width: 40em) {
    .teasercard__link {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none;
      font-size: 14px; } }
  .fl .teasercard__link {
    font-family: "Noto Sans", sans-serif; }

/**
* Sections
*
* Styleguide sections
*/
/*
Duo

Styleguide sections.duo
*/
/*
Standard

Markup:
<section class="Duo">
    <div class="Duo__grid">
        <aside class="Duo__aside">
            <picture>
                <source srcset="http://placehold.it/720x600?text=Bild-large" media="(min-width: 64em)">
                <source srcset="http://placehold.it/1024x600?text=Bild-medium" media="(min-width: 40em)">
                <img srcset="http://placehold.it/640x380?text=Bild" alt="" class="fluid">
            </picture>
        </aside>
        <main class="Duo__main">
            <div class="combo">
                <h2 class="combo__supertitle">Bürgerinformation</h2>
                <h1 class="combo__title">Immer eine offene Türe</h1>
                <div class="combo__text">
                    Das Green-Team hat seinen Sitz im ehemaligen Haus des Gastes in der Bahnhofstraße 19, mitten im künftigen Landesgartenschau-Gelände. Hier können die Bürgerinnen und Bürger die Pläne einsehen von Montag bis Freitag 9 bis 16 und Donnerstag bis 18 Uhr. In der neuen Geschäftsstelle ist genügend Platz für das Team, das in den kommenden Jahren mit mehr und mehr Aufgaben betraut wird.
                </div>
            </div>
        </main>
    </div>
</section>

Styleguide sections.duo.1
*/
.Duo,
.DuoSwitched {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px; }

@media (min-width: 40em) {
  .DuoSmall .Duo__grid {
    margin-left: -20px;
    display: block;
    font-size: 0; }
    .DuoSmall .Duo__grid > * {
      padding-left: 20px;
      vertical-align: middle;
      display: inline-block;
      font-size: 16px; } }

@media (min-width: 64em) {
  .Duo__grid {
    margin-left: -20px;
    display: block;
    font-size: 0; }
    .Duo__grid > * {
      padding-left: 20px;
      vertical-align: middle;
      display: inline-block;
      font-size: 16px; } }

.Duo__aside + .Duo__main {
  margin-top: 40px; }
  @media (min-width: 64em) {
    .Duo__aside + .Duo__main {
      margin-top: 0; } }

@media (min-width: 64em) {
  .Duo .Duo__main {
    width: 39.28571%;
    position: relative;
    right: auto;
    left: 3.57143%; } }

@media (min-width: 90em) {
  .Duo .Duo__main {
    width: 32.14286%;
    position: relative;
    right: auto;
    left: 10.71429%; } }

@media (min-width: 64em) {
  .Duo .Duo__aside {
    width: 57.14286%;
    position: relative; } }

@media (min-width: 90em) {
  .Duo .Duo__aside {
    width: 50%;
    position: relative;
    right: auto;
    left: 7.14286%; } }

/*
Switched

Markup:
<section class="DuoSwitched">
    <div class="Duo__grid">
        <aside class="Duo__aside">
            <picture>
                <source srcset="http://placehold.it/720x600?text=Bild-large" media="(min-width: 64em)">
                <source srcset="http://placehold.it/1024x600?text=Bild-medium" media="(min-width: 40em)">
                <img srcset="http://placehold.it/640x380?text=Bild" alt="" class="fluid">
            </picture>
        </aside>
        <main class="Duo__main">
            <div class="combo">
                <h2 class="combo__supertitle">Bürgerinformation</h2>
                <h1 class="combo__title">Immer eine offene Türe</h1>
                <div class="combo__text">
                    Das Green-Team hat seinen Sitz im ehemaligen Haus des Gastes in der Bahnhofstraße 19, mitten im künftigen Landesgartenschau-Gelände. Hier können die Bürgerinnen und Bürger die Pläne einsehen von Montag bis Freitag 9 bis 16 und Donnerstag bis 18 Uhr. In der neuen Geschäftsstelle ist genügend Platz für das Team, das in den kommenden Jahren mit mehr und mehr Aufgaben betraut wird.
                </div>
            </div>
        </main>
    </div>
</section>

Styleguide sections.duo.2
*/
@media (min-width: 64em) {
  .DuoSwitched .Duo__main {
    width: 39.28571%;
    position: relative;
    left: auto;
    right: 57.14286%; } }

@media (min-width: 90em) {
  .DuoSwitched .Duo__main {
    width: 32.14286%;
    position: relative;
    left: auto;
    right: 42.85714%; } }

@media (min-width: 64em) {
  .DuoSwitched .Duo__aside {
    width: 57.14286%;
    position: relative;
    right: auto;
    left: 42.85714%; } }

@media (min-width: 90em) {
  .DuoSwitched .Duo__aside {
    width: 50%;
    position: relative;
    right: auto;
    left: 42.85714%; } }

/*
Small

Markup:
<section class="Duo  DuoSmall">
    <div class="Duo__grid">
        <aside class="Duo__aside">
            <picture>
                <source srcset="http://placehold.it/720x600?text=Bild-large" media="(min-width: 64em)">
                <source srcset="http://placehold.it/1024x600?text=Bild-medium" media="(min-width: 40em)">
                <img srcset="http://placehold.it/640x380?text=Bild" alt="" class="fluid">
            </picture>
        </aside>
        <main class="Duo__main">
            <div class="combo">
                <h2 class="combo__supertitle">Bürgerinformation</h2>
                <h1 class="combo__title">Immer eine offene Türe</h1>
                <div class="combo__text">
                    Das Green-Team hat seinen Sitz im ehemaligen Haus des Gastes in der Bahnhofstraße 19, mitten im künftigen Landesgartenschau-Gelände. Hier können die Bürgerinnen und Bürger die Pläne einsehen von Montag bis Freitag 9 bis 16 und Donnerstag bis 18 Uhr. In der neuen Geschäftsstelle ist genügend Platz für das Team, das in den kommenden Jahren mit mehr und mehr Aufgaben betraut wird.
                </div>
            </div>
        </main>
    </div>
</section>
<!-- switched -->
<section class="DuoSwitched  DuoSmall">
    <div class="Duo__grid">
        <aside class="Duo__aside">
            <picture>
                <source srcset="http://placehold.it/720x600?text=Bild-large" media="(min-width: 64em)">
                <source srcset="http://placehold.it/1024x600?text=Bild-medium" media="(min-width: 40em)">
                <img srcset="http://placehold.it/640x380?text=Bild" alt="" class="fluid">
            </picture>
        </aside>
        <main class="Duo__main">
            <div class="combo">
                <h2 class="combo__supertitle">Bürgerinformation</h2>
                <h1 class="combo__title">Immer eine offene Türe</h1>
                <div class="combo__text">
                    Das Green-Team hat seinen Sitz im ehemaligen Haus des Gastes in der Bahnhofstraße 19, mitten im künftigen Landesgartenschau-Gelände. Hier können die Bürgerinnen und Bürger die Pläne einsehen von Montag bis Freitag 9 bis 16 und Donnerstag bis 18 Uhr. In der neuen Geschäftsstelle ist genügend Platz für das Team, das in den kommenden Jahren mit mehr und mehr Aufgaben betraut wird.
                </div>
            </div>
        </main>
    </div>
</section>

Styleguide sections.duo.3
*/
@media (min-width: 40em) {
  .DuoSmall .Duo__aside + .Duo__main {
    margin-top: 0; } }

@media (min-width: 40em) {
  .Duo.DuoSmall .Duo__main {
    width: 50%;
    position: relative;
    right: auto;
    left: 3.57143%; } }

@media (min-width: 64em) {
  .Duo.DuoSmall .Duo__main {
    width: 46.42857%;
    position: relative;
    right: auto;
    left: 14.28571%; } }

@media (min-width: 90em) {
  .Duo.DuoSmall .Duo__main {
    width: 50%;
    position: relative;
    right: auto;
    left: 14.28571%; } }

@media (min-width: 40em) {
  .DuoSwitched.DuoSmall .Duo__main {
    width: 50%;
    position: relative;
    left: auto;
    right: 46.42857%; } }

@media (min-width: 64em) {
  .DuoSwitched.DuoSmall .Duo__main {
    width: 46.42857%;
    position: relative;
    left: auto;
    right: 25%; } }

@media (min-width: 90em) {
  .DuoSwitched.DuoSmall .Duo__main {
    width: 50%;
    position: relative;
    left: auto;
    right: 21.42857%; } }

@media (min-width: 40em) {
  .Duo.DuoSmall .Duo__aside {
    width: 46.42857%;
    position: relative; } }

@media (min-width: 64em) {
  .Duo.DuoSmall .Duo__aside {
    width: 32.14286%;
    position: relative;
    right: auto;
    left: 7.14286%; } }

@media (min-width: 90em) {
  .Duo.DuoSmall .Duo__aside {
    width: 28.57143%;
    position: relative;
    right: auto;
    left: 7.14286%; } }

@media (min-width: 40em) {
  .DuoSwitched.DuoSmall .Duo__aside {
    width: 46.42857%;
    position: relative;
    right: auto;
    left: 53.57143%; } }

@media (min-width: 64em) {
  .DuoSwitched.DuoSmall .Duo__aside {
    width: 32.14286%;
    position: relative;
    right: auto;
    left: 60.71429%; } }

@media (min-width: 90em) {
  .DuoSwitched.DuoSmall .Duo__aside {
    width: 28.57143%;
    position: relative;
    right: auto;
    left: 64.28571%; } }

/*
mit kleinem combo-titel

Markup:
<section class="Duo">
    <div class="Duo__grid">
        <aside class="Duo__aside">
            <picture>
                <source srcset="http://placehold.it/720x420?text=Bild-large" media="(min-width: 64em)">
                <source srcset="http://placehold.it/1024x600?text=Bild-medium" media="(min-width: 40em)">
                <img srcset="http://placehold.it/640x380?text=Bild" alt="" class="fluid">
            </picture>
        </aside>
        <main class="Duo__main">
            <div class="combo">
                <h2 class="combo__supertitle">Bilder</h2>
                <h1 class="combo__small-title">Baustellenreport 2017</h1>
                <div class="combo__text">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                </div>
                <div class="combo__actions">
                    <a href="#0" class="combo__action">Zur Galerie</a>
                </div>
            </div>
        </main>
    </div>
</section>

Styleguide sections.duo.4
*/
/*
Downloads

Styleguide sections.downloads
*/
/*
Standard

Markup:
<section class="Downloads">
    <div class="Downloads__grid">
        <div class="Downloads__container">
            <h1 class="Downloads__title">Bilder Download</h1>
            <div class="Downloads__text">Die Landesgartenschau Überlingen 2020 GmbH verzeichnet den ersten Erfolg beim Thema Sponsoring. „Wir freuen uns sehr, mit der Riess Gruppe einen kompetenten und verlässlichen Mobilitätspartner für die Landesgartenschau gefunden zu haben“, sagte Roland Leitner, Geschäftsführer der Landesgartenschau Überlingen 2020 GmbH. ….</div>
            <ul class="download-list  Downloads__list">
                <li>
                    <span class="download-icon  include-parent-hover"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon  download-icon__icon"><path d="M6 19.167h12V17.5H6v1.667zM18 10h-3.429V5H9.43v5H6l6 5.833L18 10z"/></svg></span></span>
                    <span class="download-list__label">27.11.2017 Verkehrskonzept - Ein Zwischenstand</span>
                    <a href=""></a>
                </li>
                <li>
                    <span class="download-icon  include-parent-hover"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon  download-icon__icon"><path d="M6 19.167h12V17.5H6v1.667zM18 10h-3.429V5H9.43v5H6l6 5.833L18 10z"/></svg></span></span>
                    <span class="download-list__label">27.11.2017 Verkehrskonzept - Ein Zwischenstand</span>
                    <a href=""></a>
                </li>
                <li>
                    <span class="download-icon  include-parent-hover"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon  download-icon__icon"><path d="M6 19.167h12V17.5H6v1.667zM18 10h-3.429V5H9.43v5H6l6 5.833L18 10z"/></svg></span></span>
                    <span class="download-list__label">27.11.2017 Verkehrskonzept - Ein Zwischenstand</span>
                    <a href=""></a>
                </li>
                <li>
                    <span class="download-icon  include-parent-hover"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon  download-icon__icon"><path d="M6 19.167h12V17.5H6v1.667zM18 10h-3.429V5H9.43v5H6l6 5.833L18 10z"/></svg></span></span>
                    <span class="download-list__label">27.11.2017 Verkehrskonzept - Ein Zwischenstand</span>
                    <a href=""></a>
                </li>
                <li>
                    <span class="download-icon  include-parent-hover"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon  download-icon__icon"><path d="M6 19.167h12V17.5H6v1.667zM18 10h-3.429V5H9.43v5H6l6 5.833L18 10z"/></svg></span></span>
                    <span class="download-list__label">27.11.2017 Verkehrskonzept - Ein Zwischenstand</span>
                    <a href=""></a>
                </li>
            </ul>
        </div>
    </div>
</section>

Styleguide sections.downloads.1
*/
.Downloads {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px; }

@media (min-width: 64em) {
  .Downloads__grid {
    margin-left: -20px;
    display: block;
    font-size: 0; }
    .Downloads__grid > * {
      padding-left: 20px;
      vertical-align: top;
      display: inline-block;
      font-size: 16px; } }

@media (min-width: 64em) {
  .Downloads__container {
    width: 85.71429%;
    position: relative;
    right: auto;
    left: 7.14286%; } }

.Downloads__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 16px;
  color: #18492b;
  line-height: 1.45;
  max-width: 700px;
  margin-bottom: 20px; }
  @media (min-width: 40em) {
    .Downloads__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .Downloads__title {
    font-family: "UrgeText-SemiBold", serif; }
  .Downloads__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .Downloads__title {
      font-size: 20px; } }

.Downloads__text {
  font-weight: 400;
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.41;
  max-width: 700px;
  margin-bottom: 35px; }
  @media (min-width: 40em) {
    .Downloads__text {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .Downloads__text a:not([class]) {
    color: currentColor; }
    .Downloads__text a:not([class]):hover {
      opacity: 0.75; }
  .Downloads__text *:first-child {
    margin-top: 0; }
  .Downloads__text *:last-child {
    margin-bottom: 0; }

@media (min-width: 40em) {
  .Downloads__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-left: -40px; } }

@media (min-width: 40em) {
  .Downloads__list li {
    max-width: 50%;
    -webkit-box-flex: 1;
        -ms-flex: 1 0 50%;
            flex: 1 0 50%;
    padding-left: 40px; } }

@media (min-width: 64em) {
  .Downloads__list li {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 33.33%;
            flex: 1 0 33.33%;
    max-width: 33.33%; } }

/*
Mit Bildliste

Markup:
<section class="Downloads">
    <div class="Downloads__grid">
        <div class="Downloads__container">
            <h1 class="Downloads__title">Bilder Download</h1>
            <div class="Downloads__text">Die Landesgartenschau Überlingen 2020 GmbH verzeichnet den ersten Erfolg beim Thema Sponsoring. „Wir freuen uns sehr, mit der Riess Gruppe einen kompetenten und verlässlichen Mobilitätspartner für die Landesgartenschau gefunden zu haben“, sagte Roland Leitner, Geschäftsführer der Landesgartenschau Überlingen 2020 GmbH. ….</div>
            <ul class="Downloads__image-list">
                <li>
                    <div class="download-image">
                        <div class="download-image__image-container">
                            <img src="http://placehold.it/640x400" class="fluid">
                            <a href="#0"></a>
                            <span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon  download-image__icon"><path d="M6 19.167h12V17.5H6v1.667zM18 10h-3.429V5H9.43v5H6l6 5.833L18 10z"/></svg>
                            </span>
                        </div>
                        <div class="download-image__caption">Baustelle 2015 (43 Bilder/2GB)</div>
                    </div>
                </li>
                <li>
                    <div class="download-image">
                        <div class="download-image__image-container">
                            <img src="http://placehold.it/640x400" class="fluid">
                            <a href="#0"></a>
                            <span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon  download-image__icon"><path d="M6 19.167h12V17.5H6v1.667zM18 10h-3.429V5H9.43v5H6l6 5.833L18 10z"/></svg></span>
                        </div>
                        <div class="download-image__caption">Baustelle 2015 (43 Bilder/2GB)</div>
                    </div>
                </li>
                <li>
                    <div class="download-image">
                        <div class="download-image__image-container">
                            <img src="http://placehold.it/640x400" class="fluid">
                            <a href="#0"></a>
                            <span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon  download-image__icon"><path d="M6 19.167h12V17.5H6v1.667zM18 10h-3.429V5H9.43v5H6l6 5.833L18 10z"/></svg></span>
                        </div>
                        <div class="download-image__caption">Baustelle 2015 (43 Bilder/2GB)</div>
                    </div>
                </li>
                <li>
                    <div class="download-image">
                        <div class="download-image__image-container">
                            <img src="http://placehold.it/640x400" class="fluid">
                            <a href="#0"></a>
                            <span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon  download-image__icon"><path d="M6 19.167h12V17.5H6v1.667zM18 10h-3.429V5H9.43v5H6l6 5.833L18 10z"/></svg></span>
                        </div>
                        <div class="download-image__caption">Baustelle 2015 (43 Bilder/2GB)</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</section>

Styleguide sections.downloads.2
*/
.Downloads__image-list {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: -20px; }
  @media (min-width: 40em) {
    .Downloads__image-list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      margin-left: -20px; } }
  .Downloads__image-list li {
    margin-top: 20px; }
    @media (min-width: 40em) {
      .Downloads__image-list li {
        max-width: 50%;
        -webkit-box-flex: 1;
            -ms-flex: 1 0 50%;
                flex: 1 0 50%;
        padding-left: 20px; } }
    @media (min-width: 64em) {
      .Downloads__image-list li {
        -webkit-box-flex: 1;
            -ms-flex: 1 0 33.33%;
                flex: 1 0 33.33%;
        max-width: 33.33%; } }
    @media (min-width: 90em) {
      .Downloads__image-list li {
        -webkit-box-flex: 1;
            -ms-flex: 1 0 25%;
                flex: 1 0 25%;
        max-width: 25%; } }

/*
Mit Download-Blöcken

Markup:
<section class="Downloads">
    <div class="Downloads__grid">
        <div class="Downloads__container">
            <ul class="Downloads__block-list">
                <li>
                    <div class="download-block">
                        <aside class="download-block__aside">
                            <div class="download-icon"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon  download-icon__icon"><path d="M6 19.167h12V17.5H6v1.667zM18 10h-3.429V5H9.43v5H6l6 5.833L18 10z" /></svg></span>
                                <div class="download-icon__label">download</div>
                            </div>
                        </aside>
                        <main class="download-block__main">
                            <h2 class="download-block__title">Riess Gruppe übergibt Dienstfahrzeuge an Landesgartenschau-Team</h2>
                            <div class="download-block__date">11. Oktober 2018</div>
                            <div class="download-block__text">Die Landesgartenschau Überlingen 2020 GmbH verzeichnet den ersten Erfolg beim Thema Sponsoring. „Wir freuen uns sehr, mit
                            der Riess Gruppe einen kompetenten und verlässlichen Mobilitätspartner für die Landesgartenschau gefunden zu haben“, sagte
                            Roland Leitner, Geschäftsführer der Landesgartenschau Überlingen 2020 GmbH. ….</div>
                        </main>
                        <aside class="download-block__image-container">
                            <img src="http://placehold.it/320x180" alt="" class="fluid">
                        </aside>
                    </div>
                </li>
                <li>
                    <div class="download-block">
                        <aside class="download-block__aside">
                            <div class="download-icon"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon  download-icon__icon"><path d="M6 19.167h12V17.5H6v1.667zM18 10h-3.429V5H9.43v5H6l6 5.833L18 10z" /></svg></span>
                                <div class="download-icon__label">download</div>
                            </div>
                        </aside>
                        <main class="download-block__main">
                            <h2 class="download-block__title">Riess Gruppe übergibt Dienstfahrzeuge an Landesgartenschau-Team</h2>
                            <div class="download-block__date">11. Oktober 2018</div>
                            <div class="download-block__text">Die Landesgartenschau Überlingen 2020 GmbH verzeichnet den ersten Erfolg beim Thema Sponsoring. „Wir freuen uns sehr, mit
                            der Riess Gruppe einen kompetenten und verlässlichen Mobilitätspartner für die Landesgartenschau gefunden zu haben“, sagte
                            Roland Leitner, Geschäftsführer der Landesgartenschau Überlingen 2020 GmbH. ….</div>
                        </main>
                        <aside class="download-block__image-container">
                            <img src="http://placehold.it/320x180" alt="" class="fluid">
                        </aside>
                    </div>
                </li>
                <li>
                    <div class="download-block">
                        <aside class="download-block__aside">
                            <div class="download-icon"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon  download-icon__icon"><path d="M6 19.167h12V17.5H6v1.667zM18 10h-3.429V5H9.43v5H6l6 5.833L18 10z" /></svg></span>
                                <div class="download-icon__label">download</div>
                            </div>
                        </aside>
                        <main class="download-block__main">
                            <h2 class="download-block__title">Riess Gruppe übergibt Dienstfahrzeuge an Landesgartenschau-Team</h2>
                            <div class="download-block__date">11. Oktober 2018</div>
                            <div class="download-block__text">Die Landesgartenschau Überlingen 2020 GmbH verzeichnet den ersten Erfolg beim Thema Sponsoring. „Wir freuen uns sehr, mit
                            der Riess Gruppe einen kompetenten und verlässlichen Mobilitätspartner für die Landesgartenschau gefunden zu haben“, sagte
                            Roland Leitner, Geschäftsführer der Landesgartenschau Überlingen 2020 GmbH. ….</div>
                        </main>
                        <aside class="download-block__image-container">
                            <img src="http://placehold.it/320x180" alt="" class="fluid">
                        </aside>
                    </div>
                </li>
                <li>
                    <div class="download-block">
                        <aside class="download-block__aside">
                            <div class="download-icon"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon  download-icon__icon"><path d="M6 19.167h12V17.5H6v1.667zM18 10h-3.429V5H9.43v5H6l6 5.833L18 10z" /></svg></span>
                                <div class="download-icon__label">download</div>
                            </div>
                        </aside>
                        <main class="download-block__main">
                            <h2 class="download-block__title">Riess Gruppe übergibt Dienstfahrzeuge an Landesgartenschau-Team</h2>
                            <div class="download-block__date">11. Oktober 2018</div>
                            <div class="download-block__text">Die Landesgartenschau Überlingen 2020 GmbH verzeichnet den ersten Erfolg beim Thema Sponsoring. „Wir freuen uns sehr, mit
                            der Riess Gruppe einen kompetenten und verlässlichen Mobilitätspartner für die Landesgartenschau gefunden zu haben“, sagte
                            Roland Leitner, Geschäftsführer der Landesgartenschau Überlingen 2020 GmbH. ….</div>
                        </main>
                        <aside class="download-block__image-container">
                            <img src="http://placehold.it/320x180" alt="" class="fluid">
                        </aside>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</section>

Styleguide sections.downloads.3
*/
.Downloads__block-list {
  list-style: none;
  margin: 0;
  padding: 0; }
  .Downloads__block-list li {
    padding-top: 30px;
    padding-bottom: 30px; }
  .Downloads__block-list li + li {
    border-top: 1px dotted rgba(74, 74, 74, 0.43); }

/*
Video

Markup:
<div data-app="video" data-yt-id="nsg1y2ZrPfA">
    <picture>
       <source srcset="http://placehold.it/1440x675&text=Large%20Screens" media="(min-width: 64em)">
        <source srcset="http://placehold.it/1024x675&text=Medium%20Screens" media="(min-width: 40em)">
        <img srcset="http://placehold.it/640x400&text=Default%20Image" alt="" class="fluid">
    </picture>
    <div class="video__play-wrapper">
        <div class="video__play"></div>
        <div class="video__play-label">Video abspielen</div>
        <img src="http://placehold.it/135x75" class="video__decoration">
    </div>
</div>

Styleguide sections.video
*/
.video {
  height: 0;
  position: relative;
  overflow: hidden; }
  .video iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    top: 0;
    left: 0; }

.video--16-9 {
  padding-bottom: 56.25%; }

.video--4-3 {
  padding-bottom: 75%; }

[data-app='video'] {
  width: 100%;
  position: relative;
  text-align: center;
  font-size: 0;
  max-width: 1440px;
  margin: 0 auto; }
  [data-app='video']:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(74, 74, 74, 0.6); }
  [data-app='video']:hover {
    cursor: pointer; }
    [data-app='video']:hover .video__play::before {
      -webkit-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
              transform: rotate(360deg); }

.video__play-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }

.video__play {
  height: 71px;
  position: relative; }
  .video__play::before {
    content: '';
    width: 70px;
    height: 70px;
    margin-top: -35px;
    margin-left: -35px;
    position: absolute;
    top: 50%;
    left: 50%;
    background: url(data:image/svg+xml;base64,phn2zyb4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmciihdpzhropsi0nsigagvpz2h0psi0nsi+phbhdgggzmlsbd0ii2zmzmzmziigzd0ittagmjiunwgyqzigmzmuodiyidexlje3oca0myaymi41idqzuzqzidmzljgymia0myaymi41idmzljgymiayidiyljugmmeymc40idiwljqgmcawidatmtiumtm0idmuotc1tdkumtgxidqumzy0qtiyljqgmjiuncawidagmsaymi41idbdmzquoti2idagndugmtaumdc0idq1idiyljvtmzquoti2idq1idiyljugndugmcaznc45mjygmcaymi41eiivpjwvc3znpgo=) no-repeat;
    background-size: contain;
    border-bottom: 5px solid color("blue", "default");
    -webkit-transition: -webkit-transform ease-in-out 0.4s;
    transition: -webkit-transform ease-in-out 0.4s;
    -o-transition: transform ease-in-out 0.4s;
    transition: transform ease-in-out 0.4s;
    transition: transform ease-in-out 0.4s, -webkit-transform ease-in-out 0.4s; }
  .video__play::after {
    content: '';
    border: 12px solid transparent;
    border-left-width: 18px;
    border-left-color: #ffffff;
    margin-top: -12px;
    margin-left: -6px;
    position: absolute;
    top: 50%;
    left: 50%; }

.video__play-label {
  color: #ffffff;
  margin-top: 20px;
  font-size: 15px; }

.video__decoration {
  max-width: 100%;
  display: none;
  margin-top: 30px; }
  @media (min-width: 40em) {
    .video__decoration {
      display: block; } }

/*
Banner

Markup:
<section class="Banner  js-poster">
    <picture class="Banner__image">
        <source srcset="http://placehold.it/2000x580&text=XLarge%20Screens" media="(min-width: 90em)">
        <source srcset="http://placehold.it/1440x580&text=Large%20Screens" media="(min-width: 64em)">
        <source srcset="http://placehold.it/1024x500&text=Medium%20Screens" media="(min-width: 40em)">
        <img srcset="http://placehold.it/640x400&text=Default%20Image" alt="">
    </picture>
</section>

Styleguide sections.banner
*/
.Banner {
  max-width: 1440px;
  margin: 0 auto;
  height: 280px;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center; }
  @media (min-width: 40em) {
    .Banner {
      height: 380px; } }
  @media (min-width: 64em) {
    .Banner {
      height: 420px; } }

.Banner__image {
  height: 0; }

/*
Article

Markup:
<article class="Article">
    <div class="Article__grid">
        <div class="Article__wrapper">
            <div class="combo">
                <h2 class="combo__supertitle">Lorem ipsum dolor</h2>
                <h1 class="combo__title">Ein klares »Ja« zur Landesgartenschau</h1>
                <div class="combo__text">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, nulla ducimus molestiae deserunt facere aspernatur quia voluptatibus minus debitis eaque sit molestias! Natus sit animi eaque illo corrupti architecto esse et, similique dolores quisquam, error magni autem ducimus sed! Ullam.</p>
                </div>
                <blockquote class="combo__quote  Article__quote">Ja! Diesen Schritt hat vor Überlingen – freiwillig – so noch keine andere Stadt gemacht.</blockquote>
                <div class="combo__text">
                    <p>Bei drei Bürgerwerkstätten 2011 und 2012 hatten die Überlingen schon zu einem frühen Zeitpunkt die Gelegenheit, ihre Ideen einzubringen. Themen der beiden ersten Workshops 2011 waren die Daueranlagen, das Gartenschaujahr 2020 sowie die Ausstellungsorte. Vor der Auslobung des Ideen- und Realisierungswettbewerbs 2012 wurden die Bürgerinnen und Bürger miteinbezogen, um die Inhalte der Auslobung zu diskutieren. Wünsche waren zum Beispiel ein Bürgerpark für Familien und Jugendliche im Westen, die durchgängige Begehbarkeit des Grabensystems oder ein autofreier Mantelhafen beim Hotel Ochsen und bei der Polizei. Einig waren sich die
                    Teilnehmer der Workshops beim Thema Mobilität: Autos sollen an den Stadteingängen abgefangen werden. Vorschläge aus dem Ideenpool der Bürger flossen in die Ausschreibung mit ein.</p>
                </div>
                <div class="Article__image">
                    <picture>
                        <source srcset="http://placehold.it/350x350&text=Large%20Screens" media="(min-width: 64em)">
                        <source srcset="http://placehold.it/200&text=Medium%20Screens" media="(min-width: 40em)">
                        <img srcset="http://placehold.it/640x400&text=Default%20Image" alt="" class="fluid">
                    </picture>
                </div>
                <div class="combo__text">
                    <p><strong>Für Reiseveranstalter</strong></p>
                    <ul>
                        <li>Ermäßigter Eintrittspreis für Gruppen ab 20 zahlenden Personen (15 Euro pro Person)</li>
                        <li>Ticketbestellung mit und ohne Vertriebsvereinbarung</li>
                        <li>Kostenloses Informations- und Werbematerial (Plakat, Imagebroschüre) für Ihre Gäste und zur Reiseplanung</li>
                        <li>Textbausteine, Bildmaterial und Logonutzung für Ihre Kataloggestaltung</li>
                    </ul>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque inventore praesentium autem iste nisi mollitia ratione vitae nulla suscipit voluptates, ullam molestiae natus dolorem dolores voluptatem pariatur tempora temporibus dolorum deleniti blanditiis expedita, esse iure deserunt debitis. Hic, enim. Expedita dignissimos est nihil voluptate? Vitae labore unde deleniti enim reiciendis.</p>
                </div>
            </div>
        </div>
    </div>
</article>

Styleguide sections.article
*/
.Article {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px; }

@media (min-width: 40em) {
  .Article__grid {
    margin-left: -20px;
    display: block;
    font-size: 0; }
    .Article__grid > * {
      padding-left: 20px;
      vertical-align: top;
      display: inline-block;
      font-size: 16px; } }

@media (min-width: 40em) {
  .Article__wrapper {
    width: 78.57143%;
    position: relative;
    right: auto;
    left: 21.42857%; } }

@media (min-width: 64em) {
  .Article__wrapper {
    width: 64.28571%;
    position: relative;
    right: auto;
    left: 28.57143%; } }

@media (min-width: 90em) {
  .Article__wrapper {
    width: 57.14286%;
    position: relative;
    right: auto;
    left: 28.57143%; } }

.Article__quote {
  *zoom: 1; }
  @media (min-width: 40em) {
    .Article__quote {
      width: 300px;
      padding: 20px;
      margin: 0 0 0 -120px;
      float: left;
      -webkit-hyphens: auto;
          -ms-hyphens: auto;
              hyphens: auto; } }
  @media (min-width: 64em) {
    .Article__quote {
      width: 350px;
      margin-left: -180px; } }
  @media (min-width: 90em) {
    .Article__quote {
      margin-left: -250px; } }
  .Article__quote:before, .Article__quote:after {
    content: '';
    display: table; }
  .Article__quote:after {
    clear: both; }

.Article__image {
  max-width: 100%;
  margin-bottom: 40px;
  *zoom: 1; }
  @media (min-width: 40em) {
    .Article__image {
      width: 300px;
      padding: 20px;
      margin-bottom: 0;
      margin-left: -120px;
      float: left; } }
  @media (min-width: 64em) {
    .Article__image {
      width: 350px;
      margin-left: -180px; } }
  @media (min-width: 90em) {
    .Article__image {
      margin-left: -250px; } }
  .Article__image:before, .Article__image:after {
    content: '';
    display: table; }
  .Article__image:after {
    clear: both; }

/*
Date Teaser

Styleguide sections.date-teaser
*/
/*
Standard

Markup:
<section class="DateTeaser">
    <div class="DateTeaser__grid">
        <aside class="DateTeaser__aside">
            <div class="DateTeaser__image-container">
                <picture>
                    <source srcset="http://placehold.it/680x500&text=Large%20Screens" media="(min-width: 64em)">
                    <source srcset="http://placehold.it/1024x400&text=Medium%20Screens" media="(min-width: 40em)">
                    <img srcset="http://placehold.it/640x400&text=Default%20Image" alt="" class="fluid">
                </picture>
                <a href="#0"></a>
            </div>
            <div class="datebox  DateTeaser__datebox">
                <div class="datebox__weekday">Dienstag</div>
                <div class="datebox__date">04.06.</div>
                <div class="datebox__year">2018</div>
            </div>
        </aside>
        <main class="DateTeaser__main">
            <h1 class="DateTeaser__title">Stammtisch im Arena</h1>
            <h2 class="DateTeaser__date">Mi, 4. April | 19:00 Uhr | Arena Ãœberlingen</h2>
            <div class="DateTeaser__text">
                <p>Der nächste Stammtisch der Freunde der Landesgartenschau Überlingen e.V. findet am Mittwoch, 4. April, statt. Die Freunde und diejenigen, die es noch werden möchten, treffen sich um 19 Uhr im Restaurant Arena in der Greth, Landungsplatz 14.</p>
            </div>
            <div class="DateTeaser__actions">
                <a href="#0" class="DateTeaser__primary-action">Termin ansehen</a>
                <a href="#0" class="DateTeaser__secondary-action">Alle Termine ansehen</a>
            </div>
        </main>
    </div>
</section>

Styleguide sections.date-teaser.1
*/
.DateTeaser,
.DateTeaserSwitched {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px; }
  .DateTeaser.is-gray,
  .DateTeaserSwitched.is-gray {
    background-color: #f8f8f8; }

@media (min-width: 64em) {
  .DateTeaser__grid {
    margin-left: -20px;
    display: block;
    font-size: 0; }
    .DateTeaser__grid > * {
      padding-left: 20px;
      vertical-align: middle;
      display: inline-block;
      font-size: 16px; } }

.DateTeaser__aside + .DateTeaser__main {
  margin-top: 40px; }
  @media (min-width: 64em) {
    .DateTeaser__aside + .DateTeaser__main {
      margin-top: 0; } }

@media (min-width: 64em) {
  .DateTeaser .DateTeaser__main {
    width: 42.85714%;
    position: relative;
    right: auto;
    left: 7.14286%; } }

@media (min-width: 90em) {
  .DateTeaser .DateTeaser__main {
    width: 35.71429%;
    position: relative;
    right: auto;
    left: 14.28571%; } }

.DateTeaser__aside {
  position: relative; }
  @media (min-width: 64em) {
    .DateTeaser .DateTeaser__aside {
      width: 50%;
      position: relative; } }
  @media (min-width: 90em) {
    .DateTeaser .DateTeaser__aside {
      width: 42.85714%;
      position: relative;
      right: auto;
      left: 7.14286%; } }

.DateTeaser__image-container {
  position: relative; }
  .DateTeaser__image-container a {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0; }

.DateTeaser__datebox {
  position: absolute;
  top: 30px;
  right: -15px; }
  @media (min-width: 64em) {
    .DateTeaser .DateTeaser__datebox {
      right: -10px;
      -webkit-transform: translateX(50%);
          -ms-transform: translateX(50%);
              transform: translateX(50%); } }

.DateTeaser__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 20px;
  color: #18492b;
  line-height: 1.27;
  margin-bottom: 20px; }
  @media (min-width: 40em) {
    .DateTeaser__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .DateTeaser__title {
    font-family: "UrgeText-SemiBold", serif; }
  .DateTeaser__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .DateTeaser__title {
      font-size: 26px; } }
  @media (min-width: 40em) {
    .DateTeaser__title {
      margin-bottom: 40px; } }
  .DateTeaser__title a {
    color: inherit;
    text-decoration: none; }

.DateTeaser__date {
  margin: 0;
  font-style: normal;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #afcc56;
  letter-spacing: 1.75px;
  line-height: 1.3;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  margin-bottom: 15px; }
  @media (min-width: 40em) {
    .DateTeaser__date {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none;
      font-size: 14px; } }
  .fl .DateTeaser__date {
    font-family: "Noto Sans", sans-serif; }
  .DateTeaser__date a {
    color: inherit;
    text-decoration: none; }

.DateTeaser__text {
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  letter-spacing: 0;
  line-height: 1.8; }
  @media (min-width: 40em) {
    .DateTeaser__text {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .DateTeaser__text a:not([class]) {
    color: currentColor; }
    .DateTeaser__text a:not([class]):hover {
      opacity: 0.75; }
  .DateTeaser__text *:first-child {
    margin-top: 0; }
  .DateTeaser__text *:last-child {
    margin-bottom: 0; }
  @media (min-width: 64em) {
    .DateTeaser__text {
      line-height: 2; } }

.DateTeaser__actions {
  margin-top: 30px; }
  .DateTeaser__actions > * {
    vertical-align: middle; }

.DateTeaser__primary-action {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  -webkit-box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
          box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
  background: #afcc56;
  margin-right: 20px; }
  @media (min-width: 40em) {
    .DateTeaser__primary-action {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .DateTeaser__primary-action svg,
  .DateTeaser__primary-action img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .DateTeaser__primary-action * + svg,
  .DateTeaser__primary-action * + img {
    margin-right: 0;
    margin-left: 15px; }
  .DateTeaser__primary-action:hover {
    cursor: pointer;
    color: #ffffff; }
  .DateTeaser__primary-action:hover {
    background-color: #88a431; }
  .DateTeaser__primary-action:disabled, .DateTeaser__primary-action.is-disabled {
    pointer-events: none;
    opacity: 0.25; }

.DateTeaser__secondary-action {
  font-weight: 400;
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.41;
  display: inline-block;
  margin: 20px 0;
  color: #4a4a4a;
  text-decoration: none;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s; }
  @media (min-width: 40em) {
    .DateTeaser__secondary-action {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .DateTeaser__secondary-action a:not([class]) {
    color: currentColor; }
    .DateTeaser__secondary-action a:not([class]):hover {
      opacity: 0.75; }
  .DateTeaser__secondary-action *:first-child {
    margin-top: 0; }
  .DateTeaser__secondary-action *:last-child {
    margin-bottom: 0; }
  .DateTeaser__secondary-action:hover {
    text-decoration: underline; }

/*
Vertauscht

Markup:
<section class="DateTeaserSwitched">
    <div class="DateTeaser__grid">
        <aside class="DateTeaser__aside">
            <picture>
                <source srcset="http://placehold.it/680x500&text=Large%20Screens" media="(min-width: 64em)">
                <source srcset="http://placehold.it/1024x400&text=Medium%20Screens" media="(min-width: 40em)">
                <img srcset="http://placehold.it/640x400&text=Default%20Image" alt="" class="fluid">
            </picture>
            <div class="datebox  DateTeaser__datebox">
                <div class="datebox__weekday">Dienstag</div>
                <div class="datebox__date">04.06.</div>
                <div class="datebox__year">2018</div>
            </div>
        </aside>
        <main class="DateTeaser__main">
            <h1 class="DateTeaser__title">Stammtisch im Arena</h1>
            <h2 class="DateTeaser__date">Mi, 4. April | 19:00 Uhr | Arena Ãœberlingen</h2>
            <div class="DateTeaser__text">
                <p>Der nächste Stammtisch der Freunde der Landesgartenschau Überlingen e.V. findet am Mittwoch, 4. April, statt. Die Freunde und diejenigen, die es noch werden möchten, treffen sich um 19 Uhr im Restaurant Arena in der Greth, Landungsplatz 14.</p>
            </div>
            <div class="DateTeaser__actions">
                <a href="#0" class="DateTeaser__primary-action">Termin ansehen</a>
                <a href="#0" class="DateTeaser__secondary-action">Alle Termine ansehen</a>
            </div>
        </main>
    </div>
</section>

Styleguide sections.date-teaser.2
*/
@media (min-width: 64em) {
  .DateTeaserSwitched .DateTeaser__main {
    width: 42.85714%;
    position: relative;
    left: auto;
    right: 50%; } }

@media (min-width: 90em) {
  .DateTeaserSwitched .DateTeaser__main {
    width: 35.71429%;
    position: relative;
    left: auto;
    right: 35.71429%; } }

@media (min-width: 64em) {
  .DateTeaserSwitched .DateTeaser__aside {
    width: 50%;
    position: relative;
    right: auto;
    left: 50%; } }

@media (min-width: 90em) {
  .DateTeaserSwitched .DateTeaser__aside {
    width: 42.85714%;
    position: relative;
    right: auto;
    left: 50%; } }

@media (min-width: 64em) {
  .DateTeaserSwitched .DateTeaser__datebox {
    left: 10px;
    right: auto;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%); } }

/*
mit Hintergrund

Markup:
<section class="DateTeaser  is-gray">
    <div class="DateTeaser__grid">
        <aside class="DateTeaser__aside">
            <picture>
                <source srcset="http://placehold.it/680x500&text=Large%20Screens" media="(min-width: 64em)">
                <source srcset="http://placehold.it/1024x400&text=Medium%20Screens" media="(min-width: 40em)">
                <img srcset="http://placehold.it/640x400&text=Default%20Image" alt="" class="fluid">
            </picture>
            <div class="datebox  DateTeaser__datebox">
                <div class="datebox__weekday">Dienstag</div>
                <div class="datebox__date">04.06.</div>
                <div class="datebox__year">2018</div>
            </div>
        </aside>
        <main class="DateTeaser__main">
            <h1 class="DateTeaser__title">Stammtisch im Arena</h1>
            <h2 class="DateTeaser__date">Mi, 4. April | 19:00 Uhr | Arena Ãœberlingen</h2>
            <div class="DateTeaser__text">
                <p>Der nächste Stammtisch der Freunde der Landesgartenschau Überlingen e.V. findet am Mittwoch, 4. April, statt. Die Freunde und diejenigen, die es noch werden möchten, treffen sich um 19 Uhr im Restaurant Arena in der Greth, Landungsplatz 14.</p>
            </div>
            <div class="DateTeaser__actions">
                <a href="#0" class="DateTeaser__primary-action">Termin ansehen</a>
                <a href="#0" class="DateTeaser__secondary-action">Alle Termine ansehen</a>
            </div>
        </main>
    </div>
</section>

Styleguide sections.date-teaser.3
*/
/*
Box-Teaser

Styleguide sections.box-teaser
*/
/*
mit Infobox

Markup:
<section class="BoxTeaser">
    <div class="BoxTeaser__grid">
        <main class="BoxTeaser__main">
            <div class="combo">
                <h2 class="combo__supertitle">Immer informiert</h2>
                <h1 class="combo__title">Pressemitteilungen</h1>
                <h3 class="combo__subtitle">Liebe Medienschaffende,
                    <br><br> hier finden Sie aktuelle Pressemitteilungen und Downloads zur Landesgartenschau Ãœberlingen 2020.</h3>
            </div>
        </main>
        <aside class="BoxTeaser__aside">
            <div class="box">
                <h2 class="box__title">Erhältlich in der Geschäftsstelle der Landesgartenschau Überlingen 2020 GmbH in der Bahnhofstraße oder in der Kur und Touristik am Landungsplatz.</h2>
                <div class="box__text">
                    Montag bis Freitag
                    <br> 09:30 to 19:00
                </div>
                <a href="#0" class="box__action">› Google Maps</a>
            </div>
        </aside>
    </div>
</section>

Styleguide sections.box-teaser.1
*/
.BoxTeaser {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px; }
  .BoxTeaser.is-gray {
    background-color: #f8f8f8; }

@media (min-width: 64em) {
  .BoxTeaser__grid {
    margin-left: -20px;
    display: block;
    font-size: 0; }
    .BoxTeaser__grid > * {
      padding-left: 20px;
      vertical-align: middle;
      display: inline-block;
      font-size: 16px; } }

.BoxTeaser__main {
  max-width: 700px; }
  @media (min-width: 64em) {
    .BoxTeaser__main {
      max-width: auto;
      width: 50%;
      position: relative; } }
  @media (min-width: 90em) {
    .BoxTeaser__main {
      width: 42.85714%;
      position: relative;
      right: auto;
      left: 7.14286%; } }

.BoxTeaser__aside {
  max-width: 700px; }
  .BoxTeaser__main + .BoxTeaser__aside {
    margin-top: 40px; }
    @media (min-width: 64em) {
      .BoxTeaser__main + .BoxTeaser__aside {
        margin-top: 0; } }
  @media (min-width: 64em) {
    .BoxTeaser__aside {
      width: 35.71429%;
      position: relative;
      right: auto;
      left: 14.28571%; } }
  @media (min-width: 90em) {
    .BoxTeaser__aside {
      width: 25%;
      position: relative;
      right: auto;
      left: 25%; } }

/*
mit Kontaktbox

Markup:
<section class="BoxTeaser">
    <div class="BoxTeaser__grid">
        <main class="BoxTeaser__main">
            <div class="combo">
                <h2 class="combo__supertitle">Immer informiert</h2>
                <h1 class="combo__title">Pressemitteilungen</h1>
                <h3 class="combo__subtitle">Liebe Medienschaffende,
                    <br><br> hier finden Sie aktuelle Pressemitteilungen und Downloads zur Landesgartenschau Ãœberlingen 2020.</h3>
            </div>
        </main>
        <aside class="BoxTeaser__aside">
            <div class="box">
                <h2 class="box__super">Pressekontakt</h2>
                <h3 class="box__subtitle">Petra Pinscher</h3>
                <div class="box__text">
                    T + 49 75551 / 309739-16<br>
                    Mobil +491752416621<br>
                    p.pintscher@ueberlingen2020.de
                </div>
                <h3 class="box__subtitle">Susanne Suchy</h3>
                <div class="box__text">
                    T + 49 75551 / 309739-26<br>
                    s.suchy@ueberlingen2020.de
                </div>
            </div>
        </aside>
    </div>
</section>

Styleguide sections.box-teaser.2
*/
/*
mit Ticketbox

Markup:
<section class="BoxTeaser">
    <div class="BoxTeaser__grid">
        <main class="BoxTeaser__main">
            <div class="combo">
                <h2 class="combo__supertitle">Immer informiert</h2>
                <h1 class="combo__title">Pressemitteilungen</h1>
                <h3 class="combo__subtitle">Liebe Medienschaffende,
                    <br><br> hier finden Sie aktuelle Pressemitteilungen und Downloads zur Landesgartenschau Ãœberlingen 2020.</h3>
            </div>
        </main>
        <aside class="BoxTeaser__aside">
            <div class="box">
                <h2 class="box__subtitle">Vorverkaufsstellen in Ãœberlingen</h2>
                <div class="box__text-small">
                    <p><b>Tourist-Info am Landungsplatz</b><br/>
                    (Bis 20. Oktober 2019)<br />
                    Montag–Freitag: 9:00–18:00 Uhr <br/>
                    Samstag: 9:00–13:00 Uhr <br/>
                    Sonntag: 10:00–13:00 Uhr <br/>
                    (nur noch September)</p>
                    <p>Montag-Freitag: 9:00–12:30 Uhr und 14:00–16:30 Uhr<br />
                    Donnerstag: 9:00–12:30 Uhr und 14:00-18:00 Uhr<br />
                    (21. Oktober bis 31. Dezember 2019)</p>
                </div>
                <div class="box__text-small">
                    <b>LGS-Ticketshop auf der Hofstatt</b><br />
                    Mittwoch und Samstag von 8:00 – 14:00 Uhr
                </div>
                <div class="box__text-small">
                    <b>Bürgerservice Ü-Punkt, Christophstraße 1</b>
                    Montag: 8:00–16:00 Uhr<br />
                    Dienstag u. Mittwoch: 8:00–12:00 Uhr<br />
                    Donnerstag: 8:00–17:00 Uhr<br />
                    Freitag: 8:00–12:00 Uhr
                </div>
            </div>
        </aside>
    </div>
</section>

Styleguide sections.box-teaser.3
*/
/*
mit grauem Hintergrund

Markup:
<section class="BoxTeaser  is-gray">
    <div class="BoxTeaser__grid">
        <main class="BoxTeaser__main">
            <div class="combo">
                <h2 class="combo__supertitle">Immer informiert</h2>
                <h1 class="combo__title">Pressemitteilungen</h1>
                <h3 class="combo__subtitle">Liebe Medienschaffende,
                    <br><br> hier finden Sie aktuelle Pressemitteilungen und Downloads zur Landesgartenschau Ãœberlingen 2020.</h3>
            </div>
        </main>
        <aside class="BoxTeaser__aside">
            <div class="box">
                <h2 class="box__title">Erhältlich in der Geschäftsstelle der Landesgartenschau Überlingen 2020 GmbH in der Bahnhofstraße oder in der Kur und Touristik am Landungsplatz.</h2>
                <div class="box__text">
                    Montag bis Freitag
                    <br> 09:30 to 19:00
                </div>
                <a href="#0" class="box__action">› Google Maps</a>
            </div>
        </aside>
    </div>
</section>

Styleguide sections.box-teaser.4
*/
/*
Footer

Styleguide sections.footer
*/
/*
Standard

Markup:
<footer class="Footer">
    <div class="Footer__wrapper">
        <div class="Footer__grid">
            <aside class="Footer__aside">
                <div class="Footer__aside__container">
                    <svg class="Footer__aside__logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="239" height="322" viewBox="0 0 239 322">
                        <defs>
                        <path id="a" d="M.77.13h10.49v11.5H.77z"/>
                        <path id="c" d="M.14.65h13.71v23.68H.14z"/>
                        <path id="e" d="M0 .42h66.17v27.49H0z"/>
                        <path id="g" d="M.52.51H66.7V28H.52z"/>
                        </defs>
                        <g fill="none" fill-rule="evenodd">
                        <path fill="#008ACA" d="M50.27 265.32l-3.04-.05c-5.76-.03-16.3 3-18.89 13.8-1.72 7.14.22 13.64 1.73 17.22l20.2-30.97z"/>
                        <path fill="#80C1E7" d="M30.07 296.3l.11-.01c3.9-.09 10.57-.97 16.37-5.38 8.84-6.73 7.36-17.58 5-22.83l-1.23-2.65-.05-.1-20.2 30.96z"/>
                        <g transform="translate(2 287.93)">
                            <mask id="b" fill="#fff">
                            <use xlink:href="#a"/>
                            </mask>
                            <path fill="#008ACA" d="M11.26.44L10.04.23C7.72-.15 3.28.4 1.54 4.58a11.5 11.5 0 00-.4 7.05L11.26.44z" mask="url(#b)"/>
                        </g>
                        <path fill="#80C1E7" d="M3.14 299.57h.05c1.58.22 4.32.29 6.94-1.12 3.99-2.15 4.09-6.62 3.47-8.88l-.32-1.15-.02-.04-10.12 11.19z"/>
                        <path fill="#008ACA" d="M204.77 66.7l1.22.22c2.32.4 6.76-.12 8.54-4.28 1.17-2.76.83-5.5.46-7.05l-10.22 11.1z"/>
                        <path fill="#80C1E7" d="M215 55.59l-.05-.01a11.54 11.54 0 00-6.95 1.07c-4.01 2.11-4.15 6.58-3.56 8.85l.32 1.15.01.04L215 55.6z"/>
                        <path fill="#E18398" d="M35.56 66.34l-1.67.25c-3.15.43-9.16-.5-11.34-6.24a15.6 15.6 0 01-.28-9.58l13.29 15.57zM132.14 275.95l1.52.74c2.84 1.42 7.28 5.56 5.86 11.53a15.6 15.6 0 01-5.17 8.07l-2.21-20.34z"/>
                        <path fill="#D0185D" d="M132.1 276l-1.28 1c-2.48 2-5.93 6.98-3.26 12.51a15.6 15.6 0 006.73 6.75l.05.03-2.2-20.34-.05.04zM35.58 66.29l.49-1.55c.92-3.05.96-9.1-4.37-12.18a15.64 15.64 0 00-9.36-1.8l-.07.01 13.29 15.57.02-.05z"/>
                        <path fill="#E18398" d="M195.15 248.58l-.84 1.94c-1.55 3.69-2.37 11.25 3.89 15.77 4.14 2.99 8.84 3.46 11.54 3.44l-14.6-21.15z"/>
                        <path fill="#D0185D" d="M195.22 248.58l2.04-.1c4-.12 11.38 1.8 13.37 9.25 1.32 4.89.12 9.4-.86 11.93l-.02.07-14.6-21.15h.07z"/>
                        <path fill="#E18398" d="M215.47 252.64l-.28 1.2c-.51 2.26-.22 6.68 3.82 8.64 2.68 1.3 5.42 1.1 6.96.8l-10.5-10.64z"/>
                        <path fill="#D0185D" d="M215.52 252.63l1.15-.25c2.28-.48 6.7-.13 8.6 3.94a11.39 11.39 0 01.72 6.92l-.01.05-10.5-10.65h.04z"/>
                        <path fill="#E18398" d="M201.64 23.98l2.11-.18c3.98-.39 11.05-3.24 12.07-10.89.67-5.06-1.13-9.41-2.43-11.78l-11.75 22.85z"/>
                        <path fill="#D0185D" d="M201.6 23.91l-1.04-1.75c-2.01-3.45-3.8-10.85 1.82-16.14 3.7-3.46 8.24-4.55 10.93-4.89h.08l-11.75 22.85-.04-.07z"/>
                        <path fill="#CEDF9A" d="M194.18 15.29c2.31 1.05 4.75-1.15 6.8-3.53 3.25-3.75 2.11-8.23.77-10.37-.1-.2-.77-1.1-.77-1.1l-6.84 14.98.03.01h.01"/>
                        <path fill="#94C01F" d="M199.63.43c-2.5.39-6.62 2.47-7.33 7.38-.45 3.12-.51 6.4 1.8 7.44l.04.02L200.98.28s-1.12.1-1.35.15"/>
                        <path fill="#CEDF9A" d="M184.84 297.97c-3.58 1.6-3.53 6.65-2.88 11.46 1.04 7.6 7.38 10.87 11.23 11.5.35.09 2.08.26 2.08.26l-10.37-23.25-.05.03h-.01"/>
                        <g transform="translate(184.76 296.86)">
                            <mask id="d" fill="#fff">
                            <use xlink:href="#c"/>
                            </mask>
                            <path fill="#94C01F" d="M11.71 22.62c2.1-3.28 3.92-10.18-1.05-16.03C7.52 2.9 3.8-.54.2 1.06l-.06.03 10.37 23.24s1.03-1.4 1.2-1.71" mask="url(#d)"/>
                        </g>
                        <path fill="#CEDF9A" d="M47.63 17.71c2.06-1.4 1.46-4.57.5-7.51-1.51-4.65-5.86-5.99-8.35-5.95-.23 0-1.33.08-1.33.08l9.14 13.4.03-.01v-.01"/>
                        <path fill="#94C01F" d="M37.89 5.54c-.95 2.3-1.3 6.83 2.47 9.94 2.4 1.96 5.13 3.69 7.2 2.28l.03-.02-9.14-13.4s-.5.98-.56 1.2"/>
                        <g>
                            <path fill="#009640" d="M23.55 92.58l-.02-.01v.02h-.02l.02.01s23.68 39.52 48.83 55.49c17.1 10.85 47.17 5.44 47.18 5.43l-96-60.94zM180.24 57.46l.01-.02.01.02h.02v.01s-4.5 45.83-20.4 71c-10.8 17.1-40.31 25.03-40.32 25.03l60.68-96.04z"/>
                            <path fill="#009640" d="M180.24 57.46l.01-.02h-.01l-.01-.02-.01.02s-39.5 23.8-55.4 48.96c-10.81 17.1-5.26 47.09-5.26 47.1l60.68-96.04zM215.56 214.46l.02.01v-.02h.02l-.02-.02s-23.68-39.51-48.84-55.48c-17.1-10.86-47.17-5.44-47.17-5.43l96 60.94z"/>
                            <path fill="#009640" d="M215.56 214.46l.02.01h-.02v.03l-.01-.01s-45.91-4.67-71.06-20.64c-17.1-10.85-24.92-40.33-24.92-40.33l96 60.94zM58.36 249.23l-.01.01h.01l.01.02.01-.02s39.6-23.63 55.6-48.73c10.88-17.06 5.45-47.07 5.45-47.07l-61.07 95.79z"/>
                            <path fill="#009640" d="M58.36 249.23l-.01.01-.01-.01h-.02v-.02s4.68-45.8 20.69-70.9c10.88-17.07 40.42-24.87 40.42-24.87l-61.07 95.79z"/>
                            <path fill="#009640" d="M23.56 92.6l-.01-.02h.02v-.02h.01s45.9 4.67 71.06 20.64c17.1 10.85 24.92 40.33 24.92 40.34l-96-60.95z"/>
                            <path fill="#008ACA" d="M116.73 55.86c-7.64-6.43-15.4-7.73-23.04-17.25l14.85 66.03s21.9-37.24 8.19-48.78"/>
                            <path fill="#5CB5E1" d="M80.26 64.03c4.15-9.07 10.61-13.55 13.43-25.42l14.87 66.03h-.01S72.8 80.3 80.25 64.02"/>
                            <g transform="translate(0 152.38)">
                            <mask id="f" fill="#fff">
                                <use xlink:href="#e"/>
                            </mask>
                            <path fill="#008ACA" d="M17.28 4.93C10.85 12.55 9.54 20.3 0 27.9l66.17-14.8v-.02S28.84-8.76 17.27 4.93" mask="url(#f)"/>
                            </g>
                            <path fill="#5CB5E1" d="M25.47 193.7C16.4 189.56 11.9 183.1 0 180.3l66.17-14.84v.01s-24.38 35.67-40.7 28.23"/>
                            <path fill="#008ACA" d="M122.7 252.67c7.63 6.42 15.4 7.72 23.03 17.25l-14.84-66.04-.01.01s-21.9 37.24-8.18 48.78"/>
                            <path fill="#5CB5E1" d="M159.17 244.5c-4.15 9.06-10.61 13.55-13.44 25.41l-14.86-66.02h.01s35.75 24.33 28.29 40.6"/>
                            <g transform="translate(171.53 126.42)">
                            <mask id="h" fill="#fff">
                                <use xlink:href="#g"/>
                            </mask>
                            <path fill="#008ACA" d="M49.41 23.5C55.85 15.87 57.16 8.13 66.7.5L.52 15.32l.02.01s37.3 21.85 48.87 8.17" mask="url(#h)"/>
                            </g>
                            <path fill="#5CB5E1" d="M212.75 113.52c9.09 4.14 13.58 10.6 25.47 13.4l-66.17 14.84.01-.01s24.38-35.67 40.7-28.23"/>
                            <path fill="#D0185D" d="M175.69 171.3l1.06 3.4c2.08 6.39 9.35 16.95 22.31 15.85 8.58-.73 15.1-5.27 18.53-8.26l-41.9-11z"/>
                            <path fill="#E28498" d="M175.78 171.2l2.5-2.34c4.97-4.55 16.5-10.18 27.25-2.86 7.05 4.8 10.49 11.86 12.02 16.16l.05.13-41.91-11 .09-.08zM163 113.92v-.01l-.43-3.53c-.76-6.68 1.49-19.3 13.75-23.64 8.11-2.87 15.93-1.42 20.3-.11L163 113.92z"/>
                            <path fill="#D0185D" d="M163.12 113.96l3.26 1.1c6.4 2.1 19.23 2.47 26-8.62 4.43-7.28 4.63-15.13 4.25-19.68l-.01-.13L163 113.92l.12.04z"/>
                            <path fill="#E28498" d="M75.45 193.11l.51 3.52c.9 6.67-1.1 19.32-13.26 23.92-8.05 3.04-15.9 1.75-20.29.54l33.04-27.98z"/>
                            <path fill="#D0185D" d="M75.33 193.07l-3.28-1.03c-6.44-1.97-19.28-2.08-25.8 9.15-4.29 7.37-4.33 15.22-3.86 19.76l.02.13 33.04-27.97-.12-.04z"/>
                            <path fill="#E28498" d="M101.76 210.24l2.44 2.59c4.57 4.95 10.22 16.45 2.9 27.18-4.85 7.1-12.01 10.54-16.3 12.05h-.02l10.98-41.82z"/>
                            <path fill="#D0185D" d="M101.64 210.27l-3.28 1.03c-6.4 2.08-16.99 9.34-15.87 22.28.73 8.48 5.2 14.94 8.2 18.38l.1.1 10.97-41.83-.12.04z"/>
                            <path fill="#E28498" d="M52.78 76.3l-1.17 3.36c-2.15 6.37-2.62 19.17 8.45 26 7.32 4.51 15.27 4.74 19.81 4.38L52.78 76.3z"/>
                            <path fill="#D0185D" d="M52.9 76.28l3.42-.4c6.7-.7 19.33 1.64 23.6 13.9 2.79 8.05 1.33 15.76 0 20.13l-.04.13-27.1-33.74.13-.02zM159.17 197.35l-1.1 3.39c-1.99 6.42-2.16 19.23 9.07 25.8 7.42 4.34 15.37 4.38 19.9 3.91h.01l-27.88-33.1z"/>
                            <path fill="#E28498" d="M159.3 197.33l3.4-.47c6.68-.86 19.36 1.17 23.91 13.34 2.98 7.98 1.7 15.73.48 20.12l-.04.13-27.88-33.1.13-.02z"/>
                            <path fill="#D0185D" d="M146.77 55.49l2.53 2.5c4.73 4.8 10.77 16.1 3.81 27.07-4.6 7.27-11.64 10.94-15.89 12.6l9.55-42.17z"/>
                            <path fill="#E28498" d="M146.65 55.53l-3.24 1.14c-6.34 2.3-16.66 9.9-15.11 22.8 1.02 8.45 5.71 14.76 8.83 18.1l.09.1 9.55-42.18-.12.04z"/>
                            <path fill="#D0185D" d="M62.92 135.88l-1.12-3.37c-2.19-6.37-9.63-16.8-22.57-15.5-8.57.88-15.01 5.52-18.4 8.57l42.09 10.3z"/>
                            <path fill="#E28498" d="M62.83 135.97l-2.47 2.39c-4.89 4.63-16.32 10.45-27.2 3.31-7.12-4.68-10.68-11.69-12.28-15.96l-.05-.13 42.09 10.3-.1.1z"/>
                            <path fill="#94C01F" d="M121.99 146.13c5.12-13.52 21.71-34.2 50.17-32.4 18.05 1.13 36.54 4.64 39.72 18.85v.02l.05.22-92.38 20.7s1.88-6.18 2.44-7.39"/>
                            <path fill="#94C01F" d="M124.92 159.14c10.42 10.04 34.27 21.66 59.23 7.9 15.83-8.72 31.05-19.79 27.83-33.98v-.03l-.05-.21-92.38 20.7s4.35 4.77 5.37 5.62"/>
                            <path fill="#94C01F" d="M126.95 155.95c13.55 5.1 34.27 21.66 32.47 50.06-1.14 18-4.65 36.46-18.89 39.63h-.02l-.22.05-20.74-92.18s6.2 1.88 7.4 2.44M113.91 158.86c-10.06 10.4-21.7 34.2-7.92 59.12 8.75 15.79 19.83 30.98 34.06 27.77h.02l.22-.06-20.74-92.18s-4.79 4.34-5.64 5.35"/>
                            <path fill="#94C01F" d="M117.12 160.89c-5.13 13.52-21.71 34.2-50.17 32.4-18.05-1.13-36.54-4.64-39.72-18.84v-.03l-.05-.21 92.37-20.7s-1.87 6.18-2.43 7.38"/>
                            <path fill="#94C01F" d="M114.2 147.89c-10.43-10.04-34.28-21.66-59.25-7.9-15.82 8.72-31.04 19.78-27.83 33.97l.01.03.05.22 92.37-20.7s-4.34-4.78-5.36-5.62"/>
                            <path fill="#94C01F" d="M112.16 151.08c-13.55-5.11-34.27-21.67-32.47-50.06C80.82 83 84.34 64.55 98.58 61.39l.02-.01.22-.05 20.73 92.18s-6.18-1.88-7.39-2.43M125.2 148.16c10.06-10.4 21.7-34.2 7.91-59.11-8.74-15.8-19.83-30.98-34.05-27.77h-.03l-.21.05 20.73 92.18s4.8-4.33 5.65-5.35"/>
                            <path fill="#006B2D" d="M189.31 168.39c11.64 22.95 3.73 48.77 3.1 50.74a21.52 21.52 0 00-1.63-5.86c-1.93-4.2-7.18-11.09-9.85-16.54-1.61-3.3-3.02-5.92-3.88-7.5-2.48-13.99-22.4-16.97-32.87-22.34-10.51-5.41-8.42-16.67-8.42-16.67 14.09-5.01 41.44-5.71 53.55 18.17"/>
                            <path fill="#009640" d="M190.78 213.27a21.5 21.5 0 011.62 5.86l-.04.13c-2.9-9.59-19.46-6.73-46.33-13.96-26.9-7.22-21.21-47.15-21.21-47.15s4.81 13.93 28.61 18.06c18.05 3.14 23.68 13.32 23.68 13.32l-.06-.3c.86 1.58 2.27 4.2 3.88 7.5 2.67 5.46 7.92 12.35 9.85 16.54"/>
                            <path stroke="#FEFEFE" stroke-width=".17" d="M192.36 218.65c-.08-1.8-1.17-3.38-2.22-4.85l-7.38-10.31c-6.02-8.44-12.66-17.34-22.44-20.78-4.39-1.54-9.1-1.86-13.68-2.62-2.34-.4-4.7-.92-6.73-2.15a21.15 21.15 0 01-4.26-3.72c-4.05-4.27-8.08-8.76-10.22-14.24"/>
                            <path stroke="#FEFEFE" stroke-width=".17" d="M192.52 218.64c-1.03-1.44-2.06-3.2-3.44-4.34-1.12-.9-2.2-1.62-3.22-2.68-2.6-2.71-5.28-5.35-8.12-7.8-5.6-4.8-11.93-8.94-19.1-10.95-3.02-.84-6.15-1.3-9.16-2.22-8.64-2.63-15.8-8.88-21.15-16.12-1.4-1.9-2.72-3.91-3.3-6.2-.24-.89-.35-1.81-.34-2.74"/>
                            <path stroke="#FEFEFE" stroke-width=".17" d="M185.55 212.64c-7.4-6.6-17.24-9.65-26.76-12.47-2.95-.87-5.94-1.75-8.64-3.24a36.18 36.18 0 01-5.4-3.8 115.7 115.7 0 01-17.77-18.17c-1.01-1.29-2.03-2.67-2.28-4.3"/>
                            <path stroke="#FEFEFE" stroke-width=".17" d="M180 211.36c-1.98-1.24-4.13-2.22-6.37-2.93-1.58-.5-3.2-.85-4.82-1.25a76.77 76.77 0 01-43.85-30.36l.03.38"/>
                            <path stroke="#FEFEFE" stroke-width=".17" d="M164.74 209.09c-2.78-2.76-7.29-2.58-10.84-4.23-1.86-.87-3.44-2.25-5.18-3.34-2.23-1.4-4.72-2.34-6.93-3.76a34.62 34.62 0 01-4.84-3.96c-3.7-3.45-7.28-7.03-10.75-10.72M150.69 206.34A61.95 61.95 0 01128 188.31"/>
                            <path fill="#006B2D" d="M134.55 83.86c23-11.62 48.87-3.72 50.85-3.09a21.6 21.6 0 00-5.87 1.62c-4.2 1.93-11.1 7.16-16.57 9.83-3.3 1.61-5.94 3.01-7.52 3.87-14.02 2.48-17 22.35-22.39 32.8-5.42 10.5-16.7 8.4-16.7 8.4-5.03-14.05-5.73-41.35 18.2-53.43"/>
                            <path fill="#009640" d="M179.53 82.4a21.58 21.58 0 015.87-1.63l.14.05c-9.62 2.89-6.75 19.41-14 46.23-7.23 26.84-47.24 21.16-47.24 21.16s13.95-4.8 18.1-28.55c3.14-18.01 13.34-23.63 13.34-23.63l-.3.06a193.5 193.5 0 017.52-3.87c5.46-2.67 12.37-7.9 16.57-9.83"/>
                            <path stroke="#FEFEFE" stroke-width=".17" d="M184.92 80.81c-1.8.09-3.39 1.18-4.86 2.22l-10.34 7.36c-8.45 6.01-17.37 12.63-20.82 22.4-1.54 4.37-1.86 9.07-2.63 13.64-.39 2.34-.92 4.7-2.15 6.73a21.16 21.16 0 01-3.73 4.24c-4.27 4.04-8.78 8.06-14.26 10.2"/>
                            <path stroke="#FEFEFE" stroke-width=".17" d="M184.91 80.66c-1.44 1.02-3.21 2.05-4.35 3.43-.9 1.12-1.62 2.2-2.69 3.21a117.3 117.3 0 00-7.8 8.1c-4.83 5.59-8.97 11.9-10.98 19.06-.85 3.02-1.31 6.14-2.23 9.15-2.63 8.61-8.9 15.75-16.16 21.1-1.9 1.4-3.92 2.71-6.2 3.3-.9.23-1.82.34-2.75.33"/>
                            <path stroke="#FEFEFE" stroke-width=".17" d="M178.9 87.6c-6.63 7.4-9.68 17.21-12.5 26.71-.87 2.95-1.76 5.93-3.24 8.62a36.1 36.1 0 01-3.82 5.39 115.74 115.74 0 01-18.2 17.74c-1.3 1-2.68 2.02-4.3 2.27"/>
                            <path stroke="#FEFEFE" stroke-width=".17" d="M177.62 93.14a27.78 27.78 0 00-2.94 6.37c-.5 1.58-.85 3.2-1.26 4.8A76.61 76.61 0 01143 148.07l.38-.03"/>
                            <path stroke="#FEFEFE" stroke-width=".17" d="M175.34 108.38c-2.77 2.77-2.58 7.27-4.24 10.8-.87 1.87-2.25 3.44-3.35 5.18-1.4 2.22-2.34 4.7-3.76 6.92a34.53 34.53 0 01-3.97 4.82 228.9 228.9 0 01-10.75 10.73M172.59 122.4a61.87 61.87 0 01-18.07 22.63"/>
                            <path fill="#006B2D" d="M49.86 138.5c-11.64-22.95-3.73-48.77-3.1-50.74.26 1.8.75 3.94 1.63 5.86 1.93 4.19 7.17 11.08 9.85 16.53 1.61 3.3 3.01 5.93 3.87 7.5 2.49 14 22.4 16.97 32.88 22.34 10.51 5.41 8.41 16.67 8.41 16.67-14.08 5.02-41.43 5.72-53.54-18.16"/>
                            <path fill="#009640" d="M48.39 93.62a21.5 21.5 0 01-1.63-5.86l.05-.14c2.9 9.6 19.46 6.73 46.33 13.96 26.9 7.22 21.21 47.15 21.21 47.15s-4.81-13.92-28.62-18.06c-18.05-3.13-23.68-13.31-23.68-13.31l.06.29c-.86-1.57-2.26-4.2-3.87-7.5-2.68-5.45-7.92-12.34-9.85-16.53"/>
                            <path stroke="#FEFEFE" stroke-width=".17" d="M46.8 88.23c.09 1.8 1.18 3.39 2.23 4.86l7.37 10.31c6.03 8.43 12.66 17.33 22.45 20.78 4.38 1.54 9.09 1.85 13.67 2.62 2.34.39 4.71.92 6.74 2.14 1.62.98 2.95 2.36 4.26 3.73 4.05 4.26 8.08 8.76 10.22 14.23"/>
                            <path stroke="#FEFEFE" stroke-width=".17" d="M46.65 88.24c1.03 1.45 2.06 3.21 3.44 4.34 1.12.91 2.2 1.62 3.22 2.69 2.6 2.7 5.27 5.34 8.12 7.8 5.6 4.8 11.92 8.93 19.1 10.94 3.02.85 6.15 1.31 9.16 2.23 8.63 2.62 15.79 8.87 21.15 16.12 1.4 1.89 2.72 3.9 3.3 6.19.23.89.35 1.82.34 2.74"/>
                            <path stroke="#FEFEFE" stroke-width=".17" d="M53.62 94.24c7.4 6.61 17.23 9.66 26.76 12.47 2.95.88 5.94 1.76 8.64 3.24a36.08 36.08 0 015.39 3.81 115.66 115.66 0 0117.78 18.16c1.01 1.3 2.03 2.68 2.27 4.3"/>
                            <path stroke="#FEFEFE" stroke-width=".17" d="M59.16 95.52c2 1.24 4.14 2.23 6.38 2.93 1.58.5 3.2.85 4.82 1.26a76.77 76.77 0 0143.85 30.36l-.03-.39"/>
                            <path stroke="#FEFEFE" stroke-width=".17" d="M74.43 97.8c2.78 2.76 7.28 2.57 10.83 4.23 1.87.87 3.45 2.24 5.19 3.34 2.22 1.4 4.72 2.33 6.93 3.75a34.62 34.62 0 014.84 3.96c3.7 3.46 7.28 7.04 10.74 10.73M88.48 100.54a61.95 61.95 0 0122.68 18.03"/>
                            <path fill="#006B2D" d="M104.76 223.09c-23 11.61-48.88 3.71-50.86 3.08 1.82-.25 3.96-.74 5.88-1.62 4.2-1.93 11.1-7.16 16.57-9.83 3.3-1.6 5.94-3 7.51-3.86 14.02-2.48 17-22.36 22.4-32.81 5.42-10.49 16.7-8.4 16.7-8.4 5.03 14.05 5.73 41.35-18.2 53.44"/>
                            <path fill="#009640" d="M59.78 224.55a21.6 21.6 0 01-5.88 1.62l-.13-.04c9.61-2.9 6.75-19.42 13.99-46.23C75 153.05 115 158.73 115 158.73s-13.95 4.8-18.1 28.56c-3.14 18-13.34 23.63-13.34 23.63l.3-.06a194.1 194.1 0 01-7.52 3.86c-5.47 2.67-12.37 7.9-16.57 9.83"/>
                            <path stroke="#FEFEFE" stroke-width=".17" d="M54.38 226.13c1.81-.08 3.4-1.17 4.87-2.22l10.33-7.36c8.45-6 17.37-12.63 20.82-22.4 1.55-4.37 1.86-9.07 2.63-13.64.4-2.33.92-4.7 2.15-6.72a21.19 21.19 0 013.73-4.25c4.27-4.04 8.78-8.06 14.26-10.2"/>
                            <path stroke="#FEFEFE" stroke-width=".17" d="M54.4 226.29c1.44-1.03 3.2-2.05 4.34-3.44.91-1.12 1.62-2.19 2.7-3.2a117.5 117.5 0 007.8-8.11c4.82-5.58 8.96-11.9 10.98-19.05.85-3.03 1.3-6.15 2.23-9.15 2.63-8.62 8.9-15.76 16.15-21.1 1.9-1.4 3.92-2.72 6.2-3.3.9-.23 1.83-.34 2.75-.34"/>
                            <path stroke="#FEFEFE" stroke-width=".17" d="M60.4 219.34c6.63-7.39 9.68-17.2 12.5-26.7.88-2.96 1.76-5.93 3.25-8.63a36.1 36.1 0 013.82-5.38 115.78 115.78 0 0118.2-17.74c1.29-1.01 2.68-2.03 4.3-2.27"/>
                            <path stroke="#FEFEFE" stroke-width=".17" d="M61.69 213.8a27.73 27.73 0 002.93-6.36c.5-1.58.85-3.2 1.26-4.8a76.61 76.61 0 0130.42-43.77"/>
                            <path stroke="#FEFEFE" stroke-width=".17" d="M63.97 198.56c2.76-2.76 2.58-7.26 4.24-10.8.87-1.87 2.24-3.44 3.34-5.18 1.4-2.22 2.34-4.7 3.76-6.91a34.53 34.53 0 013.97-4.83c3.47-3.7 7.05-7.27 10.75-10.73M66.72 184.54a61.86 61.86 0 0118.07-22.63"/>
                            <path fill="#FEFEFE" d="M78.83 202.75c0-.13.11-.24.23-.24h1.53c.13 0 .23.11.23.24v5.16c0 .9.65 1.61 1.52 1.61.9 0 1.55-.71 1.55-1.6v-5.17c0-.13.1-.24.24-.24h1.52c.13 0 .24.11.24.24v5.27a3.56 3.56 0 01-3.55 3.54 3.54 3.54 0 01-3.51-3.54v-5.27zm1-2.01c0-.5.39-.9.87-.9s.88.4.88.9-.4.9-.88.9a.89.89 0 01-.87-.9zm3.28 0c0-.5.39-.9.87-.9s.88.4.88.9-.4.9-.88.9a.89.89 0 01-.87-.9zM87.9 202.75c0-.13.1-.24.23-.24H91c1.46 0 2.66 1.03 2.66 2.37 0 .98-.85 1.7-1.43 2.01.65.28 1.66.9 1.66 2.08 0 1.43-1.23 2.46-2.7 2.46h-3.07a.24.24 0 01-.24-.24v-8.44zm2.89 3.38a.9.9 0 00.87-.92c0-.5-.4-.87-.87-.87h-.97v1.79h.97zm.16 3.48c.48 0 .9-.4.9-.93 0-.51-.54-.9-1.02-.9h-1v1.83h1.12zM95.47 202.75c0-.13.1-.24.24-.24h5.12c.14 0 .24.11.24.24v1.4c0 .12-.1.23-.24.23H97.4v1.58h2.83c.12 0 .23.12.23.25v1.39c0 .14-.11.24-.23.24H97.4v1.72h3.43c.14 0 .24.11.24.24v1.39c0 .13-.1.24-.24.24h-5.12a.24.24 0 01-.24-.24v-8.44zM102.73 202.75c0-.13.1-.24.23-.24h3.7c1.49 0 2.7 1.24 2.7 2.75a2.8 2.8 0 01-1.83 2.57l1.7 3.23c.08.17 0 .37-.21.37h-1.65a.23.23 0 01-.2-.11l-1.65-3.38h-.85v3.25c0 .13-.11.24-.24.24h-1.47a.24.24 0 01-.23-.24v-8.44zm3.77 3.57c.51 0 .94-.48.94-1.02a.96.96 0 00-.94-.97h-1.83v2h1.83zM111.02 202.75c0-.13.1-.24.24-.24h1.47c.12 0 .24.11.24.24v6.8h2.94c.14 0 .24.12.24.25v1.39c0 .13-.1.24-.24.24h-4.65a.24.24 0 01-.24-.24v-8.44zM117.35 202.75c0-.13.11-.24.23-.24h1.49c.12 0 .24.11.24.24v8.44c0 .13-.12.24-.24.24h-1.49a.25.25 0 01-.23-.24v-8.44zM121.42 202.61c0-.13.11-.23.24-.23h.3l4.95 4.9h.01v-4.53c0-.13.1-.24.24-.24h1.48c.13 0 .24.11.24.24v8.58c0 .13-.11.23-.24.23h-.2a.38.38 0 01-.16-.06l-4.89-5.06h-.01v4.75c0 .13-.1.24-.24.24h-1.47c-.12 0-.23-.11-.23-.24l-.02-8.58zM134.83 202.4a4.7 4.7 0 013.02 1.2c.12.08.13.23.03.34l-.98 1.07a.26.26 0 01-.33.01 2.24 2.24 0 00-1.63-.61c-1.35 0-2.44 1.17-2.44 2.57a2.5 2.5 0 002.46 2.54c.36 0 .73-.05 1.1-.2v-.74h-.78a.23.23 0 01-.24-.23v-1.26c0-.15.1-.25.24-.25h2.49c.12 0 .22.12.22.25l.01 3.42c0 .07-.05.17-.1.2 0 0-1.27.84-3.07.84a4.48 4.48 0 01-4.44-4.57 4.5 4.5 0 014.44-4.59M139.7 202.75c0-.13.1-.24.23-.24h5.13c.14 0 .24.11.24.24v1.4c0 .12-.1.23-.24.23h-3.43v1.58h2.82c.13 0 .24.12.24.25v1.39c0 .14-.11.24-.24.24h-2.82v1.72h3.43c.14 0 .24.11.24.24v1.39c0 .13-.1.24-.24.24h-5.13a.24.24 0 01-.23-.24v-8.44zM146.94 202.61c0-.13.11-.23.24-.23h.3l4.95 4.9h.01v-4.53c0-.13.1-.24.24-.24h1.48c.13 0 .24.11.24.24v8.58c0 .13-.11.23-.24.23h-.2a.37.37 0 01-.16-.06l-4.89-5.06h-.01v4.75c0 .13-.1.24-.24.24h-1.47a.25.25 0 01-.24-.24v-8.58zM52.75 191.9l1.9-3.2c.31-.5 1.08-.42 1.36-.22.16.07 3.06 2.1 5.71 2.1 1.61 0 2.78-.95 2.78-2.3 0-1.61-1.41-2.84-4.15-3.88-3.46-1.3-7.8-3.88-7.8-8.49 0-3.8 3.1-7.64 9.3-7.64 4.17 0 7.4 2.04 8.6 2.88.48.27.4.96.24 1.23l-2.05 2.96c-.28.42-1 .77-1.37.5-.36-.2-3.3-2.3-5.75-2.3-1.45 0-2.53.92-2.53 1.95 0 1.42 1.2 2.5 4.38 3.73 3.14 1.19 8.13 3.53 8.13 8.76 0 3.95-3.59 7.95-9.5 7.95-5.23 0-8.12-2.08-9.05-2.96-.4-.38-.52-.54-.2-1.08M89.55 168.6c4.02 0 7 1.2 9.73 3.58.37.3.37.77.04 1.07l-3.13 3.12a.73.73 0 01-1 0 8.45 8.45 0 00-5.44-1.96 7.82 7.82 0 00-7.88 7.91c0 4.26 3.38 7.8 7.92 7.8 1.9 0 3.95-.66 5.4-1.85.27-.23.8-.23 1.04.04l3.13 3.19c.29.27.25.77-.04 1.04a14.15 14.15 0 01-9.77 3.72c-8.04 0-14.52-6.1-14.52-13.79 0-7.68 6.48-13.86 14.52-13.86M104.73 169.67c0-.38.37-.73.77-.73h4.78c.45 0 .77.35.77.73v9.68h11.5v-9.68c0-.38.32-.73.77-.73h4.78c.4 0 .77.35.77.73v25.43c0 .39-.37.73-.77.73h-4.78a.75.75 0 01-.77-.73V185h-11.5v10.1c0 .39-.32.73-.77.73h-4.78c-.4 0-.77-.34-.77-.73v-25.43zM132.78 194.71l12.6-25.85c.11-.23.4-.42.68-.42h.4c.28 0 .56.2.68.42l12.59 25.85c.24.5-.08 1-.68 1h-4.47c-.72 0-1.04-.23-1.4-.96l-1.45-3.03h-10.94l-1.45 3.07c-.2.46-.64.92-1.45.92h-4.42c-.6 0-.93-.5-.69-1zm16.53-8.22l-3.05-6.34h-.04l-3.02 6.34h6.11zM161.1 169.5c0-.38.35-.73.76-.73h4.94c.45 0 .77.35.77.74v15.55a4.8 4.8 0 004.95 4.84c2.9 0 5.02-2.15 5.02-4.84v-15.55c0-.39.33-.74.77-.74h4.94c.4 0 .77.35.77.74v15.86c0 5.84-5.15 10.68-11.5 10.68-6.32 0-11.43-4.84-11.43-10.68V169.5zM53.53 110.9c0-.37.29-.69.68-.69h4.29a.7.7 0 01.68.68v19.12h8.56c.4 0 .69.32.69.68v3.9c0 .36-.29.68-.69.68H54.21a.68.68 0 01-.68-.68v-23.7zM70.94 134.34l11.26-24.1c.1-.2.36-.39.61-.39h.36c.26 0 .5.18.62.4l11.26 24.09c.21.46-.07.93-.61.93h-4c-.64 0-.93-.22-1.26-.9l-1.3-2.82H78.1l-1.3 2.86c-.18.43-.57.86-1.3.86h-3.95c-.54 0-.83-.47-.61-.93zm14.79-7.66l-2.74-5.9h-.03l-2.7 5.9h5.47zM97.65 110.5c0-.36.32-.65.68-.65h.9l14.36 13.75h.03v-12.7c0-.37.3-.69.69-.69h4.32a.7.7 0 01.68.68V135c0 .35-.32.64-.68.64h-.58c-.1 0-.4-.11-.47-.18l-14.21-14.21h-.04v13.35c0 .36-.29.68-.68.68h-4.28a.7.7 0 01-.69-.68l-.03-24.1zM123.32 110.9c0-.37.29-.69.65-.69h8.78a12.6 12.6 0 0112.63 12.5c0 6.94-5.69 12.56-12.63 12.56h-8.78c-.36 0-.65-.32-.65-.68v-23.7zm9.07 19.07c4.07 0 7.02-3.18 7.02-7.27 0-4.04-2.95-7.23-7.02-7.23h-3.46v14.5h3.46zM148.06 110.9c0-.37.29-.69.68-.69h14.9c.4 0 .69.32.69.68v3.9c0 .36-.3.68-.69.68h-9.97v4.44h8.2a.7.7 0 01.7.68v3.9c0 .4-.33.68-.7.68h-8.2v4.84h9.97c.4 0 .69.32.69.68v3.9c0 .36-.3.68-.69.68h-14.9a.68.68 0 01-.68-.68v-23.7zM168.9 131.87l1.7-2.97c.28-.47.97-.4 1.22-.22.14.07 2.73 1.97 5.1 1.97 1.45 0 2.5-.9 2.5-2.15 0-1.5-1.27-2.65-3.71-3.61-3.1-1.22-6.99-3.62-6.99-7.91 0-3.55 2.78-7.13 8.32-7.13 3.74 0 6.62 1.9 7.7 2.69.43.25.36.9.21 1.14l-1.83 2.76c-.25.4-.9.72-1.23.47-.32-.18-2.95-2.15-5.14-2.15-1.3 0-2.27.86-2.27 1.82 0 1.33 1.08 2.33 3.92 3.48 2.81 1.1 7.27 3.29 7.27 8.16 0 3.68-3.2 7.4-8.49 7.4-4.68 0-7.27-1.93-8.1-2.75-.36-.36-.46-.5-.18-1M64.98 140.07c2.9 0 6.1 1.16 8.45 3.1.3.24.34.63.07.9l-2.74 2.77a.76.76 0 01-.93.03 6.55 6.55 0 00-4.54-1.58 6.77 6.77 0 00-6.82 6.66c0 3.6 3.08 6.57 6.86 6.57 1 0 2.04-.13 3.08-.53v-1.91h-2.18c-.39 0-.66-.27-.66-.6v-3.26c0-.37.27-.63.66-.63h6.95c.35 0 .63.3.63.63l.03 8.87c0 .17-.14.43-.27.53 0 0-3.57 2.14-8.59 2.14-6.89 0-12.43-5.21-12.43-11.8 0-6.6 5.54-11.89 12.43-11.89M75.68 162.6l10.84-22.2a.7.7 0 01.59-.36h.34a.7.7 0 01.6.36l10.83 22.2c.2.44-.07.87-.59.87h-3.84c-.63 0-.9-.2-1.22-.83l-1.24-2.6h-9.42l-1.25 2.64c-.17.39-.55.79-1.24.79h-3.8c-.53 0-.8-.43-.6-.86zm14.23-7.05l-2.63-5.45h-.03l-2.6 5.45h5.26zM129 145.22h-4.95a.64.64 0 01-.66-.63V141c0-.32.28-.62.66-.62h15.37c.38 0 .66.3.66.63v3.6c0 .32-.28.62-.66.62h-4.95v17.62c0 .33-.31.63-.66.63h-4.15c-.35 0-.66-.3-.66-.63v-17.62zM143.05 141c0-.33.28-.63.66-.63h14.33c.38 0 .66.3.66.63v3.6c0 .32-.28.62-.66.62h-9.59v4.1h7.9c.34 0 .65.29.65.62v3.6c0 .36-.3.62-.66.62h-7.89v4.46h9.59c.38 0 .66.3.66.62v3.6c0 .33-.28.63-.66.63h-14.33a.64.64 0 01-.66-.63V141zM163.3 140.63c0-.32.31-.59.66-.59h.87l13.8 12.67h.04V141c0-.33.28-.63.66-.63h4.16c.34 0 .65.3.65.63v22.2c0 .33-.3.6-.65.6h-.56c-.1 0-.38-.1-.45-.17l-13.67-13.1h-.04v12.31c0 .33-.28.63-.66.63H164c-.35 0-.66-.3-.66-.63l-.04-22.2zM102.2 141c0-.33.28-.63.66-.63h10.35c4.15 0 7.55 3.2 7.55 7.13 0 3.03-2.11 5.47-5.13 6.63l4.75 8.38c.24.43 0 .96-.6.96h-4.6a.64.64 0 01-.55-.3l-4.6-8.74h-2.4v8.41c0 .33-.3.63-.65.63h-4.12a.64.64 0 01-.66-.63V141zm10.56 9.24a2.7 2.7 0 002.63-2.64c0-1.39-1.2-2.51-2.63-2.51h-5.12v5.15h5.12z"/>
                        </g>
                        </g>
                    </svg>
                </div>
            </aside>
            <main class="Footer__main">
                <div class="Footer__main-container">
                    <nav class="Footer__nav">
                        <ul>
                            <li><a href="#0"><b>Konzept</b></a></li>
                            <li><a href="#0"><b>Shop</b></a></li>
                            <li><a href="#0" class="is-active"><b>Presse</b></a></li>
                            <li><a href="#0"><b>Stellenangebote</b></a></li>
                            <li><a href="#0"><b>Ausschreibung</b></a></li>
                            <li><a href="#0"><b>LGS Plus</b></a></li>
                        </ul>
                        <div class="Footer__social">
                            <ul class="inline-list  Footer__social-icons">
                                <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2zm-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6zm9.65 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/></svg></a></li>
                                <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M17 2v4h-2c-.69 0-1 .81-1 1.5V10h3v4h-3v8h-4v-8H7v-4h3V6a4 4 0 0 1 4-4h3z"/></svg></a></li>
                                <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M10 16.5v-9l6 4.5-6 4.5zM20 4.4c-.6-.2-4.3-.4-8-.4s-7.4.19-8 .38C2.44 4.9 2 8.4 2 12c0 3.59.44 7.1 2 7.61.6.2 4.3.39 8 .39s7.4-.19 8-.39c1.56-.51 2-4.02 2-7.61 0-3.6-.44-7.09-2-7.6z"/></svg></a></li>
                            </ul>
                            <ul class="inline-list Footer__small__list">
                                <li><a href="#0">Datenschutz</a></li>
                                <li><a href="#0">Impressum</a></li>
                                <li><a href="#0">Kontakt</a></li>
                            </ul>
                        </div>
                    </nav>
                    <div class="Footer__nav-aside">
                        <div class="Footer__info">
                            <div class="Footer__title">
                                Landesgartenschau<br>Ãœberlingen 2020 GmbH
                            </div>
                            <div class="Footer__text">
                                Bahnhofstraße 19 | 88662 Überlingen<br>
                                Tel. 07551/309739-0 | Fax: 07551/309739-39<br>
                                <a href="mailto:info@ueberlingen2020.de">info@ueberlingen2020.de</a>
                            </div>
                        </div>
                        <div>
                            <div class="Footer__winner-title">
                                German Design Award Gewinner 2020
                            </div>
                            <div>
                                <div class="Footer__winner-img"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
</footer>

Styleguide sections.footer.1
*/
.Footer__winner-img {
  display: block;
  height: 100px;
  width: 100px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../static/media/germandesignaward.0f8f92c2.png);
  margin: 0 auto; }
  @media (min-width: 40em) {
    .Footer__winner-img {
      margin: 0; } }

.Footer {
  position: relative;
  text-align: center; }
  .Footer__banner + .Footer {
    margin-top: -90px; }
  @media (min-width: 40em) {
    .Footer {
      text-align: left; } }
  .Footer:before {
    content: '';
    background-image: url(data:image/svg+xml;base64,phn2zyb4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmciihdpzhropsixndqwiibozwlnahq9iji0miigdmlld0jved0imcawide0ndagmjqyij4kica8zybmawxspsjub25liibmawxslxj1bgu9imv2zw5vzgqipgogicagphbhdgggzmlsbd0iizgxqtlenyigzd0itte0ndagmtq2ljc1yy0xmtquodmtmzqumi0xodcuotitnjuumtqtmje5lji3ltkyljgzltmxljm1lti3ljy5lte0ns0yny42os0zndauotqgmem3ntuunia3ny4xoca2njugnzcumtggnja4iduzljkyyy04ns41ltm0ljg5ltg3ljeziduuntgtmtgwljeyltmyljyzqzmznc45ms0xni45idc0ljkyidcuotygntkuotugny45nkgwvjeyogwxndqwide4ljc1eiigb3bhy2l0et0iljuyii8+ciagica8cgf0acbmawxspsijnjjcndgziibkpsjnmtq0mcayndeuoegwvjmwyzewnc44ny00ide5ms40nc02idi1os43my02idewmi40myawidexni43nyaxoc40nyayotiuotqgndeumjggmtc2lje4idiyljggmzm1ljezlteunjigndy1ljazidagmti5ljkgms42miaxnjiunsaymi44idi1oc4xmiaymi44idyzljc1idagmte4ljq4idkunjugmty0lje4idi4ljkydjeync44eiivpgogidwvzz4kpc9zdmc+cg==);
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
    height: 90px; }

.Footer__wrapper {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #62b483; }

.Footer__grid {
  margin-left: -20px;
  display: block;
  font-size: 0; }
  .Footer__grid > * {
    padding-left: 20px;
    vertical-align: top;
    display: inline-block;
    font-size: 16px; }
  @media (min-width: 64em) {
    .Footer__grid {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

.Footer__aside {
  width: 100%;
  position: relative;
  position: relative; }
  @media (min-width: 64em) {
    .Footer__aside {
      padding-bottom: 0;
      width: 28.57143%;
      position: relative;
      text-align: right;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start; } }

.Footer__aside__container {
  top: -25%;
  padding-top: 20px; }
  @media (min-width: 64em) {
    .Footer__aside__container {
      position: absolute;
      right: 0; } }

.Footer__main {
  width: 100%;
  position: relative;
  padding: 0; }
  @media (min-width: 64em) {
    .Footer__main {
      width: 64.28571%;
      position: relative;
      right: auto;
      left: 7.14286%; } }

.Footer__main-container {
  padding: 50px 20px; }
  @media (min-width: 40em) {
    .Footer__main-container {
      height: 100%;
      padding: 50px 20px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }
  @media (min-width: 64em) {
    .Footer__main-container {
      padding: 50px 20px; } }

.Footer__nav {
  padding-bottom: 40px; }
  @media (min-width: 40em) {
    .Footer__nav {
      -webkit-box-flex: 1;
          -ms-flex: 1 0 280px;
              flex: 1 0 280px;
      max-width: 280px; } }
  @media (min-width: 64em) {
    .Footer__nav {
      max-width: 350px; } }
  .Footer__nav ul {
    list-style: none;
    margin: 0;
    padding: 0; }
  .Footer__nav a {
    padding: 5px 0;
    display: block;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s; }
    .Footer__nav a:hover, .Footer__nav a.is-active {
      text-decoration: underline; }
  .Footer__nav.has-rows {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }

.Footer__nav-aside {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }
  @media (min-width: 40em) {
    .Footer__nav-aside {
      -webkit-box-flex: 1;
          -ms-flex: 1 0 0px;
              flex: 1 0 0;
      min-width: 250px; } }

.Footer__title {
  margin: 0;
  font-style: normal;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #afcc56;
  letter-spacing: 1.75px;
  line-height: 1.3;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  margin-bottom: 20px;
  color: #fff; }
  @media (min-width: 40em) {
    .Footer__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none;
      font-size: 14px; } }
  .fl .Footer__title {
    font-family: "Noto Sans", sans-serif; }

.Footer__winner-title {
  margin: 0;
  font-style: normal;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #afcc56;
  letter-spacing: 1.75px;
  line-height: 1.3;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  color: #fff; }
  @media (min-width: 40em) {
    .Footer__winner-title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none;
      font-size: 14px; } }
  .fl .Footer__winner-title {
    font-family: "Noto Sans", sans-serif; }

.Footer__text {
  font-weight: 400;
  color: #ffffff;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1.2;
  line-height: 1.5;
  margin-bottom: 40px; }
  @media (min-width: 40em) {
    .Footer__text {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .Footer__text a:not([class]) {
    color: currentColor; }
    .Footer__text a:not([class]):hover {
      opacity: 0.75; }
  .Footer__text *:first-child {
    margin-top: 0; }
  .Footer__text *:last-child {
    margin-bottom: 0; }

.Footer__small__list li {
  padding: 0;
  padding-right: 10px; }

.Footer__social {
  margin-top: 20px; }

.Footer__social-icons li {
  padding: 0;
  padding-right: 10px; }

.Footer__social-icons a {
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  font-size: 14px;
  color: #fff; }
  .Footer__social-icons a:hover {
    opacity: 0.6; }

/*
Footer mit Bild

Markup:
<footer class="Footer__container">
    <div class="Footer__banner js-poster">
        <picture class="Footer__image">
            <source srcset="http://placehold.it/2000x580&text=XLarge%20Screens" media="(min-width: 90em)">
            <source srcset="http://placehold.it/1440x580&text=Large%20Screens" media="(min-width: 64em)">
            <source srcset="http://placehold.it/1024x500&text=Medium%20Screens" media="(min-width: 40em)">
            <img srcset="http://placehold.it/640x400&text=Default%20Image" alt="">
        </picture>
        <a class="Footer__button" href="#0">Alle Bereiche ansehen<img src="http://placehold.it/24"></a>
    </div>
    <section class="Footer">
        <div class="Footer__wrapper">
            <div class="Footer__grid">
                <aside class="Footer__aside">
                    <div class="Footer__aside__container">
                        <svg class="Footer__aside__logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="239" height="322" viewBox="0 0 239 322">
                            <defs>
                            <path id="a" d="M.77.13h10.49v11.5H.77z"/>
                            <path id="c" d="M.14.65h13.71v23.68H.14z"/>
                            <path id="e" d="M0 .42h66.17v27.49H0z"/>
                            <path id="g" d="M.52.51H66.7V28H.52z"/>
                            </defs>
                            <g fill="none" fill-rule="evenodd">
                            <path fill="#008ACA" d="M50.27 265.32l-3.04-.05c-5.76-.03-16.3 3-18.89 13.8-1.72 7.14.22 13.64 1.73 17.22l20.2-30.97z"/>
                            <path fill="#80C1E7" d="M30.07 296.3l.11-.01c3.9-.09 10.57-.97 16.37-5.38 8.84-6.73 7.36-17.58 5-22.83l-1.23-2.65-.05-.1-20.2 30.96z"/>
                            <g transform="translate(2 287.93)">
                                <mask id="b" fill="#fff">
                                <use xlink:href="#a"/>
                                </mask>
                                <path fill="#008ACA" d="M11.26.44L10.04.23C7.72-.15 3.28.4 1.54 4.58a11.5 11.5 0 00-.4 7.05L11.26.44z" mask="url(#b)"/>
                            </g>
                            <path fill="#80C1E7" d="M3.14 299.57h.05c1.58.22 4.32.29 6.94-1.12 3.99-2.15 4.09-6.62 3.47-8.88l-.32-1.15-.02-.04-10.12 11.19z"/>
                            <path fill="#008ACA" d="M204.77 66.7l1.22.22c2.32.4 6.76-.12 8.54-4.28 1.17-2.76.83-5.5.46-7.05l-10.22 11.1z"/>
                            <path fill="#80C1E7" d="M215 55.59l-.05-.01a11.54 11.54 0 00-6.95 1.07c-4.01 2.11-4.15 6.58-3.56 8.85l.32 1.15.01.04L215 55.6z"/>
                            <path fill="#E18398" d="M35.56 66.34l-1.67.25c-3.15.43-9.16-.5-11.34-6.24a15.6 15.6 0 01-.28-9.58l13.29 15.57zM132.14 275.95l1.52.74c2.84 1.42 7.28 5.56 5.86 11.53a15.6 15.6 0 01-5.17 8.07l-2.21-20.34z"/>
                            <path fill="#D0185D" d="M132.1 276l-1.28 1c-2.48 2-5.93 6.98-3.26 12.51a15.6 15.6 0 006.73 6.75l.05.03-2.2-20.34-.05.04zM35.58 66.29l.49-1.55c.92-3.05.96-9.1-4.37-12.18a15.64 15.64 0 00-9.36-1.8l-.07.01 13.29 15.57.02-.05z"/>
                            <path fill="#E18398" d="M195.15 248.58l-.84 1.94c-1.55 3.69-2.37 11.25 3.89 15.77 4.14 2.99 8.84 3.46 11.54 3.44l-14.6-21.15z"/>
                            <path fill="#D0185D" d="M195.22 248.58l2.04-.1c4-.12 11.38 1.8 13.37 9.25 1.32 4.89.12 9.4-.86 11.93l-.02.07-14.6-21.15h.07z"/>
                            <path fill="#E18398" d="M215.47 252.64l-.28 1.2c-.51 2.26-.22 6.68 3.82 8.64 2.68 1.3 5.42 1.1 6.96.8l-10.5-10.64z"/>
                            <path fill="#D0185D" d="M215.52 252.63l1.15-.25c2.28-.48 6.7-.13 8.6 3.94a11.39 11.39 0 01.72 6.92l-.01.05-10.5-10.65h.04z"/>
                            <path fill="#E18398" d="M201.64 23.98l2.11-.18c3.98-.39 11.05-3.24 12.07-10.89.67-5.06-1.13-9.41-2.43-11.78l-11.75 22.85z"/>
                            <path fill="#D0185D" d="M201.6 23.91l-1.04-1.75c-2.01-3.45-3.8-10.85 1.82-16.14 3.7-3.46 8.24-4.55 10.93-4.89h.08l-11.75 22.85-.04-.07z"/>
                            <path fill="#CEDF9A" d="M194.18 15.29c2.31 1.05 4.75-1.15 6.8-3.53 3.25-3.75 2.11-8.23.77-10.37-.1-.2-.77-1.1-.77-1.1l-6.84 14.98.03.01h.01"/>
                            <path fill="#94C01F" d="M199.63.43c-2.5.39-6.62 2.47-7.33 7.38-.45 3.12-.51 6.4 1.8 7.44l.04.02L200.98.28s-1.12.1-1.35.15"/>
                            <path fill="#CEDF9A" d="M184.84 297.97c-3.58 1.6-3.53 6.65-2.88 11.46 1.04 7.6 7.38 10.87 11.23 11.5.35.09 2.08.26 2.08.26l-10.37-23.25-.05.03h-.01"/>
                            <g transform="translate(184.76 296.86)">
                                <mask id="d" fill="#fff">
                                <use xlink:href="#c"/>
                                </mask>
                                <path fill="#94C01F" d="M11.71 22.62c2.1-3.28 3.92-10.18-1.05-16.03C7.52 2.9 3.8-.54.2 1.06l-.06.03 10.37 23.24s1.03-1.4 1.2-1.71" mask="url(#d)"/>
                            </g>
                            <path fill="#CEDF9A" d="M47.63 17.71c2.06-1.4 1.46-4.57.5-7.51-1.51-4.65-5.86-5.99-8.35-5.95-.23 0-1.33.08-1.33.08l9.14 13.4.03-.01v-.01"/>
                            <path fill="#94C01F" d="M37.89 5.54c-.95 2.3-1.3 6.83 2.47 9.94 2.4 1.96 5.13 3.69 7.2 2.28l.03-.02-9.14-13.4s-.5.98-.56 1.2"/>
                            <g>
                                <path fill="#009640" d="M23.55 92.58l-.02-.01v.02h-.02l.02.01s23.68 39.52 48.83 55.49c17.1 10.85 47.17 5.44 47.18 5.43l-96-60.94zM180.24 57.46l.01-.02.01.02h.02v.01s-4.5 45.83-20.4 71c-10.8 17.1-40.31 25.03-40.32 25.03l60.68-96.04z"/>
                                <path fill="#009640" d="M180.24 57.46l.01-.02h-.01l-.01-.02-.01.02s-39.5 23.8-55.4 48.96c-10.81 17.1-5.26 47.09-5.26 47.1l60.68-96.04zM215.56 214.46l.02.01v-.02h.02l-.02-.02s-23.68-39.51-48.84-55.48c-17.1-10.86-47.17-5.44-47.17-5.43l96 60.94z"/>
                                <path fill="#009640" d="M215.56 214.46l.02.01h-.02v.03l-.01-.01s-45.91-4.67-71.06-20.64c-17.1-10.85-24.92-40.33-24.92-40.33l96 60.94zM58.36 249.23l-.01.01h.01l.01.02.01-.02s39.6-23.63 55.6-48.73c10.88-17.06 5.45-47.07 5.45-47.07l-61.07 95.79z"/>
                                <path fill="#009640" d="M58.36 249.23l-.01.01-.01-.01h-.02v-.02s4.68-45.8 20.69-70.9c10.88-17.07 40.42-24.87 40.42-24.87l-61.07 95.79z"/>
                                <path fill="#009640" d="M23.56 92.6l-.01-.02h.02v-.02h.01s45.9 4.67 71.06 20.64c17.1 10.85 24.92 40.33 24.92 40.34l-96-60.95z"/>
                                <path fill="#008ACA" d="M116.73 55.86c-7.64-6.43-15.4-7.73-23.04-17.25l14.85 66.03s21.9-37.24 8.19-48.78"/>
                                <path fill="#5CB5E1" d="M80.26 64.03c4.15-9.07 10.61-13.55 13.43-25.42l14.87 66.03h-.01S72.8 80.3 80.25 64.02"/>
                                <g transform="translate(0 152.38)">
                                <mask id="f" fill="#fff">
                                    <use xlink:href="#e"/>
                                </mask>
                                <path fill="#008ACA" d="M17.28 4.93C10.85 12.55 9.54 20.3 0 27.9l66.17-14.8v-.02S28.84-8.76 17.27 4.93" mask="url(#f)"/>
                                </g>
                                <path fill="#5CB5E1" d="M25.47 193.7C16.4 189.56 11.9 183.1 0 180.3l66.17-14.84v.01s-24.38 35.67-40.7 28.23"/>
                                <path fill="#008ACA" d="M122.7 252.67c7.63 6.42 15.4 7.72 23.03 17.25l-14.84-66.04-.01.01s-21.9 37.24-8.18 48.78"/>
                                <path fill="#5CB5E1" d="M159.17 244.5c-4.15 9.06-10.61 13.55-13.44 25.41l-14.86-66.02h.01s35.75 24.33 28.29 40.6"/>
                                <g transform="translate(171.53 126.42)">
                                <mask id="h" fill="#fff">
                                    <use xlink:href="#g"/>
                                </mask>
                                <path fill="#008ACA" d="M49.41 23.5C55.85 15.87 57.16 8.13 66.7.5L.52 15.32l.02.01s37.3 21.85 48.87 8.17" mask="url(#h)"/>
                                </g>
                                <path fill="#5CB5E1" d="M212.75 113.52c9.09 4.14 13.58 10.6 25.47 13.4l-66.17 14.84.01-.01s24.38-35.67 40.7-28.23"/>
                                <path fill="#D0185D" d="M175.69 171.3l1.06 3.4c2.08 6.39 9.35 16.95 22.31 15.85 8.58-.73 15.1-5.27 18.53-8.26l-41.9-11z"/>
                                <path fill="#E28498" d="M175.78 171.2l2.5-2.34c4.97-4.55 16.5-10.18 27.25-2.86 7.05 4.8 10.49 11.86 12.02 16.16l.05.13-41.91-11 .09-.08zM163 113.92v-.01l-.43-3.53c-.76-6.68 1.49-19.3 13.75-23.64 8.11-2.87 15.93-1.42 20.3-.11L163 113.92z"/>
                                <path fill="#D0185D" d="M163.12 113.96l3.26 1.1c6.4 2.1 19.23 2.47 26-8.62 4.43-7.28 4.63-15.13 4.25-19.68l-.01-.13L163 113.92l.12.04z"/>
                                <path fill="#E28498" d="M75.45 193.11l.51 3.52c.9 6.67-1.1 19.32-13.26 23.92-8.05 3.04-15.9 1.75-20.29.54l33.04-27.98z"/>
                                <path fill="#D0185D" d="M75.33 193.07l-3.28-1.03c-6.44-1.97-19.28-2.08-25.8 9.15-4.29 7.37-4.33 15.22-3.86 19.76l.02.13 33.04-27.97-.12-.04z"/>
                                <path fill="#E28498" d="M101.76 210.24l2.44 2.59c4.57 4.95 10.22 16.45 2.9 27.18-4.85 7.1-12.01 10.54-16.3 12.05h-.02l10.98-41.82z"/>
                                <path fill="#D0185D" d="M101.64 210.27l-3.28 1.03c-6.4 2.08-16.99 9.34-15.87 22.28.73 8.48 5.2 14.94 8.2 18.38l.1.1 10.97-41.83-.12.04z"/>
                                <path fill="#E28498" d="M52.78 76.3l-1.17 3.36c-2.15 6.37-2.62 19.17 8.45 26 7.32 4.51 15.27 4.74 19.81 4.38L52.78 76.3z"/>
                                <path fill="#D0185D" d="M52.9 76.28l3.42-.4c6.7-.7 19.33 1.64 23.6 13.9 2.79 8.05 1.33 15.76 0 20.13l-.04.13-27.1-33.74.13-.02zM159.17 197.35l-1.1 3.39c-1.99 6.42-2.16 19.23 9.07 25.8 7.42 4.34 15.37 4.38 19.9 3.91h.01l-27.88-33.1z"/>
                                <path fill="#E28498" d="M159.3 197.33l3.4-.47c6.68-.86 19.36 1.17 23.91 13.34 2.98 7.98 1.7 15.73.48 20.12l-.04.13-27.88-33.1.13-.02z"/>
                                <path fill="#D0185D" d="M146.77 55.49l2.53 2.5c4.73 4.8 10.77 16.1 3.81 27.07-4.6 7.27-11.64 10.94-15.89 12.6l9.55-42.17z"/>
                                <path fill="#E28498" d="M146.65 55.53l-3.24 1.14c-6.34 2.3-16.66 9.9-15.11 22.8 1.02 8.45 5.71 14.76 8.83 18.1l.09.1 9.55-42.18-.12.04z"/>
                                <path fill="#D0185D" d="M62.92 135.88l-1.12-3.37c-2.19-6.37-9.63-16.8-22.57-15.5-8.57.88-15.01 5.52-18.4 8.57l42.09 10.3z"/>
                                <path fill="#E28498" d="M62.83 135.97l-2.47 2.39c-4.89 4.63-16.32 10.45-27.2 3.31-7.12-4.68-10.68-11.69-12.28-15.96l-.05-.13 42.09 10.3-.1.1z"/>
                                <path fill="#94C01F" d="M121.99 146.13c5.12-13.52 21.71-34.2 50.17-32.4 18.05 1.13 36.54 4.64 39.72 18.85v.02l.05.22-92.38 20.7s1.88-6.18 2.44-7.39"/>
                                <path fill="#94C01F" d="M124.92 159.14c10.42 10.04 34.27 21.66 59.23 7.9 15.83-8.72 31.05-19.79 27.83-33.98v-.03l-.05-.21-92.38 20.7s4.35 4.77 5.37 5.62"/>
                                <path fill="#94C01F" d="M126.95 155.95c13.55 5.1 34.27 21.66 32.47 50.06-1.14 18-4.65 36.46-18.89 39.63h-.02l-.22.05-20.74-92.18s6.2 1.88 7.4 2.44M113.91 158.86c-10.06 10.4-21.7 34.2-7.92 59.12 8.75 15.79 19.83 30.98 34.06 27.77h.02l.22-.06-20.74-92.18s-4.79 4.34-5.64 5.35"/>
                                <path fill="#94C01F" d="M117.12 160.89c-5.13 13.52-21.71 34.2-50.17 32.4-18.05-1.13-36.54-4.64-39.72-18.84v-.03l-.05-.21 92.37-20.7s-1.87 6.18-2.43 7.38"/>
                                <path fill="#94C01F" d="M114.2 147.89c-10.43-10.04-34.28-21.66-59.25-7.9-15.82 8.72-31.04 19.78-27.83 33.97l.01.03.05.22 92.37-20.7s-4.34-4.78-5.36-5.62"/>
                                <path fill="#94C01F" d="M112.16 151.08c-13.55-5.11-34.27-21.67-32.47-50.06C80.82 83 84.34 64.55 98.58 61.39l.02-.01.22-.05 20.73 92.18s-6.18-1.88-7.39-2.43M125.2 148.16c10.06-10.4 21.7-34.2 7.91-59.11-8.74-15.8-19.83-30.98-34.05-27.77h-.03l-.21.05 20.73 92.18s4.8-4.33 5.65-5.35"/>
                                <path fill="#006B2D" d="M189.31 168.39c11.64 22.95 3.73 48.77 3.1 50.74a21.52 21.52 0 00-1.63-5.86c-1.93-4.2-7.18-11.09-9.85-16.54-1.61-3.3-3.02-5.92-3.88-7.5-2.48-13.99-22.4-16.97-32.87-22.34-10.51-5.41-8.42-16.67-8.42-16.67 14.09-5.01 41.44-5.71 53.55 18.17"/>
                                <path fill="#009640" d="M190.78 213.27a21.5 21.5 0 011.62 5.86l-.04.13c-2.9-9.59-19.46-6.73-46.33-13.96-26.9-7.22-21.21-47.15-21.21-47.15s4.81 13.93 28.61 18.06c18.05 3.14 23.68 13.32 23.68 13.32l-.06-.3c.86 1.58 2.27 4.2 3.88 7.5 2.67 5.46 7.92 12.35 9.85 16.54"/>
                                <path stroke="#FEFEFE" stroke-width=".17" d="M192.36 218.65c-.08-1.8-1.17-3.38-2.22-4.85l-7.38-10.31c-6.02-8.44-12.66-17.34-22.44-20.78-4.39-1.54-9.1-1.86-13.68-2.62-2.34-.4-4.7-.92-6.73-2.15a21.15 21.15 0 01-4.26-3.72c-4.05-4.27-8.08-8.76-10.22-14.24"/>
                                <path stroke="#FEFEFE" stroke-width=".17" d="M192.52 218.64c-1.03-1.44-2.06-3.2-3.44-4.34-1.12-.9-2.2-1.62-3.22-2.68-2.6-2.71-5.28-5.35-8.12-7.8-5.6-4.8-11.93-8.94-19.1-10.95-3.02-.84-6.15-1.3-9.16-2.22-8.64-2.63-15.8-8.88-21.15-16.12-1.4-1.9-2.72-3.91-3.3-6.2-.24-.89-.35-1.81-.34-2.74"/>
                                <path stroke="#FEFEFE" stroke-width=".17" d="M185.55 212.64c-7.4-6.6-17.24-9.65-26.76-12.47-2.95-.87-5.94-1.75-8.64-3.24a36.18 36.18 0 01-5.4-3.8 115.7 115.7 0 01-17.77-18.17c-1.01-1.29-2.03-2.67-2.28-4.3"/>
                                <path stroke="#FEFEFE" stroke-width=".17" d="M180 211.36c-1.98-1.24-4.13-2.22-6.37-2.93-1.58-.5-3.2-.85-4.82-1.25a76.77 76.77 0 01-43.85-30.36l.03.38"/>
                                <path stroke="#FEFEFE" stroke-width=".17" d="M164.74 209.09c-2.78-2.76-7.29-2.58-10.84-4.23-1.86-.87-3.44-2.25-5.18-3.34-2.23-1.4-4.72-2.34-6.93-3.76a34.62 34.62 0 01-4.84-3.96c-3.7-3.45-7.28-7.03-10.75-10.72M150.69 206.34A61.95 61.95 0 01128 188.31"/>
                                <path fill="#006B2D" d="M134.55 83.86c23-11.62 48.87-3.72 50.85-3.09a21.6 21.6 0 00-5.87 1.62c-4.2 1.93-11.1 7.16-16.57 9.83-3.3 1.61-5.94 3.01-7.52 3.87-14.02 2.48-17 22.35-22.39 32.8-5.42 10.5-16.7 8.4-16.7 8.4-5.03-14.05-5.73-41.35 18.2-53.43"/>
                                <path fill="#009640" d="M179.53 82.4a21.58 21.58 0 015.87-1.63l.14.05c-9.62 2.89-6.75 19.41-14 46.23-7.23 26.84-47.24 21.16-47.24 21.16s13.95-4.8 18.1-28.55c3.14-18.01 13.34-23.63 13.34-23.63l-.3.06a193.5 193.5 0 017.52-3.87c5.46-2.67 12.37-7.9 16.57-9.83"/>
                                <path stroke="#FEFEFE" stroke-width=".17" d="M184.92 80.81c-1.8.09-3.39 1.18-4.86 2.22l-10.34 7.36c-8.45 6.01-17.37 12.63-20.82 22.4-1.54 4.37-1.86 9.07-2.63 13.64-.39 2.34-.92 4.7-2.15 6.73a21.16 21.16 0 01-3.73 4.24c-4.27 4.04-8.78 8.06-14.26 10.2"/>
                                <path stroke="#FEFEFE" stroke-width=".17" d="M184.91 80.66c-1.44 1.02-3.21 2.05-4.35 3.43-.9 1.12-1.62 2.2-2.69 3.21a117.3 117.3 0 00-7.8 8.1c-4.83 5.59-8.97 11.9-10.98 19.06-.85 3.02-1.31 6.14-2.23 9.15-2.63 8.61-8.9 15.75-16.16 21.1-1.9 1.4-3.92 2.71-6.2 3.3-.9.23-1.82.34-2.75.33"/>
                                <path stroke="#FEFEFE" stroke-width=".17" d="M178.9 87.6c-6.63 7.4-9.68 17.21-12.5 26.71-.87 2.95-1.76 5.93-3.24 8.62a36.1 36.1 0 01-3.82 5.39 115.74 115.74 0 01-18.2 17.74c-1.3 1-2.68 2.02-4.3 2.27"/>
                                <path stroke="#FEFEFE" stroke-width=".17" d="M177.62 93.14a27.78 27.78 0 00-2.94 6.37c-.5 1.58-.85 3.2-1.26 4.8A76.61 76.61 0 01143 148.07l.38-.03"/>
                                <path stroke="#FEFEFE" stroke-width=".17" d="M175.34 108.38c-2.77 2.77-2.58 7.27-4.24 10.8-.87 1.87-2.25 3.44-3.35 5.18-1.4 2.22-2.34 4.7-3.76 6.92a34.53 34.53 0 01-3.97 4.82 228.9 228.9 0 01-10.75 10.73M172.59 122.4a61.87 61.87 0 01-18.07 22.63"/>
                                <path fill="#006B2D" d="M49.86 138.5c-11.64-22.95-3.73-48.77-3.1-50.74.26 1.8.75 3.94 1.63 5.86 1.93 4.19 7.17 11.08 9.85 16.53 1.61 3.3 3.01 5.93 3.87 7.5 2.49 14 22.4 16.97 32.88 22.34 10.51 5.41 8.41 16.67 8.41 16.67-14.08 5.02-41.43 5.72-53.54-18.16"/>
                                <path fill="#009640" d="M48.39 93.62a21.5 21.5 0 01-1.63-5.86l.05-.14c2.9 9.6 19.46 6.73 46.33 13.96 26.9 7.22 21.21 47.15 21.21 47.15s-4.81-13.92-28.62-18.06c-18.05-3.13-23.68-13.31-23.68-13.31l.06.29c-.86-1.57-2.26-4.2-3.87-7.5-2.68-5.45-7.92-12.34-9.85-16.53"/>
                                <path stroke="#FEFEFE" stroke-width=".17" d="M46.8 88.23c.09 1.8 1.18 3.39 2.23 4.86l7.37 10.31c6.03 8.43 12.66 17.33 22.45 20.78 4.38 1.54 9.09 1.85 13.67 2.62 2.34.39 4.71.92 6.74 2.14 1.62.98 2.95 2.36 4.26 3.73 4.05 4.26 8.08 8.76 10.22 14.23"/>
                                <path stroke="#FEFEFE" stroke-width=".17" d="M46.65 88.24c1.03 1.45 2.06 3.21 3.44 4.34 1.12.91 2.2 1.62 3.22 2.69 2.6 2.7 5.27 5.34 8.12 7.8 5.6 4.8 11.92 8.93 19.1 10.94 3.02.85 6.15 1.31 9.16 2.23 8.63 2.62 15.79 8.87 21.15 16.12 1.4 1.89 2.72 3.9 3.3 6.19.23.89.35 1.82.34 2.74"/>
                                <path stroke="#FEFEFE" stroke-width=".17" d="M53.62 94.24c7.4 6.61 17.23 9.66 26.76 12.47 2.95.88 5.94 1.76 8.64 3.24a36.08 36.08 0 015.39 3.81 115.66 115.66 0 0117.78 18.16c1.01 1.3 2.03 2.68 2.27 4.3"/>
                                <path stroke="#FEFEFE" stroke-width=".17" d="M59.16 95.52c2 1.24 4.14 2.23 6.38 2.93 1.58.5 3.2.85 4.82 1.26a76.77 76.77 0 0143.85 30.36l-.03-.39"/>
                                <path stroke="#FEFEFE" stroke-width=".17" d="M74.43 97.8c2.78 2.76 7.28 2.57 10.83 4.23 1.87.87 3.45 2.24 5.19 3.34 2.22 1.4 4.72 2.33 6.93 3.75a34.62 34.62 0 014.84 3.96c3.7 3.46 7.28 7.04 10.74 10.73M88.48 100.54a61.95 61.95 0 0122.68 18.03"/>
                                <path fill="#006B2D" d="M104.76 223.09c-23 11.61-48.88 3.71-50.86 3.08 1.82-.25 3.96-.74 5.88-1.62 4.2-1.93 11.1-7.16 16.57-9.83 3.3-1.6 5.94-3 7.51-3.86 14.02-2.48 17-22.36 22.4-32.81 5.42-10.49 16.7-8.4 16.7-8.4 5.03 14.05 5.73 41.35-18.2 53.44"/>
                                <path fill="#009640" d="M59.78 224.55a21.6 21.6 0 01-5.88 1.62l-.13-.04c9.61-2.9 6.75-19.42 13.99-46.23C75 153.05 115 158.73 115 158.73s-13.95 4.8-18.1 28.56c-3.14 18-13.34 23.63-13.34 23.63l.3-.06a194.1 194.1 0 01-7.52 3.86c-5.47 2.67-12.37 7.9-16.57 9.83"/>
                                <path stroke="#FEFEFE" stroke-width=".17" d="M54.38 226.13c1.81-.08 3.4-1.17 4.87-2.22l10.33-7.36c8.45-6 17.37-12.63 20.82-22.4 1.55-4.37 1.86-9.07 2.63-13.64.4-2.33.92-4.7 2.15-6.72a21.19 21.19 0 013.73-4.25c4.27-4.04 8.78-8.06 14.26-10.2"/>
                                <path stroke="#FEFEFE" stroke-width=".17" d="M54.4 226.29c1.44-1.03 3.2-2.05 4.34-3.44.91-1.12 1.62-2.19 2.7-3.2a117.5 117.5 0 007.8-8.11c4.82-5.58 8.96-11.9 10.98-19.05.85-3.03 1.3-6.15 2.23-9.15 2.63-8.62 8.9-15.76 16.15-21.1 1.9-1.4 3.92-2.72 6.2-3.3.9-.23 1.83-.34 2.75-.34"/>
                                <path stroke="#FEFEFE" stroke-width=".17" d="M60.4 219.34c6.63-7.39 9.68-17.2 12.5-26.7.88-2.96 1.76-5.93 3.25-8.63a36.1 36.1 0 013.82-5.38 115.78 115.78 0 0118.2-17.74c1.29-1.01 2.68-2.03 4.3-2.27"/>
                                <path stroke="#FEFEFE" stroke-width=".17" d="M61.69 213.8a27.73 27.73 0 002.93-6.36c.5-1.58.85-3.2 1.26-4.8a76.61 76.61 0 0130.42-43.77"/>
                                <path stroke="#FEFEFE" stroke-width=".17" d="M63.97 198.56c2.76-2.76 2.58-7.26 4.24-10.8.87-1.87 2.24-3.44 3.34-5.18 1.4-2.22 2.34-4.7 3.76-6.91a34.53 34.53 0 013.97-4.83c3.47-3.7 7.05-7.27 10.75-10.73M66.72 184.54a61.86 61.86 0 0118.07-22.63"/>
                                <path fill="#FEFEFE" d="M78.83 202.75c0-.13.11-.24.23-.24h1.53c.13 0 .23.11.23.24v5.16c0 .9.65 1.61 1.52 1.61.9 0 1.55-.71 1.55-1.6v-5.17c0-.13.1-.24.24-.24h1.52c.13 0 .24.11.24.24v5.27a3.56 3.56 0 01-3.55 3.54 3.54 3.54 0 01-3.51-3.54v-5.27zm1-2.01c0-.5.39-.9.87-.9s.88.4.88.9-.4.9-.88.9a.89.89 0 01-.87-.9zm3.28 0c0-.5.39-.9.87-.9s.88.4.88.9-.4.9-.88.9a.89.89 0 01-.87-.9zM87.9 202.75c0-.13.1-.24.23-.24H91c1.46 0 2.66 1.03 2.66 2.37 0 .98-.85 1.7-1.43 2.01.65.28 1.66.9 1.66 2.08 0 1.43-1.23 2.46-2.7 2.46h-3.07a.24.24 0 01-.24-.24v-8.44zm2.89 3.38a.9.9 0 00.87-.92c0-.5-.4-.87-.87-.87h-.97v1.79h.97zm.16 3.48c.48 0 .9-.4.9-.93 0-.51-.54-.9-1.02-.9h-1v1.83h1.12zM95.47 202.75c0-.13.1-.24.24-.24h5.12c.14 0 .24.11.24.24v1.4c0 .12-.1.23-.24.23H97.4v1.58h2.83c.12 0 .23.12.23.25v1.39c0 .14-.11.24-.23.24H97.4v1.72h3.43c.14 0 .24.11.24.24v1.39c0 .13-.1.24-.24.24h-5.12a.24.24 0 01-.24-.24v-8.44zM102.73 202.75c0-.13.1-.24.23-.24h3.7c1.49 0 2.7 1.24 2.7 2.75a2.8 2.8 0 01-1.83 2.57l1.7 3.23c.08.17 0 .37-.21.37h-1.65a.23.23 0 01-.2-.11l-1.65-3.38h-.85v3.25c0 .13-.11.24-.24.24h-1.47a.24.24 0 01-.23-.24v-8.44zm3.77 3.57c.51 0 .94-.48.94-1.02a.96.96 0 00-.94-.97h-1.83v2h1.83zM111.02 202.75c0-.13.1-.24.24-.24h1.47c.12 0 .24.11.24.24v6.8h2.94c.14 0 .24.12.24.25v1.39c0 .13-.1.24-.24.24h-4.65a.24.24 0 01-.24-.24v-8.44zM117.35 202.75c0-.13.11-.24.23-.24h1.49c.12 0 .24.11.24.24v8.44c0 .13-.12.24-.24.24h-1.49a.25.25 0 01-.23-.24v-8.44zM121.42 202.61c0-.13.11-.23.24-.23h.3l4.95 4.9h.01v-4.53c0-.13.1-.24.24-.24h1.48c.13 0 .24.11.24.24v8.58c0 .13-.11.23-.24.23h-.2a.38.38 0 01-.16-.06l-4.89-5.06h-.01v4.75c0 .13-.1.24-.24.24h-1.47c-.12 0-.23-.11-.23-.24l-.02-8.58zM134.83 202.4a4.7 4.7 0 013.02 1.2c.12.08.13.23.03.34l-.98 1.07a.26.26 0 01-.33.01 2.24 2.24 0 00-1.63-.61c-1.35 0-2.44 1.17-2.44 2.57a2.5 2.5 0 002.46 2.54c.36 0 .73-.05 1.1-.2v-.74h-.78a.23.23 0 01-.24-.23v-1.26c0-.15.1-.25.24-.25h2.49c.12 0 .22.12.22.25l.01 3.42c0 .07-.05.17-.1.2 0 0-1.27.84-3.07.84a4.48 4.48 0 01-4.44-4.57 4.5 4.5 0 014.44-4.59M139.7 202.75c0-.13.1-.24.23-.24h5.13c.14 0 .24.11.24.24v1.4c0 .12-.1.23-.24.23h-3.43v1.58h2.82c.13 0 .24.12.24.25v1.39c0 .14-.11.24-.24.24h-2.82v1.72h3.43c.14 0 .24.11.24.24v1.39c0 .13-.1.24-.24.24h-5.13a.24.24 0 01-.23-.24v-8.44zM146.94 202.61c0-.13.11-.23.24-.23h.3l4.95 4.9h.01v-4.53c0-.13.1-.24.24-.24h1.48c.13 0 .24.11.24.24v8.58c0 .13-.11.23-.24.23h-.2a.37.37 0 01-.16-.06l-4.89-5.06h-.01v4.75c0 .13-.1.24-.24.24h-1.47a.25.25 0 01-.24-.24v-8.58zM52.75 191.9l1.9-3.2c.31-.5 1.08-.42 1.36-.22.16.07 3.06 2.1 5.71 2.1 1.61 0 2.78-.95 2.78-2.3 0-1.61-1.41-2.84-4.15-3.88-3.46-1.3-7.8-3.88-7.8-8.49 0-3.8 3.1-7.64 9.3-7.64 4.17 0 7.4 2.04 8.6 2.88.48.27.4.96.24 1.23l-2.05 2.96c-.28.42-1 .77-1.37.5-.36-.2-3.3-2.3-5.75-2.3-1.45 0-2.53.92-2.53 1.95 0 1.42 1.2 2.5 4.38 3.73 3.14 1.19 8.13 3.53 8.13 8.76 0 3.95-3.59 7.95-9.5 7.95-5.23 0-8.12-2.08-9.05-2.96-.4-.38-.52-.54-.2-1.08M89.55 168.6c4.02 0 7 1.2 9.73 3.58.37.3.37.77.04 1.07l-3.13 3.12a.73.73 0 01-1 0 8.45 8.45 0 00-5.44-1.96 7.82 7.82 0 00-7.88 7.91c0 4.26 3.38 7.8 7.92 7.8 1.9 0 3.95-.66 5.4-1.85.27-.23.8-.23 1.04.04l3.13 3.19c.29.27.25.77-.04 1.04a14.15 14.15 0 01-9.77 3.72c-8.04 0-14.52-6.1-14.52-13.79 0-7.68 6.48-13.86 14.52-13.86M104.73 169.67c0-.38.37-.73.77-.73h4.78c.45 0 .77.35.77.73v9.68h11.5v-9.68c0-.38.32-.73.77-.73h4.78c.4 0 .77.35.77.73v25.43c0 .39-.37.73-.77.73h-4.78a.75.75 0 01-.77-.73V185h-11.5v10.1c0 .39-.32.73-.77.73h-4.78c-.4 0-.77-.34-.77-.73v-25.43zM132.78 194.71l12.6-25.85c.11-.23.4-.42.68-.42h.4c.28 0 .56.2.68.42l12.59 25.85c.24.5-.08 1-.68 1h-4.47c-.72 0-1.04-.23-1.4-.96l-1.45-3.03h-10.94l-1.45 3.07c-.2.46-.64.92-1.45.92h-4.42c-.6 0-.93-.5-.69-1zm16.53-8.22l-3.05-6.34h-.04l-3.02 6.34h6.11zM161.1 169.5c0-.38.35-.73.76-.73h4.94c.45 0 .77.35.77.74v15.55a4.8 4.8 0 004.95 4.84c2.9 0 5.02-2.15 5.02-4.84v-15.55c0-.39.33-.74.77-.74h4.94c.4 0 .77.35.77.74v15.86c0 5.84-5.15 10.68-11.5 10.68-6.32 0-11.43-4.84-11.43-10.68V169.5zM53.53 110.9c0-.37.29-.69.68-.69h4.29a.7.7 0 01.68.68v19.12h8.56c.4 0 .69.32.69.68v3.9c0 .36-.29.68-.69.68H54.21a.68.68 0 01-.68-.68v-23.7zM70.94 134.34l11.26-24.1c.1-.2.36-.39.61-.39h.36c.26 0 .5.18.62.4l11.26 24.09c.21.46-.07.93-.61.93h-4c-.64 0-.93-.22-1.26-.9l-1.3-2.82H78.1l-1.3 2.86c-.18.43-.57.86-1.3.86h-3.95c-.54 0-.83-.47-.61-.93zm14.79-7.66l-2.74-5.9h-.03l-2.7 5.9h5.47zM97.65 110.5c0-.36.32-.65.68-.65h.9l14.36 13.75h.03v-12.7c0-.37.3-.69.69-.69h4.32a.7.7 0 01.68.68V135c0 .35-.32.64-.68.64h-.58c-.1 0-.4-.11-.47-.18l-14.21-14.21h-.04v13.35c0 .36-.29.68-.68.68h-4.28a.7.7 0 01-.69-.68l-.03-24.1zM123.32 110.9c0-.37.29-.69.65-.69h8.78a12.6 12.6 0 0112.63 12.5c0 6.94-5.69 12.56-12.63 12.56h-8.78c-.36 0-.65-.32-.65-.68v-23.7zm9.07 19.07c4.07 0 7.02-3.18 7.02-7.27 0-4.04-2.95-7.23-7.02-7.23h-3.46v14.5h3.46zM148.06 110.9c0-.37.29-.69.68-.69h14.9c.4 0 .69.32.69.68v3.9c0 .36-.3.68-.69.68h-9.97v4.44h8.2a.7.7 0 01.7.68v3.9c0 .4-.33.68-.7.68h-8.2v4.84h9.97c.4 0 .69.32.69.68v3.9c0 .36-.3.68-.69.68h-14.9a.68.68 0 01-.68-.68v-23.7zM168.9 131.87l1.7-2.97c.28-.47.97-.4 1.22-.22.14.07 2.73 1.97 5.1 1.97 1.45 0 2.5-.9 2.5-2.15 0-1.5-1.27-2.65-3.71-3.61-3.1-1.22-6.99-3.62-6.99-7.91 0-3.55 2.78-7.13 8.32-7.13 3.74 0 6.62 1.9 7.7 2.69.43.25.36.9.21 1.14l-1.83 2.76c-.25.4-.9.72-1.23.47-.32-.18-2.95-2.15-5.14-2.15-1.3 0-2.27.86-2.27 1.82 0 1.33 1.08 2.33 3.92 3.48 2.81 1.1 7.27 3.29 7.27 8.16 0 3.68-3.2 7.4-8.49 7.4-4.68 0-7.27-1.93-8.1-2.75-.36-.36-.46-.5-.18-1M64.98 140.07c2.9 0 6.1 1.16 8.45 3.1.3.24.34.63.07.9l-2.74 2.77a.76.76 0 01-.93.03 6.55 6.55 0 00-4.54-1.58 6.77 6.77 0 00-6.82 6.66c0 3.6 3.08 6.57 6.86 6.57 1 0 2.04-.13 3.08-.53v-1.91h-2.18c-.39 0-.66-.27-.66-.6v-3.26c0-.37.27-.63.66-.63h6.95c.35 0 .63.3.63.63l.03 8.87c0 .17-.14.43-.27.53 0 0-3.57 2.14-8.59 2.14-6.89 0-12.43-5.21-12.43-11.8 0-6.6 5.54-11.89 12.43-11.89M75.68 162.6l10.84-22.2a.7.7 0 01.59-.36h.34a.7.7 0 01.6.36l10.83 22.2c.2.44-.07.87-.59.87h-3.84c-.63 0-.9-.2-1.22-.83l-1.24-2.6h-9.42l-1.25 2.64c-.17.39-.55.79-1.24.79h-3.8c-.53 0-.8-.43-.6-.86zm14.23-7.05l-2.63-5.45h-.03l-2.6 5.45h5.26zM129 145.22h-4.95a.64.64 0 01-.66-.63V141c0-.32.28-.62.66-.62h15.37c.38 0 .66.3.66.63v3.6c0 .32-.28.62-.66.62h-4.95v17.62c0 .33-.31.63-.66.63h-4.15c-.35 0-.66-.3-.66-.63v-17.62zM143.05 141c0-.33.28-.63.66-.63h14.33c.38 0 .66.3.66.63v3.6c0 .32-.28.62-.66.62h-9.59v4.1h7.9c.34 0 .65.29.65.62v3.6c0 .36-.3.62-.66.62h-7.89v4.46h9.59c.38 0 .66.3.66.62v3.6c0 .33-.28.63-.66.63h-14.33a.64.64 0 01-.66-.63V141zM163.3 140.63c0-.32.31-.59.66-.59h.87l13.8 12.67h.04V141c0-.33.28-.63.66-.63h4.16c.34 0 .65.3.65.63v22.2c0 .33-.3.6-.65.6h-.56c-.1 0-.38-.1-.45-.17l-13.67-13.1h-.04v12.31c0 .33-.28.63-.66.63H164c-.35 0-.66-.3-.66-.63l-.04-22.2zM102.2 141c0-.33.28-.63.66-.63h10.35c4.15 0 7.55 3.2 7.55 7.13 0 3.03-2.11 5.47-5.13 6.63l4.75 8.38c.24.43 0 .96-.6.96h-4.6a.64.64 0 01-.55-.3l-4.6-8.74h-2.4v8.41c0 .33-.3.63-.65.63h-4.12a.64.64 0 01-.66-.63V141zm10.56 9.24a2.7 2.7 0 002.63-2.64c0-1.39-1.2-2.51-2.63-2.51h-5.12v5.15h5.12z"/>
                            </g>
                            </g>
                        </svg>
                    </div>
                </aside>
                <main class="Footer__main">
                    <div class="Footer__main-container">
                        <nav class="Footer__nav">
                            <ul>
                                <li><a href="#0"><b>Konzept</b></a></li>
                                <li><a href="#0"><b>Shop</b></a></li>
                                <li><a href="#0" class="is-active"><b>Presse</b></a></li>
                                <li><a href="#0"><b>Stellenangebote</b></a></li>
                                <li><a href="#0"><b>Ausschreibung</b></a></li>
                                <li><a href="#0"><b>LGS Plus</b></a></li>
                            </ul>
                            <div class="Footer__social">
                                <ul class="inline-list  Footer__social-icons">
                                    <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2zm-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6zm9.65 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/></svg></a></li>
                                    <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M17 2v4h-2c-.69 0-1 .81-1 1.5V10h3v4h-3v8h-4v-8H7v-4h3V6a4 4 0 0 1 4-4h3z"/></svg></a></li>
                                    <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M10 16.5v-9l6 4.5-6 4.5zM20 4.4c-.6-.2-4.3-.4-8-.4s-7.4.19-8 .38C2.44 4.9 2 8.4 2 12c0 3.59.44 7.1 2 7.61.6.2 4.3.39 8 .39s7.4-.19 8-.39c1.56-.51 2-4.02 2-7.61 0-3.6-.44-7.09-2-7.6z"/></svg></a></li>
                                </ul>
                                <ul class="inline-list Footer__small__list">
                                    <li><a href="#0">Datenschutz</a></li>
                                    <li><a href="#0">Impressum</a></li>
                                    <li><a href="#0">Kontakt</a></li>
                                </ul>
                            </div>
                        </nav>
                        <div class="Footer__nav-aside">
                            <div class="Footer__info">
                                <div class="Footer__title">
                                    Landesgartenschau<br>Ãœberlingen 2020 GmbH
                                </div>
                                <div class="Footer__text">
                                    Bahnhofstraße 19 | 88662 Überlingen<br>
                                    Tel. 07551/309739-0 | Fax: 07551/309739-39<br>
                                    <a href="mailto:info@ueberlingen2020.de">info@ueberlingen2020.de</a>
                                </div>
                            </div>
                            <div>
                                <div class="Footer__winner-title">
                                    German Design Award Gewinner 2020
                                </div>
                                <div>
                                    <div class="Footer__winner-img"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </section>
</footer>

Styleguide sections.footer.2
*/
.Footer__banner {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  height: 280px;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center; }
  @media (min-width: 40em) {
    .Footer__banner {
      height: 380px; } }
  @media (min-width: 64em) {
    .Footer__banner {
      height: 420px; } }

.Footer__image {
  height: 0; }

.Footer__button {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  -webkit-box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
          box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
  background: #afcc56;
  position: absolute;
  bottom: 100px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%); }
  @media (min-width: 40em) {
    .Footer__button {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .Footer__button svg,
  .Footer__button img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .Footer__button * + svg,
  .Footer__button * + img {
    margin-right: 0;
    margin-left: 15px; }
  .Footer__button:hover {
    cursor: pointer;
    color: #ffffff; }
  .Footer__button:hover {
    background-color: #88a431; }
  .Footer__button:disabled, .Footer__button.is-disabled {
    pointer-events: none;
    opacity: 0.25; }
  .Footer__button img {
    margin-left: 10px; }

/*
Menu

.Menu--bg - mit Hintergrundfarbe

Markup:
<script>
window.__menu = {
    main: [
        {
            label: "Aktuelles",
            link: "",
            subnav: "subnav-01",
            isActive: true,
            isBig: true
        },
        {
            label: "Konzept",
            link: "",
            subnav: "subnav-02",
            isActive: false,
            isBig: true
        },
        {
            label: "Sponsoren",
            link: "#0",
            subnav: "",
            isActive: false
        },
        {
            label: "Partner",
            link: "#0",
            subnav: "",
            isActive: false
        },
        {
            label: "Vorfreude",
            link: "#0",
            subnav: "",
            isActive: false
        },
        {
            label: "Presse",
            link: "",
            subnav: "subnav-06",
            isActive: false
        }
    ],
    subnavs: {
        "subnav-01": {
            items: [
                {
                    label: "News",
                    link: "/news",
                    icon: "<img src='http://placehold.it/24' alt=''>",
                    isActive: false                    
                },
                {
                    label: "Termine",
                    link: "/termine",
                    icon: "<img src='http://placehold.it/24' alt=''>",
                    isActive: true                    
                },
                {
                    label: "Baustellenreport",
                    link: "/report",
                    icon: "<img src='http://placehold.it/24' alt=''>",
                    isActive: false                    
                },
                {
                    label: "Interviews",
                    link: "/interviews",
                    icon: "<img src='http://placehold.it/24' alt=''>",
                    isActive: false                    
                },
                {
                    label: "Bildergalerie",
                    link: "/galerie",
                    icon: "<img src='http://placehold.it/24' alt=''>",
                    isActive: false                    
                }
            ]
        },
        "subnav-02": {
            items: [
                {
                    label: "Lorem",
                    link: "/lorem",
                    icon: "<img src='http://placehold.it/24' alt=''>",
                    isActive: false                    
                },
                {
                    label: "Ipsum",
                    link: "/ipsum",
                    icon: "<img src='http://placehold.it/24' alt=''>",
                    isActive: false                    
                }
            ]
        }
    },
    socials: [
        {
            icon: "<img src='http://placehold.it/24' alt=''>",
            link: "#0"
        },
        {
            icon: "<img src='http://placehold.it/24' alt=''>",
            link: "#0"
        },
        {
            icon: "<img src='http://placehold.it/24' alt=''>",
            link: "#0"
        },
        {
            icon: "<img src='http://placehold.it/24' alt=''>",
            link: "#0"
        }
    ],
    additional: [
        {
            label: "Lorem",
            link: "#lorem",
            isActive: false                    
        },
        {
            label: "Ipsum",
            link: "#ipsum",
            isActive: false                    
        },
        {
            label: "Dolor",
            link: "#dolor",
            isActive: false                    
        }
    ]
}
</script>
<header class="Menu__container">
    <div class="Menu  {{modifier_class}}">
        <div class="Menu__wrapper">
            <svg class="Menu__logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="239" height="322" viewBox="0 0 239 322">
                <defs>
                <path id="a" d="M.77.13h10.49v11.5H.77z"/>
                <path id="c" d="M.14.65h13.71v23.68H.14z"/>
                <path id="e" d="M0 .42h66.17v27.49H0z"/>
                <path id="g" d="M.52.51H66.7V28H.52z"/>
                </defs>
                <g fill="none" fill-rule="evenodd">
                <path fill="#008ACA" d="M50.27 265.32l-3.04-.05c-5.76-.03-16.3 3-18.89 13.8-1.72 7.14.22 13.64 1.73 17.22l20.2-30.97z"/>
                <path fill="#80C1E7" d="M30.07 296.3l.11-.01c3.9-.09 10.57-.97 16.37-5.38 8.84-6.73 7.36-17.58 5-22.83l-1.23-2.65-.05-.1-20.2 30.96z"/>
                <g transform="translate(2 287.93)">
                    <mask id="b" fill="#fff">
                    <use xlink:href="#a"/>
                    </mask>
                    <path fill="#008ACA" d="M11.26.44L10.04.23C7.72-.15 3.28.4 1.54 4.58a11.5 11.5 0 00-.4 7.05L11.26.44z" mask="url(#b)"/>
                </g>
                <path fill="#80C1E7" d="M3.14 299.57h.05c1.58.22 4.32.29 6.94-1.12 3.99-2.15 4.09-6.62 3.47-8.88l-.32-1.15-.02-.04-10.12 11.19z"/>
                <path fill="#008ACA" d="M204.77 66.7l1.22.22c2.32.4 6.76-.12 8.54-4.28 1.17-2.76.83-5.5.46-7.05l-10.22 11.1z"/>
                <path fill="#80C1E7" d="M215 55.59l-.05-.01a11.54 11.54 0 00-6.95 1.07c-4.01 2.11-4.15 6.58-3.56 8.85l.32 1.15.01.04L215 55.6z"/>
                <path fill="#E18398" d="M35.56 66.34l-1.67.25c-3.15.43-9.16-.5-11.34-6.24a15.6 15.6 0 01-.28-9.58l13.29 15.57zM132.14 275.95l1.52.74c2.84 1.42 7.28 5.56 5.86 11.53a15.6 15.6 0 01-5.17 8.07l-2.21-20.34z"/>
                <path fill="#D0185D" d="M132.1 276l-1.28 1c-2.48 2-5.93 6.98-3.26 12.51a15.6 15.6 0 006.73 6.75l.05.03-2.2-20.34-.05.04zM35.58 66.29l.49-1.55c.92-3.05.96-9.1-4.37-12.18a15.64 15.64 0 00-9.36-1.8l-.07.01 13.29 15.57.02-.05z"/>
                <path fill="#E18398" d="M195.15 248.58l-.84 1.94c-1.55 3.69-2.37 11.25 3.89 15.77 4.14 2.99 8.84 3.46 11.54 3.44l-14.6-21.15z"/>
                <path fill="#D0185D" d="M195.22 248.58l2.04-.1c4-.12 11.38 1.8 13.37 9.25 1.32 4.89.12 9.4-.86 11.93l-.02.07-14.6-21.15h.07z"/>
                <path fill="#E18398" d="M215.47 252.64l-.28 1.2c-.51 2.26-.22 6.68 3.82 8.64 2.68 1.3 5.42 1.1 6.96.8l-10.5-10.64z"/>
                <path fill="#D0185D" d="M215.52 252.63l1.15-.25c2.28-.48 6.7-.13 8.6 3.94a11.39 11.39 0 01.72 6.92l-.01.05-10.5-10.65h.04z"/>
                <path fill="#E18398" d="M201.64 23.98l2.11-.18c3.98-.39 11.05-3.24 12.07-10.89.67-5.06-1.13-9.41-2.43-11.78l-11.75 22.85z"/>
                <path fill="#D0185D" d="M201.6 23.91l-1.04-1.75c-2.01-3.45-3.8-10.85 1.82-16.14 3.7-3.46 8.24-4.55 10.93-4.89h.08l-11.75 22.85-.04-.07z"/>
                <path fill="#CEDF9A" d="M194.18 15.29c2.31 1.05 4.75-1.15 6.8-3.53 3.25-3.75 2.11-8.23.77-10.37-.1-.2-.77-1.1-.77-1.1l-6.84 14.98.03.01h.01"/>
                <path fill="#94C01F" d="M199.63.43c-2.5.39-6.62 2.47-7.33 7.38-.45 3.12-.51 6.4 1.8 7.44l.04.02L200.98.28s-1.12.1-1.35.15"/>
                <path fill="#CEDF9A" d="M184.84 297.97c-3.58 1.6-3.53 6.65-2.88 11.46 1.04 7.6 7.38 10.87 11.23 11.5.35.09 2.08.26 2.08.26l-10.37-23.25-.05.03h-.01"/>
                <g transform="translate(184.76 296.86)">
                    <mask id="d" fill="#fff">
                    <use xlink:href="#c"/>
                    </mask>
                    <path fill="#94C01F" d="M11.71 22.62c2.1-3.28 3.92-10.18-1.05-16.03C7.52 2.9 3.8-.54.2 1.06l-.06.03 10.37 23.24s1.03-1.4 1.2-1.71" mask="url(#d)"/>
                </g>
                <path fill="#CEDF9A" d="M47.63 17.71c2.06-1.4 1.46-4.57.5-7.51-1.51-4.65-5.86-5.99-8.35-5.95-.23 0-1.33.08-1.33.08l9.14 13.4.03-.01v-.01"/>
                <path fill="#94C01F" d="M37.89 5.54c-.95 2.3-1.3 6.83 2.47 9.94 2.4 1.96 5.13 3.69 7.2 2.28l.03-.02-9.14-13.4s-.5.98-.56 1.2"/>
                <g>
                    <path fill="#009640" d="M23.55 92.58l-.02-.01v.02h-.02l.02.01s23.68 39.52 48.83 55.49c17.1 10.85 47.17 5.44 47.18 5.43l-96-60.94zM180.24 57.46l.01-.02.01.02h.02v.01s-4.5 45.83-20.4 71c-10.8 17.1-40.31 25.03-40.32 25.03l60.68-96.04z"/>
                    <path fill="#009640" d="M180.24 57.46l.01-.02h-.01l-.01-.02-.01.02s-39.5 23.8-55.4 48.96c-10.81 17.1-5.26 47.09-5.26 47.1l60.68-96.04zM215.56 214.46l.02.01v-.02h.02l-.02-.02s-23.68-39.51-48.84-55.48c-17.1-10.86-47.17-5.44-47.17-5.43l96 60.94z"/>
                    <path fill="#009640" d="M215.56 214.46l.02.01h-.02v.03l-.01-.01s-45.91-4.67-71.06-20.64c-17.1-10.85-24.92-40.33-24.92-40.33l96 60.94zM58.36 249.23l-.01.01h.01l.01.02.01-.02s39.6-23.63 55.6-48.73c10.88-17.06 5.45-47.07 5.45-47.07l-61.07 95.79z"/>
                    <path fill="#009640" d="M58.36 249.23l-.01.01-.01-.01h-.02v-.02s4.68-45.8 20.69-70.9c10.88-17.07 40.42-24.87 40.42-24.87l-61.07 95.79z"/>
                    <path fill="#009640" d="M23.56 92.6l-.01-.02h.02v-.02h.01s45.9 4.67 71.06 20.64c17.1 10.85 24.92 40.33 24.92 40.34l-96-60.95z"/>
                    <path fill="#008ACA" d="M116.73 55.86c-7.64-6.43-15.4-7.73-23.04-17.25l14.85 66.03s21.9-37.24 8.19-48.78"/>
                    <path fill="#5CB5E1" d="M80.26 64.03c4.15-9.07 10.61-13.55 13.43-25.42l14.87 66.03h-.01S72.8 80.3 80.25 64.02"/>
                    <g transform="translate(0 152.38)">
                    <mask id="f" fill="#fff">
                        <use xlink:href="#e"/>
                    </mask>
                    <path fill="#008ACA" d="M17.28 4.93C10.85 12.55 9.54 20.3 0 27.9l66.17-14.8v-.02S28.84-8.76 17.27 4.93" mask="url(#f)"/>
                    </g>
                    <path fill="#5CB5E1" d="M25.47 193.7C16.4 189.56 11.9 183.1 0 180.3l66.17-14.84v.01s-24.38 35.67-40.7 28.23"/>
                    <path fill="#008ACA" d="M122.7 252.67c7.63 6.42 15.4 7.72 23.03 17.25l-14.84-66.04-.01.01s-21.9 37.24-8.18 48.78"/>
                    <path fill="#5CB5E1" d="M159.17 244.5c-4.15 9.06-10.61 13.55-13.44 25.41l-14.86-66.02h.01s35.75 24.33 28.29 40.6"/>
                    <g transform="translate(171.53 126.42)">
                    <mask id="h" fill="#fff">
                        <use xlink:href="#g"/>
                    </mask>
                    <path fill="#008ACA" d="M49.41 23.5C55.85 15.87 57.16 8.13 66.7.5L.52 15.32l.02.01s37.3 21.85 48.87 8.17" mask="url(#h)"/>
                    </g>
                    <path fill="#5CB5E1" d="M212.75 113.52c9.09 4.14 13.58 10.6 25.47 13.4l-66.17 14.84.01-.01s24.38-35.67 40.7-28.23"/>
                    <path fill="#D0185D" d="M175.69 171.3l1.06 3.4c2.08 6.39 9.35 16.95 22.31 15.85 8.58-.73 15.1-5.27 18.53-8.26l-41.9-11z"/>
                    <path fill="#E28498" d="M175.78 171.2l2.5-2.34c4.97-4.55 16.5-10.18 27.25-2.86 7.05 4.8 10.49 11.86 12.02 16.16l.05.13-41.91-11 .09-.08zM163 113.92v-.01l-.43-3.53c-.76-6.68 1.49-19.3 13.75-23.64 8.11-2.87 15.93-1.42 20.3-.11L163 113.92z"/>
                    <path fill="#D0185D" d="M163.12 113.96l3.26 1.1c6.4 2.1 19.23 2.47 26-8.62 4.43-7.28 4.63-15.13 4.25-19.68l-.01-.13L163 113.92l.12.04z"/>
                    <path fill="#E28498" d="M75.45 193.11l.51 3.52c.9 6.67-1.1 19.32-13.26 23.92-8.05 3.04-15.9 1.75-20.29.54l33.04-27.98z"/>
                    <path fill="#D0185D" d="M75.33 193.07l-3.28-1.03c-6.44-1.97-19.28-2.08-25.8 9.15-4.29 7.37-4.33 15.22-3.86 19.76l.02.13 33.04-27.97-.12-.04z"/>
                    <path fill="#E28498" d="M101.76 210.24l2.44 2.59c4.57 4.95 10.22 16.45 2.9 27.18-4.85 7.1-12.01 10.54-16.3 12.05h-.02l10.98-41.82z"/>
                    <path fill="#D0185D" d="M101.64 210.27l-3.28 1.03c-6.4 2.08-16.99 9.34-15.87 22.28.73 8.48 5.2 14.94 8.2 18.38l.1.1 10.97-41.83-.12.04z"/>
                    <path fill="#E28498" d="M52.78 76.3l-1.17 3.36c-2.15 6.37-2.62 19.17 8.45 26 7.32 4.51 15.27 4.74 19.81 4.38L52.78 76.3z"/>
                    <path fill="#D0185D" d="M52.9 76.28l3.42-.4c6.7-.7 19.33 1.64 23.6 13.9 2.79 8.05 1.33 15.76 0 20.13l-.04.13-27.1-33.74.13-.02zM159.17 197.35l-1.1 3.39c-1.99 6.42-2.16 19.23 9.07 25.8 7.42 4.34 15.37 4.38 19.9 3.91h.01l-27.88-33.1z"/>
                    <path fill="#E28498" d="M159.3 197.33l3.4-.47c6.68-.86 19.36 1.17 23.91 13.34 2.98 7.98 1.7 15.73.48 20.12l-.04.13-27.88-33.1.13-.02z"/>
                    <path fill="#D0185D" d="M146.77 55.49l2.53 2.5c4.73 4.8 10.77 16.1 3.81 27.07-4.6 7.27-11.64 10.94-15.89 12.6l9.55-42.17z"/>
                    <path fill="#E28498" d="M146.65 55.53l-3.24 1.14c-6.34 2.3-16.66 9.9-15.11 22.8 1.02 8.45 5.71 14.76 8.83 18.1l.09.1 9.55-42.18-.12.04z"/>
                    <path fill="#D0185D" d="M62.92 135.88l-1.12-3.37c-2.19-6.37-9.63-16.8-22.57-15.5-8.57.88-15.01 5.52-18.4 8.57l42.09 10.3z"/>
                    <path fill="#E28498" d="M62.83 135.97l-2.47 2.39c-4.89 4.63-16.32 10.45-27.2 3.31-7.12-4.68-10.68-11.69-12.28-15.96l-.05-.13 42.09 10.3-.1.1z"/>
                    <path fill="#94C01F" d="M121.99 146.13c5.12-13.52 21.71-34.2 50.17-32.4 18.05 1.13 36.54 4.64 39.72 18.85v.02l.05.22-92.38 20.7s1.88-6.18 2.44-7.39"/>
                    <path fill="#94C01F" d="M124.92 159.14c10.42 10.04 34.27 21.66 59.23 7.9 15.83-8.72 31.05-19.79 27.83-33.98v-.03l-.05-.21-92.38 20.7s4.35 4.77 5.37 5.62"/>
                    <path fill="#94C01F" d="M126.95 155.95c13.55 5.1 34.27 21.66 32.47 50.06-1.14 18-4.65 36.46-18.89 39.63h-.02l-.22.05-20.74-92.18s6.2 1.88 7.4 2.44M113.91 158.86c-10.06 10.4-21.7 34.2-7.92 59.12 8.75 15.79 19.83 30.98 34.06 27.77h.02l.22-.06-20.74-92.18s-4.79 4.34-5.64 5.35"/>
                    <path fill="#94C01F" d="M117.12 160.89c-5.13 13.52-21.71 34.2-50.17 32.4-18.05-1.13-36.54-4.64-39.72-18.84v-.03l-.05-.21 92.37-20.7s-1.87 6.18-2.43 7.38"/>
                    <path fill="#94C01F" d="M114.2 147.89c-10.43-10.04-34.28-21.66-59.25-7.9-15.82 8.72-31.04 19.78-27.83 33.97l.01.03.05.22 92.37-20.7s-4.34-4.78-5.36-5.62"/>
                    <path fill="#94C01F" d="M112.16 151.08c-13.55-5.11-34.27-21.67-32.47-50.06C80.82 83 84.34 64.55 98.58 61.39l.02-.01.22-.05 20.73 92.18s-6.18-1.88-7.39-2.43M125.2 148.16c10.06-10.4 21.7-34.2 7.91-59.11-8.74-15.8-19.83-30.98-34.05-27.77h-.03l-.21.05 20.73 92.18s4.8-4.33 5.65-5.35"/>
                    <path fill="#006B2D" d="M189.31 168.39c11.64 22.95 3.73 48.77 3.1 50.74a21.52 21.52 0 00-1.63-5.86c-1.93-4.2-7.18-11.09-9.85-16.54-1.61-3.3-3.02-5.92-3.88-7.5-2.48-13.99-22.4-16.97-32.87-22.34-10.51-5.41-8.42-16.67-8.42-16.67 14.09-5.01 41.44-5.71 53.55 18.17"/>
                    <path fill="#009640" d="M190.78 213.27a21.5 21.5 0 011.62 5.86l-.04.13c-2.9-9.59-19.46-6.73-46.33-13.96-26.9-7.22-21.21-47.15-21.21-47.15s4.81 13.93 28.61 18.06c18.05 3.14 23.68 13.32 23.68 13.32l-.06-.3c.86 1.58 2.27 4.2 3.88 7.5 2.67 5.46 7.92 12.35 9.85 16.54"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M192.36 218.65c-.08-1.8-1.17-3.38-2.22-4.85l-7.38-10.31c-6.02-8.44-12.66-17.34-22.44-20.78-4.39-1.54-9.1-1.86-13.68-2.62-2.34-.4-4.7-.92-6.73-2.15a21.15 21.15 0 01-4.26-3.72c-4.05-4.27-8.08-8.76-10.22-14.24"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M192.52 218.64c-1.03-1.44-2.06-3.2-3.44-4.34-1.12-.9-2.2-1.62-3.22-2.68-2.6-2.71-5.28-5.35-8.12-7.8-5.6-4.8-11.93-8.94-19.1-10.95-3.02-.84-6.15-1.3-9.16-2.22-8.64-2.63-15.8-8.88-21.15-16.12-1.4-1.9-2.72-3.91-3.3-6.2-.24-.89-.35-1.81-.34-2.74"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M185.55 212.64c-7.4-6.6-17.24-9.65-26.76-12.47-2.95-.87-5.94-1.75-8.64-3.24a36.18 36.18 0 01-5.4-3.8 115.7 115.7 0 01-17.77-18.17c-1.01-1.29-2.03-2.67-2.28-4.3"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M180 211.36c-1.98-1.24-4.13-2.22-6.37-2.93-1.58-.5-3.2-.85-4.82-1.25a76.77 76.77 0 01-43.85-30.36l.03.38"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M164.74 209.09c-2.78-2.76-7.29-2.58-10.84-4.23-1.86-.87-3.44-2.25-5.18-3.34-2.23-1.4-4.72-2.34-6.93-3.76a34.62 34.62 0 01-4.84-3.96c-3.7-3.45-7.28-7.03-10.75-10.72M150.69 206.34A61.95 61.95 0 01128 188.31"/>
                    <path fill="#006B2D" d="M134.55 83.86c23-11.62 48.87-3.72 50.85-3.09a21.6 21.6 0 00-5.87 1.62c-4.2 1.93-11.1 7.16-16.57 9.83-3.3 1.61-5.94 3.01-7.52 3.87-14.02 2.48-17 22.35-22.39 32.8-5.42 10.5-16.7 8.4-16.7 8.4-5.03-14.05-5.73-41.35 18.2-53.43"/>
                    <path fill="#009640" d="M179.53 82.4a21.58 21.58 0 015.87-1.63l.14.05c-9.62 2.89-6.75 19.41-14 46.23-7.23 26.84-47.24 21.16-47.24 21.16s13.95-4.8 18.1-28.55c3.14-18.01 13.34-23.63 13.34-23.63l-.3.06a193.5 193.5 0 017.52-3.87c5.46-2.67 12.37-7.9 16.57-9.83"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M184.92 80.81c-1.8.09-3.39 1.18-4.86 2.22l-10.34 7.36c-8.45 6.01-17.37 12.63-20.82 22.4-1.54 4.37-1.86 9.07-2.63 13.64-.39 2.34-.92 4.7-2.15 6.73a21.16 21.16 0 01-3.73 4.24c-4.27 4.04-8.78 8.06-14.26 10.2"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M184.91 80.66c-1.44 1.02-3.21 2.05-4.35 3.43-.9 1.12-1.62 2.2-2.69 3.21a117.3 117.3 0 00-7.8 8.1c-4.83 5.59-8.97 11.9-10.98 19.06-.85 3.02-1.31 6.14-2.23 9.15-2.63 8.61-8.9 15.75-16.16 21.1-1.9 1.4-3.92 2.71-6.2 3.3-.9.23-1.82.34-2.75.33"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M178.9 87.6c-6.63 7.4-9.68 17.21-12.5 26.71-.87 2.95-1.76 5.93-3.24 8.62a36.1 36.1 0 01-3.82 5.39 115.74 115.74 0 01-18.2 17.74c-1.3 1-2.68 2.02-4.3 2.27"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M177.62 93.14a27.78 27.78 0 00-2.94 6.37c-.5 1.58-.85 3.2-1.26 4.8A76.61 76.61 0 01143 148.07l.38-.03"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M175.34 108.38c-2.77 2.77-2.58 7.27-4.24 10.8-.87 1.87-2.25 3.44-3.35 5.18-1.4 2.22-2.34 4.7-3.76 6.92a34.53 34.53 0 01-3.97 4.82 228.9 228.9 0 01-10.75 10.73M172.59 122.4a61.87 61.87 0 01-18.07 22.63"/>
                    <path fill="#006B2D" d="M49.86 138.5c-11.64-22.95-3.73-48.77-3.1-50.74.26 1.8.75 3.94 1.63 5.86 1.93 4.19 7.17 11.08 9.85 16.53 1.61 3.3 3.01 5.93 3.87 7.5 2.49 14 22.4 16.97 32.88 22.34 10.51 5.41 8.41 16.67 8.41 16.67-14.08 5.02-41.43 5.72-53.54-18.16"/>
                    <path fill="#009640" d="M48.39 93.62a21.5 21.5 0 01-1.63-5.86l.05-.14c2.9 9.6 19.46 6.73 46.33 13.96 26.9 7.22 21.21 47.15 21.21 47.15s-4.81-13.92-28.62-18.06c-18.05-3.13-23.68-13.31-23.68-13.31l.06.29c-.86-1.57-2.26-4.2-3.87-7.5-2.68-5.45-7.92-12.34-9.85-16.53"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M46.8 88.23c.09 1.8 1.18 3.39 2.23 4.86l7.37 10.31c6.03 8.43 12.66 17.33 22.45 20.78 4.38 1.54 9.09 1.85 13.67 2.62 2.34.39 4.71.92 6.74 2.14 1.62.98 2.95 2.36 4.26 3.73 4.05 4.26 8.08 8.76 10.22 14.23"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M46.65 88.24c1.03 1.45 2.06 3.21 3.44 4.34 1.12.91 2.2 1.62 3.22 2.69 2.6 2.7 5.27 5.34 8.12 7.8 5.6 4.8 11.92 8.93 19.1 10.94 3.02.85 6.15 1.31 9.16 2.23 8.63 2.62 15.79 8.87 21.15 16.12 1.4 1.89 2.72 3.9 3.3 6.19.23.89.35 1.82.34 2.74"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M53.62 94.24c7.4 6.61 17.23 9.66 26.76 12.47 2.95.88 5.94 1.76 8.64 3.24a36.08 36.08 0 015.39 3.81 115.66 115.66 0 0117.78 18.16c1.01 1.3 2.03 2.68 2.27 4.3"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M59.16 95.52c2 1.24 4.14 2.23 6.38 2.93 1.58.5 3.2.85 4.82 1.26a76.77 76.77 0 0143.85 30.36l-.03-.39"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M74.43 97.8c2.78 2.76 7.28 2.57 10.83 4.23 1.87.87 3.45 2.24 5.19 3.34 2.22 1.4 4.72 2.33 6.93 3.75a34.62 34.62 0 014.84 3.96c3.7 3.46 7.28 7.04 10.74 10.73M88.48 100.54a61.95 61.95 0 0122.68 18.03"/>
                    <path fill="#006B2D" d="M104.76 223.09c-23 11.61-48.88 3.71-50.86 3.08 1.82-.25 3.96-.74 5.88-1.62 4.2-1.93 11.1-7.16 16.57-9.83 3.3-1.6 5.94-3 7.51-3.86 14.02-2.48 17-22.36 22.4-32.81 5.42-10.49 16.7-8.4 16.7-8.4 5.03 14.05 5.73 41.35-18.2 53.44"/>
                    <path fill="#009640" d="M59.78 224.55a21.6 21.6 0 01-5.88 1.62l-.13-.04c9.61-2.9 6.75-19.42 13.99-46.23C75 153.05 115 158.73 115 158.73s-13.95 4.8-18.1 28.56c-3.14 18-13.34 23.63-13.34 23.63l.3-.06a194.1 194.1 0 01-7.52 3.86c-5.47 2.67-12.37 7.9-16.57 9.83"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M54.38 226.13c1.81-.08 3.4-1.17 4.87-2.22l10.33-7.36c8.45-6 17.37-12.63 20.82-22.4 1.55-4.37 1.86-9.07 2.63-13.64.4-2.33.92-4.7 2.15-6.72a21.19 21.19 0 013.73-4.25c4.27-4.04 8.78-8.06 14.26-10.2"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M54.4 226.29c1.44-1.03 3.2-2.05 4.34-3.44.91-1.12 1.62-2.19 2.7-3.2a117.5 117.5 0 007.8-8.11c4.82-5.58 8.96-11.9 10.98-19.05.85-3.03 1.3-6.15 2.23-9.15 2.63-8.62 8.9-15.76 16.15-21.1 1.9-1.4 3.92-2.72 6.2-3.3.9-.23 1.83-.34 2.75-.34"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M60.4 219.34c6.63-7.39 9.68-17.2 12.5-26.7.88-2.96 1.76-5.93 3.25-8.63a36.1 36.1 0 013.82-5.38 115.78 115.78 0 0118.2-17.74c1.29-1.01 2.68-2.03 4.3-2.27"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M61.69 213.8a27.73 27.73 0 002.93-6.36c.5-1.58.85-3.2 1.26-4.8a76.61 76.61 0 0130.42-43.77"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M63.97 198.56c2.76-2.76 2.58-7.26 4.24-10.8.87-1.87 2.24-3.44 3.34-5.18 1.4-2.22 2.34-4.7 3.76-6.91a34.53 34.53 0 013.97-4.83c3.47-3.7 7.05-7.27 10.75-10.73M66.72 184.54a61.86 61.86 0 0118.07-22.63"/>
                    <path fill="#FEFEFE" d="M78.83 202.75c0-.13.11-.24.23-.24h1.53c.13 0 .23.11.23.24v5.16c0 .9.65 1.61 1.52 1.61.9 0 1.55-.71 1.55-1.6v-5.17c0-.13.1-.24.24-.24h1.52c.13 0 .24.11.24.24v5.27a3.56 3.56 0 01-3.55 3.54 3.54 3.54 0 01-3.51-3.54v-5.27zm1-2.01c0-.5.39-.9.87-.9s.88.4.88.9-.4.9-.88.9a.89.89 0 01-.87-.9zm3.28 0c0-.5.39-.9.87-.9s.88.4.88.9-.4.9-.88.9a.89.89 0 01-.87-.9zM87.9 202.75c0-.13.1-.24.23-.24H91c1.46 0 2.66 1.03 2.66 2.37 0 .98-.85 1.7-1.43 2.01.65.28 1.66.9 1.66 2.08 0 1.43-1.23 2.46-2.7 2.46h-3.07a.24.24 0 01-.24-.24v-8.44zm2.89 3.38a.9.9 0 00.87-.92c0-.5-.4-.87-.87-.87h-.97v1.79h.97zm.16 3.48c.48 0 .9-.4.9-.93 0-.51-.54-.9-1.02-.9h-1v1.83h1.12zM95.47 202.75c0-.13.1-.24.24-.24h5.12c.14 0 .24.11.24.24v1.4c0 .12-.1.23-.24.23H97.4v1.58h2.83c.12 0 .23.12.23.25v1.39c0 .14-.11.24-.23.24H97.4v1.72h3.43c.14 0 .24.11.24.24v1.39c0 .13-.1.24-.24.24h-5.12a.24.24 0 01-.24-.24v-8.44zM102.73 202.75c0-.13.1-.24.23-.24h3.7c1.49 0 2.7 1.24 2.7 2.75a2.8 2.8 0 01-1.83 2.57l1.7 3.23c.08.17 0 .37-.21.37h-1.65a.23.23 0 01-.2-.11l-1.65-3.38h-.85v3.25c0 .13-.11.24-.24.24h-1.47a.24.24 0 01-.23-.24v-8.44zm3.77 3.57c.51 0 .94-.48.94-1.02a.96.96 0 00-.94-.97h-1.83v2h1.83zM111.02 202.75c0-.13.1-.24.24-.24h1.47c.12 0 .24.11.24.24v6.8h2.94c.14 0 .24.12.24.25v1.39c0 .13-.1.24-.24.24h-4.65a.24.24 0 01-.24-.24v-8.44zM117.35 202.75c0-.13.11-.24.23-.24h1.49c.12 0 .24.11.24.24v8.44c0 .13-.12.24-.24.24h-1.49a.25.25 0 01-.23-.24v-8.44zM121.42 202.61c0-.13.11-.23.24-.23h.3l4.95 4.9h.01v-4.53c0-.13.1-.24.24-.24h1.48c.13 0 .24.11.24.24v8.58c0 .13-.11.23-.24.23h-.2a.38.38 0 01-.16-.06l-4.89-5.06h-.01v4.75c0 .13-.1.24-.24.24h-1.47c-.12 0-.23-.11-.23-.24l-.02-8.58zM134.83 202.4a4.7 4.7 0 013.02 1.2c.12.08.13.23.03.34l-.98 1.07a.26.26 0 01-.33.01 2.24 2.24 0 00-1.63-.61c-1.35 0-2.44 1.17-2.44 2.57a2.5 2.5 0 002.46 2.54c.36 0 .73-.05 1.1-.2v-.74h-.78a.23.23 0 01-.24-.23v-1.26c0-.15.1-.25.24-.25h2.49c.12 0 .22.12.22.25l.01 3.42c0 .07-.05.17-.1.2 0 0-1.27.84-3.07.84a4.48 4.48 0 01-4.44-4.57 4.5 4.5 0 014.44-4.59M139.7 202.75c0-.13.1-.24.23-.24h5.13c.14 0 .24.11.24.24v1.4c0 .12-.1.23-.24.23h-3.43v1.58h2.82c.13 0 .24.12.24.25v1.39c0 .14-.11.24-.24.24h-2.82v1.72h3.43c.14 0 .24.11.24.24v1.39c0 .13-.1.24-.24.24h-5.13a.24.24 0 01-.23-.24v-8.44zM146.94 202.61c0-.13.11-.23.24-.23h.3l4.95 4.9h.01v-4.53c0-.13.1-.24.24-.24h1.48c.13 0 .24.11.24.24v8.58c0 .13-.11.23-.24.23h-.2a.37.37 0 01-.16-.06l-4.89-5.06h-.01v4.75c0 .13-.1.24-.24.24h-1.47a.25.25 0 01-.24-.24v-8.58zM52.75 191.9l1.9-3.2c.31-.5 1.08-.42 1.36-.22.16.07 3.06 2.1 5.71 2.1 1.61 0 2.78-.95 2.78-2.3 0-1.61-1.41-2.84-4.15-3.88-3.46-1.3-7.8-3.88-7.8-8.49 0-3.8 3.1-7.64 9.3-7.64 4.17 0 7.4 2.04 8.6 2.88.48.27.4.96.24 1.23l-2.05 2.96c-.28.42-1 .77-1.37.5-.36-.2-3.3-2.3-5.75-2.3-1.45 0-2.53.92-2.53 1.95 0 1.42 1.2 2.5 4.38 3.73 3.14 1.19 8.13 3.53 8.13 8.76 0 3.95-3.59 7.95-9.5 7.95-5.23 0-8.12-2.08-9.05-2.96-.4-.38-.52-.54-.2-1.08M89.55 168.6c4.02 0 7 1.2 9.73 3.58.37.3.37.77.04 1.07l-3.13 3.12a.73.73 0 01-1 0 8.45 8.45 0 00-5.44-1.96 7.82 7.82 0 00-7.88 7.91c0 4.26 3.38 7.8 7.92 7.8 1.9 0 3.95-.66 5.4-1.85.27-.23.8-.23 1.04.04l3.13 3.19c.29.27.25.77-.04 1.04a14.15 14.15 0 01-9.77 3.72c-8.04 0-14.52-6.1-14.52-13.79 0-7.68 6.48-13.86 14.52-13.86M104.73 169.67c0-.38.37-.73.77-.73h4.78c.45 0 .77.35.77.73v9.68h11.5v-9.68c0-.38.32-.73.77-.73h4.78c.4 0 .77.35.77.73v25.43c0 .39-.37.73-.77.73h-4.78a.75.75 0 01-.77-.73V185h-11.5v10.1c0 .39-.32.73-.77.73h-4.78c-.4 0-.77-.34-.77-.73v-25.43zM132.78 194.71l12.6-25.85c.11-.23.4-.42.68-.42h.4c.28 0 .56.2.68.42l12.59 25.85c.24.5-.08 1-.68 1h-4.47c-.72 0-1.04-.23-1.4-.96l-1.45-3.03h-10.94l-1.45 3.07c-.2.46-.64.92-1.45.92h-4.42c-.6 0-.93-.5-.69-1zm16.53-8.22l-3.05-6.34h-.04l-3.02 6.34h6.11zM161.1 169.5c0-.38.35-.73.76-.73h4.94c.45 0 .77.35.77.74v15.55a4.8 4.8 0 004.95 4.84c2.9 0 5.02-2.15 5.02-4.84v-15.55c0-.39.33-.74.77-.74h4.94c.4 0 .77.35.77.74v15.86c0 5.84-5.15 10.68-11.5 10.68-6.32 0-11.43-4.84-11.43-10.68V169.5zM53.53 110.9c0-.37.29-.69.68-.69h4.29a.7.7 0 01.68.68v19.12h8.56c.4 0 .69.32.69.68v3.9c0 .36-.29.68-.69.68H54.21a.68.68 0 01-.68-.68v-23.7zM70.94 134.34l11.26-24.1c.1-.2.36-.39.61-.39h.36c.26 0 .5.18.62.4l11.26 24.09c.21.46-.07.93-.61.93h-4c-.64 0-.93-.22-1.26-.9l-1.3-2.82H78.1l-1.3 2.86c-.18.43-.57.86-1.3.86h-3.95c-.54 0-.83-.47-.61-.93zm14.79-7.66l-2.74-5.9h-.03l-2.7 5.9h5.47zM97.65 110.5c0-.36.32-.65.68-.65h.9l14.36 13.75h.03v-12.7c0-.37.3-.69.69-.69h4.32a.7.7 0 01.68.68V135c0 .35-.32.64-.68.64h-.58c-.1 0-.4-.11-.47-.18l-14.21-14.21h-.04v13.35c0 .36-.29.68-.68.68h-4.28a.7.7 0 01-.69-.68l-.03-24.1zM123.32 110.9c0-.37.29-.69.65-.69h8.78a12.6 12.6 0 0112.63 12.5c0 6.94-5.69 12.56-12.63 12.56h-8.78c-.36 0-.65-.32-.65-.68v-23.7zm9.07 19.07c4.07 0 7.02-3.18 7.02-7.27 0-4.04-2.95-7.23-7.02-7.23h-3.46v14.5h3.46zM148.06 110.9c0-.37.29-.69.68-.69h14.9c.4 0 .69.32.69.68v3.9c0 .36-.3.68-.69.68h-9.97v4.44h8.2a.7.7 0 01.7.68v3.9c0 .4-.33.68-.7.68h-8.2v4.84h9.97c.4 0 .69.32.69.68v3.9c0 .36-.3.68-.69.68h-14.9a.68.68 0 01-.68-.68v-23.7zM168.9 131.87l1.7-2.97c.28-.47.97-.4 1.22-.22.14.07 2.73 1.97 5.1 1.97 1.45 0 2.5-.9 2.5-2.15 0-1.5-1.27-2.65-3.71-3.61-3.1-1.22-6.99-3.62-6.99-7.91 0-3.55 2.78-7.13 8.32-7.13 3.74 0 6.62 1.9 7.7 2.69.43.25.36.9.21 1.14l-1.83 2.76c-.25.4-.9.72-1.23.47-.32-.18-2.95-2.15-5.14-2.15-1.3 0-2.27.86-2.27 1.82 0 1.33 1.08 2.33 3.92 3.48 2.81 1.1 7.27 3.29 7.27 8.16 0 3.68-3.2 7.4-8.49 7.4-4.68 0-7.27-1.93-8.1-2.75-.36-.36-.46-.5-.18-1M64.98 140.07c2.9 0 6.1 1.16 8.45 3.1.3.24.34.63.07.9l-2.74 2.77a.76.76 0 01-.93.03 6.55 6.55 0 00-4.54-1.58 6.77 6.77 0 00-6.82 6.66c0 3.6 3.08 6.57 6.86 6.57 1 0 2.04-.13 3.08-.53v-1.91h-2.18c-.39 0-.66-.27-.66-.6v-3.26c0-.37.27-.63.66-.63h6.95c.35 0 .63.3.63.63l.03 8.87c0 .17-.14.43-.27.53 0 0-3.57 2.14-8.59 2.14-6.89 0-12.43-5.21-12.43-11.8 0-6.6 5.54-11.89 12.43-11.89M75.68 162.6l10.84-22.2a.7.7 0 01.59-.36h.34a.7.7 0 01.6.36l10.83 22.2c.2.44-.07.87-.59.87h-3.84c-.63 0-.9-.2-1.22-.83l-1.24-2.6h-9.42l-1.25 2.64c-.17.39-.55.79-1.24.79h-3.8c-.53 0-.8-.43-.6-.86zm14.23-7.05l-2.63-5.45h-.03l-2.6 5.45h5.26zM129 145.22h-4.95a.64.64 0 01-.66-.63V141c0-.32.28-.62.66-.62h15.37c.38 0 .66.3.66.63v3.6c0 .32-.28.62-.66.62h-4.95v17.62c0 .33-.31.63-.66.63h-4.15c-.35 0-.66-.3-.66-.63v-17.62zM143.05 141c0-.33.28-.63.66-.63h14.33c.38 0 .66.3.66.63v3.6c0 .32-.28.62-.66.62h-9.59v4.1h7.9c.34 0 .65.29.65.62v3.6c0 .36-.3.62-.66.62h-7.89v4.46h9.59c.38 0 .66.3.66.62v3.6c0 .33-.28.63-.66.63h-14.33a.64.64 0 01-.66-.63V141zM163.3 140.63c0-.32.31-.59.66-.59h.87l13.8 12.67h.04V141c0-.33.28-.63.66-.63h4.16c.34 0 .65.3.65.63v22.2c0 .33-.3.6-.65.6h-.56c-.1 0-.38-.1-.45-.17l-13.67-13.1h-.04v12.31c0 .33-.28.63-.66.63H164c-.35 0-.66-.3-.66-.63l-.04-22.2zM102.2 141c0-.33.28-.63.66-.63h10.35c4.15 0 7.55 3.2 7.55 7.13 0 3.03-2.11 5.47-5.13 6.63l4.75 8.38c.24.43 0 .96-.6.96h-4.6a.64.64 0 01-.55-.3l-4.6-8.74h-2.4v8.41c0 .33-.3.63-.65.63h-4.12a.64.64 0 01-.66-.63V141zm10.56 9.24a2.7 2.7 0 002.63-2.64c0-1.39-1.2-2.51-2.63-2.51h-5.12v5.15h5.12z"/>
                </g>
                </g>
            </svg>
            <div class="Menu__grid">
                <div class="Menu__main" data-app="menu-main">
                    <nav class="nav">
                        <ul>
                            <li>
                                <span class="nav__item  is-active is-big">Veranstaltungen</span>
                                <ul class="nav__sub-nav">
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                </ul>
                            </li>
                            <li>
                                <span class="nav__item is-big">LGS erleben</span>
                                <ul class="nav__sub-nav">
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                </ul>
                            </li>
                            <li>
                                <span class="nav__item">Besuch planen</span>
                                <ul class="nav__sub-nav">
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                </ul>
                            </li>
                            <li>
                                <span class="nav__item">Tipps für ...</span>
                                <ul class="nav__sub-nav">
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                </ul>
                            </li>
                            <li>
                                <span class="nav__item">News</span>
                                <ul class="nav__sub-nav">
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                </div>
                <div class="Menu__menu__icons">
                    <div data-app="menu-full"></div>
                    <div data-app="menu-wishlist">
                        <script type="text/json">
                            {
                                "wishlistUrl": "#0",
                                "dataUrl": "http://localhost:8888/https://www.ueberlingen2020.de/data/events-wishlist.json"
                            }
                        </script>
                    </div>
                </div>
                <div class="Menu__countdown">
                    <div data-app="leaf-counter"></div>
                </div>
                <div class="Menu__action">
                    <a href="#0" class="Menu__action__cta"><img src="http://placehold.it/24" /><span>Ticket kaufen</span></a>
                    <div class="Menu__action__icons">
                        <div class="Menu__action__text">23. April – 18. Oktober 2020</div>
                    </div>
                </div>
            </div>
            <div class="Menu__teasercard">
                <div class="teasercard">
                    <div class="teasercard__title">Teaser</div>
                    <div class="teasercard__date">12.-13. April</div>
                    <div class="teasercard__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Totam accusamus velit tempore, voluptatem nesciunt atque optio. Voluptatem et rerum veniam.</div>
                    <a class="teasercard__link" href="#0">Weiterlesen</a>
                </div>
            </div>
        </div>
    </div>
</header>

Styleguide sections.menu.1
*/
.Menu__container {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  padding: 0; }

.Menu__teasercard {
  margin-top: 20px; }
  @media (min-width: 40em) {
    .Menu__teasercard {
      margin-top: 0;
      position: absolute;
      right: 40px;
      bottom: -180px; } }

.Menu {
  position: relative;
  color: #fff;
  z-index: 2; }
  .Menu + .Menu__banner {
    margin-top: -240px; }
  .Menu:after {
    content: '';
    background-image: url(data:image/svg+xml;base64,phn2zyb4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmciihdpzhropsixndqwiibozwlnahq9ije5mcigdmlld0jved0imcawide0ndagmtkwij4kica8zybmawxspsjub25liibmawxslxj1bgu9imv2zw5vzgqipgogicagphbhdgggzmlsbd0iizgxqtlenyigzd0ittagodnjodiuodmgny43idezos45miayns40ide3ms4ynya1my4wosazms4znsayny42ocaxndugmjcunjggmzqwljk0idagmti0lje5ltizlji2idixnc43oc0ymy4yniaynzeunzggmca4ns41idm0ljg4idg3ljezltuuntkgmtgwljeyidmyljyyidkyljk4idm4ljigndi4ljmzidezljm0idq0my4zidezljm0sde0ndfmmtq0mc0yidagmhy4m3oilz4kicagidxwyxroigzpbgw9iim2mmi0odmiigq9ik0widbomtq0mhyxntcuntdjlteymc4xosazljyyltixnc40mia1ljqzlti4mi43iduundmtmtayljq0idatmte2ljc4lte4ljq3lti5mi45ni00ms4yoc0xnzyumtgtmjiuoc0zmzuumtmgms42mi00njuumdmgmc0xmjkuotetms42mi0xnjiuns0ymi44lti1oc4xmy0ymi44qzc3ljqzidk4ljkxidmwljm4idg4ljygmca2ofyweiivpgogidwvzz4kpc9zdmc+cg==);
    background-repeat: no-repeat;
    background-position: bottom center;
    display: block;
    height: 80px;
    opacity: 0.89;
    z-index: inherit; }

.Menu--bg {
  background-color: #90b3db; }

.Menu__wrapper {
  background-color: rgba(97, 180, 131, 0.89);
  padding: 20px 20px 0px 20px;
  margin: 0 auto;
  position: relative; }
  .Menu__wrapper + .Menu__teasercard {
    padding-bottom: 20px; }

.Menu__grid {
  margin-left: -20px;
  display: block;
  font-size: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start; }
  .Menu__grid > * {
    padding-left: 20px;
    vertical-align: center;
    display: inline-block;
    font-size: 16px; }
  @media (min-width: 64em) {
    .Menu__grid {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start; } }

.Menu__logo {
  display: block;
  position: absolute;
  width: 110px;
  top: -105px;
  left: 0;
  z-index: 1; }
  @media (min-width: 40em) {
    .Menu__logo {
      top: -45px;
      width: 170px; } }
  @media (min-width: 64em) {
    .Menu__logo {
      top: auto;
      left: 0;
      width: 239px; } }

.Menu__main {
  display: none;
  position: relative; }
  @media (min-width: 64em) {
    .Menu__main {
      display: inline-block;
      width: 35.71429%;
      position: relative;
      right: auto;
      left: 17.85714%; } }

.Menu__menu__icons {
  height: 40px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 5px;
  width: 35.71429%;
  position: relative; }
  .Menu__menu__icons > * + * {
    margin-left: 20px; }
  @media (min-width: 40em) {
    .Menu__menu__icons {
      width: 10.71429%;
      position: relative;
      right: auto;
      left: 7.14286%; } }
  @media (min-width: 64em) {
    .Menu__menu__icons {
      margin-top: 0;
      width: 10.71429%;
      position: relative;
      right: auto;
      left: 17.85714%; } }

.Menu__countdown {
  display: none;
  z-index: 1; }
  @media (min-width: 40em) {
    .Menu__countdown {
      display: block;
      width: 7.14286%;
      position: relative;
      left: auto;
      right: 28.57143%; } }
  @media (min-width: 64em) {
    .Menu__countdown {
      width: 10.71429%;
      position: relative;
      right: auto;
      left: 21.42857%; } }
  @media (min-width: 90em) {
    .Menu__countdown {
      width: 7.14286%;
      position: relative;
      right: auto;
      left: 21.42857%; } }

.Menu__action {
  margin-bottom: 20px;
  text-align: center; }
  @media (min-width: 40em) {
    .Menu__action {
      text-align: right;
      width: 25%;
      position: relative; } }
  @media (min-width: 64em) {
    .Menu__action {
      width: 17.85714%;
      position: relative;
      right: auto;
      left: 25%; } }
  @media (min-width: 90em) {
    .Menu__action {
      width: 17.85714%;
      position: relative;
      right: auto;
      left: 28.57143%; } }

.Menu__wishlist {
  position: relative; }

.Menu__wishlist__toggle {
  position: relative;
  display: inline-block;
  color: #ffffff;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s; }
  .Menu__wishlist__toggle:hover {
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1); }

.Menu__wishlist__toggle__icon {
  width: 40px;
  height: 40px;
  color: currentColor;
  margin-top: -2px; }
  .Menu__wishlist.isActive .Menu__wishlist__toggle__icon {
    color: #ce115d; }

.Menu__wishlist__toggle__count {
  margin: 0;
  font-family: sans-serif;
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 400;
  color: "inherit";
  line-height: 1.15;
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -70%);
      -ms-transform: translate(-50%, -70%);
          transform: translate(-50%, -70%); }
  @media (min-width: 40em) {
    .Menu__wishlist__toggle__count {
      font-size: 14px; } }
  .fl .Menu__wishlist__toggle__count {
    font-family: "Noto Sans", sans-serif; }

.Menu__wishlist__backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3; }

.Menu__wishlist__flyout {
  min-width: 280px;
  max-width: 100vw;
  background: #ffffff;
  position: absolute;
  z-index: 3;
  top: 120%;
  right: -20px;
  text-align: center;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2); }
  @media (min-width: 40em) {
    .Menu__wishlist__flyout {
      min-width: 310px;
      right: 0; } }

.Menu__wishlist__flyout-message {
  margin: 0;
  font-family: sans-serif;
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 400;
  color: #4a4a4a;
  line-height: 1.15;
  font-weight: 700;
  padding: 20px 0; }
  @media (min-width: 40em) {
    .Menu__wishlist__flyout-message {
      font-size: 14px; } }
  .fl .Menu__wishlist__flyout-message {
    font-family: "Noto Sans", sans-serif; }

.Menu__wishlist__flyout-items {
  max-height: 280px;
  padding: 20px 10px;
  overflow: auto; }
  .Menu__wishlist__flyout-items > * + * {
    margin-top: 10px; }

.Menu__wishlist__flyout-btn {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  -webkit-box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
          box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
  background: #afcc56;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  @media (min-width: 40em) {
    .Menu__wishlist__flyout-btn {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .Menu__wishlist__flyout-btn svg,
  .Menu__wishlist__flyout-btn img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .Menu__wishlist__flyout-btn * + svg,
  .Menu__wishlist__flyout-btn * + img {
    margin-right: 0;
    margin-left: 15px; }
  .Menu__wishlist__flyout-btn:hover {
    cursor: pointer;
    color: #ffffff; }
  .Menu__wishlist__flyout-btn:hover {
    background-color: #88a431; }
  .Menu__wishlist__flyout-btn:disabled, .Menu__wishlist__flyout-btn.is-disabled {
    pointer-events: none;
    opacity: 0.25; }

.Menu__toggle {
  display: inline-block;
  position: relative;
  z-index: 4;
  margin-bottom: 94px; }
  @media (min-width: 64em) {
    .Menu__toggle {
      margin-bottom: 54px; } }

.Menu__toggle__icon {
  width: 27px;
  height: 25px;
  display: inline-block;
  text-align: right;
  font-size: 0;
  cursor: pointer; }

.Menu__toggle__icon span {
  width: 100%;
  height: 3px;
  display: inline-block;
  position: relative;
  background: currentColor;
  -webkit-transform-origin: right;
      -ms-transform-origin: right;
          transform-origin: right;
  -webkit-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out; }
  .Menu__toggle__icon span:nth-child(1) {
    width: 60%; }
  .Menu__toggle:hover .Menu__toggle__icon span {
    width: 100%; }
  .Menu__toggle__icon span + span {
    margin-top: 5px; }
  .Menu__toggle.is-open .Menu__toggle__icon span {
    opacity: 0;
    width: 1px; }
    .Menu__toggle.is-open .Menu__toggle__icon span:nth-child(1) {
      opacity: 1;
      width: 100%;
      -webkit-transform: rotate(-45deg) translate(2.5px, -2.5px);
          -ms-transform: rotate(-45deg) translate(2.5px, -2.5px);
              transform: rotate(-45deg) translate(2.5px, -2.5px); }
    .Menu__toggle.is-open .Menu__toggle__icon span:nth-child(3) {
      opacity: 1;
      width: 100%;
      -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
              transform: rotate(45deg); }

.Menu__toggle__label {
  margin-top: 5px;
  display: block;
  position: absolute;
  right: 0;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: bold; }

.Menu__full {
  padding: 80px 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  z-index: 3;
  background: #ce115d; }

.Menu__action__cta {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  -webkit-box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
          box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
  background: #ce115d;
  padding: 6px 7px;
  -ms-flex-direction: column;
      flex-direction: column; }
  @media (min-width: 40em) {
    .Menu__action__cta {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .Menu__action__cta svg,
  .Menu__action__cta img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .Menu__action__cta * + svg,
  .Menu__action__cta * + img {
    margin-right: 0;
    margin-left: 15px; }
  .Menu__action__cta:hover {
    cursor: pointer;
    color: #ffffff; }
  .Menu__action__cta:hover {
    background-color: #870b3d; }
  .Menu__action__cta:disabled, .Menu__action__cta.is-disabled {
    pointer-events: none;
    opacity: 0.25; }
  .Menu__action__cta span {
    font-size: 9px; }
    @media (min-width: 40em) {
      .Menu__action__cta span {
        font-size: 12px; } }
  .Menu__action__cta img,
  .Menu__action__cta svg {
    margin-right: 0; }
  @media (min-width: 40em) {
    .Menu__action__cta {
      margin-bottom: 20px;
      padding: 2px 15px;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; }
      .Menu__action__cta img,
      .Menu__action__cta svg {
        margin-right: 15px;
        font-size: 18px; } }

.Menu__action__text {
  display: none; }
  @media (min-width: 64em) {
    .Menu__action__text {
      display: block; } }

/*
Menu mit Bild

Markup:
<script>
window.__menu = {
    main: [
        {
            label: "Aktuelles",
            link: "",
            subnav: "subnav-01",
            isActive: true,
            isBig: true
        },
        {
            label: "Konzept",
            link: "",
            subnav: "subnav-02",
            isActive: false,
            isBig: true
        },
        {
            label: "Sponsoren",
            link: "#0",
            subnav: "",
            isActive: false
        },
        {
            label: "Partner",
            link: "#0",
            subnav: "",
            isActive: false
        },
        {
            label: "Vorfreude",
            link: "#0",
            subnav: "",
            isActive: false
        },
        {
            label: "Presse",
            link: "",
            subnav: "subnav-06",
            isActive: false
        }
    ],
    subnavs: {
        "subnav-01": {
            items: [
                {
                    label: "News",
                    link: "/news",
                    icon: "<img src='http://placehold.it/24' alt=''>",
                    isActive: false                    
                },
                {
                    label: "Termine",
                    link: "/termine",
                    icon: "<img src='http://placehold.it/24' alt=''>",
                    isActive: true                    
                },
                {
                    label: "Baustellenreport",
                    link: "/report",
                    icon: "<img src='http://placehold.it/24' alt=''>",
                    isActive: false                    
                },
                {
                    label: "Interviews",
                    link: "/interviews",
                    icon: "<img src='http://placehold.it/24' alt=''>",
                    isActive: false                    
                },
                {
                    label: "Bildergalerie",
                    link: "/galerie",
                    icon: "<img src='http://placehold.it/24' alt=''>",
                    isActive: false                    
                }
            ]
        },
        "subnav-02": {
            items: [
                {
                    label: "Lorem",
                    link: "/lorem",
                    icon: "<img src='http://placehold.it/24' alt=''>",
                    isActive: false                    
                },
                {
                    label: "Ipsum",
                    link: "/ipsum",
                    icon: "<img src='http://placehold.it/24' alt=''>",
                    isActive: false                    
                }
            ]
        }
    },
    socials: [
        {
            icon: "<img src='http://placehold.it/24' alt=''>",
            link: "#0"
        },
        {
            icon: "<img src='http://placehold.it/24' alt=''>",
            link: "#0"
        },
        {
            icon: "<img src='http://placehold.it/24' alt=''>",
            link: "#0"
        },
        {
            icon: "<img src='http://placehold.it/24' alt=''>",
            link: "#0"
        }
    ],
    additional: [
        {
            label: "Lorem",
            link: "#lorem",
            isActive: false                    
        },
        {
            label: "Ipsum",
            link: "#ipsum",
            isActive: false                    
        },
        {
            label: "Dolor",
            link: "#dolor",
            isActive: false                    
        }
    ]
}
</script>
<header class="Menu__container">
    <section class="Menu">
        <div class="Menu__wrapper">
            <svg class="Menu__logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="239" height="322" viewBox="0 0 239 322">
                <defs>
                <path id="a" d="M.77.13h10.49v11.5H.77z"/>
                <path id="c" d="M.14.65h13.71v23.68H.14z"/>
                <path id="e" d="M0 .42h66.17v27.49H0z"/>
                <path id="g" d="M.52.51H66.7V28H.52z"/>
                </defs>
                <g fill="none" fill-rule="evenodd">
                <path fill="#008ACA" d="M50.27 265.32l-3.04-.05c-5.76-.03-16.3 3-18.89 13.8-1.72 7.14.22 13.64 1.73 17.22l20.2-30.97z"/>
                <path fill="#80C1E7" d="M30.07 296.3l.11-.01c3.9-.09 10.57-.97 16.37-5.38 8.84-6.73 7.36-17.58 5-22.83l-1.23-2.65-.05-.1-20.2 30.96z"/>
                <g transform="translate(2 287.93)">
                    <mask id="b" fill="#fff">
                    <use xlink:href="#a"/>
                    </mask>
                    <path fill="#008ACA" d="M11.26.44L10.04.23C7.72-.15 3.28.4 1.54 4.58a11.5 11.5 0 00-.4 7.05L11.26.44z" mask="url(#b)"/>
                </g>
                <path fill="#80C1E7" d="M3.14 299.57h.05c1.58.22 4.32.29 6.94-1.12 3.99-2.15 4.09-6.62 3.47-8.88l-.32-1.15-.02-.04-10.12 11.19z"/>
                <path fill="#008ACA" d="M204.77 66.7l1.22.22c2.32.4 6.76-.12 8.54-4.28 1.17-2.76.83-5.5.46-7.05l-10.22 11.1z"/>
                <path fill="#80C1E7" d="M215 55.59l-.05-.01a11.54 11.54 0 00-6.95 1.07c-4.01 2.11-4.15 6.58-3.56 8.85l.32 1.15.01.04L215 55.6z"/>
                <path fill="#E18398" d="M35.56 66.34l-1.67.25c-3.15.43-9.16-.5-11.34-6.24a15.6 15.6 0 01-.28-9.58l13.29 15.57zM132.14 275.95l1.52.74c2.84 1.42 7.28 5.56 5.86 11.53a15.6 15.6 0 01-5.17 8.07l-2.21-20.34z"/>
                <path fill="#D0185D" d="M132.1 276l-1.28 1c-2.48 2-5.93 6.98-3.26 12.51a15.6 15.6 0 006.73 6.75l.05.03-2.2-20.34-.05.04zM35.58 66.29l.49-1.55c.92-3.05.96-9.1-4.37-12.18a15.64 15.64 0 00-9.36-1.8l-.07.01 13.29 15.57.02-.05z"/>
                <path fill="#E18398" d="M195.15 248.58l-.84 1.94c-1.55 3.69-2.37 11.25 3.89 15.77 4.14 2.99 8.84 3.46 11.54 3.44l-14.6-21.15z"/>
                <path fill="#D0185D" d="M195.22 248.58l2.04-.1c4-.12 11.38 1.8 13.37 9.25 1.32 4.89.12 9.4-.86 11.93l-.02.07-14.6-21.15h.07z"/>
                <path fill="#E18398" d="M215.47 252.64l-.28 1.2c-.51 2.26-.22 6.68 3.82 8.64 2.68 1.3 5.42 1.1 6.96.8l-10.5-10.64z"/>
                <path fill="#D0185D" d="M215.52 252.63l1.15-.25c2.28-.48 6.7-.13 8.6 3.94a11.39 11.39 0 01.72 6.92l-.01.05-10.5-10.65h.04z"/>
                <path fill="#E18398" d="M201.64 23.98l2.11-.18c3.98-.39 11.05-3.24 12.07-10.89.67-5.06-1.13-9.41-2.43-11.78l-11.75 22.85z"/>
                <path fill="#D0185D" d="M201.6 23.91l-1.04-1.75c-2.01-3.45-3.8-10.85 1.82-16.14 3.7-3.46 8.24-4.55 10.93-4.89h.08l-11.75 22.85-.04-.07z"/>
                <path fill="#CEDF9A" d="M194.18 15.29c2.31 1.05 4.75-1.15 6.8-3.53 3.25-3.75 2.11-8.23.77-10.37-.1-.2-.77-1.1-.77-1.1l-6.84 14.98.03.01h.01"/>
                <path fill="#94C01F" d="M199.63.43c-2.5.39-6.62 2.47-7.33 7.38-.45 3.12-.51 6.4 1.8 7.44l.04.02L200.98.28s-1.12.1-1.35.15"/>
                <path fill="#CEDF9A" d="M184.84 297.97c-3.58 1.6-3.53 6.65-2.88 11.46 1.04 7.6 7.38 10.87 11.23 11.5.35.09 2.08.26 2.08.26l-10.37-23.25-.05.03h-.01"/>
                <g transform="translate(184.76 296.86)">
                    <mask id="d" fill="#fff">
                    <use xlink:href="#c"/>
                    </mask>
                    <path fill="#94C01F" d="M11.71 22.62c2.1-3.28 3.92-10.18-1.05-16.03C7.52 2.9 3.8-.54.2 1.06l-.06.03 10.37 23.24s1.03-1.4 1.2-1.71" mask="url(#d)"/>
                </g>
                <path fill="#CEDF9A" d="M47.63 17.71c2.06-1.4 1.46-4.57.5-7.51-1.51-4.65-5.86-5.99-8.35-5.95-.23 0-1.33.08-1.33.08l9.14 13.4.03-.01v-.01"/>
                <path fill="#94C01F" d="M37.89 5.54c-.95 2.3-1.3 6.83 2.47 9.94 2.4 1.96 5.13 3.69 7.2 2.28l.03-.02-9.14-13.4s-.5.98-.56 1.2"/>
                <g>
                    <path fill="#009640" d="M23.55 92.58l-.02-.01v.02h-.02l.02.01s23.68 39.52 48.83 55.49c17.1 10.85 47.17 5.44 47.18 5.43l-96-60.94zM180.24 57.46l.01-.02.01.02h.02v.01s-4.5 45.83-20.4 71c-10.8 17.1-40.31 25.03-40.32 25.03l60.68-96.04z"/>
                    <path fill="#009640" d="M180.24 57.46l.01-.02h-.01l-.01-.02-.01.02s-39.5 23.8-55.4 48.96c-10.81 17.1-5.26 47.09-5.26 47.1l60.68-96.04zM215.56 214.46l.02.01v-.02h.02l-.02-.02s-23.68-39.51-48.84-55.48c-17.1-10.86-47.17-5.44-47.17-5.43l96 60.94z"/>
                    <path fill="#009640" d="M215.56 214.46l.02.01h-.02v.03l-.01-.01s-45.91-4.67-71.06-20.64c-17.1-10.85-24.92-40.33-24.92-40.33l96 60.94zM58.36 249.23l-.01.01h.01l.01.02.01-.02s39.6-23.63 55.6-48.73c10.88-17.06 5.45-47.07 5.45-47.07l-61.07 95.79z"/>
                    <path fill="#009640" d="M58.36 249.23l-.01.01-.01-.01h-.02v-.02s4.68-45.8 20.69-70.9c10.88-17.07 40.42-24.87 40.42-24.87l-61.07 95.79z"/>
                    <path fill="#009640" d="M23.56 92.6l-.01-.02h.02v-.02h.01s45.9 4.67 71.06 20.64c17.1 10.85 24.92 40.33 24.92 40.34l-96-60.95z"/>
                    <path fill="#008ACA" d="M116.73 55.86c-7.64-6.43-15.4-7.73-23.04-17.25l14.85 66.03s21.9-37.24 8.19-48.78"/>
                    <path fill="#5CB5E1" d="M80.26 64.03c4.15-9.07 10.61-13.55 13.43-25.42l14.87 66.03h-.01S72.8 80.3 80.25 64.02"/>
                    <g transform="translate(0 152.38)">
                    <mask id="f" fill="#fff">
                        <use xlink:href="#e"/>
                    </mask>
                    <path fill="#008ACA" d="M17.28 4.93C10.85 12.55 9.54 20.3 0 27.9l66.17-14.8v-.02S28.84-8.76 17.27 4.93" mask="url(#f)"/>
                    </g>
                    <path fill="#5CB5E1" d="M25.47 193.7C16.4 189.56 11.9 183.1 0 180.3l66.17-14.84v.01s-24.38 35.67-40.7 28.23"/>
                    <path fill="#008ACA" d="M122.7 252.67c7.63 6.42 15.4 7.72 23.03 17.25l-14.84-66.04-.01.01s-21.9 37.24-8.18 48.78"/>
                    <path fill="#5CB5E1" d="M159.17 244.5c-4.15 9.06-10.61 13.55-13.44 25.41l-14.86-66.02h.01s35.75 24.33 28.29 40.6"/>
                    <g transform="translate(171.53 126.42)">
                    <mask id="h" fill="#fff">
                        <use xlink:href="#g"/>
                    </mask>
                    <path fill="#008ACA" d="M49.41 23.5C55.85 15.87 57.16 8.13 66.7.5L.52 15.32l.02.01s37.3 21.85 48.87 8.17" mask="url(#h)"/>
                    </g>
                    <path fill="#5CB5E1" d="M212.75 113.52c9.09 4.14 13.58 10.6 25.47 13.4l-66.17 14.84.01-.01s24.38-35.67 40.7-28.23"/>
                    <path fill="#D0185D" d="M175.69 171.3l1.06 3.4c2.08 6.39 9.35 16.95 22.31 15.85 8.58-.73 15.1-5.27 18.53-8.26l-41.9-11z"/>
                    <path fill="#E28498" d="M175.78 171.2l2.5-2.34c4.97-4.55 16.5-10.18 27.25-2.86 7.05 4.8 10.49 11.86 12.02 16.16l.05.13-41.91-11 .09-.08zM163 113.92v-.01l-.43-3.53c-.76-6.68 1.49-19.3 13.75-23.64 8.11-2.87 15.93-1.42 20.3-.11L163 113.92z"/>
                    <path fill="#D0185D" d="M163.12 113.96l3.26 1.1c6.4 2.1 19.23 2.47 26-8.62 4.43-7.28 4.63-15.13 4.25-19.68l-.01-.13L163 113.92l.12.04z"/>
                    <path fill="#E28498" d="M75.45 193.11l.51 3.52c.9 6.67-1.1 19.32-13.26 23.92-8.05 3.04-15.9 1.75-20.29.54l33.04-27.98z"/>
                    <path fill="#D0185D" d="M75.33 193.07l-3.28-1.03c-6.44-1.97-19.28-2.08-25.8 9.15-4.29 7.37-4.33 15.22-3.86 19.76l.02.13 33.04-27.97-.12-.04z"/>
                    <path fill="#E28498" d="M101.76 210.24l2.44 2.59c4.57 4.95 10.22 16.45 2.9 27.18-4.85 7.1-12.01 10.54-16.3 12.05h-.02l10.98-41.82z"/>
                    <path fill="#D0185D" d="M101.64 210.27l-3.28 1.03c-6.4 2.08-16.99 9.34-15.87 22.28.73 8.48 5.2 14.94 8.2 18.38l.1.1 10.97-41.83-.12.04z"/>
                    <path fill="#E28498" d="M52.78 76.3l-1.17 3.36c-2.15 6.37-2.62 19.17 8.45 26 7.32 4.51 15.27 4.74 19.81 4.38L52.78 76.3z"/>
                    <path fill="#D0185D" d="M52.9 76.28l3.42-.4c6.7-.7 19.33 1.64 23.6 13.9 2.79 8.05 1.33 15.76 0 20.13l-.04.13-27.1-33.74.13-.02zM159.17 197.35l-1.1 3.39c-1.99 6.42-2.16 19.23 9.07 25.8 7.42 4.34 15.37 4.38 19.9 3.91h.01l-27.88-33.1z"/>
                    <path fill="#E28498" d="M159.3 197.33l3.4-.47c6.68-.86 19.36 1.17 23.91 13.34 2.98 7.98 1.7 15.73.48 20.12l-.04.13-27.88-33.1.13-.02z"/>
                    <path fill="#D0185D" d="M146.77 55.49l2.53 2.5c4.73 4.8 10.77 16.1 3.81 27.07-4.6 7.27-11.64 10.94-15.89 12.6l9.55-42.17z"/>
                    <path fill="#E28498" d="M146.65 55.53l-3.24 1.14c-6.34 2.3-16.66 9.9-15.11 22.8 1.02 8.45 5.71 14.76 8.83 18.1l.09.1 9.55-42.18-.12.04z"/>
                    <path fill="#D0185D" d="M62.92 135.88l-1.12-3.37c-2.19-6.37-9.63-16.8-22.57-15.5-8.57.88-15.01 5.52-18.4 8.57l42.09 10.3z"/>
                    <path fill="#E28498" d="M62.83 135.97l-2.47 2.39c-4.89 4.63-16.32 10.45-27.2 3.31-7.12-4.68-10.68-11.69-12.28-15.96l-.05-.13 42.09 10.3-.1.1z"/>
                    <path fill="#94C01F" d="M121.99 146.13c5.12-13.52 21.71-34.2 50.17-32.4 18.05 1.13 36.54 4.64 39.72 18.85v.02l.05.22-92.38 20.7s1.88-6.18 2.44-7.39"/>
                    <path fill="#94C01F" d="M124.92 159.14c10.42 10.04 34.27 21.66 59.23 7.9 15.83-8.72 31.05-19.79 27.83-33.98v-.03l-.05-.21-92.38 20.7s4.35 4.77 5.37 5.62"/>
                    <path fill="#94C01F" d="M126.95 155.95c13.55 5.1 34.27 21.66 32.47 50.06-1.14 18-4.65 36.46-18.89 39.63h-.02l-.22.05-20.74-92.18s6.2 1.88 7.4 2.44M113.91 158.86c-10.06 10.4-21.7 34.2-7.92 59.12 8.75 15.79 19.83 30.98 34.06 27.77h.02l.22-.06-20.74-92.18s-4.79 4.34-5.64 5.35"/>
                    <path fill="#94C01F" d="M117.12 160.89c-5.13 13.52-21.71 34.2-50.17 32.4-18.05-1.13-36.54-4.64-39.72-18.84v-.03l-.05-.21 92.37-20.7s-1.87 6.18-2.43 7.38"/>
                    <path fill="#94C01F" d="M114.2 147.89c-10.43-10.04-34.28-21.66-59.25-7.9-15.82 8.72-31.04 19.78-27.83 33.97l.01.03.05.22 92.37-20.7s-4.34-4.78-5.36-5.62"/>
                    <path fill="#94C01F" d="M112.16 151.08c-13.55-5.11-34.27-21.67-32.47-50.06C80.82 83 84.34 64.55 98.58 61.39l.02-.01.22-.05 20.73 92.18s-6.18-1.88-7.39-2.43M125.2 148.16c10.06-10.4 21.7-34.2 7.91-59.11-8.74-15.8-19.83-30.98-34.05-27.77h-.03l-.21.05 20.73 92.18s4.8-4.33 5.65-5.35"/>
                    <path fill="#006B2D" d="M189.31 168.39c11.64 22.95 3.73 48.77 3.1 50.74a21.52 21.52 0 00-1.63-5.86c-1.93-4.2-7.18-11.09-9.85-16.54-1.61-3.3-3.02-5.92-3.88-7.5-2.48-13.99-22.4-16.97-32.87-22.34-10.51-5.41-8.42-16.67-8.42-16.67 14.09-5.01 41.44-5.71 53.55 18.17"/>
                    <path fill="#009640" d="M190.78 213.27a21.5 21.5 0 011.62 5.86l-.04.13c-2.9-9.59-19.46-6.73-46.33-13.96-26.9-7.22-21.21-47.15-21.21-47.15s4.81 13.93 28.61 18.06c18.05 3.14 23.68 13.32 23.68 13.32l-.06-.3c.86 1.58 2.27 4.2 3.88 7.5 2.67 5.46 7.92 12.35 9.85 16.54"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M192.36 218.65c-.08-1.8-1.17-3.38-2.22-4.85l-7.38-10.31c-6.02-8.44-12.66-17.34-22.44-20.78-4.39-1.54-9.1-1.86-13.68-2.62-2.34-.4-4.7-.92-6.73-2.15a21.15 21.15 0 01-4.26-3.72c-4.05-4.27-8.08-8.76-10.22-14.24"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M192.52 218.64c-1.03-1.44-2.06-3.2-3.44-4.34-1.12-.9-2.2-1.62-3.22-2.68-2.6-2.71-5.28-5.35-8.12-7.8-5.6-4.8-11.93-8.94-19.1-10.95-3.02-.84-6.15-1.3-9.16-2.22-8.64-2.63-15.8-8.88-21.15-16.12-1.4-1.9-2.72-3.91-3.3-6.2-.24-.89-.35-1.81-.34-2.74"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M185.55 212.64c-7.4-6.6-17.24-9.65-26.76-12.47-2.95-.87-5.94-1.75-8.64-3.24a36.18 36.18 0 01-5.4-3.8 115.7 115.7 0 01-17.77-18.17c-1.01-1.29-2.03-2.67-2.28-4.3"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M180 211.36c-1.98-1.24-4.13-2.22-6.37-2.93-1.58-.5-3.2-.85-4.82-1.25a76.77 76.77 0 01-43.85-30.36l.03.38"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M164.74 209.09c-2.78-2.76-7.29-2.58-10.84-4.23-1.86-.87-3.44-2.25-5.18-3.34-2.23-1.4-4.72-2.34-6.93-3.76a34.62 34.62 0 01-4.84-3.96c-3.7-3.45-7.28-7.03-10.75-10.72M150.69 206.34A61.95 61.95 0 01128 188.31"/>
                    <path fill="#006B2D" d="M134.55 83.86c23-11.62 48.87-3.72 50.85-3.09a21.6 21.6 0 00-5.87 1.62c-4.2 1.93-11.1 7.16-16.57 9.83-3.3 1.61-5.94 3.01-7.52 3.87-14.02 2.48-17 22.35-22.39 32.8-5.42 10.5-16.7 8.4-16.7 8.4-5.03-14.05-5.73-41.35 18.2-53.43"/>
                    <path fill="#009640" d="M179.53 82.4a21.58 21.58 0 015.87-1.63l.14.05c-9.62 2.89-6.75 19.41-14 46.23-7.23 26.84-47.24 21.16-47.24 21.16s13.95-4.8 18.1-28.55c3.14-18.01 13.34-23.63 13.34-23.63l-.3.06a193.5 193.5 0 017.52-3.87c5.46-2.67 12.37-7.9 16.57-9.83"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M184.92 80.81c-1.8.09-3.39 1.18-4.86 2.22l-10.34 7.36c-8.45 6.01-17.37 12.63-20.82 22.4-1.54 4.37-1.86 9.07-2.63 13.64-.39 2.34-.92 4.7-2.15 6.73a21.16 21.16 0 01-3.73 4.24c-4.27 4.04-8.78 8.06-14.26 10.2"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M184.91 80.66c-1.44 1.02-3.21 2.05-4.35 3.43-.9 1.12-1.62 2.2-2.69 3.21a117.3 117.3 0 00-7.8 8.1c-4.83 5.59-8.97 11.9-10.98 19.06-.85 3.02-1.31 6.14-2.23 9.15-2.63 8.61-8.9 15.75-16.16 21.1-1.9 1.4-3.92 2.71-6.2 3.3-.9.23-1.82.34-2.75.33"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M178.9 87.6c-6.63 7.4-9.68 17.21-12.5 26.71-.87 2.95-1.76 5.93-3.24 8.62a36.1 36.1 0 01-3.82 5.39 115.74 115.74 0 01-18.2 17.74c-1.3 1-2.68 2.02-4.3 2.27"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M177.62 93.14a27.78 27.78 0 00-2.94 6.37c-.5 1.58-.85 3.2-1.26 4.8A76.61 76.61 0 01143 148.07l.38-.03"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M175.34 108.38c-2.77 2.77-2.58 7.27-4.24 10.8-.87 1.87-2.25 3.44-3.35 5.18-1.4 2.22-2.34 4.7-3.76 6.92a34.53 34.53 0 01-3.97 4.82 228.9 228.9 0 01-10.75 10.73M172.59 122.4a61.87 61.87 0 01-18.07 22.63"/>
                    <path fill="#006B2D" d="M49.86 138.5c-11.64-22.95-3.73-48.77-3.1-50.74.26 1.8.75 3.94 1.63 5.86 1.93 4.19 7.17 11.08 9.85 16.53 1.61 3.3 3.01 5.93 3.87 7.5 2.49 14 22.4 16.97 32.88 22.34 10.51 5.41 8.41 16.67 8.41 16.67-14.08 5.02-41.43 5.72-53.54-18.16"/>
                    <path fill="#009640" d="M48.39 93.62a21.5 21.5 0 01-1.63-5.86l.05-.14c2.9 9.6 19.46 6.73 46.33 13.96 26.9 7.22 21.21 47.15 21.21 47.15s-4.81-13.92-28.62-18.06c-18.05-3.13-23.68-13.31-23.68-13.31l.06.29c-.86-1.57-2.26-4.2-3.87-7.5-2.68-5.45-7.92-12.34-9.85-16.53"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M46.8 88.23c.09 1.8 1.18 3.39 2.23 4.86l7.37 10.31c6.03 8.43 12.66 17.33 22.45 20.78 4.38 1.54 9.09 1.85 13.67 2.62 2.34.39 4.71.92 6.74 2.14 1.62.98 2.95 2.36 4.26 3.73 4.05 4.26 8.08 8.76 10.22 14.23"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M46.65 88.24c1.03 1.45 2.06 3.21 3.44 4.34 1.12.91 2.2 1.62 3.22 2.69 2.6 2.7 5.27 5.34 8.12 7.8 5.6 4.8 11.92 8.93 19.1 10.94 3.02.85 6.15 1.31 9.16 2.23 8.63 2.62 15.79 8.87 21.15 16.12 1.4 1.89 2.72 3.9 3.3 6.19.23.89.35 1.82.34 2.74"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M53.62 94.24c7.4 6.61 17.23 9.66 26.76 12.47 2.95.88 5.94 1.76 8.64 3.24a36.08 36.08 0 015.39 3.81 115.66 115.66 0 0117.78 18.16c1.01 1.3 2.03 2.68 2.27 4.3"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M59.16 95.52c2 1.24 4.14 2.23 6.38 2.93 1.58.5 3.2.85 4.82 1.26a76.77 76.77 0 0143.85 30.36l-.03-.39"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M74.43 97.8c2.78 2.76 7.28 2.57 10.83 4.23 1.87.87 3.45 2.24 5.19 3.34 2.22 1.4 4.72 2.33 6.93 3.75a34.62 34.62 0 014.84 3.96c3.7 3.46 7.28 7.04 10.74 10.73M88.48 100.54a61.95 61.95 0 0122.68 18.03"/>
                    <path fill="#006B2D" d="M104.76 223.09c-23 11.61-48.88 3.71-50.86 3.08 1.82-.25 3.96-.74 5.88-1.62 4.2-1.93 11.1-7.16 16.57-9.83 3.3-1.6 5.94-3 7.51-3.86 14.02-2.48 17-22.36 22.4-32.81 5.42-10.49 16.7-8.4 16.7-8.4 5.03 14.05 5.73 41.35-18.2 53.44"/>
                    <path fill="#009640" d="M59.78 224.55a21.6 21.6 0 01-5.88 1.62l-.13-.04c9.61-2.9 6.75-19.42 13.99-46.23C75 153.05 115 158.73 115 158.73s-13.95 4.8-18.1 28.56c-3.14 18-13.34 23.63-13.34 23.63l.3-.06a194.1 194.1 0 01-7.52 3.86c-5.47 2.67-12.37 7.9-16.57 9.83"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M54.38 226.13c1.81-.08 3.4-1.17 4.87-2.22l10.33-7.36c8.45-6 17.37-12.63 20.82-22.4 1.55-4.37 1.86-9.07 2.63-13.64.4-2.33.92-4.7 2.15-6.72a21.19 21.19 0 013.73-4.25c4.27-4.04 8.78-8.06 14.26-10.2"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M54.4 226.29c1.44-1.03 3.2-2.05 4.34-3.44.91-1.12 1.62-2.19 2.7-3.2a117.5 117.5 0 007.8-8.11c4.82-5.58 8.96-11.9 10.98-19.05.85-3.03 1.3-6.15 2.23-9.15 2.63-8.62 8.9-15.76 16.15-21.1 1.9-1.4 3.92-2.72 6.2-3.3.9-.23 1.83-.34 2.75-.34"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M60.4 219.34c6.63-7.39 9.68-17.2 12.5-26.7.88-2.96 1.76-5.93 3.25-8.63a36.1 36.1 0 013.82-5.38 115.78 115.78 0 0118.2-17.74c1.29-1.01 2.68-2.03 4.3-2.27"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M61.69 213.8a27.73 27.73 0 002.93-6.36c.5-1.58.85-3.2 1.26-4.8a76.61 76.61 0 0130.42-43.77"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M63.97 198.56c2.76-2.76 2.58-7.26 4.24-10.8.87-1.87 2.24-3.44 3.34-5.18 1.4-2.22 2.34-4.7 3.76-6.91a34.53 34.53 0 013.97-4.83c3.47-3.7 7.05-7.27 10.75-10.73M66.72 184.54a61.86 61.86 0 0118.07-22.63"/>
                    <path fill="#FEFEFE" d="M78.83 202.75c0-.13.11-.24.23-.24h1.53c.13 0 .23.11.23.24v5.16c0 .9.65 1.61 1.52 1.61.9 0 1.55-.71 1.55-1.6v-5.17c0-.13.1-.24.24-.24h1.52c.13 0 .24.11.24.24v5.27a3.56 3.56 0 01-3.55 3.54 3.54 3.54 0 01-3.51-3.54v-5.27zm1-2.01c0-.5.39-.9.87-.9s.88.4.88.9-.4.9-.88.9a.89.89 0 01-.87-.9zm3.28 0c0-.5.39-.9.87-.9s.88.4.88.9-.4.9-.88.9a.89.89 0 01-.87-.9zM87.9 202.75c0-.13.1-.24.23-.24H91c1.46 0 2.66 1.03 2.66 2.37 0 .98-.85 1.7-1.43 2.01.65.28 1.66.9 1.66 2.08 0 1.43-1.23 2.46-2.7 2.46h-3.07a.24.24 0 01-.24-.24v-8.44zm2.89 3.38a.9.9 0 00.87-.92c0-.5-.4-.87-.87-.87h-.97v1.79h.97zm.16 3.48c.48 0 .9-.4.9-.93 0-.51-.54-.9-1.02-.9h-1v1.83h1.12zM95.47 202.75c0-.13.1-.24.24-.24h5.12c.14 0 .24.11.24.24v1.4c0 .12-.1.23-.24.23H97.4v1.58h2.83c.12 0 .23.12.23.25v1.39c0 .14-.11.24-.23.24H97.4v1.72h3.43c.14 0 .24.11.24.24v1.39c0 .13-.1.24-.24.24h-5.12a.24.24 0 01-.24-.24v-8.44zM102.73 202.75c0-.13.1-.24.23-.24h3.7c1.49 0 2.7 1.24 2.7 2.75a2.8 2.8 0 01-1.83 2.57l1.7 3.23c.08.17 0 .37-.21.37h-1.65a.23.23 0 01-.2-.11l-1.65-3.38h-.85v3.25c0 .13-.11.24-.24.24h-1.47a.24.24 0 01-.23-.24v-8.44zm3.77 3.57c.51 0 .94-.48.94-1.02a.96.96 0 00-.94-.97h-1.83v2h1.83zM111.02 202.75c0-.13.1-.24.24-.24h1.47c.12 0 .24.11.24.24v6.8h2.94c.14 0 .24.12.24.25v1.39c0 .13-.1.24-.24.24h-4.65a.24.24 0 01-.24-.24v-8.44zM117.35 202.75c0-.13.11-.24.23-.24h1.49c.12 0 .24.11.24.24v8.44c0 .13-.12.24-.24.24h-1.49a.25.25 0 01-.23-.24v-8.44zM121.42 202.61c0-.13.11-.23.24-.23h.3l4.95 4.9h.01v-4.53c0-.13.1-.24.24-.24h1.48c.13 0 .24.11.24.24v8.58c0 .13-.11.23-.24.23h-.2a.38.38 0 01-.16-.06l-4.89-5.06h-.01v4.75c0 .13-.1.24-.24.24h-1.47c-.12 0-.23-.11-.23-.24l-.02-8.58zM134.83 202.4a4.7 4.7 0 013.02 1.2c.12.08.13.23.03.34l-.98 1.07a.26.26 0 01-.33.01 2.24 2.24 0 00-1.63-.61c-1.35 0-2.44 1.17-2.44 2.57a2.5 2.5 0 002.46 2.54c.36 0 .73-.05 1.1-.2v-.74h-.78a.23.23 0 01-.24-.23v-1.26c0-.15.1-.25.24-.25h2.49c.12 0 .22.12.22.25l.01 3.42c0 .07-.05.17-.1.2 0 0-1.27.84-3.07.84a4.48 4.48 0 01-4.44-4.57 4.5 4.5 0 014.44-4.59M139.7 202.75c0-.13.1-.24.23-.24h5.13c.14 0 .24.11.24.24v1.4c0 .12-.1.23-.24.23h-3.43v1.58h2.82c.13 0 .24.12.24.25v1.39c0 .14-.11.24-.24.24h-2.82v1.72h3.43c.14 0 .24.11.24.24v1.39c0 .13-.1.24-.24.24h-5.13a.24.24 0 01-.23-.24v-8.44zM146.94 202.61c0-.13.11-.23.24-.23h.3l4.95 4.9h.01v-4.53c0-.13.1-.24.24-.24h1.48c.13 0 .24.11.24.24v8.58c0 .13-.11.23-.24.23h-.2a.37.37 0 01-.16-.06l-4.89-5.06h-.01v4.75c0 .13-.1.24-.24.24h-1.47a.25.25 0 01-.24-.24v-8.58zM52.75 191.9l1.9-3.2c.31-.5 1.08-.42 1.36-.22.16.07 3.06 2.1 5.71 2.1 1.61 0 2.78-.95 2.78-2.3 0-1.61-1.41-2.84-4.15-3.88-3.46-1.3-7.8-3.88-7.8-8.49 0-3.8 3.1-7.64 9.3-7.64 4.17 0 7.4 2.04 8.6 2.88.48.27.4.96.24 1.23l-2.05 2.96c-.28.42-1 .77-1.37.5-.36-.2-3.3-2.3-5.75-2.3-1.45 0-2.53.92-2.53 1.95 0 1.42 1.2 2.5 4.38 3.73 3.14 1.19 8.13 3.53 8.13 8.76 0 3.95-3.59 7.95-9.5 7.95-5.23 0-8.12-2.08-9.05-2.96-.4-.38-.52-.54-.2-1.08M89.55 168.6c4.02 0 7 1.2 9.73 3.58.37.3.37.77.04 1.07l-3.13 3.12a.73.73 0 01-1 0 8.45 8.45 0 00-5.44-1.96 7.82 7.82 0 00-7.88 7.91c0 4.26 3.38 7.8 7.92 7.8 1.9 0 3.95-.66 5.4-1.85.27-.23.8-.23 1.04.04l3.13 3.19c.29.27.25.77-.04 1.04a14.15 14.15 0 01-9.77 3.72c-8.04 0-14.52-6.1-14.52-13.79 0-7.68 6.48-13.86 14.52-13.86M104.73 169.67c0-.38.37-.73.77-.73h4.78c.45 0 .77.35.77.73v9.68h11.5v-9.68c0-.38.32-.73.77-.73h4.78c.4 0 .77.35.77.73v25.43c0 .39-.37.73-.77.73h-4.78a.75.75 0 01-.77-.73V185h-11.5v10.1c0 .39-.32.73-.77.73h-4.78c-.4 0-.77-.34-.77-.73v-25.43zM132.78 194.71l12.6-25.85c.11-.23.4-.42.68-.42h.4c.28 0 .56.2.68.42l12.59 25.85c.24.5-.08 1-.68 1h-4.47c-.72 0-1.04-.23-1.4-.96l-1.45-3.03h-10.94l-1.45 3.07c-.2.46-.64.92-1.45.92h-4.42c-.6 0-.93-.5-.69-1zm16.53-8.22l-3.05-6.34h-.04l-3.02 6.34h6.11zM161.1 169.5c0-.38.35-.73.76-.73h4.94c.45 0 .77.35.77.74v15.55a4.8 4.8 0 004.95 4.84c2.9 0 5.02-2.15 5.02-4.84v-15.55c0-.39.33-.74.77-.74h4.94c.4 0 .77.35.77.74v15.86c0 5.84-5.15 10.68-11.5 10.68-6.32 0-11.43-4.84-11.43-10.68V169.5zM53.53 110.9c0-.37.29-.69.68-.69h4.29a.7.7 0 01.68.68v19.12h8.56c.4 0 .69.32.69.68v3.9c0 .36-.29.68-.69.68H54.21a.68.68 0 01-.68-.68v-23.7zM70.94 134.34l11.26-24.1c.1-.2.36-.39.61-.39h.36c.26 0 .5.18.62.4l11.26 24.09c.21.46-.07.93-.61.93h-4c-.64 0-.93-.22-1.26-.9l-1.3-2.82H78.1l-1.3 2.86c-.18.43-.57.86-1.3.86h-3.95c-.54 0-.83-.47-.61-.93zm14.79-7.66l-2.74-5.9h-.03l-2.7 5.9h5.47zM97.65 110.5c0-.36.32-.65.68-.65h.9l14.36 13.75h.03v-12.7c0-.37.3-.69.69-.69h4.32a.7.7 0 01.68.68V135c0 .35-.32.64-.68.64h-.58c-.1 0-.4-.11-.47-.18l-14.21-14.21h-.04v13.35c0 .36-.29.68-.68.68h-4.28a.7.7 0 01-.69-.68l-.03-24.1zM123.32 110.9c0-.37.29-.69.65-.69h8.78a12.6 12.6 0 0112.63 12.5c0 6.94-5.69 12.56-12.63 12.56h-8.78c-.36 0-.65-.32-.65-.68v-23.7zm9.07 19.07c4.07 0 7.02-3.18 7.02-7.27 0-4.04-2.95-7.23-7.02-7.23h-3.46v14.5h3.46zM148.06 110.9c0-.37.29-.69.68-.69h14.9c.4 0 .69.32.69.68v3.9c0 .36-.3.68-.69.68h-9.97v4.44h8.2a.7.7 0 01.7.68v3.9c0 .4-.33.68-.7.68h-8.2v4.84h9.97c.4 0 .69.32.69.68v3.9c0 .36-.3.68-.69.68h-14.9a.68.68 0 01-.68-.68v-23.7zM168.9 131.87l1.7-2.97c.28-.47.97-.4 1.22-.22.14.07 2.73 1.97 5.1 1.97 1.45 0 2.5-.9 2.5-2.15 0-1.5-1.27-2.65-3.71-3.61-3.1-1.22-6.99-3.62-6.99-7.91 0-3.55 2.78-7.13 8.32-7.13 3.74 0 6.62 1.9 7.7 2.69.43.25.36.9.21 1.14l-1.83 2.76c-.25.4-.9.72-1.23.47-.32-.18-2.95-2.15-5.14-2.15-1.3 0-2.27.86-2.27 1.82 0 1.33 1.08 2.33 3.92 3.48 2.81 1.1 7.27 3.29 7.27 8.16 0 3.68-3.2 7.4-8.49 7.4-4.68 0-7.27-1.93-8.1-2.75-.36-.36-.46-.5-.18-1M64.98 140.07c2.9 0 6.1 1.16 8.45 3.1.3.24.34.63.07.9l-2.74 2.77a.76.76 0 01-.93.03 6.55 6.55 0 00-4.54-1.58 6.77 6.77 0 00-6.82 6.66c0 3.6 3.08 6.57 6.86 6.57 1 0 2.04-.13 3.08-.53v-1.91h-2.18c-.39 0-.66-.27-.66-.6v-3.26c0-.37.27-.63.66-.63h6.95c.35 0 .63.3.63.63l.03 8.87c0 .17-.14.43-.27.53 0 0-3.57 2.14-8.59 2.14-6.89 0-12.43-5.21-12.43-11.8 0-6.6 5.54-11.89 12.43-11.89M75.68 162.6l10.84-22.2a.7.7 0 01.59-.36h.34a.7.7 0 01.6.36l10.83 22.2c.2.44-.07.87-.59.87h-3.84c-.63 0-.9-.2-1.22-.83l-1.24-2.6h-9.42l-1.25 2.64c-.17.39-.55.79-1.24.79h-3.8c-.53 0-.8-.43-.6-.86zm14.23-7.05l-2.63-5.45h-.03l-2.6 5.45h5.26zM129 145.22h-4.95a.64.64 0 01-.66-.63V141c0-.32.28-.62.66-.62h15.37c.38 0 .66.3.66.63v3.6c0 .32-.28.62-.66.62h-4.95v17.62c0 .33-.31.63-.66.63h-4.15c-.35 0-.66-.3-.66-.63v-17.62zM143.05 141c0-.33.28-.63.66-.63h14.33c.38 0 .66.3.66.63v3.6c0 .32-.28.62-.66.62h-9.59v4.1h7.9c.34 0 .65.29.65.62v3.6c0 .36-.3.62-.66.62h-7.89v4.46h9.59c.38 0 .66.3.66.62v3.6c0 .33-.28.63-.66.63h-14.33a.64.64 0 01-.66-.63V141zM163.3 140.63c0-.32.31-.59.66-.59h.87l13.8 12.67h.04V141c0-.33.28-.63.66-.63h4.16c.34 0 .65.3.65.63v22.2c0 .33-.3.6-.65.6h-.56c-.1 0-.38-.1-.45-.17l-13.67-13.1h-.04v12.31c0 .33-.28.63-.66.63H164c-.35 0-.66-.3-.66-.63l-.04-22.2zM102.2 141c0-.33.28-.63.66-.63h10.35c4.15 0 7.55 3.2 7.55 7.13 0 3.03-2.11 5.47-5.13 6.63l4.75 8.38c.24.43 0 .96-.6.96h-4.6a.64.64 0 01-.55-.3l-4.6-8.74h-2.4v8.41c0 .33-.3.63-.65.63h-4.12a.64.64 0 01-.66-.63V141zm10.56 9.24a2.7 2.7 0 002.63-2.64c0-1.39-1.2-2.51-2.63-2.51h-5.12v5.15h5.12z"/>
                </g>
                </g>
            </svg>
            <div class="Menu__grid">
                <div class="Menu__main" data-app="menu-main">
                    <nav class="nav">
                        <ul>
                            <li>
                                <span class="nav__item  is-active is-big">Veranstaltungen</span>
                                <ul class="nav__sub-nav">
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                </ul>
                            </li>
                            <li>
                                <span class="nav__item is-big">LGS erleben</span>
                                <ul class="nav__sub-nav">
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                </ul>
                            </li>
                            <li>
                                <span class="nav__item">Besuch planen</span>
                                <ul class="nav__sub-nav">
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                </ul>
                            </li>
                            <li>
                                <span class="nav__item">Tipps für ...</span>
                                <ul class="nav__sub-nav">
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                </ul>
                            </li>
                            <li>
                                <span class="nav__item">News</span>
                                <ul class="nav__sub-nav">
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                </div>
                <div class="Menu__menu__icons">
                    <div data-app="menu-full"></div>
                    <div data-app="menu-wishlist">
                        <script type="text/json">
                            {
                                "wishlistUrl": "#0",
                                "dataUrl": "http://localhost:8888/https://www.ueberlingen2020.de/data/event-datensatz.json?full=1"
                            }
                        </script>
                    </div>
                </div>
                <div class="Menu__countdown">
                    <div data-app="leaf-counter"></div>
                </div>
                <div class="Menu__action">
                    <a href="#0" class="Menu__action__cta"><img src="http://placehold.it/24" /><span>Ticket kaufen</span></a>
                    <div class="Menu__action__icons">
                        <div class="Menu__action__text">23. April – 18. Oktober 2020</div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="Menu__banner js-poster">
        <picture class="Menu__image">
            <source srcset="http://placehold.it/2000x580&text=XLarge%20Screens" media="(min-width: 90em)">
            <source srcset="http://placehold.it/1440x580&text=Large%20Screens" media="(min-width: 64em)">
            <source srcset="http://placehold.it/1024x500&text=Medium%20Screens" media="(min-width: 40em)">
            <img srcset="http://placehold.it/640x400&text=Default%20Image" alt="">
        </picture>
        <div class="Menu__poster-content">
            <h1 class="Menu__poster-title">Der Uferpak – Gärten zu Wasser & zu Land</h1>
            <div class="Menu__poster-text">23. Internationales Festival zeitgenössischer Musik.</div>
            <a class="Menu__button" href="#0">Mehr Details<img src="http://placehold.it/24"></a>
        </div>
        <div class="Menu__teasercard">
            <div class="teasercard">
                <div class="teasercard__title">Teaser</div>
                <div class="teasercard__date">12.-13. April</div>
                <div class="teasercard__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Totam accusamus velit tempore, voluptatem nesciunt atque optio. Voluptatem et rerum veniam.</div>
                <a class="teasercard__link" href="#0">Weiterlesen</a>
            </div>
        </div>
    </div>
</header>

Styleguide sections.menu.2
*/
.Menu__banner {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  height: 500px;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center; }
  @media (min-width: 40em) {
    .Menu__banner {
      height: 640px; } }
  @media (min-width: 64em) {
    .Menu__banner {
      height: 715px; } }
  .Menu__banner:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.44)));
    background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.44));
    background: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.44));
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.44)); }

.Menu__image {
  height: 0; }

.Menu__poster-content {
  position: absolute;
  position: absolute;
  bottom: 20px;
  left: 20px;
  padding-right: 40px;
  color: white; }
  @media (min-width: 40em) {
    .Menu__poster-content {
      bottom: 100px;
      left: 10%; } }

.Menu__poster-title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-family: serif;
  font-size: 28px;
  color: inherit;
  line-height: 1.25;
  max-width: 550px; }
  @media (min-width: 40em) {
    .Menu__poster-title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .Menu__poster-title {
    font-family: "UrgeText-SemiBold", serif; }
  .fl .Menu__poster-title {
    font-family: "Noto Sans", sans-serif; }
  .Menu__poster-title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .Menu__poster-title {
      font-size: 36px; } }
  @media (min-width: 64em) {
    .Menu__poster-title {
      margin: 0;
      font-family: serif;
      letter-spacing: 0;
      -webkit-hyphens: auto;
          -ms-hyphens: auto;
              hyphens: auto;
      font-family: serif;
      font-size: 36px;
      color: inherit;
      line-height: 1.26;
      text-decoration: underline;
      text-decoration: none; } }
  @media (min-width: 64em) and (min-width: 40em) {
    .Menu__poster-title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  @media (min-width: 64em) {
      .fl .Menu__poster-title {
        font-family: "UrgeText-SemiBold", serif; }
      .fl .Menu__poster-title {
        font-family: "Noto Sans", sans-serif; }
      .Menu__poster-title sup {
        font-size: 0.45em;
        top: -1em; } }
  @media (min-width: 64em) and (min-width: 40em) {
    .Menu__poster-title {
      font-size: 45px; } }

.Menu__poster-text {
  margin-top: 30px;
  font-weight: 400;
  color: inherit;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 30px; }
  @media (min-width: 40em) {
    .Menu__poster-text {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .Menu__poster-text a:not([class]) {
    color: currentColor; }
    .Menu__poster-text a:not([class]):hover {
      opacity: 0.75; }
  .Menu__poster-text *:first-child {
    margin-top: 0; }
  .Menu__poster-text *:last-child {
    margin-bottom: 0; }

.Menu__button {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  -webkit-box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
          box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
  background: #afcc56; }
  @media (min-width: 40em) {
    .Menu__button {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .Menu__button svg,
  .Menu__button img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .Menu__button * + svg,
  .Menu__button * + img {
    margin-right: 0;
    margin-left: 15px; }
  .Menu__button:hover {
    cursor: pointer;
    color: #ffffff; }
  .Menu__button:hover {
    background-color: #88a431; }
  .Menu__button:disabled, .Menu__button.is-disabled {
    pointer-events: none;
    opacity: 0.25; }
  .Menu__button img {
    margin-left: 10px; }

/*
Menu mit Bild ohne Text

Markup:
<script>
window.__menu = {
    main: [
        {
            label: "Aktuelles",
            link: "",
            subnav: "subnav-01",
            isActive: true,
            isBig: true
        },
        {
            label: "Konzept",
            link: "",
            subnav: "subnav-02",
            isActive: false,
            isBig: true
        },
        {
            label: "Sponsoren",
            link: "#0",
            subnav: "",
            isActive: false
        },
        {
            label: "Partner",
            link: "#0",
            subnav: "",
            isActive: false
        },
        {
            label: "Vorfreude",
            link: "#0",
            subnav: "",
            isActive: false
        },
        {
            label: "Presse",
            link: "",
            subnav: "subnav-06",
            isActive: false
        }
    ],
    subnavs: {
        "subnav-01": {
            items: [
                {
                    label: "News",
                    link: "/news",
                    icon: "<img src='http://placehold.it/24' alt=''>",
                    isActive: false                    
                },
                {
                    label: "Termine",
                    link: "/termine",
                    icon: "<img src='http://placehold.it/24' alt=''>",
                    isActive: true                    
                },
                {
                    label: "Baustellenreport",
                    link: "/report",
                    icon: "<img src='http://placehold.it/24' alt=''>",
                    isActive: false                    
                },
                {
                    label: "Interviews",
                    link: "/interviews",
                    icon: "<img src='http://placehold.it/24' alt=''>",
                    isActive: false                    
                },
                {
                    label: "Bildergalerie",
                    link: "/galerie",
                    icon: "<img src='http://placehold.it/24' alt=''>",
                    isActive: false                    
                }
            ]
        },
        "subnav-02": {
            items: [
                {
                    label: "Lorem",
                    link: "/lorem",
                    icon: "<img src='http://placehold.it/24' alt=''>",
                    isActive: false                    
                },
                {
                    label: "Ipsum",
                    link: "/ipsum",
                    icon: "<img src='http://placehold.it/24' alt=''>",
                    isActive: false                    
                }
            ]
        }
    },
    socials: [
        {
            icon: "<img src='http://placehold.it/24' alt=''>",
            link: "#0"
        },
        {
            icon: "<img src='http://placehold.it/24' alt=''>",
            link: "#0"
        },
        {
            icon: "<img src='http://placehold.it/24' alt=''>",
            link: "#0"
        },
        {
            icon: "<img src='http://placehold.it/24' alt=''>",
            link: "#0"
        }
    ],
    additional: [
        {
            label: "Lorem",
            link: "#lorem",
            isActive: false                    
        },
        {
            label: "Ipsum",
            link: "#ipsum",
            isActive: false                    
        },
        {
            label: "Dolor",
            link: "#dolor",
            isActive: false                    
        }
    ]
}
</script>
<header class="Menu__container">
    <section class="Menu">
        <div class="Menu__wrapper">
            <svg class="Menu__logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="239" height="322" viewBox="0 0 239 322">
                <defs>
                <path id="a" d="M.77.13h10.49v11.5H.77z"/>
                <path id="c" d="M.14.65h13.71v23.68H.14z"/>
                <path id="e" d="M0 .42h66.17v27.49H0z"/>
                <path id="g" d="M.52.51H66.7V28H.52z"/>
                </defs>
                <g fill="none" fill-rule="evenodd">
                <path fill="#008ACA" d="M50.27 265.32l-3.04-.05c-5.76-.03-16.3 3-18.89 13.8-1.72 7.14.22 13.64 1.73 17.22l20.2-30.97z"/>
                <path fill="#80C1E7" d="M30.07 296.3l.11-.01c3.9-.09 10.57-.97 16.37-5.38 8.84-6.73 7.36-17.58 5-22.83l-1.23-2.65-.05-.1-20.2 30.96z"/>
                <g transform="translate(2 287.93)">
                    <mask id="b" fill="#fff">
                    <use xlink:href="#a"/>
                    </mask>
                    <path fill="#008ACA" d="M11.26.44L10.04.23C7.72-.15 3.28.4 1.54 4.58a11.5 11.5 0 00-.4 7.05L11.26.44z" mask="url(#b)"/>
                </g>
                <path fill="#80C1E7" d="M3.14 299.57h.05c1.58.22 4.32.29 6.94-1.12 3.99-2.15 4.09-6.62 3.47-8.88l-.32-1.15-.02-.04-10.12 11.19z"/>
                <path fill="#008ACA" d="M204.77 66.7l1.22.22c2.32.4 6.76-.12 8.54-4.28 1.17-2.76.83-5.5.46-7.05l-10.22 11.1z"/>
                <path fill="#80C1E7" d="M215 55.59l-.05-.01a11.54 11.54 0 00-6.95 1.07c-4.01 2.11-4.15 6.58-3.56 8.85l.32 1.15.01.04L215 55.6z"/>
                <path fill="#E18398" d="M35.56 66.34l-1.67.25c-3.15.43-9.16-.5-11.34-6.24a15.6 15.6 0 01-.28-9.58l13.29 15.57zM132.14 275.95l1.52.74c2.84 1.42 7.28 5.56 5.86 11.53a15.6 15.6 0 01-5.17 8.07l-2.21-20.34z"/>
                <path fill="#D0185D" d="M132.1 276l-1.28 1c-2.48 2-5.93 6.98-3.26 12.51a15.6 15.6 0 006.73 6.75l.05.03-2.2-20.34-.05.04zM35.58 66.29l.49-1.55c.92-3.05.96-9.1-4.37-12.18a15.64 15.64 0 00-9.36-1.8l-.07.01 13.29 15.57.02-.05z"/>
                <path fill="#E18398" d="M195.15 248.58l-.84 1.94c-1.55 3.69-2.37 11.25 3.89 15.77 4.14 2.99 8.84 3.46 11.54 3.44l-14.6-21.15z"/>
                <path fill="#D0185D" d="M195.22 248.58l2.04-.1c4-.12 11.38 1.8 13.37 9.25 1.32 4.89.12 9.4-.86 11.93l-.02.07-14.6-21.15h.07z"/>
                <path fill="#E18398" d="M215.47 252.64l-.28 1.2c-.51 2.26-.22 6.68 3.82 8.64 2.68 1.3 5.42 1.1 6.96.8l-10.5-10.64z"/>
                <path fill="#D0185D" d="M215.52 252.63l1.15-.25c2.28-.48 6.7-.13 8.6 3.94a11.39 11.39 0 01.72 6.92l-.01.05-10.5-10.65h.04z"/>
                <path fill="#E18398" d="M201.64 23.98l2.11-.18c3.98-.39 11.05-3.24 12.07-10.89.67-5.06-1.13-9.41-2.43-11.78l-11.75 22.85z"/>
                <path fill="#D0185D" d="M201.6 23.91l-1.04-1.75c-2.01-3.45-3.8-10.85 1.82-16.14 3.7-3.46 8.24-4.55 10.93-4.89h.08l-11.75 22.85-.04-.07z"/>
                <path fill="#CEDF9A" d="M194.18 15.29c2.31 1.05 4.75-1.15 6.8-3.53 3.25-3.75 2.11-8.23.77-10.37-.1-.2-.77-1.1-.77-1.1l-6.84 14.98.03.01h.01"/>
                <path fill="#94C01F" d="M199.63.43c-2.5.39-6.62 2.47-7.33 7.38-.45 3.12-.51 6.4 1.8 7.44l.04.02L200.98.28s-1.12.1-1.35.15"/>
                <path fill="#CEDF9A" d="M184.84 297.97c-3.58 1.6-3.53 6.65-2.88 11.46 1.04 7.6 7.38 10.87 11.23 11.5.35.09 2.08.26 2.08.26l-10.37-23.25-.05.03h-.01"/>
                <g transform="translate(184.76 296.86)">
                    <mask id="d" fill="#fff">
                    <use xlink:href="#c"/>
                    </mask>
                    <path fill="#94C01F" d="M11.71 22.62c2.1-3.28 3.92-10.18-1.05-16.03C7.52 2.9 3.8-.54.2 1.06l-.06.03 10.37 23.24s1.03-1.4 1.2-1.71" mask="url(#d)"/>
                </g>
                <path fill="#CEDF9A" d="M47.63 17.71c2.06-1.4 1.46-4.57.5-7.51-1.51-4.65-5.86-5.99-8.35-5.95-.23 0-1.33.08-1.33.08l9.14 13.4.03-.01v-.01"/>
                <path fill="#94C01F" d="M37.89 5.54c-.95 2.3-1.3 6.83 2.47 9.94 2.4 1.96 5.13 3.69 7.2 2.28l.03-.02-9.14-13.4s-.5.98-.56 1.2"/>
                <g>
                    <path fill="#009640" d="M23.55 92.58l-.02-.01v.02h-.02l.02.01s23.68 39.52 48.83 55.49c17.1 10.85 47.17 5.44 47.18 5.43l-96-60.94zM180.24 57.46l.01-.02.01.02h.02v.01s-4.5 45.83-20.4 71c-10.8 17.1-40.31 25.03-40.32 25.03l60.68-96.04z"/>
                    <path fill="#009640" d="M180.24 57.46l.01-.02h-.01l-.01-.02-.01.02s-39.5 23.8-55.4 48.96c-10.81 17.1-5.26 47.09-5.26 47.1l60.68-96.04zM215.56 214.46l.02.01v-.02h.02l-.02-.02s-23.68-39.51-48.84-55.48c-17.1-10.86-47.17-5.44-47.17-5.43l96 60.94z"/>
                    <path fill="#009640" d="M215.56 214.46l.02.01h-.02v.03l-.01-.01s-45.91-4.67-71.06-20.64c-17.1-10.85-24.92-40.33-24.92-40.33l96 60.94zM58.36 249.23l-.01.01h.01l.01.02.01-.02s39.6-23.63 55.6-48.73c10.88-17.06 5.45-47.07 5.45-47.07l-61.07 95.79z"/>
                    <path fill="#009640" d="M58.36 249.23l-.01.01-.01-.01h-.02v-.02s4.68-45.8 20.69-70.9c10.88-17.07 40.42-24.87 40.42-24.87l-61.07 95.79z"/>
                    <path fill="#009640" d="M23.56 92.6l-.01-.02h.02v-.02h.01s45.9 4.67 71.06 20.64c17.1 10.85 24.92 40.33 24.92 40.34l-96-60.95z"/>
                    <path fill="#008ACA" d="M116.73 55.86c-7.64-6.43-15.4-7.73-23.04-17.25l14.85 66.03s21.9-37.24 8.19-48.78"/>
                    <path fill="#5CB5E1" d="M80.26 64.03c4.15-9.07 10.61-13.55 13.43-25.42l14.87 66.03h-.01S72.8 80.3 80.25 64.02"/>
                    <g transform="translate(0 152.38)">
                    <mask id="f" fill="#fff">
                        <use xlink:href="#e"/>
                    </mask>
                    <path fill="#008ACA" d="M17.28 4.93C10.85 12.55 9.54 20.3 0 27.9l66.17-14.8v-.02S28.84-8.76 17.27 4.93" mask="url(#f)"/>
                    </g>
                    <path fill="#5CB5E1" d="M25.47 193.7C16.4 189.56 11.9 183.1 0 180.3l66.17-14.84v.01s-24.38 35.67-40.7 28.23"/>
                    <path fill="#008ACA" d="M122.7 252.67c7.63 6.42 15.4 7.72 23.03 17.25l-14.84-66.04-.01.01s-21.9 37.24-8.18 48.78"/>
                    <path fill="#5CB5E1" d="M159.17 244.5c-4.15 9.06-10.61 13.55-13.44 25.41l-14.86-66.02h.01s35.75 24.33 28.29 40.6"/>
                    <g transform="translate(171.53 126.42)">
                    <mask id="h" fill="#fff">
                        <use xlink:href="#g"/>
                    </mask>
                    <path fill="#008ACA" d="M49.41 23.5C55.85 15.87 57.16 8.13 66.7.5L.52 15.32l.02.01s37.3 21.85 48.87 8.17" mask="url(#h)"/>
                    </g>
                    <path fill="#5CB5E1" d="M212.75 113.52c9.09 4.14 13.58 10.6 25.47 13.4l-66.17 14.84.01-.01s24.38-35.67 40.7-28.23"/>
                    <path fill="#D0185D" d="M175.69 171.3l1.06 3.4c2.08 6.39 9.35 16.95 22.31 15.85 8.58-.73 15.1-5.27 18.53-8.26l-41.9-11z"/>
                    <path fill="#E28498" d="M175.78 171.2l2.5-2.34c4.97-4.55 16.5-10.18 27.25-2.86 7.05 4.8 10.49 11.86 12.02 16.16l.05.13-41.91-11 .09-.08zM163 113.92v-.01l-.43-3.53c-.76-6.68 1.49-19.3 13.75-23.64 8.11-2.87 15.93-1.42 20.3-.11L163 113.92z"/>
                    <path fill="#D0185D" d="M163.12 113.96l3.26 1.1c6.4 2.1 19.23 2.47 26-8.62 4.43-7.28 4.63-15.13 4.25-19.68l-.01-.13L163 113.92l.12.04z"/>
                    <path fill="#E28498" d="M75.45 193.11l.51 3.52c.9 6.67-1.1 19.32-13.26 23.92-8.05 3.04-15.9 1.75-20.29.54l33.04-27.98z"/>
                    <path fill="#D0185D" d="M75.33 193.07l-3.28-1.03c-6.44-1.97-19.28-2.08-25.8 9.15-4.29 7.37-4.33 15.22-3.86 19.76l.02.13 33.04-27.97-.12-.04z"/>
                    <path fill="#E28498" d="M101.76 210.24l2.44 2.59c4.57 4.95 10.22 16.45 2.9 27.18-4.85 7.1-12.01 10.54-16.3 12.05h-.02l10.98-41.82z"/>
                    <path fill="#D0185D" d="M101.64 210.27l-3.28 1.03c-6.4 2.08-16.99 9.34-15.87 22.28.73 8.48 5.2 14.94 8.2 18.38l.1.1 10.97-41.83-.12.04z"/>
                    <path fill="#E28498" d="M52.78 76.3l-1.17 3.36c-2.15 6.37-2.62 19.17 8.45 26 7.32 4.51 15.27 4.74 19.81 4.38L52.78 76.3z"/>
                    <path fill="#D0185D" d="M52.9 76.28l3.42-.4c6.7-.7 19.33 1.64 23.6 13.9 2.79 8.05 1.33 15.76 0 20.13l-.04.13-27.1-33.74.13-.02zM159.17 197.35l-1.1 3.39c-1.99 6.42-2.16 19.23 9.07 25.8 7.42 4.34 15.37 4.38 19.9 3.91h.01l-27.88-33.1z"/>
                    <path fill="#E28498" d="M159.3 197.33l3.4-.47c6.68-.86 19.36 1.17 23.91 13.34 2.98 7.98 1.7 15.73.48 20.12l-.04.13-27.88-33.1.13-.02z"/>
                    <path fill="#D0185D" d="M146.77 55.49l2.53 2.5c4.73 4.8 10.77 16.1 3.81 27.07-4.6 7.27-11.64 10.94-15.89 12.6l9.55-42.17z"/>
                    <path fill="#E28498" d="M146.65 55.53l-3.24 1.14c-6.34 2.3-16.66 9.9-15.11 22.8 1.02 8.45 5.71 14.76 8.83 18.1l.09.1 9.55-42.18-.12.04z"/>
                    <path fill="#D0185D" d="M62.92 135.88l-1.12-3.37c-2.19-6.37-9.63-16.8-22.57-15.5-8.57.88-15.01 5.52-18.4 8.57l42.09 10.3z"/>
                    <path fill="#E28498" d="M62.83 135.97l-2.47 2.39c-4.89 4.63-16.32 10.45-27.2 3.31-7.12-4.68-10.68-11.69-12.28-15.96l-.05-.13 42.09 10.3-.1.1z"/>
                    <path fill="#94C01F" d="M121.99 146.13c5.12-13.52 21.71-34.2 50.17-32.4 18.05 1.13 36.54 4.64 39.72 18.85v.02l.05.22-92.38 20.7s1.88-6.18 2.44-7.39"/>
                    <path fill="#94C01F" d="M124.92 159.14c10.42 10.04 34.27 21.66 59.23 7.9 15.83-8.72 31.05-19.79 27.83-33.98v-.03l-.05-.21-92.38 20.7s4.35 4.77 5.37 5.62"/>
                    <path fill="#94C01F" d="M126.95 155.95c13.55 5.1 34.27 21.66 32.47 50.06-1.14 18-4.65 36.46-18.89 39.63h-.02l-.22.05-20.74-92.18s6.2 1.88 7.4 2.44M113.91 158.86c-10.06 10.4-21.7 34.2-7.92 59.12 8.75 15.79 19.83 30.98 34.06 27.77h.02l.22-.06-20.74-92.18s-4.79 4.34-5.64 5.35"/>
                    <path fill="#94C01F" d="M117.12 160.89c-5.13 13.52-21.71 34.2-50.17 32.4-18.05-1.13-36.54-4.64-39.72-18.84v-.03l-.05-.21 92.37-20.7s-1.87 6.18-2.43 7.38"/>
                    <path fill="#94C01F" d="M114.2 147.89c-10.43-10.04-34.28-21.66-59.25-7.9-15.82 8.72-31.04 19.78-27.83 33.97l.01.03.05.22 92.37-20.7s-4.34-4.78-5.36-5.62"/>
                    <path fill="#94C01F" d="M112.16 151.08c-13.55-5.11-34.27-21.67-32.47-50.06C80.82 83 84.34 64.55 98.58 61.39l.02-.01.22-.05 20.73 92.18s-6.18-1.88-7.39-2.43M125.2 148.16c10.06-10.4 21.7-34.2 7.91-59.11-8.74-15.8-19.83-30.98-34.05-27.77h-.03l-.21.05 20.73 92.18s4.8-4.33 5.65-5.35"/>
                    <path fill="#006B2D" d="M189.31 168.39c11.64 22.95 3.73 48.77 3.1 50.74a21.52 21.52 0 00-1.63-5.86c-1.93-4.2-7.18-11.09-9.85-16.54-1.61-3.3-3.02-5.92-3.88-7.5-2.48-13.99-22.4-16.97-32.87-22.34-10.51-5.41-8.42-16.67-8.42-16.67 14.09-5.01 41.44-5.71 53.55 18.17"/>
                    <path fill="#009640" d="M190.78 213.27a21.5 21.5 0 011.62 5.86l-.04.13c-2.9-9.59-19.46-6.73-46.33-13.96-26.9-7.22-21.21-47.15-21.21-47.15s4.81 13.93 28.61 18.06c18.05 3.14 23.68 13.32 23.68 13.32l-.06-.3c.86 1.58 2.27 4.2 3.88 7.5 2.67 5.46 7.92 12.35 9.85 16.54"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M192.36 218.65c-.08-1.8-1.17-3.38-2.22-4.85l-7.38-10.31c-6.02-8.44-12.66-17.34-22.44-20.78-4.39-1.54-9.1-1.86-13.68-2.62-2.34-.4-4.7-.92-6.73-2.15a21.15 21.15 0 01-4.26-3.72c-4.05-4.27-8.08-8.76-10.22-14.24"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M192.52 218.64c-1.03-1.44-2.06-3.2-3.44-4.34-1.12-.9-2.2-1.62-3.22-2.68-2.6-2.71-5.28-5.35-8.12-7.8-5.6-4.8-11.93-8.94-19.1-10.95-3.02-.84-6.15-1.3-9.16-2.22-8.64-2.63-15.8-8.88-21.15-16.12-1.4-1.9-2.72-3.91-3.3-6.2-.24-.89-.35-1.81-.34-2.74"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M185.55 212.64c-7.4-6.6-17.24-9.65-26.76-12.47-2.95-.87-5.94-1.75-8.64-3.24a36.18 36.18 0 01-5.4-3.8 115.7 115.7 0 01-17.77-18.17c-1.01-1.29-2.03-2.67-2.28-4.3"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M180 211.36c-1.98-1.24-4.13-2.22-6.37-2.93-1.58-.5-3.2-.85-4.82-1.25a76.77 76.77 0 01-43.85-30.36l.03.38"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M164.74 209.09c-2.78-2.76-7.29-2.58-10.84-4.23-1.86-.87-3.44-2.25-5.18-3.34-2.23-1.4-4.72-2.34-6.93-3.76a34.62 34.62 0 01-4.84-3.96c-3.7-3.45-7.28-7.03-10.75-10.72M150.69 206.34A61.95 61.95 0 01128 188.31"/>
                    <path fill="#006B2D" d="M134.55 83.86c23-11.62 48.87-3.72 50.85-3.09a21.6 21.6 0 00-5.87 1.62c-4.2 1.93-11.1 7.16-16.57 9.83-3.3 1.61-5.94 3.01-7.52 3.87-14.02 2.48-17 22.35-22.39 32.8-5.42 10.5-16.7 8.4-16.7 8.4-5.03-14.05-5.73-41.35 18.2-53.43"/>
                    <path fill="#009640" d="M179.53 82.4a21.58 21.58 0 015.87-1.63l.14.05c-9.62 2.89-6.75 19.41-14 46.23-7.23 26.84-47.24 21.16-47.24 21.16s13.95-4.8 18.1-28.55c3.14-18.01 13.34-23.63 13.34-23.63l-.3.06a193.5 193.5 0 017.52-3.87c5.46-2.67 12.37-7.9 16.57-9.83"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M184.92 80.81c-1.8.09-3.39 1.18-4.86 2.22l-10.34 7.36c-8.45 6.01-17.37 12.63-20.82 22.4-1.54 4.37-1.86 9.07-2.63 13.64-.39 2.34-.92 4.7-2.15 6.73a21.16 21.16 0 01-3.73 4.24c-4.27 4.04-8.78 8.06-14.26 10.2"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M184.91 80.66c-1.44 1.02-3.21 2.05-4.35 3.43-.9 1.12-1.62 2.2-2.69 3.21a117.3 117.3 0 00-7.8 8.1c-4.83 5.59-8.97 11.9-10.98 19.06-.85 3.02-1.31 6.14-2.23 9.15-2.63 8.61-8.9 15.75-16.16 21.1-1.9 1.4-3.92 2.71-6.2 3.3-.9.23-1.82.34-2.75.33"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M178.9 87.6c-6.63 7.4-9.68 17.21-12.5 26.71-.87 2.95-1.76 5.93-3.24 8.62a36.1 36.1 0 01-3.82 5.39 115.74 115.74 0 01-18.2 17.74c-1.3 1-2.68 2.02-4.3 2.27"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M177.62 93.14a27.78 27.78 0 00-2.94 6.37c-.5 1.58-.85 3.2-1.26 4.8A76.61 76.61 0 01143 148.07l.38-.03"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M175.34 108.38c-2.77 2.77-2.58 7.27-4.24 10.8-.87 1.87-2.25 3.44-3.35 5.18-1.4 2.22-2.34 4.7-3.76 6.92a34.53 34.53 0 01-3.97 4.82 228.9 228.9 0 01-10.75 10.73M172.59 122.4a61.87 61.87 0 01-18.07 22.63"/>
                    <path fill="#006B2D" d="M49.86 138.5c-11.64-22.95-3.73-48.77-3.1-50.74.26 1.8.75 3.94 1.63 5.86 1.93 4.19 7.17 11.08 9.85 16.53 1.61 3.3 3.01 5.93 3.87 7.5 2.49 14 22.4 16.97 32.88 22.34 10.51 5.41 8.41 16.67 8.41 16.67-14.08 5.02-41.43 5.72-53.54-18.16"/>
                    <path fill="#009640" d="M48.39 93.62a21.5 21.5 0 01-1.63-5.86l.05-.14c2.9 9.6 19.46 6.73 46.33 13.96 26.9 7.22 21.21 47.15 21.21 47.15s-4.81-13.92-28.62-18.06c-18.05-3.13-23.68-13.31-23.68-13.31l.06.29c-.86-1.57-2.26-4.2-3.87-7.5-2.68-5.45-7.92-12.34-9.85-16.53"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M46.8 88.23c.09 1.8 1.18 3.39 2.23 4.86l7.37 10.31c6.03 8.43 12.66 17.33 22.45 20.78 4.38 1.54 9.09 1.85 13.67 2.62 2.34.39 4.71.92 6.74 2.14 1.62.98 2.95 2.36 4.26 3.73 4.05 4.26 8.08 8.76 10.22 14.23"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M46.65 88.24c1.03 1.45 2.06 3.21 3.44 4.34 1.12.91 2.2 1.62 3.22 2.69 2.6 2.7 5.27 5.34 8.12 7.8 5.6 4.8 11.92 8.93 19.1 10.94 3.02.85 6.15 1.31 9.16 2.23 8.63 2.62 15.79 8.87 21.15 16.12 1.4 1.89 2.72 3.9 3.3 6.19.23.89.35 1.82.34 2.74"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M53.62 94.24c7.4 6.61 17.23 9.66 26.76 12.47 2.95.88 5.94 1.76 8.64 3.24a36.08 36.08 0 015.39 3.81 115.66 115.66 0 0117.78 18.16c1.01 1.3 2.03 2.68 2.27 4.3"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M59.16 95.52c2 1.24 4.14 2.23 6.38 2.93 1.58.5 3.2.85 4.82 1.26a76.77 76.77 0 0143.85 30.36l-.03-.39"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M74.43 97.8c2.78 2.76 7.28 2.57 10.83 4.23 1.87.87 3.45 2.24 5.19 3.34 2.22 1.4 4.72 2.33 6.93 3.75a34.62 34.62 0 014.84 3.96c3.7 3.46 7.28 7.04 10.74 10.73M88.48 100.54a61.95 61.95 0 0122.68 18.03"/>
                    <path fill="#006B2D" d="M104.76 223.09c-23 11.61-48.88 3.71-50.86 3.08 1.82-.25 3.96-.74 5.88-1.62 4.2-1.93 11.1-7.16 16.57-9.83 3.3-1.6 5.94-3 7.51-3.86 14.02-2.48 17-22.36 22.4-32.81 5.42-10.49 16.7-8.4 16.7-8.4 5.03 14.05 5.73 41.35-18.2 53.44"/>
                    <path fill="#009640" d="M59.78 224.55a21.6 21.6 0 01-5.88 1.62l-.13-.04c9.61-2.9 6.75-19.42 13.99-46.23C75 153.05 115 158.73 115 158.73s-13.95 4.8-18.1 28.56c-3.14 18-13.34 23.63-13.34 23.63l.3-.06a194.1 194.1 0 01-7.52 3.86c-5.47 2.67-12.37 7.9-16.57 9.83"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M54.38 226.13c1.81-.08 3.4-1.17 4.87-2.22l10.33-7.36c8.45-6 17.37-12.63 20.82-22.4 1.55-4.37 1.86-9.07 2.63-13.64.4-2.33.92-4.7 2.15-6.72a21.19 21.19 0 013.73-4.25c4.27-4.04 8.78-8.06 14.26-10.2"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M54.4 226.29c1.44-1.03 3.2-2.05 4.34-3.44.91-1.12 1.62-2.19 2.7-3.2a117.5 117.5 0 007.8-8.11c4.82-5.58 8.96-11.9 10.98-19.05.85-3.03 1.3-6.15 2.23-9.15 2.63-8.62 8.9-15.76 16.15-21.1 1.9-1.4 3.92-2.72 6.2-3.3.9-.23 1.83-.34 2.75-.34"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M60.4 219.34c6.63-7.39 9.68-17.2 12.5-26.7.88-2.96 1.76-5.93 3.25-8.63a36.1 36.1 0 013.82-5.38 115.78 115.78 0 0118.2-17.74c1.29-1.01 2.68-2.03 4.3-2.27"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M61.69 213.8a27.73 27.73 0 002.93-6.36c.5-1.58.85-3.2 1.26-4.8a76.61 76.61 0 0130.42-43.77"/>
                    <path stroke="#FEFEFE" stroke-width=".17" d="M63.97 198.56c2.76-2.76 2.58-7.26 4.24-10.8.87-1.87 2.24-3.44 3.34-5.18 1.4-2.22 2.34-4.7 3.76-6.91a34.53 34.53 0 013.97-4.83c3.47-3.7 7.05-7.27 10.75-10.73M66.72 184.54a61.86 61.86 0 0118.07-22.63"/>
                    <path fill="#FEFEFE" d="M78.83 202.75c0-.13.11-.24.23-.24h1.53c.13 0 .23.11.23.24v5.16c0 .9.65 1.61 1.52 1.61.9 0 1.55-.71 1.55-1.6v-5.17c0-.13.1-.24.24-.24h1.52c.13 0 .24.11.24.24v5.27a3.56 3.56 0 01-3.55 3.54 3.54 3.54 0 01-3.51-3.54v-5.27zm1-2.01c0-.5.39-.9.87-.9s.88.4.88.9-.4.9-.88.9a.89.89 0 01-.87-.9zm3.28 0c0-.5.39-.9.87-.9s.88.4.88.9-.4.9-.88.9a.89.89 0 01-.87-.9zM87.9 202.75c0-.13.1-.24.23-.24H91c1.46 0 2.66 1.03 2.66 2.37 0 .98-.85 1.7-1.43 2.01.65.28 1.66.9 1.66 2.08 0 1.43-1.23 2.46-2.7 2.46h-3.07a.24.24 0 01-.24-.24v-8.44zm2.89 3.38a.9.9 0 00.87-.92c0-.5-.4-.87-.87-.87h-.97v1.79h.97zm.16 3.48c.48 0 .9-.4.9-.93 0-.51-.54-.9-1.02-.9h-1v1.83h1.12zM95.47 202.75c0-.13.1-.24.24-.24h5.12c.14 0 .24.11.24.24v1.4c0 .12-.1.23-.24.23H97.4v1.58h2.83c.12 0 .23.12.23.25v1.39c0 .14-.11.24-.23.24H97.4v1.72h3.43c.14 0 .24.11.24.24v1.39c0 .13-.1.24-.24.24h-5.12a.24.24 0 01-.24-.24v-8.44zM102.73 202.75c0-.13.1-.24.23-.24h3.7c1.49 0 2.7 1.24 2.7 2.75a2.8 2.8 0 01-1.83 2.57l1.7 3.23c.08.17 0 .37-.21.37h-1.65a.23.23 0 01-.2-.11l-1.65-3.38h-.85v3.25c0 .13-.11.24-.24.24h-1.47a.24.24 0 01-.23-.24v-8.44zm3.77 3.57c.51 0 .94-.48.94-1.02a.96.96 0 00-.94-.97h-1.83v2h1.83zM111.02 202.75c0-.13.1-.24.24-.24h1.47c.12 0 .24.11.24.24v6.8h2.94c.14 0 .24.12.24.25v1.39c0 .13-.1.24-.24.24h-4.65a.24.24 0 01-.24-.24v-8.44zM117.35 202.75c0-.13.11-.24.23-.24h1.49c.12 0 .24.11.24.24v8.44c0 .13-.12.24-.24.24h-1.49a.25.25 0 01-.23-.24v-8.44zM121.42 202.61c0-.13.11-.23.24-.23h.3l4.95 4.9h.01v-4.53c0-.13.1-.24.24-.24h1.48c.13 0 .24.11.24.24v8.58c0 .13-.11.23-.24.23h-.2a.38.38 0 01-.16-.06l-4.89-5.06h-.01v4.75c0 .13-.1.24-.24.24h-1.47c-.12 0-.23-.11-.23-.24l-.02-8.58zM134.83 202.4a4.7 4.7 0 013.02 1.2c.12.08.13.23.03.34l-.98 1.07a.26.26 0 01-.33.01 2.24 2.24 0 00-1.63-.61c-1.35 0-2.44 1.17-2.44 2.57a2.5 2.5 0 002.46 2.54c.36 0 .73-.05 1.1-.2v-.74h-.78a.23.23 0 01-.24-.23v-1.26c0-.15.1-.25.24-.25h2.49c.12 0 .22.12.22.25l.01 3.42c0 .07-.05.17-.1.2 0 0-1.27.84-3.07.84a4.48 4.48 0 01-4.44-4.57 4.5 4.5 0 014.44-4.59M139.7 202.75c0-.13.1-.24.23-.24h5.13c.14 0 .24.11.24.24v1.4c0 .12-.1.23-.24.23h-3.43v1.58h2.82c.13 0 .24.12.24.25v1.39c0 .14-.11.24-.24.24h-2.82v1.72h3.43c.14 0 .24.11.24.24v1.39c0 .13-.1.24-.24.24h-5.13a.24.24 0 01-.23-.24v-8.44zM146.94 202.61c0-.13.11-.23.24-.23h.3l4.95 4.9h.01v-4.53c0-.13.1-.24.24-.24h1.48c.13 0 .24.11.24.24v8.58c0 .13-.11.23-.24.23h-.2a.37.37 0 01-.16-.06l-4.89-5.06h-.01v4.75c0 .13-.1.24-.24.24h-1.47a.25.25 0 01-.24-.24v-8.58zM52.75 191.9l1.9-3.2c.31-.5 1.08-.42 1.36-.22.16.07 3.06 2.1 5.71 2.1 1.61 0 2.78-.95 2.78-2.3 0-1.61-1.41-2.84-4.15-3.88-3.46-1.3-7.8-3.88-7.8-8.49 0-3.8 3.1-7.64 9.3-7.64 4.17 0 7.4 2.04 8.6 2.88.48.27.4.96.24 1.23l-2.05 2.96c-.28.42-1 .77-1.37.5-.36-.2-3.3-2.3-5.75-2.3-1.45 0-2.53.92-2.53 1.95 0 1.42 1.2 2.5 4.38 3.73 3.14 1.19 8.13 3.53 8.13 8.76 0 3.95-3.59 7.95-9.5 7.95-5.23 0-8.12-2.08-9.05-2.96-.4-.38-.52-.54-.2-1.08M89.55 168.6c4.02 0 7 1.2 9.73 3.58.37.3.37.77.04 1.07l-3.13 3.12a.73.73 0 01-1 0 8.45 8.45 0 00-5.44-1.96 7.82 7.82 0 00-7.88 7.91c0 4.26 3.38 7.8 7.92 7.8 1.9 0 3.95-.66 5.4-1.85.27-.23.8-.23 1.04.04l3.13 3.19c.29.27.25.77-.04 1.04a14.15 14.15 0 01-9.77 3.72c-8.04 0-14.52-6.1-14.52-13.79 0-7.68 6.48-13.86 14.52-13.86M104.73 169.67c0-.38.37-.73.77-.73h4.78c.45 0 .77.35.77.73v9.68h11.5v-9.68c0-.38.32-.73.77-.73h4.78c.4 0 .77.35.77.73v25.43c0 .39-.37.73-.77.73h-4.78a.75.75 0 01-.77-.73V185h-11.5v10.1c0 .39-.32.73-.77.73h-4.78c-.4 0-.77-.34-.77-.73v-25.43zM132.78 194.71l12.6-25.85c.11-.23.4-.42.68-.42h.4c.28 0 .56.2.68.42l12.59 25.85c.24.5-.08 1-.68 1h-4.47c-.72 0-1.04-.23-1.4-.96l-1.45-3.03h-10.94l-1.45 3.07c-.2.46-.64.92-1.45.92h-4.42c-.6 0-.93-.5-.69-1zm16.53-8.22l-3.05-6.34h-.04l-3.02 6.34h6.11zM161.1 169.5c0-.38.35-.73.76-.73h4.94c.45 0 .77.35.77.74v15.55a4.8 4.8 0 004.95 4.84c2.9 0 5.02-2.15 5.02-4.84v-15.55c0-.39.33-.74.77-.74h4.94c.4 0 .77.35.77.74v15.86c0 5.84-5.15 10.68-11.5 10.68-6.32 0-11.43-4.84-11.43-10.68V169.5zM53.53 110.9c0-.37.29-.69.68-.69h4.29a.7.7 0 01.68.68v19.12h8.56c.4 0 .69.32.69.68v3.9c0 .36-.29.68-.69.68H54.21a.68.68 0 01-.68-.68v-23.7zM70.94 134.34l11.26-24.1c.1-.2.36-.39.61-.39h.36c.26 0 .5.18.62.4l11.26 24.09c.21.46-.07.93-.61.93h-4c-.64 0-.93-.22-1.26-.9l-1.3-2.82H78.1l-1.3 2.86c-.18.43-.57.86-1.3.86h-3.95c-.54 0-.83-.47-.61-.93zm14.79-7.66l-2.74-5.9h-.03l-2.7 5.9h5.47zM97.65 110.5c0-.36.32-.65.68-.65h.9l14.36 13.75h.03v-12.7c0-.37.3-.69.69-.69h4.32a.7.7 0 01.68.68V135c0 .35-.32.64-.68.64h-.58c-.1 0-.4-.11-.47-.18l-14.21-14.21h-.04v13.35c0 .36-.29.68-.68.68h-4.28a.7.7 0 01-.69-.68l-.03-24.1zM123.32 110.9c0-.37.29-.69.65-.69h8.78a12.6 12.6 0 0112.63 12.5c0 6.94-5.69 12.56-12.63 12.56h-8.78c-.36 0-.65-.32-.65-.68v-23.7zm9.07 19.07c4.07 0 7.02-3.18 7.02-7.27 0-4.04-2.95-7.23-7.02-7.23h-3.46v14.5h3.46zM148.06 110.9c0-.37.29-.69.68-.69h14.9c.4 0 .69.32.69.68v3.9c0 .36-.3.68-.69.68h-9.97v4.44h8.2a.7.7 0 01.7.68v3.9c0 .4-.33.68-.7.68h-8.2v4.84h9.97c.4 0 .69.32.69.68v3.9c0 .36-.3.68-.69.68h-14.9a.68.68 0 01-.68-.68v-23.7zM168.9 131.87l1.7-2.97c.28-.47.97-.4 1.22-.22.14.07 2.73 1.97 5.1 1.97 1.45 0 2.5-.9 2.5-2.15 0-1.5-1.27-2.65-3.71-3.61-3.1-1.22-6.99-3.62-6.99-7.91 0-3.55 2.78-7.13 8.32-7.13 3.74 0 6.62 1.9 7.7 2.69.43.25.36.9.21 1.14l-1.83 2.76c-.25.4-.9.72-1.23.47-.32-.18-2.95-2.15-5.14-2.15-1.3 0-2.27.86-2.27 1.82 0 1.33 1.08 2.33 3.92 3.48 2.81 1.1 7.27 3.29 7.27 8.16 0 3.68-3.2 7.4-8.49 7.4-4.68 0-7.27-1.93-8.1-2.75-.36-.36-.46-.5-.18-1M64.98 140.07c2.9 0 6.1 1.16 8.45 3.1.3.24.34.63.07.9l-2.74 2.77a.76.76 0 01-.93.03 6.55 6.55 0 00-4.54-1.58 6.77 6.77 0 00-6.82 6.66c0 3.6 3.08 6.57 6.86 6.57 1 0 2.04-.13 3.08-.53v-1.91h-2.18c-.39 0-.66-.27-.66-.6v-3.26c0-.37.27-.63.66-.63h6.95c.35 0 .63.3.63.63l.03 8.87c0 .17-.14.43-.27.53 0 0-3.57 2.14-8.59 2.14-6.89 0-12.43-5.21-12.43-11.8 0-6.6 5.54-11.89 12.43-11.89M75.68 162.6l10.84-22.2a.7.7 0 01.59-.36h.34a.7.7 0 01.6.36l10.83 22.2c.2.44-.07.87-.59.87h-3.84c-.63 0-.9-.2-1.22-.83l-1.24-2.6h-9.42l-1.25 2.64c-.17.39-.55.79-1.24.79h-3.8c-.53 0-.8-.43-.6-.86zm14.23-7.05l-2.63-5.45h-.03l-2.6 5.45h5.26zM129 145.22h-4.95a.64.64 0 01-.66-.63V141c0-.32.28-.62.66-.62h15.37c.38 0 .66.3.66.63v3.6c0 .32-.28.62-.66.62h-4.95v17.62c0 .33-.31.63-.66.63h-4.15c-.35 0-.66-.3-.66-.63v-17.62zM143.05 141c0-.33.28-.63.66-.63h14.33c.38 0 .66.3.66.63v3.6c0 .32-.28.62-.66.62h-9.59v4.1h7.9c.34 0 .65.29.65.62v3.6c0 .36-.3.62-.66.62h-7.89v4.46h9.59c.38 0 .66.3.66.62v3.6c0 .33-.28.63-.66.63h-14.33a.64.64 0 01-.66-.63V141zM163.3 140.63c0-.32.31-.59.66-.59h.87l13.8 12.67h.04V141c0-.33.28-.63.66-.63h4.16c.34 0 .65.3.65.63v22.2c0 .33-.3.6-.65.6h-.56c-.1 0-.38-.1-.45-.17l-13.67-13.1h-.04v12.31c0 .33-.28.63-.66.63H164c-.35 0-.66-.3-.66-.63l-.04-22.2zM102.2 141c0-.33.28-.63.66-.63h10.35c4.15 0 7.55 3.2 7.55 7.13 0 3.03-2.11 5.47-5.13 6.63l4.75 8.38c.24.43 0 .96-.6.96h-4.6a.64.64 0 01-.55-.3l-4.6-8.74h-2.4v8.41c0 .33-.3.63-.65.63h-4.12a.64.64 0 01-.66-.63V141zm10.56 9.24a2.7 2.7 0 002.63-2.64c0-1.39-1.2-2.51-2.63-2.51h-5.12v5.15h5.12z"/>
                </g>
                </g>
            </svg>
            <div class="Menu__grid">
                <div class="Menu__main" data-app="menu-main">
                    <nav class="nav">
                        <ul>
                            <li>
                                <span class="nav__item  is-active is-big">Veranstaltungen</span>
                                <ul class="nav__sub-nav">
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                </ul>
                            </li>
                            <li>
                                <span class="nav__item is-big">LGS erleben</span>
                                <ul class="nav__sub-nav">
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                </ul>
                            </li>
                            <li>
                                <span class="nav__item">Besuch planen</span>
                                <ul class="nav__sub-nav">
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                </ul>
                            </li>
                            <li>
                                <span class="nav__item">Tipps für ...</span>
                                <ul class="nav__sub-nav">
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                </ul>
                            </li>
                            <li>
                                <span class="nav__item">News</span>
                                <ul class="nav__sub-nav">
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                    <li><a href="#0">Lorem</a></li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                </div>
                <div class="Menu__menu__icons">
                    <div data-app="menu-full"></div>
                    <div data-app="menu-wishlist">
                        <script type="text/json">
                            {
                                "wishlistUrl": "#0",
                                "dataUrl": "http://localhost:8888/https://www.ueberlingen2020.de/data/event-datensatz.json?full=1"
                            }
                        </script>
                    </div>
                </div>
                <div class="Menu__countdown">
                    <div data-app="leaf-counter"></div>
                </div>
                <div class="Menu__action">
                    <a href="#0" class="Menu__action__cta"><img src="http://placehold.it/24" /><span>Ticket kaufen</span></a>
                    <div class="Menu__action__icons">
                        <div class="Menu__action__text">23. April – 18. Oktober 2020</div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="Menu__banner  Menu__banner--no-bg  js-poster">
        <picture class="Menu__image">
            <source srcset="http://placehold.it/2000x580&text=XLarge%20Screens" media="(min-width: 90em)">
            <source srcset="http://placehold.it/1440x580&text=Large%20Screens" media="(min-width: 64em)">
            <source srcset="http://placehold.it/1024x500&text=Medium%20Screens" media="(min-width: 40em)">
            <img srcset="http://placehold.it/640x400&text=Default%20Image" alt="">
        </picture>
    </div>
</header>

Styleguide sections.menu.3
*/
.Menu__banner--no-bg:before {
  display: none; }

/*
Masonry

user ```.hide@medium``` or ```.show@medium``` to show / hide the ```.Masonry__col```

Markup:
<section class="Masonry">
    <div class="Masonry__grid" data-app="masonry">
        <div class="Masonry__item-sizer"></div>
        <div class="Masonry__gutter-sizer"></div>
        <div class="Masonry__item">
            <article class="combo">
                <h2 class="combo__supertitle">Immer informiert</h2>
                <h1 class="combo__title">Lorem ispum dolor<br>– es geht voran</h1>
            </article>
        </div>
        <div class="Masonry__item  Masonry__item--space"></div>
        <div class="Masonry__item">
            <article class="teaser">
                <div class="teaser__image-container">
                    <img src="http://placehold.it/640x400" alt="" class="teaser__image">
                    <a href="#0" class="teaser__image-action"><img src="http://placehold.it/24">Baustellenreport</a>
                </div>
                <h1 class="teaser__title">Vereine in Aufbruchstimmung, lorem ipsum dolor lorem ipsum dolor</h1>
                <div class="teaser__date">11. Oktober 2018</div>
                <div class="teaser__text">
                    Am 14. Oktober wird die Landesgartenschaufahne in Lahr an Überlingen überlegen. „Dann sind wir ganz offiziell Landesgartenschaustadt. Da kann man schon mal aufgeregt sein“, sagte Oberbürgermeister Jan Zeitler am Dienstag bei der zweiten Informationsveranstaltung für die Überlinger Vereine. 150 Interessierte waren …
                </div>
                <a class="teaser__action">Alle Baustellenreports ansehen</a>
            </article>
        </div>
        <div class="Masonry__item">
            <article class="teaser">
                <div class="teaser__image-container">
                    <img src="http://placehold.it/640x400" alt="" class="teaser__image">
                    <a href="#0" class="teaser__image-action"><img src="http://placehold.it/24">Baustellenreport</a>
                </div>
                <h1 class="teaser__title">Vereine in Aufbruchstimmung, lorem ipsum dolor lorem ipsum dolor</h1>
                <div class="teaser__date">11. Oktober 2018</div>
                <div class="teaser__text">
                    Am 14. Oktober wird die Landesgartenschaufahne in Lahr an Überlingen überlegen. „Dann sind wir ganz offiziell Landesgartenschaustadt. Da kann man schon mal aufgeregt sein“, sagte Oberbürgermeister Jan Zeitler am Dienstag bei der zweiten Informationsveranstaltung für die Überlinger Vereine. 150 Interessierte waren …
                </div>
                <a class="teaser__action">Alle Baustellenreports ansehen</a>
            </article>
        </div>
        <div class="Masonry__item">
            <article class="teaser">
                <div class="teaser__image-container">
                    <img src="http://placehold.it/640x400" alt="" class="teaser__image">
                    <a href="#0" class="teaser__image-action"><img src="http://placehold.it/24">Baustellenreport</a>
                </div>
                <h1 class="teaser__title">Vereine in Aufbruchstimmung, lorem ipsum dolor lorem ipsum dolor</h1>
                <div class="teaser__date">11. Oktober 2018</div>
                <div class="teaser__text">
                    Am 14. Oktober wird die Landesgartenschaufahne in Lahr an Überlingen überlegen. „Dann sind wir ganz offiziell Landesgartenschaustadt. Da kann man schon mal aufgeregt sein“, sagte Oberbürgermeister Jan Zeitler am Dienstag bei der zweiten Informationsveranstaltung für die Überlinger Vereine. 150 Interessierte waren …
                </div>
                <a class="teaser__action">Alle Baustellenreports ansehen</a>
            </article>
        </div>
        <div class="Masonry__item">
            <article class="teaser">
                <div class="teaser__image-container">
                    <img src="http://placehold.it/640x400" alt="" class="teaser__image">
                    <a href="#0" class="teaser__image-action"><img src="http://placehold.it/24">Baustellenreport</a>
                </div>
                <h1 class="teaser__title">Vereine in Aufbruchstimmung, lorem ipsum dolor lorem ipsum dolor</h1>
                <div class="teaser__date">11. Oktober 2018</div>
                <div class="teaser__text">
                    Am 14. Oktober wird die Landesgartenschaufahne in Lahr an Überlingen überlegen. „Dann sind wir ganz offiziell Landesgartenschaustadt. Da kann man schon mal aufgeregt sein“, sagte Oberbürgermeister Jan Zeitler am Dienstag bei der zweiten Informationsveranstaltung für die Überlinger Vereine. 150 Interessierte waren …
                </div>
                <a class="teaser__action">Alle Baustellenreports ansehen</a>
            </article>
        </div>
        <div class="Masonry__item">
            <article class="teaser">
                <div class="teaser__image-container">
                    <img src="http://placehold.it/640x400" alt="" class="teaser__image">
                    <a href="#0" class="teaser__image-action"><img src="http://placehold.it/24">Baustellenreport</a>
                </div>
                <h1 class="teaser__title">Vereine in Aufbruchstimmung, lorem ipsum dolor lorem ipsum dolor</h1>
                <div class="teaser__date">11. Oktober 2018</div>
                <div class="teaser__text">
                    Am 14. Oktober wird die Landesgartenschaufahne in Lahr an Überlingen überlegen. „Dann sind wir ganz offiziell Landesgartenschaustadt. Da kann man schon mal aufgeregt sein“, sagte Oberbürgermeister Jan Zeitler am Dienstag bei der zweiten Informationsveranstaltung für die Überlinger Vereine. 150 Interessierte waren …
                </div>
                <a class="teaser__action">Alle Baustellenreports ansehen</a>
            </article>
        </div>
    </div>
</section>

Styleguide sections.masonry
*/
.Masonry {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px; }

.Masonry__grid {
  margin-top: -60px; }
  @media (min-width: 40em) {
    .Masonry__grid {
      margin-top: -80px; } }

.Masonry__item {
  margin-top: 60px; }
  @media (min-width: 40em) {
    .Masonry__item {
      width: 46.42857%;
      margin-top: 80px; } }
  @media (min-width: 64em) {
    .Masonry__item {
      width: 39.28571%;
      margin-left: 7.14286%; } }

.Masonry__item--space {
  display: none; }
  @media (min-width: 40em) {
    .Masonry__item--space {
      height: 250px;
      display: block; } }
  @media (min-width: 64em) {
    .Masonry__item--space {
      height: 200px; } }

@media (min-width: 40em) {
  .Masonry__item-sizer {
    width: 46.42857%; } }

@media (min-width: 64em) {
  .Masonry__item-sizer {
    width: 39.28571%;
    margin-left: 7.14286%; } }

@media (min-width: 40em) {
  .Masonry__gutter-sizer {
    width: 7.14286%; } }

@media (min-width: 64em) {
  .Masonry__gutter-sizer {
    width: 0; } }

/*
Gallery

Markup:
<div class="Gallery">
    <div class="Gallery__grid">
        <div class="Gallery__grid__wrapper">
            <div class="Gallery__row">
                <div class="Gallery__col">
                    <img src="http://placehold.it/1440x500" alt="">
                    <div class="Gallery__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis minima nam suscipit rerum mollitia! Unde?</div>
                </div>
            </div>
            <div class="Gallery__row">
                <div class="Gallery__col">
                    <img src="http://placehold.it/710x500" alt="">
                </div>
                <div class="Gallery__col">
                    <img src="http://placehold.it/710x500" alt="">
                    <div class="Gallery__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis minima nam suscipit rerum mollitia! Unde?</div>
                </div>
            </div>
            <div class="Gallery__row">
                <div class="Gallery__col">
                    <img src="http://placehold.it/280x400" alt="">
                </div>
                <div class="Gallery__col">
                    <img src="http://placehold.it/800x400" alt="">
                </div>
                <div class="Gallery__col">
                    <img src="http://placehold.it/320x400" alt="">
                </div>
            </div>
        </div>
    </div>
</div>

Styleguide sections.gallery
*/
.Gallery {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 0; }
  .Gallery img {
    max-width: 100%; }

@media (min-width: 40em) {
  .Gallery__grid {
    margin-left: -20px;
    display: block;
    font-size: 0; }
    .Gallery__grid > * {
      padding-left: 20px;
      vertical-align: top;
      display: inline-block;
      font-size: 16px; } }

@media (min-width: 40em) {
  .Gallery__grid__wrapper {
    width: 100%;
    position: relative; } }

@media (min-width: 64em) {
  .Gallery__grid__wrapper {
    width: 85.71429%;
    position: relative;
    right: auto;
    left: 7.14286%; } }

.Gallery__row {
  font-size: 0; }
  @media (min-width: 40em) {
    .Gallery__row {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }
  .Gallery__row + .Gallery__row {
    margin-top: 20px; }
  .Gallery__row.align--right {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    text-align: right; }

.Gallery__col {
  display: block; }
  @media (min-width: 40em) {
    .Gallery__col {
      display: inline-block; } }
  .Gallery__col + .Gallery__col {
    margin-top: 20px; }
    @media (min-width: 40em) {
      .Gallery__col + .Gallery__col {
        margin-top: 0;
        margin-left: 20px; } }

.Gallery__text {
  max-width: 700px;
  margin-top: 10px;
  font-weight: 400;
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.41; }
  @media (min-width: 40em) {
    .Gallery__text {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .Gallery__text a:not([class]) {
    color: currentColor; }
    .Gallery__text a:not([class]):hover {
      opacity: 0.75; }
  .Gallery__text *:first-child {
    margin-top: 0; }
  .Gallery__text *:last-child {
    margin-bottom: 0; }

/*
Image

Markup:
<div class="Image">
    <div class="Image__grid">
        <div class="Image__container">
            <img src="http://placehold.it/1400x650" class="fluid">
            <a href="#0"></a>
        </div>
    </div>
</div>

Styleguide sections.image
*/
.Image {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px; }

@media (min-width: 40em) {
  .Image__grid {
    margin-left: -20px;
    display: block;
    font-size: 0; }
    .Image__grid > * {
      padding-left: 20px;
      vertical-align: top;
      display: inline-block;
      font-size: 16px; } }

.Image__container {
  position: relative; }
  @media (min-width: 40em) {
    .Image__container {
      width: 85.71429%;
      position: relative;
      right: auto;
      left: 7.14286%; } }
  .Image__container a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }

/*
Container

<section class="Container">
    <div class="Container__grid">
        <div class="Container__wrapper">
            <a href="#0" class="Container__back">zurück zur Übersicht</a>
        </div>
    </div>
</section>

Styleguide sections.container
*/
.Container {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px; }

@media (min-width: 40em) {
  .Container__grid {
    margin-left: -20px;
    display: block;
    font-size: 0; }
    .Container__grid > * {
      padding-left: 20px;
      vertical-align: top;
      display: inline-block;
      font-size: 16px; } }

@media (min-width: 90em) {
  .Container__wrapper {
    width: 85.71429%;
    position: relative;
    right: auto;
    left: 7.14286%; } }

.Container__back {
  margin: 0;
  padding-left: 40px;
  position: relative;
  font-size: 12px;
  text-decoration: none;
  letter-spacing: 0;
  color: #4a4a4a; }
  .Container__back:before {
    content: '';
    width: 15px;
    height: 1px;
    background: currentColor;
    display: inline-block;
    position: absolute;
    top: 50%;
    margin-top: -1px;
    -webkit-transition: 0.1s;
    -o-transition: 0.1s;
    transition: 0.1s; }
  .Container__back:after {
    content: '';
    width: 9px;
    height: 9px;
    display: inline-block;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    top: 50%;
    margin-top: -5px;
    -webkit-transition: 0.1s;
    -o-transition: 0.1s;
    transition: 0.1s; }
  .Container__back:hover {
    cursor: pointer; }
  .Container__back::before {
    left: 5px; }
  .Container__back::after {
    left: 0;
    background-image: url(data:image/svg+xml;base64,phn2zyb3awr0ad0imtiiighlawdodd0imtmiihzpzxdcb3g9ijagmcaxmiaxmyigeg1sbnm9imh0dha6ly93d3cudzmub3jnlziwmdavc3znij48cgf0acbkpsjnlje3mya2ljvdmy43nzegns4wnia4ljizmyayljygmtegmew4ljgyidyunsaxmsaxm0m4ljizmyaxmc4zotggmy43nya3ljkzos4xnzmgni41eiigzmlsbd0iizrhnge0ysigzmlsbc1ydwxlpsjldmvub2rkii8+pc9zdmc+cg==); }
  .Container__back:hover::before {
    width: 20px; }

/*
Event Blocks

Markup:
<section class="EventBlocks">
    <div class="EventBlocks__capsule">
        <div class="EventBlocks__capsule__wrapper">
            <h2 class="EventBlocks__title">Ganztägige Veranstaltungen</h2>
            <div class="event-block  EventBlocks__item">
                <div class="event-block__image-container">
                    <picture>
                        <source srcset="http://unsplash.it/400/300" media="(min-width: 64em)">
                        <source srcset="http://unsplash.it/1024/576" media="(min-width: 40em)">
                        <img srcset="http://unsplash.it/640/480" alt="" class="fluid">
                    </picture>
                </div>
                <div class="event-block__time-container">
                    <div class="event-block__date">Samstag, 01. April 2020</div>
                    <div class="event-block__time">9:00 – 10:00 Uhr</div>
                    <img src="http://placehold.it/36" class="event-block__like">
                    <ul class="fact-list  event-block__time-icons">
                        <li class="fact-list__item">
                            <img src="http://placehold.it/24" alt="">
                            <span>Wöchentlich</span>
                        </li>
                        <li class="fact-list__item">
                            <img src="http://placehold.it/24" alt="">
                            <span>Termin merken</span>
                        </li>
                    </ul>
                </div>
                <div class="event-block__details">
                    <div class="event-block__title-container">
                        <h2 class="event-block__title">Lorem ipsum dolor sit amet</h2>
                        <h3 class="event-block__subtitle">consetetur sadipscing elitr, sed diam non</h3>
                    </div>
                    <div class="event-block__text  isHiddenOnMobile">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur quasi consequatur hic. Ex necessitatibus ad molestias obcaecati possimus corporis accusantium.</div>
                    <a href="#0" class="event-block__action"><span>Mehr Details</span><img src="http://placehold.it/24"></a>
                </div>
                <div class="event-block__facts">
                    <ul class="fact-list">
                        <li class="fact-list__item">
                            <img src="http://placehold.it/24" alt="">
                            <span>Natur und Gesundheit</span>
                        </li>
                        <li class="fact-list__item">
                            <img src="http://placehold.it/24" alt="">
                            <span>Menzinger Gärten</span>
                        </li>
                        <li class="fact-list__item  isFlexHiddenOnMobile">
                            <img src="http://placehold.it/24" alt="">
                            <span>Netzwerk Garten Obst-und Gartenbauvereine und LandFrauen</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="event-block  EventBlocks__item">
                <div class="event-block__image-container">
                    <picture>
                        <source srcset="http://unsplash.it/400/300" media="(min-width: 64em)">
                        <source srcset="http://unsplash.it/1024/576" media="(min-width: 40em)">
                        <img srcset="http://unsplash.it/640/480" alt="" class="fluid">
                    </picture>
                </div>
                <div class="event-block__time-container">
                    <div class="event-block__time">9:00 – 10:00 Uhr</div>
                    <img src="http://placehold.it/36" class="event-block__like">
                    <ul class="fact-list  event-block__time-icons">
                        <li class="fact-list__item">
                            <img src="http://placehold.it/24" alt="">
                            <span>Wöchentlich</span>
                        </li>
                        <li class="fact-list__item">
                            <img src="http://placehold.it/24" alt="">
                            <span>Termin merken</span>
                        </li>
                    </ul>
                </div>
                <div class="event-block__details">
                    <div class="event-block__title-container">
                        <h2 class="event-block__title">Lorem ipsum dolor sit amet</h2>
                        <h3 class="event-block__subtitle">consetetur sadipscing elitr, sed diam non</h3>
                    </div>
                    <div class="event-block__text  isHiddenOnMobile">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur quasi consequatur hic. Ex necessitatibus ad molestias obcaecati possimus corporis accusantium.</div>
                    <a href="#0" class="event-block__action"><span>Mehr Details</span><img src="http://placehold.it/24"></a>
                </div>
                <div class="event-block__facts">
                    <ul class="fact-list">
                        <li class="fact-list__item">
                            <img src="http://placehold.it/24" alt="">
                            <span>Natur und Gesundheit</span>
                        </li>
                        <li class="fact-list__item">
                            <img src="http://placehold.it/24" alt="">
                            <span>Menzinger Gärten</span>
                        </li>
                        <li class="fact-list__item  isFlexHiddenOnMobile">
                            <img src="http://placehold.it/24" alt="">
                            <span>Netzwerk Garten Obst-und Gartenbauvereine und LandFrauen</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="EventBlocks__actions">
                <a href="#0" class="EventBlocks__action">
                    <img src="http://placehold.it/24" alt="">
                    <span>Zur Tagesübersicht</span>
                </a>
            </div>
        </div>
    </div>
</section>

Styleguide sections.event-blocks
*/
.EventBlocks {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px; }

.EventBlocks__capsule {
  margin-left: -20px;
  display: block;
  font-size: 0; }
  .EventBlocks__capsule > * {
    padding-left: 20px;
    vertical-align: top;
    display: inline-block;
    font-size: 16px; }

.EventBlocks__capsule__wrapper {
  width: 100%;
  position: relative; }
  @media (min-width: 90em) {
    .EventBlocks__capsule__wrapper {
      width: 85.71429%;
      position: relative;
      right: auto;
      left: 7.14286%; } }

.EventBlocks__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 36px;
  color: #18492b;
  line-height: 1.26;
  text-decoration: underline;
  margin-bottom: 20px;
  hyphens: auto; }
  @media (min-width: 40em) {
    .EventBlocks__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .EventBlocks__title {
    font-family: "UrgeText-SemiBold", serif; }
  .EventBlocks__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .EventBlocks__title {
      font-size: 45px; } }
  @media (min-width: 40em) {
    .EventBlocks__title {
      margin-bottom: 40px; } }
  @media (min-width: 64em) {
    .EventBlocks__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }

.EventBlocks__item + .EventBlocks__item {
  margin-top: 20px; }

.EventBlocks__actions {
  margin-top: 40px;
  text-align: center; }
  @media (min-width: 40em) {
    .EventBlocks__actions {
      margin-top: 80px; } }

.EventBlocks__action {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  -webkit-box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
          box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
  background: #ce115d; }
  @media (min-width: 40em) {
    .EventBlocks__action {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .EventBlocks__action svg,
  .EventBlocks__action img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .EventBlocks__action * + svg,
  .EventBlocks__action * + img {
    margin-right: 0;
    margin-left: 15px; }
  .EventBlocks__action:hover {
    cursor: pointer;
    color: #ffffff; }
  .EventBlocks__action:hover {
    background-color: #870b3d; }
  .EventBlocks__action:disabled, .EventBlocks__action.is-disabled {
    pointer-events: none;
    opacity: 0.25; }

/*
Event Cards

Markup:
<section class="EventCards" data-compose="filled">
    <div class="EventCards__capsule">
        <div class="EventCards__capsule__wrapper">
            <h2 class="EventCards__title">Wöchentlich von April – Oktober</h2>
            <div class="EventCards__container">
                <div class="EventCards__item">
                    <div class="event-card">
                        <img src="http://placehold.it/36" class="event-card__like">
                        <div class="event-card__facts">
                            <ul class="fact-list">
                                <li class="fact-list__item">
                                    <img src="http://placehold.it/24" alt="">
                                    <span>Donnerstags 10:00 – 18:00 Uhr</span>
                                </li>
                                <li class="fact-list__item  isFlexHiddenOnMobile">
                                    <img src="http://placehold.it/24" alt="">
                                    <span>Kapuziner Kirche</span>
                                </li>
                                <li class="fact-list__item  isFlexHiddenOnMobile">
                                    <img src="http://placehold.it/24" alt="">
                                    <span>Termin merken</span>
                                </li>
                            </ul>
                        </div>
                        <div class="event-card__details">
                            <div class="event-card__category">
                                <img src="http://placehold.it/24" alt="">
                                <span>Gesundheit und Natur</span>
                            </div>
                            <h2 class="event-card__title">Music & Dance lorem ispum dolor sit ametlorem ispum dolor sit amet</h2>
                        </div>
                        <div class="event-card__mobile-facts">
                            <ul class="fact-list">
                                <li class="fact-list__item">
                                    <img src="http://placehold.it/24" alt="">
                                    <span>Gesundheit und Natur</span>
                                </li>
                                <li class="fact-list__item">
                                    <img src="http://placehold.it/24" alt="">
                                    <span>Kapuziner Kirche</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="EventCards__item">
                    <div class="event-card">
                        <img src="http://placehold.it/36" class="event-card__like">
                        <div class="event-card__facts">
                            <ul class="fact-list">
                                <li class="fact-list__item">
                                    <img src="http://placehold.it/24" alt="">
                                    <span>Donnerstags 10:00 – 18:00 Uhr</span>
                                </li>
                                <li class="fact-list__item  isFlexHiddenOnMobile">
                                    <img src="http://placehold.it/24" alt="">
                                    <span>Kapuziner Kirche</span>
                                </li>
                                <li class="fact-list__item  isFlexHiddenOnMobile">
                                    <img src="http://placehold.it/24" alt="">
                                    <span>Termin merken</span>
                                </li>
                            </ul>
                        </div>
                        <div class="event-card__details">
                            <div class="event-card__category">
                                <img src="http://placehold.it/24" alt="">
                                <span>Gesundheit und Natur</span>
                            </div>
                            <h2 class="event-card__title">Music & Dance lorem ispum dolor sit ametlorem ispum dolor sit amet</h2>
                        </div>
                        <div class="event-card__mobile-facts">
                            <ul class="fact-list">
                                <li class="fact-list__item">
                                    <img src="http://placehold.it/24" alt="">
                                    <span>Gesundheit und Natur</span>
                                </li>
                                <li class="fact-list__item">
                                    <img src="http://placehold.it/24" alt="">
                                    <span>Kapuziner Kirche</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="EventCards__item">
                    <div class="event-card">
                        <img src="http://placehold.it/36" class="event-card__like">
                        <div class="event-card__facts">
                            <ul class="fact-list">
                                <li class="fact-list__item">
                                    <img src="http://placehold.it/24" alt="">
                                    <span>Donnerstags 10:00 – 18:00 Uhr</span>
                                </li>
                                <li class="fact-list__item  isFlexHiddenOnMobile">
                                    <img src="http://placehold.it/24" alt="">
                                    <span>Kapuziner Kirche</span>
                                </li>
                                <li class="fact-list__item  isFlexHiddenOnMobile">
                                    <img src="http://placehold.it/24" alt="">
                                    <span>Termin merken</span>
                                </li>
                            </ul>
                        </div>
                        <div class="event-card__details">
                            <div class="event-card__category">
                                <img src="http://placehold.it/24" alt="">
                                <span>Gesundheit und Natur</span>
                            </div>
                            <h2 class="event-card__title">Music & Dance lorem ispum dolor sit ametlorem ispum dolor sit amet</h2>
                        </div>
                        <div class="event-card__mobile-facts">
                            <ul class="fact-list">
                                <li class="fact-list__item">
                                    <img src="http://placehold.it/24" alt="">
                                    <span>Gesundheit und Natur</span>
                                </li>
                                <li class="fact-list__item">
                                    <img src="http://placehold.it/24" alt="">
                                    <span>Kapuziner Kirche</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="EventCards__item">
                    <div class="event-card">
                        <img src="http://placehold.it/36" class="event-card__like">
                        <div class="event-card__facts">
                            <ul class="fact-list">
                                <li class="fact-list__item">
                                    <img src="http://placehold.it/24" alt="">
                                    <span>Donnerstags 10:00 – 18:00 Uhr</span>
                                </li>
                                <li class="fact-list__item  isFlexHiddenOnMobile">
                                    <img src="http://placehold.it/24" alt="">
                                    <span>Kapuziner Kirche</span>
                                </li>
                                <li class="fact-list__item  isFlexHiddenOnMobile">
                                    <img src="http://placehold.it/24" alt="">
                                    <span>Termin merken</span>
                                </li>
                            </ul>
                        </div>
                        <div class="event-card__details">
                            <div class="event-card__category">
                                <img src="http://placehold.it/24" alt="">
                                <span>Gesundheit und Natur</span>
                            </div>
                            <h2 class="event-card__title">Music & Dance lorem ispum dolor sit ametlorem ispum dolor sit amet</h2>
                        </div>
                        <div class="event-card__mobile-facts">
                            <ul class="fact-list">
                                <li class="fact-list__item">
                                    <img src="http://placehold.it/24" alt="">
                                    <span>Gesundheit und Natur</span>
                                </li>
                                <li class="fact-list__item">
                                    <img src="http://placehold.it/24" alt="">
                                    <span>Kapuziner Kirche</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="EventCards__item">
                    <div class="event-card">
                        <img src="http://placehold.it/36" class="event-card__like">
                        <div class="event-card__facts">
                            <ul class="fact-list">
                                <li class="fact-list__item">
                                    <img src="http://placehold.it/24" alt="">
                                    <span>Donnerstags 10:00 – 18:00 Uhr</span>
                                </li>
                                <li class="fact-list__item  isFlexHiddenOnMobile">
                                    <img src="http://placehold.it/24" alt="">
                                    <span>Kapuziner Kirche</span>
                                </li>
                                <li class="fact-list__item  isFlexHiddenOnMobile">
                                    <img src="http://placehold.it/24" alt="">
                                    <span>Termin merken</span>
                                </li>
                            </ul>
                        </div>
                        <div class="event-card__details">
                            <div class="event-card__category">
                                <img src="http://placehold.it/24" alt="">
                                <span>Gesundheit und Natur</span>
                            </div>
                            <h2 class="event-card__title">Music & Dance lorem ispum dolor sit ametlorem ispum dolor sit amet</h2>
                        </div>
                        <div class="event-card__mobile-facts">
                            <ul class="fact-list">
                                <li class="fact-list__item">
                                    <img src="http://placehold.it/24" alt="">
                                    <span>Gesundheit und Natur</span>
                                </li>
                                <li class="fact-list__item">
                                    <img src="http://placehold.it/24" alt="">
                                    <span>Kapuziner Kirche</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Styleguide sections.event-cards
*/
.EventCards {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #f8f8f8; }

.EventCards__capsule {
  margin-left: -20px;
  display: block;
  font-size: 0; }
  .EventCards__capsule > * {
    padding-left: 20px;
    vertical-align: top;
    display: inline-block;
    font-size: 16px; }

.EventCards__capsule__wrapper {
  width: 100%;
  position: relative; }
  @media (min-width: 90em) {
    .EventCards__capsule__wrapper {
      width: 85.71429%;
      position: relative;
      right: auto;
      left: 7.14286%; } }

.EventCards__container {
  margin-left: -20px;
  display: block;
  font-size: 0;
  margin-top: -20px; }
  .EventCards__container > * {
    padding-left: 20px;
    vertical-align: top;
    display: inline-block;
    font-size: 16px; }

.EventCards__item {
  margin-top: 20px;
  width: 100%;
  position: relative; }
  @media (min-width: 64em) {
    .EventCards__item {
      width: 50%;
      position: relative; } }

.EventCards__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 36px;
  color: #18492b;
  line-height: 1.26;
  text-decoration: underline;
  margin-bottom: 20px;
  hyphens: auto; }
  @media (min-width: 40em) {
    .EventCards__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .EventCards__title {
    font-family: "UrgeText-SemiBold", serif; }
  .EventCards__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .EventCards__title {
      font-size: 45px; } }
  @media (min-width: 40em) {
    .EventCards__title {
      margin-bottom: 40px; } }
  @media (min-width: 64em) {
    .EventCards__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }

/*
Event Teaser

.is-canceled - Abgesagt
.is-postponed - Verschoben

Markup:
<article class="EventTeaser  {{modifier_class}}">
    <div class="EventTeaser__grid">
        <div class="EventTeaser__container">
            <img src="http://placehold.it/36" class="EventTeaser__like">
            <div class="EventTeaser__head">
                <div class="EventTeaser__category">
                    <img src="http://placehold.it/24">
                    <span>Gesundheit und Natur</span>
                </div>
                <h2 class="EventTeaser__title">Leckeres mit Kräutern</h2>
                <h3 class="EventTeaser__subtitle">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam non</h3>
            </div>
            <div class="EventTeaser__body">
                <div class="EventTeaser__aside">
                    <ul class="fact-list">
                        <li class="fact-list__item">
                            <img src="http://placehold.it/24" alt=""/>
                            <span>Donnerstag, 28.05.2020<br /><span class="EventTeaser__fact-time">9:00 – 17:00 Uhr</span></span>
                        </li>
                        <li class="fact-list__item">
                            <img src="http://placehold.it/24" alt=""/>
                            <span>Menzinger Gärten<br /><a href="#0">Route finden</a></span>
                        </li>
                        <li class="fact-list__item">
                            <img src="http://placehold.it/24" alt=""/>
                            <span>Netzwerk Garten Obst-<br />und Gartenbauvereine und LandFrauen</span>
                        </li>
                        <li class="fact-list__item  EventTeaser__like-fact">
                            <img src="http://placehold.it/24" alt=""/>
                            <span>Termin merken</span>
                        </li>
                    </ul>
                    <div class="share-panel  EventTeaser__share-panel--aside">
                        <div class="share-panel__text">Diese Seite teilen auf:</div>
                        <ul class="share-panel__list">
                            <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M17 2v4h-2c-.69 0-1 .81-1 1.5V10h3v4h-3v8h-4v-8H7v-4h3V6a4 4 0 0 1 4-4h3z"/></svg></a></li>
                            <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2zm-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6zm9.65 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/></svg></a></li>
                            <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M22.92 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.83 4.5 17.72 4 16.46 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98-3.56-.18-6.73-1.89-8.84-4.48-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.9 20.29 6.16 21 8.58 21c7.88 0 12.21-6.54 12.21-12.21 0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/></svg></a></li>
                            <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M10 16.5v-9l6 4.5-6 4.5zM20 4.4c-.6-.2-4.3-.4-8-.4s-7.4.19-8 .38C2.44 4.9 2 8.4 2 12c0 3.59.44 7.1 2 7.61.6.2 4.3.39 8 .39s7.4-.19 8-.39c1.56-.51 2-4.02 2-7.61 0-3.6-.44-7.09-2-7.6z"/></svg></a></li>
                        </ul>
                    </div>
                </div>
                <div class="EventTeaser__main">
                    <div class="combo">
                        <div class="combo__text">
                            <p>Schnell zurbereitet und gesund lorem ispum dolor sit met lorem soloriesmbus Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                            <p><b>Schnell zurbereitet und gesund lorem ispum dolor sit met</b></p>
                            <p>Schnell zurbereitet und gesund lorem ispum dolor sit met lorem soloriesmbus Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="share-panel  EventTeaser__share-panel--main">
                <div class="share-panel__text">Diese Seite teilen auf:</div>
                <ul class="share-panel__list">
                    <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M17 2v4h-2c-.69 0-1 .81-1 1.5V10h3v4h-3v8h-4v-8H7v-4h3V6a4 4 0 0 1 4-4h3z"/></svg></a></li>
                    <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2zm-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6zm9.65 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/></svg></a></li>
                    <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M22.92 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.83 4.5 17.72 4 16.46 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98-3.56-.18-6.73-1.89-8.84-4.48-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.9 20.29 6.16 21 8.58 21c7.88 0 12.21-6.54 12.21-12.21 0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/></svg></a></li>
                    <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M10 16.5v-9l6 4.5-6 4.5zM20 4.4c-.6-.2-4.3-.4-8-.4s-7.4.19-8 .38C2.44 4.9 2 8.4 2 12c0 3.59.44 7.1 2 7.61.6.2 4.3.39 8 .39s7.4-.19 8-.39c1.56-.51 2-4.02 2-7.61 0-3.6-.44-7.09-2-7.6z"/></svg></a></li>
                </ul>
            </div>
        </div>
    </div>
</article>

Styleguide sections.event-teaser
*/
.EventTeaser {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px; }

.EventTeaser__grid {
  margin-left: -20px;
  display: block;
  font-size: 0; }
  .EventTeaser__grid > * {
    padding-left: 20px;
    vertical-align: top;
    display: inline-block;
    font-size: 16px; }

.EventTeaser__container {
  width: 100%;
  position: relative; }
  @media (min-width: 90em) {
    .EventTeaser__container {
      width: 85.71429%;
      position: relative;
      right: auto;
      left: 7.14286%; } }

.EventTeaser__head {
  max-width: 800px;
  margin-bottom: 40px; }

.EventTeaser__body {
  margin-left: -20px;
  display: block;
  font-size: 0; }
  .EventTeaser__body > * {
    padding-left: 20px;
    vertical-align: top;
    display: inline-block;
    font-size: 16px; }
  .is-canceled .EventTeaser__body,
  .is-postponed .EventTeaser__body {
    position: relative; }
    .is-canceled .EventTeaser__body::after, .is-canceled .EventTeaser__body::before,
    .is-postponed .EventTeaser__body::after,
    .is-postponed .EventTeaser__body::before {
      content: '';
      position: absolute; }
    .is-canceled .EventTeaser__body::after,
    .is-postponed .EventTeaser__body::after {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: rgba(255, 255, 255, 0.75); }
    .is-canceled .EventTeaser__body::before,
    .is-postponed .EventTeaser__body::before {
      content: 'Abgesagt';
      left: 50%;
      top: 10%;
      z-index: 1;
      -webkit-transform: translate(-50%, 0) rotate(-11.75deg);
          -ms-transform: translate(-50%, 0) rotate(-11.75deg);
              transform: translate(-50%, 0) rotate(-11.75deg);
      font-family: "UrgeText-SemiBold", serif;
      font-size: 60px;
      line-height: 1.16;
      color: #ce115d; }
  .is-postponed .EventTeaser__body::before {
    content: 'Verschoben'; }

.EventTeaser__aside {
  width: 100%;
  position: relative;
  margin-bottom: 40px; }
  @media (min-width: 40em) {
    .EventTeaser__aside {
      margin-bottom: 60px; } }
  @media (min-width: 64em) {
    .EventTeaser__aside {
      margin-bottom: 0;
      width: 28.57143%;
      position: relative; } }

.EventTeaser__main {
  width: 100%;
  position: relative; }
  @media (min-width: 64em) {
    .EventTeaser__main {
      width: 64.28571%;
      position: relative;
      right: auto;
      left: 7.14286%; } }

.EventTeaser__category {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 20px; }
  .EventTeaser__category img,
  .EventTeaser__category svg {
    width: 20px;
    height: 20px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 20px;
            flex: 0 0 20px; }
    @media (min-width: 40em) {
      .EventTeaser__category img,
      .EventTeaser__category svg {
        width: 24px;
        height: 24px;
        -webkit-box-flex: 0;
            -ms-flex: 0 0 24px;
                flex: 0 0 24px; } }
  .EventTeaser__category span:not([class]) {
    margin: 0;
    font-family: sans-serif;
    letter-spacing: 0;
    font-size: 11px;
    font-weight: 400;
    color: "inherit";
    line-height: 1.15;
    margin-left: 10px;
    font-weight: 700; }
    @media (min-width: 40em) {
      .EventTeaser__category span:not([class]) {
        font-size: 14px; } }
    .fl .EventTeaser__category span:not([class]) {
      font-family: "Noto Sans", sans-serif; }
    @media (min-width: 40em) {
      .EventTeaser__category span:not([class]) {
        margin-left: 15px; } }
    .EventTeaser__category span:not([class]) a {
      color: inherit; }
      .EventTeaser__category span:not([class]) a:hover {
        opacity: 0.75; }

.EventTeaser__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-family: serif;
  font-size: 28px;
  color: #18492b;
  line-height: 1.25; }
  @media (min-width: 40em) {
    .EventTeaser__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .EventTeaser__title {
    font-family: "UrgeText-SemiBold", serif; }
  .fl .EventTeaser__title {
    font-family: "Noto Sans", sans-serif; }
  .EventTeaser__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .EventTeaser__title {
      font-size: 36px; } }

.EventTeaser__subtitle {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-family: serif;
  font-size: 20px;
  color: #18492b;
  line-height: 1.27; }
  @media (min-width: 40em) {
    .EventTeaser__subtitle {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .EventTeaser__subtitle {
    font-family: "UrgeText-SemiBold", serif; }
  .fl .EventTeaser__subtitle {
    font-family: "Noto Sans", sans-serif; }
  .EventTeaser__subtitle sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .EventTeaser__subtitle {
      font-size: 26px; } }

.EventTeaser__fact-time {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-family: serif;
  font-size: 20px;
  font-weight: 700;
  color: "inherit";
  line-height: 1.3; }
  @media (min-width: 40em) {
    .EventTeaser__fact-time {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .EventTeaser__fact-time {
    font-family: "UrgeText-SemiBold", serif; }
  .fl .EventTeaser__fact-time {
    font-family: "Noto Sans", sans-serif; }
  .EventTeaser__fact-time sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .EventTeaser__fact-time {
      font-size: 25px; } }

.EventTeaser__like-fact {
  display: none; }
  @media (min-width: 64em) {
    .EventTeaser__like-fact {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

.EventTeaser__like {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  right: 0;
  color: #ce115d; }
  @media (min-width: 64em) {
    .EventTeaser__like {
      display: none; } }

.EventTeaser__share-panel--aside {
  display: none; }
  @media (min-width: 64em) {
    .EventTeaser__share-panel--aside {
      margin-top: 40px;
      display: block; } }

.EventTeaser__share-panel--main {
  margin-top: 40px;
  text-align: center; }
  @media (min-width: 64em) {
    .EventTeaser__share-panel--main {
      display: none; } }

/*
mit Badge

Markup:
<article class="EventTeaser">
    <div class="EventTeaser__grid">
        <div class="EventTeaser__container">
            <img src="http://placehold.it/36" class="EventTeaser__like">
            <div class="EventTeaser__head">
                <div class="EventTeaser__category">
                    <img src="http://placehold.it/24">
                    <span>Gesundheit und Natur</span>
                </div>
                <h2 class="EventTeaser__title">Leckeres mit Kräutern</h2>
                <h3 class="EventTeaser__subtitle">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam non</h3>
            </div>
            <div class="EventTeaser__body">
                <div class="EventTeaser__aside">
                    <ul class="fact-list">
                        <li class="fact-list__item">
                            <img src="http://placehold.it/24" alt=""/>
                            <span>Donnerstag, 28.05.2020<br /><span class="EventTeaser__fact-time">9:00 – 17:00 Uhr</span></span>
                        </li>
                        <li class="fact-list__item">
                            <img src="http://placehold.it/24" alt=""/>
                            <span>Menzinger Gärten<br /><a href="#0">Route finden</a></span>
                        </li>
                        <li class="fact-list__item">
                            <img src="http://placehold.it/24" alt=""/>
                            <span>Netzwerk Garten Obst-<br />und Gartenbauvereine und LandFrauen</span>
                        </li>
                        <li class="fact-list__item  EventTeaser__like-fact">
                            <img src="http://placehold.it/24" alt=""/>
                            <span>Termin merken</span>
                        </li>
                    </ul>
                    <a href="#0" class="EventTeaser__badge">
                        <img src="//placehold.it/180x60?text=Reservierung" alt="">
                    </a>
                    <div class="share-panel  EventTeaser__share-panel--aside">
                        <div class="share-panel__text">Diese Seite teilen auf:</div>
                        <ul class="share-panel__list">
                            <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M17 2v4h-2c-.69 0-1 .81-1 1.5V10h3v4h-3v8h-4v-8H7v-4h3V6a4 4 0 0 1 4-4h3z"/></svg></a></li>
                            <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2zm-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6zm9.65 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/></svg></a></li>
                            <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M22.92 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.83 4.5 17.72 4 16.46 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98-3.56-.18-6.73-1.89-8.84-4.48-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.9 20.29 6.16 21 8.58 21c7.88 0 12.21-6.54 12.21-12.21 0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/></svg></a></li>
                            <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M10 16.5v-9l6 4.5-6 4.5zM20 4.4c-.6-.2-4.3-.4-8-.4s-7.4.19-8 .38C2.44 4.9 2 8.4 2 12c0 3.59.44 7.1 2 7.61.6.2 4.3.39 8 .39s7.4-.19 8-.39c1.56-.51 2-4.02 2-7.61 0-3.6-.44-7.09-2-7.6z"/></svg></a></li>
                        </ul>
                    </div>
                </div>
                <div class="EventTeaser__main">
                    <div class="combo">
                        <div class="combo__text">
                            <p>Schnell zurbereitet und gesund lorem ispum dolor sit met lorem soloriesmbus Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                            <p><b>Schnell zurbereitet und gesund lorem ispum dolor sit met</b></p>
                            <p>Schnell zurbereitet und gesund lorem ispum dolor sit met lorem soloriesmbus Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="share-panel  EventTeaser__share-panel--main">[...]</div>
        </div>
    </div>
</article>

Styleguide sections.event-teaser.1
*/
.EventTeaser__badge {
  margin-top: 40px;
  margin-bottom: 20px;
  display: block; }
  .EventTeaser__badge img {
    max-width: 100%; }
  .EventTeaser__badge--condensed {
    margin-top: 20px; }
    .EventTeaser__badge--condensed img {
      max-width: 90%; }

/*
mit Notification-Box

Markup:
<article class="EventTeaser  is-postponed">
    <div class="EventTeaser__grid">
        <div class="EventTeaser__container">
            <img src="http://placehold.it/36" class="EventTeaser__like">
            <div class="EventTeaser__head">
                <div class="EventTeaser__category">
                    <img src="http://placehold.it/24">
                    <span>Gesundheit und Natur</span>
                </div>
                <h2 class="EventTeaser__title">Leckeres mit Kräutern</h2>
                <h3 class="EventTeaser__subtitle">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam non</h3>
            </div>
            <div class="EventTeaser__body">
                <div class="EventTeaser__aside">
                    <ul class="fact-list">
                        <li class="fact-list__item">
                            <img src="http://placehold.it/24" alt=""/>
                            <span>Donnerstag, 28.05.2020<br /><span class="EventTeaser__fact-time">9:00 – 17:00 Uhr</span></span>
                        </li>
                        <li class="fact-list__item">
                            <img src="http://placehold.it/24" alt=""/>
                            <span>Menzinger Gärten<br /><a href="#0">Route finden</a></span>
                        </li>
                        <li class="fact-list__item">
                            <img src="http://placehold.it/24" alt=""/>
                            <span>Netzwerk Garten Obst-<br />und Gartenbauvereine und LandFrauen</span>
                        </li>
                        <li class="fact-list__item  EventTeaser__like-fact">
                            <img src="http://placehold.it/24" alt=""/>
                            <span>Termin merken</span>
                        </li>
                    </ul>
                    <a href="#0" class="EventTeaser__badge">
                        <img src="//placehold.it/180x60?text=Reservierung" alt="">
                    </a>
                    <div class="share-panel  EventTeaser__share-panel--aside">
                        <div class="share-panel__text">Diese Seite teilen auf:</div>
                        <ul class="share-panel__list">
                            <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M17 2v4h-2c-.69 0-1 .81-1 1.5V10h3v4h-3v8h-4v-8H7v-4h3V6a4 4 0 0 1 4-4h3z"/></svg></a></li>
                            <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2zm-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6zm9.65 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/></svg></a></li>
                            <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M22.92 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.83 4.5 17.72 4 16.46 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98-3.56-.18-6.73-1.89-8.84-4.48-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.9 20.29 6.16 21 8.58 21c7.88 0 12.21-6.54 12.21-12.21 0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/></svg></a></li>
                            <li><a href="#0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M10 16.5v-9l6 4.5-6 4.5zM20 4.4c-.6-.2-4.3-.4-8-.4s-7.4.19-8 .38C2.44 4.9 2 8.4 2 12c0 3.59.44 7.1 2 7.61.6.2 4.3.39 8 .39s7.4-.19 8-.39c1.56-.51 2-4.02 2-7.61 0-3.6-.44-7.09-2-7.6z"/></svg></a></li>
                        </ul>
                    </div>
                </div>
                <div class="EventTeaser__main">
                    <div class="combo">
                        <div class="combo__text">
                            <p>Schnell zurbereitet und gesund lorem ispum dolor sit met lorem soloriesmbus Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                            <p><b>Schnell zurbereitet und gesund lorem ispum dolor sit met</b></p>
                            <p>Schnell zurbereitet und gesund lorem ispum dolor sit met lorem soloriesmbus Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        </div>
                    </div>
                </div>
                <div class="notification-box  EventTeaser__notification">
                    <div class="notification-box__title">Ersatztermin</div>
                    <div class="notification-box__text">Freitag, 10. Mai 2021<br>09:00 – 19:00 Uhr</div>
                    <a href="#0" class="notification-box__link"><span>Mehr Details</span><img src="http://placehold.it/24"></a>
                </div>
            </div>
            <div class="share-panel  EventTeaser__share-panel--main">[...]</div>
        </div>
    </div>
</article>

Styleguide sections.event-teaser.2
*/
.EventTeaser__notification {
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 1; }
  @media (min-width: 40em) {
    .EventTeaser__notification {
      top: 0;
      left: 20px; } }

/*
ColorBanner

Markup:
<div class="ColorBanner">
    <div class="ColorBanner__grid">
        <div class="ColorBanner__wrapper">
            <div class="ColorBanner__combo">
                <h1 class="ColorBanner__title">Entdecken Sie unser Programm</h1>
                <div class="ColorBanner__text">
                    Das Green-Team hat seinen Sitz im ehemaligen Haus des Gastes in der Bahnhofstraße 19, mitten im künftigen Landesgartenschau-Gelände. Hier können die Bürgerinnen und Bürger die Pläne einsehen von Montag bis Freitag 9 bis 16 und Donnerstag bis 18 Uhr. In der neuen Geschäftsstelle ist genügend Platz für das Team, das in den kommenden Jahren mit mehr und mehr Aufgaben betraut wird.
                </div>
                <a href="#0" class="ColorBanner__action">
                    <img src="http://placehold.it/24/">
                    <span>Lorem Ipsum</span>
                </a>
            </div>
        </div>
    </div>
</div>

Styleguide sections.color-banner
*/
.ColorBanner {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  background: #ce115d; }

.ColorBanner__grid {
  margin-left: -20px;
  display: block;
  font-size: 0; }
  .ColorBanner__grid > * {
    padding-left: 20px;
    vertical-align: top;
    display: inline-block;
    font-size: 16px; }

.ColorBanner__wrapper {
  width: 100%;
  position: relative; }
  @media (min-width: 64em) {
    .ColorBanner__wrapper {
      width: 85.71429%;
      position: relative;
      right: auto;
      left: 7.14286%; } }
  @media (min-width: 90em) {
    .ColorBanner__wrapper {
      width: 71.42857%;
      position: relative;
      right: auto;
      left: 14.28571%; } }

.ColorBanner__combo {
  color: #ffffff;
  text-align: center; }
  .ColorBanner__combo > *:last-child {
    margin-bottom: 0; }

.ColorBanner__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 36px;
  color: "inherit";
  line-height: 1.26;
  text-decoration: underline;
  margin-bottom: 20px;
  hyphens: auto; }
  @media (min-width: 40em) {
    .ColorBanner__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .ColorBanner__title {
    font-family: "UrgeText-SemiBold", serif; }
  .ColorBanner__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .ColorBanner__title {
      font-size: 45px; } }
  @media (min-width: 40em) {
    .ColorBanner__title {
      margin-bottom: 40px; } }

.ColorBanner__text {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 16px;
  color: "inherit";
  line-height: 1.45;
  margin-bottom: 40px; }
  @media (min-width: 40em) {
    .ColorBanner__text {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .ColorBanner__text {
    font-family: "UrgeText-SemiBold", serif; }
  .ColorBanner__text sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .ColorBanner__text {
      font-size: 20px; } }

.ColorBanner__action {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  -webkit-box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
          box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
  background: #ffffff;
  color: #ce115d; }
  @media (min-width: 40em) {
    .ColorBanner__action {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .ColorBanner__action svg,
  .ColorBanner__action img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .ColorBanner__action * + svg,
  .ColorBanner__action * + img {
    margin-right: 0;
    margin-left: 15px; }
  .ColorBanner__action:hover {
    cursor: pointer;
    color: #ffffff; }
  .ColorBanner__action:hover {
    color: #ce115d;
    background-color: #d9d9d9; }
  .ColorBanner__action:disabled, .ColorBanner__action.is-disabled {
    pointer-events: none;
    opacity: 0.25; }

/*
ActionPanel

Styleguide sections.action-panel
*/
/*
mit CTA Button

Markup:
<section class="ActionPanel">
    <div class="ActionPannerl__grid">
        <div class="ActionPanel__wrapper">
            <div class="ActionPanel__actions">
                <button class="ActionPanel__btn-prev">
                    <img src="http://placehold.it/24">
                    <span><b>Vorheriger</b><br />Termin</span>
                </button>
                <a href="#0" class="ActionPanel__btn-cta">
                    <img src="http://placehold.it/24">
                    <span>Zur Tagesübersicht</span>
                </a>
                <button class="ActionPanel__btn-next">
                    <span><b>Nächster</b><br />Termin</span>
                    <img src="http://placehold.it/24">
                </button>
            </div>
        </div>
    </div>
</section>

Styleguide sections.action-panel.1
*/
/*
mit Title

Markup:
<section class="ActionPanel">
    <div class="ActionPannerl__grid">
        <div class="ActionPanel__wrapper">
            <div class="ActionPanel__actions">
                <button class="ActionPanel__btn-prev">
                    <img src="http://placehold.it/24">
                    <span><b>Vorheriger</b><br />Termin</span>
                </button>
                <div class="ActionPanel__center">
                    <h2 class="ActionPanel__title">Samstag, 04. Juni 2020</h2>
                </div>
                <button class="ActionPanel__btn-next">
                    <span><b>Nächster</b><br />Termin</span>
                    <img src="http://placehold.it/24">
                </button>
                <h2 class="ActionPanel__title-mobile">Samstag, 04. Juni 2020</h2>
            </div>
        </div>
    </div>
</section>

Styleguide sections.action-panel.2
*/
.ActionPanel {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px; }

.ActionPanel__grid {
  margin-left: -20px;
  display: block;
  font-size: 0; }
  .ActionPanel__grid > * {
    padding-left: 20px;
    vertical-align: top;
    display: inline-block;
    font-size: 16px; }

.ActionPanel__wrapper {
  width: 100%;
  position: relative; }
  @media (min-width: 90em) {
    .ActionPanel__wrapper {
      width: 85.71429%;
      position: relative;
      right: auto;
      left: 7.14286%; } }

.ActionPanel__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center; }
  @media (min-width: 40em) {
    .ActionPanel__actions {
      max-width: none;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; } }

.ActionPanel__btn-prev,
.ActionPanel__btn-next {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  background-color: transparent;
  border: 1px solid currentColor;
  color: #4a4a4a;
  font-weight: 400; }
  @media (min-width: 40em) {
    .ActionPanel__btn-prev,
    .ActionPanel__btn-next {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .ActionPanel__btn-prev svg,
  .ActionPanel__btn-prev img,
  .ActionPanel__btn-next svg,
  .ActionPanel__btn-next img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .ActionPanel__btn-prev * + svg,
  .ActionPanel__btn-prev * + img,
  .ActionPanel__btn-next * + svg,
  .ActionPanel__btn-next * + img {
    margin-right: 0;
    margin-left: 15px; }
  .ActionPanel__btn-prev:hover,
  .ActionPanel__btn-next:hover {
    cursor: pointer;
    color: #ffffff; }
  .ActionPanel__btn-prev:hover,
  .ActionPanel__btn-next:hover {
    color: #4a4a4a; }
  .ActionPanel__btn-prev:disabled, .ActionPanel__btn-prev.is-disabled,
  .ActionPanel__btn-next:disabled,
  .ActionPanel__btn-next.is-disabled {
    pointer-events: none;
    opacity: 0.25; }
  @media (min-width: 64em) {
    .ActionPanel__btn-prev,
    .ActionPanel__btn-next {
      min-width: 190px; } }
  .ActionPanel__btn-prev span,
  .ActionPanel__btn-next span {
    display: none; }
    @media (min-width: 64em) {
      .ActionPanel__btn-prev span,
      .ActionPanel__btn-next span {
        display: block; } }
  .ActionPanel__btn-prev img,
  .ActionPanel__btn-prev svg,
  .ActionPanel__btn-next img,
  .ActionPanel__btn-next svg {
    margin-right: 0;
    margin-left: 0; }

.ActionPanel__btn-prev {
  margin-right: 5px; }
  @media (min-width: 64em) {
    .ActionPanel__btn-prev span {
      margin-left: 20px; } }

.ActionPanel__btn-next {
  margin-left: 5px; }
  @media (min-width: 64em) {
    .ActionPanel__btn-next span {
      margin-right: 20px; } }

.ActionPanel__btn-cta {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  -webkit-box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
          box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
  background: #ce115d; }
  @media (min-width: 40em) {
    .ActionPanel__btn-cta {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .ActionPanel__btn-cta svg,
  .ActionPanel__btn-cta img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .ActionPanel__btn-cta * + svg,
  .ActionPanel__btn-cta * + img {
    margin-right: 0;
    margin-left: 15px; }
  .ActionPanel__btn-cta:hover {
    cursor: pointer;
    color: #ffffff; }
  .ActionPanel__btn-cta:hover {
    background-color: #870b3d; }
  .ActionPanel__btn-cta:disabled, .ActionPanel__btn-cta.is-disabled {
    pointer-events: none;
    opacity: 0.25; }

.ActionPanel__center {
  padding: 0 10px;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0px;
  text-align: left; }
  @media (min-width: 40em) {
    .ActionPanel__center {
      padding: 0 5%; } }

.ActionPanel__title,
.ActionPanel__title-mobile {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 36px;
  color: #18492b;
  line-height: 1.26;
  text-decoration: underline; }
  @media (min-width: 40em) {
    .ActionPanel__title,
    .ActionPanel__title-mobile {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .ActionPanel__title, .fl
  .ActionPanel__title-mobile {
    font-family: "UrgeText-SemiBold", serif; }
  .ActionPanel__title sup,
  .ActionPanel__title-mobile sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .ActionPanel__title,
    .ActionPanel__title-mobile {
      font-size: 45px; } }

.ActionPanel__title {
  display: none; }
  @media (min-width: 40em) {
    .ActionPanel__title {
      display: block; } }

.ActionPanel__title-mobile {
  margin-top: 20px; }
  @media (min-width: 40em) {
    .ActionPanel__title-mobile {
      display: none; } }

/*
Map

Markup:
<div class="Map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1340.8169453544515!2d9.152821349999998!3d47.76915525!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x479a5ecc74cc466b%3A0xf61a28210026a3f8!2sOberer+Stadtgarten!5e0!3m2!1sde!2sde!4v1565724923832!5m2!1sde!2sde" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Styleguide sections.map
*/
.Map {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  height: 450px;
  position: relative; }
  .Map iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }

/*
Table

Markup:
<section class="Table">
    <div class="Table__grid">
        <div class="Table__container">
            <h1 class="Table__title">Vorverkauf Dauerkarten <sup>1</sup></h1>
            <div class="Table__table">
                <table class="table">
                    <tbody>
                        <tr>
                            <td>Tageskarte Erwachsene</td>
                            <td>18,00 €</td>
                        </tr>
                        <tr>
                            <td>Tageskarte ermäßigt <sup>2</sup></td>
                            <td>15,00 €</td>
                        </tr>
                        <tr>
                            <td>Tageskarte mit Ãœberlinger Sozialpass <sup>3</sup></td>
                            <td>9,00 €</td>
                        </tr>
                        <tr>
                            <td>Tageskarte 13–17 Jahre</td>
                            <td>9,00 €</td>
                        </tr>
                        <tr>
                            <td>Tageskarte 0–12 Jahre</td>
                            <td>frei</td>
                        </tr>
                        <tr>
                            <td>
                                Tageskarte Familie »klein«<br />
                                <span>(1 Erw.+ beliebig viele eigene Kinder bis 17 Jahre)</span>
                            </td>
                            <td>22,00 €</td>
                        </tr>
                        <tr>
                            <td>
                                Tageskarte Familie »groß«<br />
                                <span>(2 Erw.+ beliebig viele eigene Kinder bis 17 Jahre)</span>
                            </td>
                            <td>40,00 €</td>
                        </tr>
                        <tr>
                            <td>Tageskarte Gruppe</td>
                            <td>15,00 €</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="Table__note">
                <p>
                    1 Vorverkauf Dauerkarten bis 12.01. 2020<br/>
                    2 Ermäßigt sind Azubis, Studierende und Menschen mit Behinderung ab einem Behinderungsgrad von 50 %. Soweit laut Behindertenausweis eine Begleitperson erforderlich ist, erhält diese Person freien Eintritt. <br/>
                    3 (50% Ermäßigung)
                </p>
            </div>
        </div>
    </div>
</section>

Styleguide sections.table
*/
.Table {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px; }

@media (min-width: 90em) {
  .Table__grid {
    margin-left: -20px;
    display: block;
    font-size: 0; }
    .Table__grid > * {
      padding-left: 20px;
      vertical-align: top;
      display: inline-block;
      font-size: 16px; } }

@media (min-width: 90em) {
  .Table__container {
    width: 85.71429%;
    position: relative;
    right: auto;
    left: 7.14286%; } }

.Table__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 28px;
  color: #18492b;
  line-height: 1.25;
  max-width: 700px;
  margin-bottom: 20px; }
  @media (min-width: 40em) {
    .Table__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .Table__title {
    font-family: "UrgeText-SemiBold", serif; }
  .Table__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .Table__title {
      font-size: 36px; } }
  @media (min-width: 40em) {
    .Table__title {
      margin-bottom: 40px; } }

.Table__note {
  font-weight: 400;
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.41;
  max-width: 700px;
  padding-left: 25px;
  margin-top: 10px; }
  @media (min-width: 40em) {
    .Table__note {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .Table__note a:not([class]) {
    color: currentColor; }
    .Table__note a:not([class]):hover {
      opacity: 0.75; }
  .Table__note *:first-child {
    margin-top: 0; }
  .Table__note *:last-child {
    margin-bottom: 0; }

/*
TableDuo

Markup:
<section class="TableDuo">
    <div class="TableDuo__grid">
        <div class="TableDuo__left">
            <h1 class="TableDuo__title">Vorverkauf Dauerkarten <sup>1</sup></h1>
            <div class="TableDuo__table">
                <table class="table">
                    <tbody>
                        <tr>
                            <td>Tageskarte Erwachsene</td>
                            <td>18,00 €</td>
                        </tr>
                        <tr>
                            <td>Tageskarte ermäßigt <sup>2</sup></td>
                            <td>15,00 €</td>
                        </tr>
                        <tr>
                            <td>Tageskarte mit Ãœberlinger Sozialpass <sup>3</sup></td>
                            <td>9,00 €</td>
                        </tr>
                        <tr>
                            <td>Tageskarte 13–17 Jahre</td>
                            <td>9,00 €</td>
                        </tr>
                        <tr>
                            <td>Tageskarte 0–12 Jahre</td>
                            <td>frei</td>
                        </tr>
                        <tr>
                            <td>
                                Tageskarte Familie »klein«<br />
                                <span>(1 Erw.+ beliebig viele eigene Kinder bis 17 Jahre)</span>
                            </td>
                            <td>22,00 €</td>
                        </tr>
                        <tr>
                            <td>
                                Tageskarte Familie »groß«<br />
                                <span>(2 Erw.+ beliebig viele eigene Kinder bis 17 Jahre)</span>
                            </td>
                            <td>40,00 €</td>
                        </tr>
                        <tr>
                            <td>Tageskarte Gruppe</td>
                            <td>15,00 €</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="TableDuo__note">
                <p>
                    1 Vorverkauf Dauerkarten bis 12.01. 2020<br/>
                    2 Ermäßigt sind Azubis, Studierende und Menschen mit Behinderung ab einem Behinderungsgrad von 50 %. Soweit laut Behindertenausweis eine Begleitperson erforderlich ist, erhält diese Person freien Eintritt. <br/>
                    3 (50% Ermäßigung)
                </p>
            </div>
        </div>
        <div class="TableDuo__right">
            <h1 class="TableDuo__title">Vorverkauf Dauerkarten <sup>1</sup></h1>
            <div class="TableDuo__table">
                <table class="table">
                    <tbody>
                        <tr>
                            <td>Tageskarte Erwachsene</td>
                            <td>18,00 €</td>
                        </tr>
                        <tr>
                            <td>Tageskarte ermäßigt <sup>2</sup></td>
                            <td>15,00 €</td>
                        </tr>
                        <tr>
                            <td>Tageskarte mit Ãœberlinger Sozialpass <sup>3</sup></td>
                            <td>9,00 €</td>
                        </tr>
                        <tr>
                            <td>Tageskarte 13–17 Jahre</td>
                            <td>9,00 €</td>
                        </tr>
                        <tr>
                            <td>Tageskarte 0–12 Jahre</td>
                            <td>frei</td>
                        </tr>
                        <tr>
                            <td>
                                Tageskarte Familie »klein«<br />
                                <span>(1 Erw.+ beliebig viele eigene Kinder bis 17 Jahre)</span>
                            </td>
                            <td>22,00 €</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="TableDuo__note">
                <p>
                    1 Vorverkauf Dauerkarten bis 12.01. 2020<br/>
                    2 Ermäßigt sind Azubis, Studierende und Menschen mit Behinderung ab einem Behinderungsgrad von 50 %. Soweit laut Behindertenausweis eine Begleitperson erforderlich ist, erhält diese Person freien Eintritt. <br/>
                    3 (50% Ermäßigung)
                </p>
            </div>
        </div>
    </div>
</section>

Styleguide sections.table-duo
*/
.TableDuo {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px; }

@media (min-width: 64em) {
  .TableDuo__grid {
    margin-left: -20px;
    display: block;
    font-size: 0; }
    .TableDuo__grid > * {
      padding-left: 20px;
      vertical-align: top;
      display: inline-block;
      font-size: 16px; } }

@media (min-width: 64em) {
  .TableDuo__left {
    width: 50%;
    position: relative; } }

@media (min-width: 90em) {
  .TableDuo__left {
    width: 39.28571%;
    position: relative;
    right: auto;
    left: 7.14286%; } }

@media (min-width: 64em) {
  .TableDuo__right {
    width: 50%;
    position: relative; } }

@media (min-width: 90em) {
  .TableDuo__right {
    width: 39.28571%;
    position: relative;
    right: auto;
    left: 14.28571%; } }

* + .TableDuo__right {
  margin-top: 40px; }
  @media (min-width: 40em) {
    * + .TableDuo__right {
      margin-top: 80px; } }
  @media (min-width: 64em) {
    * + .TableDuo__right {
      margin-top: 0; } }

.TableDuo__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 28px;
  color: #18492b;
  line-height: 1.25;
  max-width: 700px;
  margin-bottom: 20px; }
  @media (min-width: 40em) {
    .TableDuo__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .TableDuo__title {
    font-family: "UrgeText-SemiBold", serif; }
  .TableDuo__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .TableDuo__title {
      font-size: 36px; } }
  @media (min-width: 40em) {
    .TableDuo__title {
      margin-bottom: 40px; } }

.TableDuo__note {
  font-weight: 400;
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.41;
  max-width: 700px;
  padding-left: 25px;
  margin-top: 10px; }
  @media (min-width: 40em) {
    .TableDuo__note {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .TableDuo__note a:not([class]) {
    color: currentColor; }
    .TableDuo__note a:not([class]):hover {
      opacity: 0.75; }
  .TableDuo__note *:first-child {
    margin-top: 0; }
  .TableDuo__note *:last-child {
    margin-bottom: 0; }

/*
Columns

Markup:
<div class="Columns">
    <div class="Columns__grid">
        <div class="Columns__container">
            <h2 class="Columns__title">Weitere Vorverkaufsstellen</h2>
            <ul class="column-list">
                <li>Lorem, ipsum dolor.</li>
                <li>Eos, tenetur? Repudiandae.</li>
                <li>Illum, numquam facere.</li>
                <li>Et, doloribus molestias.</li>
                <li>Temporibus, aspernatur labore.</li>
                <li>Asperiores, iste eius!</li>
                <li>Impedit, totam expedita.</li>
                <li>Accusamus, ratione placeat.</li>
                <li>Neque, asperiores itaque!</li>
                <li>Quidem, reiciendis nihil!</li>
                <li>Corrupti, aliquid veniam.</li>
                <li>Animi, expedita odio?</li>
                <li>Expedita, doloremque hic!</li>
                <li>Quibusdam, consequuntur impedit.</li>
                <li>Accusantium, mollitia nesciunt?</li>
                <li>Iure, assumenda impedit!</li>
                <li>Laudantium, nulla vel?</li>
                <li>Eaque, quaerat consequatur.</li>
                <li>Alias, unde qui!</li>
                <li>Repellendus, dolorem enim.</li>
                <li>Excepturi, consequuntur hic.</li>
                <li>Recusandae, maiores non!</li>
                <li>Corporis, eius beatae.</li>
                <li>Nostrum, laborum suscipit!</li>
                <li>Vel, architecto eius!</li>
            </ul>
        </div>
    </div>
</div>

Styleguide sections.columns
*/
.Columns {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px; }

@media (min-width: 64em) {
  .Columns__grid {
    margin-left: -20px;
    display: block;
    font-size: 0; }
    .Columns__grid > * {
      padding-left: 20px;
      vertical-align: top;
      display: inline-block;
      font-size: 16px; } }

@media (min-width: 64em) {
  .Columns__container {
    width: 85.71429%;
    position: relative;
    right: auto;
    left: 7.14286%; } }

.Columns__title {
  margin: 0;
  font-style: normal;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #afcc56;
  letter-spacing: 1.75px;
  line-height: 1.3;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  max-width: 700px;
  margin-bottom: 20px; }
  @media (min-width: 40em) {
    .Columns__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none;
      font-size: 14px; } }
  .fl .Columns__title {
    font-family: "Noto Sans", sans-serif; }

/*
FilterPanel

Markup:
<section class="FilterPanel">
    <div class="FilterPanel__grid">
        <div class="FilterPanel__left">
            <div class="FilterPanel__title">Tagesprogramm</div>
            <form class="FilterPanel__form">
                <div class="FilterPanel__field">
                    <!-- replace with datepicker -->
                    <div class="dropdown">
                        <span class="dropdown__value">2</span>
                    </div>
                </div>
                <button class="FilterPanel__submit">anzeigen</button>
            </form>
        </div>
        <div class="FilterPanel__right">
            <div class="FilterPanel__title">Veranstaltungssuche</div>
            <form class="FilterPanel__form">
                <div class="FilterPanel__field">
                    <div class="searchfield">
                        <div class="searchfield__icon">
                            <img src="http://placehold.it/24" />
                        </div>
                        <input type="text" name="search" placeholder="Geben Sie einen Suchbegriff ein">
                    </div>
                </div>
                <button class="FilterPanel__submit">suchen</button>
            </form>
        </div>
    </div>
</section>

Styleguide sections.filter-panel
*/
/*
FilterPanel

Markup:
<div data-app="events-filter-panel">
    <script type="text/json">
        { 
            "targetUrl": "https://www.ueberlingen2020.de/de/veranstaltungskalender",
            "blockUntil": "2019-10-23"
        }
    </script>
</div>

Styleguide js-apps.filter-panel
*/
.FilterPanel {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  background: #ce115d; }
  .FilterPanel:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    background: #afcc56; }
    @media (min-width: 64em) {
      .FilterPanel:before {
        top: 0;
        left: calc(50% - 10px); } }

.FilterPanel__grid {
  margin-left: -20px;
  display: block;
  font-size: 0; }
  .FilterPanel__grid > * {
    padding-left: 20px;
    vertical-align: top;
    display: inline-block;
    font-size: 16px; }

.FilterPanel__left {
  padding-top: 40px;
  padding-bottom: 40px;
  width: 100%;
  position: relative; }
  @media (min-width: 64em) {
    .FilterPanel__left {
      width: 46.42857%;
      position: relative; } }
  @media (min-width: 90em) {
    .FilterPanel__left {
      width: 39.28571%;
      position: relative;
      right: auto;
      left: 7.14286%; } }

.FilterPanel__right {
  padding-top: 40px;
  padding-bottom: 40px;
  width: 100%;
  position: relative; }
  @media (min-width: 64em) {
    .FilterPanel__right {
      width: 46.42857%;
      position: relative;
      right: auto;
      left: 3.57143%; } }
  @media (min-width: 90em) {
    .FilterPanel__right {
      width: 39.28571%;
      position: relative;
      right: auto;
      left: 17.85714%; } }

.FilterPanel__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-family: serif;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  margin-bottom: 30px; }
  @media (min-width: 40em) {
    .FilterPanel__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .FilterPanel__title {
    font-family: "UrgeText-SemiBold", serif; }
  .fl .FilterPanel__title {
    font-family: "Noto Sans", sans-serif; }
  .FilterPanel__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .FilterPanel__title {
      font-size: 25px; } }

@media (min-width: 40em) {
  .FilterPanel__form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start; } }

@media (min-width: 40em) {
  .FilterPanel__field {
    padding-right: 20px; } }

.FilterPanel__submit {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  -webkit-box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
          box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
  background: #ffffff;
  color: #ce115d;
  margin-top: 10px; }
  @media (min-width: 40em) {
    .FilterPanel__submit {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .FilterPanel__submit svg,
  .FilterPanel__submit img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .FilterPanel__submit * + svg,
  .FilterPanel__submit * + img {
    margin-right: 0;
    margin-left: 15px; }
  .FilterPanel__submit:hover {
    cursor: pointer;
    color: #ffffff; }
  .FilterPanel__submit:hover {
    color: #ce115d;
    background-color: #d9d9d9; }
  .FilterPanel__submit:disabled, .FilterPanel__submit.is-disabled {
    pointer-events: none;
    opacity: 0.25; }
  @media (min-width: 40em) {
    .FilterPanel__submit {
      min-height: auto !important;
      height: auto !important;
      margin-top: 0; } }

/* 
Form

Markup:
<div class="Form">
    <div class="Form__row">
        <div class="Form__aside">
            <div class="Form__number">01</div>
        </div>
        <div class="Form__main">
            <h2 class="Form__title">
                <span class="Form__number-mobile">01</span>
                Unsere Tourenangebote
            </h2>
            <div class="Form__card-row">
                <div class="Form__card-col">
                    <div class="radio-block">
                         <input type="radio" name="tour" id="rb-4"/>
                         <label class="radio-block__label" for="rb-4">
                            <div class="radio-block__content">
                                <h4 class="radio-block__title">Tour 01: <br/> Uferpark, Villengärten, kapuzinerkirche (Blumenschau)</h4>
                                <ul class="radio-block__list">
                                    <li class="radio-block__list-item">
                                        <div class="radio-block__list-fact">    
                                            <img src="http://placehold.it/24">
                                            <b>Kosten</b>
                                        </div>
                                        <div class="radio-block__list-text">130,00 € pro Gruppe (max. 25 Personen pro Führung) zzgl. Eintritt</div>
                                    </li>
                                    <li class="radio-block__list-item">
                                        <div class="radio-block__list-fact">    
                                            <img src="http://placehold.it/24">
                                            <b>Dauer</b>
                                        </div>
                                        <div class="radio-block__list-text">ca. 1,5 – 2 Stunden</div>
                                    </li>
                                    <li class="radio-block__list-item">
                                        <div class="radio-block__list-fact">    
                                            <img src="http://placehold.it/24">
                                            <b>Treffpunkt</b>
                                        </div>
                                        <div class="radio-block__list-text">Uferpark</div>
                                    </li>
                                </ul>
                            </div>
                        </label>
                    </div>
                </div>
                <div class="Form__card-col">
                    <div class="radio-block">
                            <input type="radio" name="tour" id="rb-5"/>
                            <label class="radio-block__label" for="rb-5">
                            <div class="radio-block__content">
                                <h4 class="radio-block__title">Tour 02: <br/> Uferpark, Villengärten, kapuzinerkirche (Blumenschau)</h4>
                                <ul class="radio-block__list">
                                    <li class="radio-block__list-item">
                                        <div class="radio-block__list-fact">    
                                            <img src="http://placehold.it/24">
                                            <b>Kosten</b>
                                        </div>
                                        <div class="radio-block__list-text">130,00 € pro Gruppe (max. 25 Personen pro Führung) zzgl. Eintritt</div>
                                    </li>
                                    <li class="radio-block__list-item">
                                        <div class="radio-block__list-fact">    
                                            <img src="http://placehold.it/24">
                                            <b>Dauer</b>
                                        </div>
                                        <div class="radio-block__list-text">ca. 1,5 – 2 Stunden</div>
                                    </li>
                                    <li class="radio-block__list-item">
                                        <div class="radio-block__list-fact">    
                                            <img src="http://placehold.it/24">
                                            <b>Treffpunkt</b>
                                        </div>
                                        <div class="radio-block__list-text">Uferpark</div>
                                    </li>
                                </ul>
                            </div>
                        </label>
                    </div>
                </div>
                <div class="Form__card-col">        
                    <div class="radio-block">
                         <input type="radio" name="tour" id="rb-6"/>
                         <label class="radio-block__label" for="rb-6">
                            <div class="radio-block__content">
                                <h4 class="radio-block__title">Tour 03: <br/> Uferpark, Villengärten, kapuzinerkirche (Blumenschau)</h4>
                                <ul class="radio-block__list">
                                    <li class="radio-block__list-item">
                                        <div class="radio-block__list-fact">    
                                            <img src="http://placehold.it/24">
                                            <b>Kosten</b>
                                        </div>
                                        <div class="radio-block__list-text">130,00 € pro Gruppe (max. 25 Personen pro Führung) zzgl. Eintritt</div>
                                    </li>
                                    <li class="radio-block__list-item">
                                        <div class="radio-block__list-fact">    
                                            <img src="http://placehold.it/24">
                                            <b>Dauer</b>
                                        </div>
                                        <div class="radio-block__list-text">ca. 1,5 – 2 Stunden</div>
                                    </li>
                                    <li class="radio-block__list-item">
                                        <div class="radio-block__list-fact">    
                                            <img src="http://placehold.it/24">
                                            <b>Treffpunkt</b>
                                        </div>
                                        <div class="radio-block__list-text">Uferpark</div>
                                    </li>
                                </ul>
                            </div>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="Form__row">
        <div class="Form__aside">
            <div class="Form__number">02</div>
        </div>
        <div class="Form__main">
            <h2 class="Form__title">
                <span class="Form__number-mobile">02</span>
                Ihr Wunschtermin
            </h2>
            <div class="Form__field-row">
                <div class="Form__field-col">
                    <div class="textfield" >
                        <div class="textfield__holder">
                            <input type="text" class="textfield__input"/>
                            <span class="textfield__label">Datum</span>
                        </div>
                        <div class="textfield__error">Bitte geben Sie ein Datum an.</div>
                    </div>
                </div>
                <div class="Form__field-col">
                    <div class="textfield" >
                        <div class="textfield__holder">
                            <input type="text" class="textfield__input"/>
                            <span class="textfield__label">Uhrzeit</span>
                        </div>
                        <div class="textfield__error">Bitte geben Sie ein Uhrzeit an.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="Form__row">
        <div class="Form__aside">
            <div class="Form__number">03</div>
        </div>
        <div class="Form__main">
            <h2 class="Form__title">
                <span class="Form__number-mobile">03</span>
                Ihre Kontaktdaten & Rechnungsanschrift
            </h2>
            <div class="Form__field-row">
                <div class="Form__field-col-full">
                    <ul class="inline-list">
                        <li>
                            <div class="radio-button">
                                <input type="radio" id="rb-1" name="gender" value="female" />
                                <label for="rb-1">Frau</label>
                            </div>
                        </li>
                        <li>
                            <div class="radio-button">
                                <input type="radio" id="rb-2" name="gender" value="male" />
                                <label for="rb-2">Herr</label>
                            </div>
                        </li>
                        <li>
                            <div class="radio-button">
                                <input type="radio" id="rb-3" name="gender" value="other" />
                                <label for="rb-3">Divers</label>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="Form__field-row">
                <div class="Form__field-col">
                    <div class="textfield" >
                        <div class="textfield__holder">
                            <input type="text" class="textfield__input"/>
                            <span class="textfield__label">Ihr Name</span>
                        </div>
                        <div class="textfield__error">Bitte geben Sie Ihren Namen ein.</div>
                    </div>
                </div>
                <div class="Form__field-col">
                    <div class="textfield" >
                        <div class="textfield__holder">
                            <input type="text" class="textfield__input"/>
                            <span class="textfield__label">Ihr Vorname</span>
                        </div>
                        <div class="textfield__error">Bitte geben Sie Ihren Vornamen ein.</div>
                    </div>
                </div>
            </div>
            <div class="Form__field-row">
                <div class="Form__field-col">
                    <div class="textfield" >
                        <div class="textfield__holder">
                            <input type="text" class="textfield__input"/>
                            <span class="textfield__label">Firma | Institution | Verband</span>
                        </div>
                        <div class="textfield__error">Bitte geben Sie Ihren Firme an.</div>
                    </div>
                </div>
                <div class="Form__field-col">
                    <div class="textfield" >
                        <div class="textfield__holder">
                            <input type="text" class="textfield__input"/>
                            <span class="textfield__label">Teilnehmerzahl</span>
                        </div>
                        <div class="textfield__error">Bitte geben Sie eine Teilenhmerzahl ein.</div>
                    </div>
                </div>
            </div>
            <div class="Form__field-row">
                <div class="Form__field-col">
                    <div class="textfield" >
                        <div class="textfield__holder">
                            <input type="text" class="textfield__input"/>
                            <span class="textfield__label">Straße | Hausnummer</span>
                        </div>
                        <div class="textfield__error">Bitte geben Sie Ihre Straße und Hausnnummer an.</div>
                    </div>
                </div>
                <div class="Form__field-col">
                    <div class="textfield" >
                        <div class="textfield__holder">
                            <input type="text" class="textfield__input"/>
                            <span class="textfield__label">PLZ</span>
                        </div>
                        <div class="textfield__error">Bitte geben Sie eine Teilenhmerzahl ein.</div>
                    </div>
                </div>
                <div class="Form__field-col">
                    <div class="textfield" >
                        <div class="textfield__holder">
                            <input type="text" class="textfield__input"/>
                            <span class="textfield__label">Ort</span>
                        </div>
                        <div class="textfield__error">Bitte geben Sie Ihren Wohnort an.</div>
                    </div>
                </div>
                <div class="Form__field-col">
                    <div class="textfield" >
                        <div class="textfield__holder">
                            <input type="text" class="textfield__input"/>
                            <span class="textfield__label">Land</span>
                        </div>
                        <div class="textfield__error">Bitte geben Sie eine Teilenhmerzahl ein.</div>
                    </div>
                </div>
                <div class="Form__field-col">
                    <div class="textfield" >
                        <div class="textfield__holder">
                            <input type="text" class="textfield__input"/>
                            <span class="textfield__label">E-Mail</span>
                        </div>
                        <div class="textfield__error">Bitte geben Sie eine Teilenhmerzahl ein.</div>
                    </div>
                </div>
                <div class="Form__field-col">
                    <div class="textfield" >
                        <div class="textfield__holder">
                            <input type="text" class="textfield__input"/>
                            <span class="textfield__label">Mobilnummer</span>
                        </div>
                        <div class="textfield__error">Bitte geben Sie eine Teilenhmerzahl ein.</div>
                    </div>
                </div>
            </div>
            <div class="Form__field-row">
                <div class="Form__field-col-full">
                    <div class="textfield is-area" >
                        <div class="textfield__holder">
                            <textarea type="text" class="textfield__input"/></textarea>
                            <span class="textfield__label">Anmerkung</span>
                        </div>
                        <div class="textfield__error">Bitte geben Sie eine Teilenhmerzahl ein.</div>
                    </div>
                </div>
            </div>
            <div class="Form__field-row">
                <div class="Form__field-col-full">
                    <div class="Form__note">Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore nesciunt recusandae est dolores. Ad, accusamus, sequi magnam eveniet, vero quas placeat nemo aliquam nihil consectetur iusto ipsam optio ipsa totam.</div>
                </div>
            </div>
            <div class="Form__field-row">
                <div class="Form__field-col-full">
                    <div class="Form__actions">
                        <button type="submit" class="Form__action">
                            <span>Anfrage absenden</span>
                            <img src="http://placehold.it/24" alt="">
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Styleguide sections.form
*/
.Form {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  background: #eaeaea; }

.Form__row {
  margin-left: -20px;
  display: block;
  font-size: 0; }
  .Form__row > * {
    padding-left: 20px;
    vertical-align: top;
    display: inline-block;
    font-size: 16px; }
  .Form__row + .Form__row {
    margin-top: 40px; }
  @media (min-width: 64em) {
    .Form__row + .Form__row {
      margin-top: 60px; } }

.Form__aside {
  display: none; }
  @media (min-width: 64em) {
    .Form__aside {
      display: inline-block;
      width: 7.14286%;
      position: relative; } }
  @media (min-width: 90em) {
    .Form__aside {
      width: 7.14286%;
      position: relative;
      right: auto;
      left: 7.14286%; } }

.Form__main {
  width: 100%;
  position: relative; }
  @media (min-width: 64em) {
    .Form__main {
      width: 85.71429%;
      position: relative; } }
  @media (min-width: 90em) {
    .Form__main {
      width: 78.57143%;
      position: relative;
      right: auto;
      left: 7.14286%; } }

.Form__card-row {
  margin-left: -20px;
  display: block;
  font-size: 0; }
  .Form__card-row > * {
    padding-left: 20px;
    vertical-align: top;
    display: inline-block;
    font-size: 16px; }

.Form__card-col {
  width: 100%;
  position: relative;
  margin-top: 20px; }
  @media (min-width: 64em) {
    .Form__card-col {
      width: 50%;
      position: relative; } }

.Form__field-row {
  margin-left: -20px;
  display: block;
  font-size: 0; }
  .Form__field-row > * {
    padding-left: 20px;
    vertical-align: top;
    display: inline-block;
    font-size: 16px; }
  .Form__field-row + .Form__field-row {
    margin-top: 20px; }

.Form__field-col {
  width: 100%;
  position: relative;
  margin-top: 10px; }
  @media (min-width: 40em) {
    .Form__field-col {
      width: 50%;
      position: relative; } }

.Form__field-col-full {
  width: 100%;
  position: relative;
  margin-top: 10px; }

.Form__number {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 28px;
  color: #18492b;
  line-height: 1.25; }
  @media (min-width: 40em) {
    .Form__number {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .Form__number {
    font-family: "UrgeText-SemiBold", serif; }
  .Form__number sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .Form__number {
      font-size: 36px; } }

@media (min-width: 64em) {
  .Form__number-mobile {
    display: none; } }

.Form__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 28px;
  color: #18492b;
  line-height: 1.25;
  margin-bottom: 20px; }
  @media (min-width: 40em) {
    .Form__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .Form__title {
    font-family: "UrgeText-SemiBold", serif; }
  .Form__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .Form__title {
      font-size: 36px; } }
  @media (min-width: 64em) {
    .Form__title {
      margin-bottom: 40px; } }

.Form__actions {
  text-align: center; }

.Form__action {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  -webkit-box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
          box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
  background: #ce115d; }
  @media (min-width: 40em) {
    .Form__action {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .Form__action svg,
  .Form__action img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .Form__action * + svg,
  .Form__action * + img {
    margin-right: 0;
    margin-left: 15px; }
  .Form__action:hover {
    cursor: pointer;
    color: #ffffff; }
  .Form__action:hover {
    background-color: #870b3d; }
  .Form__action:disabled, .Form__action.is-disabled {
    pointer-events: none;
    opacity: 0.25; }

.Form__note {
  font-weight: 400;
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.41; }
  @media (min-width: 40em) {
    .Form__note {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .Form__note a:not([class]) {
    color: currentColor; }
    .Form__note a:not([class]):hover {
      opacity: 0.75; }
  .Form__note *:first-child {
    margin-top: 0; }
  .Form__note *:last-child {
    margin-bottom: 0; }

.Form__error {
  font-weight: 700;
  color: #fd6d6d;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.41;
  margin-top: 5px; }
  @media (min-width: 40em) {
    .Form__error {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .Form__error a:not([class]) {
    color: currentColor; }
    .Form__error a:not([class]):hover {
      opacity: 0.75; }
  .Form__error *:first-child {
    margin-top: 0; }
  .Form__error *:last-child {
    margin-bottom: 0; }

/*
Embedd

<section class="Embedd" data-compose="plain">
</section>

Styleguide sections.embedd
*/
.Embedd {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px; }

/*
Poster Trio

Markup:
<div class="postertrio">
    <div class="postertrio__grid">
        <div class="postertrio__grid-col">
            <div class="postertrio__container">
                <div class="poster  js-poster">
                    <picture class="poster__img">
                        <source
                            srcset="http://placehold.it/1440x1080&text=Large%20Screens"
                            media="(min-width: 64em)"
                        />
                        <source
                            srcset="http://placehold.it/800x400&text=Medium%20Screens"
                            media="(min-width: 40em)"
                        />
                        <img
                            srcset="http://placehold.it/600x338&text=Default%20Image"
                            alt=""
                        />
                    </picture>
                    <div class="poster__content  postertrio__content">
                        <h1 class="postertrio__content-title">
                            Menzinger Gärten
                        </h1>
                        <div class="postertrio__content-text">
                            Lorem ipsum dolor sit amet consectetur adipisicing
                            elit. Minima, porro?
                        </div>
                        <a class="postertrio__content-action" href="#0"
                            >Mehr Details<img src="http://placehold.it/24"
                        /></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="postertrio__grid-col">
            <div class="postertrio__container">
                <div class="poster  js-poster">
                    <picture class="poster__img">
                        <source
                            srcset="http://placehold.it/1440x1080&text=Large%20Screens"
                            media="(min-width: 64em)"
                        />
                        <source
                            srcset="http://placehold.it/800x400&text=Medium%20Screens"
                            media="(min-width: 40em)"
                        />
                        <img
                            srcset="http://placehold.it/600x338&text=Default%20Image"
                            alt=""
                        />
                    </picture>
                    <div class="poster__content  postertrio__content">
                        <h1 class="postertrio__content-title">
                            Menzinger Gärten – Gärten zu Wasser & zu Land
                        </h1>
                        <div class="postertrio__content-text">
                            Lorem ipsum dolor sit amet consectetur adipisicing
                            elit. Minima, porro?
                        </div>
                        <a class="postertrio__content-action" href="#0"
                            >Mehr Details<img src="http://placehold.it/24"
                        /></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="postertrio__grid-col  postertrio__grid-col--full">
            <div class="postertrio__container">
                <div class="poster  js-poster">
                    <picture class="poster__img">
                        <source
                            srcset="http://placehold.it/1440x1080&text=Large%20Screens"
                            media="(min-width: 64em)"
                        />
                        <source
                            srcset="http://placehold.it/800x400&text=Medium%20Screens"
                            media="(min-width: 40em)"
                        />
                        <img
                            srcset="http://placehold.it/600x338&text=Default%20Image"
                            alt=""
                        />
                    </picture>
                    <div class="poster__content  postertrio__content">
                        <h1 class="postertrio__content-title">
                            Menzinger Gärten
                        </h1>
                        <div class="postertrio__content-text">
                            Lorem ipsum dolor sit amet consectetur adipisicing
                            elit. Minima, porro?
                        </div>
                        <a class="postertrio__content-action" href="#0"
                            >Mehr Details<img src="http://placehold.it/24"
                        /></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Styleguide sections.postertrio
*/
.postertrio {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-left: 0;
  padding-right: 0;
  color: #fff; }

.poster {
  position: relative; }
  .poster:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.44)));
    background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.44));
    background: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.44));
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.44)); }

.postertrio__img {
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0; }

.postertrio__content-title {
  font-size: 30px;
  max-width: 450px; }
  @media (min-width: 64em) {
    .postertrio__content-title {
      margin: 0;
      font-family: serif;
      letter-spacing: 0;
      -webkit-hyphens: auto;
          -ms-hyphens: auto;
              hyphens: auto;
      font-family: serif;
      font-size: 28px;
      color: inherit;
      line-height: 1.25;
      margin-bottom: 20px; } }
  @media (min-width: 64em) and (min-width: 40em) {
    .postertrio__content-title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  @media (min-width: 64em) {
      .fl .postertrio__content-title {
        font-family: "UrgeText-SemiBold", serif; }
      .fl .postertrio__content-title {
        font-family: "Noto Sans", sans-serif; }
      .postertrio__content-title sup {
        font-size: 0.45em;
        top: -1em; } }
  @media (min-width: 64em) and (min-width: 40em) {
    .postertrio__content-title {
      font-size: 36px; } }

.postertrio__content-text {
  font-weight: 400;
  color: inherit;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1.2;
  margin-bottom: 30px;
  font-weight: 700; }
  @media (min-width: 40em) {
    .postertrio__content-text {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .postertrio__content-text a:not([class]) {
    color: currentColor; }
    .postertrio__content-text a:not([class]):hover {
      opacity: 0.75; }
  .postertrio__content-text *:first-child {
    margin-top: 0; }
  .postertrio__content-text *:last-child {
    margin-bottom: 0; }

.postertrio__content-action {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  -webkit-box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
          box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
  background: #afcc56; }
  @media (min-width: 40em) {
    .postertrio__content-action {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .postertrio__content-action svg,
  .postertrio__content-action img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .postertrio__content-action * + svg,
  .postertrio__content-action * + img {
    margin-right: 0;
    margin-left: 15px; }
  .postertrio__content-action:hover {
    cursor: pointer;
    color: #ffffff; }
  .postertrio__content-action:hover {
    background-color: #88a431; }
  .postertrio__content-action:disabled, .postertrio__content-action.is-disabled {
    pointer-events: none;
    opacity: 0.25; }
  .postertrio__content-action img {
    margin-left: 20px; }

.postertrio__content {
  position: absolute;
  bottom: 40px;
  left: 20px;
  padding-right: 40px; }
  @media (min-width: 64em) {
    .postertrio__content {
      left: 40px; } }

@media (min-width: 40em) {
  .postertrio__grid {
    margin-left: -20px;
    display: block;
    font-size: 0; }
    .postertrio__grid > * {
      padding-left: 20px;
      vertical-align: top;
      display: inline-block;
      font-size: 16px; } }

.postertrio__grid-col {
  margin-bottom: 20px; }
  @media (min-width: 40em) {
    .postertrio__grid-col {
      width: 50%;
      position: relative; } }

@media (min-width: 40em) {
  .postertrio__grid-col--full {
    width: 100%;
    position: relative; } }

.postertrio__grid-col .poster {
  padding-bottom: 75%;
  min-height: 550px; }
  @media (min-width: 40em) {
    .postertrio__grid-col .poster {
      padding-bottom: 100%; } }

@media (min-width: 40em) {
  .postertrio__grid-col--full .poster {
    padding-bottom: 52%; } }

/*
Videos

Markup:
<section class="Videos">
    <div class="Videos__grid">
        <div class="Videos__container">
            <h1 class="Videos__title">Video Ãœberblick</h1>
            <div class="Videos__text">Die Landesgartenschau Überlingen 2020 GmbH verzeichnet den ersten Erfolg beim Thema Sponsoring. „Wir freuen uns sehr, mit der Riess Gruppe einen kompetenten und verlässlichen Mobilitätspartner für die Landesgartenschau gefunden zu haben“, sagte Roland Leitner, Geschäftsführer der Landesgartenschau Überlingen 2020 GmbH. ….</div>
            <div class="Videos__list">
                <div class="Videos__list__item">
                    <div data-app="video" data-yt-id="nsg1y2ZrPfA">
                        <picture>
                            <source srcset="http://placehold.it/1440x675&text=Large%20Screens" media="(min-width: 64em)">
                            <source srcset="http://placehold.it/1024x675&text=Medium%20Screens" media="(min-width: 40em)">
                            <img srcset="http://placehold.it/640x400&text=Default%20Image" alt="" class="fluid">
                        </picture>
                        <div class="video__play-wrapper">
                            <div class="video__play"></div>
                            <div class="video__play-label">Video abspielen</div>
                        </div>
                    </div>
                    <div class="Videos__item__text">
                        <b>Video zur Landesgartenschau</b><br />
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis explicabo suscipit porro.
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Styleguide sections.videos
*/
.Videos {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px; }

@media (min-width: 64em) {
  .Videos__grid {
    margin-left: -20px;
    display: block;
    font-size: 0; }
    .Videos__grid > * {
      padding-left: 20px;
      vertical-align: top;
      display: inline-block;
      font-size: 16px; } }

@media (min-width: 64em) {
  .Videos__container {
    width: 85.71429%;
    position: relative;
    right: auto;
    left: 7.14286%; } }

.Videos__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 16px;
  color: #18492b;
  line-height: 1.45;
  max-width: 700px;
  margin-bottom: 20px; }
  @media (min-width: 40em) {
    .Videos__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .Videos__title {
    font-family: "UrgeText-SemiBold", serif; }
  .Videos__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .Videos__title {
      font-size: 20px; } }

.Videos__text {
  font-weight: 400;
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.41;
  max-width: 700px;
  margin-bottom: 35px; }
  @media (min-width: 40em) {
    .Videos__text {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .Videos__text a:not([class]) {
    color: currentColor; }
    .Videos__text a:not([class]):hover {
      opacity: 0.75; }
  .Videos__text *:first-child {
    margin-top: 0; }
  .Videos__text *:last-child {
    margin-bottom: 0; }

.Videos__list {
  margin-bottom: -20px; }

.Videos__list__item {
  margin-bottom: 20px; }
  @media (min-width: 40em) {
    .Videos__list__item {
      width: 50%;
      position: relative; } }

.Videos__item__text {
  max-width: 700px;
  margin-top: 10px;
  font-weight: 400;
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.41; }
  @media (min-width: 40em) {
    .Videos__item__text {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .Videos__item__text a:not([class]) {
    color: currentColor; }
    .Videos__item__text a:not([class]):hover {
      opacity: 0.75; }
  .Videos__item__text *:first-child {
    margin-top: 0; }
  .Videos__item__text *:last-child {
    margin-bottom: 0; }

/**
* JS-Apps
* 
* Styleguide js-apps
*/
/*
Leaf Counter

Markup:
<div style="padding: 20px; background: #409560;">
<div class="leaf-counter">
    <div class="leaf-counter__title">Der<br>Countdown<br>läuft</div>
    <div class="leaf-counter__days">
        <span>
            765
            <span class="leaf-counter__days__label">Tage</span>
        </span>
    </div>
    <img src="../media/leaf.svg" alt="" class="leaf-counter__decorator">
</div>
</div>
<br>
<div style="padding: 20px; background: #409560;">
    <div data-app="leaf-counter"></div>
</div>

Styleguide js-apps.leaf-counter
*/
.leaf-counter {
  color: #ffffff;
  text-align: center;
  display: inline-block;
  position: relative; }

.leaf-counter__title {
  position: relative;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  line-height: 1.2;
  z-index: 1; }
  @media (min-width: 64em) {
    .leaf-counter__title {
      font-size: 16px; } }

.leaf-counter__days {
  margin-top: 5px;
  position: relative;
  font-size: 30px;
  z-index: 0; }
  @media (min-width: 64em) {
    .leaf-counter__days {
      font-size: 48px; } }
  .leaf-counter__days:before {
    content: '';
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    border: 8px solid rgba(175, 204, 86, 0.9);
    display: inline-block;
    border-radius: 50%;
    background-color: #ce115d;
    position: absolute;
    z-index: 0; }
    @media (min-width: 64em) {
      .leaf-counter__days:before {
        width: 140px;
        height: 140px;
        margin-top: -70px;
        margin-left: -70px; } }
  .leaf-counter__days span {
    position: relative;
    z-index: 1; }

.leaf-counter__days__label {
  font-size: 14px;
  text-decoration: underline;
  display: block;
  font-family: serif; }
  .fl .leaf-counter__days__label {
    font-family: "UrgeText-SemiBold", serif; }
  @media (min-width: 64em) {
    .leaf-counter__days__label {
      font-size: 16px; } }

.leaf-counter__decorator {
  max-width: 75px;
  position: absolute;
  right: -15px;
  bottom: -50px; }
  @media (min-width: 64em) {
    .leaf-counter__decorator {
      max-width: 105px;
      right: -40px; } }

/*
Toggle

Markup:
<div data-app="toggle" data-target="toggle-01">
    <script type="text/tpl" data-toggle-more>
        <button class="toggle__more"><img src="http://placehold.it/24"> mehr anzeigen</button>
    </script>
    <script type="text/tpl" data-toggle-less>
        <button class="toggle__less"><img src="http://placehold.it/24"> weniger anzeigen</button>
    </script>
</div>
<!-- [...] -->
<div id="toggle-01">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur optio repellat possimus nobis repellendus praesentium odit corrupti obcaecati amet, ipsum iste suscipit eum inventore nisi illum et veritatis sapiente.
</div>

Styleguide js-apps.toggle
*/
.toggle__more {
  margin: 0;
  padding-right: 12px;
  display: inline-block;
  position: relative;
  color: #ce115d;
  text-decoration: none;
  text-transform: uppercase;
  border: none;
  outline: none;
  font-size: 12px;
  line-height: 1.16;
  letter-spacing: 0.86px; }
  .toggle__more svg,
  .toggle__more img {
    width: 1.2em;
    height: 1.2em;
    margin-right: 10px;
    fill: currentColor;
    vertical-align: middle; }
  .toggle__more::before {
    content: '';
    width: 7px;
    height: 7px;
    position: absolute;
    right: -3px; }
  .toggle__more::after {
    content: '';
    bottom: 2px;
    width: 1px;
    height: 10px;
    position: absolute;
    right: 0;
    display: inline-block;
    background-color: currentColor;
    -webkit-transition: width 0.25s ease-in-out;
    -o-transition: width 0.25s ease-in-out;
    transition: width 0.25s ease-in-out; }
  .toggle__more::before {
    content: '';
    top: 12px;
    background: url(data:image/svg+xml;base64,phn2zyb3awr0ad0inyigagvpz2h0psi3iib2awv3qm94psiwidagnya3iib4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmcipjxwyxroigq9ik0zljugn0myljcynsa0ljg1myaxljqgmi4xosawic41mzhmmy41ideuodqgnyauntm5qzuuntk5idiumtg4idqumjc1idquoduyidmunsa3eiigzmlsbd0ii2nlmte1zcigzmlsbc1ydwxlpsjldmvub2rkii8+pc9zdmc+cg==); }
  .toggle__more::after {
    top: 1px; }
  .toggle__more:hover::before {
    top: 15px; }
  .toggle__more:hover::after {
    height: 15px; }

.toggle__less {
  margin: 0;
  padding-right: 12px;
  display: inline-block;
  position: relative;
  color: #ce115d;
  text-decoration: none;
  text-transform: uppercase;
  border: none;
  outline: none;
  font-size: 12px;
  line-height: 1.16;
  letter-spacing: 0.86px; }
  .toggle__less svg,
  .toggle__less img {
    width: 1.2em;
    height: 1.2em;
    margin-right: 10px;
    fill: currentColor;
    vertical-align: middle; }
  .toggle__less::before {
    content: '';
    width: 7px;
    height: 7px;
    position: absolute;
    right: -3px; }
  .toggle__less::after {
    content: '';
    bottom: 2px;
    width: 1px;
    height: 10px;
    position: absolute;
    right: 0;
    display: inline-block;
    background-color: currentColor;
    -webkit-transition: width 0.25s ease-in-out;
    -o-transition: width 0.25s ease-in-out;
    transition: width 0.25s ease-in-out; }
  .toggle__less::before {
    content: '';
    bottom: 12px;
    background: url(data:image/svg+xml;base64,phn2zyb3awr0ad0inyigagvpz2h0psi3iib2awv3qm94psiwidagnya3iib4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmcipjxwyxroigq9ik0zljuuntm4qzqumjc1idiunjg2iduunia1ljm0oca3iddmmy41iduunyawidddms40mdegns4zndkgmi43mjugmi42odygmy41ljuzohoiigzpbgw9iinjztexnwqiigzpbgwtcnvszt0izxzlbm9kzcivpjwvc3znpgo=); }
  .toggle__less:hover::before {
    bottom: 15px; }
  .toggle__less:hover::after {
    height: 15px; }

/*
Decorator

<style>
    .bkss-example .decorator {
        position: relative;
    }

    [data-app="decoration"] .decorator {
        position: absolute;
    }
</style>

Use ```decorator--left``` or ```decorator--right``` to place the decorator left or right.

Markup:
<div data-app="decoration"></div>

Styleguide js-apps.decorator
*/
/*
Flower blue large

Markup:
<div class="decorator">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="176" height="381" viewbox="0 0 176 381"><defs><path id="decorator-blue-large-b" d="M119.324 277.942c-6.836-19.216-21.187-31.41-30.117-37.464v-.02l-.015.01-.014-.01v.02c-.08.053-.166.116-.246.17v102.304l.246.154v.018l.014-.01.015.01v-.018l7.139-4.48c13.43-8.623 33.306-31.646 22.978-60.684"/><filter id="decorator-blue-large-a" width="322.5%" height="172.1%" x="-111.2%" y="-34.1%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.247395833 0"/></filter><path id="decorator-blue-large-d" d="M59.06 277.942c-10.327 29.038 9.548 52.06 22.978 60.685l6.894 4.325V240.649c-8.945 6.108-23.096 18.246-29.872 37.293"/><filter id="decorator-blue-large-c" width="326%" height="172.3%" x="-113%" y="-34.2%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.247395833 0"/></filter><path id="decorator-blue-large-f" d="M88.366 252.717c1.175 6.402-3.42 9.544-4.853 10.547-1.432 1.003-2.813 2.963-2.813 2.963v-21.26c4.665-.023 7 4.122 7.666 7.75"/><filter id="decorator-blue-large-e" width="1041.9%" height="448.1%" x="-471%" y="-164.6%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.247395833 0"/></filter><path id="decorator-blue-large-h" d="M73.01 252.717c-1.174 6.402 3.421 9.544 4.854 10.547 1.431 1.003 2.812 2.963 2.812 2.963v-21.26c-4.665-.023-7 4.122-7.666 7.75"/><filter id="decorator-blue-large-g" width="1042%" height="448.1%" x="-471%" y="-164.6%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.247395833 0"/></filter><path id="decorator-blue-large-j" d="M92.842 216.192c2.292 12.498-6.678 18.633-9.474 20.59-2.797 1.958-5.492 5.784-5.492 5.784v-41.504c9.108-.046 13.666 8.047 14.966 15.13"/><filter id="decorator-blue-large-i" width="582.5%" height="278.3%" x="-241.2%" y="-84.3%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.247395833 0"/></filter><path id="decorator-blue-large-l" d="M72.34 236.782c2.797 1.958 5.492 5.784 5.492 5.784v-41.504c-9.11-.046-13.667 8.047-14.966 15.13-2.293 12.498 6.677 18.633 9.474 20.59z"/><filter id="decorator-blue-large-k" width="582.5%" height="278.3%" x="-241.2%" y="-84.3%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.247395833 0"/></filter><path id="decorator-blue-large-n" d="M79.966 235.355c-3.24-9.8-10.362-16.132-14.812-19.297v-.01l-.006.004a.022.022 0 0 1-.008-.005v.01l-.126.084-1.164 51.76.122.08v.01l.008-.005.007.005v-.01l3.663-2.184c6.893-4.21 17.211-15.633 12.316-30.442"/><filter id="decorator-blue-large-m" width="525.5%" height="242.5%" x="-212.8%" y="-67.4%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.247395833 0"/></filter><path id="decorator-blue-large-p" d="M49.447 234.536c-5.591 14.668 4.266 26.618 11.006 31.163l3.46 2.28 1.172-52.09c-4.625 3.008-11.97 9.026-15.638 18.647"/><filter id="decorator-blue-large-o" width="528%" height="242.1%" x="-214%" y="-67.2%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.247395833 0"/></filter><path id="decorator-blue-large-r" d="M114.977 150.182c-3.899-10.959-12.084-17.913-17.176-21.365v-.012l-.009.006-.008-.006v.012l-.14.097v58.343l.14.088v.01l.008-.006.01.006v-.01l4.071-2.555c7.66-4.918 18.994-18.047 13.104-34.608"/><filter id="decorator-blue-large-q" width="490.1%" height="226.4%" x="-195.1%" y="-59.8%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.247395833 0"/></filter><path id="decorator-blue-large-t" d="M80.601 150.15c-5.9 16.59 5.455 29.742 13.128 34.67l3.938 2.47v-58.447c-5.11 3.49-13.195 10.425-17.066 21.306"/><filter id="decorator-blue-large-s" width="495.6%" height="226.6%" x="-197.8%" y="-59.9%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.247395833 0"/></filter><path id="decorator-blue-large-v" d="M150.152 176.723c-6.333-17.8-19.627-29.095-27.898-34.704V142l-.014.01-.014-.01v.019c-.073.05-.153.108-.226.159v94.764l.226.143v.017l.014-.009.014.009v-.017l6.613-4.149c12.44-7.988 30.851-29.315 21.285-56.213"/><filter id="decorator-blue-large-u" width="340.2%" height="177.8%" x="-120.1%" y="-36.8%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.247395833 0"/></filter><path id="decorator-blue-large-x" d="M116.493 232.849l6.41 4.022v-95.118c-8.317 5.679-21.474 16.965-27.775 34.674-9.602 26.999 8.879 48.404 21.365 56.422z"/><filter id="decorator-blue-large-w" width="343.1%" height="177.8%" x="-121.5%" y="-36.8%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.247395833 0"/></filter><filter id="decorator-blue-large-y" width="201.4%" height="161.7%" x="-50.7%" y="-29.2%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.247395833 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter><path id="decorator-blue-large-A" d="M115.242 178.71c2.292 12.497-6.678 18.631-9.474 20.59-2.797 1.957-5.492 5.783-5.492 5.783V163.58c9.108-.046 13.666 8.047 14.966 15.13"/><filter id="decorator-blue-large-z" width="582.5%" height="278.3%" x="-241.2%" y="-84.3%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.247395833 0"/></filter><path id="decorator-blue-large-C" d="M85.265 178.71c-2.293 12.497 6.677 18.631 9.474 20.59 2.797 1.957 5.492 5.783 5.492 5.783V163.58c-9.109-.046-13.667 8.047-14.966 15.13"/><filter id="decorator-blue-large-B" width="582.5%" height="278.3%" x="-241.2%" y="-84.3%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.247395833 0"/></filter><filter id="decorator-blue-large-D" width="562.5%" height="272.1%" x="-231.2%" y="-81.4%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.247395833 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter><path id="decorator-blue-large-E" d="M.081.876h15.336V42.38H.081z"/><filter id="decorator-blue-large-F" width="535.3%" height="272.1%" x="-217.6%" y="-81.4%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.247395833 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter><path id="decorator-blue-large-H" d="M105.116 54.308c-3.24-9.8-10.362-16.133-14.812-19.297V35a.018.018 0 0 1-.007.005L90.29 35l-.001.01-.125.084L89 86.853l.122.081v.009l.008-.004.007.005v-.01l3.663-2.185c6.892-4.21 17.211-15.632 12.316-30.441"/><filter id="decorator-blue-large-G" width="525.6%" height="242.5%" x="-212.8%" y="-67.4%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.247395833 0"/></filter><path id="decorator-blue-large-J" d="M74.65 53.647c-5.59 14.668 4.267 26.618 11.006 31.163l3.46 2.281L90.29 35c-4.625 3.007-11.97 9.026-15.638 18.647"/><filter id="decorator-blue-large-I" width="528%" height="242.1%" x="-214%" y="-67.2%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.247395833 0"/></filter><path id="decorator-blue-large-L" d="M72.43 118.546c2.293 12.498-6.677 18.633-9.474 20.59-2.797 1.958-5.492 5.784-5.492 5.784v-41.504c9.11-.046 13.667 8.047 14.966 15.13"/><filter id="decorator-blue-large-K" width="582.5%" height="278.3%" x="-241.2%" y="-84.3%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.247395833 0"/></filter><path id="decorator-blue-large-N" d="M42.454 118.546c-2.293 12.498 6.678 18.633 9.474 20.59 2.797 1.958 5.492 5.784 5.492 5.784v-41.504c-9.108-.046-13.666 8.047-14.966 15.13"/><filter id="decorator-blue-large-M" width="582.5%" height="278.3%" x="-241.2%" y="-84.3%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.247395833 0"/></filter><path id="decorator-blue-large-P" d="M47.024 151.9c1.801 9.813-5.242 14.629-7.437 16.166-2.196 1.537-4.312 4.54-4.312 4.54v-32.584c7.15-.036 10.729 6.317 11.749 11.878"/><filter id="decorator-blue-large-O" width="714.6%" height="327.1%" x="-307.3%" y="-107.4%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.247395833 0"/></filter><path id="decorator-blue-large-R" d="M23.49 151.9c-1.801 9.813 5.242 14.629 7.437 16.166 2.197 1.537 4.312 4.54 4.312 4.54v-32.584c-7.15-.036-10.73 6.317-11.75 11.878"/><filter id="decorator-blue-large-Q" width="714.6%" height="327.1%" x="-307.3%" y="-107.4%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.247395833 0"/></filter><filter id="decorator-blue-large-S" width="324.2%" height="179.8%" x="-112.1%" y="-37.2%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.247395833 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter><path id="decorator-blue-large-T" d="M.171.258h7.497v20.289H.171z"/><path id="decorator-blue-large-V" d="M.123.258H7.62v20.289H.123z"/></defs><g fill="none" fill-rule="evenodd"><g opacity=".686"><use fill="#000" filter="url(#decorator-blue-large-a)" xlink:href="#decorator-blue-large-b"/><use fill="#CBDE9C" xlink:href="#decorator-blue-large-b"/></g><use fill="#000" filter="url(#decorator-blue-large-c)" xlink:href="#decorator-blue-large-d"/><use fill="#BDD57F" xlink:href="#decorator-blue-large-d"/><use fill="#000" filter="url(#decorator-blue-large-e)" xlink:href="#decorator-blue-large-f"/><use fill="#2653A0" xlink:href="#decorator-blue-large-f"/><use fill="#000" filter="url(#decorator-blue-large-g)" xlink:href="#decorator-blue-large-h"/><use fill="#2653A0" xlink:href="#decorator-blue-large-h"/><use fill="#000" filter="url(#decorator-blue-large-i)" xlink:href="#decorator-blue-large-j"/><use fill="#2653A0" xlink:href="#decorator-blue-large-j"/><g opacity=".565"><use fill="#000" filter="url(#decorator-blue-large-k)" xlink:href="#decorator-blue-large-l"/><use fill="#2653A0" xlink:href="#decorator-blue-large-l"/></g><g opacity=".909"><use fill="#000" filter="url(#decorator-blue-large-m)" xlink:href="#decorator-blue-large-n"/><use fill="#8CD2F5" xlink:href="#decorator-blue-large-n"/></g><use fill="#000" filter="url(#decorator-blue-large-o)" xlink:href="#decorator-blue-large-p"/><use fill="#C7E7F5" xlink:href="#decorator-blue-large-p"/><use fill="#000" filter="url(#decorator-blue-large-q)" xlink:href="#decorator-blue-large-r"/><use fill="#A7DBF7" xlink:href="#decorator-blue-large-r"/><use fill="#000" filter="url(#decorator-blue-large-s)" xlink:href="#decorator-blue-large-t"/><use fill="#C7E7F5" xlink:href="#decorator-blue-large-t"/><use fill="#000" filter="url(#decorator-blue-large-u)" xlink:href="#decorator-blue-large-v"/><use fill="#2653A0" xlink:href="#decorator-blue-large-v"/><g opacity=".588"><use fill="#000" filter="url(#decorator-blue-large-w)" xlink:href="#decorator-blue-large-x"/><use fill="#2653A0" xlink:href="#decorator-blue-large-x"/></g><g filter="url(#decorator-blue-large-y)" transform="translate(74 179.124)"><path fill="#95C01F" d="M69.852 43.864C63.488 22.048 54.082.334 35.752.362V.34l-.016.012c-.006-.004-.011-.009-.017-.012v.023c-.089.063-.187.135-.277.198v118.79l.277.178v.021l.017-.01.016.01v-.021l8.084-5.201c15.205-10.014 36.05-36.06 26.016-70.463" opacity=".64"/><path fill="#CBDE9C" d="M1.62 43.864c-5.181 35.77 10.81 60.45 26.016 70.463l7.807 5.022L35.442.56C14.859.43 4.557 23.59 1.62 43.864"/></g><g opacity=".534"><use fill="#000" filter="url(#decorator-blue-large-z)" xlink:href="#decorator-blue-large-A"/><use fill="#2653A0" xlink:href="#decorator-blue-large-A"/></g><use fill="#000" filter="url(#decorator-blue-large-B)" xlink:href="#decorator-blue-large-C"/><use fill="#2653A0" xlink:href="#decorator-blue-large-C"/><path fill="#2653A0" d="M15.046 16.006c2.293 12.498-6.678 18.632-9.474 20.59C2.776 38.554.08 42.38.08 42.38V.876C9.189.83 13.747 8.923 15.046 16.006" filter="url(#decorator-blue-large-D)" opacity=".582" transform="translate(103 19)"/><path fill="#2653A0" d="M1.069 16.006c-2.292 12.498 6.678 18.632 9.475 20.59 2.796 1.958 5.491 5.784 5.491 5.784V.876C6.927.83 2.369 8.923 1.069 16.006" filter="url(#decorator-blue-large-F)" transform="translate(87 19)"/><use fill="#000" filter="url(#decorator-blue-large-G)" xlink:href="#decorator-blue-large-H"/><use fill="#A7DBF7" xlink:href="#decorator-blue-large-H"/><use fill="#000" filter="url(#decorator-blue-large-I)" xlink:href="#decorator-blue-large-J"/><use fill="#C7E7F5" xlink:href="#decorator-blue-large-J"/><use fill="#000" filter="url(#decorator-blue-large-K)" xlink:href="#decorator-blue-large-L"/><use fill="#2653A0" xlink:href="#decorator-blue-large-L"/><g opacity=".639"><use fill="#000" filter="url(#decorator-blue-large-M)" xlink:href="#decorator-blue-large-N"/><use fill="#2653A0" xlink:href="#decorator-blue-large-N"/></g><g><use fill="#000" filter="url(#decorator-blue-large-O)" xlink:href="#decorator-blue-large-P"/><use fill="#2653A0" xlink:href="#decorator-blue-large-P"/></g><g opacity=".681"><use fill="#000" filter="url(#decorator-blue-large-Q)" xlink:href="#decorator-blue-large-R"/><use fill="#2653A0" xlink:href="#decorator-blue-large-R"/></g><g filter="url(#decorator-blue-large-S)" opacity=".993" transform="translate(117 265)"><path fill="#2653A0" d="M28.048 9.42c1.427 7.782-4.158 11.602-5.9 12.82-1.74 1.22-3.419 3.602-3.419 3.602V0c5.671-.029 8.51 5.01 9.319 9.42" opacity=".627"/><path fill="#2653A0" d="M9.383 9.42c-1.428 7.782 4.158 11.602 5.9 12.82 1.74 1.22 3.418 3.602 3.418 3.602V0c-5.671-.029-8.509 5.01-9.318 9.42"/><path fill="#A7DBF7" d="M20.03 21.353c-2.017-6.102-6.451-10.045-9.222-12.015V9.33a.011.011 0 0 1-.004.003c-.001 0-.003-.003-.005-.003v.006l-.078.052-.725 32.228.076.05v.006l.005-.003.005.003v-.006l2.28-1.36c4.291-2.622 10.717-9.734 7.669-18.954"/><path fill="#C7E7F5" d="M1.028 20.842c-3.481 9.133 2.656 16.574 6.852 19.404l2.155 1.42.73-32.434c-2.88 1.872-7.453 5.62-9.737 11.61"/><path fill="#2653A0" d="M32.645 60.114c1.428 7.781-4.157 11.601-5.899 12.82-1.741 1.219-3.42 3.601-3.42 3.601V50.693c5.672-.029 8.51 5.01 9.32 9.42" opacity=".703"/><path fill="#2653A0" d="M13.98 60.114c-1.427 7.781 4.159 11.601 5.9 12.82 1.741 1.219 3.42 3.601 3.42 3.601V50.693c-5.672-.029-8.51 5.01-9.32 9.42"/><g transform="translate(9.34 73.227)"><mask id="decorator-blue-large-U" fill="#fff"><use xlink:href="#decorator-blue-large-T"/></mask><path fill="#2653A0" d="M7.487 7.654c1.121 6.11-3.264 9.109-4.63 10.066C1.488 18.677.17 20.547.17 20.547V.258c4.452-.022 6.68 3.934 7.316 7.396" mask="url(#decorator-blue-large-U)"/></g><g opacity=".46" transform="translate(1.868 73.227)"><mask id="decorator-blue-large-W" fill="#fff"><use xlink:href="#decorator-blue-large-V"/></mask><path fill="#2653A0" d="M.305 7.654c-1.121 6.11 3.264 9.109 4.63 10.066 1.369.957 2.685 2.827 2.685 2.827V.258C3.17.236.94 4.192.305 7.654" mask="url(#decorator-blue-large-W)"/></g></g></g></svg>
</div>

Styleguide js-apps.decorator.1
*/
/*
Flower blue

Markup:
<div class="decorator">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="108" height="259" viewbox="0 0 108 259"><defs><path id="decorator-blue-b" d="M78.613 119.31c2.391 12.648-6.967 18.856-9.885 20.837C65.812 142.128 63 146 63 146v-42c9.502-.046 14.257 8.143 15.613 15.31"/><filter id="decorator-blue-a" width="562.5%" height="276.2%" x="-231.2%" y="-83.3%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.257501132 0"/></filter><path id="decorator-blue-d" d="M47.387 119.31c-2.391 12.648 6.967 18.856 9.885 20.837C60.188 142.128 63 146 63 146v-42c-9.502-.046-14.257 8.143-15.613 15.31"/><filter id="decorator-blue-c" width="562.5%" height="276.2%" x="-231.2%" y="-83.3%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.257501132 0"/></filter><path id="decorator-blue-f" d="M61.755 138.329c-3.167-9.81-10.13-16.15-14.48-19.318V119a.018.018 0 0 1-.007.005l-.007-.005v.01l-.123.084L46 170.91l.12.081v.009l.007-.004.007.005v-.01l3.58-2.187c6.739-4.215 16.827-15.65 12.041-30.474"/><filter id="decorator-blue-e" width="535.3%" height="242.3%" x="-217.6%" y="-67.3%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.257501132 0"/></filter><path id="decorator-blue-h" d="M31.623 137.614c-5.497 14.643 4.195 26.572 10.821 31.109L45.848 171 47 119c-4.548 3.002-11.77 9.01-15.377 18.614"/><filter id="decorator-blue-g" width="535.3%" height="242.3%" x="-217.6%" y="-67.3%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.257501132 0"/></filter><path id="decorator-blue-j" d="M84.637 200.31c2.243 12.648-6.53 18.857-9.266 20.837C72.636 223.128 70 227 70 227v-42c8.909-.046 13.367 8.143 14.637 15.31"/><filter id="decorator-blue-i" width="593.3%" height="276.2%" x="-246.7%" y="-83.3%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.257501132 0"/></filter><path id="decorator-blue-l" d="M55.363 200.31c-2.243 12.648 6.531 18.857 9.266 20.837C67.364 223.128 70 227 70 227v-42c-8.908-.046-13.366 8.143-14.637 15.31"/><filter id="decorator-blue-k" width="593.3%" height="276.2%" x="-246.7%" y="-83.3%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.257501132 0"/></filter><filter id="decorator-blue-m" width="324.2%" height="177.9%" x="-112.1%" y="-36.8%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.257501132 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter><filter id="decorator-blue-n" width="421.7%" height="213%" x="-160.9%" y="-52.9%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.257501132 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g fill="none" fill-rule="evenodd"><use fill="#000" filter="url(#decorator-blue-a)" xlink:href="#decorator-blue-b"/><use fill="#2653A0" xlink:href="#decorator-blue-b"/><g opacity=".474"><use fill="#000" filter="url(#decorator-blue-c)" xlink:href="#decorator-blue-d"/><use fill="#2653A0" xlink:href="#decorator-blue-d"/></g><g opacity=".825"><use fill="#000" filter="url(#decorator-blue-e)" xlink:href="#decorator-blue-f"/><use fill="#A7DBF7" xlink:href="#decorator-blue-f"/></g><use fill="#000" filter="url(#decorator-blue-g)" xlink:href="#decorator-blue-h"/><use fill="#C7E7F5" xlink:href="#decorator-blue-h"/><use fill="#000" filter="url(#decorator-blue-i)" xlink:href="#decorator-blue-j"/><use fill="#2653A0" xlink:href="#decorator-blue-j"/><g opacity=".546"><use fill="#000" filter="url(#decorator-blue-k)" xlink:href="#decorator-blue-l"/><use fill="#2653A0" xlink:href="#decorator-blue-l"/></g><g filter="url(#decorator-blue-m)" opacity=".993" transform="translate(23 21)"><path fill="#2653A0" d="M28.048 9.42c1.427 7.782-4.158 11.602-5.9 12.82-1.74 1.22-3.419 3.602-3.419 3.602V0c5.671-.029 8.51 5.01 9.319 9.42" opacity=".627"/><path fill="#2653A0" d="M9.383 9.42c-1.428 7.782 4.158 11.602 5.9 12.82 1.74 1.22 3.418 3.602 3.418 3.602V0c-5.671-.029-8.509 5.01-9.318 9.42"/><path fill="#A7DBF7" d="M20.03 21.353c-2.017-6.102-6.451-10.045-9.222-12.015V9.33a.011.011 0 0 1-.004.003c-.001 0-.003-.003-.005-.003v.006l-.078.052-.725 32.228.076.05v.006l.005-.003.005.003v-.006l2.28-1.36c4.291-2.622 10.717-9.734 7.669-18.954"/><path fill="#C7E7F5" d="M1.028 20.842c-3.481 9.133 2.656 16.574 6.852 19.404l2.155 1.42.73-32.434c-2.88 1.872-7.453 5.62-9.737 11.61"/><path fill="#2653A0" d="M32.645 60.114c1.428 7.781-4.157 11.601-5.899 12.82-1.741 1.219-3.42 3.601-3.42 3.601V50.693c5.672-.029 8.51 5.01 9.32 9.42" opacity=".703"/><path fill="#2653A0" d="M13.98 60.114c-1.427 7.781 4.159 11.601 5.9 12.82 1.741 1.219 3.42 3.601 3.42 3.601V50.693c-5.672-.029-8.51 5.01-9.32 9.42M16.827 80.881c1.121 6.11-3.264 9.109-4.63 10.066-1.368.957-2.686 2.827-2.686 2.827V73.485c4.452-.022 6.68 3.934 7.316 7.396"/><path fill="#2653A0" d="M2.173 80.881c-1.121 6.11 3.264 9.109 4.63 10.066 1.369.957 2.685 2.827 2.685 2.827V73.485c-4.451-.022-6.68 3.934-7.315 7.396" opacity=".46"/></g><g filter="url(#decorator-blue-n)" opacity=".993" transform="matrix(-1 0 0 1 55 171)"><path fill="#2653A0" d="M19.548 6.566c.995 5.424-2.898 8.086-4.111 8.935-1.214.85-2.383 2.51-2.383 2.51V0c3.952-.02 5.93 3.492 6.494 6.566" opacity=".627"/><path fill="#2653A0" d="M6.54 6.566c-.995 5.424 2.897 8.086 4.111 8.935 1.214.85 2.383 2.51 2.383 2.51V0C9.082-.02 7.104 3.492 6.54 6.566"/><path fill="#A7DBF7" d="M13.96 14.882c-1.405-4.253-4.496-7-6.427-8.374v-.005l-.003.002-.003-.002v.005l-.055.036-.505 22.462.053.035v.004l.003-.002.004.002v-.004l1.59-.949c2.99-1.827 7.468-6.783 5.344-13.21"/><path fill="#C7E7F5" d="M.716 14.526C-1.71 20.892 2.568 26.078 5.492 28.05l1.502.99.509-22.606C5.496 7.74 2.308 10.351.716 14.526"/><path fill="#2653A0" d="M22.753 41.897c.995 5.424-2.898 8.086-4.112 8.936-1.213.85-2.383 2.51-2.383 2.51V35.33c3.953-.02 5.931 3.493 6.495 6.566" opacity=".703"/><path fill="#2653A0" d="M9.744 41.897c-.995 5.424 2.898 8.086 4.111 8.936 1.214.85 2.384 2.51 2.384 2.51V35.33c-3.953-.02-5.93 3.493-6.495 6.566M11.728 56.372c.782 4.258-2.275 6.348-3.227 7.015-.953.667-1.872 1.97-1.872 1.97v-14.14c3.103-.015 4.656 2.742 5.099 5.155"/><path fill="#2653A0" d="M1.515 56.372c-.782 4.258 2.274 6.348 3.227 7.015.953.667 1.871 1.97 1.871 1.97v-14.14c-3.103-.015-4.656 2.742-5.098 5.155" opacity=".46"/></g></g></svg>
</div>

Styleguide js-apps.decorator.2
*/
/*
Flower red large

Markup:
<div class="decorator">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="140" height="353" viewbox="0 0 140 353"><defs><filter id="decorator-red-large-a" width="178.7%" height="134.4%" x="-39.4%" y="-16.3%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter><filter id="decorator-red-large-b" width="338.7%" height="272.1%" x="-119.4%" y="-81.4%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter><path id="decorator-red-large-c" d="M.176.26h7.732v20.401H.176z"/><path id="decorator-red-large-e" d="M.127.26h7.732v20.401H.127z"/><filter id="decorator-red-large-g" width="338.7%" height="272.1%" x="-119.4%" y="-81.4%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter><path id="decorator-red-large-h" d="M.176.26h7.732v20.401H.176z"/><path id="decorator-red-large-j" d="M.127.26h7.732v20.401H.127z"/><filter id="decorator-red-large-l" width="772.7%" height="628.6%" x="-336.4%" y="-250%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter><filter id="decorator-red-large-m" width="772.7%" height="628.6%" x="-336.4%" y="-250%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g fill="none" fill-rule="evenodd"><g filter="url(#decorator-red-large-a)" transform="translate(23 115)"><path fill="#64B485" d="M89.183 82.073C78.417 67.896 65.431 62.599 55.88 43.029l-.24.18v120.412l.207.242v.019l.017-.01.016.01v-.019s52.638-56.33 33.303-81.79"/><path fill="#C3D6C5" d="M22.545 82.073C3.85 106.437 52.424 159.849 55.64 163.621V43.209C42.335 66.784 29.868 72.527 22.545 82.073"/><path stroke="#FEFEFE" stroke-width=".25" d="M62.342 53.918l-2.138 1.452c-.78.53-1.561 1.062-2.248 1.708-.812.765-1.477 1.68-2.312 2.422m8.513-3.206c-3.428 2.095-5.543 5.777-8.572 8.416m12.301-4.247c-3.37 2.208-6.395 4.982-8.705 8.285-.67.955-1.281 1.96-2.081 2.808a8.384 8.384 0 0 1-1.651 1.358m16.665-8.092c-4.792 3.745-7.629 9.397-11.516 14.075a38.462 38.462 0 0 1-5.117 5.1M76 68.465A703.19 703.19 0 0 1 65.967 83.84c-3.168 4.718-6.42 9.43-10.47 13.417m26.73-22.642c-2.17 4.116-5.535 7.452-8.348 11.159-1.51 1.992-2.867 4.097-4.275 6.164a143.344 143.344 0 0 1-13.906 17.343m33.936-26.46c-3.12 1.929-5.507 4.812-7.923 7.57-5.001 5.713-10.36 11.1-15.714 16.483l-7.667 7.708c-.817.822-1.651 1.657-2.675 2.2M92.78 90.84c-3.344 3.733-6.69 7.472-9.71 11.472-1.986 2.631-3.836 5.383-6.13 7.751-3.823 3.945-8.713 6.656-13.535 9.29-1.736.948-3.474 1.894-5.212 2.837-.877.475-1.754.95-2.643 1.4m36.894-19.498c-2.387 2.052-4.124 4.736-6.12 7.169-8.224 10.03-20.576 15.578-30.777 23.587m25.963-5.845c-9.121 3.251-17.584 8.08-25.992 12.88m20.572-4.08c-3.496 1.487-7.212 2.388-10.783 3.688-3.571 1.299-7.088 3.07-9.597 5.925m12.228 1.68l-12.198 3.3m6.932 3.427c-2.381.75-4.74 1.567-7.074 2.452m3.472-109.55l-3.555 2.527"/><path fill="#CBDE9C" d="M71.528 149.137c-6.837-19.216-21.187-31.41-30.117-37.464v-.021l-.015.01-.015-.01v.021c-.079.053-.165.116-.245.171v102.303l.245.154v.018l.015-.009.015.009v-.018l7.138-4.479c13.43-8.624 33.306-31.647 22.98-60.685" opacity=".74"/><path fill="#BDD57F" d="M11.264 149.137c-10.327 29.038 9.549 52.061 22.979 60.685l6.893 4.325V111.844c-8.945 6.108-23.097 18.246-29.873 37.293"/><path fill="#941D4D" d="M42.06 152.07c1.74 9.485-5.068 14.142-7.19 15.628-2.124 1.486-4.17 4.391-4.17 4.391v-31.505c6.913-.035 10.374 6.108 11.36 11.485"/><path fill="#F19DC2" d="M19.305 152.07c-1.74 9.485 5.069 14.142 7.192 15.628 2.122 1.486 4.169 4.391 4.169 4.391v-31.505c-6.913-.035-10.375 6.108-11.36 11.485"/><path fill="#D0185D" d="M40.57 123.912c1.174 6.402-3.42 9.544-4.854 10.547-1.432 1.003-2.813 2.963-2.813 2.963v-21.26c4.666-.023 7.001 4.122 7.667 7.75"/><path fill="#EBC3C6" d="M25.215 123.912c-1.175 6.402 3.42 9.544 4.853 10.547 1.432 1.003 2.813 2.963 2.813 2.963v-21.26c-4.665-.023-7.001 4.122-7.666 7.75"/><path fill="#941D4D" d="M45.046 87.387c2.293 12.498-6.677 18.632-9.474 20.59-2.797 1.958-5.492 5.784-5.492 5.784V72.257c9.109-.046 13.667 8.047 14.966 15.13"/><path fill="#F19DC2" d="M15.07 87.387c-2.293 12.498 6.677 18.632 9.473 20.59 2.797 1.958 5.492 5.784 5.492 5.784V72.257c-9.108-.046-13.666 8.047-14.966 15.13"/><path fill="#941D4D" d="M32.17 106.55c-3.24-9.8-10.362-16.132-14.811-19.296v-.011l-.007.005a.03.03 0 0 0-.007-.005l-.001.01-.126.084-1.163 51.758.122.082-.001.008.008-.004.007.005v-.01l3.664-2.184c6.892-4.21 17.21-15.632 12.315-30.441" opacity=".776"/><path fill="#F19DC2" d="M1.651 105.73c-5.59 14.669 4.266 26.619 11.005 31.164l3.461 2.28 1.172-52.09C12.664 90.09 5.32 96.11 1.651 105.73"/><path fill="#D0185D" d="M69.332 21.377C65.434 10.418 57.249 3.464 52.156.012V0l-.008.006L52.14 0v.012L52 .109v58.343l.14.087v.011l.008-.006.008.006v-.011l4.072-2.554c7.659-4.918 18.994-18.048 13.104-34.608"/><path fill="#EBC3C6" d="M34.638 21.306c-5.899 16.59 5.455 29.743 13.128 34.67l3.938 2.471V0c-5.11 3.49-13.194 10.425-17.066 21.306"/><path fill="#941D4D" d="M67.445 49.904c2.293 12.498-6.677 18.633-9.474 20.59-2.797 1.958-5.492 5.785-5.492 5.785V34.774c9.11-.045 13.667 8.047 14.966 15.13"/><path fill="#F19DC2" d="M37.469 49.904c-2.293 12.498 6.678 18.633 9.474 20.59 2.797 1.958 5.492 5.785 5.492 5.785V34.774c-9.108-.045-13.666 8.047-14.966 15.13" opacity=".655"/></g><g filter="url(#decorator-red-large-b)" transform="translate(34 80)"><path fill="#941D4D" d="M30.758 9.114c1.495 7.528-4.353 11.223-6.177 12.402C22.757 22.696 21 25 21 25V0c5.939-.028 8.91 4.847 9.758 9.114"/><path fill="#F19DC2" d="M12.242 9.114c-1.495 7.528 4.353 11.223 6.177 12.402C20.243 22.696 22 25 22 25V0c-5.939-.028-8.911 4.847-9.758 9.114"/><g transform="translate(7 22)"><mask id="decorator-red-large-d" fill="#fff"><use xlink:href="#decorator-red-large-c"/></mask><path fill="#941D4D" d="M7.721 7.697c1.156 6.144-3.366 9.159-4.775 10.121-1.411.963-2.77 2.843-2.77 2.843V.26c4.592-.023 6.89 3.955 7.545 7.437" mask="url(#decorator-red-large-d)"/></g><g transform="translate(0 22)"><mask id="decorator-red-large-f" fill="#fff"><use xlink:href="#decorator-red-large-e"/></mask><path fill="#F19DC2" d="M.314 7.697C-.842 13.84 3.68 16.856 5.09 17.818c1.41.963 2.77 2.843 2.77 2.843V.26C3.267.237.97 4.215.313 7.697" mask="url(#decorator-red-large-f)"/></g></g><g filter="url(#decorator-red-large-g)" transform="matrix(-1 0 0 1 80 37)"><path fill="#941D4D" d="M30.758 9.114c1.495 7.528-4.353 11.223-6.177 12.402C22.757 22.696 21 25 21 25V0c5.939-.028 8.91 4.847 9.758 9.114"/><path fill="#F19DC2" d="M12.242 9.114c-1.495 7.528 4.353 11.223 6.177 12.402C20.243 22.696 22 25 22 25V0c-5.939-.028-8.911 4.847-9.758 9.114"/><g transform="translate(7 22)"><mask id="decorator-red-large-i" fill="#fff"><use xlink:href="#decorator-red-large-h"/></mask><path fill="#941D4D" d="M7.721 7.697c1.156 6.144-3.366 9.159-4.775 10.121-1.411.963-2.77 2.843-2.77 2.843V.26c4.592-.023 6.89 3.955 7.545 7.437" mask="url(#decorator-red-large-i)"/></g><g transform="translate(0 22)"><mask id="decorator-red-large-k" fill="#fff"><use xlink:href="#decorator-red-large-j"/></mask><path fill="#F19DC2" d="M.314 7.697C-.842 13.84 3.68 16.856 5.09 17.818c1.41.963 2.77 2.843 2.77 2.843V.26C3.267.237.97 4.215.313 7.697" mask="url(#decorator-red-large-k)"/></g></g><g filter="url(#decorator-red-large-l)" transform="translate(32 51)"><path fill="#941D4D" d="M10.605 4.962c.822 4.098-2.394 6.11-3.397 6.752-1.003.642-1.97 1.897-1.97 1.897V0c3.266-.015 4.901 2.639 5.367 4.962"/><path fill="#F19DC2" d="M.133 4.962c-.822 4.098 2.395 6.11 3.398 6.752 1.003.642 1.969 1.897 1.969 1.897V0C2.234-.015.6 2.639.133 4.962"/></g><g filter="url(#decorator-red-large-m)" transform="translate(43 20)"><path fill="#941D4D" d="M10.605 4.962c.822 4.098-2.394 6.11-3.397 6.752-1.003.642-1.97 1.897-1.97 1.897V0c3.266-.015 4.901 2.639 5.367 4.962"/><path fill="#F19DC2" d="M.133 4.962c-.822 4.098 2.395 6.11 3.398 6.752 1.003.642 1.969 1.897 1.969 1.897V0C2.234-.015.6 2.639.133 4.962"/></g></g></svg>
</div>

Styleguide js-apps.decorator.3
*/
/*
Flower red

Markup:
<div class="decorator">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="141" height="264" viewbox="0 0 141 264"><defs><filter id="decorator-red-a" width="177.1%" height="150%" x="-38.5%" y="-23.6%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.197039176 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter><filter id="decorator-red-b" width="305.6%" height="229.8%" x="-102.8%" y="-61.4%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.197039176 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter><path id="decorator-red-c" d="M0 .285h17.859v55.621H0z"/><path id="decorator-red-f" d="M46.192 58.015c-.076.037-.136.081-.192.119v71.937l.172.108 5.041-3.15c9.443-6.064 23.419-22.252 16.157-42.671-4.808-13.512-14.898-22.086-21.178-26.343z"/><filter id="decorator-red-e" width="416.4%" height="202.5%" x="-158.2%" y="-48.5%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.197039176 0"/></filter><filter id="decorator-red-g" width="408.3%" height="200%" x="-154.2%" y="-47.3%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.197039176 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter><path id="decorator-red-h" d="M0 .856h23.135v72.289H0z"/><filter id="decorator-red-j" width="338.7%" height="272.1%" x="-119.4%" y="-81.4%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.197039176 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter><path id="decorator-red-k" d="M.176.26h7.732v20.401H.176z"/><path id="decorator-red-m" d="M.127.26h7.732v20.401H.127z"/><filter id="decorator-red-o" width="452.4%" height="355.2%" x="-176.2%" y="-120.7%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="12"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.197039176 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter><path id="decorator-red-p" d="M.11.173h4.833v13.601H.11z"/><path id="decorator-red-r" d="M.079.173h4.833v13.601H.079z"/></defs><g fill="none" fill-rule="evenodd"><g filter="url(#decorator-red-a)" transform="translate(23 19)"><path fill="#941D4D" d="M94.976 113.99c2.292 12.499-6.678 18.634-9.474 20.592-2.797 1.957-5.492 5.784-5.492 5.784V98.862c9.108-.046 13.666 8.046 14.966 15.129"/><path fill="#F19DC2" d="M65 113.99c-2.294 12.499 6.677 18.634 9.474 20.592 2.796 1.957 5.492 5.784 5.492 5.784V98.862c-9.11-.046-13.667 8.046-14.966 15.129"/><path fill="#D0185D" d="M67.914 124.517c-1.851-5.6-5.92-9.219-8.464-11.027v-.006l-.003.003-.005-.003v.006l-.072.048-.665 29.576.07.047v.005l.004-.003.004.003v-.005l2.094-1.25c3.938-2.405 9.834-8.932 7.037-17.394"/><path fill="#EBC3C6" d="M50.475 124.049c-3.195 8.38 2.437 15.21 6.289 17.807l1.977 1.303.67-29.766c-2.643 1.718-6.84 5.158-8.936 10.656"/><path fill="#D0185D" d="M75.853 19.637C72.613 9.837 65.491 3.504 61.041.34V.33l-.006.004c-.003 0-.005-.004-.008-.005v.01l-.126.084-1.164 51.76.122.08v.01l.008-.005.007.005v-.01l3.664-2.185c6.892-4.21 17.21-15.632 12.315-30.44"/><path fill="#EBC3C6" d="M45.334 18.817C39.742 33.486 49.6 45.435 56.339 49.98l3.462 2.282L60.97.17C56.349 3.18 49.004 9.197 45.334 18.817"/><g><path fill="#64B485" d="M71.567 65.191C60.8 51.014 47.815 45.717 38.264 26.147l-.24.18V146.74c.13.154.207.242.207.242v.02l.017-.01.016.01v-.02s52.637-56.33 33.303-81.79"/><path fill="#C3D6C5" d="M4.927 65.191c-18.694 24.364 29.88 77.776 33.097 81.548V26.327C24.718 49.902 12.251 55.645 4.927 65.191"/><path stroke="#FEFEFE" stroke-width=".25" d="M44.725 37.036l-2.138 1.452c-.779.53-1.56 1.062-2.248 1.708-.812.765-1.477 1.68-2.312 2.422m8.514-3.206c-3.428 2.096-5.543 5.777-8.572 8.416m12.301-4.247c-3.371 2.208-6.396 4.982-8.707 8.285-.668.955-1.28 1.96-2.08 2.808a8.384 8.384 0 0 1-1.651 1.358m16.666-8.091c-4.792 3.745-7.63 9.397-11.516 14.075a38.462 38.462 0 0 1-5.117 5.099m20.518-15.532A703.19 703.19 0 0 1 48.35 66.957c-3.168 4.718-6.42 9.43-10.47 13.417m26.73-22.642c-2.17 4.116-5.534 7.452-8.347 11.16-1.511 1.991-2.867 4.096-4.275 6.163A143.432 143.432 0 0 1 38.082 92.4m33.935-26.461c-3.119 1.929-5.507 4.812-7.923 7.57-5 5.713-10.359 11.1-15.714 16.483l-7.667 7.708c-.817.822-1.652 1.657-2.675 2.2m37.127-25.94c-3.344 3.733-6.691 7.472-9.711 11.472-1.985 2.631-3.835 5.383-6.13 7.751-3.822 3.945-8.712 6.656-13.534 9.29-1.736.948-3.474 1.894-5.212 2.837-.877.475-1.754.95-2.643 1.4m36.894-19.498c-2.387 2.052-4.124 4.736-6.12 7.17-8.224 10.03-20.576 15.577-30.777 23.586m25.962-5.845c-9.12 3.252-17.584 8.08-25.993 12.88m20.573-4.08c-3.497 1.487-7.212 2.388-10.783 3.688-3.57 1.299-7.088 3.07-9.597 5.925m12.229 1.68l-12.198 3.3m6.931 3.427c-2.38.75-4.74 1.567-7.074 2.452m3.473-109.55L37.9 34.371"/></g></g><g filter="url(#decorator-red-b)" opacity=".908" transform="translate(38 138)"><path fill="#CBDE9C" d="M34.448 21.446c-3.7-10.482-11.466-17.133-16.3-20.435V1l-.007.005L18.133 1v.01L18 1.105v55.802l.133.084V57l.008-.005.008.005v-.01l3.863-2.443c7.268-4.704 18.025-17.262 12.436-33.101"/><mask id="decorator-red-d" fill="#fff"><use xlink:href="#decorator-red-c"/></mask><path fill="#BDD57F" d="M1.564 20.561C-4.069 36.35 6.773 48.866 14.098 53.555l3.76 2.351V.286C12.98 3.605 5.26 10.205 1.565 20.56" mask="url(#decorator-red-d)"/></g><use fill="#000" filter="url(#decorator-red-e)" xlink:href="#decorator-red-f"/><use fill="#D0185D" xlink:href="#decorator-red-f"/><g filter="url(#decorator-red-g)" transform="translate(23 57)"><mask id="decorator-red-i" fill="#fff"><use xlink:href="#decorator-red-h"/></mask><path fill="#EBC3C6" d="M2.027 27.208c-7.298 20.52 6.747 36.787 16.236 42.881l4.872 3.056V.855C16.814 5.172 6.815 13.75 2.027 27.208" mask="url(#decorator-red-i)"/></g><g filter="url(#decorator-red-j)" transform="matrix(-1 0 0 1 71 174)"><path fill="#941D4D" d="M30.758 9.114c1.495 7.528-4.353 11.223-6.177 12.402C22.757 22.696 21 25 21 25V0c5.939-.028 8.91 4.847 9.758 9.114"/><path fill="#F19DC2" d="M12.242 9.114c-1.495 7.528 4.353 11.223 6.177 12.402C20.243 22.696 22 25 22 25V0c-5.939-.028-8.911 4.847-9.758 9.114"/><g transform="translate(7 22)"><mask id="decorator-red-l" fill="#fff"><use xlink:href="#decorator-red-k"/></mask><path fill="#941D4D" d="M7.721 7.697c1.156 6.144-3.366 9.159-4.775 10.121-1.411.963-2.77 2.843-2.77 2.843V.26c4.592-.023 6.89 3.955 7.545 7.437" mask="url(#decorator-red-l)"/></g><g transform="translate(0 22)"><mask id="decorator-red-n" fill="#fff"><use xlink:href="#decorator-red-m"/></mask><path fill="#F19DC2" d="M.314 7.697C-.842 13.84 3.68 16.856 5.09 17.818c1.41.963 2.77 2.843 2.77 2.843V.26C3.267.237.97 4.215.313 7.697" mask="url(#decorator-red-n)"/></g></g><g filter="url(#decorator-red-o)" transform="translate(33 212)"><path fill="#941D4D" d="M20.83 6.197c1.047 5.12-3.047 7.632-4.323 8.434C15.23 15.433 14 17 14 17V0c4.157-.019 6.237 3.296 6.83 6.197"/><path fill="#F19DC2" d="M8.17 6.197c-1.047 5.12 3.047 7.632 4.323 8.434C13.77 15.433 15 17 15 17V0c-4.157-.019-6.238 3.296-6.83 6.197"/><g transform="translate(5 15)"><mask id="decorator-red-q" fill="#fff"><use xlink:href="#decorator-red-p"/></mask><path fill="#941D4D" d="M4.826 5.131c.722 4.096-2.104 6.106-2.985 6.748-.882.641-1.73 1.895-1.73 1.895V.174C2.98.157 4.415 2.81 4.825 5.13" mask="url(#decorator-red-q)"/></g><g transform="translate(0 15)"><mask id="decorator-red-s" fill="#fff"><use xlink:href="#decorator-red-r"/></mask><path fill="#F19DC2" d="M.196 5.131C-.526 9.227 2.3 11.237 3.182 11.88c.88.641 1.73 1.895 1.73 1.895V.174C2.042.157.606 2.81.196 5.13" mask="url(#decorator-red-s)"/></g></g></g></svg>
</div>

Styleguide js-apps.decorator.4
*/
.decorator {
  display: none;
  z-index: 1;
  pointer-events: none;
  position: absolute;
  will-change: transform;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  -o-transition: transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s; }
  @media (min-width: 64em) {
    .decorator {
      display: inline-block; }
      .touch .decorator {
        display: none; } }

.decorator--left {
  left: 50%;
  margin-left: -720px;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%); }

.decorator--right {
  right: 50%;
  margin-right: -720px;
  -webkit-transform: translateX(50%);
      -ms-transform: translateX(50%);
          transform: translateX(50%); }

/*
Highlight Slider

Markup:
<div class="HighlightSlider">
    <div class="HighlightSlider__head">
        <h2 class="HighlightSlider__title">Nächste Highlights</h2>
    </div>
    <div data-app="highlight-slider">
        <script type="text/json">
        {
                "items": [
                    {
                        "image": {
                            "large": "http://placehold.it/640&text=Large%20Screens",
                            "medium": "http://placehold.it/1024x576&text=Medium%20Screens",
                            "small": "http://placehold.it/640x480&text=Default%20Image"
                        },
                        "title": "Große Eröffnung der Blumenhalle &#8211;",
                        "text": "Die konkrete Planung der dauerhaften gastronomischen Einrichtung im Ãœberlinger Uferpark und die Suche nach einem Betreiber kann beginnen.",
                        "link": "#0",
                        "location": "Uferpark West",
                        "startDate": "2020-06-21 15:00",
                        "endDate": "2020-06-21 18:00",
                        "btnLabel": "Mehr Details",
                        "category": {
                            "icon": "http://placehold.it/24",
                            "label": "Gesundheit & Natur"
                        }
                    },
                    {
                        "image": {
                            "large": "http://placehold.it/640&text=Large%20Screens",
                            "medium": "http://placehold.it/1024x576&text=Medium%20Screens",
                            "small": "http://placehold.it/640x480&text=Default%20Image"
                        },
                        "title": "Große Eröffnung der Blumenhalle",
                        "text": "Die konkrete Planung der dauerhaften gastronomischen Einrichtung im Ãœberlinger Uferpark und die Suche nach einem Betreiber kann beginnen.",
                        "link": "#0",
                        "location": "Uferpark West",
                        "startDate": "2020-06-21 15:00",
                        "endDate": "2020-06-21 18:00",
                        "btnLabel": "Mehr Details",
                        "category": {
                            "icon": "http://placehold.it/24",
                            "label": "Gesundheit & Natur"
                        }
                    },
                    {
                        "image": {
                            "large": "http://placehold.it/640&text=Large%20Screens",
                            "medium": "http://placehold.it/1024x576&text=Medium%20Screens",
                            "small": "http://placehold.it/640x480&text=Default%20Image"
                        },
                        "title": "Große Eröffnung der Blumenhalle",
                        "text": "Die konkrete Planung der dauerhaften gastronomischen Einrichtung im Ãœberlinger Uferpark und die Suche nach einem Betreiber kann beginnen.",
                        "link": "#0",
                        "location": "Uferpark West",
                        "startDate": "2020-06-21 15:00",
                        "endDate": "2020-06-21 18:00",
                        "btnLabel": "Mehr Details",
                        "category": {
                            "icon": "http://placehold.it/24",
                            "label": "Gesundheit & Natur"
                        }
                    },
                    {
                        "image": {
                            "large": "http://placehold.it/640&text=Large%20Screens",
                            "medium": "http://placehold.it/1024x576&text=Medium%20Screens",
                            "small": "http://placehold.it/640x480&text=Default%20Image"
                        },
                        "title": "Große Eröffnung der Blumenhalle",
                        "text": "Die konkrete Planung der dauerhaften gastronomischen Einrichtung im Ãœberlinger Uferpark und die Suche nach einem Betreiber kann beginnen.",
                        "link": "#0",
                        "location": "Uferpark West",
                        "startDate": "2020-06-21 15:00",
                        "endDate": "2020-06-21 18:00",
                        "btnLabel": "Mehr Details",
                        "category": {
                            "icon": "http://placehold.it/24",
                            "label": "Gesundheit & Natur"
                        }
                    }
                ]
            }
        </script>
    </div>
</div>

Styleguide js-apps.highlight-slider
*/
.HighlightSlider {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  background: #f8f8f8; }

.HighlightSlider__head {
  padding: 0 20px; }

.HighlightSlider__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 36px;
  color: #18492b;
  line-height: 1.26;
  text-decoration: underline;
  margin-bottom: 20px; }
  @media (min-width: 40em) {
    .HighlightSlider__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .HighlightSlider__title {
    font-family: "UrgeText-SemiBold", serif; }
  .HighlightSlider__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .HighlightSlider__title {
      font-size: 45px; } }
  @media (min-width: 40em) {
    .HighlightSlider__title {
      margin-bottom: 40px; } }

.HighlightSlider__carousel .slider-wrapper {
  padding-left: 20px; }

.HighlightSlider__carousel .slide {
  max-width: 640px;
  padding-right: 20px;
  text-align: left;
  background: transparent !important; }
  @media (min-width: 40em) {
    .HighlightSlider__carousel .slide {
      max-width: 500px; } }
  .HighlightSlider__carousel .slide.selected {
    z-index: 1 !important; }
  .HighlightSlider__carousel .slide img {
    width: auto !important; }
  .HighlightSlider__carousel .slide iframe {
    width: 100% !important;
    margin: 0 !important; }

.HighlightSlider__controls {
  margin-top: 40px;
  text-align: center; }
  @media (min-width: 64em) {
    .HighlightSlider__controls {
      margin-top: 0; } }

.HighlightSlider__control-btn {
  padding: 10px;
  margin: 0 10px;
  display: inline-block;
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s; }
  .HighlightSlider__control-btn img,
  .HighlightSlider__control-btn svg {
    width: 30px;
    height: 30px; }
    @media (min-width: 64em) {
      .HighlightSlider__control-btn img,
      .HighlightSlider__control-btn svg {
        width: 40px;
        height: 40px; } }
  .HighlightSlider__control-btn:hover {
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer; }
  @media (min-width: 64em) {
    .HighlightSlider__control-btn {
      position: absolute;
      top: 50%;
      margin-top: -30px; } }
  @media (min-width: 64em) {
    .HighlightSlider__control-btn.isLeft {
      left: 0; } }
  @media (min-width: 64em) {
    .HighlightSlider__control-btn.isRight {
      right: 0; } }
  .HighlightSlider__control-btn.isDisabled {
    opacity: 0.2;
    pointer-events: none; }

/*
Highlight Poster Slider

Markup:
<div class="HighlightPosterSlider">
    <div class="HighlightPosterSlider__head">
        <h2 class="HighlightPosterSlider__title">Nächste Highlights</h2>
    </div>
    <div data-app="highlight-poster-slider">
        <script type="text/json">
        {
                "items": [
                    {
                        "image": {
                            "large": "http://unsplash.it/1440/500",
                            "medium": "http://unsplash.it/1024/500",
                            "small": "http://unsplash.it/640/400"
                        },
                        "title": "Große Eröffnung der Blumenhalle",
                        "subtitle": "23. Internationales Festival zeitgenössischer Musik",
                        "startDate": "2020-06-21 15:00",
                        "endDate": "2020-06-21 18:00",
                        "primaryLink": "#0",
                        "secondaryLink": "#0",
                        "primaryBtnLabel": "Mehr Details",
                        "secondaryBtnLabel": "Mehr Details"
                    },
                    {
                        "image": {
                            "large": "http://unsplash.it/1440/500",
                            "medium": "http://unsplash.it/1024/500",
                            "small": "http://unsplash.it/640/400"
                        },
                        "title": "Große Eröffnung der Blumenhalle",
                        "subtitle": "23. Internationales Festival zeitgenössischer Musik",
                        "startDate": "2020-06-21 15:00",
                        "endDate": "2020-06-21 18:00",
                        "primaryLink": "#0",
                        "secondaryLink": "#0",
                        "primaryBtnLabel": "Mehr Details",
                        "secondaryBtnLabel": "Mehr Details"
                    },
                    {
                        "image": {
                            "large": "http://unsplash.it/1440/500",
                            "medium": "http://unsplash.it/1024/500",
                            "small": "http://unsplash.it/640/400"
                        },
                        "title": "Große Eröffnung der Blumenhalle",
                        "subtitle": "23. Internationales Festival zeitgenössischer Musik",
                        "startDate": "2020-06-21 15:00",
                        "endDate": "2020-06-21 18:00",
                        "primaryLink": "#0",
                        "secondaryLink": "#0",
                        "primaryBtnLabel": "Mehr Details",
                        "secondaryBtnLabel": "Mehr Details"
                    },
                    {
                        "image": {
                            "large": "http://unsplash.it/1440/500",
                            "medium": "http://unsplash.it/1024/500",
                            "small": "http://unsplash.it/640/400"
                        },
                        "title": "Große Eröffnung der Blumenhalle",
                        "subtitle": "23. Internationales Festival zeitgenössischer Musik",
                        "startDate": "2020-06-21 15:00",
                        "endDate": "2020-06-21 18:00",
                        "primaryLink": "#0",
                        "secondaryLink": "#0",
                        "primaryBtnLabel": "Mehr Details",
                        "secondaryBtnLabel": "Mehr Details"
                    }
                ]
            }
        </script>
    </div>
</div>

Styleguide js-apps.highlight-poster-slider
*/
.HighlightPosterSlider {
  max-width: 1440px;
  margin: 0 auto; }

.HighlightPosterSlider__head {
  padding: 0 20px; }

.HighlightPosterSlider__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 36px;
  color: #18492b;
  line-height: 1.26;
  text-decoration: underline;
  margin-bottom: 20px; }
  @media (min-width: 40em) {
    .HighlightPosterSlider__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .HighlightPosterSlider__title {
    font-family: "UrgeText-SemiBold", serif; }
  .HighlightPosterSlider__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .HighlightPosterSlider__title {
      font-size: 45px; } }
  @media (min-width: 40em) {
    .HighlightPosterSlider__title {
      margin-bottom: 40px; } }

.HighlightPosterSlider__app-container {
  position: relative; }

.HighlightPosterSlider__carousel .slide {
  text-align: left;
  background: transparent !important; }
  .HighlightPosterSlider__carousel .slide.selected {
    z-index: 1 !important; }
  .HighlightPosterSlider__carousel .slide img {
    width: auto !important; }
  .HighlightPosterSlider__carousel .slide iframe {
    width: 100% !important;
    margin: 0 !important; }

.HighlightPosterSlider__controls {
  margin-top: 20px;
  text-align: center; }
  @media (min-width: 64em) {
    .HighlightPosterSlider__controls {
      margin-top: 0; } }

.HighlightPosterSlider__control-btn {
  padding: 10px;
  margin: 0 10px;
  display: inline-block;
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s; }
  .HighlightPosterSlider__control-btn img,
  .HighlightPosterSlider__control-btn svg {
    width: 30px;
    height: 30px; }
    @media (min-width: 64em) {
      .HighlightPosterSlider__control-btn img,
      .HighlightPosterSlider__control-btn svg {
        width: 40px;
        height: 40px; } }
  .HighlightPosterSlider__control-btn:hover {
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer; }
  @media (min-width: 64em) {
    .HighlightPosterSlider__control-btn {
      position: absolute;
      top: 50%;
      margin-top: -30px; } }
  @media (min-width: 64em) {
    .HighlightPosterSlider__control-btn.isLeft {
      left: 0; } }
  @media (min-width: 64em) {
    .HighlightPosterSlider__control-btn.isRight {
      right: 0; } }
  .HighlightPosterSlider__control-btn.isDisabled {
    opacity: 0.2;
    pointer-events: none; }

/*
Events Filter App

Markup:
<div data-app="events-filter">
    <script type="text/json">
        {
            "dataUrl": "http://localhost:8888/https://www.ueberlingen2020.de/data/events.json",
            "blockUntil": "2020-04-24"
        }
    </script>
    <div class="EventsFilter">
        <div class="EventsFilter__close" /></div>
        <div class="EventsFilter__panel">
            <div class="EventsFilter__panel-grid">
                <div class="EventsFilter__panel__wrapper">
                    <h2 class="EventsFilter__title">Veranstaltungen</h2>
                    <div class="EventsFilter__filter">
                        <div class="EventsFilter__filter-main">Dropdowns + Search</div>
                        <div class="EventsFilter__filter-aside">
                            <div class="EventsFilter__wishlist">
                                <img src="http://placehold.it/24" />
                                <span>Merkliste</span>
                            </div>
                        </div>
                    </div>
                    <ul class="EventsFilter__chip-list">
                        <li>
                            <button class="chip">
                                <img src="http://placehold.it/24" alt="" class="chip__icon">
                                <span class="chip__label">Gesundheit & Natur</span>
                                <span class="chip__close"></span>
                            </button>
                        </li>
                        <li>
                            <button class="chip">
                                <img src="http://placehold.it/24" alt="" class="chip__icon">
                                <span class="chip__label">Kinder & Jugendliche</span>
                                <span class="chip__close"></span>
                            </button>
                        </li>
                        <li>
                            <button class="chip">
                                <img src="http://placehold.it/24" alt="" class="chip__icon">
                                <span class="chip__label">Kultur & Unterhaltung</span>
                                <span class="chip__close"></span>
                            </button>
                        </li>
                        <li>
                            <button class="chip">
                                <img src="http://placehold.it/24" alt="" class="chip__icon">
                                <span class="chip__label">Thementage</span>
                                <span class="chip__close"></span>
                            </button>
                        </li>
                    </ul>
                    <button class="EventsFilter__submit">Filter Anwenden</button>
                </div>
            </div>
        </div>
    </div>
    <button class="EventsFilterToggle">
        <img src="http://placehold.it/24" />
        <span>Filtern</span>
    </button>
</div>

Styleguide js-apps.events-filter
*/
.EventsFilterToggle {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  -webkit-box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
          box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
  background: #ce115d;
  border-radius: 50px;
  position: fixed;
  bottom: 40px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  z-index: 2; }
  @media (min-width: 40em) {
    .EventsFilterToggle {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .EventsFilterToggle svg,
  .EventsFilterToggle img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .EventsFilterToggle * + svg,
  .EventsFilterToggle * + img {
    margin-right: 0;
    margin-left: 15px; }
  .EventsFilterToggle:hover {
    cursor: pointer;
    color: #ffffff; }
  .EventsFilterToggle:hover {
    background-color: #870b3d; }
  .EventsFilterToggle:disabled, .EventsFilterToggle.is-disabled {
    pointer-events: none;
    opacity: 0.25; }
  @media (min-width: 40em) {
    .EventsFilterToggle {
      display: none; } }

.EventsFilterNote {
  margin: 0;
  font-family: sans-serif;
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 400;
  color: #4a4a4a;
  line-height: 1.15;
  font-weight: 700;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 20px; }
  @media (min-width: 40em) {
    .EventsFilterNote {
      font-size: 14px; } }
  .fl .EventsFilterNote {
    font-family: "Noto Sans", sans-serif; }

.EventsFilter {
  padding-top: 40px;
  padding-bottom: 20px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 4;
  display: none;
  max-width: 1440px;
  margin: 0 auto;
  background: #ce115d;
  color: #ffffff; }
  .EventsFilter.is-open {
    display: block; }
  @media (min-width: 40em) {
    .EventsFilter {
      padding-top: 80px;
      position: relative;
      z-index: auto;
      display: block; } }

.EventsFilter__close {
  width: 24px;
  height: 24px;
  padding: 5px;
  position: absolute;
  top: 0;
  right: 0;
  color: inherit;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  display: block;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s; }
  @media (min-width: 40em) {
    .EventsFilter__close {
      display: none; } }
  .EventsFilter__close:before, .EventsFilter__close:after {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    margin-top: -1px;
    position: absolute;
    top: 50%;
    left: 5px;
    background: currentColor;
    -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
            transform-origin: center center; }
  .EventsFilter__close:before {
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg); }
  .EventsFilter__close:after {
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg); }
  .EventsFilter__close:hover {
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
    cursor: pointer; }

.EventsFilter__panel {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px; }

.EventsFilter__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 36px;
  color: "inherit";
  line-height: 1.26;
  text-decoration: underline;
  margin-bottom: 60px; }
  @media (min-width: 40em) {
    .EventsFilter__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .EventsFilter__title {
    font-family: "UrgeText-SemiBold", serif; }
  .EventsFilter__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .EventsFilter__title {
      font-size: 45px; } }
  @media (min-width: 40em) {
    .EventsFilter__title {
      margin-bottom: 20px; } }

@media (min-width: 64em) {
  .EventsFilter__filter {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end; } }

.EventsFilter__filter-main {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 70%;
          flex: 1 0 70%; }

.EventsFilter__filter-aside {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 30%;
          flex: 1 0 30%;
  text-align: right; }

@media (min-width: 40em) {
  .EventsFilter__filters {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start; } }

.EventsFilter__filters > * {
  margin-top: 10px;
  margin-right: 10px;
  display: block; }

.EventsFilter__chip-list {
  min-height: 50px;
  margin: 0;
  margin-top: 10px;
  padding: 0;
  list-style: none; }
  .EventsFilter__chip-list li {
    margin-top: 10px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: top; }

.EventsFilter__wishlist {
  display: none; }
  @media (min-width: 64em) {
    .EventsFilter__wishlist {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      margin-top: 20px;
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      text-align: right; }
      .EventsFilter__wishlist img,
      .EventsFilter__wishlist svg {
        width: 20px;
        height: 20px;
        -webkit-box-flex: 0;
            -ms-flex: 0 0 20px;
                flex: 0 0 20px; } }
    @media (min-width: 64em) and (min-width: 40em) {
      .EventsFilter__wishlist img,
      .EventsFilter__wishlist svg {
        width: 24px;
        height: 24px;
        -webkit-box-flex: 0;
            -ms-flex: 0 0 24px;
                flex: 0 0 24px; } }
  @media (min-width: 64em) {
      .EventsFilter__wishlist span:not([class]) {
        margin: 0;
        font-family: sans-serif;
        letter-spacing: 0;
        font-size: 11px;
        font-weight: 400;
        color: "inherit";
        line-height: 1.15;
        margin-left: 10px;
        font-weight: 700; } }
    @media (min-width: 64em) and (min-width: 40em) {
      .EventsFilter__wishlist span:not([class]) {
        font-size: 14px; } }
  @media (min-width: 64em) {
        .fl .EventsFilter__wishlist span:not([class]) {
          font-family: "Noto Sans", sans-serif; } }
    @media (min-width: 64em) and (min-width: 40em) {
      .EventsFilter__wishlist span:not([class]) {
        margin-left: 15px; } }
  @media (min-width: 64em) {
        .EventsFilter__wishlist span:not([class]) a {
          color: inherit; }
          .EventsFilter__wishlist span:not([class]) a:hover {
            opacity: 0.75; } }

.EventsFilter__searchfield {
  margin-top: 40px; }
  @media (min-width: 40em) {
    .EventsFilter__searchfield {
      margin-top: 0; } }

.EventsFilter__submit {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  -webkit-box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
          box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
  background: #afcc56;
  width: 100%;
  margin-top: 60px;
  display: block;
  text-align: center; }
  @media (min-width: 40em) {
    .EventsFilter__submit {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .EventsFilter__submit svg,
  .EventsFilter__submit img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .EventsFilter__submit * + svg,
  .EventsFilter__submit * + img {
    margin-right: 0;
    margin-left: 15px; }
  .EventsFilter__submit:hover {
    cursor: pointer;
    color: #ffffff; }
  .EventsFilter__submit:hover {
    background-color: #88a431; }
  .EventsFilter__submit:disabled, .EventsFilter__submit.is-disabled {
    pointer-events: none;
    opacity: 0.25; }
  @media (min-width: 40em) {
    .EventsFilter__submit {
      display: none; } }

/*
Wishlist Toggle

Markup:
<div data-app="wishlist-toggle" data-wishlist-id="123"></div><br />
<div data-app="wishlist-toggle" data-wishlist-id="568"></div>

Styleguide js-apps.wishlist-toggle
*/
.wishlist-toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  cursor: pointer; }
  .wishlist-toggle img,
  .wishlist-toggle svg {
    width: 20px;
    height: 20px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 20px;
            flex: 0 0 20px; }
    @media (min-width: 40em) {
      .wishlist-toggle img,
      .wishlist-toggle svg {
        width: 24px;
        height: 24px;
        -webkit-box-flex: 0;
            -ms-flex: 0 0 24px;
                flex: 0 0 24px; } }
  .wishlist-toggle span:not([class]) {
    margin: 0;
    font-family: sans-serif;
    letter-spacing: 0;
    font-size: 11px;
    font-weight: 400;
    color: "inherit";
    line-height: 1.15;
    margin-left: 10px;
    font-weight: 700; }
    @media (min-width: 40em) {
      .wishlist-toggle span:not([class]) {
        font-size: 14px; } }
    .fl .wishlist-toggle span:not([class]) {
      font-family: "Noto Sans", sans-serif; }
    @media (min-width: 40em) {
      .wishlist-toggle span:not([class]) {
        margin-left: 15px; } }
    .wishlist-toggle span:not([class]) a {
      color: inherit; }
      .wishlist-toggle span:not([class]) a:hover {
        opacity: 0.75; }
  .wishlist-toggle img,
  .wishlist-toggle svg {
    color: #ce115d; }

/*
Wishlist

Markup:
<div data-app="wishlist">
    <script type="text/json">
        {
            "dataUrl": "http://localhost:8888/https://www.ueberlingen2020.de/data/events-wishlist.json"
        }
    </script>
</div>

Styleguide js-apps.wishlist
*/
.Wishlist {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px; }

.Wishlist__capsule {
  margin-left: -20px;
  display: block;
  font-size: 0; }
  .Wishlist__capsule > * {
    padding-left: 20px;
    vertical-align: top;
    display: inline-block;
    font-size: 16px; }

.Wishlist__capsule__wrapper {
  width: 100%;
  position: relative; }
  @media (min-width: 90em) {
    .Wishlist__capsule__wrapper {
      width: 85.71429%;
      position: relative;
      right: auto;
      left: 7.14286%; } }

.Wishlist__title {
  margin: 0;
  font-family: serif;
  letter-spacing: 0;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 36px;
  color: #18492b;
  line-height: 1.26;
  text-decoration: underline;
  margin-bottom: 20px;
  hyphens: auto; }
  @media (min-width: 40em) {
    .Wishlist__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .fl .Wishlist__title {
    font-family: "UrgeText-SemiBold", serif; }
  .Wishlist__title sup {
    font-size: 0.45em;
    top: -1em; }
  @media (min-width: 40em) {
    .Wishlist__title {
      font-size: 45px; } }
  @media (min-width: 40em) {
    .Wishlist__title {
      margin-bottom: 40px; } }
  @media (min-width: 64em) {
    .Wishlist__title {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }

.Wishlist__item + .Wishlist__item {
  margin-top: 20px; }

.Wishlist__share-panel {
  max-width: 600px;
  margin-bottom: 20px; }
  @media (min-width: 64em) {
    .Wishlist__share-panel {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      max-width: 1000px; }
      .Wishlist__share-panel > * {
        -webkit-box-flex: 1;
            -ms-flex: 1 0 0px;
                flex: 1 0 0px; } }
  .Wishlist__share-panel > * + * {
    margin-top: 10px; }
    @media (min-width: 64em) {
      .Wishlist__share-panel > * + * {
        margin-top: 0;
        margin-left: 20px;
        padding-left: 20px;
        border-left: 1px solid #4a4a4a; } }

.Wishlist__share {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap; }

.Wishlist__share__field {
  -webkit-box-flex: 2;
      -ms-flex: 2 0 0px;
          flex: 2 0 0px;
  position: relative;
  color: #9b9b9b; }
  .Wishlist__share__field__icon {
    position: absolute;
    top: 50%;
    left: 10px;
    margin-top: -12px; }
  .Wishlist__share__field input {
    margin: 0;
    font-family: sans-serif;
    letter-spacing: 0;
    font-size: 11px;
    font-weight: 400;
    color: #4a4a4a;
    line-height: 1.15;
    width: 100%;
    height: 100%;
    font-weight: 700;
    padding: 15px;
    padding-left: 40px;
    -webkit-box-shadow: 0;
            box-shadow: 0;
    border: 1px solid #9b9b9b;
    border-right: none;
    border-radius: 0px;
    background: transparent;
    outline: none;
    -webkit-appearance: none; }
    @media (min-width: 40em) {
      .Wishlist__share__field input {
        font-size: 14px; } }
    .fl .Wishlist__share__field input {
      font-family: "Noto Sans", sans-serif; }
    .Wishlist__share__field input::-webkit-input-placeholder {
      font-size: 12px;
      color: #9b9b9b; }
    .Wishlist__share__field input:-ms-input-placeholder {
      font-size: 12px;
      color: #9b9b9b; }
    .Wishlist__share__field input::placeholder {
      font-size: 12px;
      color: #9b9b9b; }

.Wishlist__share__action {
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 2px 15px;
  display: inline-block;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1875;
  letter-spacing: 0.6px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  -webkit-box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
          box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.21);
  background: #afcc56;
  max-width: 180px;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0px;
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  white-space: nowrap; }
  @media (min-width: 40em) {
    .Wishlist__share__action {
      min-height: 60px;
      height: 60px;
      padding: 2px 20px;
      font-size: 14px; } }
  .Wishlist__share__action svg,
  .Wishlist__share__action img {
    width: 1.8em;
    height: 1.8em;
    margin-right: 15px;
    fill: currentColor; }
  .Wishlist__share__action * + svg,
  .Wishlist__share__action * + img {
    margin-right: 0;
    margin-left: 15px; }
  .Wishlist__share__action:hover {
    cursor: pointer;
    color: #ffffff; }
  .Wishlist__share__action:hover {
    background-color: #88a431; }
  .Wishlist__share__action:disabled, .Wishlist__share__action.is-disabled {
    pointer-events: none;
    opacity: 0.25; }
  .Wishlist__share__action .loader {
    width: 35px;
    height: 35px; }

.Wishlist__share__message {
  font-weight: 400;
  color: #4a4a4a;
  font-style: normal;
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.41;
  margin-top: 5px; }
  @media (min-width: 40em) {
    .Wishlist__share__message {
      -webkit-hyphens: none;
          -ms-hyphens: none;
              hyphens: none; } }
  .Wishlist__share__message a:not([class]) {
    color: currentColor; }
    .Wishlist__share__message a:not([class]):hover {
      opacity: 0.75; }
  .Wishlist__share__message *:first-child {
    margin-top: 0; }
  .Wishlist__share__message *:last-child {
    margin-bottom: 0; }

/*
Form Registration Tour

Markup:
<div data-app="form-registration-tour">
    <script type="text/json">
        {
            "tours": [
                {
                    "title": "Uferpark, Villengärten, Kapuzinerkirche (Blumenschau)",
                    "price": 70,
                    "factPriceTitle": "Kosten",
                    "factPrice": "70,00€ pro Gruppe (max. 25 Personen pro Führung) zzgl. Eintritt",
                    "factDurationTitle": "Dauer",
                    "factDuration": "ca. 1,5 - 2 Stunden",
                    "factVenueTitle": "Treffpunkt",
                    "factVenue": "Uferpark"
                },
                {
                    "title": "Rosenoblegärten, Menzinger Gärten, Kapuzinerkirche (Blumenschau)",
                    "price": 70,
                    "factPriceTitle": "Kosten",
                    "factPrice": "70,00€ pro Gruppe (max. 25 Personen pro Führung) zzgl. Eintritt",
                    "factDurationTitle": "Dauer",
                    "factDuration": "ca. 1,5 - 2 Stunden",
                    "factVenueTitle": "Treffpunkt",
                    "factVenue": "ZOB Ãœberlingen",
                    "tooltip": "Die Tour ist stufenlos aber die natürliche Topographie Überlingens ist in Teilbereichen (Menzinger Gärten und der obere Bereich der Rosenobelgärten) mit starken Steigungen/Gefällen von ca. 15% versehen.",
                    "tooltipLabel": "die Tour ist nicht barrierefrei"
                }
            ],
            "privacy": "Mit Absenden des Formulars akzeptieren Sie unsere <a href='#0'>Datenschutzbedingungen</a> und bestätigen, diese gelesen zu haben.",
            "successUrl": "https://google.com/success",
            "errorUrl": "https://google.com/error",
            "blockUntil": "2021-04-09",
            "blockFrom": "2021-10-17",
            "note": "Bei Umbuchungen und Stornierungen bis fünf Arbeitstage vor Beginn der Leistung wird eine Bearbeitungsgebühr von pauschal 10,00 Euro erhoben. Bei Stornierungen vier Arbeitstage vor Beginn der Leistung und „Nichterscheinen“ werden 100 % des Auftragswertes in Rechnung gestellt bzw. einbehalten."
        }
    </script>
</div>

Styleguide js-apps.form-registration-tour
*/
/**
 * Utility & Helper
 *
 * Styleguide utility
 */
/**
 * Visually Hidden
 *
 * ```markup
 * <element class="h-vh[@{breakpoint}]">
 * ```
 *
 * Markup:
 * <div class="h-vh@medium" style="background: lightblue; padding: 1em">
 *     <p>Versteck ab Breakpoint <code>medium</code></p>
 * </div>
 * <div class="h-vh@large" style="background: lightblue; padding: 1em">
 *     <p>Versteck ab Breakpoint <code>large</code></p>
 * </div>
 * <div class="h-vh@xlarge" style="background: lightblue; padding: 1em">
 *     <p>Versteck ab Breakpoint <code>xlarge</code></p>
 * </div>
 *
 *
 * Styleguide utility.vh
 */
.h-vh,
.poster__img,
.Banner__image,
.Footer__image,
.Menu__image {
  position: absolute;
  left: -9999px; }
  @media (min-width: 40em) {
    .h-vh\@medium {
      position: absolute !important;
      left: -9999px !important; } }
  @media (min-width: 64em) {
    .h-vh\@large {
      position: absolute !important;
      left: -9999px !important; } }
  @media (min-width: 90em) {
    .h-vh\@xlarge {
      position: absolute !important;
      left: -9999px !important; } }

/**
 * Visually Unhidden
 *
 * ```markup
 * <element class="h-vuh[@{breakpoint}]">
 * ```
 *
 * Markup:
 * <div class="h-vh  h-vuh@large" style="background: lightblue; padding: 1em">
 *     <p>Sichtbar ab Breakpoint <code>large</code></p>
 * </div>
 * <div class="h-vh@medium  h-vuh@xlarge" style="background: lightblue; padding: 1em">
 *     <p>Versteck ab Breakpoint <code>medium</code>, wieder sichtbar ab <code>xlarge</code></p>
 * </div>
 *
 *
 * Styleguide utility.vuh
 */
.h-vuh {
  position: static; }
  @media (min-width: 40em) {
    .h-vuh\@medium {
      position: static !important; } }
  @media (min-width: 64em) {
    .h-vuh\@large {
      position: static !important; } }
  @media (min-width: 90em) {
    .h-vuh\@xlarge {
      position: static !important; } }

/**
 * Spacer
 *
 * ```markup
 * <element class="h-sp[t|b][--{0-4}][@{breakpoint}]">
 * ```
 *
 * Markup:
 * <div class="h-sp--1" style="background: lightblue; margin-bottom: 1em">
 *     1-facher Spacer
 * </div>
 * <div class="h-sp--1  h-sp--2@medium  h-sp--0@xlarge" style="background: lightblue; margin-bottom: 1em">
 *     1-facher Spacer, 2-fach ab <code>medium</code>, 0-fach ab <code>xlarge</code>
 * </div>
 * <div class="h-spt--1" style="background: lightblue; margin-bottom: 1em">
 *     1-facher Top-Spacer
 * </div>
 * <div class="h-spt--1  h-spt--2@medium  h-spt--0@xlarge" style="background: lightblue; margin-bottom: 1em">
 *     1-facher Top-Spacer, 2-fach ab <code>medium</code>, 0-fach ab <code>xlarge</code>
 * </div>
 * <div class="h-spb--1" style="background: lightblue; margin-bottom: 1em">
 *     1-facher Bottom-Spacer
 * </div>
 * <div class="h-spb--1  h-spb--2@medium  h-spb--0@xlarge" style="background: lightblue; margin-bottom: 1em">
 *     1-facher Bottom-Spacer, 2-fach ab <code>medium</code>, 0-fach ab <code>xlarge</code>
 * </div>
 *
 * Styleguide utility.Nudges
 */
.h-sp--0 {
  padding-top: 0px;
  padding-bottom: 0px; }

.h-sp--1 {
  padding-top: 20px;
  padding-bottom: 20px; }

.h-sp--2 {
  padding-top: 40px;
  padding-bottom: 40px; }

.h-sp--3 {
  padding-top: 60px;
  padding-bottom: 60px; }

.h-sp--4 {
  padding-top: 80px;
  padding-bottom: 80px; }

@media (min-width: 40em) {
  .h-sp--0\@medium {
    padding-top: 0px !important;
    padding-bottom: 0px !important; } }

@media (min-width: 40em) {
  .h-sp--1\@medium {
    padding-top: 20px !important;
    padding-bottom: 20px !important; } }

@media (min-width: 40em) {
  .h-sp--2\@medium {
    padding-top: 40px !important;
    padding-bottom: 40px !important; } }

@media (min-width: 40em) {
  .h-sp--3\@medium {
    padding-top: 60px !important;
    padding-bottom: 60px !important; } }

@media (min-width: 40em) {
  .h-sp--4\@medium {
    padding-top: 80px !important;
    padding-bottom: 80px !important; } }

@media (min-width: 64em) {
  .h-sp--0\@large {
    padding-top: 0px !important;
    padding-bottom: 0px !important; } }

@media (min-width: 64em) {
  .h-sp--1\@large {
    padding-top: 20px !important;
    padding-bottom: 20px !important; } }

@media (min-width: 64em) {
  .h-sp--2\@large {
    padding-top: 40px !important;
    padding-bottom: 40px !important; } }

@media (min-width: 64em) {
  .h-sp--3\@large {
    padding-top: 60px !important;
    padding-bottom: 60px !important; } }

@media (min-width: 64em) {
  .h-sp--4\@large {
    padding-top: 80px !important;
    padding-bottom: 80px !important; } }

@media (min-width: 90em) {
  .h-sp--0\@xlarge {
    padding-top: 0px !important;
    padding-bottom: 0px !important; } }

@media (min-width: 90em) {
  .h-sp--1\@xlarge {
    padding-top: 20px !important;
    padding-bottom: 20px !important; } }

@media (min-width: 90em) {
  .h-sp--2\@xlarge {
    padding-top: 40px !important;
    padding-bottom: 40px !important; } }

@media (min-width: 90em) {
  .h-sp--3\@xlarge {
    padding-top: 60px !important;
    padding-bottom: 60px !important; } }

@media (min-width: 90em) {
  .h-sp--4\@xlarge {
    padding-top: 80px !important;
    padding-bottom: 80px !important; } }

.h-spt--0 {
  padding-top: 0px;
  padding-bottom: 0; }

.h-spt--1 {
  padding-top: 20px;
  padding-bottom: 0; }

.h-spt--2 {
  padding-top: 40px;
  padding-bottom: 0; }

.h-spt--3 {
  padding-top: 60px;
  padding-bottom: 0; }

.h-spt--4 {
  padding-top: 80px;
  padding-bottom: 0; }

@media (min-width: 40em) {
  .h-spt--0\@medium {
    padding-top: 0px !important;
    padding-bottom: 0 !important; } }

@media (min-width: 40em) {
  .h-spt--1\@medium {
    padding-top: 20px !important;
    padding-bottom: 0 !important; } }

@media (min-width: 40em) {
  .h-spt--2\@medium {
    padding-top: 40px !important;
    padding-bottom: 0 !important; } }

@media (min-width: 40em) {
  .h-spt--3\@medium {
    padding-top: 60px !important;
    padding-bottom: 0 !important; } }

@media (min-width: 40em) {
  .h-spt--4\@medium {
    padding-top: 80px !important;
    padding-bottom: 0 !important; } }

@media (min-width: 64em) {
  .h-spt--0\@large {
    padding-top: 0px !important;
    padding-bottom: 0 !important; } }

@media (min-width: 64em) {
  .h-spt--1\@large {
    padding-top: 20px !important;
    padding-bottom: 0 !important; } }

@media (min-width: 64em) {
  .h-spt--2\@large {
    padding-top: 40px !important;
    padding-bottom: 0 !important; } }

@media (min-width: 64em) {
  .h-spt--3\@large {
    padding-top: 60px !important;
    padding-bottom: 0 !important; } }

@media (min-width: 64em) {
  .h-spt--4\@large {
    padding-top: 80px !important;
    padding-bottom: 0 !important; } }

@media (min-width: 90em) {
  .h-spt--0\@xlarge {
    padding-top: 0px !important;
    padding-bottom: 0 !important; } }

@media (min-width: 90em) {
  .h-spt--1\@xlarge {
    padding-top: 20px !important;
    padding-bottom: 0 !important; } }

@media (min-width: 90em) {
  .h-spt--2\@xlarge {
    padding-top: 40px !important;
    padding-bottom: 0 !important; } }

@media (min-width: 90em) {
  .h-spt--3\@xlarge {
    padding-top: 60px !important;
    padding-bottom: 0 !important; } }

@media (min-width: 90em) {
  .h-spt--4\@xlarge {
    padding-top: 80px !important;
    padding-bottom: 0 !important; } }

.h-spb--0 {
  padding-top: 0;
  padding-bottom: 0px; }

.h-spb--1 {
  padding-top: 0;
  padding-bottom: 20px; }

.h-spb--2 {
  padding-top: 0;
  padding-bottom: 40px; }

.h-spb--3 {
  padding-top: 0;
  padding-bottom: 60px; }

.h-spb--4 {
  padding-top: 0;
  padding-bottom: 80px; }

@media (min-width: 40em) {
  .h-spb--0\@medium {
    padding-top: 0 !important;
    padding-bottom: 0px !important; } }

@media (min-width: 40em) {
  .h-spb--1\@medium {
    padding-top: 0 !important;
    padding-bottom: 20px !important; } }

@media (min-width: 40em) {
  .h-spb--2\@medium {
    padding-top: 0 !important;
    padding-bottom: 40px !important; } }

@media (min-width: 40em) {
  .h-spb--3\@medium {
    padding-top: 0 !important;
    padding-bottom: 60px !important; } }

@media (min-width: 40em) {
  .h-spb--4\@medium {
    padding-top: 0 !important;
    padding-bottom: 80px !important; } }

@media (min-width: 64em) {
  .h-spb--0\@large {
    padding-top: 0 !important;
    padding-bottom: 0px !important; } }

@media (min-width: 64em) {
  .h-spb--1\@large {
    padding-top: 0 !important;
    padding-bottom: 20px !important; } }

@media (min-width: 64em) {
  .h-spb--2\@large {
    padding-top: 0 !important;
    padding-bottom: 40px !important; } }

@media (min-width: 64em) {
  .h-spb--3\@large {
    padding-top: 0 !important;
    padding-bottom: 60px !important; } }

@media (min-width: 64em) {
  .h-spb--4\@large {
    padding-top: 0 !important;
    padding-bottom: 80px !important; } }

@media (min-width: 90em) {
  .h-spb--0\@xlarge {
    padding-top: 0 !important;
    padding-bottom: 0px !important; } }

@media (min-width: 90em) {
  .h-spb--1\@xlarge {
    padding-top: 0 !important;
    padding-bottom: 20px !important; } }

@media (min-width: 90em) {
  .h-spb--2\@xlarge {
    padding-top: 0 !important;
    padding-bottom: 40px !important; } }

@media (min-width: 90em) {
  .h-spb--3\@xlarge {
    padding-top: 0 !important;
    padding-bottom: 60px !important; } }

@media (min-width: 90em) {
  .h-spb--4\@xlarge {
    padding-top: 0 !important;
    padding-bottom: 80px !important; } }

/**
 * Alignment
 *
 * ```markup
 * <element class="h-align--{left|center|right}[@{breakpoint}]">
 * ```
 *
 * Markup:
 * <div class="h-align--right  h-align--center@medium  h-align--left@xlarge">
 *     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt fuga labore, nostrum, suscipit cumque culpa.</p>
 * </div>
 *
 * Styleguide utility.Alignment
 */
.h-align--left {
  text-align: left; }

.h-align--center {
  text-align: center; }

.h-align--right {
  text-align: right; }

@media (min-width: 40em) {
  .h-align--left\@medium {
    text-align: left !important; } }

@media (min-width: 40em) {
  .h-align--center\@medium {
    text-align: center !important; } }

@media (min-width: 40em) {
  .h-align--right\@medium {
    text-align: right !important; } }

@media (min-width: 64em) {
  .h-align--left\@large {
    text-align: left !important; } }

@media (min-width: 64em) {
  .h-align--center\@large {
    text-align: center !important; } }

@media (min-width: 64em) {
  .h-align--right\@large {
    text-align: right !important; } }

@media (min-width: 90em) {
  .h-align--left\@xlarge {
    text-align: left !important; } }

@media (min-width: 90em) {
  .h-align--center\@xlarge {
    text-align: center !important; } }

@media (min-width: 90em) {
  .h-align--right\@xlarge {
    text-align: right !important; } }

/*
Section Attribute

```markup
<element data-compose="plain">
<element data-compose="filled">
```

Styleguide utility.compose
*/
/*
Section + Section (vom gleichen Typ)

Wenn eine Sektion mit Attribut ``data-compose="filled"`` auf ``data-compose="filled"`` folgt, wird bei der letzten Sektion ``padding-top: 0 !important;`` gesetzt.

```markup
<element data-compose="plain"> + <element data-compose="plain">
<element data-compose="filled"> + <element data-compose="filled">
```

Markup:
<div data-compose="plain">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus necessitatibus autem porro sunt cumque recusandae atque dolorum, velit ex soluta dolorem libero. Quisquam beatae maxime optio modi placeat nobis sequi.
</div>
<div data-compose="plain">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus cum in blanditiis soluta enim architecto consectetur exercitationem, assumenda fugit veritatis. Cumque adipisci ullam aliquam beatae, obcaecati odio repudiandae et quas.
</div>

Styleguide utility.compose.1
*/
[data-compose='plain'] {
  margin-top: 40px;
  margin-bottom: 40px; }
  @media (min-width: 40em) {
    [data-compose='plain'] {
      margin-top: 80px;
      margin-bottom: 80px; } }

/*
Section + Section (von unterschiedlichen Typen)

```markup
<element data-compose="plain"> + <element data-compose="filled">
<element data-compose="filled"> + <element data-compose="plain">
```

Markup:
<div data-compose="plain">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus necessitatibus autem porro sunt cumque recusandae atque dolorum, velit ex soluta dolorem libero. Quisquam beatae maxime optio modi placeat nobis sequi.
</div>
<div data-compose="plain">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus necessitatibus autem porro sunt cumque recusandae atque dolorum, velit ex soluta dolorem libero. Quisquam beatae maxime optio modi placeat nobis sequi.
</div>
<img src="http://placehold.it/2000x200" class="fluid">
<div data-compose="filled" style="background-color: lightblue;">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus cum in blanditiis soluta enim architecto consectetur exercitationem, assumenda fugit veritatis. Cumque adipisci ullam aliquam beatae, obcaecati odio repudiandae et quas.
</div>
<div data-compose="filled" style="background-color: lightblue;">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus cum in blanditiis soluta enim architecto consectetur exercitationem, assumenda fugit veritatis. Cumque adipisci ullam aliquam beatae, obcaecati odio repudiandae et quas.
</div>
<div data-compose="filled-red" style="background-color: pink;">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus cum in blanditiis soluta enim architecto consectetur exercitationem, assumenda fugit veritatis. Cumque adipisci ullam aliquam beatae, obcaecati odio repudiandae et quas.
</div>
<div data-compose="filled-red" style="background-color: pink;">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus cum in blanditiis soluta enim architecto consectetur exercitationem, assumenda fugit veritatis. Cumque adipisci ullam aliquam beatae, obcaecati odio repudiandae et quas.
</div>

Styleguide utility.compose.2
*/
[data-compose='filled'] {
  padding-top: 40px;
  padding-bottom: 40px; }
  @media (min-width: 40em) {
    [data-compose='filled'] {
      padding-top: 80px;
      padding-bottom: 80px; } }
  [data-compose='filled'] + [data-compose='filled'] {
    padding-top: 0; }

[data-compose='filled-red'] {
  padding-top: 40px;
  padding-bottom: 40px; }
  @media (min-width: 40em) {
    [data-compose='filled-red'] {
      padding-top: 80px;
      padding-bottom: 80px; } }
  [data-compose='filled-red'] + [data-compose='filled-red'] {
    padding-top: 0; }

/*
Section + Footer

Letzte Sektion mit ``data-compose="footer"`` kennzeichnen für Abstand zum Abbinder.

```markup
<element data-compose="plain"> + <element data-compose="footer">
<element data-compose="filled"> + <element data-compose="footer">
```

Markup:
<div data-compose="filled">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus necessitatibus autem porro sunt cumque recusandae atque dolorum, velit ex soluta dolorem libero. Quisquam beatae maxime optio modi placeat nobis sequi.
</div>
<div data-compose="footer">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus cum in blanditiis soluta enim architecto consectetur exercitationem, assumenda fugit veritatis. Cumque adipisci ullam aliquam beatae, obcaecati odio repudiandae et quas.
</div>

Styleguide utility.compose.3
*/
[data-compose='footer'] {
  margin-top: 40px; }
  @media (min-width: 40em) {
    [data-compose='footer'] {
      margin-top: 80px; } }