/*
Theme Name: 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.15rem;
  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:#A83002;
    outline:none;
    -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
       -o-transition: all 0.2s;
          transition: all 0.2s;
    }

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

a:visited {
  color:#A83002;
  outline:none;
  }

a:active {
  color:#A83002;
  outline: #327db6;
  }

a:focus {
  color:#A83002;
  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, h1 a.text-link-h1 {
  font-size: 1.8rem;
  line-height: 1.2;
  color: #A83002;
  font-family: 'work_sans_lightregular', sans-serif;
  text-decoration: none;
  hyphens:auto;
}

h1 a.text-link-h1:hover {
  font-size: 1.8rem;
  line-height: 1.2;
  color: #A83002;
  background-color: rgba(255, 192, 203, 0.628);
  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;
width: 100%;
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;
}

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

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

button {
width: 100%;
  }
}


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


.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;
    }



/* ******   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; 
}

 /* ******  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;
  }

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

@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:#B9AF8C;
}

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;
}

    #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:#919177;
    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:white;
    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:white;
   font-family: work_sans_mediumregular, sans-serif;
   font-size: 1rem; 
 }

#footer-nav-rechts a:hover {
   color:rgba(255, 255, 255, 0.876);
   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:transparent;
  background-image: url(img/papier-hintergrund-1950.jpg);
  background-repeat: repeat;
  background-size: contain;
  background-attachment: fixed;
  margin:0 auto;
  }



/* ***  6d. Putzfrau. ******************************************* */
/* ************************************************************** */
/* ************************************************************** */

#putzfrau {
    width: 100%;
    height: auto;
    position: relative;
    background-repeat: no-repeat;
    background-image:url(img/back-buero-head.jpg);
    background-position:center;
    background-size: cover;
    background-attachment: fixed;
    background-color:transparent;
    margin-top:3.25em;
    }

#foto-putzfrau {
    position: relative;
    width: 100%;
    min-height: 30em;
    height: auto;
    background-repeat:no-repeat;
    background-image:url(img/back-putzfrau-1950.png);
    background-position:right bottom;
    background-size: cover;
    background-color:#512e176c;
    }
    
#headbild-putzfrau-flex-cont {
  display:flex;
  flex-direction: row;
   position: relative;
   background-color: transparent;
   width: 100%;
   height: auto;
   padding-top:9%;
    }

#headbild-putzfrau-links {
  display:flex;
  flex-direction: column;
  flex-basis: 50%;
  max-width: 50%;
  width: 50%;
   position: relative;
   background-color:#512e1781;
   border-radius: 8px 8px 8px 8px;
   height: auto;
   padding:2em;
   margin-left:6%;
  }

  #headbild-putzfrau-rechts {
  display:flex;
  flex-direction: column;
  flex-basis: 50%;
  max-width: 50%;
  width: 50%;
    width: auto;
   position: relative;
   background-color:transparent;
   height: auto;
  }



#headbild-putzfrau-links  p,
#headbild-putzfrau-links  h1 {
    color: white;
    text-shadow: 0px 0px 50px #4a2916;
    }


@media screen and (max-width:712px) {
  
    #putzfrau {
    margin-top:0em;
    }

  #headbild-putzfrau-flex-cont {
  flex-direction: column;
   width: 100%;
   height: auto;
    }

    #headbild-putzfrau-links {
  flex-basis: 190%;
  max-width: 100%;
  width: 100%;
   padding:2em;
   margin-left:0%;
  }

  #headbild-putzfrau-rechts {
   flex-basis: 190%;
  max-width: 100%;
  width: 100%;
  }
}


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

#unsere-arbeit {
  position: relative;
  background-color: transparent; 
  min-height: 2em;
  height: auto;
}

#unsere-arbeit article p {
 margin-top:-0.2em;
}

#unsere-arbeit article p a {
 color:#A83002;
}

#unsere-arbeit article p a:hover {
 color:black;
}

#unsere-arbeit article h1 {
 margin-bottom:1em;
}

#putzraeume {
  width: 100%;
  min-height: 2em;
  height: auto;
  }

#putzraeume article {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;

    }

#putzraeume article a {
    display: flex;
    flex-direction: column;
    flex-basis: 32%;
    max-width: 32%;
    width: 32%;
    min-height: 2em;
    height: auto;
    margin-bottom:1.5em;
    position: relative;
    border-radius: 8px 8px 8px 8px; 
    }

#putzraeume article a article {
    border-radius: 8px 8px 8px 8px; 
    opacity: 1; 
    }


#putzraeume article a article figure {
    width: 100%;
    }

#putzraeume article a article img {
    border-radius: 8px 8px 8px 8px; 
    opacity: 1; 
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    }

#putzraeume article a article img:hover {
    border-radius: 8px 8px 8px 8px;
    opacity: 0.8; 
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    }

#putzraeume article a article figcaption {
    position: absolute;
    bottom:0em;
    left:0;
    background-color: #f6c6d0be;
    padding: 0.5em 0.5em 0.5em 1em;
    width: 85%;
    border-radius: 0px 8px 0px 8px; 
     -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    }

#putzraeume article a article figcaption:hover {
    position: absolute;
    bottom:0em;
    left:0;
    background-color: pink;
    padding: 0.5em 0.5em 0.5em 1em;
    width: 85%;
    border-radius: 0px 8px 0px 8px; 
     -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    }

#putzraeume article a article figcaption p {
     color:#A83002;
    }


#putzraeume article a article.img-putzraeume {
    background-color: #57360df9;
    }

#putzraeume article a article.img-taetigkeit {
    background-color: #57360df9;
    }

#putzraeume article a article.img-anfrage {
    background-color: #f6c6d0;
    }



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

  #putzraeume {
    position: relative;
    top:0em;
    z-index: 0;
    }

  #putzraeume article a {
    flex-basis: 49%;
    max-width: 49%;
    width: 49%;
     border-radius: 8px 8px 8px 8px; 
      }

#putzraeume article a article figcaption {
    position:relative;
    background-color: #f6c6d0;
    width: 100%;
    border-radius: 0px 0px 8px 8px; 
    }
            
}


/* ***  5b. Start / Mitarbeiter / Über uns ********************** */
/* ************************************************************** */
/* ************************************************************** */

#ueber-uns { 
min-height: 2em;
height: auto;
background-color: #f6c6d0;
}

#start-ueber-uns {
  min-height: 2em;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  gap: 2%;
  }

#start-ueber-uns a {
  display: flex;
    flex-direction: column;
    flex-basis: 18%;
    max-width: 18%;
    width: 18%;
    height: auto;
    position: relative;
    border-radius: 8px 8px 8px 8px;
    flex-wrap: wrap;
    justify-content: space-between;
    }

#start-ueber-uns a figure {
    background-color: #57360df9;
    width: 100%;
    height: auto; 
    border-radius: 8px 8px 8px 8px;
    }

#start-ueber-uns a figure img {
    width: 100%;
    height: auto; 
    opacity: 1;
    border-radius: 8px 8px 8px 8px;
     -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    }

#start-ueber-uns a figure img:hover {
    width: 100%;
    height: auto; 
    opacity: 0.8;
    border-radius: 8px 8px 8px 8px;
     -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    }

/* ***  overlays *** */

.overlay-container {
	position: absolute;
    width: 100%;
    margin:0 auto;
    background-color: rgba(0,0,0,0.5);
    height: 100%;
	right: 0;
	top: 0em;
	border:none;
	padding-left:4em;
    padding-right: 4em;
	overflow: auto;
	display: block;
	opacity: 0;
	z-index: -10;
    }

.overlay-container:target {
	opacity: 1;
	z-index: 10;
}

.overlay-text {
    display:flex;
    flex-direction:row;
	position: relative;
	background-color:white;
	border:none;
	padding: 2em 2em 2em 2em;
	overflow: auto;
    min-height: 2em;
    height: auto;
	margin: 0 auto;
    margin-top:4em;
    margin-bottom:4em;
    overflow: hidden;
    }

.overlay-text-variante2 {
    display:flex;
    flex-direction:column;
	position: relative;
	background-color:white;
	border:none;
	padding: 2em 2em 2em 2em;
	overflow: auto;
    min-height: 20%;
    height: auto;
    margin: 0 auto;
    margin-top:2em;
    }

.overlay-close {
	position: absolute;
	top: 1em;
	right: 1em;
	content: "X";
    background-image: url(img/praxis-luebbert-toggle-a-55x55x-close.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
	background-color: transparent;
	font: bold 1em/150% Georgia, Times, serif;
	border: none;
	display: block;
	text-align: center;
	width: 3em;
	height: 3em;
	padding: 0.2em 0 0 0em;
    border: 0;
	text-shadow: none;
}

.overlay-close:hover {
	position: absolute;
	top: 1em;
	right: 1em;
	content: "X";
	color: white;
	background-image: url(img/praxis-luebbert-toggle-a-55x55x-close-hover.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
	background-color: transparent;
	font: bold 1em/150% Georgia, Times, serif;
	border: none;
	display: block;
	text-align: center;
	width: 3em;
	height: 3em;
	padding: 0.2em 0 0 0em;
}


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

  #start-ueber-uns {
    position: relative;
    top:0em;
    z-index: 0;
    }

  #start-ueber-uns article {
    flex-direction:column;
    }
  
  #start-ueber-uns article a article {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
    margin-bottom:2em;
      } 
    
/* ***  overlays *** */

.overlay-container {
padding: 2em 2em 2em 2em;
}

.overlay-text, .overlay-text-variante2 {
margin-top:2em;
flex-direction:column;
padding: 2em 2em 2em 2em;
}

  
}


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

    
/* ***  overlays *** */

.overlay-container {
padding: 1em 1em 1em 1em;
}

.overlay-text, .overlay-text-variante2 {
max-width: 100%;
padding: 2em 1em 1em 1em;
} 
  
}



/* ***  5b. Start / Leistungen  ********************************* */
/* ************************************************************** */
/* ************************************************************** */


#leistungen { 
min-height: 2em;
height: auto;
background-color:#B9AF8C;
background-image: url(img/back-toi.png);
background-position:left bottom;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

#rasta-flex-container { 
min-height: 2em;
height: auto;
background-color: transparent;
background-image: url(img/back-rasta-100.png);
background-position:left bottom;
background-size: cover;
background-repeat: no-repeat;
display: flex;
flex-direction: row;
flex-basis: 100%;
max-width: 100%;
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
}


#rasta-links { 
min-height: 30em;
height: auto;
background-color: transparent;
width: 50%;
}

#rasta-links figure,
#rasta-rechts figure { 
width: 100%;
  height: 100%;
}

#rasta-links img { 
	 width: 100%;
  height: 100%;
  object-fit: cover; 
  object-position: left bottom;
}

#rasta-rechts { 
min-height: 2em;
height: auto;
background-color:transparent;
width: 50%;
}

#leistungen-kasten { 
min-height: 2em;
height: auto;
background-color:white;
width: 130%;
border-radius: 8px 8px 8px 8px; 
margin-left:-30%;
padding:2em;
}

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

#rasta-flex-container { 
background-image: url(img/back-rasta-100-trans.png);
}

#leistungen-kasten { 
width: 160%;
margin-left:-60%;
}
}

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

#leistungen-kasten { 
width: 100%;
margin-left:0%;
}

#rasta-links { 
display:none;
}

#rasta-rechts { 
width: 100% ;
height: auto;
}
}

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

#leistungen-kasten { 
padding:1em;
}

}


/* ***  rosa ************************ */
/* ************************************************************** */
/* ************************************************************** */

  #oekologische-reinigung {
    background-color: transparent;
  }

/* ***  6d. Hund Saubere sSache. ******************************** */
/* ************************************************************** */
/* ************************************************************** */

#saubere-sache {
    background-repeat: repeat-y;
    background-image:url(img/back-buero-hund.jpg);
    background-position:center;
    background-size: cover;
    background-attachment: fixed;
    background-color:transparent;
    }

.saubere-sache-text-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    }

.saubere-sache-text-container article {
    background-color:transparent;
    }

#saubere-sache p {
    color: white;
    font-size: 300%;
    text-shadow: 0px 0px 50px #4a2916;
    }

.foto-fullsize { 
	width: 100%; 
	height: auto; 
}

.foto-fullsize img { 
	object-fit: cover; 
	width: 100%; 
	height: 100%;
  background: #512e1756;
}



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

 #start-kontakt-container {
    min-height: 2em;
    height: auto;
    background-color:white;
    }

#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;
}  

}