:root {
    --text-padding: 2rem;
    --content-padding: 0.938rem;

    --zaz-yellow: #FFD700;/*Logo-Gelb*/

    --white: #ffffff;/*nicht genutzt*/
    --zaz-white: #fbfbfb;
    --zaz-light: #f7f7f7;
    --zaz-schwarz: #111;
    --zaz-text-color: #333;

    --zaz-orange-dark: #FF9404;
    --zaz-orange: #F3B562;
    --zaz-orange-light: #F9DAB0;
    --zaz-orange-white: #FCECD7;
    --zaz-rot: #F06060;/*nicht genutzt*/
    --zaz-rot-light: #F7AFAF;/*nicht genutzt*/
    --zaz-gruen: #8CBEB2;
    --zaz-gruen-light: #C5DED8;
    --zaz-gruen-white: #E2EEEB;
    --zaz-violett: #5C4B51;
    --zaz-violett-light: #ADA5A8;
    --zaz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25), 0 3px 10px 0 rgba(0, 0, 0, 0.23);
}

/*
#5C4B51 Dunkelviolett
#8CBEB2 Grün
#F2EBBF Gelb
#F3B562 Orange
#F06060 Rot
*/

/* ----------------- Schrift ----------------- */

@font-face {
    font-family: Noteworthy;
    src: url(../fonts/Noteworthy-Light.ttf);}

h1, h2, h3, h4, h5, h6 {
    font-family: Noteworthy, sans-serif;
    text-transform: none !important;
    font-weight: bold;}


/* ----------------- Body ----------------- */

body, #sb-site {
    background-color: var(--zaz-orange-white) !important;
    color: var(--zaz-text-color);}

.even {
    padding: var(--text-padding) var(--content-padding);
    padding-top: var(--text-padding);
    padding-bottom: 0;
    overflow: hidden;
    clear: both;
    position: relative;
    text-transform: none !important;
    box-shadow: var(--zaz-box-shadow);}

.uneven {
    background: var(--zaz-white);
    padding: var(--text-padding) var(--content-padding);
    padding-top: var(--text-padding);
    padding-bottom: 0;
    overflow: hidden;
    clear: both;
    position: relative;
    text-transform: none !important;
    box-shadow: inset var(--zaz-box-shadow);}

.narrow {
    width: 50%;
    margin: 0 auto;
    text-align: justify;}


/* ----------------- ZaZ ----------------- */

.blog-header.blog-header-image h1, .blog-header.blog-header-image h2 {
    text-shadow: 1px 1px 2px var(--zaz-violett), 0 0 1em var(--zaz-violett);}


/* ----- Kontakt ----- */

.zaz-even-kontakt {
    color: var(--zaz-violett);
    background-color: var(--zaz-gruen-white);}

.zaz-even-kontakt h2 {
    color: var(--zaz-violett);}

.zaz-even-kontakt a {
    color: var(--zaz-violett) !important;
    text-decoration: underline;}

.zaz-even-kontakt a {
    color: var(--zaz-orange);}

.zaz-uneven-kontakt {
    color: var(--zaz-violett);}

.zaz-uneven-kontakt h2 {
    color: var(--zaz-violett);}


/* ----- Wohnen ----- */

.zaz-even-wohnen {
    color: var(--zaz-violett);
    background-color: var(--zaz-orange-white);}

.zaz-even-wohnen h2 {
    color: var(--zaz-violett);}

.zaz-uneven-wohnen {
    color: var(--zaz-violett);}

.zaz-uneven-wohnen h2 {
    color: var(--zaz-violett);}


/* ----- Angebot ----- */

.zaz-uneven-angebot {
    color: var(--zaz-violett);
    background-color: var(--zaz-white);}

.zaz-uneven-angebot h2 {
    color: var(--zaz-violett);}

.zaz-even-angebot {
    color: var(--zaz-violett);
    background-color: var(--zaz-gruen-light);}

.zaz-even-angebot h2 {
    color: var(--zaz-violett);}
    

/* ----- About ----- */

.zaz-animals-about {
    background-color: var(--zaz-orange-light);
    color: var(--zaz-violett);}

.zaz-animals-about h2 {
    color: var(--zaz-violett);}

.zaz-even-about {
    color: var(--zaz-violett);}

.zaz-even-about h2 {
    color: var(--zaz-violett);}

.zaz-uneven-about {
    color: var(--zaz-violett);
    background-color: var(--zaz-white);}

.zaz-uneven-about h2 {
    color: var(--zaz-violett);}

.zaz-team-about {
    background-color: var(--zaz-orange-light);
    color: var(--zaz-violett);}

.zaz-team-about h2 {
    color: var(--zaz-violett);}

.zaz-team {
    text-align: center;}

.zaz-team h2 {
    width: 50%;
    margin: 0.85rem auto 1.7rem auto;
    text-align: justify;
    text-align: left;}

.zaz-team h4 {
    color: var(--zaz-violett);
    font-size: 1.33rem;}

.zaz-team h5 {
    color: var(--zaz-violett);
    font-family: "Helvetica Neue", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 1.25rem;}

.about hr {
    border-bottom: 1px solid var(--zaz-violett-light);}

.zaz-team .zaz-animals {
    width: 60%;
    text-align: center;
    /*position:relative;*/
    display: inline-block;
    float:center;
    padding-top: 2rem;}

.zaz-team .zaz-animals .zaz-animal {
      display: inline-block;
      float: left;
      width: 30%;
      margin: 0 1rem;
      margin-bottom: 2rem;}

@media only all and (max-width: 47.938em) {
.zaz-team .zaz-animals .zaz-animal {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0;
    margin-bottom: 2rem; }}

@media only all and (min-width: 48em) and (max-width: 59.938em) {
.zaz-team .zaz-animals .zaz-animal {
    display: block;
    width: 44%;
    margin-bottom: 2rem; }}

.zaz-rounded {
    border-radius: 50%;
    box-shadow: var(--zaz-box-shadow);}


/* ----- Stellenangebote -----*/

.zaz-even-stellen {
    color: var(--zaz-violett);}

.zaz-even-stellen h2 {
    color: var(--zaz-violett);}

.zaz-even-stellen a {
    color: var(--zaz-gruen);
    text-decoration: underline;
    font-weight: bold;}

.zaz-stellen-stellen {
    color: var(--zaz-violett);
    background-color: var(--zaz-orange-light);}

.zaz-stellen-stellen h2 {
    color: var(--zaz-violett);}

.zaz-stellenangebote {
    text-align: center;}

.zaz-stellenangebote h2 {
    width: 50%;
    margin: 0.85rem auto 1.7rem auto;
    text-align: left;}

.zaz-stellenangebote h4 {
    color: var(--zaz-schwarz);}

.zaz-stellenangebote h6 {
    font-family: "Helvetica Neue", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 1rem;
    line-height: 1.7;}

.zaz-stellenangebote .zaz-stellen {
    width: 100%;
    text-align: center;
    /*position:relative;*/
    display: inline-block;
    float:center;
    padding: 2rem;}

.zaz-stellenangebote .zaz-stellen .zaz-stelle {
      display: inline-block;
      float: center;
      text-align: left;
      width: 50%;
      margin: 0 1rem;
      margin-bottom: 2rem;
      padding: 1rem;
      background-color: var(--zaz-light);
      box-shadow: var(--zaz-box-shadow);}

@media only all and (max-width: 47.938em) {
.zaz-stellenangebote .zaz-stellen .zaz-stelle {
    display: block;
    width: 100%;
    text-align: left;
    margin: 0;
    margin-bottom: 2rem; }}

@media only all and (min-width: 48em) and (max-width: 59.938em) {
.zaz-stellenangebote .zaz-stellen .zaz-stelle {
    display: block;
    width: 44%;
    margin-bottom: 2rem; }}


/* ----- Impressum ----- */

.zaz-impressum h2, 
.zaz-impressum h3, 
.zaz-impressum h4, 
.zaz-impressum h5, 
.zaz-impressum h6 {
    text-align: left;
    color: var(--zaz-schwarz);}

.zaz-impressum h3,
.zaz-impressum h4, 
.zaz-impressum h5, 
.zaz-impressum h6 {
    font-family: "Helvetica Neue", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, "Lucida Grande", sans-serif;}

.zaz-impressum a {
    color: var(--zaz-text-color) !important;
    text-decoration: underline;}

/* ----------------- Header ----------------- */

.logo {
    border-bottom: none;}

.logo h3 {
    font-family: Noteworthy, sans-serif;}

#body {
    padding-top: 26rem;}

#header #navbar ul.navigation li a.active, #header #navbar ul.navigation li a:hover {
    color: var(--zaz-dark);}

.modular.header-image #header #navbar a:active {
    color: var(--zaz-violett);}

.modular.header-image #header #navbar a {
    color: var(--zaz-violett);}

.header-lite #header li.active a {
    color: var(--zaz-violett);}

.header-lite #header li a {
    color: var(--zaz-violett-light);}

.zaz-logo {
    position: relative;
    display: flex;
    justify-content: right;}

.header-image #body .flush-top {
    margin-top: -15.5rem;/*-3rem; /*-23.25rem; /*-15.5rem;*/
    padding-top: 16rem;/*23rem; /*16rem;*/}

.modular.header-image #header {
    background-color: var(--zaz-orange-white);
    box-shadow: var(--zaz-box-shadow);}

.header-lite #header {
    color: #656161;
    box-shadow: var(--zaz-box-shadow);}

.modular .slideme_container .pagination {
    bottom: 5%;}

.modular .slideme_container {
    margin-top: -15rem;/*-22.5rem; /*-15rem;*/
    padding-top: 15rem;/*22.5rem; /*15rem;*/
    height: 34.7rem;/*65rem; /*34.7rem;*/
    background-color: var(--zaz-violett) !important;
    box-shadow: var(--zaz-box-shadow);}

.modular .showcase {
    padding-bottom: 15rem; /*10rem;*/}

.modular .showcase h2 {
    color: var(--zaz-white);
    text-shadow: 1px 1px 2px var(--zaz-violett), 0 0 2em var(--zaz-violett);}

.modular .showcase h1 {
    text-shadow: 1px 1px 2px var(--zaz-violett), 0 0 2em var(--zaz-violett);}

.modular .showcase h1 strong {
    color: var(--zaz-yellow);}

.modular .showcase .button {
    text-shadow: 1px 1px 2px var(--zaz-violett), 0 0 2em var(--zaz-violett);}

#header #navbar ul.navigation li a {
    font-family: Noteworthy, sans-serif;
    text-transform: none !important;
    font-weight: bold;}

/* --------- Footer --------- */

.footer {
    background-color: var(--zaz-violett);
    color: var(--zaz-orange-white);}

.footer .logo h3 a {
    color: var(--zaz-orange-white);}

.footer h4 {
    color: var(--zaz-orange-white);}

.footer a {
    color: var(--zaz-orange-white);}

.footer hr {
    border-color: var(--zaz-orange-white);}

.footer .quickmenu i {
    color: var(--zaz-orange-white);}

.footer .footer-menu {
    text-transform: none;
    font-family: Noteworthy, sans-serif;}