@charset "UTF-8";

/*!
  core – 0.0.4
  basic styles and helper classes
  inspired by http://www.basscss.com
*/

/*!
  theme – opinionated styling -------------------------------------
*/
.blau           { color: var(--blau) }
.blau-medium    { color: var(--blau-medium) }
.blau-light     { color: var(--blau-light) }
.grau-dark      { color: var(--grau-dark) }
.grau-medium    { color: var(--grau-medium) }
.grau           { color: var(--grau) }
.rot            { color: var(--rot) }
.text-color     { color: var(--text-color) }

.bg-blau        { background-color: var(--blau) }
.bg-blau-medium { background-color: var(--blau-medium) }
.bg-blau-light  { background-color: var(--blau-light) }
.bg-grau-dark   { background-color: var(--grau-dark) }
.bg-grau-medium { background-color: var(--grau-medium) }
.bg-grau        { background-color: var(--grau) }
.bg-grau-ultra  { background-color: var(--grau-ultra) }
.bg-rot         { background-color: var(--rot) }

body, button, html {
  -moz-osx-font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased
}

/*!
  typography ------------------------------------------------------
*/
html {
  font-size: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* font weights */
.sparkasse-lt { font-weight: 100 }
.sparkasse-rg { font-weight: 400 }
.sparkasse-md { font-weight: 600 }

/* serif font */
.serif {
  font-family: Sparkasse Serif Web, Georgia, Times New Roman, Times, serif
}

/* basic font-size and line-height via body */
body {
  font-family: Sparkasse Web, Helvetica Neue, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 100;
  line-height: 24px;
  color: var(--text-color)
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 100
}

.subline {
  font-size: 24px;
  line-height: 32px
}

h4 .subline, h5 {
  margin-top: 8px;
  margin-bottom: 8px
}

h5 {
  font-size: 16px;
  line-height: 24px
}

h6 {
  font-size: 12px;
  line-height: 16px;
  margin-bottom: 8px
}

dl, h6, ol, p, ul {
  margin-top: 8px
}

dl, ol, p, ul {
  font-size: 18px;
  margin-bottom: 16px
}

.bold, b, strong {
  font-weight: 400
}

blockquote {
  margin-top: 24px;
  margin-bottom: 24px;
  margin-left: 0;
  padding-left: 16px;
  padding-right: 16px
}

blockquote, blockquote p {
  font-size: 24px
}

hr {
  border: 0;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: rgba(0, 0, 0, .5)
}

.list-reset {
  list-style: none;
  padding-left: 0
}

.caps {
  letter-spacing: .06em
}

.textshadow {
  text-shadow: rgba(0, 0, 0, .2) 4px 4px 8px, rgba(0, 0, 0, .25) 2px 2px 4px
}

h1, h2, h3 {
  color: var(--grau-dark)
}

.top-headline-xl, h1 {
  font-size: 32px;
  line-height: 40px;
  margin-bottom: 24px;
  margin-top: 32px
}

.top-headline, h2 {
  font-size: 24px;
  margin-top: 24px
}

.top-headline, h2, h3 {
  line-height: 32px;
  margin-bottom: 16px
}

h3 {
  font-weight: 400;
  font-size: 22px;
  margin-top: 16px
}

@media only screen and (min-width:1024px) {
  .top-headline-xl {
    font-size: 48px;
    line-height: 56px;
    margin-bottom: 32px
  }

  h1 {
    font-size: 40px;
    line-height: 48px;
    margin-bottom: 32px
  }

  .top-headline, h2 {
    font-size: 25px;
    line-height: 32px;
    margin-bottom: 24px
  }

  h3 {
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 16px
  }
}

@media only screen and (min-width:1200px) {
  .top-headline-xl {
    font-size: 64px;
    line-height: 72px;
    margin-bottom: 32px
  }

  h1 {
    font-size: 48px;
    line-height: 56px;
    margin-bottom: 32px
  }

  .top-headline, h2 {
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 32px
  }

  h3 {
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 16px
  }
}

/*!
  system-colors ---------------------------------------------------
*/
.black      { color: var(--black) }
.darkgray   { color: #60635c }
.midgray    { color: #8e928a }
.lightgray  { color: #e7e8e6 }
.light      { color: rgba(225, 229, 232, .4) }
.white      { color: var(--white) }
.text       { color: var(--text-color) }

.darken-1   { color: rgba(0, 0, 0, .25) }
.darken-2   { color: rgba(0, 0, 0, .5) }
.darken-3   { color: rgba(0, 0, 0, .75) }
.lighten-1  { color: hsla(0, 0%, 100%, .1) }
.lighten-2  { color: hsla(0, 0%, 100%, .2) }
.lighten-3  { color: hsla(0, 0%, 100%, .4) }
.transparent { color: transparent }

.bg-black     { background-color: var(--black) }
.bg-darkgray  { background-color: #60635c }
.bg-midgray   { background-color: #8e928a }
.bg-lightgray { background-color: #e7e8e6 }
.bg-light {
    background-color: rgb(241, 241, 241);
}.bg-white     { background-color: var(--white) }

.bg-darken-1  { background-color: rgba(0, 0, 0, .25) }
.bg-darken-2  { background-color: rgba(0, 0, 0, .5) }
.bg-darken-3  { background-color: rgba(0, 0, 0, .75) }
.bg-lighten-1 { background-color: hsla(0, 0%, 100%, .1) }
.bg-lighten-2 { background-color: hsla(0, 0%, 100%, .2) }
.bg-lighten-3 { background-color: hsla(0, 0%, 100%, .4) }
.bg-transparent { background-color: transparent }

.mute20 { opacity: .2 }
.mute50 { opacity: .5 }
.mute70 { opacity: .7 }

/*!
  flexbox ----------------------------------------------------------
*/
.flex          { display: flex }
.flex-column   { flex-direction: column }
.flex-wrap     { flex-wrap: wrap }
.flex-center   { align-items: center }
.flex-baseline { align-items: baseline }
.flex-stretch  { align-items: stretch }
.flex-start    { align-items: flex-start }
.flex-end      { align-items: flex-end }
.flex-justify  { justify-content: space-between }
.flex-first     { order: -1 }
.flex-last     { order: 1024 }
.flex-auto     { flex: 1 1 auto }
.flex-grow     { flex: 1 0 auto }
.flex-none     { flex: none }

@media only screen and (min-width:640px) {
  .sm-flex { display: flex }
}

@media only screen and (min-width:1024px) {
  .md-flex { display: flex }
}

@media only screen and (min-width:1200px) {
  .lg-flex { display: flex }
}

/*!
  grid ------------------------------------------------------------
*/
.grid {
  display: flex;
  flex-wrap: wrap
}

.gap {
  margin-bottom: 16px;
  margin-left: -16px
}

.gap [class^=lg-], .gap [class^=md-], .gap [class^=sm-] {
  padding-left: 16px;
  padding-right: 16px
}

.sm {
  flex-grow: 1;
  flex-basis: 0;
  max-width: 100%
}

.sm-10  { flex-basis: 10% }
.sm-20  { flex-basis: 20% }
.sm-25  { flex-basis: 25% }
.sm-30  { flex-basis: 30% }
.sm-33  { flex-basis: calc(100% / 3) }
.sm-40  { flex-basis: 40% }
.sm-50  { flex-basis: 50% }
.sm-60  { flex-basis: 60% }
.sm-66  { flex-basis: calc(100% / 3 * 2) }
.sm-70  { flex-basis: 70% }
.sm-75  { flex-basis: 75% }
.sm-80  { flex-basis: 80% }
.sm-90  { flex-basis: 90% }
.sm-100 { flex-basis: 100% }

@media only screen and (min-width:1024px) {
  .md {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%
  }

  .md-10  { flex-basis: 10% }
  .md-20  { flex-basis: 20% }
  .md-25  { flex-basis: 25% }
  .md-30  { flex-basis: 30% }
  .md-33  { flex-basis: calc(100% / 3) }
  .md-40  { flex-basis: 40% }
  .md-50  { flex-basis: 50% }
  .md-60  { flex-basis: 60% }
  .md-66  { flex-basis: calc(100% / 3 * 2) }
  .md-70  { flex-basis: 70% }
  .md-75  { flex-basis: 75% }
  .md-80  { flex-basis: 80% }
  .md-90  { flex-basis: 90% }
  .md-100 { flex-basis: 100% }
}

@media only screen and (min-width:1200px) {
  .lg {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%
  }

  .lg-10  { flex-basis: 10% }
  .lg-20  { flex-basis: 20% }
  .lg-25  { flex-basis: 25% }
  .lg-30  { flex-basis: 30% }
  .lg-33  { flex-basis: calc(100% / 3) }
  .lg-40  { flex-basis: 40% }
  .lg-50  { flex-basis: 50% }
  .lg-60  { flex-basis: 60% }
  .lg-66  { flex-basis: calc(100% / 3 * 2) }
  .lg-70  { flex-basis: 70% }
  .lg-75  { flex-basis: 75% }
  .lg-80  { flex-basis: 80% }
  .lg-90  { flex-basis: 90% }
  .lg-100 { flex-basis: 100% }
}

/*!
  utilities -------------------------------------------------------
*/
.clearfix:after, .clearfix:before {
  content: " ";
  display: table
}

.clearfix:after {
  clear: both
}

.fit {
  position: absolute;
  width: auto;
  height: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0
}

.fit-fill      { object-fit: fill }
.fit-contain  { object-fit: contain }
.fit-cover    { object-fit: cover }
.fit-none     { object-fit: none }
.fit-scale    { object-fit: scale-down }

img[class^=fit-] { width: 100% }
.rounded        { border-radius: 2px }
.rounded-left   { border-radius: 2px 0 0 2px }
.rounded-right  { border-radius: 0 2px 2px 0 }

.list-reset {
  list-style: none;
  margin-left: 0
}

.center { text-align: center }

/*!
  form-reset ------------------------------------------------------
*/
.form {
  display: flex;
  flex-wrap: wrap
}

.form-colored {
  padding: 32px;
  padding-top: 24px
}

.form .button {
  margin-top: 16px
}

fieldset, input, select, textarea {
  font-size: 16px;
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 0;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week] {
  box-sizing: border-box;
  height: 40px;
  padding-top: 1px;
  padding-left: 8px;
  padding-right: 8px;
  vertical-align: middle;
}

select {
  line-height: 1.75;
  padding: 1px 8px;
  border-radius: 0;
}

select:not([multiple]) {
  height: 40px;
  vertical-align: middle
}

textarea {
  line-height: 1.75;
  padding: 1px 8px
}

input[type='checkbox'],
input[type='radio'] {
  width: auto;
  float: left;
  margin-right: 8px;
  background:transparent;
  border:none;
}

input[type='checkbox']:checked,
input[type='checkbox']:not(:checked),
input[type='radio']:checked,
input[type='radio']:not(:checked) {
  background: transparent;
  position: relative;
  visibility: hidden;
}

input[type='checkbox'] + label,
input[type='radio'] + label {
  cursor: pointer;
}

.fieldset-reset {
  padding: 0;
  margin-left: 0;
  margin-right: 0;
  border: 0
}

.fieldset-reset legend {
  padding: 0
}

/*!
  global link reset
*/
a, a:active, a:focus, a:hover, a:link {
  text-decoration: none;
  cursor: pointer
}

/*!
  space -----------------------------------------------------------
  by basscss https://github.com/basscss/utility-white-space.git
*/
.p1  { padding: 8px }
.py1 { padding-top: 8px; padding-bottom: 8px }
.px1 { padding-left: 8px; padding-right: 8px }
.p2  { padding: 16px }
.py2 { padding-top: 16px; padding-bottom: 16px }
.px2 { padding-left: 16px; padding-right: 16px }
.p3  { padding: 24px }
.py3 { padding-top: 24px; padding-bottom: 24px }
.px3 { padding-left: 24px; padding-right: 24px }
.p4  { padding: 32px }
.py4 { padding-top: 32px; padding-bottom: 32px }
.px4 { padding-left: 32px; padding-right: 32px }
.p5  { padding: 40px }
.py5 { padding-top: 40px; padding-bottom: 40px }
.px5 { padding-left: 40px; padding-right: 40px }
.p6  { padding: 48px }
.py6 { padding-top: 48px; padding-bottom: 48px }
.px6 { padding-left: 48px; padding-right: 48px }

.m1  { margin: 8px }
.mt1 { margin-top: 8px }
.mr1 { margin-right: 8px }
.mb1 { margin-bottom: 8px }
.ml1 { margin-left: 8px }
.m2  { margin: 16px }
.mt2 { margin-top: 16px }
.mr2 { margin-right: 16px }
.mb2 { margin-bottom: 16px }
.ml2 { margin-left: 16px }
.m3  { margin: 24px }
.mt3 { margin-top: 24px }
.mr3 { margin-right: 24px }
.mb3 { margin-bottom: 24px }
.ml3 { margin-left: 24px }
.m4  { margin: 32px }
.mt4 { margin-top: 32px }
.mr4 { margin-right: 32px }
.mb4 { margin-bottom: 32px }
.ml4 { margin-left: 32px }
.m5  { margin: 40px }
.mt5 { margin-top: 40px }
.mr5 { margin-right: 40px }
.mb5 { margin-bottom: 40px }
.ml5 { margin-left: 40px }
.m6  { margin: 48px }
.mt6 { margin-top: 48px }
.mr6 { margin-right: 48px }
.mb6 { margin-bottom: 48px }
.ml6 { margin-left: 48px }

/*!
  dimensions ------------------------------------------------------
  basic width and height classes
*/
.w10  { max-width: 10%; width: 10% }
.w15  { max-width: 15%; width: 15% }
.w20  { max-width: 20%; width: 20% }
.w25  { max-width: 25%; width: 25% }
.w33  { max-width: 33.333334%; width: 33.333334% }
.w40  { max-width: 40%; width: 40% }
.w50  { max-width: 50%; width: 50% }
.w60  { max-width: 60%; width: 60% }
.w66  { max-width: 66.666667%; width: 66.666667% }
.w75  { max-width: 75%; width: 75% }
.w80  { max-width: 80%; width: 80% }
.w100 { max-width: 100%; width: 100% }

.fix-w10 { width: 80px }
.fix-w20 { width: 160px }
.fix-w30 { width: 240px }
.fix-w40 { width: 320px }
.fix-w50 { width: 400px }
.fix-w60 { width: 480px }

.h10 { height: 80px }
.h15 { height: 120px }
.h20 { height: 160px }
.h25 { height: 200px }
.h30 { height: 240px }
.h35 { height: 280px }
.h40 { height: 320px }
.h45 { height: 360px }
.h50 { height: 400px }
.h55 { height: 440px }
.h60 { height: 480px }
.h65 { height: 520px }
.h70 { height: 560px }
.h75 { height: 600px }
.h80 { height: 640px }
.h85 { height: 680px }
.h90 { height: 720px }
.h95 { height: 760px }