/*
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
    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
    4a. (Template) Laufband 
    4b. Hauptnavigatio
    4c. Navigation responsive Hauptmenue (im script footer) 
    4d. (Template) fixed button (notfallnummern)
    4e. (Template) Navigation im Footer

xxx 5. Main-Area / Seiteninhalt
    5b. Startbild / (Praxisschild)
    5c. (Template) UNSERE ARBEIT
    5d. (Template) THERAPIE
    5e. (Template) ÜBER UNS
    5f. (Template) PRAXIS
    5g. (Template) 10 Fragen
    5h. (Template) Warteraum/Kontakt
    5i. (Template) Onlinetherapie
    5j. (Template) Geschichten
    
*/


/* ***  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;
  margin-bottom: 0.25%;
  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:  #053c59;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    font-family: 'work_sans_lightregular', sans-serif;
    font-weight:normal;
    font-size: 100%;
    line-height: 1.5em;
    }

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

[hidden] {
	display: none;
    }

logo, li, img, .button .button-fixed .button-therapeuten .logo-luebbert, #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: #043955;
border-radius: 5px;
border:none;
color: #24b4a8;
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, nav, li, ul, form, input, table, span, tr, td, p, b, strong, figure {
  
  font-size: 0.8 rem;
  margin-bottom: 0.25%;
  line-height: 1.3;
  }
 }

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

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

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

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

a:visited {
  color: #24b4a8;
  outline:none;
  }

a:active {
  outline: #24b4a8;
  }

a:focus {
  color:  #24b4a8;
  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: #053c59;
  }

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

p.ueberschrift-normal {
  font-family: 'work_sans_lightregular', sans-serif;
  font-size: 1.8rem;
  line-height: 1.0;
  margin-bottom: 0.25%;
  color: orange;
  font-style: normal;
  font-weight: normal;
  hyphens:auto;
  outline:none;
  }

.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: 'kg_mullallyregular';
  font-size: 4.5rem;
  line-height: 1.3;
  margin-bottom: 0.25%;
  color: #053c59;
  font-style: normal;
  font-weight: normal;
  hyphens:auto;
  outline:none;
  }

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

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

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

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: #24b4a8;
  font-family: 'work_sans_lightregular', sans-serif;
  text-decoration: none;
  hyphens:auto;
  margin-bottom:1em;
}

.h1-zentriert {
  font-size: 1.8rem;
  line-height: 1.2;
  color: #24b4a8;
  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: #24b4a8;
  font-family: 'work_sans_lightregular', sans-serif;
  text-decoration: none;
  hyphens:auto;
}
.h2-zentriert {
   font-size: 1.8rem;
  line-height: 1.2;
  color: #24b4a8;
  font-family: 'work_sans_lightregular', sans-serif;
  text-decoration: none;
  text-align: center;
  hyphens:auto;
}

h3,
.h3 {
  font-size: 270%;   /* **** Überschr. Ausklapp. Leistung. ***** */
  line-height: 120%;
   color: #24b4a8;
  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;
   color: #053c59;
  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;
  color: #053c59;
  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;
height:3em;
width: 100%;
background-color: #043955;
border-radius: 15px;
border:none;
color: #24b4a8;
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;
background-color:#aedad5;
outline:none;
border:none;
margin-top:1.5em;
}

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

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

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: 5em;
    width: 100%;
    overflow: hidden;
    background-color:transparent; 
    }


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

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

.sprungmarke{
    height: 3em;
    }
}

/* ******   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. KG Mullally  ********* */

@font-face {
    font-family: 'kg_mullallyregular';
    src: url('fonts/webfont-km/kgmullally-webfont.eot');
    src: url('fonts/webfont-km/kgmullally-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/webfont-km/kgmullally-webfont.woff2') format('woff2'),
         url('fonts/webfont-km/kgmullally-webfont.woff') format('woff'),
         url('fonts/webfont-km/kgmullally-webfont.ttf') format('truetype'),
         url('fonts/webfont-km/kgmullally-webfont.svg#kg_mullallyregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

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

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

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


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

@media screen and (max-width:712px) {
 #logo-intro-smartph {
    background-color: white;
    } 
}

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

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

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

#logo-luebbert-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   ******************************************* */
/* ****  4a. (Template) Laufband   ************************** */

#laufband {
  background-color: transparent;
}

 #infobanner {
  position: relative;
  min-height: 2.8em;
  height: auto;
  background-color: #e4f3f1;
  z-index: 11;
}

.marquee {
    padding:0.5em;
		max-width: 100vw; /* iOS braucht das */
		white-space: nowrap;
		overflow: hidden;
	}

.marquee span {
		display: inline-block;
		padding-left: 105%; /* die zusätzlichen 5% erzeugen einen verzögerten Start und vermeiden so ein Ruckeln auf langsamen Seiten */
		animation: marquee 10s linear infinite;
}

	/* Optional: mouseover (oder Tipp auf dem Touchscreen) pausiert die Laufschrift */
	.marquee span:hover {
		animation-play-state: paused 
	}

	/* Make it move */
	@keyframes marquee {
	    0%   {transform: translate3d(0,0,0);}
	    100% {transform: translate3d(-100%,0,0);}
	}


@media screen and (max-width:712px) {
    
#infobanner, #laufband {
   display:none;
   }
}

/* ******   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: 350px;
   height: 105px;
   background-image:url(img/praxis-luebbert-logo.jpg);
   background-repeat: no-repeat;
   background-position: left top;
   color: transparent;
   display:block;
    }

a.logo:hover{
   padding: 0;
   text-decoration: none;
   width: 350px;
   height: 105px;
   background-image:url(img/praxis-luebbert-logo-hover.jpg);
   background-repeat: no-repeat;
   background-position: left top;
   color: transparent;
   display:block;
    }

#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: 0.8em;
    display: block;
    text-decoration: none;
    color: #053c59;
    font-family: 'work_sans_lightregular', sans-serif;
    font-size: 18px;
}

#header-nav-hauptmenue a:hover {
   color:#24b4a8;
   font-family: 'work_sans_lightregular', sans-serif;
   font-size: 18px; 
}

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

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

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

#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 {
  width: 350px;
  min-height: 76px;
  background-image:url(img/praxis-luebbert-logo.jpg);
  background-position: left top;
  }

a.logo:hover{
   width: 350px;
    min-height: 76px;
   background-image:url(img/praxis-luebbert-logo-hover.jpg);
  background-position: left top;
  }
  
.js .site-nav {
  display:none;
}
    
#logo-luebbert-712 {
    display:none;
}
}

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

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

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

a.logo:hover {
    display: none;
    }
}


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

#toggle-nav {
  display:none;
}

@media screen and (max-width:970px) {
  
#toggle-nav {
    display:block;
    position: absolute;
    right: 2em;
    top:4.5em;
    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;
}
  
#toggle-nav:hover {
    display:block;
    position: absolute;
     right: 2em;
    top:4.5em;
     width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    background-image: url(img/toggle-a-55x55-ham-butt-hover.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;
}
  
#toggle-nav:hover {
    right: 1em;
    top:1em;
    width: 40px;
    height: 40px;
    line-height: 40px;
}
}

/* ***  4d. (Template) fixed button (notfallnummern)  *********** */
/* ************************************************************** */
/* ************************************************************** */

.notfallbutton {
  position:absolute;
  min-width: 13.5em;
  max-width: 100%;
  height: 5em;
  float:right;
  top: 12em;
  right: -10em;
  padding: 0em;
  margin-top:-1.5em;
  }

.notfallbutton:hover {
  position:absolute;
	min-width: 13.5em;
  max-width: 100%;
	height: 5em;
  float:right;
  top: 12em;
  right: 0px;
  }

.notfallink {
display: inline-block;
height:3em;
width: 100%;
background-color: #043955;
border-radius: 15px;
border:none;
color: #24b4a8;
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;
}

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

  .notfallbutton .notfallink {
  background-color: #043955;
  }

  .notfallbutton .notfallink:hover {
  background-color:  #0d8286;
  }

  .notfallbutton .notfallink img {
  float:left;
  padding-left:0.4em;
  padding-left:0.4em;
  padding-top:0.3em;
  padding-bottom:0.3em;
  }

.notfallbutton .notfallink p {
color:#23e1d2;
float:left;
font-weight: bold;
padding-top:0.6em;
padding-bottom:0.6em;
  }

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

@media screen and (max-width:712px) {
  
.notfallbutton {
  width: 13.5em;
  height: 5em;
  float:none;
  top:50%;
  left:50%;
  bottom: 0.5em;
  right: auto;
  padding: 0em;
  margin-top:auto;
  transform: translate(-50%, -50%);
  }

.notfallbutton:hover {
	width: 13.5em;
	height: 5em;
  float:none;
  top:50%;
  left:50%;
  bottom: 0.5em;
  right: auto;
  padding: 0em;
  margin-top:auto;
  transform: translate(-50%, -50%);
  }

.notfallink {
width: 100%;
  }

  #notfall {
  position: fixed;
  bottom:0;
  }

  .notfallbutton .notfallink img {
  float:left;
  padding-left:0.4em;
  padding-top:0.3em;
  padding-bottom:0.3em;
  }

.notfallbutton .notfallink p {
color:#23e1d2;
float:left;
font-weight: bold;
padding-top:0.6em;
padding-bottom:0.6em;
  }
}

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

#footer-nav-bar {
    min-height: 2em;
    height: auto;
    background-color:white;
    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:white;
min-height: 1em;
height: auto;
padding: 1.5em 0em ;
text-align:left;
}

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

.copyright-text {
    color:#24b4a8;
    padding:1em 0em 2em 0em;
 }

#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:#053c59;
 }

#footer-nav-rechts a:hover {
   color:#24b4a8;
 }

@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: 100vh;
  height: auto;
  background-color:white;
  margin:0 auto;
  }

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

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

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

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

#praxisschild-links {
	display:none;
    overflow:hidden;
    min-height: 100vh;
    height:auto;
    width: 30%;
    text-align:center;
    background-color:transparent; 
    }

#praxisschild {
	
    background-color:rgba(255, 255, 255, 0.833); 
	border:none;
    overflow:hidden;
    min-height: 26em;
    height: auto;
    width: 100%;
    text-align:center;
    padding: 2em 2em 2em 2em;
    }


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

@media screen and (max-width:1200px) {
    
#praxisschild-rechts {
    width: 100%;
    padding: 8em 6em 8em 6em;
   }
    
#praxisschild-links {
display:none;
}
}

@media screen and (max-width:970px) {
    
#praxisschild-rechts {
width: 100%;
text-align:center;
    position: relative;
   max-width: 1400px;
  margin: 0 auto;
  background-color:transparent;
  padding-left:4em;
  padding-right: 4em;
   }
    
#praxisschild-links {
  display:none;
   } 
}

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

/* ***  5c. (Template) UNSERE ARBEIT **************************** */
/* ************************************************************** */
/* ************************************************************** */

#leistungen-menue {
position:relative;
min-height: 2em;
max-width: 90em;
width:auto; 
height: auto;
display: flex;
flex-direction:row;
margin-top:2em;
height: auto;
margin: 0 auto;
margin-top:3em;
overflow: hidden;
background-color:white;
}

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

figure#kids-foto, figure#eltern-foto {
  width: 100%;
  min-height: 2em;
  height:auto;
}

#kids {
padding-right:1.5em;
}

#eltern {
padding-left:1.5em;
}

.bild-kkarte{
width: 100%;
height: auto;
}

.bild-frisur {
  padding-top:1em;
  }

.bild-frisur-712 {
  display:none;
  }

.bild-handy {
  padding-bottom:1em;
  }

.bild-handy-712 {
  padding-bottom:1em;
  display:none;
  }

ul#tabelle-probleme {
padding-left:1em;
-webkit-column-break-inside: avoid;
   }


aside.tab-prob {
  -webkit-column-break-inside: avoid;
 }

.container-tab-probleme {
	-webkit-column-break-inside: avoid;
}

.tabelle-712 {
	display:none;
}

.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-spalten-def {
  column-count: 3; 
  column-gap:2em;
  column-width: 270px; 
}

.overlay-spalten-def p {
   text-align: justify; 
   hyphens:auto;
   orphans:3; widows: 3;
   margin-top: 0;
}

.overlay-spalten-def p.text-712,text-970-normal, p.text-spezial-normal-hypno, p.text-spezial-normal-hypno-712, p.text-spezial-normal-verhal, p.text-spezial-712-verhal {
   text-align:left; 
   hyphens:auto;
   orphans:3; widows: 3;
   margin-top: 0;
}

.overlay-spalten-def h3 {
  column-span: all;
  }

p.namen-overlay {
  font-size: 270%;   /* **** Überschr. Overlay Namen. ***** */
  line-height: 120%;
   color: #24b4a8;
  font-family: 'work_sans_lightregular', sans-serif;
  text-decoration: none;
  hyphens:auto;
}

p.namen-untertitel-overlay {
  font-size: 140%;   /* **** Überschr. Overlay Namen. ***** */
  line-height: 120%;
   color: #053c59;
  font-family: 'work_sans_mediumregular', sans-serif;
  text-decoration: none;
  hyphens:auto;
}

p.ueberschr-top {
  font-size: 150%;   /* **** Überschr. Overlay Namen. ***** */
  line-height: 130%;
  color: #053c59;
  font-family: 'work_sans_mediumregular', sans-serif;
  text-decoration: none;
  hyphens:auto;
  margin-bottom:0;
}

p.ueberschr-top-712 {
  display:none;
}

.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:1700px) {
  
aside.tab-prob{
display:none;
 }
  
.tabelle-712{
	display:block;
}
}

@media screen and (max-width:1300px) {
  
ul.tabelle-probleme{
	display:none;
}
  
.üründ-kids{
	display:none;
    }
 
aside.tab-prob{	
 display:none;
 }
}

@media screen and (max-width:970px) {
  
#leistungen-menue {
flex-direction:column;
width: 100%;
padding-left:1px;
padding-right:1px;
background-color:white;
margin-top: 0em;
}
  
.gesichter{
flex-direction: column;
flex-basis: 100%;
max-width: 100%;
width: 100%;
margin: 0em 0 0 0;
}
  
#eltern, #kids{
margin-top: 4em;
}
  
#kids {
padding-right:0em;
}

#eltern {
padding-left:0em;
}
    
.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) {
  
.bild-frisur {
  display:none;
  }
  
.bild-frisur-712 {
  padding-bottom:0em;
  padding-left:4em;
  padding-right:4em;
  display:flex;
  }
  
.bild-handy {
display:none;
  }

.bild-handy-712 {
  padding-bottom:2em;
  padding-left:4em;
  padding-right:4em;
  display:flex;
  }
  
.bild-kkarte{
padding-left:4em;
padding-right: 4em;
}
    
.overlay-container {
padding: 1em 1em 1em 1em;
}
  
.overlay-text, .overlay-text-variante2 {
max-width: 100%;
padding: 2em 1em 1em 1em;
} 
}


/* ***  5d. (Template) Therapie ********************************* */
/* ************************************************************** */
/* ************************************************************** */

#bereich-therapie {
background-color: #e4f3f1;
}

#h1-50-prozent {
  width: 100%;
}

.ausklapp-container {
  min-height: 20px;
  height: auto;
  min-width: 100%;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto;
}

#mehr-verh {
background-color: white;
background-repeat: no-repeat;
display: inline-block;
height:2em;
height: auto;
width: 100%;
border-radius: 5px;
border:none;
color: #043955;
text-align: left;
padding: 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;
background-size: contain;
background-position: left;
text-align-last: left;
padding-right: 2em;
}

#mehr-verh:hover {
  background-color:#aedad5;
  }

#mehr-schema {
background-color: white;
display: inline-block;
min-height:2em;
height: auto;
width: 100%;
border-radius: 5px;
border:none;
color: #043955;
text-align: left;
padding: 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;
  }

#mehr-schema:hover {
  background-color:#aedad5;
  }
  
#mehr-emdr {
background-color: white;
display: inline-block;
min-height:2em;
height: auto;
width: 100%;
border-radius: 5px;
border:none;
color: #043955;
text-align: left;
padding: 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;
  }

#mehr-emdr:hover {
  background-color:#aedad5;
  }

#mehr-hypno {
background-color: white;
display: inline-block;
min-height:2em;
height: auto;
width: 100%;
border-radius: 5px;
border:none;
color: #043955;
text-align: left;
padding: 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;
  }

#mehr-hypno:hover {
  background-color:#aedad5;
  }

.balken-link {
  padding: 0.5em;
  margin: 0.1em;
  font-size: 1.1rem;
  outline: none;
  width: 100%;
  
  }

.balken-link:hover {
  padding: 0.5em;
  margin: 0.1em;
  font-size:1.1rem;
  outline: none;
  background-color:#aedad5;
  width: 100%;
  }

.grid-raster {
  display: grid;
  grid-template-columns: 33% 1fr 33%;
  background-color: white;
  padding:1em;
  margin-top:1em;
  margin-bottom:2em;
  }

.grid-item1-verh {
  width: 2fr;
  grid-column: 1 / span 3;
  }

.grid-item1-schema {
  width: 2fr;
  grid-column: 1 / span 3;
  }

.grid-item3-verh {
  background-color: white;
  width: 2fr;
  grid-row: span 1;
  grid-column: 1 / span 2;
  }

.grid-item1-emdr {
  background-color: white;
  width: 2fr;
  grid-column: 1 / span 3;
  }

.grid-itemx-emdr {
 display: flex; 
    justify-content: right; 
    align-items: flex-start;
  background-color:white;
  grid-column: span 1;
  padding-top:1em;
  background-color: white;
  padding-left:1em;
  }

.grid-item3-emdr {
  background-color: white;
  width: 1fr;
  padding-left: 1em;
  grid-row: span 1;
  grid-column: 3 / span 1;
  }

.h3-712 {
  display:none;
  }

.text-spezial-712-verhal {
  color: #24b4a8;
  font-size: 180%;
  line-height: 110%;
  font-family: 'work_sans_lightregular', sans-serif;
  text-decoration: none;
  display:none;
  }

.text-spezial-normal-verhal {
  color: #24b4a8;
  font-size: 180%;
  line-height: 110%;
  font-family: 'work_sans_lightregular', sans-serif;
  text-decoration: none;
  }

.text-spezial-normal-y {
  color: #24b4a8;
  font-size: 180%;
  line-height: 110%;
  font-family: 'work_sans_lightregular', sans-serif;
  text-decoration: none;
  }

.text-spezial-normal {
  color: #24b4a8;
  font-size: 180%;
  line-height: 125%;
  font-family: 'work_sans_lightregular', sans-serif;
  text-decoration: none;
  }

.text-spezial-normal-schema {
  color: #24b4a8;
  font-size: 180%;
  line-height: 110%;
  font-family: 'work_sans_lightregular', sans-serif;
  text-decoration: none;
  padding-top:1em;
  text-justify: none;
  }

.text-spezial-normal-schema-712 {
  color: #24b4a8;
  font-size: 180%;
  line-height: 110%;
  font-family: 'work_sans_lightregular', sans-serif;
  text-decoration: none;
  padding-top:1em;
  text-justify: none;
  display:none;
  column-span: all;
  }

.text-spezial-normal-hypno {
  color: #24b4a8;
  font-size: 180%;
  line-height: 110%;
  font-family: 'work_sans_lightregular', sans-serif;
  text-decoration: none;
  padding-top:1em;
  padding-bottom:1em;
  text-justify: none;
}

.text-spezial-normal-hypno-712 {
  color: #24b4a8;
  font-size: 180%;
  line-height: 110%;
  font-family: 'work_sans_lightregular', sans-serif;
  text-decoration: none;
  padding-top:1em;
  padding-bottom:0em;
  display:none;
  column-span: all;
  text-justify: none;
}

.text-spezial-normal-z {
  color: #24b4a8;
  font-size: 180%;
  line-height: 110%;
  font-family: 'work_sans_lightregular', sans-serif;
  text-decoration: none;
  padding-top:1em;
  padding-bottom:1em;
  }

.text-spezial-712-z {
  color: #24b4a8;
  font-size: 180%;
  line-height: 110%;
  font-family: 'work_sans_lightregular', sans-serif;
  display: none;
  }


/* TABLETS *** Therapien ********** */
/* ********************************* */

@media screen and (max-width:1300px) {
    
#h1-50-prozent {
  width: 100%;
}
 
.grid-item3-verh {
  background-color: white;
  width: 2fr;
  grid-row: span 1;
  grid-column: 1 / span 3;
}
  
.grid-item3-hypno {
  background-color: white;
  width: 2fr;
  grid-row: span 1;
  grid-column: 1 / span 3;
  display:block;
  }
  
.text-spezial-normal-hypno {
  display: none;
  text-justify: none;
  }

.text-spezial-normal-hypno-712 {
  display: flex;
   }
  
   .text-spezial-normal-schema {
display:none;
  }

.text-spezial-normal-schema-712 {
  
  display:flex;
  }
  
  
#mehr-verh, #mehr-emdr, #mehr-hypno {
  width:100%;
  }
    
.br-entf {
   display:none;
}
}


@media screen and (max-width:1100px) {
      
.grid-raster {
  display: grid;
  grid-template-columns: 50% 0fr 50%;
  background-color: white;
  padding:2em;
}

.grid-itemx-emdr {
 display: flex; 
justify-content: right; 
align-items: flex-start;
  background-color:white;
  grid-column: span 3;
  padding-top:1em;
  padding-left:0em;
  }
  
.h3-712 {
  display:block;
  }
  
.h3-normal {
  display:none;
  }
  
.grid-item3-verh2 {
  background-color: white;
  grid-column:span 3;
  grid-row: 2/span 1;
  }
  
.text-spezial-712-verhal {
  display:flex;
  column-span: all;
  padding-top:1em;
  }

.text-spezial-normal-verhal {
  display:none;
  }
  
.bild-emdr {
padding-bottom: 2em;
}  
}


@media screen and (max-width:970px) {
    
.grid-raster {
  display: grid;
  grid-template-columns: 50% 0fr 50%;
  background-color: white;
  padding:1em;
  margin-bottom:2em;
  }
  
.grid-item1-verh {
  width: 3fr;
  grid-column: 1 / span 3;
  }
  
.grid-item3-verh {
  background-color: white;
  width: 1fr;
  grid-column: 1 / span 3;
  }
  
.grid-item3-emdr {
  background-color: white;
  width: 1fr;
  padding-left: 0em;
  padding-top: 2em;
  grid-row: span 1;
  grid-column: 1 / span 3;
  }
  
.bild-therapien {
 padding-left:3em;
 padding-right:3em;
}
}


/* MOBILE *** Therapien ************ */
/* ********************************* */

@media screen and (max-width:712px) {
  
.schema-handp-normal {
  float:right;
  display:none;
  }

.schema-handp-712 {
  float:right;
  display:block;
  }
  
 .text-spezial-normal-y {
  font-size: 145%;
  }
  
.bild-vater {
 padding-left:0em;
 padding-right:0em;
}
    
.bild-therapien {
 padding-left:0em;
 padding-right:0em;
}
}


/* ***  5e. (Template) ÜBER UNS  ******************************** */
/* ************************************************************** */
/* ************************************************************** */

#therapeuten-inhalt {
min-height: 2em;
height: auto;
display: flex;
flex-direction:row;
margin-top:2em;
}

.drei-therapeuten{
display: flex;
flex-direction: column;
flex-basis: 33.33333333%;
max-width: 33.33333333%;
width: 33.33333333%;
flex: 0 0 auto;
box-sizing: border-box;
padding:0 1.5em 0 1.5em;
background-color: white;
}

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


figure#karin-foto-overlay, figure#tina-foto-overlay, figure#hund-foto-overlay {
  width: 100%;
  min-height: 300px;
  height: auto;
  background-color:#f9f8f9;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

figure#karin-foto-overlay {
  background-image:url(img/praxis-luebbert-portrait-lubbert-2-groesser.png);
}

figure#tina-foto-overlay {
  background-image:url(img/praxis-luebbert-portrait-lazardzig-2-groesser.png);
}

figure#hund-foto-overlay {
  background-image:url(img/praxis-luebbert-portrait-hund-2-groesser.png);
}


figure#karin-uberschr-overlay, figure#tina-uberschr-overlay, figure#hund-uberschr-overlay {
  width: 100%;
  min-height: 300px;
  height: auto;
  
  background-color:#f9f8f9;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

figure#karin-uberschr-overlay {
  background-image:url(img/praxis-luebbert-unters-karin.png);
}

figure#tina-uberschr-overlay {
  background-image:url(img/praxis-luebbert-unters-tina.png);
}

figure#hund-uberschr-overlay {
  background-image:url(img/praxis-luebbert-unters-hund.png);  
}

#karin-overlay-details-links, #tina-overlay-details-links, #hund-overlay-details-links {
  width: 100%;
  min-height: 310px;
  height: 100%;
  background-color:#f9f8f9;
  margin-top:1em;
  padding-right:1em;
  padding-left: 1em;
}

#karin-overlay-details-rechts, #tina-overlay-details-rechts, #hund-overlay-details-rechts {
  width: 100%;
  min-height: 310px;
  height: auto;
  background-color:white;
  margin-top:1em;
  padding-right:2em;
  padding-left: 1em;
}

#karin-links, #tina-links, #hund-links {
  background-color:white;
  min-height: 2em;
  height: auto;
  width: 30%;
  padding-right:0.5em;
}

#karin-rechts, #tina-rechts, #hund-rechts {
  background-color:transparent;
  min-height: 2em;
  height: auto;
  width: 70%;
  padding-left:0.5em;
  padding-top:0em;
}

.zahlen-lebenslauf {
   color: #24b4a8;  /* **** Überschr. Zahlen lebenslauf. ***** */
  font-family: 'work_sans_lightregular', sans-serif;
  text-decoration: none;
  font-size: 1.5em;
  margin-bottom: 0.25%;
  margin-top:1%;
  line-height: 1.5;
  background-color:transparent;
}

.kontakt-icons-lebenslauf{
  border: none;
  width: 100%;
}

th,
td  {
   border: none;
   vertical-align:text-top;
}

.spalte1  {
  width: 2em;
}

.name-overlay-712  {
display: none;
}


/* TABLETS ************************* */
/* ********************************* */

@media screen and (max-width:970px) {
  
.drei-therapeuten{
flex-basis: 50%;
max-width: 50%;
width: 50%;
}
  
#hund {
display:none
}
  
#karin-links, #tina-links, #hund-links {
  width: 100%;
   padding-right:0em;
}

#karin-rechts, #tina-rechts, #hund-rechts {
 width: 100%;
padding-left:0em;
padding-top:0em;
}
  
article#karin-overlay-details-rechts, article#tina-overlay-details-rechts, article#hund-overlay-details-rechts {
  padding-right:0em;
  padding-left: 0em;
}
  
article#karin-overlay-details-links, article#tina-overlay-details-links, article#hund-overlay-details-links {
  display:none;
}
  
figure#karin-uberschr-overlay, figure#tina-uberschr-overlay, figure#hund-uberschr-overlay {
  display:none;
}
  
.name-overlay-712  {
display: block;
}
}


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

@media screen and (max-width:712px) {  
#therapeuten-inhalt {
flex-direction:column;

}
  
.drei-therapeuten{
flex-basis: 100%;
max-width: 100%;
width: 100%;
padding:2em 0em 2em 0em;
}
}


/* ***  5f. (Template) PRAXIS  ********************************** */
/* ************************************************************** */
/* ************************************************************** */

#praxis {
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-color: #e4f3f1;
}

#praxis-inhalt {
display:flex;
flex-direction: row;
}

#praxis-text {
width: 100%;
padding-right:2em;
background-color: transparent;
flex-direction:column;
align-items:flex-start;
text-align-last:left;
}

#galerie-container {
width: 100%;
min-height: 2em;
height: auto;
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:flex-start;
text-align-last:center;
padding-left:1em;
background-repeat: no-repeat;
background-color:transparent;
z-index: 9;
}

#galerie-bilder {
  display: grid;
  width: 100%;
  grid-gap: 1rem;
  margin-top:8em;
  grid-template-columns: repeat(1, 1fr);
  background-position: center;
}

img.g-bild2 {
  background-image:url(modern-slide-in/images/g-bild2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
  height: 5rem;
}

img.g-bild2-712 {
  display:none;
  background-image: url(modern-slide-in/images/g-bild2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
  height: 5rem;
}

img.g-bild1 {
  background-image: url(modern-slide-in/images/g-bild.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
  height: 5rem;
}

img.g-bild3 {
  background-image: url(modern-slide-in/images/g-bild3.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild4 {
  background-image: url(modern-slide-in/images/g-bild4.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild5 {
  background-image: url(modern-slide-in/images/g-bild5.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild6 {
  background-image: url(modern-slide-in/images/g-bild6.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild7 {
  background-image: url(modern-slide-in/images/g-bild7.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild8 {
  background-image: url(modern-slide-in/images/g-bild8.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild9 {
  background-image: url(modern-slide-in/images/g-bild9.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild10 {
  background-image: url(modern-slide-in/images/g-bild10.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild11 {
  background-image: url(modern-slide-in/images/g-bild11.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild12 {
  background-image: url(modern-slide-in/images/g-bild12.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild13 {
  background-image: url(modern-slide-in/images/g-bild13.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild13b {
  background-image: url(modern-slide-in/images/g-bild13b.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild13c {
  background-image: url(modern-slide-in/images/g-bild13c.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild14 {
  background-image: url(modern-slide-in/images/g-bild14.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
  height: 5rem;
}

img.g-bild15 {
  background-image:url(modern-slide-in/images/g-bild.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild16 {
  background-image: url(modern-slide-in/images/g-bild16.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild17 {
  background-image: url(modern-slide-in/images/g-bild17.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild18 {
  background-image: url(modern-slide-in/images/g-bild18.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild19 {
  background-image: url(modern-slide-in/images/g-bild34-v.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild20 {
  background-image: url(modern-slide-in/images/g-bild20.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild21 {
  background-image: url(modern-slide-in/images/g-bild21.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild22 {
  background-image: url(modern-slide-in/images/g-bild22.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild22b {
  background-image: url(modern-slide-in/images/g-bild22b.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position:left;
  height: 5rem;
}

img.g-bild23 {
  background-image: url(modern-slide-in/images/g-bild23.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild24 {
  background-image: url(modern-slide-in/images/g-bild32-v.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild25 {
  background-image: url(modern-slide-in/images/g-bild33-v.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild26 {
  background-image: url(modern-slide-in/images/g-bild26.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild27 {
  background-image: url(modern-slide-in/images/g-bild27.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild28 {
  background-image: url(modern-slide-in/images/g-bild28.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
  height: 5rem;
}

img.g-bild29 {
  background-image: url(modern-slide-in/images/g-bild29.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild37-v {
  background-image:url(modern-slide-in/images/g-bild37-v.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild38-v {
  background-image:url(modern-slide-in/images/g-bild38-v.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
}

img.g-bild30 {
  background-image: url(modern-slide-in/images/g-bild30.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 5rem;
  
}

#notfallbild h2:hover{
  background-color: #053c59;
}

#notfallbild-712{
  display:none; 
}

.flexbox {
    min-height: 1em;
    height: auto;
    display:flex;
    overflow:hidden;
    }


/* TABLETS ************************* */
/* ********************************* */


@media screen and (max-width:970px) {
#praxis-inhalt {
flex-direction: column;
} 
  
#praxis-text {
padding-right:0em;
}
  
#galerie-container {
padding-left:0em;
}
  
#galerie-bilder {
margin-top:2em;
}
}


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

@media screen and (max-width:712px) {
  
#notfallbild{
  display:none; 
}
  
#notfallbild-712{
  display:inline;
}
}

/* ***  5g. (Template) 10 Fragen ******************************* */
/* ************************************************************* */
/* ************************************************************* */

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

.fragen-flex-cont{
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;
}

#fragen-ausklapp-container-links{
padding-right:1em;
}

#fragen-ausklapp-container-rechts{
padding-left:1em;
}

#frage1-link, #frage2-link, #frage3-link, #frage4-link, #frage5-link, #frage6-link, #frage7-link, #frage8-link, #frage9-link, #frage10-link {
background-color: #e4f3f1;
background-repeat: no-repeat;
display: inline-block;
height:2em;
height: auto;
width: 100%;
border-radius: 5px;
border:none;
color: #043955;
text-align: left;
padding: 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;
  
background-size: contain;
background-position: left;
text-align-last: left;
padding-right: 2em;
}

#frage1-link:hover, #frage2-link:hover, #frage3-link:hover, #frage4-link:hover, #frage5-link:hover, #frage6-link:hover, #frage7-link:hover, #frage8-link:hover, #frage9-link:hover, #frage10-link:hover {
  background-color:#aedad5;
  }


/* TABLETS ************************* */
/* ********************************* */

@media screen and (max-width:1100px) {
.frag{
flex-direction:column;
}
  
.fragen-flex-cont{
display: flex;
flex-direction: column;
flex-basis: 108%;
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;
}
  
#fragen-ausklapp-container-links{
padding-right:0em;
}

#fragen-ausklapp-container-rechts{
padding-left:0em;
}  
}


/* *** 5h. (Template) Warteraum/Kontakt ************************ */
/* ************************************************************* */
/* ************************************************************* */

#bereich-warteraum {
background-image: url(img/praxis-luebbert-stuehle3.jpg);
background-repeat: no-repeat;
background-position:center;
background-attachment:fixed;
background-size:cover;
width: 100%;
min-height: 20em; 
height: auto;
align-items: center;
}

#kontakt-text {
    position: relative;
	background-color:#e4f3f1;
	border:none;
    overflow:hidden;
    min-height: 26%;
    height: auto;
    display:block;
    width: 50%;
    text-align:left;
    padding: 2em 2em 2em 2em;
    }

.ueberschr-telf-sprechst {
  font-size: 1.8rem;
  line-height: 1.2;
  color: #24b4a8;
  font-family: 'work_sans_lightregular', sans-serif;
  text-decoration: none;
  hyphens:auto;
}

#info-telsprech {
width: 100%;
background-color:transparent;
height: auto;
padding-right: 2em;
}

#info-telsprech a:hover {
color:#053c59;
}

.kontakt-form {
  width: 100%;
  min-height: 2em;
  height: auto;
  display: grid;
  grid-gap: 1rem;
  margin-top:2em;
  grid-template-columns:auto;
  background-color:transparent;
  }

iframe {
    position:relative;
    width: 100%;
    min-height:40em;
    height: auto;
    overflow: hidden;
    background-color:transparent;
    border: none;
    }

/* TABLETS ************************* */
/* ********************************* */

@media screen and (max-width:1208px) {
  
iframe {
min-height:40em;
background-color:transparent;
padding-right:0.1em;
}  
}


@media screen and (max-width:970px) {
  
#kontakt-text {
    position: relative;
	background-color:#e4f3f1;
	border:none;
    overflow:hidden;
    min-height: 26%;
    height: auto;
    display:block;
    width: 100%;
    text-align:left;
    padding: 1em 3em 2em 3em;
    }
    
.kontakt-form {
  margin-top:0.5em;

} 
}

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


@media screen and (max-width:734px) {
  
iframe {
min-height:42em;
background-color:transparent;
} 
}

@media screen and (max-width:712px) {
  
#kontakt-text {
   padding: 2em 2em 2em 2em;
   } 
}

/* 5i. (Template) Onlinetherapie ******************************** */
/* ************************************************************** */

#onlinetherapie {
min-height: 5em;
height:auto;
background-color: #AEDDD7;
}

#onlinetherapie-text {
padding-top: 2em;
padding-bottom: 2em;
}

 
/* ****. 5j. (Template) Geschichten ***************************** */
/* ************************************************************** */

#bereich-geschichten {
position: relative;
width:  100%;
height: auto;
margin: 0 auto;
background-image:url(img/praxis-luebbert-papier.jpg);
background-repeat: no-repeat;
background-size: cover;
}

#geschichten-container {
width:  90%;
min-height: 2em;
height: auto;
flex-direction:row;
margin-top:2em;
margin-bottom:5em;
margin:0 auto;
padding-bottom:3em;
}

.drei-geschichten{
display: flex;
flex-direction: column;
flex-basis: 33.33333333%;
max-width: 33.33333333%;
width: 33.33333333%;
flex: 0 0 auto;
box-sizing: border-box;
padding:0 0.5em 0 0.5em;
margin-bottom: 2em;
margin-top: 2em;
}

.geschichten-column {
display:flex;
height: auto;
flex-direction:column;
justify-content: space-between;
}

figure#schmetterling-foto {
  background-image:url(img/praxis-luebbert-schmetterl-button2.png);
  width: 100%;
  min-height: 12em;
  height: auto;
  background-color:transparent;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin:0 auto;
  transition: all 300ms; 
  -webkit-transition: all 300ms; 
}

figure#schmetterling-foto:hover {
  background-image:url(img/praxis-luebbert-schmetterl-button.png);
  width: 100%;
  min-height: 12em;
  height: auto;
  background-color:transparent;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin:0 auto;
  transition: all 300ms; 
  -webkit-transition: all 300ms; 
}

figure#elefant-foto {
  background-image:url(img/praxis-luebbert-elefant-button.png);
  width: 100%;
  min-height: 12em;
  height: auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin:0 auto;
  transition: all 300ms; 
  -webkit-transition: all 300ms; 
}

figure#elefant-foto:hover {
  background-image:url(img/praxis-luebbert-elefant-button-hover.png);
  width: 100%;
  min-height: 12em;
  height: auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin:0 auto;
  transition: all 300ms; 
  -webkit-transition: all 300ms; 
}

figure#loewe-foto {
  background-image:url(img/praxis-luebbert-loew-button.png);
  width: 100%;
  min-height: 12em;
  height: auto;
  background-color:transparent;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin:0 auto;
  transition: all 300ms; 
  -webkit-transition: all 300ms; 
}

figure#loewe-foto:hover {
  background-image:url(img/lpraxis-luebbert-oew-button-hover.png);
  width: 100%;
  min-height: 12em;
  height: auto;
  background-color:transparent;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin:0 auto;
  transition: all 300ms; 
  -webkit-transition: all 300ms; 
}


figure#schmetterling-foto-overlay, figure#elefant-foto-overlay, figure#loewe-foto-overlay {
  width: 100%;
  min-height:auto;
  height: auto;
  background-color:white;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

article#schmetterling-overlay-details-links, article#elefant-overlay-details-links, article#loewe-overlay-details-links {
  width: 100%;
  min-height: 310px;
  height: 100%;
  margin-top:1em;
  padding-right:1em;
  padding-left: 1em;
}

article#schmetterling-overlay-details-rechts, article#elefant-overlay-details-rechts, article#loewe-overlay-details-rechts {
  
  width: 100%;
  min-height: 310px;
  height: auto;
  background-color:white;
  margin-top:1em;
  padding-right:4em;
  padding-left: 4em;
}

#schmetterling-rechts, #elefant-rechts, #loewe-rechts {
  background-color:transparent;
  min-height: 2em;
  height: auto;
  width: 100%;
  padding-left:0.5em;
  padding-top:0em;
}

.buchst-m, .buchst-a, .buchst-e {
  display:block;
  float:left;
  padding-right:1em;
}

.container-illu-elefant {
  background-position: bottom;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
    height:100%;
}


/* TABLETS ************************* */
/* ********************************* */

@media screen and (max-width:970px) {
  
#geschichten-container {
width:  100%;
min-height: 2em;
height: auto;
display: flex;
flex-direction:row;
margin-top:2em;
margin-bottom:5em;
margin:0 auto;
}
  
#schmetterling-links, #elefant-links, #loewe-links {
  width: 100%;
   padding-right:0em;
}

#schmetterling-rechts, #elefant-rechts, #loewe-rechts {
 width: 100%;
padding-left:0em;
padding-top:0em;
}
  
article#schmetterling-overlay-details-rechts, article#elefant-overlay-details-rechts, article#loewe-overlay-details-rechts {
  padding-right:0em;
  padding-left: 0em;
  margin-top:0em;
}
  
article#schmetterling-overlay-details-links, article#elefant-overlay-details-links, article#loewe-overlay-details-links {
  display:none;
}
  
figure#schmetterling-foto-overlay, figure#elefant-foto-overlay, figure#loewe-foto-overlay {
 display:none;
}
}

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

@media screen and (max-width:712px) {
  
#geschichten-container {
padding-bottom: 1em;
}
 
.drei-geschichten{
  display: flex;
  flex-direction: column;
 flex-basis: 100%;
    max-width: 100%;
    width: 100%;
    flex: 0 0 auto;
    box-sizing: border-box;
   padding:0em 0em 0em 0em;
  }
  
#geschichten-container {
min-height: 20px;
height: auto;
display: flex;
flex-direction:column;
margin-top:0em;
margin-bottom:0em;
}
  
figure#schmetterling-foto {
 width: 60%; 
  
}
figure#schmetterling-foto:hover {
 width: 60%;  
}

figure#elefant-foto {
  width: 60%; 
}
figure#elefant-foto:hover {
  width: 60%; 
}

figure#loewe-foto {
 width: 60%;  
}
figure#loewe-foto:hover {
 width: 60%;   
}
  
figcaptione#loewe figcaptione#schmetterling figcaptione#elefant {
align-items: center;  
}
  
.button-geschichten {

  min-height: 5em;
  
padding: 0.25em;
margin-top:0em;
}

.button-geschichten:hover {
min-height: 5em;
padding: 0.25em;
margin-top:0em;
}
  
.buchst-m, .buchst-a, .buchst-e {
width: 30%;  
}  
}