@charset "UTF-8";

/* ----------------------------------------------------------------------------- *
 *          Responsive Webdesign - Praxisbeispiele - 3. Auflage 2017             *
 *           In atmosphere.css sind Farben und Schriften definiert,              *
 *                  die für alle Beispiele verwendet werden.                     *
 *       In der layout.css stehen ergänzende Styles für alle Layoutstufen.       *
 *          Autoren: Andrea Ertel und Kai Laborenz (Rheinwerk Verlag)            *
 * ----------------------------------------------------------------------------- */


/* ----------------------------------------------------------------------------- *
 *          Basisschriftgröße auf 10px setzen --> 62,5% von 16px                 *
 *    erleichtert uns die Umrechnung der weiteren Schriftgrößen in rem / em      *
 *        Beispiel: 1.0rem entspricht 10px und 1.6rem entspricht 16px            *
 * ----------------------------------------------------------------------------- */

html {
   font-size: 62.5%;
}

body {
   font-size: 1.6px; /* Fallback für alte Browser, die rem nicht kennen */
   font-size: 1.6rem; /* 16px */
   line-height: 1.5; /* 24px */
   font-family: 'Roboto', sans-serif; /* Google Webfont */
   font-weight: 300;
   color: #444; /* dunkelgrau */
   background-color: #efefef; /* hellgrau */
}

.page-wrapper {
   background-color: #189ca4; /* blau-gruen */
}

.header {
   background-color: #da0545; /* rot */
}

.main-wrapper {
   background-color: #fff; /* weiss */
   padding: 2em 2rem;
}
.anfahrt-psychotherapie-schlarb-mapp-wrapper {
         position: relative;
         padding-bottom: 82.3529%;
         height: 0;
}
iframe {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
}
.footer {
   background-color: #000; /* schwarz */
   color: #fff; /* weiss */
}

h1, h2, h3 {
   font-family: 'Raleway', sans-serif; /* Google Webfont */
   font-weight: 500;
   line-height: 130%;
   color: #da0545; /* rot */
}

h1 {
   font-size: 2.6rem; /* 26px */
}
#textbereich_datenschutz h1{
                         color: black;
                         }
#textbereich_impressum h1, h2, h3 {
                         color: black;
                         }
#textbereich_kontaktseite h1{
                         color: black;
                         }
h2 {
   font-size: 2.2rem; /* 22px */
}

h3 {
   font-size: 2.0rem; /* 20px */
}

p.teasertext {
   font-size: 1.7rem; /* 17px */
   line-height: 150%;
}

a:link, a:visited {
   color: #189ca4; /* blau-gruen */
   font-weight: 600;
}

a:hover, a:focus, a:active {
   color: #fff; /* weiss */
   background-color: #189ca4; /* blau-gruen */
}

.logo {
   font-family: 'Raleway', sans-serif; /* Google Webfont */
   font-size: 2.1rem;
   font-weight: 500;
   line-height: 1;
   letter-spacing: 0.3em;
   text-align: center;
   padding: 0.5em;
   color: white;
}


.main-nav {
   background-color: #189ca4; /* blau-gruen */
}

.main-nav li {
   list-style: none;
   text-align: center;
}

.main-nav a, .main-nav b {
   font-weight: 300;
}

.main-nav a:link, .main-nav a:visited {
   color: #fff; /* weiss */
}

.main-nav a:hover, .main-nav a:focus, .main-nav a:active {
   background-color: #96cfbf; /* mint-gruen */
   color: #fff; /* weiss */
}

.main-nav__item-act {
   color: #189ca4; /* blau-gruen */
   background-color: #fff; /* weiss */
}

.blindtext,
.blindtext * {
        color: black; /*!important; schwarz*/
}
.blindtext span{
font-weight: bold ;
}
#kontaktformular{
  background-size: 25% 15%;
  background-color: lightgrey;
  width: 95%;
  padding: 1em;
  margin-bottom: 2em;
  box-sizing: border-box;
  border: solid lightblue 0.2em;
  border-radius: 0.5em;
  /*opacity: 0.6;    */

}
form > div { margin-bottom: 1em;}
#kontaktformular  label {
  display: block;   /* Beschriftung auf eigener Zeile */
  cursor: pointer;  /* Mauszeiger wird zur Hand */
  margin-bottom: 0.25em;
  color: blue;

}

#kontaktformular textarea {
  width: 520px;
  padding: 0.25em;
  margin-bottom: 1em;
  opacity: 0.8;
}
textarea {
  max-width: 100%;
  min-height: 10em;
}
input:focus,
textarea:focus {
background-color: #ffdda0;
}