/*!
Theme Name: Zahnärzte im Gesundhof
Theme URI: https://zahnaerzte-im-gesundhof.de
Author: wald.pixel.werk
Author URI: https://waldpixelwerk.de/
Description: Theme für ZIG
Version: 1.0.0
Tested up to: 8.4
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: zig
Tags: custom-menu, translation-ready
*/

@charset "UTF-8";

   @font-face { 
   font-family: 'gregory-grotesk';
   src: url('./fonts/Gregory-Grotesk-Medium.woff') format('woff'),
        url('./fonts/Gregory-Grotesk-Medium.woff2') format('woff2');
        font-weight:500;
}

@font-face { 
   font-family: 'gregory-text';
   src: url('./fonts/Gregory-Text-Thin.woff') format('woff'),
        url('./fonts/Gregory-Text-Thin.woff2') format('woff2');
        font-weight:200;
}

@font-face { 
   font-family: 'gregory-text';
   src: url('./fonts/Gregory-Text-Light.woff') format('woff'),
        url('./fonts/Gregory-Text-Light.woff2') format('woff2');
        font-weight:300;
}

@font-face { 
   font-family: 'gregory-text';
   src: url('./fonts/Gregory-Text-Medium.woff') format('woff'),
        url('./fonts/Gregory-Text-Medium.woff2') format('woff2');
        font-weight:500;
}

@font-face { 
   font-family: 'gregory-text';
   src: url('./fonts/Gregory-Text-Regular.woff') format('woff'),
        url('./fonts/Gregory-Text-Regular.woff2') format('woff2');
        font-weight:400;
}




 :root{
--black:#000;
--dark:#000000;
--color:#037F93;
--heather:rgba(3, 127, 147, 0.22);
--white:#fff;
--lineheight:1.8em;
--fonts:1.388vw;
--gwidth:4.201vw ;
--gspace: 0.84vw;
--h1:1.2em;
--h2:2.3em;
--h3:1.5em;

 
--container:80vw;
 
  }


@media(min-width:1440px){
 :root{
--fonts:20px;
--gwidth: 60.5px;
--gspace: 12.1px;
--lineheight:36px;
--container:1152px;
  }
}


@media(orientation:portrait){

:root{
    --container:90vw;
    --containerw:94vw;
    --containers:84vw;
    --fonts:3.5vw;
    --spaceleft:4em;
}   
}



/* Global */

body, html{
font-family: "gregory-grotesk", sans-serif;
font-weight: 500;
font-style: normal;
width:100vw;
	 -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
text-rendering: geometricPrecision;

padding:0;margin:0;left:0;top:0;position:relative;font-size:var(--fonts);line-height:var(--lineheight);background-color:var(--white);color: var(--black);white-space-collapsing:discard;min-height:100dvh;}
* { box-sizing: border-box; }


a, a:link{text-decoration:unset;}
h1 , h2, h3, h4{
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
	    text-rendering: optimizeLegibility;
}


h1, h1.h1, h2.h1, h3.h1, .h1{
font-size:var(--h1);
line-height:1.5em;
color:var(--color);
   margin-block-end: 0.4em;
   font-family:"gregory-grotesk", sans-serif;
   font-weight:500;
}


h2, h1.h2, h2.h2, h3.h2, .h2{
font-size:var(--h2);
line-height:1.08em;
color:var(--color);
font-family:"gregory-text";
margin-block-end:0.9em;
font-weight:400;
}

h3, h1.h3, h2.h3, h3.h3, .h3{
font-size:var(--h3);
line-height:1.3em;
color:var(--color);
font-family:"gregory-text";
margin-block-end:0.9em;
font-weight:500;
}

.start-bereiche-text .h3{font-weight:500}
.start-bereiche-text a:after, .praxis-germannsdorf a:after, .zahnmedizin-text  a:after, .schwerpunkt-schwerpunkte-single-text a:after, .vita-lesen:after ,.start-zahnmedizin-text-link a:after, .start-menschen-text-2 a:after{content:" →";margin-left:0;transition:margin-left .3s ease}
.start-bereiche-text a:hover:after, .praxis-germannsdorf a:hover:after, .zahnmedizin-text  a:hover:after, .schwerpunkt-schwerpunkte-single-text a:hover:after, .vita-lesen:hover:after, .start-zahnmedizin-text-link a:hover:after, .start-menschen-text-2 a:hover:after{margin-left:0.5em;}
.vita-lesen{margin-top:1em;margin-bottom:2em;display:inline-block;cursor:pointer;}
.vita-fortbildung-head{margin-top:2em;}
.vita-single-content{height:0;overflow:hidden;transition:height 1s ease;font-size:0.85em;line-height:1.85em}

h4{color:var(--color);}
.h4{text-decoration:underline;font-family:"gregory-grotesk";font-size:1.2em;line-height:1.5em;margin-bottom:0.3em;}


 /* RESET */
.menu-navigation ul,
.menu-navigation li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-navigation a {
    color: inherit;
    text-decoration: none;
}


/* HAUPTMENÜ */
.header-bottom-menu {
    display: flex;
    align-items: center;
    gap: 1em;
}

.header-bottom-menu > li {
    position: relative;
}

.header-bottom-menu > li > a {
    display: block;
    padding: .2em .8em;
font-size:1.25rem;
    background: var(--heather);
    color: var(--color);

    border-radius: 100em;

    transition:
        background-color .4s ease,
        color .4s ease;
}


/* HOVER + AKTIVE SEITE */
.header-bottom-menu > li:hover > a,
.header-bottom-menu > li.current-menu-item > a,
.header-bottom-menu > li.current-menu-parent > a,
.header-bottom-menu > li.current-menu-ancestor > a {
    background: var(--color);
    color: var(--white);
}

/* SUBMENU */
.header-bottom-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .375em;
    padding-top: .5em;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear .8s;
}


/* SUBMENU BUTTONS */
.header-bottom-menu .sub-menu li {
    opacity: 0;
    transform: translateY(-1.5em);

    transition:
        opacity .6s ease,
        transform .6s cubic-bezier(.2,.8,.2,1);
}

.header-bottom-menu .sub-menu a {
    display: block;
    width: max-content;
    padding: .2em 0.8em;
    background: var(--heather);
    color: var(--color);
    border-radius: 100em;
    white-space: nowrap;
    transition: background-color .4s ease, color .4s ease;
}


/* HOVER */
.header-bottom-menu > .menu-item-has-children:hover > .sub-menu {
    visibility: visible;
    pointer-events: auto;

    transition-delay: 0s;
}

.header-bottom-menu > .menu-item-has-children:hover > .sub-menu li {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================
   REINFAHREN – HOVER OUT
   unten beginnt zuerst
========================================= */

.header-bottom-menu .sub-menu li:nth-child(1) {
    transition-delay: .30s;
}

.header-bottom-menu .sub-menu li:nth-child(2) {
    transition-delay: .20s;
}

.header-bottom-menu .sub-menu li:nth-child(3) {
    transition-delay: .10s;
}

.header-bottom-menu .sub-menu li:nth-child(4) {
    transition-delay: 0s;
}


/* =========================================
   RAUSFAHREN – HOVER
   oben beginnt zuerst
========================================= */

.header-bottom-menu > .menu-item-has-children:hover > .sub-menu li:nth-child(1) {
    transition-delay: .10s;
}

.header-bottom-menu > .menu-item-has-children:hover > .sub-menu li:nth-child(2) {
    transition-delay: .40s;
}

.header-bottom-menu > .menu-item-has-children:hover > .sub-menu li:nth-child(3) {
    transition-delay: .70s;
}

.header-bottom-menu > .menu-item-has-children:hover > .sub-menu li:nth-child(4) {
    transition-delay: 1s;
}
 
/* SUBMENU HOVER / ACTIVE */
.header-bottom-menu .sub-menu li:hover > a,
.header-bottom-menu .sub-menu li.current-menu-item > a {
    background: var(--color);
    color: var(--white);
}

header{position:fixed;top:0;left:0;width:100%;z-index:999}
img{max-width:100%}
#content img{border-radius:0.15em}
.container{width:100vw;display: block;text-align: center;position: relative}
.container-inner{width:var(--container);text-align:left;display: inline-block;position:relative;}

#content{max-width:100dvw;}

.text, h1, h2, h3, h4, p{z-index:3;}
.animate p{transition-delay:2s}
img{z-index:1}
.bubble{z-index:2;opacity:0.5;transition:opacity 1s}
.on-scroll .bubble{opacity:1}

.content{display: inline-block;position:relative;float:left}
.content p, .content h1, .content h2, .content h3{z-index:3}
.content img{z-index:1}
.space-small{height:2.5rem;width:100%;display:inline-block;}
.space{width:100%;display:inline-block;height:3.5rem;}
.space-big{width:100%;display:inline-block;height:5rem;}
.clear{width:100%;display:inline-block;min-height:1px}
.fixed-background img.mobile{display:none;}

.content-width-1{width:calc(var(--gwidth))}
.content-width-2{width:calc(var(--gwidth) * 2 + var(--gspace))}
.content-width-3{width:calc(var(--gwidth) * 3 + var(--gspace) * 2)}
.content-width-4{width:calc(var(--gwidth) * 4 + var(--gspace) * 3)}
.content-width-5{width:calc(var(--gwidth) * 5 + var(--gspace) * 4)}
.content-width-6{width:calc(var(--gwidth) * 6 + var(--gspace) * 5)}
.content-width-7{width:calc(var(--gwidth) * 7 + var(--gspace) * 6)}
.content-width-8{width:calc(var(--gwidth) * 8 + var(--gspace) * 7)}
.content-width-9{width:calc(var(--gwidth) * 9 + var(--gspace) * 8)}
.content-width-10{width:calc(var(--gwidth) * 10 + var(--gspace) * 9)}
.content-width-11{width:calc(var(--gwidth) * 11 + var(--gspace) * 10)}
.content-width-12{width:calc(var(--gwidth) * 12 + var(--gspace) * 11)}
.content-width-13{width:calc(var(--gwidth) * 13 + var(--gspace) * 12)}
.content-width-14{width:calc(var(--gwidth) * 14 + var(--gspace) * 13)}
.content-width-15{width:calc(var(--gwidth) * 15 + var(--gspace) * 14)}
.content-width-16{width:calc(var(--gwidth) * 16 + var(--gspace) * 15)}
.content-width-18{width:calc(var(--gwidth) * 18 + var(--gspace) * 17)}


.content-left-minus{margin-left:calc((var(--gwidth)) * -0.5)}
.content-left-minus-2{margin-left:calc((var(--gwidth) + var(--gspace)) * -1)}
.content-left-0{margin-left:0}
.content-left-1{margin-left:calc(var(--gwidth) + var(--gspace))}
.content-left-2{margin-left:calc(var(--gwidth) * 2 + var(--gspace) * 2)}
.content-left-3{margin-left:calc(var(--gwidth) * 3 + var(--gspace) * 3)}
.content-left-4{margin-left:calc(var(--gwidth) * 4 + var(--gspace) * 4)}
.content-left-5{margin-left:calc(var(--gwidth) * 5 + var(--gspace) * 5)}
.content-left-6{margin-left:calc(var(--gwidth) * 6 + var(--gspace) * 6)}
.content-left-7{margin-left:calc(var(--gwidth) * 7 + var(--gspace) * 7)}
.content-left-8{margin-left:calc(var(--gwidth) * 8 + var(--gspace) * 8)}
.content-left-9{margin-left:calc(var(--gwidth) * 9 + var(--gspace) * 9)}
.content-left-10{margin-left:calc(var(--gwidth) * 10 + var(--gspace) * 10)}
.content-left-11{margin-left:calc(var(--gwidth) * 11 + var(--gspace) * 11)}
.content-left-12{margin-left:calc(var(--gwidth) * 12 + var(--gspace) * 12)}
.content-left-13{margin-left:calc(var(--gwidth) * 13 + var(--gspace) * 13)}
.content-left-14{margin-left:calc(var(--gwidth) * 14 + var(--gspace) * 14)}
.content-left-15{margin-left:calc(var(--gwidth) * 15 + var(--gspace) * 15)}
.content-left-16{margin-left:calc(var(--gwidth) * 16 + var(--gspace) * 16)}

.content-padding-right{margin-right:var(--gspace)}


a, a:hover, a:visited{color:var(--color)}

header{position:fixed;top:0;left:0;z-index:9}
.fixed-background{position:fixed;top:0;left:0;z-index:1;height:100svh;width:100dvw;opacity:0.8;overflow:hidden;transition:opacity 1s;pointer-events:none}

.fixed-background::before,
.fixed-background::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 10em;
    z-index: 2;
    pointer-events: none;
}

.fixed-background::before {
    top: 0;
    background: linear-gradient(
        to bottom,
        #fff 0%,
        rgba(255, 255, 255, 0) 100%
    );
}

.fixed-background::after {
    bottom: 0;
    background: linear-gradient(
        to top,
        #fff 0%,
        rgba(255, 255, 255, 0) 100%
    );
}
.fixed-background img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.fixed-bubble-container {
    position: fixed;
    top: 58vh;
    left: 0;
    z-index: 2;
    height: 84dvh;
    width: 100dvw;
    overflow: hidden;
    pointer-events: none;
    will-change: transform;
    transition: none;
}
.color{color:var(--color)}
.bubble {
    position: absolute;
    right: 0;
    top: 0em;
    width: unset;
	height:100%;
    z-index: 2;
}

.bubble img {
    width: unset;
    height: 100%;
}
#content{margin-top:calc(100svh);width:100%;position: relative;z-index:1}
header .container-inner{padding:4em 0;transition:padding 1.4s ease}
header.small .container-inner{padding:1em 0}
.logo{width:17em;float:left;display: inline-block;transition:width 1.4s ease}
.logo svg{width:100%;top:0;left:0}
.logo svg,
.footer-logo svg {
    display: block;
    width: 100%;
    height: auto;
}
.logo svg .black{transition:opacity .7s ease;transition-delay:1s}
.logo svg .dot{transition:transform 1.4s ease;}

header.small .logo{width:10em}
header.small .logo svg .black{opacity:0;transition-delay:0s}
header.small .logo svg .dot {
    transform: translateX(-295%) translateY(-10%) scale(3.5);
}
.menu-navigation{float:right;display: inline-block;position:absolute;right:-4em}

.text-big p{font-size:1.5em;line-height:1.4em !important;}
.start-start .text-big{margin-bottom:2em;}
.button {
    color: var(--white);
    background-color: var(--color);
    padding: 0.5em 1em;
    font-size: 1.25em;
    transition: all .4s ease;
    margin-right: 0.8em;
    margin-bottom: 0.8em;
	line-height:1.2em !important;
    display: inline-block;
    border-radius: 10em;
}
.button:hover{color:var(--color);background-color:var(--heather);}


.animate {
    opacity: 0;
    transform: translateY(2rem);

    transition:
        opacity 2.5s ease,
        transform 3s cubic-bezier(.2,.8,.2,1);
        transition-delay:0.1s;
}
.animate p{line-height:1.8em; transform: translateY(2em);
    transition: transform 2s ease 0s;}
.animate.animate-done {
    opacity: 1;
    transform: translateY(0);
}
.animate.animate-done p{line-height:1.8em; transform: translateY(0);}

/* PARALLAX */

img.parallax {
    display: block;
    will-change: transform;
}


/*start*/

.start-haltung {
    display: flex;
    align-items: center;
}

.start-haltung-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.start-haltung .content-left {
    display: flex;
    justify-content: center;
    align-items: center;
}

.start-haltung .content-left img {
    display: block;
    max-width: 100%;
    height: auto;
}
.start-zahnmedizin h3{width:108%;}
.start-zahnmedizin-text-li{margin-top:0.4em}
.start-zahnmedizin-text-li.h3{line-height:1.6em;font-weight:400}

.start-bereiche-zahl{font-family:'gregory-text';font-weight:200;font-size:15em;line-height:0.78em;color:var(--color)}

.start-bereiche-single {
    display: flex;
}

.start-bereiche-zahl {
    display: flex;
    align-items: flex-end;
}


.start-zahnmedizin-text {margin-top:1em}
.start-kontakt-block h3{margin-block-end:0.2em}
.start-kontakt-block p {
    display: block;
    margin-block-start: 0em;
    margin-block-end: 4em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}

footer{background-color:var(--color);color:var(--white);margin-top:4em;padding:6em 0 3em 0}

.footer-logo{float:left;display: inline-block;width:18em;}

.footer-right{float:right;width:20em;}
.footer-right-text{font-size:1.2em;line-height:1.35em;font-family: "gregory-text";font-weight:400}
.footer-right-links{margin-top:5em;}
.footer-right-links a{color:var(--white) !important;}

/*praxis*/

.praxis-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3em 2em;
}
.praxis-team-grid-single{line-height:1.4em}
.praxis-team-grid-single img {
    display: block;
    width: 100%;
    height: auto;
}

.praxis-vitas-single h2.h3{font-weight:500;margin-block-end:0em}
.praxis-vitas-single p:first-of-type{    margin-block-start: 0em;}

.praxis-team-grid-single img{margin-bottom:1em}
.praxis-team-grid-single h3.h3{margin-block-end:0em;line-height:1.4em;font-weight:500}


/*zahnmedizin*/

.zahnmedizin-kontakt{text-align:center;}
.zahnmedizin-kontakt p{margin-bottom:3em}

/*schwerpunkte*/
.schwerpunkt-schwerpunkte-single-image{ margin-right:2em;}
.schwerpunkt-schwerpunkte-single-text{width:58%;}
.schwerpunkt-schwerpunkte-single{width:100%}
.schwerpunkt-schwerpunkte-single-text h3.h2{font-size:4rem;line-height:1em;font-weight:300;margin-block-end: 0.6em;}
.schwerpunkt-schwerpunkte-single-text{margin-top:-0.3em;}
video{width:100%;
 
    max-height: 28em;
    object-fit: cover;
}

/*prophylaxe*/
.prophlaxe-vorsorge-single{margin-bottom:1.5em;}

/*dentallabor*/

.dental-images-2-image-1{width:38%;margin-right:5%;margin-top:4em;}
.dental-images-2-image-2{width:20%;margin-right:5%;margin-top:15.5em;}
.dental-images-2-image-3{width:32%;}

.dental-handwerk{text-align:center;}
.dental-images-3-image-1{margin-top:13em}

/*kontakt*/

.kontakt-kontakt-block h3{margin-block-end:0.2em}
.kontakt-kontakt-block p {
    display: block;
    margin-block-start: 0em;
    margin-block-end:6em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}

@media (orientation:portrait) and (max-width:1024px){


    .animate {
    opacity: 0;
    transform: translateY(2rem);

    transition:
        opacity 1.5s ease,
        transform 2s cubic-bezier(.2,.8,.2,1);
        transition-delay:0.3s;
}

	.fixed-background{opacity:0.9}

    .logo, header.small .logo{width:13em;z-index:9;position:relative;transition:filter .7s ease}
	.fixed-bubble-container {
    position: fixed;
    top: 65vh;
    left: 0;
    z-index: 2;
    height: 70dvh;
    width: 100dvw;
    overflow: hidden;
    pointer-events: none;
    will-change: transform;
    transition: none;
}
	
	.bubble {
        position: absolute;
        right: 0;
        top: 0;
        width: unset;
        z-index: 2;
    }
	
	
    .menu-active .logo{   filter: brightness(0) invert(1);}
header .container-inner {
    padding: 2em 0px;
}
	 
    .menu{position:fixed;right:1em;top:2em;transition:top 1s ease;z-index:9}
	
	
    header.small .menu{top:1em}
    .menu-burger{background-image:url("./img/kreis-full.svg");background-size:contain;background-repeat:no-repeat;width:3em;height:2.7em;border-radius:2em;transition:background-color .4s ease;}
    .menu-burger-line{width:1.8em;height:0.2em;background-color:var(--color);position:absolute;left:0.6em;top:calc(50% - 0.1em);transition:all .7s ease}
    .menu-burger-line:nth-child(1){transform:translateY(-0.5em)}
    .menu-burger-line:nth-child(3){transform:translateY(0.5em)}
    .menu-active .menu-burger{background-color:rgba(3, 127, 147, 0);}
    .menu-active .menu-burger-line{transform:translateY(0) rotate(45deg);background-color:var(--white)}
    .menu-active .menu-burger-line:nth-child(3){transform:translateY(0) rotate(-45deg)}

   .header-bottom-menu {
    display: inline-block;
    text-align: center;
    width: 100%;

     top:50%;
     position:relative;
    transform:translateY(-50%);
}

.header-bottom-menu > li{display:block;width:100%;text-align:center}
.header-bottom-menu > li > a {
    display: inline-block;
    padding: 0.6em 0;
    font-size: 2.5rem;
    background:unset;
    font-family:"gregory-text";
    color: var(--white);
 
}
	 

.header-bottom-menu .sub-menu {
    position: relative;
    top: unset;
    right: unset;
    display: inline-block;
    flex-direction: column;
    align-items: unset;
    gap: .375em;
    padding-top: 0;
    visibility: visible;
 
    transition: unset;
    width:100%;
    text-align:center;
}

.header-bottom-menu .sub-menu li {
    opacity: 1;
    transform: unset;
    transition: unset;
    text-align: center;
    width:100%;
}

.header-bottom-menu .sub-menu a{
    display: inline-block;
    padding: 0.6em 0;
    font-size: 1.5rem;
    background:unset;
    font-family:"gregory-text";
    color: var(--white);
}


 /* ========================================
       CONTENT WIDTHS
    ======================================== */

    /* SCHMAL – 50% */
    .content-width-1,
    .content-width-2,
    .content-width-3,
    .content-width-4,
    .content-width-5 {
        width: 50%;
    }


    /* MITTEL – 75% */
    .content-width-6,
    .content-width-7,
    .content-width-8,
    .content-width-9,
    .content-width-10 {
        width: 75%;
    }


    /* BREIT – 100% */
    .content-width-11,
    .content-width-12,
    .content-width-13,
    .content-width-14,
    .content-width-15,
    .content-width-16 {
        width: 100%;
    }



    /* ========================================
       LEFT POSITION
    ======================================== */

    .content-left-minus,
    .content-left-minus-2,
    .content-left-0,
    .content-left-1

 {
        margin-left: 0;
    }


    /* KLEINER EINZUG */
        .content-left-2,
       
    .content-left-10 {
        margin-left: 8%;
    }


    /* GRÖSSERER EINZUG */
     .content-left-3,
    .content-left-4,
    .content-left-5,
    .content-left-6,
    .content-left-7,
    .content-left-8,
    .content-left-9,
    .content-left-11,
    .content-left-12,
    .content-left-13,
    .content-left-14,
    .content-left-15,
    .content-left-16 {
        margin-left: 12%;
    }


    /* ========================================
       PADDING
    ======================================== */

.start-haltung {
    display: inline-block;
    align-items: center;
}

.start-bereiche-image, .start-zahnmedizin-text,.start-zahnmedizin-text-link{width:75%}
footer {
    background-color: var(--color);
    color: var(--white);
    margin-top: 4em;
    padding: 4em 0 3em 0;
}
.footer-logo{float:left;display: inline-block;width:13em;margin-bottom:5.5em;}
.footer-right {
    float: right;
    width: 17em;
}

.fixed-background img.desktop{display:none;}
.fixed-background img.mobile{display:block;}
    .praxis-image {
        width: 100%;
        margin-left: 0;
    }
.praxis-vitas-single{margin-left:0;width:100%;}

    .praxis-team-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5em 1em;
    }

.schwerpunkt-schwerpunkte-single-text h3.h2 {
    font-size: 2.5rem;
    line-height: 1em;
    font-weight: 300;
    margin-block-end: 0.6em;
}

.praxis-team-grid-single img {
    margin-bottom: 0.5em;
}

.schwerpunkt-schwerpunkte-single-image{margin-bottom:1em;margin-right:0em;}
.praxis-kollegen, .praxis-germannsdorf{margin-left:12%}
.dental-image:nth-child(1){margin-left:25%;margin-bottom:5%}
.dental-image:nth-child(2){margin-left:12%;margin-bottom:5%}
 
.dental-images-2-image-1 {
    width: 45%;
    margin-right: 5%;
    margin-top: 4em;
}

.dental-images-2-image-2 {
    width: 50%;
    margin-right: 0;
    margin-top: 0.5em;
}


.dental-images-2-image-3 {
    width: 35%;
    margin-top: 5%;
}

.dental-images-3{margin-left:0;width:100%}

.dental-images-3-image-1{margin-top:2em;margin-right:5%}
.dental-images-3-image-2{width:45%;}

.prophlaxe-vorsorge-single:nth-child(odd){margin-left:25%}
.prophlaxe-vorsorge-single:nth-child(even){margin-left:12%}
.zahnmedizin-kontakt{width:75%}

.integrativ-video{margin-bottom:1em;}
.integrativ-zusammen{width:75%}
	
	.animate p{line-height:var(--lineheight);}
	.start-zahnmedizin-text-li{width:110%}
	.praxis-vitas-single{margin-bottom:2em;}
	
 
	.zahnmedizin-image{width:75%}
 
	.fixed-background{transition:opacity 0s;}
	
	.start-haltung-text{width:100%;margin-bottom:2em}
	
	.start-bereiche-image{margin-left:0;width:100%}
	.start-zahnmedizin-text, .start-zahnmedizin-text-2{width:94%}
	
	.start-zahnmedizin-text.content-width-13, .start-menschen-head{width:75%}
	
	.start-zahnmedizin-text-li.h3 {
    line-height: 1.6em;
    font-weight: 400;
    margin-bottom: 0;
    margin-top: 0;
}
	
	
	.start-zahnmedizin-text-li.h3:nth-child(2) {
 
    margin-top: 1em;
}
	
		.start-zahnmedizin-text-li.h3:nth-child(3) {
 
    margin-bottom: 2em;
}
	
	.zahnmedizin-text.content-left-2{margin-left:0}
	
	.zahnmedizin-image, .zahnmedizin-kontakt{width:100%;margin-left:0}
	
	.space-big {
    width: 100%;
    display: inline-block;
    height: 3.5rem;
}
	
	.kontakt-kontakt-block p {
    display: block;
    margin-block-start: 0em;
    margin-block-end: 4em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}
	
	.kontakt-menschen-head{width:100%;margin-left:0}
 

    /* Geschlossen: unsichtbar und nicht bedienbar */
    header .menu-navigation {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        z-index: 8;

        background-color: var(--color);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;

        transition:
            opacity .4s ease,
            visibility 0s linear .4s;
    }

    /* Alle Unterelemente übernehmen den Zustand des Containers */
    header .menu-navigation * {
        pointer-events: inherit;
        visibility: inherit;
		color:#fff !important;
    }

    /* Desktop-Untermenüregeln inklusive Hover mobil zurücksetzen */
    header .menu-navigation .header-bottom-menu .sub-menu,
    header .menu-navigation .header-bottom-menu
        > .menu-item-has-children:hover > .sub-menu {
        visibility: inherit;
        pointer-events: inherit;
        transition: none;
    }

    /* Geöffnet: sichtbar und bedienbar */
    .menu-active header .menu-navigation,
    header.menu-active .menu-navigation,
    header .menu-active .menu-navigation {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transition:
            opacity .4s ease,
            visibility 0s;
    }

    header .menu-navigation .header-bottom-menu .sub-menu li,
    header .menu-navigation .header-bottom-menu
        > .menu-item-has-children:hover > .sub-menu li {
        opacity: 1;
        transform: none;
        transition: none;
        transition-delay: 0s;
        animation: none;
    }
	
	.kontakt-kontakt-block{width:90%}

}