@charset "UTF-8";
/*
Description: Theme fuer susanne-petzolt.de - HTML5, CSS3
Author: Ralph Segert
Date: 05/2019
Update: 06/2019
Author URI: http://segert.net
*/
* {
  margin: 0;
  padding: 0; }

html {
  box-sizing: border-box; }

*, *::before, *::after {
  box-sizing: inherit; }

body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  font-size: 100%;
  font-family: 'Affogato-Regular', Helvetica, Verdana, sans-serif;
  justify-content: center;
  background-color: #6e6e6e; }

@font-face {
  font-family: 'Affogato-Regular';
  src: url("font/affogato/Affogato-Regular.eot"), url("font/affogato/Affogato-Regular.woff"), url("font/affogato/Affogato-Regular.ttf"); }

@font-face {
  font-family: 'Affogato-Medium';
  src: url("font/affogato/Affogato-Medium.eot"), url("font/affogato/Affogato-Medium.woff"), url("fontaffogato/Affogato-Medium.ttf"); }

@font-face {
  font-family: 'Affogato-Bold';
  src: url("font/affogato/Affogato-Bold.eot"), url("font/affogato/Affogato-Bold.woff"), url("font/affogato/Affogato-Bold.ttf"); }

a:focus {
  outline: none; }

img, fieldset {
  border: 0; }

img {
  vertical-align: middle; }

a {
  border: 0;
  text-decoration: none; }

.clearfix::after {
  content: " ";
  display: block;
  clear: both; }

strong {
	font-family: "Affogato-Medium", Helvetica, Verdana, sans-serif;
	font-weight: bold;
}
  

/* #############################################

LINKFARBEN: Navigationselemente und Links

#############################################*/
a {
  transition: ease .3s; }

.card-wrapper p a {
  font-family: "Affogato-Medium", Helvetica, Verdana, sans-serif; }
  .card-wrapper p a, .card-wrapper li a {
    color: #17428F; }
  .card-wrapper p a:visited, .card-wrapper li a:visited {
    color: #17428F; }
  .card-wrapper p a:hover, .card-wrapper p a:focus {
    color: #6F6F6E; }

h2 a, h1 a {
  color: #fff; }

h2 a:visited, h1 a:visited {
  color: #fff; }

h1 a:hover, h1 a:focus {
  color: #7DAF32; }  
  
h2 a:hover, h2 a:focus {
  color: #000; }


.headernav a {
  padding: 19px 12% 19px 12%; }
  .headernav a {
    color: #FFF; }
  .headernav a:hover {
    color: #000;
    background-color: #fff; }
  .headernav a.aktiv {
    color: #fff;
    background-color: #7DAF32; }

.headernav .aktiv {
  border-left: 6px solid #FFFFFF;
  border-right: 6px solid #FFFFFF;
  background-image: linear-gradient(-180deg, #A8DE2F 2%, #639616 100%); }

.headernav li:first-of-type {
  margin-left: 17.9%; }

.card-content .btn-card a {
  color: #fff; }

.card-content .btn-card a:visited {
  color: #000; }

.card-content .btn-card a:hover, .card-content .btn-card a:focus {
  color: #fff; }

.footer a {
  font-family: "Affogato-Medium", Helvetica, Verdana, sans-serif; }
  .footer a {
    color: #fff; }
  .footer a:visited {
    color: #fff; }
  .footer a:hover, .footer a:focus {
    color: #000; }

.pagination a {
  color: #000; }

.pagination a:visited {
  color: #000; }

.pagination a:hover, .pagination a:focus {
  color: #D00; }

.katmenu a {
  color: #fff;
  background-color: #4e4e4e; }

.katmenu a:hover {
  color: #BAF363;
  background: #4e4e4e; }

.katmenu a.aktiv {
  color: #BAF363;
  background-color: #B4e4e4e; }

.tabnavi a {
  color: #000;
  background-color: #FFF; }

.tabnavi a:hover {
  color: #FFF;
  background: #9F9F9F; }

.tabnavi a.aktiv {
  color: #FFF;
  background-color: #9F9F9F; }
  


/* #############################################

TYPOGRAFIE 

############################################# */
h1, h2, h3, h4 {
  font-family: "Affogato-Medium", Helvetica, Verdana, sans-serif; }

.main > div:nth-child(1) h1 {
  font-family: "Affogato-Regular", Helvetica, Verdana, sans-serif;
  color: #fff;
  font-size: 200%;
  font-weight: normal;
  font-variant: small-caps; 
  text-align: right;
  background-color: transparent;
  padding: 6% 12% 6% 0;
  border-right: 20px solid #0084BF;
  letter-spacing: 1px;
  margin: 12% -10px 0 0; }

.card-content h2 {
  color: #fff;
  font-size: 170%;
  font-weight: normal;
  background-color: #90BF49;
  padding: 5% 4% 5.5% 8%;
  letter-spacing: 0px; }

.main h3 {
  font-size: 130%;
  padding: 2% 1% 4% 1%; }

.content-persona h3 {
  font-family: "Affogato-Medium", Helvetica, Verdana, sans-serif;
  font-size: 140%;
  color: #333;
  padding: 4% 12% 2% 13%; }

.content-persona ul, .content-persona ol {
  padding-left: 17%;
  list-style-type: square;
  padding-top: 1%;
  padding-bottom: 1%; }

.content-persona li {
  font-size: 125%;
  color: #000;
  padding: 0 12% 1% 0;
  line-height: 1.7em; }

.content-persona p {
  font-size: 125%;
  color: #000;
  padding: 2% 12% 2% 13%;
  line-height: 1.7em; }

.content-persona p:first-of-type {
  padding-top: 7%; }

.content-persona div p:first-of-type {
  padding-top: 2%; }

.lastof {
  margin-bottom: 7%; }  
  
.footer p {
  letter-spacing: 1px;
  color: #fff; }
  
  

/* ############################################# 

FLEXBOX: Grundlayout 

############################################# */
.container {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  max-width: 80em;
  border-left: 0px solid #999;
  box-shadow: 0 2px 16px 0 #333; }

.header {
  width: 100%; }

.headertop {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  align-items: center;
  max-width: 100%;
  margin: auto;
  background-color: #D6F1FD; }

.headernav {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  background-color: #0084BF;
  padding: 19px 0 19px 0;
  border-top: solid 6px #fff;
  border-bottom: solid 6px #fff; }

.main {
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  background-color: #4D4E4C; }

.footer {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  justify-content: center;
  background-color: #0084BF;
  padding: 4% 0 6% 0;
  border-top: 6px solid #fff; }

/* ############################################# 

HEADER: Spalten-Formatierungen 

############################################# */
.headertop > div:nth-child(1) {
  -webkit-flex: 1;
  -ms-flex: 1 34%;
  flex: 1 34%;
  border-right: 6px solid #fff; }

.headertop > div:nth-child(2) {
  -webkit-flex: 1;
  -ms-flex: 1 66%;
  flex: 1 66%;
  background-color: #D6F1FD;
  height: auto;
  padding: 11% 0 5.1% 0; }

.main > div:nth-child(1) {
  -webkit-flex: 1;
  -ms-flex: 1 34%;
  flex: 1 34%;
  background-color: #4e4e4e;
  color: #fff;
  margin-bottom: 6%;
  border-right: 6px solid #fff; }

.main > div:nth-child(2) {
  -webkit-flex: 1;
  -ms-flex: 1 66%;
  flex: 1 66%;
  background-color: #D6F1FD;
  height: auto;
  padding: 7%; }

/* HEADER: Inbox-Formatierungen ########## */
.headertop div:nth-child(1) img {
  width: 100%;
  height: auto; }

.headertop div:nth-child(2) img {
  width: 34%;
  margin-left: 10.7%; }

/* ############################################# 

HEADER: Hauptnavigation 

############################################# */
.headernav ul {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex; }

.headernav li {
  -webkit-flex: 1;
  -ms-flex: 1 auto;
  flex: 1 auto;
  flex-grow: 1;
  font-size: 140%;
  list-style-type: none;
  text-align: center;
  letter-spacing: 1px; }

/* ############################################# 

NAVIGATIONSELEMENTE

############################################# */
/* Kategorienmenu ########## */
.katmenu {
  margin-top: 0; }

.katmenu strong {
  font-family: "Affogato-Medium", Helvetica, Verdana, sans-serif; }

.katmenu ul {
  font-family: "Affogato-Regular", Helvetica, Verdana, sans-serif;
  list-style-type: none;
  margin: 0 -10px 15% 0; }

.katmenu li {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex; }

.katmenu li a {
  text-align: right;
  width: 70%;
  font-size: 130%;
  padding: 3.5% 12% 3.5% 0;
  margin-left: 30%;
  border-right: 20px solid #4e4e4e; }

.katmenu .aktiv {
  background-color: #4e4e4e;
  border-right: 20px solid #90BF49; }

.katmenu li a:hover {
  letter-spacing: 1px;
  border-right: 20px solid #90BF49; }

.katmenu li .aktiv:hover {
  letter-spacing: 0; }

#back-to-top {
  /* scriptgesteuerter Top-Balken */
  position: fixed;
  /* Fixiert den Balken unten */
  display: none;
  width: 18%;
  font-family: "Affogato-Regular", Helvetica, Verdana, sans-serif;
  right: -9%;
  bottom: 24%;
  padding: 18px 0 18px 10px;
  background: #000;
  color: #fff;
  font-size: 130%;
  text-align: left;
  letter-spacing: 1px;
  z-index: 1000;
  cursor: pointer;
  transition: all ease-in-out .3s;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px; }

#back-to-top:hover {
  right: 0%; }

/* #############################################

Spalten: Inline-Formatierung 

############################################# */


.zitat {
  font-family: Georgia, Times, serif;
  font-style: italic;
  font-size: 110%;
  line-height: 1.8em;
  letter-spacing: 1px;
  padding-left: 15%;
  padding-right: 12%; }

.autor {
  font-family: Georgia, Times, serif;
  font-size: 100%;
  text-align: right;
  padding-right: 13%;
  margin-top: 2%; }

/* #############################################

CARDS: Grundlayouts 

############################################# */

.card-wrapper {
  width: 100%;
  background: #FFF;
  box-shadow: 12px 22px 32px 0 rgba(0, 0, 0, 0.22);
  border-radius: 12px; }

.card-content {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: #E9F0FE;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px; }

.card-personas {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row; }

.wrapper-persona {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1 auto;
  flex: 1 auto;
  max-width: 100%;
  margin: 0 3% 6em 3%; }

.content-persona {
  display: flex;
  width: 100%;
  background-color: #FFF; }

.content-persona p:last-of-type {
  flex: 1 0 auto; }

/* Card-Persona ########## */
.wrapper-persona img {
  width: 100%;
  height: auto; }

/* #############################################

BUTTONS

############################################# */
.btn-top {
  font-size: 1.3em;
  font-family: "Affogato-Regular", Helvetica, Verdana, sans-serif;
  text-align: center; }

.btn-top::after {
  content: " ↑"; }

.btn-top::before {
  content: "↑ "; }

.btn-card {
  width: 100%;
  display: block;
  text-align: center;
  font-family: "Affogato-Regular", Helvetica, Verdana, sans-serif;
  font-size: 140%;
  letter-spacing: 1px;
  color: #fff;
  background-color: #0084BF;
  padding: 1.4em 0 1.5em 0;
  margin-top: 6%;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  transition: all ease .4s;
  cursor: pointer; }
  
  
  .btn-card a:visited {
  color: #fff;
  background-color: #0084BF; }
  
  .btn-header {
  font-family: Georgia, Times, serif;
  font-size: 170%;
  color: #fff;
  padding: 13% 0 12% 9%;
  letter-spacing: 1px;
  text-align: right;  
  background-image: url("https://impulse-psychotherapie.de/images/icon-telefon.png");
  background-repeat: no-repeat;
  background-position: 28% 48%;
  background-size: 9%;
  margin-top: 3%;
  padding-right: 14%; }

.btn-header tel {
  color: #fff; }
  
  .btn-header a {
  color: #fff; }
  
  
.email {
  letter-spacing: 2px;
  margin-top: 1em; }

.btn-blue {
  color: #fff;
  background-color: #17428F; }

.btn-card:hover {
  color: #fff;
  background-color: #17428F; }

.btn-blue {
  color: #fff;
  background-color: #17428F; }

.btn-blue:hover {
  color: #17428F;
  background-color: #F7D05E; }
  
  
  
/* #############################################

Formular

############################################# */




legend {
	display: none;
}

label {
	width: 30%;
	float: left;
}

form (
	margin-top:-2%;
)
form p {
	width: 100%;
	line-height: 1.5em;
	float: right;
}

form p label  {
	font-size: 1em;
}

form .pklein {
	font-size: 100%;
	line-height: 1.4em;
}

.check {
	margin: 0 1.5% 0 1%;
    cursor: pointer;
}

form input[type="checkbox"] {
margin: 0 1% 0 0;
background-color: #F9FDFF;
}

form select {
font-size: 100%;
margin-top: 1%;
margin-bottom: 2%;
}


.textfeld {
	font-family: "Affogato-Regular", Helvetica, Verdana, sans-serif;  
	font-size: .9em;
	padding: 1.8%;
	width: 65%;
	border: 1px solid #888;
	background-color: #E6F5FB;
	margin-bottom: 0;
}

textarea {
	font-family: "Affogato-Regular", Helvetica, Verdana, sans-serif;
	margin-top: 1%;
	font-size: .9em;
	padding: 1.8%;
	width: 65%;
	border: 1px solid #888;
	background-color: #E6F5FB;
	height: 200px;
	margin-bottom: 2%;
}

.sendbutton {
	padding: 2.8% 5% 2.8% 5%; 
	border: 1px solid #fff;
	color: #fff;
	font-size: 1.2em;
	letter-spacing: 1px;
	background-color: #90BF49;
	letter-spacing: 1px;
	width: 100%;
	cursor: pointer;
	margin: 0 0 5% 0;
	border-radius: 6px;
	transition: 0.4s;
} 

.sendbutton:hover {
	color: #fff;
	background-color: #333;
} 
  

/*Styles for screen 1120px and lower*/
@media only screen and (max-width: 70em) {

  .btn-header {
  background-position: 29% 48%;
 font-size: 150%
}  

/*Styles for screen 880px and lower*/
@media only screen and (max-width: 55em) {

  .btn-header {
  background-position: 8% 48%;
  font-size: 150%
 
}   

/*Styles for screen 800px and lower*/
@media only screen and (max-width: 50em) {

	
a:hover {
	background-color: transparent;
	letter-spacing: 0;
}	
	
  .headertop > div:nth-child(1) {
    -webkit-flex: 1;
    -ms-flex: 1 40%;
    flex: 1 40%;
    border-right: 6px solid #fff; }
    
  .headertop > div:nth-child(2) {
    -webkit-flex: 1;
    -ms-flex: 1 60%;
    flex: 1 60%;
    background-color: #D6F1FD;
    height: auto;
    padding: 10% 0 4% 0; }
    
  .headertop div:nth-child(2) img {
    width: 65%;
    margin-left: 7%; } 
    
    
    }



/*Styles for screen 640px and lower*/
@media only screen and (max-width: 40em) {
	
 .main {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
	
.main > div:nth-child(1) {
 	width: 100%;  
 	margin-bottom: 0;
 	border-right: 0; 
 	  border-bottom: solid 6px #fff;
}

.main > div:nth-child(2) {
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
}
  	
.main > div:nth-child(1) h1 {
  display: none;
  }


/*
TYPOGRAFIE 
 */
 
.card-content h2 {
  font-size: 140%;
   }

.main h3 {
  font-size: 130%;
  padding: 4% 8% 4% 9%; }


.content-persona p {
  font-size: 120%;
  padding: 2% 8% 2% 9%;
  line-height: 1.5em; }

.footer p {
  letter-spacing: 0;
  padding: 2% 5% 2% 5%;
  color: #fff; }

/* 
NAVIGATIONSELEMENTE
 */
 

.katmenu ul {
  margin: 0; }

.katmenu li a {
  text-align: center;
  width: 100%;
  font-size: 110%;
  padding: 1% 0 1% 0;
  margin-left: 0%;
  border-right: 0; }
  
 .katmenu li:first-of-type a {
  padding: 6% 0 6% 0; }

 .katmenu li:last-of-type a {
  padding: 6% 0 6% 0; }  
  
  .katmenu .aktiv {
  border-right: 10px solid #90BF49; 
  border-left: 10px solid #90BF49;
}

 .katmenu li a:hover {
 letter-spacing: 0;
 border-right: 0; 
 }



.headernav {
  padding: 0;
 }

.headernav .aktiv {
  border-left: 0;
  border-right: 0;
  background-image: none;
  background-color: #7DAF32;
}

.headernav ul {
    display: block; 
}
    
.headernav li {
    font-size: 120%; 
}
    
.headernav li:first-of-type {
  margin-left: 0; 
}

.headernav li a {
    float: left;
    width: 50%;
    padding: 14px 0 14px 0; 
}
    
.headernav a:hover {
    color: #fff;
    background-color: transparent; 
}
    
.headernav li:first-of-type a {
    width: 100%;
 }
    

/*

CARDS: Grundlayouts 

 */

.card-wrapper {

  box-shadow: none;
  border-radius: 0; 
  }


.card-content {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }
  
  
.card-personas {
    flex-direction: column; }
    
.wrapper-persona {
    max-width: 90%;
    margin: 6% 5% 6% 5%; }
	
	
/* 
Spalten: Inline-Formatierung 
*/


.zitat {
  line-height: 1.6em;
  letter-spacing: 0;
  padding-left: 9%;
  padding-right: 9%; }

.autor {
  padding-right: 12%;
  margin-top: 2%;
  margin-bottom: 10%; 
  }
  
	
/* 
Buttons etc 
 */
	
.btn-card {

  font-size: 130%;
  letter-spacing: 0;
  padding: .8em 0 .9em 0;
  margin-top: 8%;
}
  
  .btn-header {
  font-family: Georgia, Times, serif;
  font-size: 150%;
  padding: 5% 0 6% 0;
  letter-spacing: 1px;
  text-align: center;  
  background-image: url("https://impulse-psychotherapie.de/images/icon-telefon.png");
  background-repeat: no-repeat;
  background-position: 16% 28%;
  background-size: 9%;
  padding-right: 0; }
	
	}