@charset "UTF-8";
/**
 * Capitan tooltip.scss v1.0.0
 *
 * Copyright brandung GmbH & Co.KG
 * http://www.brandung.de/
 *
 * Date: 2016-04-12
 * MIT License (MIT)
 */
/**
 * Capitan functions.scss v2.0.0
 *
 * Copyright brandung GmbH & Co.KG
 * http://www.brandung.de/
 *
 * Date: 2014-09-23
 * MIT License (MIT)
 */
/* ==========================================================================
   Global functions
   ========================================================================== */
/**
 * Calculate PX to EM
 *
 * @param {number} $targetPx - pixel value without unit
 *
 */
/**
 * Built a JSON like string with all given breakpoints and their values.
 * This is necessary for the JavaScript function 'function/get-breakpoint.js'
 * and 'function/assert-breakpoint.js'
 */
/**
 * Return specific breakpoint
 */
/**
 * Return specific color
 */
/**
 * Return specific Icon
 */
/**
 * Capitan variables.scss v3.0.0
 *
 * Copyright brandung GmbH & Co.KG
 * http://www.brandung.de/
 *
 * Date: 2015-06-27
 * MIT License (MIT)
 */
/* ==========================================================================
   Base settings
   ========================================================================== */
/* base path */
/* Base sizes */
/* Body font size */
/* Font Style */
/* ==========================================================================
   Grid-System
   ========================================================================== */
/* <@breakpoints */
/* breakpoints@> */
/* ==========================================================================
   Colors
   ========================================================================== */
/* <@colors */
/* colors@> */
/* ==========================================================================
   Icons
   ========================================================================== */
/* <@icons */
/* icons@> */
/**
 * Capitan mixins.scss v2.0.1
 *
 * Copyright brandung GmbH & Co.KG
 * http://www.brandung.de/
 *
 * Date: 2014-09-23
 * MIT License (MIT)
 */
/* ==========================================================================
   Global mixins
   ========================================================================== */
/**
 * Calculate percent value to given property
 *
 * @param {string} $cssProperty - which property
 * @param {number} $targetSize - element size in pixel
 * @param {number} $contextSize - context element size in pixel
 * @param {boolean} $important - set !important property
 *
 */
/**
 * Calculate PX font size to REM
 *
 * @param {number} $size - element size in pixel
 * @param {number} $base - body font size in pixel
 *
 */
/**
 * Calculates given px value to rem value
 *
 * @param {string} $prop - css property name, e.g. font-size, line-height; Default: 'font-size'
 * @param {number} $size - size in px; Default: $body-font-size-px
 *
 */
/**
* Mixin for adding vendor prefixes to CSS attributes; useful for the following CSS attributes
*
* - border-radius
* - box-shadow
* - transition
* - transform
* - background-size
* - box-sizing
* - animate
*
* @param {string} $attribute - CSS attribute that needs vendor prefixes, e.g. border-radius or transition
* @param {string} $value - The specific CSS value, e.g. "translateX .2s ease-out"
*/
/**
* Clearfix
*/
/**
 * Webfont mixin for global use
 *
 * @param {string} $family - set the font-family value
 * @param {string} $fontWeight - set the font-weight value
 * @param {string} $fontStyle - set the font-style value
 */
/**
* Mixin for adding hover transition
*
* @param {string} $colorFX - properties for color transition
* @param {string} $hoverColor - hover color
* @param {string} $backgroundFX - properties for backgrounf transition
* @param {string} $hoverBackground - hover background color
*/
/**
 * Mixin for defining values at an specific mediaQuerie
 *
 * @param {string} $width - breakpoint from $breakpoints map
 */
.tooltip {
  display: inline-block;
  position: relative; }

.tooltip--right {
  position: absolute;
  z-index: 2;
  right: 0; }
  @media screen and (min-width: 48em) {
    .tooltip--right {
      right: 30px; } }

.tooltip--left {
  position: absolute;
  left: 0; }
  @media screen and (min-width: 48em) {
    .tooltip--left {
      left: 30px; } }

.tooltip__trigger {
  display: block;
  height: 20px;
  width: 20px;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  background: none;
  border: none;
  text-indent: -99999px; }
  .tooltip__trigger:focus {
    outline: none; }
  .tooltip__trigger:hover {
    cursor: pointer; }
  .tooltip__trigger:after {
    font-size: 20px;
    font-size: 1.25rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    visibility: visible;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    border-radius: 50%;
    color: #0a3377;
    font-family: iconfont;
    content: "";
    text-indent: 0; }

.tooltip__flyout {
  font-size: 14px;
  font-size: 0.875rem;
  position: relative;
  display: none;
  width: 100%;
  padding: 10px 15px;
  margin: 15px 0;
  background: #e4e9f1;
  border: 1px solid #b2bdc6;
  border-radius: 5px;
  color: #0a3377; }
  @media screen and (min-width: 62em) {
    .tooltip__flyout {
      border: none;
      position: absolute;
      z-index: 100;
      top: -23px;
      left: 70px;
      display: none;
      width: 277px;
      margin: 0; } }
  .tooltip__flyout.is-visible {
    display: block; }
  .tooltip__flyout:after, .tooltip__flyout:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 15px 15px 15px;
    display: block;
    width: 0; }
    @media screen and (min-width: 62em) {
      .tooltip__flyout:after, .tooltip__flyout:before {
        border-width: 15px 15px 15px 0; } }
  .tooltip__flyout:after {
    border-color: #e4e9f1 transparent;
    z-index: 1;
    top: -14px;
    left: 50%;
    transform: translateX(-50%); }
    @media screen and (min-width: 62em) {
      .tooltip__flyout:after {
        border-color: transparent #e4e9f1;
        left: -15px;
        top: 18px;
        transform: translateX(0); } }
  .tooltip__flyout:before {
    border-color: #b2bdc6 transparent;
    z-index: 0;
    top: -15px;
    left: 50%;
    transform: translateX(-50%); }
    @media screen and (min-width: 62em) {
      .tooltip__flyout:before {
        border-color: transparent #fff;
        left: -16px;
        top: 18px;
        transform: translateX(0); } }
  .tooltip__flyout ul {
    padding: 0 0 0 16px;
    margin: 0 0 15px 0; }
  .tooltip__flyout p {
    margin: 0 0 15px 0; }
  .tooltip__flyout > *:last-child {
    margin: 0; }
  @media screen and (min-width: 62em) {
    .tooltip__flyout.tooltip__flyout--two-cols {
      position: relative;
      width: 100%;
      margin: 15px 0;
      background: #e4e9f1;
      border: 1px solid #b2bdc6;
      border-radius: 5px;
      left: 0;
      top: 0; } }
  @media screen and (min-width: 62em) {
    .tooltip__flyout.tooltip__flyout--two-cols:after, .tooltip__flyout.tooltip__flyout--two-cols:before {
      border-width: 0 15px 15px 15px; } }
  @media screen and (min-width: 62em) {
    .tooltip__flyout.tooltip__flyout--two-cols:after {
      border-color: #e4e9f1 transparent;
      top: -14px;
      left: 50%;
      transform: translateX(-50%); } }
  @media screen and (min-width: 62em) {
    .tooltip__flyout.tooltip__flyout--two-cols:before {
      border-color: #b2bdc6 transparent;
      top: -15px;
      left: 50%;
      transform: translateX(-50%); } }

.tooltip__flyout-button {
  position: absolute;
  top: 8px;
  right: 8px;
  display: block;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  text-align: center;
  background: #0a3377;
  color: #fff;
  border: none; }
  .tooltip__flyout-button:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-size: 0.75rem; }
  .tooltip__flyout-button:focus {
    outline: none; }

.tooltip__heading {
  font-size: 16px;
  font-size: 1rem;
  line-height: 22px;
  margin: 0 0 12px 0;
  padding-right: 20px; }

.form__headline--tooltip {
  padding-right: 50px; }
  .form__headline--tooltip .tooltip {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 11; }

.form--personal-data .tooltip {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%); }
  @media screen and (min-width: 48em) {
    .form--personal-data .tooltip {
      right: -30px; } }
  @media screen and (min-width: 62em) {
    .form--personal-data .tooltip .tooltip__flyout {
      width: 500px;
      margin: 0; } }

.form__section--inner .tooltip {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%); }
  @media screen and (min-width: 48em) {
    .form__section--inner .tooltip {
      right: -54.25%; } }
  @media screen and (min-width: 62em) {
    .form__section--inner .tooltip .tooltip__flyout {
      margin: 0; } }