@charset "UTF-8";
/**
 * style.scss
 *
 * Author: Marian Friedmann, ideenfrische®
 *
 * - Importiert alle notwendigen Abhängigkeiten und Dateien.
 * - Enthält Vorgaben zu Ordnung/Schreibstil unserer gemeinsamen Projekte.
 */
/* ==========================================================================
   Defaults, Reset, Abhängigkeiten und Variablen
   ========================================================================== */
/* Defaults, z. B. Debugging optionen */
/**
 * defaults.scss
 * 
 * Author: Marian Friedmann, ideenfrische®
 *
 * z. B. Debugging optionen, usw.
 */
/* Reset */
/**
 * Normalize CSS
 * -------------
 * 
 * v1.1.0 | MIT License | git.io/normalize
 */
/* HTML5 display definitions */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden] {
  display: none;
}

/* Base */
html {
  font-size: 100%;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */
}

html,
button,
input,
select,
textarea {
  font-family: sans-serif;
}

body {
  margin: 0;
}

/* Links */
a:focus {
  outline: thin dotted;
}

a:active,
a:hover {
  outline: 0;
}

/* Typo */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

h2 {
  font-size: 1.5em;
  margin: 0.83em 0;
}

h3 {
  font-size: 1.17em;
  margin: 1em 0;
}

h4 {
  font-size: 1em;
  margin: 1.33em 0;
}

h5 {
  font-size: 0.83em;
  margin: 1.67em 0;
}

h6 {
  font-size: 0.67em;
  margin: 2.33em 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

blockquote {
  margin: 1em 40px;
}

dfn {
  font-style: italic;
}

hr {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

mark {
  background: #ff0;
  color: #000;
}

p,
pre {
  margin: 1em 0;
}

code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  _font-family: 'courier new', monospace;
  font-size: 1em;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

q {
  quotes: none;
}

q:before,
q:after {
  content: '';
  content: none;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Lists */
dl,
menu,
ol,
ul {
  margin: 1em 0;
}

dd {
  margin: 0 0 0 40px;
}

menu,
ol,
ul {
  padding: 0 0 0 40px;
}

nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
}

/* Embedded content */
img {
  border: 0;
  /* 1 */
  -ms-interpolation-mode: bicubic;
  /* 2 */
}

svg:not(:root) {
  overflow: hidden;
}

/* Figures */
figure {
  margin: 0;
}

/* Forms */
form {
  margin: 0;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  /* 1 */
  padding: 0;
  white-space: normal;
  /* 2 */
  *margin-left: -7px;
  /* 3 */
}

button,
input,
select,
textarea {
  font-size: 100%;
  /* 1 */
  margin: 0;
  /* 2 */
  vertical-align: baseline;
  /* 3 */
  *vertical-align: middle;
  /* 3 */
}

button,
input {
  line-height: normal;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
  *overflow: visible;
  /* 4 */
}

button[disabled],
html input[disabled] {
  cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
  *height: 13px;
  /* 3 */
  *width: 13px;
  /* 3 */
}

input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */
}

/* Tables */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Abhängigkeiten */
/* Bourbon-Files müssen nicht im Projekt liegen, solange wir mit Codekit kompilieren */
/**
 * media.scss
 * 
 * Author: Marius Scheel, ideenfrische®
 * 
 * Benutzung:
 * 
 * @include media(300px);
 * oder @include media(300px, false);
 * oder @include media(max-width 300px);
 * oder @include media(100px max-width 300px);
 * oder @include media(max-width 100px max-width 300px);
 * oder @include media(max-width 100px max-width 300px, true);
 */
/* Eigene Mixins, die noch nicht, oder nicht mehr von Bourbon abgedeckt werden */
/**
 * cf.scss
 * 
 * Author: Marian Friedmann, ideenfrische®
 *
 */
.cf:before, .nav:before, .media:before,
.cf:after,
.nav:after,
.media:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.cf:after, .nav:after, .media:after {
  clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf, .nav, .media {
  *zoom: 1;
}

/**
 * border-radius.scss
 * 
 * Author: Marian Friedmann, ideenfrische®
 * 
 * Benutzung:
 * 
 * @include border-radius(3px);
 * oder @include border-radius(0 0 3px 3px);
 */
/**
 * background-pattern.scss
 * 
 * Author: Marian Friedmann, ideenfrische®
 * 
 * Mischt unser transparentes Hintergrundmuster mit einer bestimmten Farbe.
 *
 * Benutzung:
 *
 * @include background-pattern(#ff9112);
 * 
 */
/**
 * debug-description.scss
 * 
 * Author: Marian Friedmann, ideenfrische®
 *
 * Zeigt bei hover auf Element Debug-Message im Footer 
 * an. Wird nur von global/dev genutzt.
 *
 * Benutzung:
 *
 * @include debugDescription("Ich bin eine Debug-Message");
 */
/**
 * background-svg.scss
 * 
 * Author: Marian Friedmann, ideenfrische®
 * 
 * SVG als Hintergrundgrafik mit PNG Fallback.
 *
 * Benutzung:
 *
 * @include background-svg(../pfad/zum/bild/bildname); // ohne dateiendung
 * 
 */
/**
 * background-svg.scss
 * 
 * Author: Marian Friedmann, ideenfrische®
 *
 * Benutzung:
 *
 * @include display-inline-block;
 * 
 */
/* Variablen */
/**
 * Variablen: Colors
 */
/* Links */
/**
 * Variablen: Breakpoints
 */
/**
 * Variablen: z-index
 */
/**
 * Variablen: Spacing
 */
/* ==========================================================================
   Base Styles
   ========================================================================== */
/**
 * structure.scss
 * 
 * Author: Marian Friedmann, ideenfrische®
 */
body {
  background: #3fb2e7;
}

/* Äusserster Trenner */
.wrapper {
  position: relative;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  overflow: hidden;
}
@media screen and (min-width: 700px) {
  .wrapper {
    padding: 0 1.5em;
    overflow: visible;
  }
}

.wrapper__inner {
  position: relative;
}

/**
 * baseline-font.scss
 *
 * Author: Marian Friedmann, ideenfrische®
 *
 * Dient dazu um einheitliche Zeilenhöhen auch über
 * verschiedene Schriftgrößen hinweg zu gewährleisten.
 */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Based off font-size: 100% == 16px */
  /* 14px */
  font: 87.5%/1.25 "nimbus-sans", sans-serif;
}

h1 {
  line-height: 1.5em;
  /* 21px */
  font-size: 3.5em;
  /* 28px */
  margin: 0 0 0.75em 0;
  /* 14px */
  font-weight: 900;
  color: #022b60;
  font-family: "ff-good-headline-web-pro-con",sans-serif;
  font-style: italic;
  text-transform: uppercase;
}

h1.icon--headline-dots,
h1.icon--headline-dots-white {
  background-position: left bottom;
}

h2.icon--arrow-white {
  background: transparent;
  position: relative;
  width: auto;
  height: auto;
  margin: 1em 0 1em;
}
h2.icon--arrow-white:after {
  position: absolute;
  content: '';
  width: 20px;
  height: 20px;
  top: 2px;
  left: -1em;
}

h2 {
  line-height: 1em;
  /* 14px */
  font-size: 1.5em;
  /*21px*/
  margin: 1em 0 1em;
  /* ~7px*/
  font-family: "ff-good-headline-web-pro-con",sans-serif;
  color: #3fb2e7;
  font-style: italic;
  text-transform: uppercase;
}

h3, h4 {
  line-height: 1.5em;
  /* 14px */
  font-size: 1em;
  /*14px*/
  margin: 1.5em 0 1.5em;
  /* ~7px*/
}

h5, h6 {
  line-height: 1.5em;
  /* 14px */
  font-size: 1em;
  /*14px*/
  margin: 1.5em 0  1.5em;
  /* ~7px*/
  padding-top: 0;
}

p {
  margin: 0 0 1.5em 0;
  /*21px*/
  padding: 0;
}

ul, ol, pre {
  padding: 0;
  margin: 0 0 1.5em;
}

/**
 * typo.scss
 * 
 * Author: Marian Friedmann, ideenfrische®
 *
 * Alternative Text Styles. Um bestimmte Text-Blöcke nochmals 
 * hervorzuheben. Werden verwendet indem um bestehenden Text 
 * eine Wrapper-div mit einer der folgenden Klassen gelegt wird:
 *
 * - txt-lrg // Großer Text
 * - txt-sml // Kleiner Text
 * - txt-srf // Serif Text
 * - txt-rgt // Rechtsbündiger Text
 * - txt-cnt // Zentrierter Text
 *
 * Markup:
 *
 * <div class="txt-lrg">
 *   <h1>Lorem Ipsum</h1>
 *   <p>Lorem ipsum</p>
 * </div>
 */
.txt-lrg h1,
.txt-lrg h2 {
  line-height: 1.5em;
  font-size: 3em;
  margin: 0 0 0 0;
}

.txt-lrg p,
.txt-lrg ul,
.txt-lrg ol {
  line-height: 1.5em;
  font-size: 2em;
  margin: 0.75em 0 0.75em 0;
  font-weight: 300;
}

.txt-sml h1,
.txt-sml h2 {
  line-height: 1.5em;
  font-size: 1em;
  margin: 1.5em 0 1.5em 0;
}

.txt-sml p,
.txt-sml ul,
.txt-sml ol {
  line-height: 2em;
  font-size: 0.75em;
  margin: 1em 0 1em 0;
}

.txt-srf p,
.txt-srf ul,
.txt-srf ol {
  font-family: Georgia, serif;
}

.txt-rgt {
  text-align: right;
}

.txt-cnt {
  text-align: center;
}

/**
 * links.scss
 * 
 * Author: Marian Friedmann, ideenfrische®
 *
 * Basic Link Stil für alle Links die nicht 
 * nochmal extra mit Klassen versehen wurden.
 */
a {
  color: #3fb2e7;
  text-decoration: none;
  -webkit-transition: color 0.3s ease-in-out 0s, background 0.3s ease-in-out 0s;
  -moz-transition: color 0.3s ease-in-out 0s, background 0.3s ease-in-out 0s;
  -o-transition: color 0.3s ease-in-out 0s, background 0.3s ease-in-out 0s;
  transition: color 0.3s ease-in-out 0s, background 0.3s ease-in-out 0s;
}

a:hover {
  color: #157cab;
  text-decoration: underline;
  -webkit-transition: color 0.1s ease-in-out 0s, background 0.1s ease-in-out 0s;
  -moz-transition: color 0.1s ease-in-out 0s, background 0.1s ease-in-out 0s;
  -o-transition: color 0.1s ease-in-out 0s, background 0.1s ease-in-out 0s;
  transition: color 0.1s ease-in-out 0s, background 0.1s ease-in-out 0s;
}

a:focus {
  outline: thin dotted;
}

a:hover, a:active {
  outline: 0;
}

/**
 * media-src.scss
 * 
 * Author: Marian Friedmann, ideenfrische®
 *
 * Basic Styles für Bilder und Videos. Sollen dafür sorgen, 
 * dass Bilder sovie Videos immer in den korrekten 
 * Seitenverhältnissen angezeigt werden. 
 */
object,
embed,
video,
img {
  max-width: 100%;
  height: auto;
  display: block;
}

img {
  /*max-width:99%;
  margin: .1em .1em 2.9em .1em;
  border: 5px solid #fff;
  $shadow: 0 1px 2px rgba(0,0,0,.3), 0 0px 2px rgba(0,0,0,.6);
  @include box-shadow($shadow);
  @include border-radius(4px);*/
  /* Give it some text styles to offset alt text */
  color: #c00;
}

img.left {
  margin: 0 1.5em 0 0;
}

img.right {
  margin: 0 0 0 1.5em;
}

/* ==========================================================================
   Patterns
   ========================================================================== */
/**
 * Wiederkehrende Muster, die immer den selben Aufbau haben, und quasi
 * überall verwendet werden können.
 */
/**
 * grid.scss
 *
 * Author: Marian Friedmann, ideenfrische®
 */
.grid {
  *zoom: 1;
  margin-bottom: 2em;
}
.grid:before, .grid:after {
  content: " ";
  display: table;
}
.grid:after {
  clear: both;
}
.grid .grid {
  margin-bottom: 0;
}

.grid--blue-light,
.grid--blue-dark {
  padding: 2em 0;
  color: white;
}
@media screen and (min-width: 700px) {
  .grid--blue-light,
  .grid--blue-dark {
    margin-left: .75em;
    margin-right: .75em;
    padding: 3em;
  }
}
.grid--blue-light h1,
.grid--blue-dark h1 {
  color: white;
  font-size: 2.5em;
}

.grid--blue-light {
  background: #52bded;
}

.grid--blue-dark {
  background: #022b60;
}

.grid__item {
  display: inline-block;
  *zoom: 1;
  *display: inline;
  /* IE 7 */
  vertical-align: top;
  margin-right: -.278em;
  width: 100%;
  position: relative;
}

.grid__item--margin-top {
  margin-top: 1.5em;
}

.grid__item--size1of2-conform-right,
.grid__item--size1of2-conform-left {
  max-width: 512px;
  width: 100%;
}
.grid__item--size1of2-conform-right .ce_image,
.grid__item--size1of2-conform-left .ce_image {
  text-align: center;
}

.grid__item--size1of2-conform-left {
  float: left;
}

.grid__item--size1of2-conform-right {
  float: right;
}

@media screen and (min-width: 500px) {
  .grid__item--size1of2 {
    width: 50%;
  }

  .footer .grid__item--size1of2 {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .footer .grid__item--size1of2 {
    width: 50%;
  }
}
.lt-ie9 .grid__item--size1of2 {
  width: 50%;
}

.grid__inner {
  margin: 0 2em;
  position: relative;
}
@media screen and (min-width: 700px) {
  .grid__inner {
    margin: 0 .75em;
  }
}

.grid--center {
  text-align: center;
  margin-bottom: 0.5em;
}
.grid--center h1,
.grid--center h2 {
  display: inline-block;
}

/**
 * bottons.scss
 *
 * Author: Marian Friedmann, ideenfrische®
 *
 * Können auf 'a', 'input[type=submit]', 'button' gelegt werden
 * und mit den folgenden Zusatzklassen erweitert werden:
 *
 * - btn-sml        // Kleiner Button
 * - btn-lrg        // Großer Button
 * - btn-secondary  // Alternativer Button
 *
 * Markup:
 *
 * <a class="btn [btn--sml] [btn--secondary]" href="#">Button</a>
 */
.btn {
  font: inherit;
  /* Normalise fonts across <a>s and form buttons. */
  text-decoration: none;
  /* Normalise hover behaviour. */
  cursor: pointer;
  /* Normalise hover behaviour. */
  border: none;
  /* Normalise border styles (or lack thereof). */
  line-height: 1.5em;
  /* Remove line-height so we can size with padding. */
  display: inline-block;
  *zoom: 1;
  *display: inline;
  /* IE 7 */
  /* Normalise display state. */
  margin: 0;
  /* Cosmetics */
  padding: .25em .75em;
  /* Set in ems so we can scale buttons up with font-size alone. */
  color: #fff;
  font-family: "ff-good-headline-web-pro-con",sans-serif;
  font-size: 2em;
  font-weight: bold;
  background-color: #39aadf;
  position: relative;
}

.btn:hover {
  background-color: #157cab;
  color: #fff;
  text-decoration: none;
}

.btn--secondary,
.btn--secondary:visited {
  background: none;
  color: inherit;
}

.btn--secondary:hover {
  background: #eee;
  color: #157cab;
}

.btn:before {
  content: "";
  display: inline-block;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  width: 25px;
  height: 25px;
  background-color: #022b60;
  background-position: center;
  margin-right: 10px;
  position: relative;
  top: 3px;
}

/**
 * nav.scss
 * 
 * Author: Marian Friedmann, ideenfrische®
 * 
 * Quelle: Nav abstraction von csswizardry.com/2011/09/the-nav-abstraction
 *
 * Kann auf 'ol's und 'ul's angewendet werden und sorgt dafür, 
 * dass die Liste horizontal dargestellt wird und kann durch folgende 
 * Zusatzklassen erweitert werden:
 *
 * - nav--stacked    // Stellt die Liste Vertikal dar
 * - nav--banner     // Zentriert die Liste
 * - nav--block      // Gibt den Links mehr Padding / mehr Fläche zum klicken
 * - nav--fit        // Zwingt die Navigation die komplette Breite an Platz einzunehmen
 * - nav--keywords   // Darstellung als Keywordliste
 * - nav--breadcrumb // Darstellung als Breadcrumbnav
 *
 * Markup:
 *
 * <ul class="nav">
 *   <li><a href=#>Home</a></li>
 *   <li><a href=#>About</a></li>
 *   <li><a href=#>Portfolio</a></li>
 *   <li><a href=#>Contact</a></li>
 * </ul>
 */
.nav {
  list-style: none;
  margin-left: 0;
}
.nav > li,
.nav > li > a {
  display: inline-block;
  *display: inline;
  zoom: 1;
}

/* 'nav-stacked' stellt die Liste Vertikal dar */
.nav--stacked > li {
  display: list-item;
}
.nav--stacked > li > a {
  display: block;
}

/* 'nav-banner' zentriert die Liste */
.nav--banner {
  text-align: center;
}

/* 'nav--block' gibt der Liste mehr padding */
.nav--block {
  line-height: 1;
  /* Unnötigen Whitespace entfernen!! */
  letter-spacing: -0.31em;
  word-spacing: -0.43em;
  white-space: nowrap;
}
.nav--block > li {
  letter-spacing: normal;
  word-spacing: normal;
  text-align: center;
}
.nav--block > li > a {
  padding: .75em;
  line-height: 1.5em;
}

/* 'nav--fit' zwingt die Navigation die komplette Breite an Platz einzunehmen */
.nav--fit {
  display: table;
  width: 100%;
}
.nav--fit > li {
  display: table-cell;
}
.nav--fit > li > a {
  display: block;
}

/* 'nav--keywords' stellt die Liste als Keywordliste dar */
.nav--keywords > li:after {
  content: "\002C" "\00A0";
}
.nav--keywords > li:last-child:after {
  display: none;
}

/* 'nav--breadcrumbs' stellt die Liste als Breadcrumbnav dar */
.nav--breadcrumbs > li:before {
  content: "\27E9" "\00A0";
}
.nav--breadcrumbs > li:first-child:before {
  display: none;
}

/**
 * stacked.scss
 * 
 * Author: Marian Friedmann, ideenfrische®
 *
 * Stapelt mehrere Container übereinander.
 *
 * Anwendung:
 *
 * <div class="stacked">
 *   <div class="stacked__item">Stack1</div>
 *   <div class="stacked__item">Stack1</div>
 * </div>
 */
.stacked {
  position: relative;
  width: 100%;
}

.stacked__item {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/**
 * icon.scss
 * 
 * Author: Marian Friedmann, ideenfrische®
 *
 * Markup:
 *
 * <i class="icon [icon--nav-toggle]"></i>
 *
 * berechnung 1.5em (base) / 24 (größe des icons am screen) * 22 (dateigröße icon)
 * ich verstehe es zwar noch nicht aber es funktioniert!!!
 */
.icon {
  width: 1.571428571em;
  height: 1.571428571em;
  vertical-align: middle;
  display: inline-block;
  *zoom: 1;
  *display: inline;
  /* IE 7 */
}
@media screen and (min-width: 900px) {
  .icon {
    width: 1.375em;
    height: 1.375em;
  }
}

/**
 * Beispiel für ein Icon
 * 
 * .icon--mobile-nav-toggle {
 *   @include background-svg("../images/nav-toggle");
 * }
 */
/**
 * Info-Headlines
 * Die kleinen Zwischenüberschriften (z.B. Startseite)
 */
.info-headline {
  display: inline-block;
  *zoom: 1;
  *display: inline;
  /* IE 7 */
  font-size: 1.5em;
  font-family: "ff-good-headline-web-pro-con",sans-serif;
  color: #FFF;
  font-weight: 900;
  text-transform: uppercase;
  font-style: italic;
}

.info-headline--light-blue {
  color: #3fb2e7;
}

.info-headline--dark-blue {
  color: #022b60;
}

/**
 * headlines.scss
 */
.headline--blue {
  color: #022b60;
}

.headline--white {
  color: white;
}

/*------------------------------------*\
    $MEDIA
\*------------------------------------*/
/**
 * Place any image- and text-like content side-by-side, as per:
 * stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
 * E.g.:
 *
   <div class=media>
       <img src=http://placekitten.com/200/300 alt="" class=media__img>
       <p class=media__body>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
   </div>
 *
 * Demo: jsfiddle.net/inuitcss/cf4Qs
 *
 */
.media {
  display: block;
}

.media__img {
  float: left;
  margin-right: 1.5em;
}

/**
 * Reversed image location (right instead of left).
 */
.media__img--rev {
  float: right;
  margin-left: 1.5em;
}

.media__img img,
.media__img--rev img {
  display: block;
}

.media__body {
  overflow: hidden;
}

.media__body,
.media__body > :last-child {
  margin-bottom: 0;
}

/**
 * `.img`s in `.islet`s need an appropriately sized margin.
 */
.islet .media__img {
  margin-right: 0.75em;
}

.islet .media__img--rev {
  margin-left: 0.75em;
}

/**
 * Icon-Tiles
 */
.icon-tile {
  background-color: #022b60;
  padding: 4em;
  margin-bottom: .5em;
}
@media screen and (min-width: 500px) {
  .icon-tile {
    margin: 0.25em;
  }
}

.icon-tile img {
  width: 100px;
}

.icon-tile__bubble {
  width: 70px;
  height: 70px;
  -webkit-border-radius: 40px;
  border-radius: 40px;
  display: table;
  background-color: #3fb2e7;
  font-size: 27px;
  margin-bottom: 1em;
  float: none;
}
@media screen and (min-width: 800px) {
  .icon-tile__bubble {
    float: left;
  }
}

.icon-tile__number {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #fff;
}

.anwendung__icon {
  display: block;
  width: 70%;
  height: 0;
  padding-bottom: 70%;
  margin: 0 auto;
  -o-background-size: contain;
  background-size: contain;
  background-position: center center;
}

/**
 * Media-Object
 */
.media__headline {
  display: inline-block;
  *zoom: 1;
  *display: inline;
  /* IE 7 */
  font-size: 1.5em;
  font-family: "ff-good-headline-web-pro-con",sans-serif;
  color: #FFF;
  font-weight: 900;
  text-transform: uppercase;
  font-style: italic;
}

.media__text {
  color: #fff;
}

.media__bubble {
  width: 70px;
  height: 70px;
  -webkit-border-radius: 40px;
  border-radius: 40px;
  display: table;
  background-color: #3fb2e7;
  font-size: 27px;
}

.media__bubble-number {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #fff;
}

.media--dark-blue .media__headline {
  color: #022b60;
}
.media--dark-blue .media__bubble {
  background-color: #022b60;
}

.media--light-blue .media__headline {
  color: #3fb2e7;
}
.media--light-blue .media__bubble {
  background-color: #3fb2e7;
}

.media__img {
  float: none;
}
@media screen and (min-width: 800px) {
  .media__img {
    float: left;
  }
}

@media screen and (min-width: 500px) {
  .media__body {
    margin: 0;
  }
}

/* Seite Vorteile hat im Backend die Klasse "vorteile" */
@media screen and (min-width: 900px) {
  .vorteile .media,
  .vorteile .media {
    margin-left: 6em;
  }
}

@media screen and (min-width: 700px) {
  .vorteile .wrapper__inner .grid {
    margin-bottom: 6em;
  }
}
.vorteile .wrapper__inner .grid .grid {
  margin-bottom: 0;
}

@media screen and (min-width: 700px) {
  .vorteile .wrapper__inner .last .grid {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   Parts
   ========================================================================== */
/**
 * Bereiche der Seite wie z.B. Header und Footer. Darf gerne noch
 * weiter auseinander genommen werden.
 *
 * z.B. Header/Nav, Header/Logo usw.
 */
.header {
  margin-bottom: 3em;
}
@media screen and (min-width: 700px) {
  .header {
    margin-bottom: 6em;
  }
}
@media screen and (min-width: 900px) {
  .header {
    margin-bottom: 0;
  }
}

.invisible {
  display: none !important;
}

.mod_navigation h3 {
  margin: 0;
  background-color: #022b60;
  color: white;
  text-transform: uppercase;
  padding: 0 0 0 4.5em;
  line-height: 4.5em;
  cursor: pointer;
  font-weight: bold;
  background-position: 2em center;
}
@media screen and (min-width: 700px) {
  .mod_navigation h3 {
    display: none;
  }
}
.mod_navigation ul {
  display: none;
  margin: 0;
}
.mod_navigation ul.is-active {
  display: block;
}
@media screen and (min-width: 700px) {
  .mod_navigation ul {
    display: block;
    position: absolute;
    top: 7em;
  }
}
@media screen and (min-width: 900px) {
  .mod_navigation ul {
    bottom: 1em;
    top: auto;
    right: 0;
  }
}
.mod_navigation li {
  border-bottom: 3px solid white;
}
.mod_navigation li.last {
  border: none;
}
@media screen and (min-width: 700px) {
  .mod_navigation li {
    margin: 0;
    border: none;
    display: inline-block;
  }
}
.mod_navigation a {
  display: block;
  background: transparent;
  padding: 0 2em;
  color: white;
  line-height: 3em;
  text-transform: uppercase;
  position: relative;
  font-weight: bold;
}
.mod_navigation a:hover {
  text-decoration: none;
  background: #022b60;
}
@media screen and (min-width: 700px) {
  .mod_navigation a {
    font-size: 0.9em;
    background: transparent;
    padding: 0 1em;
  }
  .mod_navigation a:after {
    content: "";
    display: block;
    position: absolute;
    right: -3px;
    height: 25px;
    width: 5px;
    top: 7px;
  }
  .mod_navigation a.first {
    padding-left: 0;
  }
  .mod_navigation a.last {
    padding-right: 0;
  }
  .mod_navigation a.last:after {
    display: none;
  }
  .mod_navigation a:hover {
    background: transparent;
    color: #022b60;
    text-shadow: 1px 1px white;
  }
}
@media screen and (min-width: 700px) and (min-width: 1024px) {
  .mod_navigation a {
    font-size: inherit;
  }
}

.mod_navigation span {
  background: #022b60;
  display: block;
  padding: 0 2em;
  color: white;
  line-height: 3em;
  text-transform: uppercase;
  position: relative;
}
@media screen and (min-width: 700px) {
  .mod_navigation span {
    background: transparent;
    font-weight: bold;
    padding: 0 1em;
    color: #022b60;
    text-shadow: 1px 1px white;
  }
  .mod_navigation span:after {
    content: "";
    display: block;
    position: absolute;
    right: -3px;
    height: 25px;
    width: 5px;
    top: 7px;
  }
  .mod_navigation span.first {
    padding-left: 0;
  }
  .mod_navigation span.last {
    padding-right: 0;
  }
  .mod_navigation span.last:after {
    display: none;
  }
}

.logo {
  height: 7em;
  text-indent: -9999px;
  padding: .5em 0;
  background-position: center;
  display: block;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}
@media screen and (min-width: 700px) {
  .logo {
    padding: 0 0 3em;
    background-position: left center;
  }
}
@media screen and (min-width: 900px) {
  .logo {
    padding: 0;
  }
}

.hotline {
  display: block;
  position: absolute;
  bottom: 8em;
  right: 0;
  height: 4.5em;
  background-position: center center;
  width: 5em;
  border-left: 3px solid white;
  text-indent: -9999px;
}
@media screen and (min-width: 700px) {
  .hotline {
    font-family: "ff-good-headline-web-pro-con",sans-serif;
    bottom: 0;
    background: transparent;
    border: none;
    text-indent: 0;
    color: #FFF;
    bottom: -4em;
    z-index: 300;
    font-weight: 900;
    text-transform: uppercase;
    width: 10em;
    text-align: right;
    font-size: 2.75em;
    line-height: 1em;
    height: auto;
    cursor: default;
  }
  .hotline span {
    display: block;
    font-style: italic;
    color: #df051f;
    text-shadow: 1px 1px white;
  }
  .hotline:hover {
    text-decoration: none;
    color: #FFF;
  }
}
@media screen and (min-width: 1024px) {
  .hotline {
    bottom: -2.5em;
    line-height: .5em;
  }
  .hotline span {
    display: inline;
  }
}

.callback {
  display: none;
  color: #fff;
  font-size: 15px;
  font-family: "nimbus-sans", sans-serif;
  font-style: normal;
  font-weight: bold;
  text-shadow: none;
  text-decoration: none;
  position: absolute;
  right: 0;
  z-index: 50;
  top: 20em;
}
.callback:hover {
  color: #fff;
}
@media screen and (min-width: 700px) {
  .callback {
    display: inline;
  }
}
@media screen and (min-width: 900px) {
  .callback {
    top: 17em;
  }
}
@media screen and (min-width: 1024px) {
  .callback {
    top: 14em;
  }
}

.quick-contact {
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  right: 6em;
  top: 18px;
  margin-right: .5em;
}
@media screen and (min-width: 700px) {
  .quick-contact {
    display: none;
  }
}

.wrapper--header {
  overflow: inherit;
}

.header-image {
  height: 240px;
  width: 100%;
  margin: 2em 0 0;
  position: relative;
  background: #022b60 url(../img/header-bg-mobile.jpg) left center no-repeat;
}
@media screen and (min-width: 700px) {
  .header-image {
    height: 420px;
    background: #022b60 url(../img/header-bg-tablet.jpg) center no-repeat;
  }
}
@media screen and (min-width: 1024px) {
  .header-image {
    height: 440px;
    background: #022b60 url(../img/header-bg.jpg) center repeat-x;
  }
}

.header-image .header-image__scroller {
  -o-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  max-width: 432px;
  height: 320px;
  display: block;
  margin: 0 auto;
  position: relative;
  top: -20px;
  z-index: 500;
}
@media screen and (min-width: 700px) {
  .header-image .header-image__scroller {
    max-width: 770px;
    height: 570px;
    margin: 0 0 0 -200px;
    -o-background-size: auto auto;
    background-size: auto auto;
  }
}
@media screen and (min-width: 1024px) {
  .header-image .header-image__scroller.scroll {
    position: fixed;
    top: 30px;
    width: 770px;
  }
  .header-image .header-image__scroller.fixed {
    position: relative;
    top: 1065px;
  }
}

@media screen and (min-width: 1024px) {
  #sicherheit .grid {
    min-height: 343px;
  }
}
#sicherheit .image_container {
  text-align: center;
}
#sicherheit .image_container img {
  display: inline-block;
}
@media screen and (min-width: 1024px) {
  #sicherheit .image_container {
    width: 439px;
  }
  #sicherheit .image_container.scroll {
    position: fixed;
    top: 30px;
  }
  #sicherheit .image_container.fixed {
    position: relative;
    top: 1065px;
  }
}

.lupe {
  display: none;
}
@media screen and (min-width: 900px) {
  .lupe {
    width: 304px;
    height: 236px;
    display: block;
    position: absolute;
    bottom: 0;
    right: 1em;
  }
}

.lupe__effect {
  display: none;
}
@media screen and (min-width: 900px) {
  .lupe__effect {
    width: 171px;
    height: 172px;
    background: transparent url(../img/lupe-effekt-5.png) center no-repeat;
    display: block;
    position: absolute;
    top: 0;
    left: 1px;
  }
}
.lupe__effect img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  -webkit-transition: 1s linear;
  -moz-transition: 1s linear;
  -o-transition: 1s linear;
  transition: 1s linear;
}
.lupe__effect img.hidden {
  opacity: 0;
}

@media screen and (min-width: 900px) {
  .lupe__frame {
    width: 304px;
    height: 236px;
    background: transparent url(../img/lupe.png) center no-repeat;
    position: relative;
  }
}

.header-text {
  display: none;
}
@media screen and (min-width: 900px) {
  .header-text {
    display: block;
    text-align: right;
    font-size: 1.75em;
    font-family: "ff-good-headline-web-pro-con",sans-serif;
    color: #FFF;
    font-weight: 900;
    text-transform: uppercase;
    font-style: italic;
    width: 100%;
    line-height: 1.2em;
    margin-top: 0.5em;
    min-height: 5em;
  }
}

.icon--arrow,
.icon--arrow-white {
  display: inline-block;
  width: 9px;
  height: 12px;
  margin-right: .25em;
  background-position: center;
}

.footer__links {
  color: #022b60;
  margin: 1.5em 0;
}
.footer__links a {
  color: #022b60;
}

.footer__content {
  background: #022b60;
  padding: 2.5em 0;
  color: white;
}
.footer__content h1 {
  color: white;
  margin: 0;
}
.footer__content .facebook-link {
  font-family: "ff-good-headline-web-pro-con",sans-serif;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.5em;
}
.footer__content .facebook-link:hover {
  text-decoration: none;
  color: white;
}
.footer__content .icon--facebook {
  margin: auto;
  width: 87px;
  height: 77px;
  display: block;
}
@media screen and (min-width: 500px) {
  .footer__content .icon--facebook {
    display: block;
    position: absolute;
    right: 0;
    top: 4em;
    margin: 0;
  }
}
@media screen and (min-width: 500px) {
  .footer__content .grid__inner--facebook p {
    width: 75%;
  }
}

.footer .grid__item--size1of2 .grid__inner {
  background: transparent;
}
@media screen and (min-width: 700px) {
  .footer .grid__item--size1of2 .grid__inner {
    margin-left: 10em;
  }
  .footer .grid__item--size1of2 .grid__inner:after {
    content: "";
    width: 3px;
    height: 143px;
    position: absolute;
    left: -3em;
    display: block;
    top: 1.5em;
  }
}
@media screen and (min-width: 1024px) {
  .footer .grid__item--size1of2 .grid__inner {
    margin-left: .75em;
  }
  .footer .grid__item--size1of2 .grid__inner:after {
    display: none;
  }
  .footer .grid__item--size1of2 .grid__inner.grid__inner--facebook {
    margin-left: 7em;
  }
  .footer .grid__item--size1of2 .grid__inner.grid__inner--facebook:after {
    display: block;
    left: -7em;
  }
}

@media screen and (min-width: 900px) {
  .footer .grid__item--size1of3 {
    width: 33.33333%;
  }
}

.textslider {
  overflow: hidden;
  position: relative;
}

.textslider-wrapper {
  width: 800%;
  position: relative;
  top: 0;
  left: 0;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  *zoom: 1;
}
.textslider-wrapper:before, .textslider-wrapper:after {
  content: " ";
  display: table;
}
.textslider-wrapper:after {
  clear: both;
}

.textslider__item {
  width: 12.5%;
  float: left;
}

.textslider__index {
  background: #3fb2e7;
  display: block;
  width: 2.5em;
  height: 2.5em;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  text-align: center;
  line-height: 2.5em;
  font-size: 2em;
  font-weight: bold;
  float: left;
  margin-right: 1.5em;
}

.textslider__item h2 {
  margin-top: .5em;
  float: left;
  width: 40%;
}

.textslider__item p {
  margin: 6em 0 1.5em;
  clear: both;
}
@media screen and (min-width: 500px) {
  .textslider__item p {
    margin: 4em 0 1.5em;
  }
}

.textslider__navigation {
  margin-top: 1.5em;
}
.textslider__navigation li {
  display: inline-block;
  margin: 0 .5em 0 0;
}
.textslider__navigation a {
  width: 10px;
  height: 10px;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  background: white;
  display: block;
}
.textslider__navigation a.is-active {
  background: #39aadf;
}

@media screen and (min-width: 500px) {
  .textslider__item p,
  .textslider__navigation {
    margin-left: 8em;
  }
}

@media screen and (min-width: 500px) {
  .textslider__item .btn {
    margin-left: 4em;
  }
}

.anwendung-teaser {
  background: #59beeb;
  margin-bottom: 2px !important;
  padding: 2em;
  text-align: center;
}
@media screen and (min-width: 500px) {
  .anwendung-teaser {
    text-align: start;
  }
}

.anwendung-teaser__content {
  margin-top: -1em;
}

.anwendung-teaser h2 {
  display: block;
}

.anwendung-teaser__image {
  display: inline-block;
}

.anwendung-teaser .icon--arrow-white:after {
  display: none;
}
@media screen and (min-width: 500px) {
  .anwendung-teaser .icon--arrow-white:after {
    display: block;
  }
}

.anwendung-support__image {
  text-align: center;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  width: 45px;
  height: 45px;
  background-color: #df051f;
  font-size: 2.65em;
  font-weight: bold;
  color: #fff;
  margin-right: .5em;
}

.support-hotline {
  color: #fff;
  cursor: default;
}
.support-hotline:hover {
  color: #fff;
  text-decoration: none;
}

.anwendung-support__body {
  margin-top: 1em;
}

.referenzen .ce_image {
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  width: 50%;
  padding: 0.75em;
  background: transparent;
}
@media screen and (min-width: 700px) {
  .referenzen .ce_image {
    width: 25%;
  }
}
.referenzen .ce_image img {
  width: 100%;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.referenzen .ce_image:before {
  content: "";
  display: block;
  width: 51px;
  height: 51px;
  position: absolute;
  left: 40%;
  top: 40%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.referenzen .ce_image:hover img {
  opacity: .3;
}
.referenzen .ce_image:hover:before {
  opacity: 1;
}

.referenzen .image_container {
  background-color: #022b60;
  /* Scheint beim Hover durch */
}

.magnific-container {
  *zoom: 1;
}
.magnific-container:before, .magnific-container:after {
  content: " ";
  display: table;
}
.magnific-container:after {
  clear: both;
}

.kundenstimme__content {
  background: transparent;
}

@media screen and (min-width: 1024px) {
  .kundenstimme__content {
    position: relative;
    padding: 2em 10em 0;
    margin-bottom: 4em;
    min-height: 6em;
    background-image: none !important;
  }
  .kundenstimme__content:before {
    content: "";
    width: 80px;
    height: 80px;
    display: inline-block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    left: -1em;
    top: 2em;
    background-color: #39aadf;
    background-position: center;
    background-repeat: no-repeat;
  }
  .kundenstimme__content:after {
    content: "";
    width: 80px;
    height: 80px;
    display: inline-block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: -2em;
    background-color: #39aadf;
    background-position: center;
    background-repeat: no-repeat;
  }
}
.carousel {
  position: relative;
}
@media screen and (min-width: 500px) {
  .carousel .slick-track {
    height: 530px;
  }
}
.carousel__inner {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  padding: 2em;
  display: block;
  background-color: #52bded;
}
.slick-active .carousel__inner {
  background-color: #022b60;
}
@media screen and (min-width: 500px) {
  .carousel .slick-slide {
    -webkit-transform: scale(0.5) translateY(30%);
    -moz-transform: scale(0.5) translateY(30%);
    -ms-transform: scale(0.5) translateY(30%);
    -o-transform: scale(0.5) translateY(30%);
    transform: scale(0.5) translateY(30%);
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
  }
}
@media screen and (min-width: 500px) {
  .carousel .slick-first {
    -webkit-transform: scale(0.75) translateY(25%);
    -moz-transform: scale(0.75) translateY(25%);
    -ms-transform: scale(0.75) translateY(25%);
    -o-transform: scale(0.75) translateY(25%);
    transform: scale(0.75) translateY(25%);
    -webkit-transform-origin: right top;
    -moz-transform-origin: right top;
    -ms-transform-origin: right top;
    -o-transform-origin: right top;
    transform-origin: right top;
  }
}
@media screen and (min-width: 500px) {
  .carousel .slick-pre {
    -webkit-transform: scale(0.85) translateY(100px) !important;
    -moz-transform: scale(0.85) translateY(100px) !important;
    -ms-transform: scale(0.85) translateY(100px) !important;
    -o-transform: scale(0.85) translateY(100px) !important;
    transform: scale(0.85) translateY(100px) !important;
    -webkit-transform-origin: inherit;
    -moz-transform-origin: inherit;
    -ms-transform-origin: inherit;
    -o-transform-origin: inherit;
    transform-origin: inherit;
  }
}
@media screen and (min-width: 500px) {
  .carousel .slick-active {
    -webkit-transform: scale(1) translateY(140px) !important;
    -moz-transform: scale(1) translateY(140px) !important;
    -ms-transform: scale(1) translateY(140px) !important;
    -o-transform: scale(1) translateY(140px) !important;
    transform: scale(1) translateY(140px) !important;
    -webkit-transform-origin: inherit;
    -moz-transform-origin: inherit;
    -ms-transform-origin: inherit;
    -o-transform-origin: inherit;
    transform-origin: inherit;
  }
}
@media screen and (min-width: 500px) {
  .carousel .slick-last {
    -webkit-transform: scale(0.75) translateY(25%);
    -moz-transform: scale(0.75) translateY(25%);
    -ms-transform: scale(0.75) translateY(25%);
    -o-transform: scale(0.75) translateY(25%);
    transform: scale(0.75) translateY(25%);
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
  }
}

.slick-slide img {
  margin: 0 auto;
}

.product__name {
  margin: .5em 0 .5em .5em;
  padding-left: 1.75em;
  display: none;
  color: #022b60;
  font-size: 1.25em;
  font-weight: 900;
}
.slick-active .product__name {
  display: block;
}
@media screen and (min-width: 500px) {
  .product__name {
    margin: .5em 0 5em;
  }
}

.slick-prev,
.slick-next {
  top: 45%;
  height: 40px;
  width: 40px;
}
.slick-prev:before,
.slick-next:before {
  font-size: 40px;
}
@media screen and (min-width: 900px) {
  .slick-prev,
  .slick-next {
    top: 37%;
  }
}

.slick-prev {
  left: 0;
}

.slick-next {
  right: 0;
}

.formbody {
  /* Placeholder Styling */
  /* Placeholer Ende */
  /* Star Rating */
}
.formbody ::-webkit-input-placeholder {
  color: #fff;
  font-weight: normal;
  font-size: .9em;
}
.formbody :-moz-placeholder {
  /* Firefox 18- */
  color: #fff;
  font-weight: normal;
  font-size: .9em;
}
.formbody ::-moz-placeholder {
  /* Firefox 19+ */
  color: #fff;
  font-weight: normal;
  font-size: .9em;
  opacity: 1;
}
.formbody :-ms-input-placeholder {
  color: #fff;
  font-weight: normal;
  font-size: .9em;
}
.formbody label {
  display: none;
}
.formbody input,
.formbody textarea {
  padding: 1em 2em;
  margin-bottom: .5em;
  background-color: #022b60;
  border: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  color: #fff;
  border: 3px solid #022b60;
}
.formbody input:focus, .formbody input:active,
.formbody textarea:focus,
.formbody textarea:active {
  border: 3px solid #fff;
}
.formbody textarea {
  margin-bottom: 1.5em;
  resize: none;
}
.formbody input[type=submit] {
  border: none;
}
@media screen and (max-width: 900px) {
  .formbody input[type=submit] {
    background-image: none;
  }
}
@media screen and (min-width: 900px) {
  .formbody input[type=submit] {
    width: 100px;
    height: 100px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    text-indent: -9999em;
    background-position: center center;
  }
}
.formbody input[type=submit]:hover {
  background-color: #52bded;
}
@media screen and (min-width: 900px) {
  .formbody .submit_container {
    text-align: center;
  }
}
.formbody fieldset {
  background-color: #39aadf;
  border: none;
  color: #fff;
  padding: 1em 2em;
  margin: 0 0 1.5em 0;
}
@media screen and (min-width: 700px) {
  .formbody legend {
    float: left;
    margin-top: 1.25em;
    margin-right: 2em;
  }
}
.formbody .star-rating span {
  background-color: transparent;
  background-position: center;
  opacity: .5;
  width: 50px;
  height: 50px;
  float: left;
  display: inline-block;
  *zoom: 1;
  *display: inline;
  /* IE 7 */
}
.formbody .star-rating span:hover, .formbody .star-rating span.active {
  opacity: 1;
}
.formbody .star-rating span input {
  display: block;
  width: 50px;
  height: 50px;
  opacity: 0;
  cursor: pointer;
}
.formbody .star-rating.hover span.active {
  opacity: .5;
}
.formbody .star-rating.hover span.pre-active {
  opacity: 1;
}

/**
 * Kalkulator
 */
.teich {
  position: relative;
  margin-top: 4em;
  width: auto;
  height: 0;
  padding-bottom: 70%;
  -o-background-size: contain;
  background-size: contain;
}
.teich:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  content: "";
  width: auto;
  -o-background-size: contain;
  background-size: contain;
}
@media screen and (min-width: 1024px) {
  .teich:after {
    display: block;
  }
}

.kalkulator * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.kalkulator .measures {
  min-width: 4em;
  font-family: "ff-good-headline-web-pro-con",sans-serif;
  font-size: 1.5em;
  font-weight: 900;
  text-transform: uppercase;
  font-style: italic;
  color: #3fb2e7;
}
.kalkulator .kalkulator__label {
  display: block;
}
@media screen and (min-width: 1024px) {
  .kalkulator .kalkulator__label {
    position: absolute;
  }
}
.kalkulator .kalkulator__label--width {
  top: 25em;
  left: 27em;
}
.kalkulator .kalkulator__label--length {
  top: 25em;
}
.kalkulator .kalkulator__label--deep {
  top: 8em;
  left: 32em;
  z-index: 2;
}
.kalkulator input {
  color: #022b60;
  display: block;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .kalkulator input {
    height: 2em;
    font-size: 1.5em;
    width: 3.5em;
    text-align: center;
  }
}

.kalkulator__result {
  position: relative;
  margin-top: 2em;
  background-color: #3fb2e7;
}
.kalkulator__result img {
  float: left;
  position: relative;
  top: -2em;
  left: .5em;
  margin-right: 1em;
}

.kalkulator__amount {
  font-size: 4em;
  font-weight: bold;
}

.kalkulator__product {
  color: #022b60;
  font-size: 1.5em;
  font-weight: bold;
  text-transform: uppercase;
}

.info {
  background-color: #3fb2e7;
  padding: 1.5em;
}
.info a {
  color: #fff;
}
.info a:hover {
  color: #fff;
}

.warranty__icon {
  display: inline-block;
  *zoom: 1;
  *display: inline;
  /* IE 7 */
  width: 72px;
  height: 72px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #022b60;
  background-position: center;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
  margin-right: .5em;
}
.warranty__icon:hover {
  background-color: #fff;
}
.warranty__icon.is-active {
  background-color: #fff;
}

.warranty__bubble {
  position: relative;
  height: 250px;
  width: 250px;
  background-color: #022b60;
  text-align: center;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  z-index: 2;
}
@media screen and (min-width: 700px) {
  .warranty__bubble {
    top: -7em;
    left: -11%;
  }
}
.warranty__bubble:after {
  position: absolute;
  content: "";
  width: 30px;
  height: 30px;
  display: block;
  background-color: #022b60;
  bottom: 1em;
  right: 3em;
}
@media screen and (min-width: 1024px) {
  .warranty__bubble:after {
    width: 50px;
    height: 50px;
    bottom: 1.5em;
    right: 1.5em;
  }
}

@media screen and (min-width: 1024px) {
  .info-text {
    min-height: 8em;
  }
}

.bubble-text {
  position: absolute;
  width: 210px;
  top: 25%;
  left: 8%;
  z-index: 2;
  font-family: "ff-good-headline-web-pro-con",sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-style: italic;
  font-size: 1.3em;
}

@media screen and (min-width: 700px) {
  .warranties {
    margin-top: 4em;
  }
}

@media screen and (min-width: 700px) {
  .warranties__img {
    display: none;
  }
}

/* ==========================================================================
   Helper Classes
   ========================================================================== */
/**
 * Kleine Klassen die nur einen bestimmten Job haben.
 *
 * z. B. mehr padding o. ä.
 */
/**
 * spacing.scss
 * 
 * Author: Marian Friedmann, ideenfrische®
 */
@media screen and (min-width: 500px) {
  .inner--right {
    margin-right: 1.5em;
  }
}
.lt-ie9 .inner--right {
  margin-right: 1.5em;
}

@media screen and (min-width: 500px) {
  .inner--right-big {
    margin-right: 3em;
  }
}
.lt-ie9 .inner--right-big {
  margin-right: 3em;
}

.inner--top {
  margin-top: 1.5em;
}

.inner--top-big {
  margin-top: 3em;
}

/**
 * borders.scss
 * 
 * Author: Marian Friedmann, ideenfrische®
 */
.formbody p.error {
  background-color: #df051f;
  padding: 1em 2em;
  margin: 0;
}

/* ==========================================================================
   Shame
   ========================================================================== */
/**
 * Für schnelle Hacks und Fixes. Wird ganz zum Schluss importiert,
 * um alles andere zu überschreiben.
 */
/**
 * shame.scss
 *
 * Author: Marian Friedmann, ideenfrische®
 *
 * Für schnelle Hacks und Fixes. Wird ganz zum Schluss
 * importiert, um alles andere zu überschreiben.
 */
.content {
  height: 1000px;
}

@media screen and (min-width: 500px) {
  .negative-margin-top {
    margin-top: -1em;
  }
}

p {
  color: #fff;
}

/* Seite Kundenstimmen */
@media screen and (min-width: 1024px) {
  .kundenstimmen .grid--blue-dark,
  .kundenstimmen .grid--blue-light {
    padding: 3em 5em;
  }

  .kundenstimmen h1 {
    margin-left: -0.5em;
  }
}
/* Seite Kontakt */
.rating-wrapper {
  margin: 1em 0 0 1.25em;
}

/* Kalkulator */
@media screen and (min-width: 500px) {
  .amount_needed .grid__inner {
    padding-top: 7em;
  }
}
@media screen and (min-width: 1024px) {
  .amount_needed .grid__inner {
    padding-top: 4em;
    padding-left: 9em;
  }
}

/**
 * Garantien
 * .grid container braucht bg-image -> dma_eg_box-start template liest $this->class an anderer stelle aus
 * ein Selector muss her
 * Artikel ID 29 hat im Backend die Klasse "warranties"
 */
.warranties .grid.grid--blue-light {
  padding-bottom: 0;
}
@media screen and (min-width: 700px) {
  .warranties .grid.grid--blue-light {
    background: #52bded url(../img/garantien/boxer-small.png) bottom right no-repeat;
    padding-bottom: 1.5em;
  }
}
@media screen and (min-width: 1024px) {
  .warranties .grid.grid--blue-light {
    background-image: url(../img/garantien/boxer-large.png);
  }
}

.grid__item--size1of2--from-600 {
  width: 100%;
}
@media screen and (min-width: 600px) {
  .grid__item--size1of2--from-600 {
    width: 50%;
  }
}

/**
 * 4er-Box Startseite
 */
.quad-image {
  padding-right: 0.25em;
}
@media screen and (max-width: 500px) {
  .quad-image .grid__item {
    width: 50%;
  }
}
.quad-image .grid__inner {
  margin: 0 0.75em;
}

/**
 * Vorteile: Reversed grid
 */
.foo > div > .grid {
  direction: rtl;
  text-align: left;
}
.foo > div > .grid > .grid__item {
  direction: ltr;
  text-align: left;
}

.no-overflow .media__body {
  overflow: visible;
}

.no-overflow .media {
  margin-left: 0 !important;
}

.no-overflow .media__text {
  text-align: justify;
}

/* Kundenwunsch: 3te Spalte im Footer */
.girl-drinking {
  margin-bottom: 1.5em;
}
@media screen and (min-width: 900px) {
  .girl-drinking {
    margin-bottom: auto;
    margin-top: 1.5em;
  }
}

/* ==========================================================================
   Kundenwuensche
   ========================================================================== */
/**
 * Damit "Verschönerungen" schnell wieder entfernt werden können.
 * z.B. für unsere Referenzen
 */
/**
 * kundenwuensche.scss
 *
 * Author: Johannes Rückert, ideenfrische®
 *
 * Damit "Verschönerungen" schnell wieder entfernt werden können.
 * z.B. für unsere Referenzen
 * (Kunden-Quotes direkt aus Basecamp)
 */
/**
 * Kalkulator
 * 1. "benötigte Menge", bitte in weis und etwas größer
 * 2. "kann der Balken mit dem Ergebnis mehr in die Mitte gesetzt werden?"
 */
.amount_needed h2 {
  color: #fff;
  font-size: 2em;
}

@media screen and (min-width: 1024px) {
  .amount_needed .grid__inner {
    padding-top: 6em;
  }
}

/* ==========================================================================
   Dev Tools
   ========================================================================== */
/**
 * Debugging features & Baseline Grid
 *
 * Können in global/defaults aktiviert (auf true gesetzt) werden.
 */
/**
 * dev.scss
 * 
 * Author: Marian Friedmann, ideenfrische®
 * 
 * Debugging features & Baseline Grid
 * 
 * Können in global/defaults aktiviert (auf true gesetzt) werden.
 */