/*
Theme Name: Treptow (BlankSlate Child)
Author: Corinna Smidt
Description: Schönes Webdesign
Template: blankslate
Version: 2.0
*/


/* 
xxx 1. Theme Default CSS / Allgemein
    1a. Allgemein
    1b. Allgemein Links und Schriften
    1c. Allgemein Bilder
    1d. Allgemein Buttons
    1e. Allgemein Klassen
  
xxx 2. FONTS
    2a. Work sans
    Nicht!! 2b. KG Mullally 
    1c. Allgemein Buttons 
    1d. Allgemein Klassen

xxx 3. Seitenaufbau  Allgemein
    3a. (Template) Intro Smartphone
    3b. Header
    3c. Seiteninhalt 
    3d. Footer

xxx 4. Navigation
   Nicht! 4a. (Template) Laufband 
    4b. Hauptnavigatio
    4c. Navigation responsive Hauptmenue (im script footer) 
   Nicht! 4d. (Template) fixed button (notfallnummern)
    4e. (Template) Navigation im Footer

xxx 5. Main-Area / Seiteninhalt
    5b. Startbild / (Headbildtext)
    5c. (Template) Drei Container (start)
    5d. Start Text
    5e. Start Aktuelles
    5f. Start Kontakt
    5g. Start Partner

xxx 6. Unterseiten Inhalt
    6a. Unterseite Workshops

xxx 7. Footer-Area
    7a. (Template) Footer extra
    
*/


/* ***  1. ALLGEMEIN  ******************************************* */
/* ************************************************************** */
/* ************************************************************** */

/* ***  1a. ALLGEMEIN  ******************************************* */

*{
    -webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	 box-sizing:        border-box;
}

html {
  box-sizing: border-box;
}

button, selectdiv, div, article, lable, details, section, summary, header, main, footer, aside, wrapper, nav, li, ul, form, input, table, span, tr, td, p, a, figure {
  
  font-family: 'work_sans_lightregular', Helvetica, sans-serif;
  text-decoration: none;
  font-size: 1.1rem;
  line-height: 1.5;
  /* *****line-height: 26.64px;
  font-size: 18px;
  font-size: 1.8rem;***** */ /* ** frage *** */
  hyphens:auto;	
  font-style: normal;
  font-weight: normal;
  list-style-type:none;
  outline: none;
  padding: 0;
  margin: 0; 
  }

  /* ** hier *** */

html, body {
    color:  #310C09;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    font-family: 'work_sans_lightregular', sans-serif;
    font-weight:normal;
    font-size: 1.1rem;
    line-height: 1.5em;
    }

body {
    background-color:white;
    background-image:url(img/hintergrund-body-parkett.jpg);
    position: relative;
    background-position: fixed;
	}

[hidden] {
	display: none;
    }

logo, li, img, .button .button-therapeuten, #mehr-erfahren, label {
   transition: all 300ms; 
   -webkit-transition: all 300ms; 
   }

hr, .hr {
    margin-bottom:1em;
    margin-top:1em;
    border:none;
    color:transparent;
    background-color:transparent;
    background-image:url(img/linie.png);
    width: 100%;
    height: 1px;
}

summary:focus {
	outline: none;  
}

label {
display: inline-block;
height:3em;
width: 100%;
background-color: #310C09;
border-radius: 5px;
border:none;
color: #A83002;
text-align: center;
padding: 0.5em;
margin-top:0.5em;
outline:none;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
cursor: pointer;
}

label:hover {
display: inline-block;
height:3em;
background-color:#aedad5;
margin-top:0.5em;
outline:none;
border:none;
}

@media screen and (max-width:970px) {
  
div, article, lable, details, section, summary, header, main, footer, aside, wrapper, li, ul, form, input, table, span, tr, td, p, b, strong, figure {
  
  font-size: 1.1rem;
  line-height: 1.3;
  }
 }

/* ******   XXX   ******************************************* */
/* *********  1b. Allgemein Links und Schriften  ************ */
/* ********************************************************** */

b, strong {
  font-family: 'work_sans_mediumregular', sans-serif;
}

a { 
    color:#49A7EF;
    outline:none;
    -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
       -o-transition: all 0.2s;
          transition: all 0.2s;
    }

a:hover {
    color:#327db6;
    outline:none;
    -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
       -o-transition: all 0.2s;
          transition: all 0.2s;
    }

a:visited {
  color: #327db6;
  outline:none;
  }

a:active {
  outline: #327db6;
  }

a:focus {
  color:  #327db6;
  outline:none;
  }

a.kommentar {
  color: hotpink;
  text-decoration: none;
  }

a.schrift-ganz-klein {
  font-size: 0.75rem;
  margin-bottom: 0.25%;
  line-height: 1.5;
}

p {
  font-family: 'work_sans_lightregular', sans-serif;
  text-decoration: none;
  font-size: 1.1rem;
  margin-bottom: 0.25%;
  line-height: 1.6;
  hyphens:auto;
  color: #310C09;
  }

p.text-mittel {
  text-align: center;
  }

.p-gruen {
  background-color:#e3f1ef;
  padding:1em;
  -webkit-column-break-inside: avoid; 
 }

.p-no-break-inside {
  -webkit-column-break-inside: avoid; 
  }

p.text-zentriert {
  font-family: 'work_sans_lightregular', sans-serif;
  text-decoration: none;
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 0.25%;
  text-align: center;
  hyphens:auto;
  }

p.ueberschrift {
  font-family: 'work_sans_lightregular';
  color: #A83002;
  font-size: 4.5rem;
  line-height: 1.3;
  margin-bottom: 0.25%;
  font-style: normal;
  font-weight: normal;
  hyphens:auto;
  outline:none;
  }

p.ueberschrift-zentriert {
    font-family: 'work_sans_lightregular';
    font-size: 4.5rem;
    line-height: 1.3;
    margin-bottom: 0.25%;
	font-style: normal;
	font-weight: normal;
    text-align: center;
    hyphens:auto;
    }

p.ueberschrift-trans {
    font-family: 'work_sans_lightregular';
    font-size: 4.5rem;
    line-height: 1.3;
    margin-bottom: 0.25%;
	color: transparent;
	font-style: normal;
	font-weight: normal;
    }

p.hell {
  color:white;
}

.text-normal {
  display:block;
  }

.text-712 {
  display:none;
  }

.text-970-normal {
  display:block;
}
  
.text-970 {
  display:none;
}

h1,
.h1 {
  font-size: 1.8rem;
  line-height: 1.2;
  color: #A83002;
  font-family: 'work_sans_lightregular', sans-serif;
  text-decoration: none;
  hyphens:auto;
}

.h1-zentriert {
  font-size: 1.8rem;
  line-height: 1.2;
  color: #A83002;
  font-family: 'work_sans_lightregular', sans-serif;
  text-decoration: none;
  text-align: center;
  hyphens:auto;
}

.h1-blau {
  font-size: 1.8rem;
  line-height: 1.2;
  color: #053c59;
  font-family: 'work_sans_lightregular', sans-serif;
  text-decoration: none;
  hyphens:auto;
}

h2,
.h2 {
  font-size: 1.8rem;
  line-height: 1.2;
  color: #A83002;
  font-family: 'work_sans_mediumregular', sans-serif;
  text-decoration: none;
  hyphens:auto;
}
.h2-zentriert {
   font-size: 1.8rem;
  line-height: 1.2;
  color: #A83002;
  font-family: 'work_sans_mediumregular', sans-serif;
  text-decoration: none;
  text-align: center;
  hyphens:auto;
}

h3,
.h3 {
  font-size: 270%;   /* **** Überschr. Ausklapp. Leistung. ***** */
  line-height: 120%;
   color: #A83002;
  font-family: 'work_sans_lightregular', sans-serif;
  text-decoration: none;
  hyphens:auto;
  margin-top: 0.5em;
  margin-bottom:1em;
}

h4,
.h4 {
  font-size: 1.8rem;   /* **** Überschr. Fragen ***** */
  line-height: 1.2;
  font-family: 'work_sans_lightregular', sans-serif;
  text-decoration: none;
  hyphens:auto;
  margin-bottom:0;
}

  h5, h6, .h4, .h5, .h6 {
  font-family: 'work_sans_lightregular', sans-serif;
  text-decoration: none;
  }

  @media screen and (max-width:970px) {
  
  
h1,             /********** Überschrift ************/
.h1 {
 font-size: 1.8rem;
  line-height: 1.2;
  }
  
p.ueberschrift-normal {
  font-family: 'work_sans_lightregular', sans-serif;
  font-size: 2.5rem;
  line-height: 1.0;
  margin-bottom: 0.25%;
}
  
p.ueberschrift {
  font-size: 3.8rem;
  line-height: 1.3;
  margin-bottom: 0.25%;
  }
    
p.ueberschrift-zentriert {
    font-size: 3.8rem;
    }

 }


/* MOBILE  ************************* */
/* ********************************* */

@media screen and (max-width:712px) {

h1,
.h1 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom:0.25em;
  }

h2,.h2, h3,.h3 {
  font-size: 1.8rem;
  line-height: 1.2;
  hyphens:auto;
  }

p.ueberschrift-normal {
  font-family: 'work_sans_lightregular', sans-serif;
  font-size: 2rem;
  line-height: 1.0;
  margin-bottom: 0.25%;
}
  
p.ueberschrift {
  font-size: 3.4rem;
  }
    
p.ueberschrift-zentriert {
    font-size: 3.4rem;
    }
}


@media screen and (max-width:480px) {

p.ueberschrift {
  font-size: 3rem;
  }
    
p.ueberschrift-zentriert {
    font-size: 3rem;
    }
   
}

/* ******   XXX   ******************************************* */
/* **********  1c. Allgemein Bilder  ************************ */
/* ********************************************************** */

  img {
  max-width: 100%;
  height: auto; /* Make sure images are scaled correctly. */
  max-width: 100%; /* Adhere to container width. */
  vertical-align:bottom;
  transition: all 300ms; 
  -webkit-transition: all 300ms; 
  }

/* ******   XXX   ******************************************* */
/* **********  1d. Allgemein Buttons  *********************** */
/* ********************************************************** */

button {
display: inline-block;
font-family: 'work_sans_mediumregular';
height:3em;
background-color: #ebebeb;
border-radius: 10px;
border:none;
color: #310C09;
text-align: center;
margin-top:1.5em;
outline:none;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
cursor: pointer;
}

button:hover {
display: inline-block;
height:3em;
color: #310c097b;
background-color:#7b98aa68;
outline:none;
border:none;
margin-top:1.5em;
}

a.button {
display: inline-block;
font-family: 'work_sans_mediumregular';
height:3em;
background-color: #ebebeb;
border-radius: 10px;
border:none;
color: #310C09;
text-align: center;
margin-top:1.5em;
outline:none;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
cursor: pointer;
}

a.button:hover {
display: inline-block;
height:3em;
color: #310c097b;
background-color:#7b98aa68;
outline:none;
border:none;
margin-top:1.5em;
}

/* MOBILE  ************************* */
/* ********************************* */

@media screen and (max-width:712px) {

button {
width: 100%;
  }

  a.button {
width: 100%;
  }
}


/* ******   XXX   ******************************************* */
/* *********  1e. Allgemein Klassen  ************************ */
/* ********************************************************** */


.zwei-container-aussen{ /********** zwei container nebeneinander ************/
display: flex;
flex-direction: row;
flex-basis: 100%;
max-width: 100%;
width: 100%;
flex: 0 0 auto;
box-sizing: border-box;
margin: 0 0 0 0;
margin: 0 auto;
height: auto;
overflow:hidden;
padding-top:1em;
}

.zwei-flex-cont{ /********** zwei container nebeneinander ************/
display: flex;
flex-direction: column;
flex-basis: 48%;
max-width: 50%;
width: 50%;
flex: 0 0 auto;
box-sizing: border-box;
margin: 0 0 0 0;
margin: 0 auto;
height: auto;
overflow:hidden;
}

.drei-container{  /* ******  drei container nebeneinander ******* */
display: flex;
flex-direction:column;
flex-basis: 33.33333333%;
max-width: 33.33333333%;
width: 33.33333333%;
flex: 0 0 auto;
box-sizing: border-box;
background-color:white;
min-height: 1em;
height: auto;
padding: 1.5em 0em ;
text-align:left;
}

.zwei-container{  /* ******  zwei container nebeneinander ******* */
display: flex;
flex-direction:column;
flex-basis: 30%;
max-width: 30%;
width: 30%;
flex: 0 0 auto;
box-sizing: border-box;
background-color:white;
min-height: 1em;
height: auto;
padding: 1em;
text-align: center;
}

.sprungmarke{
    height: 4em;
    width: 100%;
    overflow: hidden;
    background-color:transparent; 
    }

.sprungmarke-halb {
    height: 2em;
    width: 100%;
    overflow: hidden;
    background-color:transparent; 
    }


/* MOBILE  ************************* */
/* ********************************* */

@media screen and (max-width:712px) {

.sprungmarke{
    height: 2em;
    }
}

/* ******   XXX   ******************************************* */
/* ********  2. FONTS  ************************************** */
/* ********************************************************** */
/* ********************************************************** */

/* ********* 2a. Work sans  ********* */

@font-face {
    font-family: 'work_sans_thinregular';
    src: url('fonts/webfont-ws/work-sans-v3-latin-100-webfont.woff2') format('woff2'),
         url('fonts/webfont-ws/work-sans-v3-latin-100-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    }

@font-face {
    font-family: 'work_sans_extralightregular';
    src: url('fonts/webfont-ws/work-sans-v3-latin-200-webfont.woff2') format('woff2'),
         url('fonts/webfont-ws/work-sans-v3-latin-200-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    }

@font-face {
    font-family: 'work_sans_lightregular';
    src: url('fonts/webfont-ws/work-sans-v3-latin-300-webfont.woff2') format('woff2'),
         url('fonts/webfont-ws/work-sans-v3-latin-300-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    }

@font-face {
    font-family: 'work_sans_mediumregular';
    src: url('fonts/webfont-ws/work-sans-v3-latin-500-webfont.woff2') format('woff2'),
         url('fonts/webfont-ws/work-sans-v3-latin-500-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    }


/* ********* 2b. montserrat-300 - latin  ********* */

@font-face {
  font-display: swap; 
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/montserrat-v31/montserrat-v31-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/montserrat-v31/montserrat-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/montserrat-v31/montserrat-v31-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-500 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/montserrat-v31/montserrat-v31-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/montserrat-v31/montserrat-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-700italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/montserrat-v31/montserrat-v31-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-900 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/montserrat-v31/montserrat-v31-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



/* ******   XXX   ******************************************* */
/* *********  3. Seitenaufbau  Allgemein  ******************* */
/* ********************************************************** */
/* ********************************************************** */

/* **** 3a. (Template) Intro Smartphone 
content-introsmartp  **** */

#logo-intro-smartph {
    background-color: transparent;
    }


#site-logo-712 {
    position: relative;
    overflow: hidden;
    display:none;
    width: 100%;
    min-height: 2em;
    height: auto;
    padding: 1.25em;
    }

.logo-gr712 {
    perspective-origin: relative;
    display: flex; 
    justify-content: center; 
    align-items: center;
    margin:0 auto;
    }

/* **** 3b. Header. **** */

#site-header {   
display:flex;
position: relative;
align-items: center;
flex-direction: column;
background-color:transparent;
clear:both;
position: fixed;
z-index: 10;
top: 0; 
min-height: 2em;
height: auto; 
border-top: 0.2em solid #49A7EF;
}

 /* ******  3c. Seiteninhalt  ******* */

.wrapper-content {     
  max-width:100%;
  height: auto;
  margin: 0 auto;
  background-color:transparent;
  margin-top: 0;
  }

  .container-aussen { 
  position: relative;
  width: 100%;
  min-height: 2em;
  height: auto;
  margin: 0 auto;
  }

.container-innen { 
  position: relative;
  max-width: 1950px;
  margin: 0 auto;
  width: 100%;
  min-height: 2em;
  height: auto;
  padding-left:4em;
  padding-right: 4em;
  }

 /* ******  3d. Footer  ******* */

#site-footer {
    display:flex;
    align-items: center;
    flex-direction: column;
    min-height: 2em;
    height: auto; 
    background-color:transparent;
  }

@media screen and (max-width:1300px) {
    
.container-innen { 
padding-left:2em;
padding-right:2em;
}
}

@media screen and (max-width:970px) {

#logo-intro-smartph {
    background-color: white;
    }
}

@media screen and (min-width:712px) {

#site-logo-712 {
    display:none;
}
}

@media screen and (max-width:712px) {
  
#site-header {  
    position:sticky;
    position: -webkit-sticky;
    top: 0px;
    width: 100%;
  }

.container-innen { 
padding-left:1em;
padding-right:1em;
}
}

/* ******   XXX   ******************************************* */
/* ****  4. Navigation  ************************************* */
/* ********************************************************** */



/* ******   XXX   ******************************************* */
/* *********  4b. Hauptnavigation *************************** */
/* ********************************************************** */

#header-nav-bar {
clear: both;
min-height: 105px;
height: auto;
max-width: 1950px;
width: 100%;
background-color:white;
}

a.logo {
   background-color:transparent;
   text-decoration: none;
   width: 220px;
   height: 105px;
   color: transparent;
   display:block;
    }

a.logo img {
    opacity: 1;
    }

a.logo img:hover {
    opacity: 0.5;
    }

#header-nav-hauptmenue {
    min-height: 4em;
    height: auto;
    }

#header-nav-hauptmenue ul {
    padding-top: 2em;
    padding-bottom: 2em;
    margin: 0;
    list-style: none;
   }

#header-nav-hauptmenue li {
    margin-bottom: 0.1em;
    }

#header-nav-hauptmenue a {
    padding-top: 0.8em;
    padding-bottom: 0.8em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    display: block;
    text-decoration: none;
    color: #310C09;
    font-family: work_sans_mediumregular, sans-serif;
    font-size: 1rem;
}

#header-nav-hauptmenue a:hover {
   color:#49A7EF;
   font-family: work_sans_mediumregular, sans-serif;
   font-size: 1rem; 
}

@media screen and (min-width:1100px) {
  
.site-nav li {
 float: right;
   } 
  
  a.logo {
    float: left;
    }   
}

@media screen and (max-width:1100px) {

    
#header-nav-hauptmenue a { 
    display: block;
    border-bottom:dotted;
    border-bottom-color: rgb(5,60,89,30%);
    text-decoration: none;   
}

#header-nav-hauptmenue a:hover {
  border-bottom:dotted;
  border-bottom-color: rgb(5,60,89,30%);
  background-color:  rgb(5,60,89,2%) ; 
}
  
a.logo {
  min-height: 76px;
  }

a.logo:hover{
    min-height: 76px;
  }
  
.js .site-nav {
  display:none;
}
    
#site-logo-712 {
    display:none;
}
}

@media screen and (max-width:712px) {

#header-nav-hauptmenue a {
    color: white;
    border-bottom:dotted;
    border-bottom-color: rgba(255, 255, 255, 0.288);
}

#header-nav-hauptmenue a:hover {
    border-bottom:dotted;
    border-bottom-color: rgba(255, 255, 255, 0.206);
}

#header-nav-bar {
min-height: 4em;
height: auto;
background-color:#B5200D;
}

    #site-logo-712 {
    display: block;
    top: 0;
    }
    
a.logo {
    display: none;
    }
}


/* ***  4c. Navigation responsive Hauptmenue  **************** */
/* *********************************************************** */
/* *********************************************************** */

#toggle-nav {
  display:none;
}

@media screen and (max-width:1100px) {
  
#toggle-nav {
    display:block;
    position: absolute;
    right: 2em;
    top:2em;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    background-image: url(img/toggle-a-55x55-ham-butt.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color:transparent;
    color: transparent;
    z-index: 1;
}
}

@media screen and (max-width:712px) {
    
#toggle-nav {
    right: 1em;
    width: 40px;
    height: 40px;
    line-height: 40px;
    top:1em;
}
}


/* ***  4e. (Template) Navigation im Footer  ******************** */
/* ************************************************************** */
/* ************************************************************** */

#footer-nav-bar {
    min-height: 2em;
    height: auto;
    background-color:#230C0B;
    width:100%;
    }

.footer-nav-flexbox {
display: flex;
flex-direction:row;
}

.zwei-container-footer{  /* ******  zwei container nebeneinander ******* */
display: flex;
flex-direction:column;
flex-basis: 50%;
max-width: 50%;
width: 50%;
flex: 0 0 auto;
box-sizing: border-box;
background-color:transparent;
min-height: 1em;
height: auto;
padding: 1.5em 0em ;
text-align:left;
}

#copyright {
    background-color:transparent;
    min-height: 1em;
    height: auto;  
 }

 #copyright p {
    font-family: work_sans_mediumregular, sans-serif;
    color:#BFA9A9;
    font-size: 1rem;
 }

  #copyright p:hover {
    font-family: work_sans_mediumregular, sans-serif;
    color:#C9BFBE;
    font-size: 1rem;
 }

#footer-nav-rechts {
    text-align: right;
    }

#footer-nav-rechts li {
    display: inline;
    padding-left:0.8em;
    padding-right:0.8em;
    }

#footer-nav-rechts a {
   color:#BFA9A9;
   font-family: work_sans_mediumregular, sans-serif;
   font-size: 1rem; 
 }

#footer-nav-rechts a:hover {
   color:#C9BFBE;
   font-family: work_sans_mediumregular, sans-serif;
   font-size: 1rem; 
 }

@media screen and (max-width:970px) {
  
.footer-nav-flexbox {
    flex-direction:column-reverse;
    align-items: center;
  }

  #footer-nav-rechts {
    text-align: center;
    padding-top:0.5em;
    }

.zwei-container-footer{  
flex-basis: 100%;
max-width: 100%;
width: 100%;
flex: 0 0 auto;
min-height: 1em;
height: auto;
padding: 0.5em 0em ;
text-align:center;
}
}

@media screen and (max-width:712px) {
  
#footer-nav-bar {
    padding-bottom:7em;
    }
}

/* ***  5. Main-Area / Seiteninhalt  **************************** */
/* ************************************************************** */
/* ************************************************************** */

.site-main {           /* **********  Hauptinhalt  ********* */
  max-width: 1950px;
  width:100%;
  min-height: 2em;
  height: auto;
  background-color:white;
  background-image: url(img/papier-hintergrund-72dpi.jpg);
  background-repeat: repeat;
  background-size: contain;
  background-attachment: fixed;
  margin:0 auto;
  }

/* ***  5b. Startbild / (Headbildtext)  ************************* */
/* ************************************************************** */
/* ************************************************************** */

#headbild { 
min-height: 60vh;
height: auto;
background-image:url(img/theatralis-startbild-back.jpg); 
background-repeat: no-repeat;
background-position:center;
background-size: cover;
background-color:white;
background-attachment: fixed;
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
-webkit-align-items: center;
}

#headbild-error,
#headbild-page,
#headbild-zertifikatskurse,
#headbild-aktuelles,
#headbild-datenschutz,
#headbild-impressum,
#headbild-theaterlabor,
#headbild-theatralis,
#headbild-workshops { 
min-height: 18vh;
height: auto;
background-repeat: no-repeat;
background-position:center;
background-size: cover;
background-color:transparent;
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
-webkit-align-items: center;
}

#headbild-theaterlabor { 
background-image:url(headerbilder/theatralis-headbild-theaterlabor.jpg); 
}

#headbild-workshops { 
background-image:url(headerbilder/theatralis-headbild-workshops.jpg); 
}

#headbild-zertifikatskurse { 
background-image:url(headerbilder/theatralis-headbild-zertifikatskurse.jpg); 
}

#headbild-aktuelles { 
background-image:url(headerbilder/theatralis-headbild-aktuelles.jpg); 
}

#headbild-datenschutz { 
background-image:url(headerbilder/theatralis-headbild-datenschutz.jpg); 
}

#headbild-impressum { 
background-image:url(headerbilder/theatralis-headbild-impressum.jpg); 
}

#headbild-theatralis { 
background-image:url(headerbilder/theatralis-headbild-theatralis.jpg); 
}

#headbild-page { 
background-image:url(headerbilder/theatralis-headbild-theatralis.jpg); 
}

#headbild-error { 
background-image:url(headerbilder/theatralis-headbild-theatralis.jpg); 
}


aside#unsere-arbeit {
    bottom:0;
    position: absolute;
    width: 100%;
    }

#headbild-content-rechts {
   border:none;
    overflow: hidden;
    min-height:20vh;
    height:auto;
    width: 100%;
    text-align:center;
    background-color:transparent;
    padding: 8em 20em 8em 20em;
    }

#headbild-content-error,
#headbild-content-page,
#headbild-content-zertifikatskurse,
#headbild-content-aktuelles,
#headbild-content-datenschutz,
#headbild-content-impressum,
#headbild-content-theaterlabor,
#headbild-content-theatralis,
#headbild-content-workshops {
   border:none;
    overflow: hidden;
    min-height:10vh;
    height:auto;
    width: 100%;
    text-align:center;
    background-color:transparent;
    padding: 8em 20em 8em 20em;
    }

#headbild-text {
	
    background-color:transparent; 
	border:none;
    overflow:hidden;
    min-height: 15em;
    border-radius: 25px;
    height: auto;
    width: 100%;
    text-align:center;
    padding: 2em 2em 2em 2em;
    }

#headbild-text p,
#headbild-text page p,
#headbild-text error p,
#headbild-text-zertifikatskurse p,
#headbild-text-aktuelles p,
#headbild-text-datenschutz p,
#headbild-text-impressum p,
#headbild-text-theaterlabor p,
#headbild-text-theatralis p,
#headbild-text-workshops p {
color: white;
font-family: 'work_sans_lightregular', sans-serif;
font-size: 200%;
    }

#start-winkel,
.start-winkel {
  width: 100%;
  height: 142px;
  background-image: url(img/winkel.png);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 100%;
  position: absolute;
  bottom:0;
  margin-bottom: 0%;
  }


@media screen and (max-width:1450px) {
    
#headbild-content-rechts { 
    width: 100%;
    padding: 8em 10em 8em 10em;
    }

#headbild-content-error,
#headbild-content-page,
#headbild-content-zertifikatskurse,
#headbild-content-aktuelles,
#headbild-content-datenschutz,
#headbild-content-impressum,
#headbild-content-theaterlabor,
#headbild-content-theatralis,
#headbild-content-workshops { 
    width: 100%;
    padding: 8em 10em 8em 10em;
    }
   }

@media screen and (max-width:1200px) {
    
#headbild-content-rechts {
    width: 100%;
    padding: 8em 6em 8em 6em;
   }

#headbild-content-error,
#headbild-content-page,
#headbild-content-zertifikatskurse,
#headbild-content-aktuelles,
#headbild-content-datenschutz,
#headbild-content-impressum,
#headbild-content-theaterlabor,
#headbild-content-theatralis,
#headbild-content-workshops {
    width: 100%;
    padding: 8em 6em 8em 6em;
   }
}

@media screen and (max-width:970px) {
    
#headbild-content-rechts {
width: 100%;
text-align:center;
    position: relative;
   max-width: 1400px;
  margin: 0 auto;
  padding-left:4em;
  padding-right: 4em;
   }

#headbild-content-error,
#headbild-content-page,
#headbild-content-zertifikatskurse,
#headbild-content-aktuelles,
#headbild-content-datenschutz,
#headbild-content-impressum,
#headbild-content-theaterlabor,
#headbild-content-theatralis,
#headbild-content-workshops {
width: 100%;
text-align:center;
    position: relative;
   max-width: 1400px;
  margin: 0 auto;
  padding-left:4em;
  padding-right: 4em;
   }

}

@media screen and (max-width:712px) {
    
#headbild { 
min-height: 200px;
height: auto;
background-image:url(img/theatralis-startbild-back-klein.jpg);
background-attachment: scroll;
display:block;
}

#headbild-error,
#headbild-page,
#headbild-zertifikatskurse,
#headbild-theaterlabor,
#headbild-aktuelles,
#headbild-datenschutz,
#headbild-impressum,
#headbild-theatralis,
#headbild-workshops { 
min-height: 200px;
height: auto;
background-attachment: scroll;
display:block;
}


#headbild-error { 
background-image:url(headerbilder/theatralis-startbild-theatralis-klein.jpg);
}

#headbild-page { 
background-image:url(headerbilder/theatralis-startbild-theatralis-klein.jpg);
}

#headbild-theaterlabor { 
background-image:url(headerbilder/theatralis-headbild-theaterlabor-klein.jpg);
}

#headbild-zertifikatskurse { 
background-image:url(headerbilder/theatralis-headbild-zertifikatskurse-klein.jpg);
}

#headbild-aktuelles { 
background-image:url(headerbilder/theatralis-headbild-aktuelles-klein.jpg);
}

#headbild-datenschutz { 
background-image:url(headerbilder/theatralis-headbild-datenschutz-klein.jpg);
}

#headbild-impressum { 
background-image:url(headerbilder/theatralis-headbild-impressum-klein.jpg);
}

#headbild-theatralis { 
background-image:url(headerbilder/theatralis-startbild-theatralis-klein.jpg);
}

#headbild-workshops { 
background-image:url(headerbilder/theatralis-headbild-workshops-klein.jpg);
}
    
#headbild-text{
    display:none;
}
    
#headbild-content-rechts {
    display:none;
}

#headbild-content-error,
#headbild-content-page,
#headbild-content-zertifikatskurse,
#headbild-content-aktuelles,
#headbild-content-datenschutz,
#headbild-content-impressum,
#headbild-content-theaterlabor,
#headbild-content-theatralis,
#headbild-content-workshops {
    display:none;
}
}


/* 5c. (Template) Drei Container (start) ************************ */
/* ************************************************************** */

#start-drei-container {
  position: relative;
  background-color: transparent; 
  min-height: 20em;
  height: auto;
}

#was-theatralis-macht {
  width: 100%;
  min-height: 15em;
  height: auto;
  position: absolute;
  top:-10em;
  left:0em;
  right:0em;
  z-index: 9;
  background-color: transparent;
  }

  #was-theatralis-macht article {
    background-color: transparent;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    bottom: 0;
   
    }

    #was-theatralis-macht article article {
    display: flex;
    flex-direction: column;
    flex-basis: 31%;
    max-width: 31%;
    width: 31%;
    height: auto;
    text-align: center;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom: 0.2em solid #49A7EF;
      }

      #was-theatralis-macht article article p {
        flex: 1 0 auto;
        padding-left:1em;
        padding-right:1em;
      }

       #was-theatralis-macht article article h2 {
        color:#49A7EF;
        margin-bottom:0.25em;
        margin-top:1em;
      }

  #was-theatralis-macht article article#workshops {
        background-color: white;
          }
  #was-theatralis-macht article article#zertifikatskurse {
    background-color: white;
              }

  #was-theatralis-macht article article#projekte {
    background-color: white;
                  }

  #was-theatralis-macht article article figure,
  #was-theatralis-macht article article section {
                    width: 100%;
                      }

  #was-theatralis-macht article article button {
                    padding:0.25em;
                    margin-top:0.5em;
                    width: 100%;
                      }

  #was-theatralis-macht article article a {
                    padding:1em;
  
                          }

  .blauer-streifen-kasten {
        height: 1em;
        background-color: #49A7EF;
                          }

@media screen and (max-width:970px) {

  #was-theatralis-macht {
    position: relative;
    top:0em;
    z-index: 0;
    }

  #was-theatralis-macht article {
    flex-direction:column;
    }
  
  #was-theatralis-macht article article {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
    margin-bottom:2em;
      }
            
}


/* 5d. Start Text *********************************************** */
/* ************************************************************** */

#start-headline {
    text-shadow: 50px 50px 50px #4a2916;
    border-radius: 8px;
    padding:0.25em;
      }


  #start-text-container {
    min-height: 2em;
    height: auto;
    background-color:transparent;
      }

   #start-text-content article {
    min-height: 2em;
    height: auto;
    background-color: white;
    padding:2em;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom: 0.2em solid #49A7EF;
      }





/* 5c. (Template) Drei Container (start) ************************ */
/* ************************************************************** */

#start-aktuelles-text {
    text-align: center;
      }

#start-drei-beitraege {
  position: relative;
  background-color: transparent; 
  min-height: 20em;
  height: auto;
}
.drei-beitraege-container {
  width: 100%;
  min-height: 15em;
  height: auto;
  background-color: transparent;
  }

.drei-beitraege-container {
    background-color:transparent;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    bottom: 0;
    }

.drei-beitraege-container article {
    display: flex;
    flex-direction:column;
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
    height: auto;
    text-align: left;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom: 0.2em solid #49A7EF;
    background-color: white;
    padding:2em;
    margin-bottom:1.5em;
      }

  .drei-beitraege-container article article  {
    border:none;
    padding:0em;
    margin-bottom:0em;
      }

  .drei-beitraege-container article article.drei-beitraege-beitragsueberschrift h2 {
    color:#49A7EF;
    margin-bottom: 0.5em;
      }

    .drei-beitraege-container article article.drei-beitraege-beitragsueberschrift p {
    margin-bottom: 1em;
      }

   .drei-beitraege-container article article.drei-beitraege-content {
    border:none;
    display: flex;
    flex-direction:row;
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
    height: auto;
    border: none;
    text-align: left;
    margin-bottom:0em;
      }

   .drei-beitraege-container article article.drei-beitraege-content figure {
   display: flex;
    flex-basis: 31%;
    max-width: 31%;
    width: 31%;
    height: auto;
    margin-bottom:0em;
      }

    .drei-beitraege-container article article.drei-beitraege-content article {
    display: flex;
    flex-direction:column;
    flex-basis: 69%;
    max-width: 69%;
    width: 69%;
    height: auto;
    border: none;
    padding-left:1em;
    padding-right:1em;
    text-align: left;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom:0em;
    }

    .drei-beitraege-container article article.drei-beitraege-content article a.button {
      width: 15em;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom:0em;
      }

  .drei-beitraege-container article article.drei-beitraege-content article a.text-link {
  width: auto;
  display: inline;
}


@media screen and (max-width:970px) {

   .drei-beitraege-container article article.drei-beitraege-content {
    flex-direction:column;
      }

  .drei-beitraege-container article article.drei-beitraege-content figure {
   display: flex;
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
    height: auto;
    margin-bottom:1em;
      }

    .drei-beitraege-container article article.drei-beitraege-content article {
    display: flex;
    flex-direction:column;
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
    height: auto;
    border: none;
    padding-left:0em;
    padding-right:0em;
    text-align: left;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom:0em;
    }
            
}

@media screen and (max-width:712px) {

    .drei-beitraege-container article article.drei-beitraege-content article a {
      width: 100%;
      }
   
    }


/* 5f. Start Kontakt ******************************************** */
/* ************************************************************** */

 #kontakt {
    min-height: 2em;
    height: auto;
    background-color: transparent;
    }

#start-kontakt-content {
display:flex;
width: 100%;
min-height:2em;
height: auto;
background-color:transparent;
flex-direction:row;
column-gap:2em;
}

#kontakt-text {
width: 40%;
min-height:2em;
height: auto;
background-color:transparent;
}

#kontakt-container-formular{
width: 60%;
min-height:2em;
height: auto;
background-color:transparent;
}

#kontakt-formular{
width: 100%;
min-height:800px;
height: auto;
background-color:transparent;
padding-left:1em;
}

#kontakt-formular iframe {
width: 100%;
height:800px;
border:none;
margin: 0 0 0 0;
}

.kontaktdaten {

  font-family: 'work_sans_lightregular', sans-serif;
  font-size: 1.3rem;
  line-height: 1.5;
  letter-spacing: 3px;
  color:black;
  font-style: normal;
  font-weight: bold;
  hyphens:auto;
  outline:none;
  text-align:left;
  }


@media screen and (max-width:1150px) {
  
#start-kontakt-content {
flex-direction:column;
}

#kontakt-text {
width: 100%;
min-height:2em;
height: auto;
background-color:transparent;
}

#kontakt-container-formular{
width: 100%;
min-height:2em;
height: auto;
background-color:transparent;
margin-top:3em;
}
    
#kontakt-formular{
padding-left:0em;
min-height:900px;
}

#kontakt-formular iframe {
height:900px;
}
}

@media screen and (max-width:1100px) {
#kontakt-formular{
padding-left:0em;
min-height:900px;
}

#kontakt-formular iframe {
height:900px;
}  

}

 @media screen and (max-width:650px) {
#kontakt-formular{
min-height:1100px;
}

#kontakt-formular iframe {
height:1100px;
}  

}



/* 5g. Start Partner ******************************************** */
/* ************************************************************** */


#bereich-partner {
  width:100%;
  min-height:2em;
  height: auto;
  background-color:white;
  }

.partner-flex-cont {
    display: flex;
    flex-direction:row;
    flex-basis:100%;
    max-width:100%;
    width: 100%;
    flex: 0 0 auto;
    box-sizing: border-box;
    margin: 0 0 0 0;
    margin: 0 auto;
    height: auto;
    flex-wrap: nowrap; 
    overflow: auto;
}

.hover-partner {
    flex: 0 0 auto;
    min-width: 10px;
    width: auto;
    background-color:transparent;
    padding:0em;
  }

.hover-partner figure {
    background:white;
  }

.hover-partner figure img {
    opacity: 1;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
  }

.hover-partner figure:hover img {
    opacity: .5;
  }

.partner-logo   {   
    background-color:white;
    text-align: center;
    }

.partner-logo img  {   
    background-color:white;
    }

     

/* ***   6. Unterseiten Inhalt  ********************************* */
/* ************************************************************** */
/* ************************************************************** */

    #zertifikatskurse,
    #aktuelles,
     #datenschutz,
     #impressum,
     #theaterlabor,
     #theatralis,
       #workshops {
    background-color:transparent;
      }


/* 6a. Unterseite Aktuelles ************************************* */
/* ************************************************************** */

       #aktuelles-content {
    background-color:pink;
    min-height: 2em;
    height: auto;
      }

/* ***  7. Footer-Area / Seiteninhalt  ************************** */
/* ************************************************************** */
/* ************************************************************** */


/* 7a. (Template) Footer extra ********************************** */
/* ************************************************************** */

#footer-winkel,
.footer-winkel {
  width: 100%;
  height: 142px;
  background-image: url(img/winkel-footer.png);
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100%;
  background-color:transparent;
  position: absolute;
  top:0;
  margin-top: 0%;
  margin-bottom:0%;
  }

#footer-extra {
position: relative;
height: 8em;
background-color:white;
margin-top: 0%;
margin-bottom:0%;
}

#footer-extra-zertifikatskurse,
#footer-extra-aktuelles,
#footer-extra-datenschutz,
#footer-extra-impressum,
#footer-extra-theaterlabor,
#footer-extra-theatralis,
#footer-extra-workshops {
position: relative;
height: 8em;
background-color:#B5200D;
background-image:url(img/theatralis-startbild-bac.jpg); 
background-repeat: no-repeat;
background-position:center bottom;
background-size: cover;
background-attachment: fixed;
margin-top: 0%;
margin-bottom:0%;
}


/* ***  8. Alles weitere ************************** */
/* ************************************************************** */
/* ************************************************************** */

#comments, .comments-link {
display:none;
}

.wrapper-content {
background-color: lavender;
}

.beitraege {
background-color: transparent;
}

.beitraege-start {
background-color: lavender;
}



.wp-block-group {
  background-color:white;
}