@charset "utf-8";
@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-Medium.ttf') format('truetype'); font-weight:500; 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:'PlayfairDisplay'; src:url('../fonts/PlayfairDisplay-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap;}

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, sans-serif; font-size:15px; line-height:24px; font-weight:400; color:#001118;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,main,summary{display:block;}
div, table, h1, h2, h3, h4, h5, h6, p, ul, ol, img {position:relative; display:block;} 
audio,canvas,video{display:block;*zoom:1;}
audio:not([controls]){display:none;}
[hidden]{display:none;}

body {background-image:url(../images/shell.jpg); background-position:bottom right; background-size: 45% auto; background-repeat:no-repeat; background-attachment:fixed;}
.nobg {background-image:none;}

*, *::before, *::after {box-sizing:border-box;}
a {color:#002476; text-decoration:none; font-weight:600;}
a:focus{outline:none}
a:hover,a:active{outline:0}

li {margin-bottom:12px;}
p, ul, ol {margin-bottom:24px;}
ul.stern {margin:0; padding:0; display:block;}
ul.stern li {margin:0; padding:0; list-style-type:none; display:block;}
ul.stern li a {margin:0; padding:15px 20px 15px 75px; background:url(../images/stern.png) 20px center no-repeat; display:block;}
ul.stern li:hover {background-color:rgba(255,255,255,0.9);}

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

table {padding:0; margin:0 0 32px; width:100%; border-collapse:collapse;}
td {padding:10px 0; margin:0; vertical-align:top; border-bottom:1px dotted #dcc; text-align:left;}
td.tag {font-weight:600; padding-right:20px;}

img {padding:0; margin:0 auto; width:100%; height:auto; display:block; box-sizing:border-box;}
.logo {width:80%; max-width:480px; padding:0; margin:16px auto 8px; display:block; float:left;}
.portrait {padding:8px; margin:40px auto; width:80%; max-width:416px; display:block; background:#fafafa; border-radius:50%; border-bottom:1px solid #00205010;}
.meer {padding:0; margin:0; height:34px; width:100% !important;}

h1, h2, h3 {font-family:'PlayfairDisplay', Times New Roman, Garamond, serif; display:block; box-sizing:border-box; font-weight:500;}
h4, h5, h6 {font-family:'Montserrat', Arial, sans-serif; display:block; box-sizing:border-box; font-weight:600;}
h1 {font-size:38px; line-height:54px; margin:-210px auto 0; color:#002476; text-align:center; padding:80px 60px 30px; 
background:#ffffffda; box-shadow:0 -25px 10px #00102010; backdrop-filter: blur(6px);}
h2 {font-size:38px; line-height:54px; margin:30px auto 40px; color:#002476;}
h3 {font-size:32px; line-height:46px; font-weight:400; padding:0; margin:0 0 30px; color:#002476;}
h4 {font-size:20px; line-height:30px; font-weight:600; padding:0; margin:0 0 30px;}
h5 {font-size:20px; line-height:30px; font-weight:600; padding:0; margin:0 0 30px; color:#002476;}
h6 {position:absolute; bottom:0; left:0; width:100%; padding:20px; margin:0; display:block; box-sizing:border-box; z-index:auto; 
font-size:20px; line-height:30px; font-weight:600; color:#002476; background:rgba(255,255,255,0.8); transition:padding 0.4s, color 0.4s, background 0.4s;}
a:hover h6 {padding:30px 20px; color:#00dfff; background:#fffffffa; transition:padding 0.2s, color 0.2s, background 0.2s;}

.minitext {font-size:75%;}

.white {background:#fff;}
.light {background:#fff8fa;}
.transparant {background:#ff66880f; backdrop-filter: blur(8px);}
.whiteblur {background:#ffffff44; backdrop-filter: blur(6px); margin-top:40px; margin-bottom:40px;}
.water {color:#002476}
.air {color:#00dfff;}

.topinfo {margin:0; padding:8px 4%; background:#002476; background-image:linear-gradient(90deg,#002476,#00dfff);}
.topinfo a {color:#ffffffcc;}
.topinfo a:hover {color:#ffffffff;}
.termin, .phone {padding:0; margin:0 30px 0 0; display:inline-block; box-sizing:border-box;}
.termin img, .phone img {width:26px; height:26px; padding:0; margin:0 10px -7px 0; display:inline-block; box-sizing:border-box; opacity:0.8;}
a:hover .termin img, a:hover .phone img {opacity:1;}
.langs {position:absolute; top:0; right:4%; padding:0; margin:0;}
.langs li {padding:0; margin:0 0 0 10px; list-style-type:none; display:inline-block;}
.langs li a {padding:9px 10px 7px; margin:0; display:block;}

.header {margin:0; padding:0 4%; text-align:center; font-size:16px; line-height:22px; box-sizing:border-box; background:#fff; box-shadow:0 0 15px 0 #0011;}

.navi {margin:0 auto; padding:88px 0 0; text-align:center; float:right;}
.navi ul {margin:0 auto; padding:0; display:block; font-weight:500; text-transform:uppercase; letter-spacing:0.05em;}
.navi ul li {margin:0 10px; padding:0; list-style-type:none; display:inline-block;}
.navi ul li:last-child {margin-right:0;}
.navi ul li a {padding:10px; margin:0; height:50px; color:#002476; transition:color 0.2s; text-decoration:none; display:block; box-sizing:border-box;}
.navi ul li:hover a, .navi ul li.active a {color:#002476;;}
.navi ul li a::after {content:""; display:block; padding-top:0px; margin:0 auto; width:0%; border-bottom:2px solid #00dfff; transition:.3s;}
.navi ul li a:hover::after {width:100%;}

input[type="checkbox"].opennavi:checked ~ .navi {transform:translateX(0);}
input[type=checkbox].opennavi {transition:all 0.3s; box-sizing:border-box; display:none;}
.sidebarIconToggle {position:absolute; top:64px; right:40px; width:22px; height:22px; box-sizing:border-box; z-index:99; cursor:pointer; display:none;
transition:all 0.3s; z-index:999;}
.spinner {position:absolute; width:100%; height:3px; background:#002476; box-sizing:border-box; transition:all 0.3s;}
.horizontal {float:left; margin-top:3px; box-sizing:border-box; transition:all 0.3s;}
.diagonal.part-1 {float:left; box-sizing:border-box; transition:all 0.3s;}
.diagonal.part-2 {float:left; box-sizing:border-box; transition:all 0.3s; margin-top:3px;}
input[type=checkbox].opennavi:checked ~ .sidebarIconToggle > .horizontal {box-sizing:border-box; transition:all 0.3s; opacity:0;}
input[type=checkbox].opennavi:checked ~ .sidebarIconToggle > .diagonal.part-1 {box-sizing:border-box; transition: all 0.3s; margin-top:8px; transform: rotate(135deg);}
input[type=checkbox].opennavi:checked ~ .sidebarIconToggle > .diagonal.part-2 {box-sizing:border-box; transition:all 0.3s; margin-top:-9px; transform: rotate(-135deg);}

.banner {padding:0; margin:0; display:block; box-sizing:border-box; overflow:hidden; clear:both;}
.bannercontent {width:100%; height:auto; padding:0; margin:0 auto; background-size:100%; background-position:center center; background-repeat:no-repeat;}
.bannercontent img {width:100%; height:auto; padding:0; margin:0; clear:both;}

.praxis {background-image:url(../images/banner/mini/Frauenaerztin_Dr_med_Anna_Fossari_Team.jpg);}
.team {background-image:url(../images/banner/mini/Frauenaerztin_Dr_med_Anna_Fossari.jpg);}
.leistungen {background-image:url(../images/banner/mini/Frauenaerztin_Dr_med_Anna_Fossari_Untersuchung.jpg);}
.kontakt {background-image:url(../images/banner/mini/Frauenaerztin_Dr_med_Anna_Fossari_Duesseldorf.jpg);}
.impressum {background-image:url(../images/banner/mini/Frauenaerztin_Dr_med_Anna_Fossari_Impressum.jpg);}
.datenschutz {background-image:url(../images/banner/mini/Frauenaerztin_Dr_med_Anna_Fossari_Datenschutz.jpg);}

.main {width:92%; max-width:900px; padding:0; margin:0 auto; box-sizing:border-box;}
.bigmain {width:92%; max-width:1200px; padding:0; margin:0 auto; box-sizing:border-box;}
.big {padding-top:90px; padding-bottom:90px;}
.nopadtop {padding-top:0px;}
.nopadbottom {padding-bottom:0px;}
.halb {width:48%; padding:0; margin:0 4% 0 0; float:left; box-sizing:border-box; display:inline-block;}
.gallery .halb {margin-bottom:30px;}
.doppel {width:66%; padding:0; margin:0 2% 0 0; float:left; box-sizing:border-box; display:inline-block;}
.drittel { width:32%; padding:0; margin:0 2% 0 0; float:left; box-sizing:border-box; display:inline-block;}
.last {margin-right:0;}
.clear {clear:both;}
.space {height:30px; clear:both;}

.left {float:left; display:block;}
.right {float:right; display:block;}
.center {text-align:center;}

.footer {width:100%; padding:8px 0 24px; margin:0 auto; font-size:13px; line-height:30px; 
background:#002476; color:#ffffff88; text-align:center; display:block; box-sizing:border-box;}
.footer p {margin:0 auto;}
.footer a {color:#ffffff88; text-decoration:none; font-weight:400;}
.footer a:hover {color:#ffffffff; text-decoration:none;}

.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 #002476; background:rgba(255,255,255,0.5); z-index:100; opacity:0.3; 
 filter: alpha(opacity=30);}
.totop:hover {opacity:0.6;
 filter: alpha(opacity=60);}
.totop i:before, .totop i:after {content:""; position:absolute; background-color:#002476; 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);
}

.button {width:max-content; height:auto; display:block; padding:14px 34px; margin:20px auto 40px; cursor:pointer;
font-size:16px; line-height:24px; font-weight:600; text-align:center; text-decoration:none; color:#fff; border:0 none; border-radius:34px; 
background:#002476; background-image:linear-gradient(90deg,#002476,#00dfff); box-shadow:0px 3px 5px #00000020;}
.button:hover {letter-spacing:0.01em; box-shadow:0px 4px 5px #00000030; transition: letter-spacing 0.2s, box-shadow 0.2s;}

.weiter {display:inline-block; width:max-content; padding:8px 20px; background:#00247622;}
.weiter:hover {padding:8px 24px; transition:padding 0.2s;}

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

@media (min-width: 801px) {
.praxis {background-image:url(../images/banner/Frauenaerztin_Dr_med_Anna_Fossari_Team.jpg);}
.team {background-image:url(../images/banner/Frauenaerztin_Dr_med_Anna_Fossari.jpg);}
.leistungen {background-image:url(../images/banner/Frauenaerztin_Dr_med_Anna_Fossari_Untersuchung.jpg);}
.kontakt {background-image:url(../images/banner/Frauenaerztin_Dr_med_Anna_Fossari_Duesseldorf.jpg);}
.impressum {background-image:url(../images/banner/Frauenaerztin_Dr_med_Anna_Fossari_Impressum.jpg);}
.datenschutz {background-image:url(../images/banner/Frauenaerztin_Dr_med_Anna_Fossari_Datenschutz.jpg);}
}

@media screen and (max-width: 1200px) {
.navi ul {letter-spacing:0em;}
}

@media screen and (max-width: 1080px) {
.header {margin:0; padding:16px 2% 10px;}
.logo {float:none; margin:0 auto 10px; max-width:330px;}
.navi {float:none; margin:0 auto; padding:0;}
.navi ul li:last-child {margin-right:10px;}
.navi ul li a {padding:0 10px 10px; height:auto;}
}

@media screen and (max-width: 980px) {
h1 {font-size:32px; line-height:40px; margin:-180px auto -30px; padding:60px 30px 40px;} 
h2 {font-size:32px; line-height:40px;}
h3 {font-size:28px; line-height:36px;}
h4, h5 {font-size:18px; line-height:26px;}
ul.accord li.accor i {margin-top:36px;}
}

@media screen and (max-width: 860px) {
.halb, .doppel, .drittel, .w50 {width:100%; margin-left:0; margin-right:0;}
.gallery .halb {margin-bottom:30px;}
.big {padding-top:60px; padding-bottom:60px;}
ul.accord li.accor i {margin-top:36px;}
h1 {margin:-150px auto -30px;} 
}

@media screen and (max-width: 680px) {
.topnodis {display:none;}
.langs li {margin:0;}
.gallery li {width:100%;}
p, ul, ol, h1, h2, h3, h4, h5, h6 {
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
-moz-hyphenate-limit-chars: auto 5;
-o-hyphenate-limit-chars: auto 5;
-webkit-hyphenate-limit-chars: auto 5;
-ms-hyphenate-limit-chars: auto 5;
hyphenate-limit-chars: auto 5;
-moz-hyphenate-limit-lines: 2;
-o-hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-lines: 2;
-ms-hyphenate-limit-lines: 2;
hyphenate-limit-lines: 2;
}
.nohyp, a.button, .navi ul {
-moz-hyphens: none;
-o-hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;}
}

@media screen and (max-width: 560px) {
.telnodis {display:none;}
.navi ul li, .navi ul li:last-child {margin:0;}
.big {padding-top:40px; padding-bottom:40px;}
.portrait {padding:0; max-width:400px; border:0 none;}
h1 {margin:-110px auto -30px; padding:40px 30px;}
}

@media screen and (max-width: 500px) {
h1 {margin:0 auto; padding:0; box-shadow:0 0 0 0;}
.termin, .phone {width:30px; height:26px; overflow:hidden; margin:0 10px -7px;}
}

@media screen and (max-width: 360px) {
.termin, .phone {margin:0 5px -7px;}
.langs li a {padding:9px 5px 7px;}
}