/* CSS Document */
@charset "utf-8";
@font-face {font-family:'Montserrat'; src:url('../fonts/Montserrat-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap;}
@font-face {font-family:'Montserrat'; src:url('../fonts/Montserrat-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap;}
@font-face {font-family:'Montserrat'; src:url('../fonts/Montserrat-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap;}
@font-face {font-family:'Montserrat'; src:url('../fonts/Montserrat-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap;}

article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,main,summary{display:block;}
audio,canvas,video{display:block;*zoom:1;}
audio:not([controls]){display:none}
[hidden]{display:none}
html {scroll-behavior:smooth;}
html,body{margin:0;padding:0;height:100vh;min-height:100%;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
html,body,button,input,select,textarea{font-family:'Montserrat',Arial,Verdana,sans-serif;font-size:15px;line-height:28px;font-weight:400;color:#27555d;}
body {background:#f4ecd5 url(../images/Psychlogische_Beratung_Heppenheim.jpg) top center no-repeat;}

*, *::before, *::after {box-sizing:border-box;}
a {color:inherit; text-decoration:none;}
a:focus{outline:none;}
a:hover,a:active{color:inherit; text-decoration:none; outline:0;}

p, li {margin-bottom:24px;}

hr {widt:100%; height:1px; border:0 none; margin-bottom:48px; border-top:2px solid #2ab; clear:both;}
strong {font-weight:600;}

table {padding:0; margin:0 0 32px; width:100%;}
td {padding:10px 0; margin:0; vertical-align:top; border-bottom:1px dotted #3bc; text-align:left;}
td.tag {padding-right:10px;}

h1, h2, h3, h4, h5, h6 {max-width:100%; display:block; box-sizing:border-box; font-weight:300;}
h1 {font-size:36px; line-height:48px; margin:0 auto; color:#fff; text-align:center; text-transform:uppercase;}
h2 {font-size:32px; line-height:42px; margin:84px auto 42px; text-align:center;}
h3 {font-size:26px; line-height:32px; padding:0; margin:42px 0 28px; text-align:center;}
h4 {font-size:18px; line-height:26px; padding:0; margin:42px 0 28px; font-weight:400; color:#2ab;}
h5 {font-size:18px; line-height:26px; padding:0; margin:48px 0 28px; font-style:italic; text-align:center;}
h6 {position:absolute; bottom:0; left:0; width:100%; padding:24px; margin:0; display:block; box-sizing:border-box; z-index:auto; 
font-size:16px; line-height:24px; background:rgba(255,255,255,0.6); transition:padding 0.4s, color 0.4s, background 0.4s;}
a:hover h6 {padding:30px 20px; background:rgba(255,255,255,0.9); transition:padding 0.2s, color 0.2s, background 0.2s;}

.bigtext {font-size:150%;}
.minitext {font-size:75%; text-transform:none;}
.blau {background:#00b3cb;}
.fastblau {background:rgba(0,179,203,0.8);}
.halbblau {background:rgba(0,179,203,0.5);}
.halbweiss {background:rgba(255,255,255,0.5);}

.navi {position:sticky; position: -webkit-sticky; top:6px; left:0; margin:100px 0 -240px; padding:0; width:220px; display:block; z-index:900;}
.navi li {position:relative; margin:0 0 6px; padding:0; list-style-type:none; text-align:left; width:auto;}
.navi li a {position:relative; padding:6px 24px; margin:0; font-size:15px; line-height:28px; color:#fff; display:inline-block; box-sizing:border-box;
border-bottom-right-radius:8px; font-weight:400; background:rgba(45,157,175,0.6); transition:font-weight 0.2s, background 0.2s;}
.navi li:hover a, .navi li.active a {font-weight:600; background:rgba(45,157,175,0.8); transition:font-weight 0.2s, background 0.2s;}

.main {position:relative; width:100%; max-width:800px; padding:80px 4% 60px; margin:0 auto; display:block; box-sizing:border-box;
background-image:linear-gradient(rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 60%); box-shadow: 0px 5px 10px rgba(0,0,0,0.05);}
.contact {position:relative; width:100%; max-width:800px; padding:1px 4% 60px; margin:0 auto; display:block; box-sizing:border-box;
background:rgba(100,0,50,0.4); color:#fff; box-shadow: 0px 5px 10px rgba(0,0,0,0.05); text-align:center;}

.more {position:relative; margin:0 auto 24px; padding:6px 20px; width:max-content; display:block; box-sizing:border-box; 
background:rgba(100,0,30,0.4); color:#fff; text-align:center; cursor:pointer; 
border-top-left-radius:8px; border-bottom-right-radius:8px; transition:background 0.2s;}
.more:hover {background:rgba(100,0,30,0.5); color:#fff; transition:background 0.2s;}
.left {float:left; display:block;}
.right {float:right; display:block;}
.center {text-align:center;}
.clear {clear:both;}

.danke {position:absolute; top:0; left:0; width:100%; height:auto; padding:30px 2% 20px; margin:0 auto; box-sizing:border-box; 
background:rgba(31,41,78,0.9); font-size:36px; line-height:42px; color:#fbbc05; text-align:center; z-index:300; display:none; 
}

.cook {position:fixed; top:0; left:0; width:100%; height:auto; padding:30px 2% 20px; margin:0 auto; box-sizing:border-box; 
background:rgba(31,41,78,0.9); font-size:20px; line-height:30px; color:#cae5f5; text-align:center; z-index:1000; display:none;
}

.footer {position:relative; width:100%; height:auto; padding:0; margin:0 auto; display:block; box-sizing:border-box;}
.footcontent {position:absolute; left:0; bottom:0; margin:0 auto; padding:14px 20px 10px; width:100%; display:block; box-sizing:border-box;
background:rgba(100,0,30,0.4); color:#fff; font-size:12px; line-height:24px; text-align:center; z-index:100;}
.footcontent p {margin:0 auto;}

.bottom {position:relative; width:100%; height:auto; padding:10px; margin:0 auto; display:block; box-sizing:border-box;
background:rgba(100,0,40,1); color:#a46; font-size:11px; line-height:20px; text-align:center;}
.bottom p {margin:0 auto;}

iframe {width:100%; height:500px; padding:0; margin:0; display:block; clear:both;}
video {width:100%; display:block; margin-bottom:24px;}
.videodiv {position:relative; width:100%; height:0; padding-bottom:56.25%; display:block; box-sizing:border-box;}
.videoframe {position:absolute; top:0; left:0; width:100%; height:100%;}

.totop {position:fixed; bottom:10px; right:10px; width:3px; height:3px; padding:12px 19px 22px 16px; margin:0; 
text-align:center; border-radius:50%; border:3px solid #a05; background:rgba(255,255,255,0.5); z-index:900; opacity:0.2; 
 filter: alpha(opacity=20);}
.totop:hover {opacity:0.4;
 filter: alpha(opacity=40);}
.totop i:before, .totop i:after {content:""; position:absolute; background-color:#a05; width:3px; height:9px;}
.totop i:before {
 -ms-transform: translate(-2px, 0) rotate(45deg);
 -webkit-transform: translate(-2px, 0) rotate(45deg);
 transform: translate(-2px, 0) rotate(45deg);
}
.totop i:after {
 -ms-transform: translate(2px, 0) rotate(-45deg);
 -webkit-transform: translate(2px, 0) rotate(-45deg);
 transform: translate(2px, 0) rotate(-45deg);
}

form {position:relative; margin:47px 0 0; padding:0; display:block;}
select {height:24px; border:0; padding:0 10px 2px; margin-bottom:12px;}
textarea, input.zeile {width:100%; padding:8px 15px; margin:0 auto 12px; color:#fbbc05; background:#fff; border:1px solid #fbbc05; border-radius:3px;
font-weight:400; font-size:14px; line-height:22px; display:inline-block; box-sizing:border-box;}
textarea {height:auto; min-height:200px; resize:vertical;}
input.zeile {height:45px;}
.zeile:focus::-webkit-input-placeholder {color:transparent;}
.zeile:focus::-moz-placeholder {color:transparent;}
.zeile:-moz-placeholder {color:transparent;}
textarea:focus::-webkit-input-placeholder {color:transparent;}
textarea:focus::-moz-placeholder {color:transparent;}
textarea:-moz-placeholder {color:transparent;}
input.honey {visibility:hidden; display:none;}

.button {position:relative; width:auto; max-width:300px; height:auto; display:block; padding:12px 20px; margin:20px auto 40px; cursor:pointer;
font-size:16px; line-height:24px; font-weight:600; text-align:center; text-decoration:none; 
background:#40be6f; background-image:linear-gradient(8deg,#40be6f 0%,#80ef7f 100%); color:#fff; border:0 none; border-radius:24px;}
.button:hover {text-decoration:none; background:#70be6f; background-image:linear-gradient(8deg,#70be6f 0%,#80ef7f 100%); color:#fff;}

img {position:relative; padding:0; margin:33px auto 0; width:100%; display:block; box-sizing:border-box;}
.footer img {margin:0 auto;}
.logo {position:relative; width:auto; padding:0; margin:0 auto; z-index:800; display:block;}
.minilogo {position:relative; width:auto; padding:0; margin:0 0 0 2%; float:left; z-index:801; display:none;}
.portrait {position:relative; padding:0; margin:0 auto; width:80%; max-width:400px; display:block; border-radius:50%;}

/*///////////// RESPONSIVE /////////////*/

@media screen and (orientation: landscape) {}
@media screen and (orientation: portrait) {}

@media screen and (min-width: 1600px) {
body {background-size:100%;}
}

@media screen and (max-width: 1200px) {
.navi {position:absolute; top:4px; left:0; margin:0;}
.navi li {margin:0 0 4px;}
.main {margin-top:80px;}
}

@media screen and (max-width: 760px) {
html,body,button,input,select,textarea{font-size:14px;line-height:22px;}
.logo {display:none;}
.minilogo {display:block;}
.navi {position:absolute; top:4px; left:auto; right:0;}
.navi li {text-align:right;}
.navi li a {padding:6px 18px; border-bottom-right-radius:0; border-bottom-left-radius:8px;}
.main {padding:170px 4% 40px; clear:both;}
.contact {padding-bottom:40px;}
h3 {font-size:24px; line-height:30px;}
h4 {font-size:20px; line-height:24px;}
.danke, .cook {font-size:16px; line-height:24px;}
.button {margin-bottom:2px;}
p, ul, ol, h1, h2, h3, h4, h5, h6 {
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.nohyp, a.button, .navi ul {
-moz-hyphens: none;
-o-hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;}
}

@media screen and (max-width: 640px) {
h1, h2 {font-size:30px; line-height:36px;}
}

@media screen and (max-width: 400px) {
.minilogo {margin:0;}
}