@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600&family=Lato:ital,wght@0,100;0,300;0,400;0,700;1,100;1,300;1,400;1,700&family=Open+Sans&family=Kalam&display=swap');

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html {
    box-sizing: border-box;
    height: 100%;
}
body {
    background-color: #936; /*902040*/
    font-size: 1.3em;
    font-family: "open sans", sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
}
a:link, a:visited {
 text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 400;
    margin: 10px 0;
}
p {
    hyphens: auto;
}

/* Header image */
.header-image-kunst {
    background-image: url("../bilder/header-kunst.jpg");
    /* Set a specific height */
    height: 100%;
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
}
/* Place text in the middle of the image */
.header-text-kunst {
    color: #fff099;
    text-align: center;
    position: absolute;
    bottom: 3%;
    left: 50%;
    transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
}
.header-text-kunst h1 {
    font-size: 3em;
    letter-spacing: .03em;
}
.header-text-kunst h2 {
    font-size: 2.9em;
    letter-spacing: .06em;
    font-style: normal;
}
.kalam {
    font-family: Kalam;
}
.w3-animate-opacity{animation:opac 1.2s}@keyframes opac{from{opacity:0} to{opacity:1}}
/*Hauptinhalt*/
main {
    padding: 0;
    max-width: 90em;
    margin: 0 auto;
}
main > section {
/*    box-shadow: .1em .1em .5em #d06090;*/
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 25em;
    margin: 6em 4em 0 4em; /*6em 4em 0 4em*/
    border-radius: .75em;
    overflow: hidden;
}
main > section > div {
    padding: 2em 2em;
}
.a-zeile {
    flex-wrap: wrap;
}
.b-zeile {
    flex-wrap: wrap-reverse;
}
.block-1sp {
    width: 51%;
}
.block-2sp {
    flex: auto;
    min-width: 20em;
    width: 50%;
}
.block-2sp > h1 {
    text-align: center;
}
.block-1sp > h2, .block-2sp > h2 {
    margin-bottom: .5em;
    text-align: center;
}
.block-2sp > h4 { 
    font-size: 1.6em;
    margin-top: -.1em;
    text-align: center;
}
.block-2sp > p {
    line-height: 125%;
}
.block-3sp {
    flex:auto;
}
.box4-1, .box4-2, .box4-3, .box4-4 {
    flex: auto;
    width: 25%;
    padding: 1em;
    text-align: center;
}
.box4-1, .box4-3 {
    background-color: #a02060;
    color: #fff;
}
.box4-2, .box4-4 {
    background-color: #fff;
    color: #974970;
}
.warmblau h1, .warmblau h2, .warmblau h4 {
    color: #fe9;
}
.weiss h1, .weiss h2, .weiss h4 {
    color: #bb6688;
}
.block-2sp h1 {
    font-size: 2.3em;
}
h2 {
    font-size: 1.8em;
    font-style:  italic;
}
/*Farben*/
.farbe01 {
    background-color: #660022;
}
.farbe02 {
    background-color: #eaacbb;
}

/*.hellmint {
    background-color: #c0f0f0;
}
.warmblau {
    background-color: #30b0f0;
    color: white;
}*/
.bordeaux {
    background-color: #700000;
    color: white;
}
.bordeaus a {
    color: #fff099;
}
.weiss {
    background-color: #fff;
    /*color: #30b0f0;*/
    color: #936;
}

object {
    color: #fff;
    height: auto;
    width: 7em;
}

/*Tabellen*/
td {
    vertical-align: top;
}
/*Bilder: Porträt, Beratungsraum usw.*/
.bild {
    margin: 1em 0;
    width: 100%;
}
/*Footer*/
footer {
    /*background-color: #0080c0;*/
    color: #fff;
    margin-top: 5em;
    padding: 0.1em 2em;
    text-align: center;
    width: 100%;
}