/* Variablen - Farbcodes */
/* Variablen - Schriften */
.quadrate .bildbox {
  width: 100%;
  padding-top: 100%;
  background-size: cover;
  background-position: center center;
  position: relative; }
  @media (min-width: 768px) {
    .quadrate .bildbox {
      padding-top: 50%; } }
.quadrate .farbbox {
  width: 100%;
  padding-top: 100%; }
  @media (min-width: 768px) {
    .quadrate .farbbox {
      padding-top: 50%; } }
  .quadrate .farbbox.dunkel {
    background-color: #00828f;
    color: #fff; }
  .quadrate .farbbox.hell {
    background-color: #eae5db;
    color: #000; }
  .quadrate .farbbox .inner {
    position: absolute;
    width: 100%;
    display: table;
    top: 0;
    height: 100%;
    left: 0;
    right: 0;
    bottom: 0; }
    .quadrate .farbbox .inner .text {
      display: table-cell;
      height: 100%;
      width: 100%;
      vertical-align: middle;
      text-align: center; }
  .quadrate .farbbox h2 {
    font-size: 80px;
    font-family: "Caveat Brush", cursive;
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.75); }
    @media (min-width: 1200px) {
      .quadrate .farbbox h2 {
        font-size: 90px; } }
  .quadrate .farbbox .subheadline, .quadrate .farbbox .preheadline {
    font-size: 25px;
    font-weight: 300;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75); }
    @media (min-width: 1200px) {
      .quadrate .farbbox .subheadline, .quadrate .farbbox .preheadline {
        font-size: 30px; } }
  .quadrate .farbbox .preheadline {
    margin-bottom: -15px; }
  .quadrate .farbbox .social {
    text-align: center;
    width: 100%; }
    .quadrate .farbbox .social a {
      width: 45px;
      height: 45px;
      background-size: cover;
      display: inline-block;
      margin: 8px; }
      .quadrate .farbbox .social a:hover {
        opacity: 0.7; }
    .quadrate .farbbox .social .insta {
      background-image: url(../../../img/icon-instagram.png); }
    .quadrate .farbbox .social .fb {
      background-image: url(../../../img/icon-facebook.png); }
.quadrate .textbox .inner {
  padding: 30px; }
  @media (min-width: 992px) {
    .quadrate .textbox .inner {
      padding: 100px; } }
  .quadrate .textbox .inner .text {
    text-align: left; }
    .quadrate .textbox .inner .text h3 {
      font-family: "Kalam", cursive; }

/*# sourceMappingURL=quadrate.css.map */