@charset 'utf-8';

                      /*::'
                   ,:clllc,         ..
               ';cllllllcll;.  .':lolol;
           .,:clllllllllcloxxdodxxxxxxkxc.
        .,:cllllllllllldk0XWMWXOxxxxxxxxxl.
      .;clllllllllcldOKNMMMMMMMN0xxxxxxxxxo.
      clcllclllllllkNMMMMMMMMMMMWKkxxxxxxxxo,   .....'',,.
      lllllllllllcl0MMMMMMMMMMMMMWXOxxxxxxxxdoloddxxxxxxkx;
      cllllllllclllOMMMMMMMMMMMMMMMNOxxxxxxxxxxxxxxxxxxxxxo.
      cllllllllllllkWMMMMMMMMMMMMMMMWKOkxxxxxxxxxxxxxxxxxxx;
      clllllllllllcxNMMMMMMMMMMMMMMMMWWXOxxxxxxxkkkkkkOOOO0d'.
      :lllllllllllcoKMMMMMMMMMMMMMMMMMMMNXXXXXXNNNNNNWWWWWWWkccllcl:. 
      ;lllllllllllll0MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM0lclllll; 
      ,lllllllllllllkWMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMXoclllllc.
      'llllllllllllcxNMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMNxcllllll'
      .clllllllllllcoKMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMWklllllll;
      .:lllllllllllcl0MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMWXdlllllll:
      .;lllllllllllllkWMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMWN0xollllllllc
       ,llllllllllllcdXMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMWX0xolllllllllllc
       'llllllllllllcoKMMMMMMMMMMMMMMMMMMMMMMMMMMMNKOdllllllllllllllll
       .clllllllllllllOMMMMMMMMMMMMMMMMMMMMMMMWX0kdlcllllllllllllllllc
       .:llllllllllllckNMMMMMMMMMMMMMMMMMMMNKOdolclllllllllllllllllll:
        ;llllllllllllcdXMMMMMMMMMMMMMMMWX0kdlcllllllllllllllllllllc:'.
        'llllllllllllcoKMMMMMMMMMMWNKkkdllllllllllllllllllllllll:,. 
        .clllllllllllllOWMMMMMMWX0xolcclllllllllllllclllllclc:,. 
        .:llllllllllllcxNMMWNKkdlllllllllllllllllllllllllc;'. 
         ;llllllllllllcd0XOxolllllllllllllllllllllllllc;'. 
         'clllllllllc:'.:llllllllllllllllllllllllllc;'. 
         .:llllllc;'.   .cllllllllllllllllllllll:,..
          ;llc:,..      .:llllllllllllllllllc;'
          .;'.           ;lllllllllllllllc;'.
                         ,llllllllllc:;,..
                         .cllllll:;'
                         .clcc;'. 
                         .;*/
    
					 /* Zahnarztpraxis am Petersberg */


/* ¡Renormasaniset */
*, ::before, ::after {background-repeat: no-repeat; box-sizing: border-box;} html {-webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3; -ms-hyphenate-limit-chars: 6 3 3; hyphenate-limit-chars: 6 3 3; -webkit-hyphenate-limit-lines: 3; -ms-hyphenate-limit-lines: 3; hyphenate-limit-lines: 3; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; overflow-y: scroll;} body {background-color: transparent;} a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,button,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,input,kbd,label,legend,li,main,mark,menu,nav,object,ol,option,output,p,pre,q,ruby,s,samp,section,select,small,span,strike,strong,sub,summary,sup,table,tbody,td,textarea,tfoot,th,thead,time,tr,tt,u,ul,var,video {margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;} input {overflow: visible;} button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button;} [type="checkbox"], [type="radio"] {padding: 0;} [type="search"] {-webkit-appearance: textfield; outline-offset: -2px;} textarea {overflow: auto; resize: vertical;} ::-webkit-input-placeholder {color: inherit; opacity: 0.4;} :-webkit-search-decoration {-webkit-appearance: none;} [hidden] {display: none;} audio, video {display: inline-block;} a {background-color: transparent; text-decoration:none } a, area, button, input, label, select, summary, textarea, [tabindex] {-ms-touch-action: manipulation; touch-action: manipulation;} ol,ul{list-style:none} blockquote,q{quotes:none} blockquote:after,blockquote:before,q:after,q:before{content:'';content:none} table{border-collapse:collapse;border-spacing:0} b,strong{font-weight:bold} em,i{font-style:italic} h1,h2,h3,h4,h5,h6{font-weight:400} button, input, select, textarea {font-family: inherit; font-size: inherit; line-height: inherit;} abbr[title]{text-decoration: underline; text-decoration: underline dotted; cursor:help;} img {border-style: none; -moz-user-select: text; -webkit-user-select: text; user-select: text; -moz-user-drag: none; -webkit-user-drag: none; user-drag: none;} svg {fill: currentColor;} svg:not(:root) {overflow: hidden;}

.txt p,
.txt > ul,
article > ol,
.txt > * > li {
margin: 0 0 .35em 0;
}

.txt > *:not(.team) > li {
padding-left: 20px;
text-indent: -20px;
}

.txt > ul:not(.team) > li:before {
content: '» ';
display: block;
float: left;
width: 20px;
}

.txt > ol {counter-reset: liste; list-style-type: none;}

article > ol > li:before {
counter-increment: liste;
content: counter(liste) ".";
display: block;
float: left;
width: 1.5em;
}
/* Renormasaniset! */


@font-face {
font-family: 'Fira Sans';
src: url("../fonts/FiraSans-Medium.woff2") format("woff2"),
     url("../fonts/FiraSans-Medium.woff") format("woff");
font-weight: bold;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Fira Sans';
src: url("../fonts/FiraSans-Light.woff2") format("woff2"),
     url("../fonts/FiraSans-Light.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Fira Sans';
src: url("../fonts/FiraSans-LightItalic.woff2") format("woff2"),
     url("../fonts/FiraSans-LightItalic.woff") format("woff");
font-weight: normal;
font-style: italic;
font-display: swap;
}

body {
font-family: 'Fira Sans', Corbel, sans-serif;
font-size: 16px;
line-height: 1.4em;
}

section {
max-width: 800px;
margin-left: auto;
margin-right: auto;
padding: 1em;
}

.team section,
.team section.txt h2 {
max-width: 100%;
}

a,
a > *,
svg {
transition: all 250ms ease-in;
}

::selection {
color: black;
background: hsla(210,25%,55%,.2);
}

::-webkit-scrollbar-thumb {
width: 12px;
background: hsl(210,33%,75%);
}

::-webkit-scrollbar {
width: 12px;
background: hsla(210,25%,55%,.2);
}

::-webkit-scrollbar:active {
background: rgba(255,255,255,.9);
}

article {
position: relative;
z-index: 25;
/* Safari FIX */
-webkit-transform: translate3d(0,0,0);
}

article.start {
position: relative;
position: -webkit-sticky;
position: sticky;
top: 0;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
flex-flow: row nowrap;
justify-content: center;
background: white;
z-index: 1;
}

svg#start {
margin: auto auto 0 auto;
overflow: visible;
flex: 1 0 auto;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}

svg#start #rechts,
svg#start #links {
fill: hsl(168,38%,72%);
}

svg#start #oben {
fill: hsl(210,33%,75%);
}

svg#start #mitte {
fill: hsl(200,30%,60%);
}

svg#zap-vertikal {
fill: white;
position: absolute;
bottom: 128px;
left: calc(50% - 86px);
}

article section {
position: relative;
}

div.zeile,
article.kontakt {
display: flex;
flex-flow: row nowrap;
}

@media screen and (min--moz-device-pixel-ratio:0) {
  div.zeile {
  margin-top: -1px;
	}
}



div.zeile > article {
flex: 1 1 50%;
}

article.kontakt section {
width: auto;
margin: auto;
}

article#map {
background: hsl(210,33%,75%);
min-height: 480px;
z-index: 45;
}

article.start a {
display: block;
position: absolute;
bottom: 96px;
left: calc(50% - 16px);
width: 32px;
height: 16px;
font-size: 0;
}

article.start a svg {
stroke: white;
stroke-width: 2px;
fill: transparent;
stroke-linecap: round;
overflow: visible;
}

article.start a:hover svg {
stroke-width: 3px;
}

header {
background: rgba(255,255,255,.95);
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 0 24px hsla(210,25%,55%,.2);
}

header section,
header nav ul {
display: flex;
flex-flow: row nowrap;
}

header section > div {
padding: 0 1em 0 0;
}

header section > div + div {
padding: 0 0 0 1em;
margin-left: auto;
}

header svg {
display: block;
margin: 2px 0 0 -4px;
}

svg#zap-horizontal #zahn,
svg#zap-horizontal #petersberg {
fill: hsl(168,38%,52%);
}

svg#zap-horizontal #praxis {
fill: hsl(210,25%,47%);
}

header nav ul li {
margin-right: 1em;
}

header nav ul a {
font-weight: bold;
color: hsl(210,25%,47%);
}

header nav ul a:hover,
header nav ul a.aktiv {
color: hsl(168,38%,52%);
}

header p {
color: hsl(168,38%,52%);
}

header p a {
color: hsl(168,38%,52%);
white-space: nowrap;
}

header p a:hover {
color: hsl(210,25%,47%);
}

header p strong {
color: hsl(168,38%,62%);
}

article.praxis {
color: white;
background: hsl(210,25%,55%);
}

article.praxis section {
padding-top: 0;
padding-bottom: 0;
}

article.impressum {
color: white;
background: hsl(210,25%,47%);
}

.txt h2 {
font-size: 24px;
line-height: 28px;
font-weight: bold;
margin: 0 0 .75em 0;
color: hsl(168,38%,52%);
max-width: 40em;
}

.txt h3 {
font-weight: bold;
margin: .5em 0;
max-width: 40em;
}

article.bulletin section h3 {
margin: 1em 0 .5em 0;
font-weight: bold;
color: hsl(210,25%,47%);
}

.txt h4 {
color: hsl(210,25%,47%);
max-width: 40em;
}

.txt h5 {
color: black;
font-style: italic;
max-width: 40em;
}

article.impressum .txt h4 {
font-style: italic;
color: white;
}

article.impressum .txt h4:before,
article.impressum .txt h4:after {
content: '—';
}

.txt p,
.txt ul,
.txt ol {
margin: 0 0 .75em 0;
max-width: 40em;
}

.txt hr {
border: none;
height: 1px;
background: black;
margin: .5em 0 !important;
}

article.bulletin section hr {
background: hsl(210,25%,47%);
}

.galerie li,
.galerie li img {
display: block;
width: 100%;
max-width: 800px;
height: auto;
}

body .flickity-page-dots {
bottom: -24px;
z-index: 25;
}

body .flickity-page-dots .dot {
width: 8px;
height: 8px;
margin: 4px;
background: hsl(210,33%,75%);
opacity: 1;
}

body .flickity-page-dots .dot.is-selected {
background: hsl(168,38%,62%);
}

article.praxis,
article.leistungen,
article.team,
article.kontakt {
position: relative;
overflow: hidden;
padding-top: .5em;
}

article.leistungen,
article.kontakt {
background: white;
}

article.impressum section div {
padding: 32px;
}

article.bulletin {
background: hsl(168,38%,72%);
}

ul.leistungen {
-moz-column-count: 2;
-moz-column-gap: 20px;
-moz-column-fill: balance;
-webkit-column-count: 2;
-webkit-column-gap: 16px;
-webkit-column-fill: balance;
column-count: 2;
column-gap: 16px;
column-fill: balance;
max-width: 100%;
}

ul.leistungen li {
display: inline-block;
width: 100%;
}

.txt > ul.leistungen > li:before {
content: '+';
font-size: 28px;
font-weight: bold;
color: hsl(168,38%,52%);
}

ul.leistungen a {
color: black;
}

ul.leistungen a:hover {
color: hsl(168,38%,52%);
}

div.leistung {
display: none;
position: fixed;
top: 0;
left: 0;
max-width: 100%;
width: 100%;
height: 100%;
padding: 96px 40px 40px 40px;
margin: 0 auto;
background: hsla(210,25%,55%,.8);
z-index: 150;
overflow-y: scroll;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

div.leistung section {
padding: 40px 48px 32px 48px;
margin: auto;
position: relative;
z-index: 150;
}

.leistung h3 {
color: hsl(210,25%,47%);
margin: 0 0 .5em 0;
}

.txt p a {
font-weight: bold;
color: hsl(168,38%,62%);
}

article.bulletin section p a {
color: hsl(210,25%,47%);
border-bottom: 1px solid transparent;
}

article.bulletin section p a {
color: black;
border-bottom-color: hsl(210,25%,47%);
}

.leistung p a:not(.knopf):after {
content: ' ›››';
}

.txt p a:hover,
.leistung p a:hover,
.kontakt p a {
color: hsl(210,25%,47%);
}

.kontakt .txt p a:hover {
color: hsl(168,38%,62%);
}

.kontakt p.instagram a {
font-weight: normal;
}

.kontakt p.instagram a svg {
display: inline-block;
height: 20px;
width: 20px;
line-height: 1;
margin: 0 .5em 0 0;
transform: translateY(.25em);
}

div.leistung:target,
div.leistung.aktiv {
display: flex;
}

div.leistung:target section,
div.leistung.aktiv section {
background: rgba(255,255,255,.95);
}

div.leistung a.knopf {
position: absolute;
top: 0;
right: 0;
display: inline-block;
font-weight: normal;
font-size: 2em;
line-height: .8em;
padding: 4px 8px;
margin: 0 0 12px 0;
color: white;
background: hsl(168,38%,72%);
}

div.leistung a.knopf:hover {
color: white;
background: hsl(210,25%,47%);
}

svg.zap {
position: absolute;
stroke-width: 3px;
stroke: hsl(168,38%,72%);
fill: none;
opacity: .15;
}

svg.zap:hover {
opacity: .3;
}

article.leistungen svg.zap {
top: 32px;
right: -64px;
}

article.team {
background: hsl(168,38%,93%);
}

article.team svg.zap {
width: 640px;
height: 584px;
stroke-width: 1.5px;
top: 32px;
left: -64px;
}

article.team * {
text-align: center;
}

article.team h3 {
margin: 1em 0 0 0;
color: hsl(210,25%,47%);
}

ul.team {
display: flex;
flex-flow: row wrap;
justify-content: center;
max-width: 100%;
}

ul.team li {
flex: 0 0 320px;
padding: 0 1em;
}

ul.team li > * {
max-width: 100%;
}

ul.team li img,
ul.team li h3:first-child:before {
display: block;
width: 160px;
height: 160px;
border-radius: 50%;
margin: 0 auto auto auto;
}

ul.team li h3:first-child {
margin-top: 0;
}

ul.team li h3:first-child:before  {
content: ' ';
background: hsl(168,38%,62%);
margin-bottom: 1em;
}

article.kontakt svg.zap-flach {
width: 256px;
height: 192px;
position: absolute;
bottom: 0;
left: 0;
fill: hsla(168,38%,62%,.2);
}

article.kontakt svg.zap-flach #kern {
fill: hsla(210,25%,55%,.2);
}

article.kontakt svg.zap-flach:hover {
fill: hsla(168,38%,62%,.3);
}

article.kontakt svg.zap-flach:hover #kern {
fill: hsla(210,25%,55%,.3);
}

.txt p a[href^='tel'],
.txt p a[href^='fax'] {
font-weight: normal;
color: black;
}

.txt p a[href^='tel']:hover,
.txt p a[href^='fax']:hover {
color: hsl(168,38%,52%);
}

article.kontakt b {
color: hsl(210,25%,47%);
}

body .leaflet-container {
font: inherit;
}

body .leaflet-container .leaflet-control-attribution {
background: hsla(210,25%,55%,.8);
color: white;
}

body .leaflet-control-attribution a {
color: white;
}

body .leaflet-bar {
box-shadow: none;
}

body .leaflet-bar a, .leaflet-bar a:hover {
font-weight: bold;
color: white;
background-color: hsl(210,25%,47%);
}

body .leaflet-popup-content-wrapper {
border-radius: 2px;
}

body .leaflet-container a.leaflet-popup-close-button {
color: hsl(168,38%,52%);
}

body .leaflet-container a.leaflet-popup-close-button:hover {
color: hsl(210,25%,47%);
}

body .leaflet-bar a.leaflet-disabled {
color: hsl(210,25%,47%);
background-color: hsl(210,25%,47%);
}

article.impressum h2 {
color: white;
font-size: inherit;
font-weight: normal;
text-align: center;
max-width: 100%;
margin: 0;
}

article.impressum h2 a {
color: white;
}

article.impressum h2 a:hover {
color: hsl(168,38%,62%);
}

article#impressum div,
article#impressum h2 a:nth-of-type(2),
article#impressum:target h2 a:nth-of-type(1) {
display: none;
}

article#impressum:target div,
article#impressum h2 a:nth-of-type(1),
article#impressum:target h2 a:nth-of-type(2) {
display: inline-block;
}

article.impressum h2 a span {
display: inline-block;
vertical-align: top;
font-size: 1.2em;
height: 1em;
width: 1em;
line-height: 1em;
background: white;
color: hsl(210,25%,47%);
font-weight: bold;
border-radius: 50%;
margin: 0 0 0 .25em;
}

article.impressum h2 a:hover span {
background: hsl(168,38%,62%);
}



/* ############# Screens über 1024px ############# */
@media only screen and (min-width: 1024px) {

  svg#zap-vertikal {
  width: 16vw;
  max-width: 258px;
  height: auto;
	left: calc(50% - 8vw);
	}

}


/* ############# Screens über 800px ############# */
@media only screen and (min-width: 800px) {

  svg#start {
  width: 100%;
  height: 100%;
  min-height: 480px;
  }
  
  article.praxis section {
	padding-top: 2em;
	padding-bottom: 2.5em;
	}

}







/* ############# Screens unter 640px ############# */
@media only screen and (max-width: 640px) {
  
  header section {
  display: block;
  }
  
  header nav ul {
	flex-flow: row wrap;
	}
	
	header section {
	padding: 0;
	}
	
	header section > div:first-child {
	display: none;
	}
	
	header section > div + div {
	width: 100%;
	background: white;
	padding: .5em 1em .5em 1em;
	}
	
	svg#zap-horizontal #zahn,
	svg#zap-horizontal #petersberg,
	svg#zap-horizontal #praxis {
	fill: white;
	}
	
	article.leistungen,
	article.team,
	article.kontakt,
	article.praxis {
  padding: .5em 0 0 0;
  }
	
	ul.leistungen {
	-moz-column-count: 1;
	-webkit-column-count: 1;
	column-count: 1;
	}
	
	div.leistung:target,
	div.leistung.aktiv {
	padding: 16px;
	}
	
	div.leistung section {
	padding: 16px 16px 8px 16px;
	}
	
	div.zeile {
	display: block;
	}
	
	article#map {
	min-height: 192px;
	max-height: 50vh;
	}
	
	article#map.leaflet-fullscreen-on {
	max-height: 100vh;
	z-index: 1000;
	}
	
	article.impressum section div {
	padding: 0;
	}
	
}