.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }


body.noscroll { overflow: hidden; height: 100vh; }
body.noscroll #popup { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/*----------------------------------------------------------------------------------
POPUP
----------------------------------------------------------------------------------*/
.overlay { position: fixed; inset: 0; z-index: 999999999; background: rgba(53,117,181,.75); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s ease, visibility .35s ease; }
.overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }

#popup { position: fixed; z-index: 999999999; top: 50%; left: 50%; width: calc(100% - 60px); max-width: 1200px; max-height: calc(96vh - 60px); overflow-y: auto; transform: translate(-50%,-46%); background: var(--white); border-radius: var(--radius); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1), visibility .4s ease; }
#popup.active { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%,-50%); }

#popup .popup-inner { position: relative; min-height: 100%; }
.popup-grid { display: grid; grid-template-columns: 30% 70%; min-height: 650px; }

.popup-side { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 30px; background: var(--blue); color: var(--white); border-radius: var(--radius) 0 0 var(--radius); }
.popup-side > * { position: relative; z-index: 2; }
.popup-label { display: inline-block; margin-bottom: 20px; font-size: .8em; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
#popup .popup-side h3 { margin: 0 0 25px; color: var(--white); text-align: left; font-size: 2.4em; line-height: 1.15; }
.popup-side p, .popup-side a { color: var(--white); }
.popup-contact { position: relative; margin-top: 60px; }
.popup-contact p { margin: 0 0 8px; }

.popup-main { padding: 40px; background: var(--white); border-radius: 0 var(--radius) var(--radius) 0; }

.job-tabs { display: flex; gap: 10px; margin: 0 50px 35px 0; padding: 5px; background: var(--light-blue); border-radius: var(--radius); }
.job-tab { flex: 1; padding: 12px 20px; border: 0; border-radius: calc(var(--radius) * .7); background: transparent; color: var(--blue); font-family: "Manrope", sans-serif; font-size: 1em; font-weight: 700; cursor: pointer; transition: background .3s ease, color .3s ease, transform .3s ease; }
.job-tab.active { background: var(--blue); color: var(--white); }
.job-tab:not(.active):hover { transform: translateY(-1px); }

.job-content { display: none; }
.job-content.active { display: block; }

.popup-job-head { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--light-blue); }
.popup-job-label { display: inline-block; margin-bottom: 8px; color: var(--blue); font-size: .8em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
#popup .popup-job-head h4 { margin: 0; color: var(--black); font-size: 2em; line-height: 1.2; }

.popup-section { margin-bottom: 30px; }
#popup .popup-section h4 { margin: 0 0 10px; color: var(--blue); font-size: 1.35em; }
.popup-section p { margin: 0 0 15px; }
.popup-section p:last-child { margin-bottom: 0; }
.popup-section ul { margin: 12px 0 0 20px; padding: 0; list-style: disc; }

.popup-benefits { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin: 30px 0; }
.popup-benefits > div { padding: 18px 20px; background: var(--light-blue); border-radius: calc(var(--radius) * .7); }
.popup-benefits strong, .popup-benefits span { display: block; }
.popup-benefits strong { margin-bottom: 3px; color: var(--blue); font-family: "Manrope", sans-serif; }
.popup-benefits span { font-size: .9em; }

.popup-cta { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-top: 35px; padding: 25px 30px; background: var(--light-blue); border-radius: var(--radius); }
#popup .popup-cta h4 { margin: 0 0 5px; color: var(--blue); font-size: 1.35em; }
.popup-cta p { margin: 0; }
.popup-button { display: inline-flex; align-items: center; justify-content: center; padding: 14px 24px; background: var(--blue); color: var(--white); font-family: "Manrope", sans-serif; text-decoration: none; white-space: nowrap; border-radius: calc(var(--radius) * .7); transition: transform .3s ease, opacity .3s ease; }
.popup-button:hover { transform: translateY(-2px); opacity: .9; }

.popup-close { position: absolute; top: 20px; right: 20px; z-index: 10; padding: 0; margin: 0; border: 0; outline: 0; background: transparent; color: var(--blue); font-size: 32px; font-weight: 300; line-height: 1; cursor: pointer; transition: transform .3s ease, opacity .3s ease; }
.popup-close:hover { transform: rotate(90deg); opacity: .7; }

@media (max-width: 1000px) {
.popup-close { color: var(--white); }
#popup { width: calc(100% - 30px); max-height: calc(100vh - 30px); }
.popup-grid { grid-template-columns: 1fr; }
.popup-side { padding: 30px; border-radius: var(--radius) var(--radius) 0 0; }
#popup .popup-side h3 { max-width: 600px; font-size: 2em; }
.popup-contact { margin-top: 25px; }
.popup-main { padding: 30px; border-radius: 0 0 var(--radius) var(--radius); }
}

@media (max-width: 600px) {
#popup { width: calc(100% - 20px); max-height: calc(100vh - 80px); }
.popup-side, .popup-main { padding: 25px 20px; }
#popup .popup-side h3 { padding-right: 30px; font-size: 1.7em; }
.popup-close { top: 15px; right: 15px; }
.job-tabs { margin: 0 35px 25px 0; }
.job-tab { padding: 10px; font-size: .9em; }
#popup .popup-job-head h4 { font-size: 1.5em; }
.popup-benefits { grid-template-columns: 1fr; }
.popup-cta { flex-direction: column; align-items: flex-start; gap: 20px; padding: 20px; }
.popup-button { width: 100%; }
}










.info-mobile { display: none; }


/*----------------------------------------------------------------------------------
STARTSEITE
----------------------------------------------------------------------------------*/
.home-box { position: relative; display: flex; justify-content: center; align-items: flex-end; width: 100%; height: 100%; margin-bottom: 120px; border-radius: var(--radius); }

.home-box .image { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; filter: saturate(1.05) contrast(1.03); background: url('https://zahnheilkunde-dr-meyer.de/wp-content/uploads/Zahnarztpraxis-Dr-Meyer-Empfang.webp') center / cover; }
.home-box .image::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 20% 15%, rgba(255,255,255,.22), transparent 35%), radial-gradient(circle at 85% 80%, rgba(70,150,255,.08), transparent 45%), linear-gradient(180deg, transparent 55%, rgba(0,0,0,.12) 100%); }
.home-box .slug { z-index: 9; margin-bottom: 120px; }

.info-box { position: absolute; left: 60px; bottom: -70px; display: flex; overflow: hidden; width: calc(100% - 120px); height: 140px; background: var(--white); border-radius: var(--radius); }
.info-box .col { position: relative; display: flex; justify-content: center; align-items: center; width: 32%; height: 100%; }
.info-box .col.second { width: 36%; }
.info-box .col.first::before { content: ""; position: absolute; left: 0; bottom: 0; width: 65%; height: 4px; background: var(--blue); }
.info-box .col.first::after { content: ""; position: absolute; top: 12px; right: 0; bottom: 12px; width: 1px; background: var(--light-blue); }
.info-box .col.blue { background: var(--blue); }
.info-box .col.blue > a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; text-decoration: none; }
.info-box .col span.info-width { display: inline-block; width: 68px; }
.info-box .col img.icon { width: 40px; height: 40px; margin-right: 20px; }
.info-box .col img.icon-arrow { width: 24px; height: 24px; margin-left: 60px; }
/*----------------------------------------------------------------------------------
LEISTUNGEN
----------------------------------------------------------------------------------*/
.leistungen-box { display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px; max-width: 1380px; margin: 60px auto 0; }

.leistungen-box .card { position: relative; grid-column: span 2; min-height: 320px; perspective: 1200px; }
/* 1 Karte in der letzten Reihe */
.leistungen-box .card:nth-last-child(1):nth-child(3n+1) { grid-column: 3 / span 2; }
/* 2 Karten in der letzten Reihe */
.leistungen-box .card:nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
.leistungen-box .card:last-child:nth-child(3n+2) { grid-column: 4 / span 2; }
.leistungen-box .card-inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.leistungen-box .card-front, .leistungen-box .card-back { position: absolute; inset: 0; overflow: hidden; padding: 30px; border-radius: var(--radius); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.leistungen-box .card-front { background: var(--white); }
.leistungen-box .card-back { background: var(--blue); color: var(--white); transform: rotateY(180deg); }
.leistungen-box .card-front::before { content: ""; position: absolute; left: 0; bottom: 0; width: 50%; height: 4px; background: var(--blue); }
.leistungen-box .card-back::before { content: ""; position: absolute; right: 0; bottom: 0; width: 50%; height: 4px; background: var(--white); }

#leistungen .tooth { position: absolute; top: 100px; right: 12%; width: 12%; height: auto; object-fit: contain; transform: rotate(12deg); filter: brightness(0) invert(1); z-index: -1; }

.card .icon-box { position: absolute; top: 0; right: 0; display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; border-bottom-left-radius: var(--radius); }
.card-front .icon-box { overflow: hidden; background: var(--blue); }
.card-back .icon-box { background: var(--white); }
.card .icon-box img { width: 40px; height: auto; }
.card-front .icon-box img { filter: brightness(0) invert(1); }
.card .content p { margin: 0; }
.card .more, .card .back { position: absolute; left: 30px; bottom: 30px; display: flex; align-items: center; gap: 30px; }
.card .more img, .card .back img { width: 20px; height: auto; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.card .more:hover img, .card .back:hover img { transform: translateX(10px); }
#leistungen ul { margin-left: 18px; list-style: disc; }

/*----------------------------------------------------------------------------------
JOBS
----------------------------------------------------------------------------------*/
.jobs-box { position: relative; z-index: 2; width: 100%; max-width: 900px; margin: 0 auto; text-align: center; }
#jobs p { margin: 0 auto; }
.jobs-button { display: inline-block; margin-top: 30px; padding: 14px 28px; background: var(--white); color: var(--blue); border-radius: var(--radius); text-decoration: none; cursor: pointer; transition: transform .3s ease, opacity .3s ease; }
.jobs-button:hover { transform: translateY(-3px); opacity: .9; }
/*----------------------------------------------------------------------------------
HERO
----------------------------------------------------------------------------------*/
#carpet { position: relative; z-index: 1; width: 100%; max-width: 1900px; height: 55vh; margin: 0 auto; padding: 0 !important; overflow: hidden; background: var(--blue); }

#carpet .hero { position: absolute; inset: 0; z-index: 1; overflow: hidden; clip-path: inset(0); }

#carpet .hero-bg { position: fixed; inset: 0; width: 100%; height: 100vh; background: url("https://zahnheilkunde-dr-meyer.de/wp-content/uploads/Zahnarztpraxis-Dr-Meyer-Galerie-Background.webp") center center / cover no-repeat; transform: scale(1.03); transform-origin: center center; will-change: transform; }
/*----------------------------------------------------------------------------------
PRAXIS
----------------------------------------------------------------------------------*/
.galerie { width: 100%; max-width: 1380px; aspect-ratio: 16 / 9; margin: 60px auto 0 auto; overflow: hidden; position: relative; border-radius: var(--radius); }
.galerie img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(1.05) contrast(1.03); }
.galerie .slick-list, .galerie .slick-track, .galerie .slick-slide, .galerie .slick-slide > div { height: 100%; }
.galerie .slick-dots { bottom: 20px; }
.slick-dots li { margin: 0 2px; }
.slick-dots li.slick-active button:before { color: var(--blue); }
.slick-prev { left: 0 !important; }
.slick-next { right: 0 !important; }
.slick-prev, .slick-next { z-index: 99; width: 40px !important; height: 40px !important; background: var(--blue) !important; display: flex !important; justify-content: center; align-items: center; }
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { background: var(--blue); }
.slick-prev img, .slick-next img { width: 20px; height: 20px; }
.slick-prev:before, .slick-next:before { content:''; display: none; }
.slick-dotted.slick-slider { margin-bottom: 0; }
/*----------------------------------------------------------------------------------
ZITAT
----------------------------------------------------------------------------------*/
.zitat-box { display: flex; justify-content: space-between; gap: 30px; width: 100%; max-width: 1380px; margin: 0 auto; }
.zitat-box .col { position: relative; display: flex; justify-content: center; align-items: center; width: 50%; }
.zitat-box .col.first { padding: 100px 0; }
.zitat-box .col.second { max-width: 456.4px; margin-right: -20px; }
.zitat-box .col .img { position: absolute; z-index: 99; top: 50%; left: 50%; height: calc(100% + 120px); aspect-ratio: 4 / 5; box-sizing: border-box; border-radius: var(--radius); transform: translate(-50%,-50%); }
.zitat-box .col .img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 4px solid var(--white); border-radius: calc(var(--radius) - 4px); }
.zitat-box .col .img-frame { position: absolute; z-index: -1; overflow: hidden; }
.zitat-box .col .img-frame.first { left: -60px; bottom: 60px; width: 220px; height: 64%; background: var(--medium-blue); border-top-left-radius: var(--radius); }
.zitat-box .col .img-frame.second { right: -30px; bottom: 60px; width: 180px; height: 42%; background: var(--light-blue); border-top-right-radius: var(--radius); }
/*----------------------------------------------------------------------------------
GOOGLE
----------------------------------------------------------------------------------*/
.google-box { max-width: 1414px; margin: 0 auto; }
/*----------------------------------------------------------------------------------*
*KONTAKT*
*----------------------------------------------------------------------------------*/
.kontakt-box { position: relative; display: flex; justify-content: center; align-items: stretch; max-width: 1380px; margin: 60px auto 0; border-radius: var(--radius); background: var(--white); }
.kontakt-box .col { position: relative; display: flex; align-items: center; overflow: hidden; padding: 30px; }
.kontakt-box .col.first { width: 35%; border-radius: var(--radius) 0 0 var(--radius); background: var(--blue); }
.kontakt-box .col.second { width: 65%; border-radius: 0 var(--radius) var(--radius) 0; background: var(--white); }
.kontakt-box .col.first .frame { width: 100%; }
.kontakt-box .col.first .frame .content { display: flex; align-items: center; padding-left: 7%; border-bottom: 1px solid var(--medium-blue); }
.kontakt-box .col.first .frame .content.oeffnungszeiten { align-items: flex-start; }
.kontakt-box .col.first .frame .content.oeffnungszeiten .icon { margin-top: 20px; }
.kontakt-box .col.first .frame .content.none, .kontakt-box .col.first .frame .content:last-of-type { border-bottom: none; }
.kontakt-box .col.first .frame .icon { display: flex; justify-content: center; align-items: center; width: 44px; height: 44px; margin-right: 30px; border-radius: 100%; background: rgba(147,182,216,.5); }
.kontakt-box .col.first .frame .icon img { width: 55%; height: auto; object-fit: contain; filter: brightness(0) invert(1); }
.kontakt-box .col.first span.info { display: inline-block; width: 100px; }
.kontakt-box .col.first a, .kontakt-box .col.first p { color: var(--white); }
.kontakt-box p.center.top { padding-bottom: 20px; border-bottom: 1px solid var(--medium-blue) !important; }
.kontakt-box .col.first p { margin-bottom: 20px; }
.kontakt-box .col.first p:last-of-type { margin-bottom: 0; border-bottom: none; }
.kontakt-box .col p.nopadding { padding: 0 !important; }
.kontakt-box .col.first .frame div p { padding: 20px 0; }
#kontakt iframe { position: relative; width: 100%; max-width: 1380px; max-height: 320px; margin: 30px auto 0; border-radius: var(--radius); }

/*----------------------------------------------------------------------------------*
*KONTAKTFORMULAR*
*----------------------------------------------------------------------------------*/
div.wpcf7, form { max-width: 100%; }
div.wpcf7 { position: relative; z-index: 9; display: flex; justify-content: center; }

#form-box { display: flex; flex-wrap: wrap; margin: 0 auto; }
.form-box-submit { display: flex; align-items: flex-end; margin-left: 44px; }
.form-box-submit span { display: flex; align-items: center; text-align: left; }
.form-box-submit span label { width: 160px; }
.form-box-submit .left { width: auto !important; max-width: 240px; padding: 0 20px 0 0; }
.formcol-1 { width: 100%; padding: 0; }
.formcol-2 { width: 50%; padding: 0 15px 0 0; }
.formcol-2.right { padding: 0 0 0 15px; }

.wpcf7-textarea { width: 100%; }
.wpcf7-list-item { margin: 0; }
.privacy span, .privacy span a { color: var(--grey); text-decoration: none; font-size: 14px; }
.privacy input { width: auto !important; }
#form-box input { margin-bottom: 20px; }
#form-box input:not([type="submit"]), #form-box textarea { position: relative; outline: none !important; width: 100%; border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 2px solid var(--light-blue); border-radius: 8px !important; color: var(--black) !important; background: var(--light-blue); font-family: 'Open Sans', sans-serif !important; font-weight: 400; font-style: normal; line-height: 1.6; font-size: 16px; }
#form-box .padding input:not([type="submit"]), #form-box .padding textarea { padding: 10px !important; }
.mathcaptcha-607 input { margin-bottom: 0 !important; padding: 12px 10px !important; }
.wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.wpcf7-acceptance input[type="checkbox"] { position: relative; appearance: none; -webkit-appearance: none; width: 20px; height: 20px; min-width: 20px; flex: 0 0 20px; margin: 2px 0 0 0; padding: 0; background: var(--white); border: 1px solid rgba(53,117,181,.4); border-radius: 4px; cursor: pointer; box-sizing: border-box; transition: border-color .2s ease, background-color .2s ease; }
.wpcf7-acceptance input[type="checkbox"]:hover { border-color: var(--blue); }
.wpcf7-acceptance input[type="checkbox"]:checked { background: var(--white); border-color: var(--blue); }
.wpcf7-acceptance input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 50%; top: 46%; width: 5px; height: 9px; border: solid var(--blue); border-width: 0 2px 2px 0; transform: translate(-50%,-50%) rotate(45deg); }
.wpcf7-acceptance .wpcf7-list-item-label { line-height: 1.45; }
.wpcf7-not-valid { border-bottom: 2px solid red !important; }
.wpcf7-not-valid-tip, .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { display: none; }
#form-box input[type=submit] { position: relative; width: 180px; padding: 10px 20px !important; margin-bottom: 0 !important; background: var(--blue); color: var(--white) !important; border: none; border-radius: 8px; font-family: 'Manrope'; cursor: pointer; transition: transform .3s ease, opacity .3s ease; }
#form-box input[type=submit]:hover { transform: translateY(-2px); opacity: .9; }
#form-box textarea { color: var(--grey) !important; }
#form-box input::-webkit-input-placeholder, #form-box textarea::-webkit-input-placeholder { color: var(--grey) !important; }
#form-box input:-moz-placeholder, #form-box textarea:-moz-placeholder { color: var(--grey) !important; }
#form-box input::-moz-placeholder, #form-box textarea::-moz-placeholder { color: var(--grey) !important; }
#form-box input:-ms-input-placeholder, #form-box textarea:-ms-input-placeholder { color: var(--grey) !important; }

.wpcf7-form p { text-align: center; }
.wpcf7-spinner { display: none !important; }
.wpcf7 form .wpcf7-response-output { max-width: 400px; margin: 20px auto; padding: 0; border: none !important; }
.formcol-1.privacy { display: flex; margin: 10px 0 20px; }
.formcol-1.privacy label { display: flex; align-items: flex-start; }
.formcol-1.privacy label input { display: inline-block; min-width: 20px; margin-right: 10px; }
.privacy p, .privacy span, .privacy span a, .privacy div, .privacy div a { display: inline-block; margin-top: 0; font-size: .9em !important; text-align: left; }

.wpcf7 form.sent .wpcf7-response-output { margin: 30px 0 0 0; padding: 20px 15px; max-width: 400px; text-align: center; font-family: "Manrope", sans-serif; line-height: normal; color: var(--black); border-radius: var(--radius); }

/*----------------------------------------------------------------------------------
HEADER
----------------------------------------------------------------------------------*/
.dot { position: fixed; width: 8px; height: 8px; background: var(--blue); border-radius: 100%; opacity: 0.25; pointer-events: none; z-index: 999999999; }

div#header { z-index: 99999; position: fixed; top: 0; left: 0; width: 100%; height: 100px; padding: 0 60px; display: flex; justify-content: space-between; align-items: center; overflow: hidden; }
div#header .col { height: 100%; display: flex; align-items: center; }
div#header .col img { height: 90px; width: auto; }

ul#menu, ul#menu li a { display: inline-flex; align-items: center; height: 100%; }
li a.popup { font-weight: 700; }
ul#menu { list-style: none; padding: 0; margin: 0; }
ul#menu li { height: 100%; padding: 0 10px; position: relative; }
ul#menu li a { height: 100%; padding: 0 5px; }

/*----------------------------------------------------------------------------------
BURGER MENU
----------------------------------------------------------------------------------*/
.burger-menu { position: fixed; top: 25px; right: 5%; z-index: 9999999; display: none; width: 50px; height: 50px; cursor: pointer; }

.burger .icon { position: absolute; top: 23px; left: 6px; width: 38px; height: 4px; background: var(--blue); border-radius: 0; transition: background .08s ease; }
.burger .icon::before, .burger .icon::after { content: ""; position: absolute; left: 0; width: 38px; height: 4px; background: var(--blue); border-radius: 0; transition: transform .45s cubic-bezier(.22,1,.36,1), top .45s cubic-bezier(.22,1,.36,1), height .3s ease, background .3s ease; }
.burger .icon::before { top: -12px; }
.burger .icon::after { top: 12px; }
.burger.open .icon { background: transparent !important; }
.burger.open .icon::before, .burger.open .icon::after { top: 0; height: 4px; background: var(--white); }
.burger.open .icon::before { transform: rotate(45deg); }
.burger.open .icon::after { transform: rotate(-45deg); }

#menu-container { position: fixed; z-index: 999999; top: 0; right: 0; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background: var(--blue); opacity: 0; visibility: hidden; pointer-events: none; }
#folding-menu, #folding-menu li { width: 100%; text-align: center; }
#folding-menu li a { display: block; margin: 30px 0; color: var(--white); text-decoration: none; font-weight: 700; }

/*----------------------------------------------------------------------------------
FOOTER
----------------------------------------------------------------------------------*/
div#footer { position: relative; z-index: 10; width: 100%; background: var(--blue); padding: 60px; display: flex; justify-content: space-between; align-items: stretch; }
div#footer .col:nth-child(2) { text-align: center; }
div#footer .col:nth-child(3) { display: flex; justify-content: flex-end; align-items: flex-end; font-size: 14px; }
div#footer, div#footer p, div#footer a { color: var(--white); text-decoration: none; } 
div#footer .col img { height: 70px; width: auto; filter: brightness(0) invert(1); }

/*----------------------------------------------------------------------------------
SECTION
----------------------------------------------------------------------------------*/
.entry-content { position: relative; z-index: 10; background: var(--white); }

section { position: relative; z-index: 10; overflow: hidden; }
#home { height: 100vh; padding: 140px 60px 100px; background: var(--white); }
#leistungen { padding: 100px 60px; background: var(--light-blue); }
#praxis { padding: 100px 60px; background: var(--white); box-shadow: 0 -8px 16px -10px rgba(15,25,40,.28), 0 -20px 32px -22px rgba(15,25,40,.20); }
#zitat { z-index: 16 !important; overflow: visible; padding: 0; background: var(--blue); }
#google { z-index: 15; padding: 100px 60px; background: var(--light-blue); box-shadow: 0 -8px 16px -10px rgba(15,25,40,.28), 0 -20px 32px -22px rgba(15,25,40,.20); }
#kontakt { padding: 100px 60px; background: var(--white); }
#jobs { background: var(--blue); padding: 30px 60px; }
#leistungen, #kontakt, #jobs { z-index: 15; box-shadow: 0 8px 16px -10px rgba(15,25,40,.28), 0 20px 32px -22px rgba(15,25,40,.20); }
#imprint { padding: 100px 60px; background: var(--white); }


#jobs::after, #carpet::after, #footer::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 14px 20px -18px rgba(10,25,45,.30), inset 0 -14px 20px -18px rgba(10,25,45,.30); }
#zitat::before, #jobs::before { content: ""; position: absolute; z-index: 0; top: 0; left: 0; right: 0; height: 1px; pointer-events: none; box-shadow: 0 8px 16px -10px rgba(15,25,40,.28), 0 20px 32px -22px rgba(15,25,40,.20); }
#zitat::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; box-shadow: inset 0 18px 28px -16px rgba(10,25,45,.48), inset 0 -18px 28px -16px rgba(10,25,45,.48); }
#zitat .zitat-box { position: relative; z-index: 2; }
/*----------------------------------------------------------------------------------
COLOR THEME
----------------------------------------------------------------------------------*/
:root {
  --white: #ffffff;
  --black: #181818;
  --grey: #4D6175;
  --blue: #3575B5;
  --medium-blue: #93B6D8;
  --light-blue: #F1F7FB;

  --radius: 18px;
}

/*----------------------------------------------------------------------------------
CSS RESET
----------------------------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body { line-height: calc(1em + 0.5rem); text-rendering: optimizeSpeed; -webkit-font-smoothing: antialiased; }
.entry-content { position: relative; }
h1, h2, h3, h4, h5, h6, p { overflow-wrap: break-word; }
ul[role='list'], ol[role='list'] { list-style: none; }
img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; }
a:not([class]) { text-decoration-skip-ink: auto; }
a, area, button, input, label, select, summary, textarea, [tabindex] { -ms-touch-action: manipulation; touch-action: manipulation; }
input, button, textarea, select { font: inherit; }
strong { font-weight: bolder; }
:where(button, [type='button' i], [type='reset' i], [type='submit' i]) { -webkit-appearance: button; }
small { font-size: 80%; }
table { border-collapse: collapse; border-spacing: 0; caption-side: bottom; }
textarea { white-space: revert; }
@media (prefers-reduced-motion: no-preference) {  html:focus-within { scroll-behavior: smooth; }  }
@media (prefers-reduced-motion: reduce) {  html:focus-within { scroll-behavior: auto; }  }
/*----------------------------------------------------------------------------------
MAX-WIDTH PAGE
----------------------------------------------------------------------------------*/
@media only screen and (min-width: 1900px) {
	.entry-content, #header, #footer { max-width: 1900px; margin-left: auto; margin-right: auto; }
	#header { left: 50% !important; transform: translateX(-50%); }
}
/*----------------------------------------------------------------------------------
ALLGEMEIN || FONT
----------------------------------------------------------------------------------*/
header#header, header.header, footer#footer, #sidebar { display: none; }

body { font-size: 16px; color: var(--grey); font-weight: 500; font-style: normal; font-family: "OpenSans-Regular", sans-serif; }

body, #header { background: var(--white); }
p, span, div { line-height: 1.75 !important; }
a { cursor: pointer !important; color: var(--grey); text-decoration: none; }
ul#menu li a { color: var(--black); text-decoration: none; letter-spacing: 0.5px; }
ul#menu li a:hover { color: var(--blue); }
.white { color: var(--white) !important; }
.lightblue { color: var(--light-blue) !important; }
.center { text-align: center !important; }
b { font-weight: 700; }

h1, h2, h3, h4, h5, h6, .info-box .col span, #folding-menu li a { font-family: "Manrope", sans-serif; line-height: normal; }
.home-box .slug h2 { margin-bottom: 0; color: var(--white); text-align: center; font-size: 2.75em; font-weight: 700; }
#leistungen h2, #praxis h2, #kontakt h2, #jobs h2 { margin-bottom: 0; color: var(--blue); text-align: center; font-size: 1.6em; font-weight: 700; text-transform: uppercase; }
#leistungen h3, #praxis h3, #zitat h2, #kontakt h3, #jobs h3 { margin: 10px 0 30px; color: var(--black); text-align: center; font-size: 3.25em; font-weight: 700; line-height: 1.15; }
#popup h3 { margin: 10px 0 30px; text-align: center; font-size: 3em; font-weight: 700; line-height: 1.15; }
#popup h4 { color: var(--blue); font-size: 1.6em; font-weight: 700; }
#zitat h2 { max-width: 700px; margin: 0; font-size: 2.5em; }
.kontakt-box h4 { margin-bottom: 0; color: var(--white); text-align: center; font-size: 1.35em; font-weight: 700; }
.home-box .slug h2, #zitat h2 { text-shadow: 0 1px 2px rgba(10,20,35,.25), 0 4px 12px rgba(10,20,35,.20); }

.card-front .content h4, .card-back .content h4 { margin-bottom: 30px; font-size: 1.6em; font-weight: 700; }
.card-front .content h4 { color: var(--blue); }
.card-back .content h4 { color: var(--white); }
.card .more span, .card .back span { font-weight: 700; text-decoration: none; }
.card .more span { color: var(--blue); }
.card .back span { color: var(--white); }
.card a { text-decoration: none; }

.info-box .col span.subline { color: var(--black); font-weight: bold; text-transform: uppercase; }
.info-box .col span.subline, #leistungen p, #leistungen ul li, #praxis p, #kontakt p, #jobs p { font-size: 1.125em; }

#zitat p { margin: 20px 0 0; line-height: 1.15 !important; text-align: center; font-size: 1em; }
#zitat p .small { font-size: 14px; }

#leistungen .headline-box, #praxis .headline-box, #kontakt .headline-box, #popup .headline-box { max-width: 810px; margin: 0 auto; }
#leistungen .headline-box p { max-width: 610px; margin: 0 auto; }
#praxis .headline-box p { max-width: 710px; margin: 0 auto; }
#kontakt .headline-box p { margin: 0 auto; }

#imprint h2 { font-family: "Manrope", sans-serif; line-height: normal; font-size: 2.5em; margin: 60px 0; }
#imprint h3 { margin: 60px 0 30px; color: var(--black); font-size: 1.5em; font-weight: 700; line-height: 1.15; }
#imprint b { font-weight: 700; display: block; margin-bottom: 20px; }
#imprint p { margin-bottom: 20px; }
#imprint ul { list-style: disc; margin-left: 20px; margin-bottom: 20px; }
/*----------------------------------------------------------------------------------
FONT
----------------------------------------------------------------------------------*/
@font-face {
    font-family: Manrope;
    font-style: normal;
    font-display: swap;
    src: url('https://zahnheilkunde-dr-meyer.de/gsap/Manrope-VariableFont_wght.ttf') format('truetype');
}
@font-face {
    font-family: OpenSans-Regular;
    font-style: normal;
    font-display: swap;
    src: url('https://zahnheilkunde-dr-meyer.de/gsap/OpenSans-Regular.ttf') format('truetype');
}
/*----------------------------------------------------------------------------------
SHADOW || TRANSITION
----------------------------------------------------------------------------------*/
#form-box input:not([type="submit"]), #form-box textarea { box-shadow: inset 0 1px 3px rgba(15,25,40,.08), inset 0 2px 6px rgba(15,25,40,.03); }

.entry-content, #header, .home-box, .info-box, .leistungen-box .card-front, .leistungen-box .card-back, .galerie, .zitat-box .col .img-frame, .zitat-box .col .img img, #zitat, .slick-prev, .slick-next, #kontakt iframe, .kontakt-box, .kontakt-box .col, #form-box input[type=submit], #popup, #menu-container { 
box-shadow:
    inset 0 0 0.5px 1px hsla(0, 0%, 100%, .12),
    0 0 0 1px hsla(230, 13%, 9%, .06),
    0 .5px .8px hsla(230, 13%, 9%, .025),
    0 1.5px 3px hsla(230, 13%, 9%, .04),
    0 6px 12px hsla(230, 13%, 9%, .07);
}

#header::after, .info-box::after, .info-box .col.blue::after, .leistungen-box .card-front::after, .card-front .icon-box::after, .leistungen-box .card-back::after, .galerie::after, .zitat-box .col .img-frame::after, .zitat-box .col .img img::after, .slick-prev::after, .slick-next::after, #kontakt iframe::after, .kontakt-box .col::after, #form-box input[type=submit]::after, #popup .popup-inner::after, #menu-container::after { content: ""; position: absolute; inset: 0; z-index: 50; pointer-events: none; background: radial-gradient(ellipse 75% 110% at 30% -35%, rgba(255,255,255,.35) 0%, rgba(255,255,255,.16) 35%, transparent 68%), linear-gradient(to bottom, transparent 60%, rgba(20,60,100,.025) 80%, rgba(20,60,100,.06) 100%); }


/*----------------------------------------------------------------------------------
RESPONSIVE
----------------------------------------------------------------------------------*/
@media (max-width: 1440px) {
p, span, div { line-height: 1.55 !important; }
.home-box .slug h2 { font-size: 2.6em; }
#leistungen h2, #praxis h2, #kontakt h2, #jobs h2 { font-size: 1.5em; }
#leistungen h3, #praxis h3, #zitat h2, #kontakt h3, #jobs h3 { font-size: 3.3em; line-height: 1.15; }
#popup h3 { font-size: 2.8em; line-height: 1.15; }
#popup h4 { font-size: 1.5em; }
#zitat h2 { font-size: 2.35em; }
.kontakt-box h4 { font-size: 1.275em; }
.card-front .content h4, .card-back .content h4 { font-size: 1.5em; }
.info-box .col span.subline, #leistungen p, #leistungen ul li, #praxis p, #kontakt p, #jobs p { font-size: 1.06em; }

div#header { padding: 0 30px; }
#home { padding: 130px 30px 100px; }
.info-box { left: 30px; width: calc(100% - 60px); }
#leistungen, #praxis, #google, #kontakt { padding: 100px 30px; }
.zitat-box { padding: 0 60px 0 30px; }
.zitat-box .col.first { width: 60%; padding: 60px 0; }
.zitat-box .col.second { width: 40%; }
#footer { padding: 60px 30px !important; }
}
@media (max-width: 1300px) {

.info-box .col { width: 28%; }
.info-box .col.second { width: 44%; }
.info-box .col p { width: fit-content; }
.info-box .col.first p:last-of-type { max-width: 186px; }
.info-box .col img.icon { width: 34px; height: 34px; margin-right: 14px; }
.info-box .col img.icon-arrow { margin-left: 14px; }

#leistungen .tooth { right: 30px; }
.leistungen-box .card-front, .leistungen-box .card-back { padding: 30px 16px; }
.card .more, .card .back { left: 16px; }

.kontakt-box .col.first { min-width: 386px; }
.kontakt-box .col.first .frame .content { padding-left: 0; }
.kontakt-box .col.first .frame .icon { width: 38px; height: 38px; margin-right: 16px; }
}

@media (max-width: 1200px) {
.home-box .slug h2 { font-size: 2.4em; }
#leistungen h2, #praxis h2, #kontakt h2, #jobs h2 { font-size: 1.4em; }
#leistungen h3, #praxis h3, #zitat h2, #kontakt h3, #jobs h3 { font-size: 3.05em; }
#popup h3 { font-size: 2.6em; }
#popup h4 { font-size: 1.4em; }
#zitat h2 { font-size: 1.75em; }
.kontakt-box h4 { font-size: 1.2em; }
.card-front .content h4, .card-back .content h4 { font-size: 1.4em; }
.info-box .col span.subline, #leistungen p, #leistungen ul li, #praxis p, #kontakt p, #jobs p { font-size: 1em; }

div#header { padding: 0 15px; }
#home { padding: 130px 15px 100px; }
.info-box { left: 15px; width: calc(100% - 30px); }
#leistungen, #praxis { padding: 60px 15px; }
#google { padding: 30px 15px; }
#kontakt { padding: 60px 15px 30px 15px; }
#jobs { padding: 60px 15px; }
.zitat-box { padding: 0 30px 0 15px; }
.zitat-box .col.first { width: 60%; padding: 30px 0; }
.zitat-box .col.second { width: 40%; }

.leistungen-box { gap: 15px; }
.leistungen-box .card { min-height: 300px; }
.zitat-box .col .img-frame.first { left: -40px; height: 56%; }

#footer { flex-direction: column; justify-content: center !important; align-items: center !important; gap: 30px; padding: 40px 15px !important; }
div#footer .col img { height: 52px; }
}

@media (max-width: 1000px) {
.dot { display: none; }

ul#menu { display: none; }
.burger-menu { display: inherit; }

.info-box .col.first { width: 36%; }
.info-box .col.second { width: 55%; }
.info-box .col.blue { width: 14%; }
.info-box .col.blue > a { flex-wrap: wrap; justify-content: center; align-content: center; gap: 10px 20px; }
.info-box .col.blue > a > div { display: none; }
.info-box .col.blue > a > .icon { order: 2; margin: 0; }
.info-box .col.blue > a > .icon-arrow { display: none; }
.info-box .col.blue p { margin: 0 auto; }
.info-box .col.blue p.white { display: none; }
.info-box .col.blue .subline { display: block; }

.leistungen-box .card-front, .leistungen-box .card-back { padding: 24px 16px; }
.card .icon-box { width: 50px; height: 50px; }
.card .icon-box img { width: 34px; }

.kontakt-box .col { padding: 15px; }
.kontakt-box .col.first { min-width: 336px; }
}
@media (max-width: 960px) {

#leistungen { padding: 60px 30px; }

.leistungen-box { grid-template-columns: repeat(2, 1fr); gap: 30px; }
.leistungen-box .card,
.leistungen-box .card:nth-last-child(1):nth-child(3n+1),
.leistungen-box .card:nth-last-child(2):nth-child(3n+1),
.leistungen-box .card:last-child:nth-child(3n+2) { grid-column: auto; }
.leistungen-box .card:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 15px); justify-self: center; }
.leistungen-box .card-front, .leistungen-box .card-back { padding: 24px 30px; }
.card .more, .card .back { left: 30px; }

#zitat h2 { font-size: 1.65em; }
.zitat-box .col .img { height: calc(100% + 60px); }
.zitat-box .col .img-frame.first { left: -30px; bottom: 30px; }
.zitat-box .col .img-frame.second { right: -20px; bottom: 30px; }
}



@media (max-width: 858px) {

.home-box .slug h2 { font-size: 2.15em; }
#leistungen h2, #praxis h2, #kontakt h2, #jobs h2 { font-size: 1.2em; }
#leistungen h3, #praxis h3, #kontakt h3, #jobs h3 { font-size: 2.45em; }
#popup h3 { font-size: 2.3em; }
#popup h4 { font-size: 1.2em; }
.kontakt-box h4 { font-size: 1.15em; }
.card-front .content h4, .card-back .content h4 { font-size: 1.2em; margin-bottom: 15px; }

#home { padding: 115px 15px 140px; }
.home-box .slug { margin-bottom: 140px; }

.info-box { display: grid; grid-template-columns: 72% 28%; height: auto; bottom: -120px; }
.info-box .col { width: 100% !important; padding: 15px; justify-content: flex-start; }
.info-box .col.second { grid-column: 1 / -1; grid-row: 1; padding-left: 13%; padding-top: 30px; }
.info-box .col.first { grid-column: 1; grid-row: 2; padding-left: calc(13% / .7); padding-bottom: 30px; }
.info-box .col.first::before { width: 100%; }
.info-box .col.first::after { content: ""; position: absolute; top: 0; left: 5%; bottom: inherit; width: 90%; height: 1px; background: var(--light-blue); }
.info-box .col.blue { grid-column: 2; grid-row: 2; padding: 0; border-top-left-radius: var(--radius); }
.info-box .col.blue > a { width: 100%; height: 100%; justify-content: center; }
.info-box .col.blue > a > div, .info-box .col.blue .icon-arrow { display: none; }
.info-box .col.blue img.icon { margin: 0; }

#leistungen { padding: 60px 15px; }
.leistungen-box { margin-top: 30px; gap: 15px; }
.leistungen-box .card-front, .leistungen-box .card-back { padding: 24px 15px; }
.card .more, .card .back { left: 15px; }
#leistungen .tooth { top: 10px; }

.galerie, .kontakt-box { margin-top: 30px; }
}
@media (max-width: 800px) {
div#header .col img { height: 80px; }

.galerie .slick-dots { bottom: 0; }

#zitat h2 { font-size: 1.25em; }
#zitat { padding: 15px; }

.zitat-box { justify-content: center; gap: 30px; }
.zitat-box .col.first { width: 70%; }
.zitat-box .col.second { width: 30%; max-width: none; margin-right: 0; }
.zitat-box .col .img { height: 100%; }
.zitat-box .col .img-frame { display: none; }

#kontakt .headline-box p { max-width: 370px; }
.kontakt-box { flex-direction: column; }
.kontakt-box .col.first, .kontakt-box .col.second { min-width: inherit; width: 100%; }
.kontakt-box .col.first { border-radius: var(--radius) var(--radius) 0 0; padding: 30px 15px; }
.kontakt-box .col.second { border-radius: 0 0 var(--radius) var(--radius); padding: 30px 20px; }
.kontakt-box .col.first .frame { width: 100%; margin: 0 auto; }
.kontakt-box .col.first .frame .content { display: grid; grid-template-columns: 44px 1fr; column-gap: 20px; align-items: center; width: min(100%, 316px); margin: 0 auto; padding: 8px 0; border-bottom: 0; }
.kontakt-box .col.first .frame .content.oeffnungszeiten { align-items: start; }
.kontakt-box .col.first .frame .content.oeffnungszeiten .icon { margin-top: 8px; }
.kontakt-box .col.first .frame .icon { width: 44px; height: 44px; margin: 0; }
.kontakt-box .col.first .frame .content p { margin: 0; padding: 8px 0; }
.kontakt-box .col.first span.info { width: 90px; }
.kontakt-box p.center.top { margin-bottom: 18px !important; padding-bottom: 0; border-bottom: 0 !important; }
#form-box { width: 100%; }
.formcol-2, .formcol-2.right { width: 100%; padding: 0; }
#kontakt iframe { max-height: 280px; }
}

@media (max-width: 600px) {
#header { height: 80px; }
div#header .col img { height: 70px; }
.slick-dots li { margin: 0 !important; }
.card .more, .card .back { bottom: 12px; }

#home { padding: 80px 0 175px; }
.home-box { border-radius: 0; }
.info-box { left: 0; width: 100%; }
.info-box .col { padding: 15px !important; }
.info-box .col.second { justify-content: center; }
.info-box .col span.info-width { width: 96px; }
.info-desktop { display: none; }
.info-mobile { display: inherit; }

#carpet .hero-bg { position: relative; height: 55vh; }

.home-box .slug { margin-bottom: 0; position: absolute; top: 50px; }
.home-box .slug h2 { font-size: 1.45em; text-shadow: 0 1px 2px rgba(10,20,35,.20), 0 4px 12px rgba(10,20,35,.15); }
#leistungen h3, #praxis h3, #kontakt h3, #jobs h3 { font-size: 1.45em; }

.leistungen-box { grid-template-columns: 1fr; }
.leistungen-box .card { grid-column: 1 / -1 !important; width: 100% !important; min-height: 240px; max-width: 400px; margin: 0 auto; }

.zitat-box { padding: 0; gap: 15px; }
#zitat h2 { font-size: 1em; text-shadow: 0 1px 2px rgba(10,20,35,.05), 0 4px 12px rgba(10,20,35,.02); }
.zitat-box .col.first { padding: 15px 0; }
.zitat-box .col .img { height: auto; width: 100%; }
.zitat-box .col .img > img { border: 2px solid var(--white); }

.form-box-submit { flex-direction: column; gap: 20px; }
.wpcf7-acceptance label { gap: 0; }
.form-box-submit { margin: 0 auto; justify-content: center; align-items: center; }
#form-box input[type=submit] { height: 52px; }
.form-box-submit .left { padding: 0; max-width: 170px; }
}
@media (max-width: 490px) {
div#footer p { max-width: 300px; }
div#footer span.space { display: none; } 
div#footer span { display: inline-block; } 
div#footer span:first-of-type { margin-top: 12px; } 
}
@media (max-width: 375px) {
.kontakt-box .col.first .frame .content { column-gap: 10px; }
}
@media (max-width: 340px) {
#zitat h2 { font-size: 0.9em; }
}