/* CSS Document */
@charset "utf-8";
@font-face {font-family:'OfficinaSans-Book'; src:url('../fonts/OfficinaSans-Book.otf') format('truetype'); font-weight:400; font-style:normal; font-display:swap;}

html {scroll-behavior:smooth;}
html, body {margin:0; padding:0; font-size:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; background:#fcf6ef;}
html, body, button, input, select, textarea {font-family: Arial, sans-serif; font-size:16px; line-height:24px; font-weight:400; color:#555;}

audio, canvas, video {display:block; *zoom:1;}
audio:not([controls]){display:none}
[hidden]{display:none}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, main, summary {display:block;}
div, img {position:relative; display:block; box-sizing:border-box;}
*, *::before, *::after {box-sizing:border-box;}

a {color:inherit; text-decoration:none;}
a:focus {text-decoration:none; outline:none;}
a:hover, a:active {text-decoration:none; outline:none; color:#111;}

p {padding:0; margin:0 0 24px;}
li {margin-bottom:12px;}

hr {widt:100%; height:5px; border:0 none; margin:0; border-top:1px dotted #ccc; border-bottom:1px dotted #ccc; clear:both;}
strong {font-weight:bold; color:#111;}
em {font-style:italic;}
.zitat {font-style:italic; font-weight:bold; color:#111; text-align:center; padding:30px; background:#fcf6ef;}

table {padding:0; margin:0 0 32px; border-collapse:collapse;}
td, th {padding:8px 8px 8px 0; margin:0; vertical-align:top; border-bottom:1px dotted #ccc; text-align:left;}
.tag {width:40px; color:#111; font-weight:bold;}

h1, h2, h3, h4 {font-family:'OfficinaSans-Book', Arial, sans-serif; font-weight:400; display:block; box-sizing:border-box; color:#111;}
h1 {font-size:42px; line-height:48px; padding:0; margin:0; color:#fcf6ef;}
h2 {font-size:42px; line-height:48px; padding:0; margin:24px 0 32px; color:#9a3f27; text-align:center;}
h3 {font-size:32px; line-height:42px; padding:0; margin:24px 0 32px;}
h4 {font-size:26px; line-height:32px; padding:0; margin:0 0 8px; color:#4bb4d4;}
h5 {font-size:18px; line-height:28px; padding:0; margin:24px 0;}
h6 {font-size:18px; line-height:28px; padding:0; margin:24px 0;}
.minitext {font-size:24px; line-height:32px; padding:0; display:block;}

.main {width:100%; max-width:1000px; height:auto; padding:0; margin:40px auto 60px; background:#fff; box-shadow:0 4px 12px #33110018;}
.header {width:100%; margin:0; padding:0; background:#fff;}
.address {width:100%; padding:30px 4% 30px 8%; margin:0; text-align:right;}
.zahnarzt {color:#fcf6ef; background:#9a3f27; padding:20px 8%; margin:0;}
.zahnarzt a:hover, .zahnarzt a:active {color:#fcf6ef;}
.content {padding:40px 8%; margin:0;}
.footer {width:100%; padding:40px 0 30px; margin:0 auto; background:#fcf6ef88;}

.navi {position:relative; margin:0 4%; padding:20px 0 10px; text-align:right; text-transform:uppercase;}
.navi ul {position:relative; margin:0 auto; padding:0; display:block;}
.navi ul li {position:relative; display:inline-block; margin:0 0 0 40px; padding:0; list-style-type:none;}
.navi ul li a {padding:10px 0; margin:0; height:30px; transition:color 0.2s; text-decoration:none; display:block; box-sizing:border-box;}
.navi ul li:hover a, .navi ul li.active a, .navi ul li:hover ul li a:hover {transition:color 0.2s;}

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; cursor:pointer; display:none; z-index:999; transition:all 0.3s;}
.spinner {position:absolute; width:100%; height:3px; background:#555; box-sizing:border-box; transition:all 0.3s;}
.horizontal {position:relative; float:left; margin-top:3px; box-sizing:border-box; transition:all 0.3s;}
.diagonal.part-1 {position:relative; float:left; box-sizing:border-box; transition:all 0.3s;}
.diagonal.part-2 {position:relative; 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);}

.halb {width:47%; margin:0 6% 0 0; float:left; display:inline-block;}
.doppel {width:65%; padding:0; margin:0 5% 0 0; float:left; display:inline-block;}
.drittel {width:30%; padding:0; margin:0 5% 0 0; float:left; 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;}

img {position:relative; padding:0; margin:0; max-width:100%; height:auto;}

.zahn {position:absolute; top:30px; left:8%; width:48px; padding:0; margin:0; display:block; z-index:100;}
.map {height:600px; background-image:url(../images/Zahnarztpraxis-Seemann-Neunkirchen-am-Brand-Map.jpg); background-position:center center;}

.leistungslink {display:block; box-sizing:border-box; max-width:max-content; font-weight:bold; color:#111; background-color:#fff; border-left: 5px solid #4bb4d4; 
padding:10px 16px 10px 20px; margin:0; transition: all 0.2s;}
.nobold .leistungslink {font-weight:normal;}
.leistungslink:hover {padding:10px 20px 10px 24px; margin:0 4px 0 0; color:#fff; background-color:#4bb4d4;}

.terminbutton {display:block; width:max-content; padding:20px 40px 24px; margin:40px auto 44px; text-align:center; font-weight:bold; border-radius:7px;
background:#fefefe; box-shadow: rgba(0,0,0,0.05) 0px 20px 40px -20px, rgba(0,0,0,0.1) 0px 10px 20px -10px, rgba(0,0,0,0.18) 0px -3px 5px 0px inset;}
.terminbutton:hover {cursor:pointer; margin:41px auto 43px; background:#fff; box-shadow: rgba(0,0,0,0.1) 0px 10px 20px -10px, rgba(0,0,0,0.15) 0px -3px 5px 0px inset;}

.personal {padding:20px; margin:0 auto; text-align:center; display:inline-block;}
.personal img {margin:0 auto 20px; width:90%; max-width:340px; border-radius:50%;}

.album {position:relative; line-height:0px; display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-flow:row; grid-gap:4px;}
.album a {position:relative; display:block; box-sizing:border-box; max-width:100%; height:auto; overflow:hidden;}
.album a img {position:relative; display:block; box-sizing:border-box; transition: max-width 0.12s, margin 0.12s;}
.album a:hover img {margin:-1%; max-width:102%;}

.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 #444; background:rgba(255,255,255,1); z-index:100; opacity:0.2; filter:alpha(opacity=20);}
.totop:hover {opacity:0.5; filter:alpha(opacity=50);}
.totop i:before, .totop i:after {content:""; position:absolute; background-color:#444; 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);
}

/*///////////////////// ACCORDEON /////////////////////////*/

.transition, ul.accord p, ul.accord li.accor i:before, ul.accord li.accor i:after {transition: all 0.25s ease-in-out;}
.no-select, ul.accord h3 {
 -webkit-tap-highlight-color: transparent;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
ul.accord {border-top:1px dotted #788;}
ul.accord h3 {font-family: Arial, sans-serif; font-weight:bold; font-size:16px; line-height:24px; padding:0 60px 0 0; margin:20px 0 24px;}
ul.accord h3.vortext {font-weight:400; margin:0 0 24px;}
ul.accord h3.morebutton {padding:10px 26px !important; margin:30px 0 20px !important; width:max-content; box-sizing:border-box; display:none;
font-size:15px; line-height:30px; font-weight:400; text-align:center; color:#fff !important; background:#b0d0e0; transition: padding 0.2s;}
ul.accord p, ul.accord li.accor ul, ul.accord li.accor ul li {position:relative; overflow:hidden; transform:translate(0, 0); z-index:2;}
ul.accord {list-style:none; perspective:900; padding:0 0 30px 0; margin:0;}
ul.accord li.accor ul li {list-style:disc outside; padding:0 0 0 10px; margin:0 20px 0 0; overflow:visible; text-align:left;}
ul.accord li.accor {position:relative; padding:0; margin:0; border-bottom:1px dotted #788;}
ul.accord li.accor:nth-of-type(1) {animation-delay:0.5s;}
ul.accord li.accor:nth-of-type(2) {animation-delay:0.75s;}
ul.accord li.accor:nth-of-type(3) {animation-delay:1s;}
ul.accord li.accor i {position: absolute; transform: translate(-6px, 0); margin-top:12px; right:10px;}
ul.accord li.accor i:before, ul.accord li.accor i:after {background-color:#203030; content:""; position:absolute; width:3px; height:9px;}
ul.accord li.accor i:before {
 -ms-transform: translate(-2px, 0) rotate(45deg); /* IE 9 */
 -webkit-transform: translate(-2px, 0) rotate(45deg); /* Chrome, Safari, Opera */
 transform: translate(-2px, 0) rotate(45deg);
}
ul.accord li.accor i:after {
 -ms-transform: translate(2px, 0) rotate(-45deg);
 -webkit-transform: translate(2px, 0) rotate(-45deg);
 transform: translate(2px, 0) rotate(-45deg);
}
ul.accord li.accor input[type=checkbox] {position:absolute; width:100%; height:100%; z-index:1; opacity:0; cursor:pointer; z-index:800;}
ul.accord li.accor input[type=checkbox]:checked ~ p, ul.accord li.accor input[type=checkbox]:checked ~ table, 
ul.accord li.accor input[type=checkbox]:checked ~ ul, ul.accord li.accor input[type=checkbox]:checked ~ ol, 
ul.accord li.accor input[type=checkbox]:checked ~ img {margin:0; max-height:0; opacity:0; display:none; transform: translate(0, 50%);}
ul.accord li.accor input[type=checkbox]:checked ~ h3.morebutton {display:block; transition: padding 0.2s, background 0.2s;}
ul.accord li.accor input[type=checkbox]:checked:hover ~ h3.morebutton {padding:10px 30px !important; background:#60b0dd;}
ul.accord li.accor input[type=checkbox]:checked ~ i:before {
 -ms-transform: translate(2px, 0) rotate(45deg);
 -webkit-transform: translate(2px, 0) rotate(45deg);
 transform: translate(2px, 0) rotate(45deg);
}
ul.accord li.accor input[type=checkbox]:checked ~ i:after {
 -ms-transform: translate(-2px, 0) rotate(-45deg);
 -webkit-transform: translate(-2px, 0) rotate(-45deg);
 transform: translate(-2px, 0) rotate(-45deg);
}

@keyframes flipdown {
 0% {
 opacity: 0;
 transform-origin: top center;
	-ms-transform: rotateX(-90deg);
	-webkit-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
 }
 5% {
 opacity: 1;
 }
 80% {
 -ms-transform: rotateX(8deg);
	-webkit-transform: rotateX(8deg);
	transform: rotateX(8deg);
 }
 83% {
 -ms-transform: rotateX(6deg);
	-webkit-transform: rotateX(6deg);
	transform: rotateX(6deg);
 }
 92% {
 -ms-transform: rotateX(-3deg);
	-webkit-transform: rotateX(-3deg);
	transform: rotateX(-3deg);
 }
 100% {
 -ms-transform-origin: top center;
 -webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
 }
}

/*///////////////////// IMAGE LIGHTBOX /////////////////////////*/

#imagelightbox {position:fixed; z-index:1002; cursor:pointer; 
-ms-touch-action: none; touch-action: none;
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.3 ); /* 50 */
box-shadow: 0 0 10px rgba(0,0,0,0.3); /* 50 */
}
#imagelightbox-overlay {position:fixed; top:0; right:0; bottom:0; left:0; z-index:1001; 
background-color:#fff; background-color:rgba(255,255,255,.9);
}
#imagelightbox-loading, #imagelightbox-loading div {border-radius:50%;}
#imagelightbox-loading {position:fixed; top:50%; left:50%; z-index:903; 
width: 2.5em; /* 40 */
height: 2.5em; /* 40 */
padding:0.625em; /* 10 */
margin: -1.25em 0 0 -1.25em; /* 20 */
background-color:#203030;
}
#imagelightbox-loading div {
width: 1.25em; /* 20 */
height: 1.25em; /* 20 */
background-color: #fff;
-webkit-animation: imagelightbox-loading .5s ease infinite;
animation: imagelightbox-loading .5s ease infinite;
}
#imagelightbox-caption {position:fixed; left:0; right:0; bottom:0; z-index:904;
text-align:center; color:#fff; background-color: rgba(0,0,0,0.3);
padding: 0; /* 10 */
}
@-webkit-keyframes imagelightbox-loading {
from {opacity:0.5;	-webkit-transform: scale(0.75);}
50%	 {opacity:1;	-webkit-transform: scale(1);}
to	 {opacity:0.5;	-webkit-transform: scale(0.75);}
}
@keyframes imagelightbox-loading {
from {opacity:0.5;	transform: scale(0.75);}
50%	 {opacity: 1;	transform: scale(1);}
to	 {opacity:0.5;	transform: scale(0.75);}
}

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

@media screen and (max-width: 799px) {
.main {margin:0;}
.halb, .doppel, .drittel {width:100%; margin:0;}
.personal {padding:40px 0 20px;}
.map {height:400px;}
.album {grid-template-columns:repeat(2, 1fr);}
h1, h2 {font-size:32px; line-height:40px;}
.minitext {font-size:20px; line-height:30px;}
p {
-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;
}
.leistungslink, .zitat {
-moz-hyphens: none;
-o-hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
}

@media screen and (max-width: 599px) {
.address {padding:30px 4%;}
.zahnarzt {padding:20px 4%;}
.content {padding:30px 4%;}
.zahn {left:4%;}
.navi {text-align:center; margin:0 auto;}
.navi ul li {margin:0 10px;}
.navi li:first-child {display:none;}
.zitat br {display:none;}
}