/* stylelint-disable selector-list-comma-newline-after */
/**
 * 1. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 * 2. Set death proof box-sizing
 */
html {
  -ms-text-size-adjust: 100%;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 1 */
  box-sizing: border-box;
  /* 1 */
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
/* 3 */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
figure {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
/* remember to define focus styles! */
:focus {
  outline: 0;
}
ol,
ul {
  list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
}
/* Webkit-Browser machen einen 2px margin außerhalb von Form-Elementen */
button,
input,
select,
textarea {
  margin: 0;
}
/* Scrollbar erzwingen für nicht IE, verhindert springen der Seite */
html {
  overflow-y: scroll;
}
/* stylelint-enable selector-list-comma-newline-after */
/*
  @tableofcontents
  ****************
  1. Typography
  2. Form Fixes
  3. Clearfix
  4. Misc Fixes
*/
/* @section 1. Typography
--------------------------------------------------- */
/*
    Sans-Serif Font Stack inspired by http://blog.mhurrell.co.uk/post/2946358183/updating-the-helvetica-font-stack
    Improved stack order https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f
    Please don't try any hacks for em/pixel calculation - it's crap! Just do great typography!
*/
body {
  /* new cross OS sans font stack */
  font: 1em/1.4 'frutiger cm', BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: #637681;
  background: #c2d6ec;
  background: linear-gradient(to bottom, #c2d6ec 30%, #fff calc(100% - 72rem));
  overflow-x: hidden;
}
@media (min-width: 41rem) {
  body {
    background: linear-gradient(to bottom, #c2d6ec 30%, #fff calc(100% - 46rem));
  }
}
/*
    clear quotes, if they are not needed

blockquote:before, blockquote:after, q:before, q:after { content: ' }
blockquote, q { quotes: ' ' }
*/
/*
    use multi lang quotes
:lang(de-DE) { quotes:'\201E' '\201C' '\201A' '\2018' }
:lang(de-CH) { quotes:'\00AB' '\00BB' '\2039' '\203A' }
:lang(en)    { quotes:'\201C' '\201D' '\2018' '\2019' }
:lang(fr)    { quotes:'\00AB\00A0' '\00A0\00BB' '\2039\00A0' '\00A0\203A' }
*/
q {
  quotes: '\201E' '\201C' '\201A' '\2018';
}
q::before {
  content: open-quote;
}
q::after {
  content: close-quote;
}
/* monospace normalisieren http://en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
pre,
code,
kbd,
samp {
  font-family: monospace, sans-serif;
}
/* http://www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
pre {
  padding: 1em;
  white-space: pre;
  /* CSS2 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  word-wrap: break-word;
  /* IE */
}
small {
  font-size: 85%;
}
strong,
th {
  font-weight: 700;
}
em {
  font-style: italic;
}
sub,
sup {
  font-size: smaller;
}
sub {
  vertical-align: sub;
}
sup {
  vertical-align: super;
}
@supports ( font-variant-position: super ) {
  sup {
    font-variant-positon: super;
  }
  sub {
    font-variant-positon: sub;
  }
}
abbr[title] {
  border-bottom: 1px dotted;
}
abbr[title]:hover {
  cursor: help;
}
abbr {
  font-variant: small-caps;
  text-transform: lowercase;
}
/*
Set tables to fixed layout to speed up rendering of longer tables in IE
http://www.quirksmode.org/css/tables.html und http://msdn.microsoft.com/en-us/library/ms531161%28v=vs.85%29.aspx

table{ table-layout: fixed; }
*/
table {
  border-collapse: collapse;
  border-spacing: 0;
  font-variant-numeric: lining-nums tabular-nums;
}
td,
td img {
  vertical-align: top;
}
caption,
th,
td {
  padding: 0;
  text-align: left;
  font-weight: 400;
}
/* @section 2. Form Fixes
--------------------------------------------------- */
button,
input,
select,
optgroup,
textarea {
  margin: 0;
  font: inherit;
}
select,
input,
textarea {
  color: inherit;
}
/* Address inconsistent `text-transform` inheritance for `button` and `select`. */
button,
select {
  text-transform: none;
}
/* adjust checkboxes, radiobuttons, text inputs to label */
input[type='radio'],
input[type='checkbox'] {
  box-sizing: border-box;
  vertical-align: baseline;
  padding: 0;
}
/* Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet .*/
input {
  line-height: normal;
}
/* remove scrollbar of textarea in IE @see http://www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */
textarea {
  overflow: auto;
  resize: none;
}
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type='button'],
input[type='reset'],
input[type='submit'] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}
button[disabled],
html input[disabled] {
  cursor: default;
}
/*  Firefox and Chrome - remove inner border */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  height: auto;
}
/* we like our number inputs undecorated */
input[type=number] {
  -moz-appearance: textfield;
}
::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  box-sizing: content-box;
  /* 2 */
}
/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
label {
  cursor: pointer;
}
/* @section 3. Media
--------------------------------------------------- */
/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}
/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not( :root ) {
  overflow: hidden;
}
/* @section 4. Clearfix
--------------------------------------------------- */
/*
    micro clearfix @see http://nicolasgallagher.com/micro-clearfix-hack/
    flexbox webkit fix @see http://danisadesigner.com/blog/flexbox-clear-fix-pseudo-elements/
    use block i/o table @see http://cssmojo.com/the-very-latest-clearfix-reloaded/
*/
.cf:before,
.cf:after,
.cf__fields:before,
.cf__fields:after {
  content: ' ';
  display: block;
  flex-basis: 0;
  order: 1;
}
.cf:after,
.cf__fields:after {
  clear: both;
}
/* @section 5. Old Webkit Bugs
--------------------------------------------------- */
/*
    Fixing issues when combining pseudo classes with adjacent or general sibling selectors.
    @see http://css-tricks.com/webkit-sibling-bug/
    @see http://timpietrusky.com/advanced-checkbox-hack
 */
body {
  -webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
/* @section 6. Smooth Scroll
--------------------------------------------------- */
body {
  scroll-behavior: smooth;
}
/*** helpers ***/
/* Nicht-semantische Hilfsklassen
--------------------------------------------------- */
/*
 * Hide if JS is activated
 * Hide id JS is not activated
 * Hide visually and from screen readers
 */
.js .hideIfJS,
.no-js .hideIfNoJS,
.hidden,
.u-hidden {
  display: none;
}
/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 * https://allyjs.io/tutorials/hiding-elements.html#2017-edition-of-visuallyhidden
 */
.u-srt:not(:focus):not(:active),
.screen-reader-text:not(:focus):not(:active),
.visuallyhidden:not(:focus):not(:active),
.screen-reader-response:not(:focus):not(:active) {
  position: absolute;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  white-space: nowrap;
  border: 0;
}
/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
.u-srt:active,
.screen-reader-text:active,
.visuallyhidden.focusable:active,
.u-srt:focus,
.screen-reader-text:focus,
.visuallyhidden.focusable:focus,
.screen-reader-response:active,
.screen-reader-response:focus {
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 1000;
  padding: 1ex;
  text-decoration: none;
  text-transform: none;
  background-color: #111;
  color: #eee;
}
a.u-tel {
  color: inherit;
  text-decoration: inherit;
  cursor: default;
  white-space: nowrap;
}
a.u-tel:focus,
a.u-tel:hover {
  color: inherit;
}
.u-quiet {
  color: #b6c1c7;
}
.u-quiet a,
.u-quiet a:visited {
  color: #b6c1c7;
}
.u-quiet a:focus,
.u-quiet a:visited:focus,
.u-quiet a:hover,
.u-quiet a:visited:hover,
.u-quiet a:active,
.u-quiet a:visited:active {
  color: #637681;
}
.hyphen,
.blox__headline,
.content h2,
.article__header__bubble .article__title,
.subpage__content.content h2,
.subpage__content.content h3,
.subpage__content.content h4 {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}
.dropcap:first-letter {
  float: left;
  margin: 0.2em 0.1em 0 0;
  padding: 0 0.2em;
  font-size: 4em;
  font-family: inherit;
  line-height: 1;
  text-indent: 0;
  background: transparent;
  color: inherit;
}
.browsehappy {
  margin-bottom: 0;
  padding: 0.5em;
  text-align: center;
  color: #222;
  background: #fcf7d9;
  border-bottom: 1px solid #f5dc7d;
}
/*
    <div class="circle">
        <div class="burger-icon"></div>
    </div>
 */
/*
    Usage:

    <input type="checkbox" name="burger-flag" class="burger-flag" id="burger-flag" onclick="null" />
    <label class="burger-toggle" for="burger-flag">
        <span class="burger-icon"></span>
    </label>

    .2 + .3 + .2 + .3 + .2 = 1.2 overall height


.burger {
    &-flag { display: none; }
    &-toggle { display: inline-block; } // make it clickable
    &-icon {
        .burger( 1.5em, .2em, .3em, #555);
    }
    &-flag:checked + &-toggle &-icon {
        .burger-to-cross( .2em, .3em, #555 );
    }
}
/* */
/*
    @see https://medium.com/@iamryanyu/svg-sprite-workflow-that-works-f5609d4d6144
    @see https://github.com/bitstarr/svg-workflow/
*/
/*
 * define basic icon
 * use font-size for scaling!
 */
.icon {
  fill: currentColor;
  height: 1em;
  width: 1em;
  overflow: hidden;
  vertical-align: -0.15em;
}
/*
// icon color
.icon-red {
    color: #cc0000;
}
*/
/*** blox ***/
.blox__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 15rem;
  height: 15rem;
  margin: 5rem auto;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
}
.blox__dot::after {
  content: '';
  display: block;
  position: absolute;
  top: -0.79rem;
  left: -0.79rem;
  right: -0.79rem;
  bottom: -0.79rem;
  border-radius: 50%;
  border: 1rem solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 1.2rem rgba(0, 0, 0, 0.05);
  pointer-events: none;
  transition: box-shadow 0.3s;
}
.blox__dot:hover {
  transform: scale(1.05);
  background: #7c909b;
  color: #fff;
}
.blox__dot:hover::after {
  border: 1rem solid rgba(124, 144, 155, 0.5);
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);
}
.blox__dot:hover a,
.blox__dot:hover a:visited {
  color: #fff;
}
.blox__dot a,
.blox__dot a:visited {
  color: #7c909b;
  transition: color 0.5s;
}
.home .blox__dot {
  margin-bottom: 20rem;
}
.article__content .blox__dot {
  font-weight: 200;
  font-size: 2.28096rem;
  text-align: center;
}
.blox__fp-box {
  width: 80vw;
  margin: 0 auto;
  border-radius: 80vw;
  background-color: #fff;
  overflow: hidden;
}
.has-touch .blox__fp-box {
  cursor: pointer;
}
.blox__fp-box__bubble {
  display: flex;
  align-items: center;
  width: 80vw;
  height: 80vw;
  border: 0.8rem solid #fff;
  border-radius: 50%;
  background-color: #d3dadd;
  box-shadow: 0 0 1.2rem rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.blox__fp-box__bubble img {
  display: block;
  width: 100%;
  height: auto;
}
.blox__fp-box__link {
  position: relative;
}
.blox__fp-box__link:hover span {
  display: flex;
}
.blox__fp-box__link span {
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(124, 144, 155, 0.7);
  font-weight: 700;
  color: #fff;
}
.has-touch .blox__fp-box__link span {
  display: flex;
}
.blox__fp-box__title {
  width: 90%;
  margin: 0 auto;
  font-size: 2.28096rem;
  font-weight: 200;
  text-align: center;
  line-height: 1.1;
}
.blox__fp-box__content p {
  text-align: left;
  padding: 2rem 1.5rem 2rem 2.65em;
}
.blox__fp-box__content p svg.icon {
  margin-left: -1.2em;
}
@media (min-width: 41rem) {
  .blox__fp-box__content p {
    padding: 2rem;
    padding-left: 2.65em;
  }
}
.blox__fp-box + .blox__fp-box {
  margin-top: 5rem;
}
@media (min-width: 30rem) {
  .blox__fp-box {
    width: 60vw;
  }
  .blox__fp-box__bubble {
    width: 60vw;
    height: 60vw;
  }
}
@media (min-width: 50rem) {
  .blox__fp-box {
    width: 15rem;
    height: 15rem;
    border-radius: 7.5rem;
    background-color: #fff;
    overflow: hidden;
    transition: width 0.5s;
  }
  .no-touch .blox__fp-box:hover,
  .has-touch .blox__fp-box,
  .blox__fp-box.activ {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .blox__fp-box:nth-last-of-type( 1 ) {
    margin-bottom: 15rem;
  }
  .blox__fp-box__bubble {
    width: 15rem;
    height: 15rem;
    min-width: 15rem;
    min-height: 15rem;
  }
  .blox__fp-box__content {
    display: flex;
    align-items: center;
  }
  .blox__fp-box__content p {
    padding: 2rem 0;
  }
  .blox__fp-box__image {
    width: 100%;
    height: auto;
  }
}
@media (min-width: 72rem) {
  .blox__fp-box {
    width: 20rem;
    height: 20rem;
    border-radius: 12.5rem;
  }
  .blox__fp-box__bubble {
    width: 20rem;
    height: 20rem;
    min-width: 20rem;
    min-height: 20rem;
  }
  .blox__fp-box__title {
    font-size: 3.2845824rem;
  }
}
.blox__headline {
  position: relative;
  width: 100%;
  margin-bottom: 6rem;
  font-size: 2.28096rem;
  font-weight: 200;
  text-align: center;
  line-height: 1.1;
}
@media (min-width: 30rem) {
  .blox__headline {
    font-size: 2.737152rem;
  }
}
@media (min-width: 41rem) {
  .blox__headline {
    font-size: 3.2845824rem;
  }
}
.blox__headline::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -2.5rem;
  left: 50%;
  width: 2rem;
  height: 3px;
  background-color: #7c909b;
  transform: translateX(-50%);
}
.red-dot {
  color: #e30613;
}
.blox__image-box,
.blox__image {
  position: relative;
  max-width: 50%;
  margin: 0 auto;
  border-radius: 50%;
  border: 1rem solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 1.2rem rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.home .blox__image-box,
.home .blox__image {
  max-width: 90%;
}
@media (min-width: 30rem) {
  .blox__image-box,
  .blox__image {
    max-width: 30%;
  }
  .home .blox__image-box,
  .home .blox__image {
    max-width: 40%;
  }
}
.blox__image-box img,
.blox__image img {
  display: block;
  width: 100%;
  height: auto;
}
.blox__image-box figcaption,
.blox__image figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  color: #fff;
  background-color: rgba(124, 144, 155, 0.8);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.blox__image-box:hover figcaption,
.blox__image:hover figcaption,
.has-touch .blox__image-box figcaption,
.has-touch .blox__image figcaption {
  opacity: 1;
}
.blox__column .blox__image-box,
.blox__column .blox__image {
  width: 100%;
  max-width: inherit;
}
* + .blox__image-box,
* + .blox__image {
  margin-top: 1.5rem;
}
.blox__quote + .blox__image {
  margin-top: 10rem;
}
.blox__gallery {
  width: 100%;
  margin: 5rem auto;
}
.blox__gallery__list {
  display: flex;
}
.blox__gallery__item {
  width: 23%;
  margin: 0 auto;
  border-radius: 50%;
  border: 1rem solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 1.2rem rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.blox__gallery__image {
  display: block;
  width: 100%;
  background-color: #eee;
}
.blox__image-box {
  transition: transform 0.2s;
}
.blox__image-box__bubble {
  position: relative;
}
.blox__image-box__title {
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  font-weight: 200;
  font-size: 2.28096rem;
  text-align: center;
  background: #7c909b;
}
.blox__image-box__title > a,
.blox__image-box__title > a:active,
.blox__image-box__title > a:visited,
.blox__image-box__title > a:hover {
  color: #fff;
}
.blox__image-box__title > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.blox__image-box:hover .blox__image-box__title {
  display: flex;
}
.blox__image-box:hover {
  transform: scale(1.05);
}
.blox__quote {
  position: relative;
  margin-top: 1.5rem;
  font-size: 1.1rem;
  font-weight: 400;
}
@media (min-width: 41rem) {
  .blox__quote {
    font-size: 1.584rem;
  }
  .testimonials__content .blox__quote {
    font-size: 1.32rem;
  }
}
.content .blox__quote p:first-child::before {
  content: '« ';
}
.content .blox__quote p:first-child::after {
  content: ' »';
}
.content .blox__quote p + p {
  margin-top: 0;
}
.testimonials__content .blox__quote p:first-child::before {
  content: '';
}
.testimonials__content .blox__quote p:first-child::after {
  content: '';
}
.testimonials__content .blox__quote p + p {
  margin-top: 1em;
}
.blox__quote br {
  display: none;
}
.blox__quote cite {
  display: block;
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 700;
}
.home .blox__quote {
  margin: 3rem auto 5rem;
  font-size: 1.584em;
  color: #fff;
  line-height: 1.1;
}
.home .blox__quote strong {
  color: #e30613;
}
@media (min-width: 41rem) {
  .home .blox__quote {
    margin-bottom: 20rem;
    max-width: 80%;
    font-size: 3.2845824rem;
  }
}
.blox__quote + p {
  margin-top: 5rem;
}
.blox__separator {
  width: 100%;
  margin: 3rem auto;
  padding: 2rem;
  background: url('../img/dots.svg') no-repeat center center;
}
.blox__columns {
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}
@media (min-width: 30rem) {
  .blox__columns {
    display: flex;
    flex-wrap: wrap;
  }
}
@media (min-width: 50rem) {
  .blox__columns {
    flex-wrap: nowrap;
  }
}
.blox__column {
  padding: 1rem;
}
.content .blox__column h4 + ul {
  margin-top: -1rem;
}
.content .blox__column ul {
  list-style: none;
  margin-left: 0;
  margin-bottom: 3rem;
}
.content .blox__column ul li {
  font-size: 1.1rem;
  text-align: center;
}
@media (min-width: 30rem) and (max-width: 49.99rem) {
  .blox__column {
    width: 50%;
  }
}
@media (min-width: 50rem) {
  .blox__column {
    flex-grow: 1;
  }
}
.blox__columns {
  margin-top: 8rem;
  margin-bottom: 8rem;
}
.subpage__content .blox__columns {
  margin-top: 4rem;
  margin-bottom: 0;
}
/*** basic content ***/
/*
    Focusbehandlung verbessern:
    @see http://people.opera.com/patrickl/experiments/keyboard/test
 */
a:hover,
a:active {
  outline: none;
}
a,
a:active,
a:visited {
  color: #2c90b0;
  text-decoration: none;
}
a:focus,
a:hover {
  color: #e30613;
}
/*
    Highlighting für mobile Webkits
    @see http://j.mp/webkit-tap-highlight-color
 */
a:link {
  -webkit-tap-highlight-color: rgba(124, 144, 155, 0.7);
}
/* don't ever combine both lines or user text-shadow! */
::-moz-selection {
  background: #222;
  color: #fff;
  text-shadow: none;
}
::selection {
  background: #222;
  color: #fff;
  text-shadow: none;
}
/*
    .content is used to encapsulate user generated content (wysiwyg)
 */
/*
User Content

``.content`` is used to encapsulate user generated content (wysiwyg)

Markup:
<div class="content">
    <h2>H2 Title</h2>
    <p>Lorem Text</p>
    <h3>H3 Title</h3>
    <p>Lorem Text</p>
    <blockquote>
        <p>In der Natur ist nichts überflüssig.</p>
        <footer class="blockquote__cite">Darwin</footer>
    </blockquote>
</div>

Styleguide Component.Content
*/
.content {
  /*
     * TODO: Responsive Modular Scale for Headlines
     * TODO: Vertical Rythm
     * @see http://typographyhandbook.com/
     * maybe set the desktop fz also higher than 100%
     *
     * TODO: Make use of the lobotomised owl selector for spacing
     */
  /*
     * OpenType Features
     * @see http://typographyhandbook.com/
     * @see http://practice.typekit.com/lesson/caring-about-opentype-features/
     */
  /*
     * use this for aligned numbers in certain display fonts
     * @see http://www.codesmite.com/article/fixing-raleway-and-similar-fonts-numerals?utm_source=codropscollective
     */
  /* Style 'Default' Links */
  /* */
  /* a11y: highlight focued images */
  /* Lobotomized Owl for direct children */
  /* */
  /* old way
    p,
    dl,
    ol,
    ul,
    table,
    blockquote { margin-bottom: 1.5em; }
    p:last-child { margin-bottom: 0; }
    /* */
}
.content h2,
.content h3 {
  line-height: 1.1;
}
.content h2 {
  margin-top: 1.5em;
}
.content h2:first-child {
  margin-top: 1em;
}
.content hr {
  height: 0;
  margin-top: 1.5em;
  border: 0;
  border-top: 1px solid #ddd;
}
.content p {
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: 'kern', 'liga', 'clig', 'calt';
}
.content p abbr {
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-variant-caps: all-small-caps;
  font-feature-settings: 'kern', 'liga', 'clig', 'calt', 'onum', 'pnum', 'smcp', 'c2sc';
}
.content .numbers {
  font-feature-settings: 'lnum';
}
.content a[href]:not([class]) {
  text-decoration: underline;
  text-decoration-skip: ink;
}
.content a:focus img {
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.9);
}
.content p + p,
.content h2 + p,
.content p + ul,
.content ul + p {
  margin-top: 1.5rem;
}
.content ul,
.content ol {
  margin-left: 1.5rem;
}
.content li {
  break-inside: avoid;
}
.content ol {
  list-style: decimal;
}
.content ul {
  list-style: disc;
}
.content li ol,
.content li ul {
  margin-bottom: 0;
}
.content li ul {
  list-style-type: circle;
}
.content .text--left {
  text-align: left;
}
.content .text--center {
  text-align: center;
}
.content .text--right {
  text-align: right;
}
.content li {
  text-align: left;
}
blockquote {
  position: relative;
  margin-top: 1.5rem;
}
blockquote cite {
  font-size: 1rem;
  font-weight: 700;
}
.home blockquote {
  color: #fff;
}
/*
    Styling broken image
    @see http://bitsofco.de/styling-broken-images/
 */
img:before {
  content: '';
  display: none;
}
img:after {
  content: '\26D0' ' Defekte Grafik: ' attr(alt);
  color: #646464;
}
/*
    1. Improve scaled image rendering https://medium.freecodecamp.org/-898b38a6c0e1
 */
img.size-full {
  max-width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  /* 1. */
}
.wp-smiley {
  margin: 0 0.3em;
}
.wp-caption {
  margin-left: auto;
  margin-right: auto;
}
.wp-caption.alignleft,
.wp-caption.alignright {
  display: table;
}
.wp-caption.alignleft .wp-caption-text,
.wp-caption.alignright .wp-caption-text {
  display: table-caption;
  caption-side: bottom;
}
.wp-caption img {
  display: block;
  max-width: 100%;
  height: auto;
}
.wp-caption br {
  display: none;
}
.wp-caption-text {
  padding-top: 0.3em;
  font-size: 0.9em;
}
/* let them flow */
@media only screen and (min-width: 30em) {
  .wp-caption.alignright,
  .alignright {
    float: right;
    margin-left: 1.5em;
  }
  .wp-caption.alignleft,
  .alignleft {
    float: left;
    margin-right: 1.5em;
  }
  .alignleft:not(:last-child),
  .alignright:not(:last-child) {
    margin-bottom: 1em;
  }
  .alignleft:not(:first-child),
  .alignright:not(:first-child) {
    margin-top: 1.5em;
  }
  .wp-caption.aligncenter,
  .aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}
.embed__video {
  position: relative;
  margin: 1.5em 0;
  padding-bottom: 56.25%;
  padding-top: 35px;
  height: 0;
  overflow: hidden;
}
.embed__video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.embed--vimeo {
  padding-bottom: 53%;
}
::-webkit-input-placeholder {
  color: #777;
}
::-moz-placeholder {
  color: #777;
}
:-ms-input-placeholder {
  color: #777;
}
.form textarea,
.form label,
.wpcf7-form textarea,
.wpcf7-form label {
  display: block;
}
.form .required,
.wpcf7-form .required {
  color: #c0392b;
}
/*
Forms

Styleguide Component.Form
*/
.text-input {
  width: 100%;
  padding: 0.5em;
  background: #fff;
  border: 1px solid #ddd;
  transition: border 0.2s;
  -webkit-appearance: none;
}
.text-input--rect {
  border-radius: 0;
  border-bottom: 2px solid #ddd;
}
/*
Text Inputs

Markup:
<input class="text-input {{modifier_class}}" type="text" />

.text-input--rect - Different, less smooth style

Styleguide Component.Form.Inputs
*/
.dropdown {
  appearance: none;
  background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="512" height="512" viewBox="0 0 512 512" xml:space="preserve"><path fill="%23666" d="M256,298.3L256,298.3L256,298.3l174.2-167.2c4.3-4.2,11.4-4.1,15.8,0.2l30.6,29.9c4.4,4.3,4.5,11.3,0.2,15.5L264.1,380.9c-2.2,2.2-5.2,3.2-8.1,3c-3,0.1-5.9-0.9-8.1-3L35.2,176.7c-4.3-4.2-4.2-11.2,0.2-15.5L66,131.3c4.4-4.3,11.5-4.4,15.8-0.2L256,298.3z"/></svg>');
  background-size: 0.8em;
  background-repeat: no-repeat;
  background-position: calc(100% - 2em) center;
}
/*
Dropdown

Markup:
<select class="dropdown text-input">
    <option>Foo</option>
    <option>Bar</option>
    <option>Longer Foo</option>
</select>

Styleguide Component.Form.Dropdown
*/
.button {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 2ex;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  background: #7c909b;
  border: 0;
  border-radius: 0;
  transition: background 0.2s, color 0.2s;
  will-change: background, color;
  /* Barber Shop Style
    @stripe-size: 50px;
    &.is-loading {
        pointer-events: none;
        background-image:
            linear-gradient(
            -45deg,
            rgba( 255, 255, 255, .5 ) 25%,
            transparent 25%,
            transparent 50%,
            rgba( 255, 255, 255, .5 ) 50%,
            rgba( 255, 255, 255, .5 ) 75%,
            transparent 75%,
            transparent
        );
        background-size: @stripe-size @stripe-size;

        animation-fill-mode: both;
        animation: stripe 1.5s linear infinite;
    }
    @keyframes stripe {
        0% { background-position: 0 0; }
        100% { background-position: @stripe-size @stripe-size; }
    }
    /* */
  /* Spinner Style */
  /* */
}
a.button,
a.button:visited,
a.button:hover,
a.button:focus {
  color: #fff;
}
.button:hover,
.button:focus {
  background-color: #586973;
}
.button.is-loading {
  color: transparent;
}
.button.is-loading:focus,
.button.is-loading:hover {
  color: transparent;
}
.button.is-loading:after {
  content: '';
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -0.5em;
  margin-left: -0.5em;
  display: block;
  height: 1em;
  width: 1em;
  border: 2px solid #fff;
  border-right-color: transparent;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin-around 0.5s infinite linear;
}
@keyframes spin-around {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
/*
Button

Button styles

Markup:
<a class="button {{modifier_class}}" href="#">Link</a>
<button class="button {{modifier_class}}">Button</button>
<input class="button {{modifier_class}}" type="button" value="Input" />

:hover - Hover State
:focus - Focus State
.is-loading - Processing State (Barber Shop Style available, commented)

Styleguide Component.Button
*/
/*** basic layout ***/
.main {
  transition: transform 0.5s ease 0s;
  /* do a sweet fadein onload of the main content */
}
@media (min-width: 41em) {
  .main {
    animation: fadeIn 0.6s ease-in-out;
  }
}
@keyframes fadeIn {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
  }
  100% {
    display: block;
    opacity: 1;
  }
}
.wrapper,
.text-wrapper,
.footer__info,
.article__content,
.subpage__header,
.subpage__content,
.home .outro {
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (min-width: 30rem) {
  .wrapper,
  .text-wrapper,
  .footer__info,
  .article__content,
  .subpage__header,
  .subpage__content,
  .home .outro {
    padding: 0 3rem;
  }
}
@media (min-width: 72rem) {
  .wrapper,
  .text-wrapper,
  .footer__info,
  .article__content,
  .subpage__header,
  .subpage__content,
  .home .outro {
    padding: 0;
  }
}
.wrapper,
.footer__info {
  max-width: 70rem;
}
.text-wrapper,
.article__content,
.subpage__header,
.subpage__content,
.home .outro {
  max-width: 52rem;
}
.header .wrapper {
  display: flex;
}
@media (max-width: 40.99em) {
  .header .wrapper {
    justify-content: center;
  }
}
.header .navigation {
  width: 100%;
}
.footer {
  position: relative;
  margin-top: 4rem;
  padding-top: 33rem;
  padding-bottom: 4rem;
  background: #7c909b url('../img/water-home-footer-new.jpg') center top no-repeat;
}
.home .footer {
  padding-top: 2rem;
}
@media (min-width: 30rem) {
  .footer {
    padding-bottom: 8rem;
  }
  .home .footer {
    padding-top: 4rem;
  }
}
.footer a {
  color: #fff;
}
.footer__info {
  font-size: 1.32rem;
  font-weight: 200;
  color: #fff;
}
@media (min-width: 41rem) {
  .footer__info {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
  }
}
@media (min-width: 50rem) {
  .footer__info {
    font-size: 1.32rem;
  }
}
@media (max-width: 40.99rem) {
  .footer__info > * {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #fff;
    text-align: center;
  }
}
.footer__logo {
  width: 100%;
}
.footer__logo img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 41rem) {
  .footer__logo {
    width: 30%;
  }
  .footer__logo img {
    margin-top: -10%;
  }
}
.footer__contact__title {
  font-size: 1.584em;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.footer__contact__name {
  font-size: 1.32em;
  margin-bottom: 0.5rem;
}
.footer__contact .icon {
  margin-right: 1ex;
}
.footer__contact span {
  display: block;
}
@media (max-width: 40.99rem) {
  .footer__contact > * {
    padding: 0.3rem 0;
  }
}
.footer .elevator,
.footer .home-link {
  display: block;
  z-index: 477;
  position: fixed;
  bottom: 1rem;
  width: 4.5em;
  height: 4.5em;
  padding: 1em;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  border-radius: 50%;
  background: #7c909b;
  cursor: pointer;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  opacity: 1;
  visibility: visible;
  transform: rotate(0);
  transition: opacity 0.5s, transform 0.5s;
}
@media (max-width: 30rem) {
  .footer .elevator,
  .footer .home-link {
    font-size: 0.8em;
  }
}
@media (max-height: 21rem) {
  .footer .elevator,
  .footer .home-link {
    font-size: 0.8em;
  }
}
.footer .elevator.hidden,
.footer .home-link.hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10rem);
}
.footer .elevator__icon,
.footer .home-link__icon {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 0.7em;
  letter-spacing: 0.2em;
  text-align: center;
  user-select: none;
}
.footer .elevator__icon::before,
.footer .home-link__icon::before,
.footer .elevator__icon::after,
.footer .home-link__icon::after {
  content: '';
  display: block;
  position: absolute;
}
.footer .elevator__icon__caption,
.footer .home-link__icon__caption {
  user-select: none;
  pointer-events: none;
}
.footer .elevator {
  right: 10rem;
}
@media (min-width: 30rem) {
  .footer .elevator {
    right: 6rem;
  }
}
.footer .elevator--frontpage {
  right: 5.5rem;
}
@media (min-width: 30rem) {
  .footer .elevator--frontpage {
    right: 1rem;
  }
}
.footer .elevator__icon::before,
.footer .elevator__icon::after {
  top: 0;
  left: calc(50% - 0.2rem);
  width: 50%;
  height: 0.4rem;
  border-radius: 0.2rem;
  background-color: #fff;
  transition: transform 0.3s;
  transform-origin: 0.2rem 50%;
}
.footer .elevator__icon::before {
  transform: translateY(50%) rotate(45deg);
}
.footer .elevator__icon::after {
  transform: translateY(50%) rotate(135deg);
}
.footer .home-link {
  right: 5.5rem;
}
@media (min-width: 30rem) {
  .footer .home-link {
    right: 1rem;
  }
}
.footer .home-link__icon::before,
.footer .home-link__icon::after {
  left: 50%;
  background-color: #fff;
  transform-origin: 50% 50%;
  transform: translateX(-50%);
}
.footer .home-link__icon::before {
  top: -15%;
  width: 30%;
  height: 30%;
  border-radius: 0.2rem;
  transform: translate(-50%, 50%) rotate(45deg);
}
.footer .home-link__icon::after {
  top: 11%;
  width: 38%;
  height: 31%;
  border-radius: 0.2rem 0.2rem 0 0;
}
.main-menu {
  /*
        Drop Down
     */
  /*
        Basics
     */
}
.main-menu__dd__flag {
  display: none;
}
.main-menu__dd__trigger {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  width: 3.32rem;
  height: 3.32rem;
  line-height: 1;
  text-align: center;
}
.main-menu__dd__icon {
  position: relative;
  display: block;
  height: 3em;
  opacity: 0.5;
}
.main-menu__dd__icon:before,
.main-menu__dd__icon:after {
  content: '';
  display: block;
  position: absolute;
  width: 0.66rem;
  height: 1px;
  background-color: currentColor;
  top: 50%;
  left: 50%;
  transition: transform 0.2s ease;
}
.main-menu__dd__icon:before {
  transform: translate(-80%, -50%) rotate(50deg);
}
.main-menu__dd__icon:after {
  transform: translate(-20%, -50%) rotate(-50deg);
}
.main-menu__dd__flag:checked ~ .main-menu__dd__trigger .main-menu__dd__icon {
  opacity: 1;
}
.main-menu__dd__flag:checked ~ .main-menu__dd__trigger .main-menu__dd__icon:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.main-menu__dd__flag:checked ~ .main-menu__dd__trigger .main-menu__dd__icon:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.main-menu a {
  display: block;
}
.main-menu__item {
  position: relative;
}
.main-menu__submenu__item {
  position: relative;
}
.navigation {
  /**
     * Overlay for small screens
     */
  position: fixed;
  z-index: 488;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  max-width: 26rem;
  background: #7c909b;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100%);
  transition: transform 0.5s ease 0s, opacity 0s 0.5s, visibility 0s 0.5s;
  will-change: opacity, visibility, transform;
  overflow-y: auto;
}
.navigation__trigger {
  display: block;
  z-index: 499;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 4.5em;
  height: 4.5em;
  padding: 1em;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  border-radius: 50%;
  background: #7c909b;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  cursor: pointer;
  user-select: none;
}
@media (max-width: 29.99rem) {
  .navigation__trigger {
    font-size: 0.8em;
  }
}
@media (max-height: 21rem) {
  .navigation__trigger {
    font-size: 0.8em;
  }
}
@media (min-width: 30rem) {
  .navigation__trigger {
    top: 1rem;
  }
}
.navigation__icon {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 0.7em;
  letter-spacing: 0.2em;
  user-select: none;
}
.navigation__icon::before,
.navigation__icon::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.4em;
  border-radius: 0.2em;
  background-color: #fff;
  transition: transform 0.3s;
}
.navigation__icon:before {
  top: 0;
}
.navigation__icon::after {
  top: 50%;
  transform: translateY(-100%);
}
.navigation__icon__caption {
  user-select: none;
  pointer-events: none;
}
.navigation__flag:checked + .navigation__trigger .navigation__icon__caption {
  display: none;
}
.navigation__flag:checked + .navigation__trigger .navigation__icon::before {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  transform-origin: 50%, 50%;
}
.navigation__flag:checked + .navigation__trigger .navigation__icon::after {
  transform: translateY(-50%) rotate(45deg);
  transform-origin: 50%, 50%;
}
.navigation__flag:checked ~ .header .navigation {
  transform: rotate(0deg);
  opacity: 1;
  visibility: visible;
  transition: transform 0.5s ease 0s;
}
.navigation__flag:checked ~ .header .navigation__trigger {
  position: fixed;
  z-index: 501;
  color: #fff;
}
.navigation__flag:checked ~ .header .navigation .main-menu {
  opacity: 1;
  transform: rotateX(0deg);
}
.navigation__logo {
  width: 100%;
}
.navigation__logo img {
  padding: 1rem 3rem;
  width: 100%;
  height: auto;
  /*
            @media ( max-width: 33rem ) {
                padding-right: 8rem;
            }
            */
}
@media (min-width: 50rem) {
  .navigation__flag:checked ~ .main {
    transform: translateX(26rem);
    transition: transform 0.9s ease 0.1s;
    /*
            & .article__header__bubble {
                opacity: 0;
            }
            */
  }
}
.main-menu {
  /**
     * Navi Definition
     */
  padding: 2rem 0;
  opacity: 0.4;
  transform: translateX(-100%);
  transition: transform 0.5s ease 0.3s, opacity 0.5s ease 0s;
  will-change: transform;
}
.main-menu__item {
  padding-left: 3rem;
  font-weight: 200;
  color: #fff;
}
.main-menu__item + .main-menu__item {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.main-menu__item a {
  display: block;
  padding: 0.66rem;
  font-size: 1.32rem;
  line-height: 1;
  color: #fff;
}
.main-menu__item--active {
  background-color: #fff;
}
.main-menu__item--active > a {
  position: relative;
  color: #7c909b;
  /*
            &:before {
                content: '→';
                position: absolute;
                left: -.8em;
                top: unit( @navi-fontsize / 2, rem );
            }
            */
}
.main-menu__item--active .main-menu__dd__icon::before,
.main-menu__item--active .main-menu__dd__icon::after {
  background-color: #7c909b;
}
.main-menu__dd__flag:checked ~ .main-menu__submenu {
  height: auto;
  transform: scaleY(1);
  opacity: 1;
}
.main-menu__submenu {
  height: 0;
  transform: scaleY(0);
  padding-left: 1em;
  transform-origin: top;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s, margin-bottom 0.2s;
}
.main-menu__submenu__item {
  position: relative;
}
.main-menu__item--active .main-menu__submenu__item > a {
  color: #7c909b;
}
/*

@media only screen and (max-width: unit( @bp-navi-mx, em)) {
    @import 'navigation-oc2';
    @import 'navigation-oc';
}

@media only screen and (min-width: unit( @bp-navi, em )) {
    @import 'navigation-large';
}

/*__*/
/**
 * Maximize space usage
 */
/*
@media only screen and (min-width: unit(@bp-wide, em)) and (max-width: 79.99em) {
    .menu {
        justify-content: flex-end;
        padding-top: .5em;
        text-align: right;
    }
}
*/
@media only screen and (min-width: 60em) {
  .main-menu {
    font-size: 1em;
  }
}
.sidebar {
  position: relative;
  padding: 1em 1em 3em;
  background: #ffffff;
}
@media only screen and (min-width: 36em) {
  .sidebar {
    padding: 2em 2em 3em;
  }
}
@media only screen and (min-width: 60em) {
  .sidebar {
    align-self: flex-end;
    margin-top: 3em;
    padding: 2em;
    z-index: 2;
  }
}
@media only screen and (min-width: 51em) {
  .sidebar {
    padding: 3em;
  }
}
.sidebar__widgets {
  width: 100%;
  text-align: center;
}
@media only screen and (min-width: 40em) {
  .sidebar__widgets {
    display: flex;
    justify-content: center;
  }
}
.sidebar .search__submit {
  display: none;
}
.widget {
  text-align: left;
  color: #b6c1c7;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
}
.widget__title {
  display: inline-block;
  width: 35%;
  padding: 0 1ex;
  white-space: nowrap;
  line-height: 2;
  border-right: 1px solid #ddd;
}
.widget--archive .widget__title:before {
  content: '\23F0';
}
.widget--categories .widget__title:before {
  content: '\2661';
}
.widget--search .widget__title:before {
  content: '\2315';
}
.widget .dropdown,
.widget .search__field {
  padding: 0;
  height: 2em;
  line-height: 2em;
  border: none;
}
.widget .search__field {
  width: 100%;
}
@media only screen and (max-width: 39.99em) {
  .widget + .widget {
    margin-top: 1em;
  }
  .widget .dropdown,
  .widget .search__form {
    width: 63%;
  }
}
@media only screen and (min-width: 40em) and (max-width: 58.99em) {
  .widget {
    display: inline-block;
    width: 30%;
    margin: 0 1%;
    text-align: center;
  }
  .widget__title {
    width: 50%;
    border-right: 0;
    border-bottom: 1px solid #ddd;
  }
  .widget .dropdown,
  .widget .search__form {
    width: 100%;
    text-align: center;
    vertical-align: top;
  }
  .widget .search__field {
    text-align: center;
  }
  .widget .dropdown option {
    text-align: left;
  }
}
@media only screen and (min-width: 59em) {
  .widget {
    display: inline-block;
    margin: 0 1ex;
  }
  .widget__title {
    width: auto;
  }
  .widget .dropdown,
  .widget .search__form {
    width: 11em;
    vertical-align: top;
  }
}
/*** modules ***/
.article {
  position: relative;
}
.article__thumbnail {
  display: block;
}
.article__thumbnail .wp-post-image,
.article__thumbnail__img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 70em) {
  .article__thumbnail .wp-post-image,
  .article__thumbnail__img {
    max-width: 100%;
  }
}
.article__header__bubble {
  display: flex;
  align-items: center;
  position: absolute;
  left: -3rem;
  top: -12rem;
  width: 20rem;
  height: 20rem;
  background-color: #fff;
  border-radius: 50%;
}
@media (min-width: 26rem) {
  .article__header__bubble {
    top: -5rem;
  }
}
.article__header__bubble::after {
  content: '';
  display: block;
  position: absolute;
  top: -0.79rem;
  left: -0.79rem;
  right: -0.79rem;
  bottom: -0.79rem;
  border-radius: 50%;
  border: 0.8rem solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 1.2rem rgba(0, 0, 0, 0.05);
}
.article__header__bubble .article__title {
  display: inline-block;
  position: relative;
  margin-top: 10rem;
  margin-left: 7rem;
  padding-right: 1ex;
  font-size: 1.32em;
  font-weight: 200;
  text-align: left;
  line-height: 1.1;
}
@media (min-width: 26rem) {
  .article__header__bubble .article__title {
    margin-top: 0;
    font-size: 1.584em;
  }
}
@media (min-width: 30rem) {
  .article__header__bubble .article__title {
    font-size: 1.9008em;
  }
}
.article__header__bubble .article__title::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: -2rem;
  transform: translateY(-50%);
  height: 4rem;
  width: 1rem;
  background: url('../img/dots.svg') no-repeat;
}
.article__content {
  padding-top: 10rem;
  padding-bottom: 5rem;
  font-size: 1.32em;
  font-weight: 200;
  text-align: center;
}
.article__content.fp {
  padding-bottom: 20rem;
}
@media (min-width: 50rem) {
  .article__content.fp {
    padding-bottom: 40rem;
  }
}
.article__content.content h2,
.article__content.content h3,
.article__content.content h4 {
  font-weight: 200;
}
.article__content.content h3,
.article__content.content h4 {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  font-weight: 400;
}
.article__content.content .diff-box__coaching h4 {
  margin-top: 0.5rem;
}
.article__content.content h3 {
  font-size: 1.9008rem;
}
.article__content.content h4 {
  font-size: 1.584rem;
}
@media (max-width: 30rem) {
  .article__content.content p {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }
}
.home .article__content {
  max-width: 70rem;
}
.subpage__navigation {
  max-width: 70rem;
  margin: 0 auto;
}
@media (min-width: 30rem) {
  .subpage__navigation__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}
.subpage__navigation__item {
  display: block;
  position: relative;
  height: auto;
  padding: 1.5rem;
  padding-bottom: 3rem;
}
@media (min-width: 30rem) {
  .subpage__navigation__item {
    width: 12rem;
  }
}
@media (min-width: 60rem) {
  .subpage__navigation__item {
    width: 24%;
  }
}
.subpage__navigation__icon {
  display: block;
  width: 11rem;
  height: 11rem;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  border: 1rem solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 1.2rem rgba(0, 0, 0, 0.05);
  transition: border 0.3s;
}
@media (min-width: 30rem) {
  .subpage__navigation__icon {
    width: 9rem;
    height: 9rem;
  }
}
@media (min-width: 41rem) {
  .subpage__navigation__icon {
    width: 10rem;
    height: 10rem;
  }
}
.subpage__navigation__icon:hover {
  border-width: 0.8rem;
}
.subpage__navigation__icon:hover img {
  box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
}
.subpage__navigation__icon img {
  width: 100%;
  height: auto;
  padding: 0.5rem;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 1.2rem rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s;
}
.subpage__navigation__title {
  position: absolute;
  left: 50%;
  font-size: 1.584rem;
  font-weight: 200;
  color: #7c909b;
  transform: translateX(-50%);
}
@media (min-width: 30rem) {
  .subpage__navigation__title {
    font-size: 1.1rem;
  }
}
@media (min-width: 41rem) {
  .subpage__navigation__title {
    font-size: 1.32rem;
  }
}
.subpage__header {
  width: 100%;
  text-align: center;
}
.subpage__thumbnail {
  position: relative;
  max-width: 17rem;
  margin: 3rem auto;
  border-radius: 50%;
  border: 1rem solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 1.2rem rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.subpage__thumbnail .page__icon {
  position: absolute;
  display: block;
  top: 0;
  width: 100%;
  height: auto;
  padding: 2rem;
  opacity: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  transition: opacity 0.4s;
}
.subpage__thumbnail .page__icon.swap {
  animation: swap 10s infinite;
}
@keyframes swap {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
* + .subpage__thumbnail {
  margin-top: 1.5rem;
}
.subpage__thumbnail:hover .page__icon {
  opacity: 1;
}
.subpage__image {
  display: block;
  top: 0;
  width: 100%;
  height: auto;
}
.subpage__title {
  font-size: 1.584rem;
}
.subpage__content {
  font-size: 1.32em;
  font-weight: 200;
  text-align: center;
}
.subpage__content.content h2,
.subpage__content.content h3,
.subpage__content.content h4 {
  font-weight: 200;
  margin-top: 0.5rem;
  margin-bottom: 2rem;
}
.subpage__content.content h3 {
  font-size: 2.28096rem;
}
.subpage__content.content h4 {
  font-size: 1.9008rem;
}
.subpage__content.content blockquote {
  font-size: 1.584rem;
  font-weight: 400;
}
.subpage__content.content blockquote + p {
  margin-top: 3rem;
}
@media (max-width: 30rem) {
  .subpage__content.content p {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }
}
.article--subpage {
  margin: 10rem auto 5rem;
}
.diff-box {
  font-size: 1.32rem;
}
.diff-box__header {
  max-width: 52rem;
  margin: 3rem auto;
}
.diff-box__title,
.diff-box__subtitle {
  width: 100%;
  text-align: center;
}
.diff-box__title {
  font-size: 2.28096rem;
  font-weight: 200;
}
.diff-box__graphic .risk,
.diff-box__graphic .founding,
.diff-box__graphic .plan,
.diff-box__graphic .standard {
  transform: scale(0);
  transform-origin: 50% 50%;
  transition: transform 0.5s;
}
.diff-box__graphic .risk--mobile,
.diff-box__graphic .founding--mobile,
.diff-box__graphic .plan--mobile,
.diff-box__graphic .standard--mobile {
  display: block;
  max-width: 100%;
  padding: 2rem;
  font-weight: 200;
  color: #fff;
  border-radius: 0.5rem;
  transition: transform 0.5s, opacity 0.5s;
  transform-origin: 50% -20%;
  transform: scale(0);
  opacity: 0;
}
.diff-box__graphic .risk--mobile:target,
.diff-box__graphic .founding--mobile:target,
.diff-box__graphic .plan--mobile:target,
.diff-box__graphic .standard--mobile:target {
  transform: scale(1);
  opacity: 1;
}
.diff-box__graphic .risk--mobile h4,
.diff-box__graphic .founding--mobile h4,
.diff-box__graphic .plan--mobile h4,
.diff-box__graphic .standard--mobile h4 {
  font-size: 1.584rem;
}
.diff-box__graphic .risk--mobile {
  background-color: #e30613;
}
.diff-box__graphic .founding--mobile {
  background-color: #2c90b0;
}
.diff-box__graphic .plan--mobile {
  background-color: #009640;
}
.diff-box__graphic .standard--mobile {
  background-color: #f9b000;
}
.diff-box__graphic .finder {
  transform: scale(1.6);
}
.diff-box__graphic--mobile {
  display: block;
}
@media (min-width: 30rem) {
  .diff-box__graphic .finder {
    transform: scale(1);
  }
  .diff-box__graphic--mobile {
    display: none;
  }
  .diff-box__graphic .risk__trigger:hover > .risk,
  .diff-box__graphic .founding__trigger:hover > .founding,
  .diff-box__graphic .plan__trigger:hover > .plan,
  .diff-box__graphic .standard__trigger:hover > .standard {
    transform: scale(1);
  }
  .diff-box__graphic .arrow {
    transform-origin: 50% 50%;
    transition: transform 1s;
  }
  .diff-box__graphic .standard__trigger:hover ~ .arrow {
    transform: rotate(45deg);
  }
  .diff-box__graphic .risk__trigger:hover ~ .arrow {
    transform: rotate(135deg);
  }
  .diff-box__graphic .plan__trigger:hover ~ .arrow {
    transform: rotate(225deg);
  }
  .diff-box__graphic .founding__trigger:hover ~ .arrow {
    transform: rotate(315deg);
  }
}
.diff-box__coaching {
  margin: 0 auto;
  font-size: 1.32em;
  font-weight: 200;
  text-align: center;
  overflow-x: hidden;
}
.content .diff-box__coaching {
  overflow-x: inherit;
}
.content .diff-box__coaching li {
  text-align: center;
}
.coaching {
  /*
    .js .content & {
        &__title {
            font-size: unit( @ms1, rem );
            letter-spacing: -.03em;
            transition: all .5s;

            @media ( min-width: unit( @bp-navi, rem ) ) {
                font-size: unit( @ms2, rem );
            }
        }

        &__content {
            margin-top: 3rem;
        }
    }

    .js .content &__item--activ & {
        &__title {
            letter-spacing: .01em;
        }
    }
    */
}
.coaching__arrow {
  display: block;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  margin: 1rem auto 3rem;
  border: 0 solid #fff;
  border-right-width: 5px;
  border-bottom-width: 5px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transition: transform 0.5s;
}
.coaching__list {
  display: flex;
  position: relative;
  transition: transform 0.5s;
}
.content .coaching__list {
  list-style: none;
  margin-left: 0;
}
.no-js .coaching__list {
  flex-wrap: wrap;
  justify-content: center;
}
.js .coaching__list {
  flex-wrap: nowrap;
}
.coaching__item {
  position: relative;
}
.no-js .coaching__item {
  width: 27rem;
  padding-bottom: 4rem;
}
.js .coaching__item {
  min-height: 27rem;
  min-width: 15rem;
  cursor: pointer;
}
.js .coaching__item--activ .coaching__header,
.js .coaching__item--activ .coaching__content {
  opacity: 1;
}
.js .coaching__item--activ .coaching__icon ~ .coaching__header {
  opacity: 1;
}
.coaching__icon {
  position: relative;
  width: 10rem;
  height: 10rem;
  margin: 0 auto 2rem;
  border-radius: 50%;
  border: 1rem solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 1.2rem rgba(0, 0, 0, 0.05);
}
.coaching__item:nth-child( 1n + 2 ) .coaching__icon::before {
  content: '';
  display: block;
  position: absolute;
  top: 40%;
  left: -4.7rem;
  width: 1.5rem;
  height: 1.5rem;
  border: 0 solid #fff;
  border-top-width: 5px;
  border-right-width: 5px;
  transform: rotate(45deg);
}
.no-js .coaching__item:nth-child( 1n + 2 ) .coaching__icon::before {
  display: none;
}
.js .coaching__header,
.js .coaching__content {
  position: absolute;
  left: 50%;
  width: 140%;
  transition: opacity 0.5s;
  transform: translateX(-50%);
}
.js .coaching__content {
  margin-top: 5rem;
  opacity: 0;
  font-size: 1rem;
}
.js .content .coaching__content {
  margin-top: 3.5rem;
}
.js .content .coaching__title {
  letter-spacing: -0.03em;
}
@media (max-width: 29.99rem) {
  .js .content .coaching__title {
    font-size: 1.32rem;
  }
}
.js .coaching__icon ~ .coaching__header {
  opacity: 0;
}
.coaching__title {
  font-size: 1.9008rem;
  font-weight: 400;
}
.content .coaching__title {
  margin: 0;
}
.coaching__content {
  margin-top: 2rem;
}
.coaching__control {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: -9rem 0 9rem;
}
@media (min-width: 41rem) {
  .coaching__control {
    display: none;
  }
}
.coaching__next,
.coaching__prev {
  display: block;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  border: 0 solid #fff;
  background: none;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transition: transform 0.5s;
}
.coaching__next {
  border-top-width: 5px;
  border-right-width: 5px;
}
.coaching__prev {
  border-left-width: 5px;
  border-bottom-width: 5px;
}
.article--workshop {
  text-align: center;
  margin-bottom: 3rem;
}
@media (max-width: 40.99rem) {
  .article--workshop + .article--page {
    background-color: #fff;
  }
}
.article--workshop + .article--page .article__content {
  padding-top: 3rem;
}
.article--page + .article--workshop {
  margin-top: -7rem;
}
:root {
  --angle: 0deg;
  --n: -1;
}
.workshop__wrapper {
  margin: 0 auto;
  max-width: 70rem;
}
.workshop__title {
  font-size: 1.9008rem;
  font-weight: 200;
}
.workshop__subtitle,
.article__content.content .workshop__subtitle {
  margin-top: 0.75em;
  font-size: 1.584rem;
  font-weight: 200;
}
.workshop__center {
  display: none;
}
.workshop__icon,
.workshop__arrow {
  display: block;
}
.workshop__graphic {
  padding-top: 6rem;
}
@media (max-width: 29.99rem) {
  .workshop__graphic {
    padding-top: 8rem;
  }
}
.workshop__icon {
  display: block;
  position: relative;
  width: 100%;
  margin-left: 1rem;
  transition: transform 1s;
}
.workshop__icon img {
  display: block;
  width: 100%;
  max-width: 6rem;
  height: auto;
  border: 0.5rem solid #fff;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
}
.workshop__label {
  position: absolute;
  top: 50%;
  padding: 1em 2em 1em 1em;
  text-align: left;
  line-height: 1.1;
  color: #fff;
}
@media (max-width: 40.99rem) {
  .workshop__label {
    left: 6rem;
    transform: translateY(-50%);
  }
}
.workshop__label__desc {
  display: block;
  margin-top: 1ex;
  font-size: 85%;
  letter-spacing: 0.02em;
}
@media (max-width: 29.99rem) {
  .workshop__label__desc {
    font-size: 80%;
  }
}
.workshop__arrow {
  position: relative;
  z-index: 2;
  width: 3rem;
  margin: 2.5rem;
  transform: rotate(90deg);
  transition: transform 1s;
}
.workshop__arrow img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 0.75em rgba(0, 0, 0, 0.3));
}
@media (max-width: 40.99rem) {
  .workshop__arrow:last-child {
    display: none;
  }
}
@media (max-width: 29.99rem) {
  .workshop__arrow {
    margin: 3.5rem 2.5rem;
  }
}
.workshop__group {
  display: block;
  position: absolute;
  background-color: #2c90b0;
  background: linear-gradient(-135deg, #0095db 0%, #009594 100%);
}
@media (max-width: 40.99rem) {
  .workshop__group {
    width: 100%;
    height: 100%;
    margin-top: -4.5rem;
    padding: 1rem;
    border-top: 0.5rem solid #fff;
  }
  .workshop__group:first-of-type {
    border-top: 0;
  }
}
@media (max-width: 29.99rem) {
  .workshop__group {
    margin-top: -5.5rem;
  }
}
.workshop__group__title {
  position: absolute;
  font-size: 1.9008rem;
  font-weight: 200;
  line-height: 1;
  color: #fff;
}
@media (max-width: 40.99rem) {
  .workshop__group__title {
    text-align: center;
    top: 13rem;
    left: 8rem;
  }
}
@media (max-width: 29.99rem) {
  .workshop__group__title {
    top: 15rem;
  }
}
.workshop__group:nth-of-type( 2 ) {
  background-color: #f9b000;
  background: linear-gradient(135deg, #f9b000 0%, #f18500 100%);
}
.workshop__group:nth-of-type( 3 ) {
  background-color: #e30613;
  background: linear-gradient(45deg, #e30613 0%, #ed6e05 100%);
}
.workshop__group:nth-of-type( 4 ) {
  background-color: #009640;
  background: linear-gradient(-45deg, #009640 0%, #00958e 100%);
}
@media (min-width: 41rem) {
  .workshop__graphic {
    position: relative;
    width: calc(100vw - 6rem);
    max-width: 50rem;
    height: calc(100vw - 6rem);
    max-height: 50rem;
    margin: 0 auto;
    padding-top: 3rem;
  }
  .workshop__graphic__elements {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .workshop__center {
    display: block;
    position: absolute;
    top: calc(50% - 7.5%);
    left: calc(50% - 7.5%);
    width: 15%;
    height: 15%;
  }
  .workshop__icon,
  .workshop__arrow {
    position: absolute;
  }
  .workshop__icon {
    top: calc(50% - 7.5%);
    left: calc(50% - 7.5%);
    width: 15%;
    height: 15%;
    margin: 0;
    text-align: center;
    line-height: 3em;
    transform: rotate(var(--angle)) translateY(-250%) rotate(calc(var( --n ) * var( --angle )));
  }
  .workshop__icon:hover {
    z-index: 4;
  }
  .workshop__icon img {
    max-width: 8rem;
  }
  .workshop__arrow {
    top: calc(50% - 3.5%);
    left: calc(50% - 3.5%);
    width: 7%;
    height: 7%;
    margin: 0;
    transform: rotate(var(--angle)) translateY(-500%);
  }
  .workshop__label {
    position: absolute;
    top: 50%;
    width: 135%;
    padding: 1em;
    text-align: left;
    line-height: 1.1;
    color: #fff;
  }
  .workshop__label--left {
    text-align: right;
    left: 0;
    transform: translate(-100%, -50%);
  }
  .workshop__label--right {
    right: 0;
    transform: translate(100%, -50%);
  }
  .workshop__label__desc {
    position: absolute;
    top: 50%;
    width: 130%;
    padding: 1ex;
    color: #637681;
    background-color: #fff;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.5s;
    transform: translateY(-50%);
  }
  .workshop__label--left .workshop__label__desc {
    right: 1rem;
    text-align: left;
  }
  .workshop__icon:hover .workshop__label__desc {
    opacity: 1;
  }
  .workshop__group {
    position: absolute;
    width: calc(50% - .5rem);
    height: calc(50% - .5rem);
  }
  .workshop__group__title {
    position: absolute;
    padding: 5%;
  }
  .workshop__group:nth-of-type( 1 ) {
    top: 0;
    left: 0;
    border-radius: 0 0 50%;
  }
  .workshop__group:nth-of-type( 2 ) {
    top: 0;
    right: 0;
    border-radius: 0 0 0 50%;
  }
  .workshop__group:nth-of-type( 2 ) .workshop__group__title {
    right: 0;
  }
  .workshop__group:nth-of-type( 3 ) {
    bottom: 0;
    right: 0;
    border-radius: 50% 0 0;
  }
  .workshop__group:nth-of-type( 3 ) .workshop__group__title {
    bottom: 0;
    right: 0;
  }
  .workshop__group:nth-of-type( 4 ) {
    bottom: 0;
    border-radius: 0 50% 0 0;
  }
  .workshop__group:nth-of-type( 4 ) .workshop__group__title {
    bottom: 0;
    left: 0;
  }
}
@media (min-width: 41rem) and (min-width: 60rem) {
  .workshop__icon img {
    border-width: 0.75rem;
  }
}
@media (min-width: 41rem) and (min-width: 72rem) {
  .workshop__group__title {
    font-size: 1.9008rem;
  }
}
.testimonials__item {
  margin-top: 2rem;
}
.blox__seperator + .testimonials__item {
  margin-top: 0;
}
/*** blog ***/
/*** misc. modules ***/
.alert,
.wpcf7-mail-sent-ok,
.wpcf7-validation-errors {
  padding: 1em;
  background: #1e2a4a;
  line-height: 1.2;
  color: #fff;
  border-radius: 5px;
  border-radius: 0.3rem;
}
.alert:empty {
  display: none;
}
.alert a {
  color: inherit;
}
.alert--success,
.alert.success,
.wpcf7-mail-sent-ok {
  color: #fff;
  background: #32b643;
}
.alert--warning,
.alert.warning {
  color: #fff;
  background: #e67e22;
}
.alert--error,
.alert.error,
.wpcf7-validation-errors {
  color: #fff;
  background: #c0392b;
}
/*
Alert

Inspred by http://picturepan2.github.io/spectre/#toasts. An alert box requires a contextual class to specify its importance.

See ``alert-light.less`` for different styles

Markup:
<div class="alert {{modifier_class}}">
  Take note of this important alert message.
</div>

.alert--success   - Something good or successful
.alert--warning   - Something to note, may require attention
.alert--error     - Something important. Usually signifies an error.

Styleguide Module.Alert
*/
.search__form {
  margin-top: 1rem;
}
.search__form,
.search__label {
  display: inline-block;
}
.search__field,
.search__submit {
  display: inline-block;
  padding: 0.8rem 1rem;
  line-height: 1rem;
}
.search__submit {
  margin-left: 1ex;
}
/*** shortcodes ***/
.attribution__flag {
  display: none;
}
.attribution__trigger {
  font-size: 0.8em;
}
.attribution__trigger:after {
  padding-left: 1ex;
  speak: none;
  content: '\25BE';
}
.attribution__content {
  height: 0;
  transform: scaleY(0);
  padding-top: 0.5em;
  transform-origin: top;
  overflow: hidden;
  opacity: 0;
  font-size: 0.9em;
  transition: opacity 0.2s, transform 0.2s;
}
.attribution__flag:checked ~ .attribution__trigger:after {
  content: '×';
}
.attribution__flag:checked ~ .attribution__content {
  height: auto;
  transform: scaleY(1);
  opacity: 1;
}
@media only screen and (min-width: 40em) {
  .u-column {
    column-count: 2;
    column-gap: 3em;
  }
}
.download a {
  display: inline-block;
  padding: 10px;
  text-decoration: none;
  border: 1px solid;
  border-radius: 5px;
  transition: background-color 0.3s;
}
.download a:hover {
  color: #fff;
  border-color: #e30613;
  background: #e30613;
}
.extend + .extend {
  border-top: 1px solid #7c909b;
}
.extend__flag {
  display: none;
}
.extend__trigger {
  display: block;
  position: relative;
  padding: 1em;
  padding-right: 2.5em;
  font-weight: 700;
  background: transparent;
}
.extend__trigger:after {
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  speak: none;
  content: '\25BE';
}
.extend__content {
  height: 0;
  overflow: hidden;
  padding-left: 1em;
  padding-right: 1em;
  transform: scaleY(0);
  transform-origin: top;
  background: transparent;
  border-top: 0;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s, padding 0.2s;
}
.extend__flag:checked ~ .extend__trigger:after {
  content: '×';
}
.extend__flag:checked ~ .extend__content {
  height: auto;
  transform: scaleY(1);
  opacity: 1;
  padding-top: 1em;
  padding-bottom: 1em;
  transition: padding 0.1s;
}
.map {
  height: 325px;
  margin-bottom: -25px;
}
.map__interactive {
  overflow: hidden;
}
.map__interactive .H_ib_body {
  right: inherit;
  padding: 0.5rem;
  text-align: left;
  font-size: 0.8rem;
  background-color: #7c909b;
}
.map__interactive .H_ib_body .H_ib_close {
  background: transparent;
}
.map__interactive .H_ib_tail {
  z-index: -1;
}
.map__interactive .H_ib_tail path {
  fill: #7c909b;
}
.map__fallback {
  position: relative;
  overflow: hidden;
}
.map__fallback img {
  display: block;
  margin: 0 auto -10px;
  width: 100%;
  height: auto;
}
.map__wrap {
  position: relative;
}
.map__wrap .button {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.map__legend {
  display: block;
  padding: 0.5em 0;
  font-size: 1rem;
  text-align: left;
}
.map__legend__color {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 1rem;
}
.map__legend__color--parking {
  background-color: #2c90b0;
}
.map__legend__color--drive {
  background-color: #009640;
}
.map__legend__color--comes {
  background-color: #e30613;
  margin: 0;
}
.map__legend__color--other {
  background-color: #7c909b;
}
@media only screen and (min-width: 600px) {
  .map__fallback {
    width: 100%;
  }
}
.tipp {
  padding: 1em;
  border: 1px solid #7c909b;
}
.tipp--solid {
  color: #fff;
  background: #7c909b;
  border: 0;
}
.tipp--solid a {
  color: #fff;
}
.tipp--solid .text-link {
  text-shadow: 0.03em 0 #7c909b, -0.03em 0 #7c909b, 0 0.03em #7c909b, 0 -0.03em #7c909b, 0.06em 0 #7c909b, -0.06em 0 #7c909b, 0.09em 0 #7c909b, -0.09em 0 #7c909b, 0.12em 0 #7c909b, -0.12em 0 #7c909b, 0.15em 0 #7c909b, -0.15em 0 #7c909b;
  background-image: linear-gradient(to bottom, currentColor, currentColor);
  background-repeat: repeat-x;
  background-size: 0.06em 0.06em;
  background-position: 0 96%;
}
/*** media ***/
.gallery {
  margin-top: 2em;
  margin-bottom: 2em;
}
.gallery__item {
  position: relative;
}
.gallery__item a {
  cursor: zoom-in;
}
.gallery__image {
  display: block;
  width: 100%;
  height: auto;
}
/*
Gallery

Styleguide Module.Gallery
*/
.gallery--default {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  text-align: center;
}
.gallery--default .gallery__item {
  display: inline-block;
  margin-bottom: 0.5em;
}
@media only screen and (min-width: 25em) {
  .gallery--default {
    justify-content: center;
  }
  .gallery--default .gallery__item {
    margin: 0.5em;
  }
}
/* list gallery with captions */
.gallery--list .gallery__item {
  display: table;
  width: 100%;
  margin: 1em 0;
}
.gallery--list .gallery__icon,
.gallery--list .gallery__caption {
  vertical-align: top;
  display: table-cell;
}
.gallery--list .gallery__icon {
  width: 60px;
}
.gallery--list .gallery__caption {
  padding-left: 1em;
  font-size: 0.9em;
}
@media only screen and (min-width: 25em) {
  .gallery--list .gallery__icon {
    width: 150px;
  }
  .gallery--list .gallery__caption {
    vertical-align: middle;
    font-size: 1em;
  }
}
/*
Standard Gallery

Markup:
<div class="gallery js-gallery gallery--default">
    <figure class="gallery__item" role="group">
        <div class="gallery__icon">
            <a href="https://via.placeholder.com/1000x750">
                <img src="https://via.placeholder.com/150x150" class="gallery__image" alt="" aria-describedby="gallery-1-1" width="150" height="150">
            </a>
        </div>
        <figcaption class="wp-caption-text gallery__caption" id="gallery-1-1">
            Description/Title
        </figcaption>
    </figure>
    <figure class="gallery__item" role="group">
        <div class="gallery__icon">
            <a href="https://via.placeholder.com/1000x750">
                <img src="https://via.placeholder.com/150x150" class="gallery__image" alt="" aria-describedby="gallery-1-2" width="150" height="150">
            </a>
        </div>
        <figcaption class="wp-caption-text gallery__caption" id="gallery-1-2">
            Description/Title
        </figcaption>
    </figure>
    <figure class="gallery__item" role="group">
        <div class="gallery__icon">
            <a href="https://via.placeholder.com/1000x750">
                <img src="https://via.placeholder.com/150x150" class="gallery__image" alt="" aria-describedby="gallery-1-3" width="150" height="150">
            </a>
        </div>
        <figcaption class="wp-caption-text gallery__caption" id="gallery-1-3">
            Description/Title
        </figcaption>
    </figure>
</div>

Weight: -10

Styleguide Module.Gallery.Default
*/
/* list gallery with captions */
.gallery--list .gallery__item {
  display: table;
  width: 100%;
  margin: 1em 0;
}
.gallery--list .gallery__icon,
.gallery--list .gallery__caption {
  vertical-align: top;
  display: table-cell;
}
.gallery--list .gallery__icon {
  width: 60px;
}
.gallery--list .gallery__caption {
  padding-left: 1em;
  font-size: 0.9em;
}
@media only screen and (min-width: 25em) {
  .gallery--list .gallery__icon {
    width: 150px;
  }
  .gallery--list .gallery__caption {
    vertical-align: middle;
    font-size: 1em;
  }
}
/*
Description List Gallery

Every image need a description in the WP meta data

Markup:
<div class="gallery js-gallery gallery--list">
    <figure class="gallery__item" role="group">
        <div class="gallery__icon">
            <a href="https://via.placeholder.com/1000x750">
                <img src="https://via.placeholder.com/150x150" class="gallery__image" alt="" aria-describedby="gallery-1-1" width="150" height="150">
            </a>
        </div>
        <figcaption class="wp-caption-text gallery__caption" id="gallery-1-1">
            Description/Title
        </figcaption>
    </figure>
    <figure class="gallery__item" role="group">
        <div class="gallery__icon">
            <a href="https://via.placeholder.com/1000x750">
                <img src="https://via.placeholder.com/150x150" class="gallery__image" alt="" aria-describedby="gallery-1-2" width="150" height="150">
            </a>
        </div>
        <figcaption class="wp-caption-text gallery__caption" id="gallery-1-2">
            Description/Title
        </figcaption>
    </figure>
    <figure class="gallery__item" role="group">
        <div class="gallery__icon">
            <a href="https://via.placeholder.com/1000x750">
                <img src="https://via.placeholder.com/150x150" class="gallery__image" alt="" aria-describedby="gallery-1-3" width="150" height="150">
            </a>
        </div>
        <figcaption class="wp-caption-text gallery__caption" id="gallery-1-3">
            Description/Title
        </figcaption>
    </figure>
</div>

Styleguide Module.Gallery.List
*/
.gallery--column {
  text-align: center;
}
.gallery--column .gallery__item + .gallery__item {
  margin-top: 1em;
}
.gallery--column .gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1ex;
  font-size: 0.8em;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
}
.gallery--column[data-caption='true'] .gallery__item > a[title] {
  /* */
  position: relative;
  display: block;
  /* */
  /* alternative caption style
            text-decoration: none;

            &::after {
                content: attr( title );
                display: block;
                padding-top: 1ex;
                font-size: .8em;
                color: #444;
            }
            /* */
}
.gallery--column[data-caption='true'] .gallery__item > a[title]::after {
  content: attr(title);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1ex;
  font-size: 0.8em;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
}
@media only screen and (min-width: 40em) {
  .gallery--column {
    column-count: 2;
    column-gap: 1em;
  }
}
/*
Columns Gallery

Markup:
<div class="gallery js-gallery gallery--column">
    <figure class="gallery__item" role="group">
        <div class="gallery__icon">
            <a href="http://via.placeholder.com/1000x750">
                <img src="http://via.placeholder.com/400x200" class="gallery__image" alt="" aria-describedby="gallery-1-1" width="400" height="200">
            </a>
        </div>
        <figcaption class="wp-caption-text gallery__caption" id="gallery-1-1">
            Description/Title
        </figcaption>
    </figure>
    <figure class="gallery__item" role="group">
        <div class="gallery__icon">
            <a href="http://via.placeholder.com/1000x750">
                <img src="http://via.placeholder.com/400x200" class="gallery__image" alt="" aria-describedby="gallery-1-2" width="400" height="200">
            </a>
        </div>
        <figcaption class="wp-caption-text gallery__caption" id="gallery-1-2">
            Description/Title
        </figcaption>
    </figure>
    <figure class="gallery__item" role="group">
        <div class="gallery__icon">
            <a href="http://via.placeholder.com/1000x750">
                <img src="http://via.placeholder.com/400x200" class="gallery__image" alt="" aria-describedby="gallery-1-3" width="400" height="200">
            </a>
        </div>
        <figcaption class="wp-caption-text gallery__caption" id="gallery-1-3">
            Description/Title
        </figcaption>
    </figure>
</div>

Styleguide Module.Gallery.Columns
*/
/* gallery as slideshow */
.gallery--slider {
  position: relative;
  overflow: hidden;
  text-align: center;
}
.no-js .gallery--slider .gallery__item:nth-child(n+2) {
  display: none;
}
.js .gallery--slider .gallery__item {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.js .gallery--slider .gallery__item--active {
  visibility: visible;
  position: relative;
}
.gallery--slider .gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1ex;
  font-size: 0.8em;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
}
.gallery--slider[data-caption='true'] .gallery__item > a[title] {
  /* */
  position: relative;
  display: block;
  /* */
  /*
            text-decoration: none;

            &::after {
                content: attr( title );
                display: block;
                padding-top: 1ex;
                font-size: .8em;
                color: #444;
            }
            /* */
}
.gallery--slider[data-caption='true'] .gallery__item > a[title]::after {
  content: attr(title);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1ex;
  font-size: 0.8em;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
}
.LB {
  cursor: zoom-in;
}
.LB--hint {
  display: inline-block;
  position: relative;
  /* circle
        &::after {
            speak: none;
            content: '\2795';
            position: absolute;
            top: .5em;
            left: .5em;
            width: 1.5em;
            height: 1.5em;
            line-height: 1.5;
            text-align: center;
            color: #fff;
            background: @brand-color;
            border-radius: 50%;
        }
        /**/
  /**/
}
.LB--hint::after {
  speak: none;
  content: '+';
  position: absolute;
  top: 0;
  left: 0.1em;
  line-height: 1;
  font-size: 0.9em;
  color: #fff;
}
.LB--hint::before {
  speak: none;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.5em 1.5em 0 0;
  border-color: #7c909b transparent transparent;
}
/*
Lightbox Link

By adding the ``.LB`` class to an anchor (WP Media modal) which contains an image, you can trigger a lightbox. Also this classes highlights this feature.

There is a round variant commented in source.

Markup:
<a class="LB LB--hint" href="https://via.placeholder.com/800x600"><img src="https://via.placeholder.com/150x150" alt="" width="150" height="150"></a>

Styleguide Module.Lightbox_Link
*/
/*** pages ***/
.home {
  background: #c2d6ec;
}
@media (min-width: 50rem) {
  .home {
    background: linear-gradient(to bottom, #fff 0%, #fff 50%, #c2d6ec 51%);
  }
}
.home .background {
  position: absolute;
  z-index: -1;
  width: 100%;
  background-color: #fff;
}
.home .background__middle {
  position: absolute;
  top: 117rem;
  width: 100%;
  min-height: 130rem;
  background: #02324a;
  background: linear-gradient(to bottom, #02324a 0%, #c2d6ec 100%);
}
.home .background__middle::before {
  content: '';
  display: block;
  position: absolute;
  top: -117rem;
  width: 100%;
  height: 117rem;
  background: url('../img/bunner-home-middle-new.jpg') center top no-repeat;
}
@media (min-width: 50rem) {
  .home .background__middle {
    background: linear-gradient(to bottom, #02324a 0%, #2c90b0 100%);
    top: 137rem;
    min-height: 55rem;
  }
  .home .background__middle::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -24em;
    width: 100%;
    height: 24em;
    background: url('../img/water-home-bottom-new.jpg') center top no-repeat;
  }
  .home .background__bottom {
    position: absolute;
    top: 216rem;
    width: 100%;
    height: 30em;
    background: linear-gradient(to bottom, #fff 0%, #c2d6ec 100%);
  }
}
@media (min-width: 72rem) {
  .home .background__middle {
    top: 137rem;
    min-height: 81rem;
  }
  .home .background__middle::after {
    bottom: -24em;
    height: 24em;
  }
  .home .background__bottom {
    top: 242rem;
    height: 30em;
  }
}
.home .outro {
  margin-top: -15rem;
  font-size: 2.28096rem;
  font-weight: 200;
  text-align: center;
}
.home .outro h4 {
  margin: 10rem auto;
}
.home .article__header {
  display: flex;
  align-items: center;
  height: 100vh;
}
.home .article__title {
  width: 100%;
  text-align: center;
}
.home .logo__visual {
  display: block;
  image-rendering: -webkit-optimize-contrast;
  width: 80%;
  height: auto;
  margin: -4rem auto 0;
}
@media (min-width: 30rem) {
  .home .logo__visual {
    width: 60%;
  }
}
.home .footer {
  background-image: none;
}
/*** plugins ***/
/* WP Contact Form 7
--------------------------------------------------- */
.wpcf7-form {
  position: relative;
  width: 100%;
  margin: 0 auto;
  margin-top: 1.5em;
  font-size: 1rem;
}
@media (min-width: 30rem) {
  .wpcf7-form {
    width: 70%;
  }
}
.wpcf7-form .wpcf7-response-output.checked {
  position: fixed;
  left: 0;
  right: 0;
  transition: all 0.3s ease;
  animation: popup-to-up 1s forwards;
  animation-duration: 7s;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
  width: 90%;
  text-align: center;
  background-color: rgba(124, 144, 155, 0.8);
  color: #fff;
  box-shadow: 3px 6px 10px #00000038;
  pointer-events: none;
}
@keyframes popup-to-up {
  0% {
    top: 100%;
    transform: translateY(-50%);
    opacity: 0;
  }
  25% {
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
  }
}
@media (min-width: 41rem) {
  .wpcf7-form .wpcf7-response-output.checked {
    width: 60%;
  }
}
.wpcf7-not-valid {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-color: #c0392b;
}
.wpcf7-not-valid-tip {
  position: absolute;
  display: block;
  padding: 1ex;
  font-size: 0.8em;
  color: #e30613;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
}
.wpcf7-response-output {
  margin-top: 1.5em;
}
.wpcf7 label {
  position: relative;
  padding-left: 0.5rem;
  text-align: left;
  color: #7c909b;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  border-color: #7c909b;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}
.wpcf7 input:focus + label,
.wpcf7 textarea:focus + label {
  color: #7c909b;
}
.wpcf7 input.empty:focus,
.wpcf7 textarea.empty:focus {
  border-color: #e30613;
}
.wpcf7 input.empty:focus + label,
.wpcf7 textarea.empty:focus + label {
  color: #e30613;
}
.wpcf7 input.filled:focus,
.wpcf7 textarea.filled:focus {
  border-color: #009640;
}
.wpcf7 input.filled:focus + label,
.wpcf7 textarea.filled:focus + label {
  color: #009640;
}
.wpcf7-fields input {
  position: relative;
  margin-top: 1rem;
  padding-left: 5.5rem;
  color: #7c909b;
  border: none;
  border-bottom: 1px solid #fff;
  background-color: rgba(255, 255, 255, 0.6);
}
.wpcf7-fields label {
  width: 4.5rem;
  margin-top: -1.8rem;
  border-right: 1px solid #ccc;
  pointer-events: none;
}
.wpcf7-send-fields {
  margin-top: 2.5rem;
}
.wpcf7-list-item-label {
  margin-left: 0.5rem;
}
.wpcf7-info-field {
  color: rgba(124, 144, 155, 0.6);
}
.wpcf7-info-field span {
  color: #e30613;
}
.wpcf7-message-field {
  margin-top: 2.5rem;
}
.wpcf7-message-field label {
  margin-bottom: -1.8rem;
}
.wpcf7-message-field textarea {
  width: 100%;
  padding: 0.5rem;
  padding-top: 2rem;
  color: #7c909b;
  border: none;
  border-bottom: 1px solid #fff;
  background-color: rgba(255, 255, 255, 0.6);
}
.wpcf7 .button--submit {
  display: block;
  position: relative;
  width: 7rem;
  height: 7rem;
  margin: 2rem auto;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #7c909b;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 -0.8rem rgba(0, 0, 0, 0.05);
  transition: color 0.5s, border 0.5s;
}
.wpcf7 .button--submit.valid {
  border: 2px solid #009640;
  cursor: pointer;
}
.wpcf7 .button--submit.valid:before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%;
  background: url("data:image/svg+xml,%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32 32' style='enable-background:new 0 0 32 32;' xml:space='preserve'%3E%3Cg%3E%3Cpolygon points='28.7,3.2 13.2,18.7 6.6,12 3.3,15.3 9.9,22 9.9,22 13.2,25.3 16.5,22 32,6.5 '/%3E%3C/g%3E%3C/svg%3E") center center no-repeat;
  transform: translate(-50%, -50%);
  opacity: 0.05;
}
.wpcf7 .button--submit.non-valid {
  border: 2px solid #e30613;
  pointer-events: none;
}
.wpcf7 .button--submit.non-valid:before {
  content: '×';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 6rem;
  line-height: 6rem;
  color: rgba(124, 144, 155, 0.1);
  transform: translate(-50%, -55%);
}
.wpcf7 .button--submit:after {
  content: '';
  display: block;
  position: absolute;
  top: -0.8rem;
  left: -0.8rem;
  right: -0.8rem;
  bottom: -0.8rem;
  border-radius: 50%;
  box-shadow: 0 0 1.2rem rgba(0, 0, 0, 0.05);
  border: 1rem solid rgba(255, 255, 255, 0.5);
  pointer-events: none;
  cursor: not-allowed;
}
.cf__fields {
  margin-bottom: 1.5em;
}
.cf__field,
.cf__msg,
.cf__fields__field,
.cf__fields__msg {
  position: relative;
}
@media only screen and (min-width: 30em) {
  .cf__fields,
  .cf__fields__fields {
    margin-bottom: 0;
  }
  .cf__field,
  .cf__fields__field {
    float: left;
    width: 50%;
  }
  .cf__field:nth-child(even),
  .cf__fields__field:nth-child(even) {
    padding-right: 1em;
  }
  .cf__email,
  .cf__fields__email {
    width: 100%;
  }
  .cf__msg,
  .cf__submit,
  .cf__fields__msg,
  .cf__fields__submit {
    clear: left;
  }
}
@media only screen and (min-width: 50em) {
  .cf__fields,
  .cf__fields__fields {
    float: left;
    padding-right: 2em;
  }
  .cf__field,
  .cf__fields__field {
    float: none;
    width: 100%;
  }
  .cf__field:nth-child(even),
  .cf__fields__field:nth-child(even) {
    padding-right: 0;
  }
  .cf__msg,
  .cf__fields__msg {
    clear: none;
    overflow: hidden;
  }
  .cf__msg textarea,
  .cf__fields__msg textarea {
    height: 13.1em;
  }
}
/* --- the real ramabzamba shit --- */
.lightbox {
  position: fixed;
  z-index: 99;
}
.lightbox__item {
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  text-decoration: none;
  visibility: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#000000', GradientType=1);
}
.lightbox__item:target {
  visibility: visible;
  pointer-events: auto;
}
.lightbox__item:target .lightbox__image {
  transform: translateX(0);
  opacity: 1;
}
.lightbox__item:target::after {
  content: attr(data-caption);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 3%;
  height: auto;
  text-align: center;
  color: #fff;
  z-index: 99;
}
.lightbox__item--next .lightbox__image {
  transform: translateX(2em);
}
.lightbox__item--prev .lightbox__image {
  transform: translateX(-2em);
}
.lightbox__image {
  display: block;
  position: relative;
  max-width: 80%;
  width: auto;
  max-height: 80%;
  height: auto;
  margin: 0 auto;
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.5s, transform 0.7s;
  pointer-events: none;
  z-index: 88;
}
.lightbox__button {
  display: none;
  position: fixed;
  top: 50%;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background: none;
  transform: translateY(-50%);
  z-index: 111;
}
.lightbox__button::after {
  content: '';
  position: absolute;
  top: 33%;
  width: 1em;
  height: 1em;
  border: 0 solid #fff;
  transform-origin: 50% 50%;
}
.lightbox__button--prev {
  left: 3%;
}
.lightbox__button--prev::after {
  left: 38%;
  border-top-width: 2px;
  border-left-width: 2px;
  transform: rotate(-45deg);
}
.lightbox__button--next {
  right: 3%;
}
.lightbox__button--next::after {
  right: 38%;
  border-top-width: 2px;
  border-right-width: 2px;
  transform: rotate(45deg);
}
.lightbox__pagination {
  display: none;
  position: fixed;
  top: 3%;
  left: 50%;
  font-size: 0.8em;
  color: #fff;
  z-index: 99;
  transform: translateX(-50%);
}
.lightbox__pagination__item {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0.2em;
  border: 1px solid #fff;
  border-radius: 50%;
}
.lightbox__pagination__item.aktiv {
  background-color: #fff;
}
.lightbox .show {
  display: block;
}
@media (max-width: 30em) {
  .has-touch .lightbox__button.show {
    display: none;
  }
}
.Wallop {
  /**
     * wallop--fade.css
     */
  /*
        In order to fade out properly we need to make sure
        that the item that is going to be the previous one
        has a higer z-index that the next one
     */
}
.Wallop-item--hidePrevious,
.Wallop-item--hideNext {
  visibility: visible;
  animation: wallopFade 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}
.Wallop-item--hidePrevious,
.Wallop-item--hideNext {
  z-index: 2;
}
.Wallop-item--showPrevious,
.Wallop-item--showNext {
  z-index: 1;
}
/*==========  FADE ANIMATIONS  ==========*/
@keyframes wallopFade {
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
/*** always last ***/
/**
 * TODO : Refactor https://uxdesign.cc/i-totally-forgot-about-print-style-sheets-f1e6604cfd6#.i4grmelwd
 */
/* debug */
@media print {
  /* */
  /* stylelint-disable declaration-no-important */
  /* stylelint-disable selector-list-comma-newline-after */
  * {
    background: transparent !important;
    color: #444 !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    color: #00f !important;
    text-decoration: underline;
  }
  @page {
    margin: 0.5cm;
  }
  .main a:after {
    content: ' (' attr(href) ')';
    font-size: 0.9em;
  }
  .main a[rel='tag']:after,
  .main .wp-caption a:after {
    content: '';
  }
  abbr:after {
    content: ' (' attr(title) ')';
  }
  .ir a:after {
    content: '';
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  body {
    width: auto;
    font-size: 10pt !important;
  }
  .wrapper,
  .container,
  .content-wrap,
  .main,
  .footer__info {
    margin: 0;
    max-width: 100%;
  }
  hr {
    clear: both;
    width: 100%;
    margin: 1em 0;
    border: 0;
    border-bottom: 1px solid #ccc;
  }
  blockquote {
    margin: 1.5em 0;
    padding: 1em;
    border: 0.2em solid #ccc;
    font-style: italic;
    font-size: 0.9em;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #000;
  }
  q {
    color: #444;
  }
  .gallery a::after {
    content: '';
  }
  .do-not-print,
  .header,
  .footer {
    display: none;
  }
  /* debug */
}
/* */
/*** a11y resources and tests ***/
/* make sure you moved them in a dependency section of bower.json */
/*
@import '../../libs/a11y.css/css/a11y-en.css';
@import '../../libs/lint-html-with-css/dist/lint.css';
*/
/*
protanopia
protanomaly
deuteranopia
deuteranomaly
tritanopia
tritanomaly
achromatopsia
achromatomaly

body {
    filter: url('../../libs/color-blindness-emulation/filters.svg#tritanopia');
}
/* */