/*
Theme Name:     JFM Divi Child Theme
Theme URI:      https://www.elegantthemes.com/gallery/divi/
Description:    Jellyfish.media Divi Child Theme
Author:         Jellyfish.media
Author URI:     https://www.jellyfish.media
Template:       Divi
Version:        1.0
*/


/*############################## FONT FACES ##############################*/

@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/roboto-v51-latin-300.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v51-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/roboto-v51-latin-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-v51-latin-700.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/roboto-v51-latin-900.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/merriweather-v33-latin-300.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/merriweather-v33-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/merriweather-v33-latin-700.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/merriweather-v33-latin-900.woff2') format('woff2');
}


/*############################## TYPOGRAPHY — FORCE OVER DIVI ##############################*/


/* Divi generates inline styles on .et_pb_text_X that override our sizes.
   We use #page-container for specificity to win without !important. */

#page-container h1,
#page-container .et_pb_module h1 {
	font: 400 50px/1.2 'Merriweather', serif;
	color: #444444;
}

#page-container h2,
#page-container .et_pb_module h2,
#page-container .et_post_meta_wrapper h1 {
	font: 400 50px/1.2 'Merriweather', serif !important;
	color: #444444;
}

#page-container h3,
#page-container .et_pb_module h3 {
	font: 400 20px/1.2 'Merriweather', serif !important;
	color: #444444;
}

#page-container h4,
#page-container .et_pb_module h4 {
	font: 400 20px/1.2 'Merriweather', serif !important;
	color: #444444;
}

#page-container h5,
#page-container .et_pb_module h5 {
	font: 400 20px/1.2 'Merriweather', serif !important;
	color: #444444;
}

#page-container h6,
#page-container .et_pb_module h6 {
	font: 400 20px/1.2 'Merriweather', serif !important;
	color: #fff;
}

/* Body text */
#page-container p,
#page-container ul,
#page-container li,
#page-container .et_pb_text_inner p {
	font: 300 20px/1.6 'Roboto', sans-serif;
}

/* Links */
a, p>a, li>a { color: #839ca7; font-weight: bold; line-height: 1.4; }
a:hover { color: #637983; transition: color 0.25s ease-out; }

/* Display headings — hero banner (Startseite) */
#banner h1,
#banner .et_pb_fullwidth_header .header-content h1 {
	font-size: 90px !important;
	line-height: 1 !important;
}

/* "schoen hier zu sein" Startseite H2 */
.et_pb_section_1 h2 {
	font-size: 80px !important;
	line-height: 1 !important;
}

/* Section 2 H2 — 80px */
#page-container .et_pb_section_2 h2 {
	font-size: 80px !important;
	line-height: 1 !important;
}

/* Hero sections on subpages — H1 in colored hero */
#leistung h1,
.et_pb_section:first-child h1 span[style*="color: #ffffff"],
.et_pb_section:first-child h1 span[style*="color: #fff"] {
	font-size: 48px !important;
	line-height: 1.15 !important;
}


/*############################## DESIGN LANGUAGE — ROUNDED / MODERN ##############################*/

/* Shared variables (matching Startseite code blocks) */
:root {
	--sage: #8aab9a;
	--sage-dark: #6b8f7c;
	--slate: #8fa8ba;
	--slate-dark: #6d8ea3;
	--grey: #9aabb8;
	--grey-dark: #7a8f9e;
	--teal: #7aa8a0;
	--navy: #485778;
	--text: #444444;
	--border: #dce8f0;
	--white: #ffffff;
	--radius-sm: 12px;
	--radius-md: 16px;
	--radius-lg: 20px;
	--radius-xl: 24px;
	--shadow-sm: 0 4px 20px rgba(72,87,120,0.07);
	--shadow-md: 0 6px 32px rgba(72,87,120,0.08);
	--shadow-hover: 0 16px 48px rgba(72,87,120,0.11);
}

/* All Divi images get gentle rounding */
#page-container .et_pb_image_wrap img,
#page-container .et_pb_gallery_image img {
	border-radius: var(--radius-md);
}

/* All Divi blurbs get card treatment */
#page-container .et_pb_blurb {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 32px 24px;
	transition: transform 0.4s cubic-bezier(.23,1,.32,1),
	            box-shadow 0.4s ease;
}

#page-container .et_pb_blurb:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-hover);
}

/* All Divi toggle/accordion modules */
#page-container .et_pb_toggle {
	border: 1px solid var(--border);
	border-radius: var(--radius-md) !important;
	box-shadow: var(--shadow-sm);
	margin-bottom: 16px;
	overflow: hidden;
}

#page-container .et_pb_toggle_title {
	font-family: 'Merriweather', serif !important;
	font-size: 22px !important;
	color: var(--navy);
	padding: 20px 24px;
}

/* Gallery items */
#page-container .et_pb_gallery_item {
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

#page-container .et_pb_gallery_item:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
}


/*############################## MENU ##############################*/

#top-menu a {
	color: #ffffff;
	font: 300 21px 'Roboto', sans-serif;
}

.et_header_style_left #et-top-navigation nav>ul>li>a {
	padding-bottom: 10px;
}

/* Nav-CTA-Pill (kontakt-menu/termin-menu) kommt aus functions.php v4.1 —
   li:last-child-Variante entfernt, sonst trifft sie nach Anlage des
   Termin-Menuepunkts das falsche li */

#top-menu li {
	padding-right: 50px;
}

.et_header_style_left #et-top-navigation {
	padding-top: 30px;
	padding-bottom: 30px;
}

.et_header_style_left .et-fixed-header #et-top-navigation {
	padding-top: 20px;
	padding-bottom: 20px;
}

.et-fixed-header#main-header {
	background: #ffffff;
}

.et_header_style_left .et-fixed-header #et-top-navigation nav>ul>li>a {
	color: #000000;
}


/*############################## LAYOUT ##############################*/

.leistungen .et_pb_blurb_container {
	padding-left: 25px;
	margin-top: -20px;
	padding-bottom: 20px;
}

.grey-box {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.verlauf {
	background: linear-gradient(to right, #ffffff 50%, rgba(72, 119, 88, 0.5) 50%);
}

#infos { z-index: 99; }

.intro-leistung {
	display: flex;
	align-items: center;
}

#leistung { padding-top: 0px; }

.text-bild {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}

/* Global section padding — match original 50px bottom, 0 top */
.et_pb_section {
	padding-top: 0px;
	padding-bottom: 50px;
}

.jfm-fullwidth-content { min-width: 100%; }

.jfm-small-width.et_pb_row {
	max-width: 1080px;
	margin: auto;
}

/* Container max width — et_pb_row intentionally excluded, Divi handles it */
.container,
.et_pb_slider .et_pb_container,
.et_pb_fullwidth_section .et_pb_title_container {
	max-width: 1440px;
}


/*############################## GLOBAL ELEMENTS ##############################*/

html {
	hyphens: manual;
	-moz-hyphens: manual;
	-webkit-hyphens: manual;
	-ms-hyphens: manual;
	/* W5-F12: break-word brach Woerter ohne Bindestrich mitten im Wort */
	word-break: normal;
	overflow-wrap: break-word;
}

img {
	image-rendering: -webkit-optimize-contrast;
	pointer-events: none;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px; }
::-webkit-scrollbar-thumb { background: #839ca7; border-radius: 10px; }

#main-header .logo_container a { display: inline; }


/*############################## BANNER ##############################*/

#banner {
	padding: 0;
	aspect-ratio: 16/9;
	width: 100%;
	max-height: 100vh;
}

#banner .et_pb_fullwidth_header { height: 100%; }


/*############################## BUTTONS ##############################*/

.et_pb_button_module_wrapper { text-align: center; }
.et_pb_button_module_wrapper a:hover { text-decoration: none; }
.et_pb_button:after, .et_pb_button:before { display: none; }
.et_pb_posts a.more-link { align-self: baseline; }

.et_pb_module .et_pb_button,
.et_pb_posts a.more-link {
	font: 300 20px 'Roboto', sans-serif !important;
	color: #839ca7;
	background-color: #fff;
	padding: 11px 22px;
	border: 1.5px solid #839ca7;
	border-radius: 25px;
	text-align: center;
	transition: all 0.3s ease;
}

.et_pb_module .et_pb_button:hover,
.et_pb_posts a.more-link:hover {
	color: #fff;
	background-color: #839ca7;
	border: 1.5px solid #839ca7;
}


/*############################## CUSTOM LIST ICON ##############################*/

.et_pb_module ul { list-style-type: none; }

.et_pb_module ul li:before {
	font-family: 'ETMODULES';
	content: '\e09e';
	color: inherit;
	margin-left: -20px;
	margin-top: -5px;
	font-size: 1.2em;
	position: absolute;
	line-height: 1;
	transform: translateY(25%);
}


/*############################## CAROUSEL ##############################*/

.dica_divi_carousel_0 .swiper-button-next:before,
.dica_divi_carousel_0 .swiper-button-prev:before { color: #ffffff; }

.dica_divi_carousel_0 .dica-container .swiper-button-next,
.dica_divi_carousel_0 .dica-container .swiper-button-prev {
	background-color: transparent;
	color: #ffffff;
}

body #page-container .dica_divi_carouselitem_0.dica_divi_carouselitem .dica-item .dica-item-content>div:not(.content):not(.dica-image-container):not(.social-media-container) a {
	color: #ffffff;
	background-color: transparent;
}

body #page-container .dica_divi_carouselitem_0.dica_divi_carouselitem .dica-item .dica-item-content>div:not(.content):not(.dica-image-container):not(.social-media-container) a:hover {
	background-color: #839ca7;
	transition: all 0.3s ease;
}


/*############################## NAVIGATION STATE ##############################*/

#main-header #top-menu.nav li.current-menu-item,
#main-header #top-menu.nav li.current-menu-parent,
.et-fixed-header #top-menu.nav li.current-menu-item,
.et-fixed-header #top-menu.nav li.current-menu-parent {
	background: none;
	border-bottom: none;
}

#main-header #mobile_menu li.current-lang a,
#main-header #mobile_menu li.current-menu-item a,
#main-header #mobile_menu li a:hover,
#main-header #mobile_menu li.current-menu-item a:hover {
	font-weight: 500;
	background: none;
	border-bottom: none;
}

#main-header #mobile_menu a:hover { text-decoration: none; }



/*############################## MOBILE MENU COLLAPSE ##############################*/

#jfm-main-nav .menu-item-has-children .menu-item-has-children > a:first-child::after { content: '5'; }
#main-header #mobile_menu.et_mobile_menu .menu-item-has-children { position: relative; }

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
	position: absolute; z-index: 1; width: 36px; height: 36px; line-height: 36px;
	border-radius: 50%; top: 6px; cursor: pointer; text-align: center;
	background-color: transparent; right: 0;
}

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
	font-family: "ETmodules"; font-weight: normal; font-style: normal; font-variant: normal;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	line-height: 36px; font-size: 24px; text-transform: none; speak: none;
	content: '\33'; color: #839ca7;
}

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before { content: '\32'; }
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu { display: none; padding-left: 15px; }
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu { display: block; }
#main-header #mobile_menu.et_mobile_menu li li { padding-left: 0; }
#main-header #mobile_menu.et_mobile_menu li a,
#main-header #mobile_menu.et_mobile_menu li li a,
#main-header #mobile_menu.et_mobile_menu li li li a { padding-left: 20px; padding-right: 20px; }
#main-header #mobile_menu.et_mobile_menu .menu-item-has-children .sub-menu-toggle + a { padding-right: 20px; }
#top-menu ul.sub-menu>li { display: block; }


/*############################## SLIDE + ACCORDION TITLES ##############################*/

/* W5-F5: weiss auf hellem Slide unlesbar -> dunkel (analog ziz-l-title) */
body #page-container .ziz-slide-title,
body #page-container .et_pb_section .ziz-slide-title {
	font-size: 25px !important;
	color: #1a1a1a !important;
}

/*############################## L-TITLE ##############################*/

/* Slider-Text dunkel (Valentin 17.07.) — Farben zentral in functions.php v4.1 */
body #page-container .ziz-l-title,
body #page-container .et_pb_section .ziz-l-title {
	font-size: 20px !important;
	color: #1a1a1a !important;
}

body #page-container .ziz-l-title em,
body #page-container .et_pb_section .ziz-l-title em {
	font-size: 50px !important;
	color: #a3baab !important;
	font-style: normal !important;
}

/*############################## FAQ ##############################*/

body #page-container .ziz-faq-question,
body #page-container .et_pb_section .ziz-faq-question {
	font-size: 20px !important;
}


/*############################## ACCORDION TRIGGER TITLE ##############################*/

.ziz-acc-trigger-title,
.ziz-acc-trigger-left .ziz-acc-trigger-title,
#page-container .ziz-acc-trigger-title {
	font-size: 20px !important;
	line-height: 1.4 !important;
}


/*############################## FOOTER ##############################*/

.et-l--footer .et_pb_section { background-color: #616161; }
.et-l--footer p { color: #ffffff; }
.et-l--footer h2 { color: #ffffff !important; }
.et-l--footer h4, .et-l--footer .ziz-footer-heading { color: #ffffff !important; }
.et-l--footer a { color: #ffffff; }

.et-l--footer #jfm-meta-footer { padding: 30px 0; }
.et-l--footer #jfm-meta-footer p { color: #ffffff; font-size: 14px; padding-top: 30px; }
.et-l--footer #jfm-ref-footer .et_pb_column { width: 100%; }
.et-l--footer #jfm-ref-footer { padding-top: 10px; padding-bottom: 10px; background-color: #fff; }
.et-l--footer #jfm-meta-footer .et_pb_row,
.et-l--footer #jfm-ref-footer .et_pb_row,
.et-l--footer #jfm-meta-footer .et_pb_column,
.et-l--footer #jfm-ref-footer .et_pb_column { padding: 0px; }
#jfm-ref-footer a { color: #839ca7; }
#jfm-ref-footer a:hover { color: #637983; }

.adresse div { display: flex; flex-direction: row; gap: 25px; }
.adresse div p { color: #ffffff; font-size: 14px; }
.footer-text p { color: #ffffff; font-size: 14px; }
.footer-titel h4 { color: #ffffff; }


/*############################## TEL/FAX ELEMENTS ##############################*/

a.telefonlink, a.emaillink, p.faxlink,
a.telefonlink_en, a.maillink_en, p.faxlink_en {
	cursor: pointer;
	margin-bottom: 10px;
}

p.faxlink, p.faxlink_en { margin-top: -1em; }


/*############################## SUBPAGES — HERO SECTIONS ##############################*/

/* All subpage hero sections — fullwidth image */
.page-id-348 .et_pb_section:first-child,
.page-id-352 .et_pb_section:first-child,
.page-id-369 .et_pb_section:first-child,
.page-id-1090 .et_pb_section:first-child {
	padding-bottom: 0;
}

/* Hero H1 white text — keep white, don't override to black */
.et_pb_section .et_pb_text_inner h1 span[style*="color: #ffffff"],
.et_pb_section .et_pb_text_inner h1 span[style*="color: #fff"],
.et_pb_section .et_pb_text_inner h2 span[style*="color: #ffffff"],
.et_pb_section .et_pb_text_inner h2 span[style*="color: #fff"] {
	color: inherit !important;
}

/* Hero on subpages — H1 should be larger */
#leistung .et_pb_text_inner h1 {
	font-size: 48px !important;
	font-weight: 400 !important;
}


/*############################## LEISTUNGEN PAGE ##############################*/

/* Cards */
.page-id-348 .ziz-category-section .ziz-cards-grid {
	background: #b6cbd7;
	border-radius: var(--radius-lg);
	padding: 40px 20px;
}

.page-id-348 .ziz-card-title {
	font: 400 18px/1.3 'Merriweather', serif !important;
	color: #ffffff !important;
	text-align: center;
}

.page-id-348 .ziz-category-section .card-item,
.page-id-348 .ziz-cards-grid a {
	text-align: center;
	transition: transform 0.3s ease;
	text-decoration: none;
}

.page-id-348 .ziz-category-section .card-item:hover,
.page-id-348 .ziz-cards-grid a:hover {
	transform: translateY(-4px);
}


/*############################## PRAXIS PAGE ##############################*/

/* "schoen hier zu sein" — large decorative heading */
.page-id-352 h2[style*="b6cbd7"],
.page-id-352 .et_pb_text_inner h2 span[style*="b6cbd7"] {
	font-size: 80px !important;
	line-height: 80px !important;
}

/* "wussten Sie" box */
.page-id-352 .et_pb_column[style*="dae5eb"],
.page-id-352 [class*="wussten"] {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 50px 30px;
}

/* White headings inside blue box */
.page-id-352 .et_pb_column[style*="dae5eb"] h2,
.page-id-352 [class*="wussten"] h2 {
	color: #ffffff !important;
	text-align: center;
}

/* "Qualitaetsanspruch" large H2 */
.page-id-352 h2[style*="rgba(40"],
.page-id-352 .et_pb_text_inner h2[style*="50px"] {
	font-size: 50px !important;
}

/* Praxis image white border */
.page-id-352 .et_pb_image_wrap img[src*="praxis-zahnarztpraxis"] {
	border: 30px solid #ffffff;
	border-radius: 0;
}

/* Gallery heading "Praxisimpressionen" */
.page-id-352 h2 span[style*="b6cbd7"] {
	font-size: 40px !important;
}


/*############################## STELLENANGEBOTE PAGE ##############################*/

/* Hero */
.page-id-369 .et_pb_section:first-child {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Job cards */
.page-id-369 .job-card {
	background: var(--white);
	border: 2px solid #b6cbd7;
	border-radius: var(--radius-lg);
	padding: 32px;
	margin-bottom: 20px;
	box-shadow: var(--shadow-sm);
}

.page-id-369 .job-card-filled {
	background: #e7e7e7;
	border: 2px solid #e7e7e7;
	border-radius: var(--radius-lg);
	padding: 32px;
	margin-bottom: 20px;
}

.page-id-369 .job-card-filled h2,
.page-id-369 .job-card-filled h3,
.page-id-369 .job-card-filled p {
	color: #9a9a9a !important;
}

/* W3-Cleanup 2026-07-21: Legacy job-badge-filled + ziz-testimonial + ziz-step-number entfernt.
   job-badge-filled: Content-CSS (grau #9a9a9a, position:absolute right/bottom) darf gewinnen.
   ziz-testimonial + ziz-step-number: nirgends im Content referenziert -> tot. */

/* Form section */
.page-id-369 .et_pb_section[style*="a3baab"] h6 {
	color: #ffffff !important;
}


/*############################## TEAM PAGE ##############################*/

/* Team-Buttons: laufen jetzt ueber das globale Button-System in functions.php v4.1
   (alter page-id-1090-Block mit min-width 240px entfernt) */

/* Team member images — square, rounded */
.page-id-1090 .et_pb_image_wrap img {
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: var(--radius-md);
}

/* Team member names */
.page-id-1090 .sppb-addon-title {
	margin-top: 12px;
}


/*############################## LEISTUNGEN SUBPAGES (Wurzelkanal-Template) ##############################*/

/* Hero section — colored background */
#leistung {
	padding-top: 0;
	padding-bottom: 0;
}

/* Content sections */
.page-template-default .et_pb_section {
	padding-bottom: 50px;
}

/* Subpage content images — rounded */
.page-template-default .et_pb_image_wrap img {
	border-radius: var(--radius-md);
}


/*############################## RESPONSIVE ##############################*/

@media (max-width: 980px) {
	.intro-leistung { display: flex; flex-direction: column; }
	.text-bild-reverse { flex-flow: column-reverse wrap; }
	.text-bild-reverse .et_pb_column:last-child { margin-bottom: 30px; }
	.et-l--footer .et_pb_section .et_pb_row { width: 100%; }
	.et-l--footer .et_pb_section .et_pb_column { width: 50%; padding: 50px; }

	/* Tablet heading sizes */
	#page-container h1 { font-size: 50px !important; }
	#page-container h2 { font-size: 38px !important; }
	#page-container h3 { font-size: 18px !important; }
	#banner h1 { font-size: 60px !important; }
	.et_pb_section_1 h2 { font-size: 60px !important; }
	#page-container .et_pb_section_2 h2 { font-size: 60px !important; }

	/* Praxis "schoen" smaller */
	.page-id-352 h2[style*="b6cbd7"],
	.page-id-352 .et_pb_text_inner h2 span[style*="b6cbd7"] {
		font-size: 60px !important;
		line-height: 60px !important;
	}
}

@media (max-width: 767px) {
	.mobile_middle-outside .swiper-button-next { transform: translateX(70%); }
	.mobile_middle-outside .swiper-button-prev { transform: translateX(-70%); }
	.et-l--footer .et_pb_section .et_pb_column { width: 100%; }

	/* Mobile heading sizes */
	#page-container h1 { font-size: 40px !important; }
	#page-container h2 { font-size: 28px !important; }
	#page-container h3 { font-size: 16px !important; }
	#banner h1 { font-size: 40px !important; }
	.et_pb_section_1 h2 { font-size: 40px !important; }
	#page-container .et_pb_section_2 h2 { font-size: 40px !important; }
	.ziz-l-title, .ziz-cta-title { font-size: 30px; }

	/* Praxis "schoen" mobile */
	.page-id-352 h2[style*="b6cbd7"],
	.page-id-352 .et_pb_text_inner h2 span[style*="b6cbd7"] {
		font-size: 40px !important;
		line-height: 40px !important;
	}

	/* Praxis image border smaller */
	.page-id-352 .et_pb_image_wrap img[src*="praxis-zahnarztpraxis"] {
		border-width: 15px;
	}

	/* Gallery items tighter */
	#page-container .et_pb_gallery_item {
		border-radius: var(--radius-sm);
	}
}


/* v4.6.8 (02.09.2026): Footer im Band 768 bis 980 (iPad hochkant). Die Regel
   oben in @media (max-width: 980px) setzt jede Footer-Spalte auf 50 % Breite mit
   50 px Innenabstand. Der Footer ist aber seit dem Code-Modul .ziz-footer eine
   einzige Vollbreiten-Spalte (et_pb_column_4_4), gemessen 354 px von 768 und 460 px
   von 980, der Inhalt hing links und wurde abgeschnitten (Oeffnungszeiten "Mo",
   "Di,", "Fr:", "Folgen Sie uns"). Seit 14.08. bekannt, von Valentin am 04.08.
   als "gesamter Footer" gelistet. Hier: volle Breite und zweispaltiges Raster,
   ab 981 bleibt das vierspaltige Raster des Moduls unveraendert. */
@media (min-width: 768px) and (max-width: 980px) {
	.et-l--footer .et_pb_section .et_pb_column_4_4 {
		box-sizing: border-box !important;
		width: 100% !important;
		padding: 40px 30px !important;
	}
	.et-l--footer .ziz-footer-grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 32px 40px !important;
	}
}

/*############################## MENU COLOR FIX ##############################*/

/* Override Divi #2EA3F2 on active/ancestor menu items and mobile hamburger */
.mobile_menu_bar:before,
.mobile_menu_bar:after,
#top-menu li.current-menu-ancestor > a,
#top-menu li.current-menu-item > a {
    color: #839ca7 !important;
}


/*############################## SEARCH ICON FIX ##############################*/

/* Vertically center search icon in menu bar */
#et-top-navigation .et_search_form_container,
#et-top-navigation .et_search_form_container a,
#et_search_icon {
    display: flex;
    align-items: center;
}



/*############################## NAV LINK PADDING ##############################*/

@media (min-width: 981px) {
    .et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
        padding-bottom: 10px;
    }
}


/*############################## TOP NAVIGATION VERTICAL CENTER ##############################*/

#et-top-navigation {
    display: flex;
    align-items: center;
}

#et_top_search {
    margin-top: -1%;
}


/*############################## BLURB IMAGE CONSISTENCY ##############################*/

.et_pb_blurb .et_pb_blurb_image img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/*############################## W5.2 WORTTRENNUNGEN MOBIL (2026-07-27) ##############################*/

/* Valentin-Regel: "Groesse Ueberschriften so waehlen, dass keine Worttrennungen".
   Alle Werte empirisch via Playwright ermittelt: groesste Font-Size, bei der das
   laengste Wort der jeweiligen Ueberschrift bei 390px UND 360px Viewport ohne
   Umbruch mitten im Wort passt, minus 1px Sicherheit.
   Messdaten + Beweis-Screenshots: Claude-Shared/ZIZ/27072026/special/ */

/* Leistungen-Detail-Hero (#leistung, 7 Seiten): Die globale 48px-Regel auf
   h1-Spans (s.o. "Hero sections on subpages") brach "Wurzelkanalbehandlung"
   u.a. auch zwischen 480 und 767px. Stufe 1: 32px reicht dort (Wort 380px
   passt in Box ab 403px). Stufe 2 (<=479px): 22px, siehe unten. */
@media (max-width: 767px) {
	body #page-container #leistung .et_pb_text_inner h1,
	body #page-container #leistung .et_pb_text_inner h1 span {
		font-size: 32px !important;
	}
}

@media (max-width: 479px) {

	/* Startseite: Banner-H1 ("Schramberg" 236px @40px > Box) */
	body.page-id-104 #page-container #banner h1 {
		font-size: 34px !important;
	}

	/* Startseite: "unser Leistungsangebot" — em rendert 50px (Regel oben),
	   "Leistungsangebot" 432px > Box 238px */
	body.page-id-104 #page-container .et_pb_section_4 .ziz-l-title em {
		font-size: 23px !important;
	}

	/* Leistungen-Uebersicht: Rubrik-H2 ("Zahnerhaltung" 362px @50px) */
	body.page-id-348 #page-container .et_pb_code_0 h2 {
		font-size: 34px !important;
	}

	/* Praxis: "Qualitaetsanspruch" / "Vorsorgeuntersuchung" / "Praxisimpressionen"
	   N-6 (14.08.): text_4 (22px) und text_12 (22px) sind RAUS. Die Boxen waren
	   nur deshalb zu schmal, weil die Spalte 40px Padding je Seite trug und
	   text_inner weitere 15px. Nach v4.6.6 N-1 und N-2 ist die Box bei 390px
	   350px breit, "Qualitaetsanspruch" braucht 251px und "Praxisimpressionen"
	   273px bei der Standardgroesse 28px. Beide fallen damit auf 28px zurueck
	   und die Seite hat wieder eine H2-Groesse.
	   text_7 bleibt reduziert: das ist die H2 IM Farbtraeger "Wussten Sie",
	   deren Spalte ihre 40px behaelt. Seitlich gehen dort 40px Row plus 80px
	   Spalte weg, die Box ist also Viewport minus 120.

	   N-6b (14.08., nach dem Audit): 20px fest war falsch. Bei 320px ist die Box
	   nur 200px breit, "Vorsorgeuntersuchung" braucht dort 222px und brach mitten
	   im Wort. Das ist genau der Fehler, den die alte 17px-Regel verhindert hatte,
	   und er verletzt Valentins Vorgabe "keine Worttrennungen". Gemessen bei 360px
	   war er nicht zu sehen, das Verify-Set fing dort erst an.

	   Statt eines weiteren Breakpoints jetzt fliessend, damit die Klasse Fehler
	   verschwindet: das Wort braucht 311px bei 28px, also 11.1px pro Schriftpixel.
	   Mit 4px Sicherheit ergibt (Viewport minus 124) geteilt durch 11.3 die
	   groesste Groesse, die noch passt. Nach oben bei 20px gekappt, damit es dem
	   Fliesstext entspricht und nicht darueber hinauswaechst.
	   Ergebnis: 320px ergibt 17.3px, 340px ergibt 19.1px, ab etwa 350px 20px. */
	body.page-id-352 #page-container .et_pb_text_7 h2 {
		font-size: min(20px, calc((100vw - 124px) / 11.3)) !important;
	}

	/* Stellenangebote-Uebersicht: Karten-H3 ("ZFA/ZMV/MFA/Hotelfachkraft" 288px @20px,
	   Chrome bricht NICHT am Slash — Empfehlung an Valentin: kuerzere Titel) */
	body.page-id-369 #page-container .et_pb_code_1 h3 {
		font-size: 12px !important;
	}

	/* Leistungen-Detail-Hero Stufe 2: laengstes Wort "Wurzelkanalbehandlung"
	   570px @48px-Span > Box 313px. Uniform fuer alle 7 Detailseiten. */
	body #page-container #leistung .et_pb_text_inner h1,
	body #page-container #leistung .et_pb_text_inner h1 span {
		font-size: 22px !important;
	}

	/* Stellen-Detail Empfang ("Empfangsmitarbeiter:in" 417px @36px) */
	body.page-id-1299 #page-container .et_pb_fullwidth_header .et_pb_module_header {
		font-size: 17px !important;
	}
	body.page-id-1299 #page-container .et_pb_text_0 h1,
	body.page-id-1299 #page-container .et_pb_text_0 h1 span {
		font-size: 17px !important;
	}

	/* Stellen-Detail ZFA ("Zahnmedizinische" 324px @36px) */
	body.page-id-1300 #page-container .et_pb_fullwidth_header .et_pb_module_header {
		font-size: 22px !important;
	}
	body.page-id-1300 #page-container .et_pb_text_0 h1,
	body.page-id-1300 #page-container .et_pb_text_0 h1 span {
		font-size: 25px !important;
	}

	/* Stellen-Detail Sterilgut ("Sterilgutaufbereitung" 375px @36px) */
	body.page-id-1301 #page-container .et_pb_fullwidth_header .et_pb_module_header {
		font-size: 19px !important;
	}
	body.page-id-1301 #page-container .et_pb_text_0 h1,
	body.page-id-1301 #page-container .et_pb_text_0 h1 span {
		font-size: 23px !important;
	}

	/* Stellen-Detail: Eyebrow "STELLENANGEBOT" (322px @28px, alle 3 Seiten) */
	body.page-id-1299 #page-container .et_pb_text_0 h2,
	body.page-id-1300 #page-container .et_pb_text_0 h2,
	body.page-id-1301 #page-container .et_pb_text_0 h2 {
		font-size: 20px !important;
	}

	/* Team Dr. Landwehr: Banner-H3 "FACHZAHNAERZTIN" (232px @20px) */
	body.page-id-1327 #page-container h3.sppb-addon-title {
		font-size: 16px !important;
	}
}


/*############################## W5.2.1 WORTTRENNUNGEN 360px REST (2026-07-27) ##############################*/

/* Nachtrag zum W5.2-Block: Post-Deploy-Sweep bei 360px (Samsung) fand
   noch 18 Offender auf 15 Seiten. 390px war bereits sauber. Selektoren
   per diagnose-360-rest.mjs verifiziert. */

@media (max-width: 479px) {

	/* Leistungen-Uebersicht (348): Banner-H1 "Leistungsangebot" 285px @32px > Box 260px */
	body.page-id-348 #page-container .et_pb_text_0 h1 {
		font-size: 28px !important;
	}

	/* Praxis (352): Banner-H1 "Zahnarztpraxis" 246px @32px > Box 230px */
	body.page-id-352 #page-container .et_pb_text_0 h1 {
		font-size: 29px !important;
	}

	/* Stellenangebote-Uebersicht (369): Banner-H1 "ABENTEUER" 217px @30px > Box 210px */
	body.page-id-369 #page-container .et_pb_fullwidth_header_0 .header-content h1 {
		font-size: 29px !important;
	}

	/* Stellenangebote (369): 4-Spalten-H2 "INDIVIDUELLE"/"GEMEINSAMEN" 225px @28px > Box 200px */
	body.page-id-369 #page-container .et_pb_text_2 h2 {
		font-size: 24px !important;
	}

	/* Leistungen-Detail (12 Seiten): CTA-H2 "Leistungsangebot" 242px @28px > Box 240px
	   Uniform via .intro-leistung-Row .et_pb_text_12 (Divi Modul-ID konstant ueber alle Detailseiten) */
	body #page-container .et_pb_row.intro-leistung .et_pb_text_12 h2 {
		font-size: 27px !important;
	}
}


/*############################## W5.2.2 SELEKTOR-FIXES 360px (2026-07-27) ##############################*/

/* W5.2.1 hatte 3 zu enge Selektoren. Modul-Indizes .et_pb_text_N variieren je Seite. */

@media (max-width: 479px) {

	/* Fix 1: /stellenangebote/ H1 "ABENTEUER" 211px @29px > Box 210px (1px zu breit) */
	body.page-id-369 #page-container .et_pb_fullwidth_header_0 .header-content h1 {
		font-size: 28px !important;
	}

	/* Fix 2: /stellenangebote/ 4-Spalten-H2 - alle 4 Module (_2, _3, _4, _5), nicht nur _2.
	   Selektor via Row-Position statt Modul-Index. */
	body.page-id-369 #page-container .et_pb_row_2 .et_pb_text h2 {
		font-size: 24px !important;
	}

	/* Fix 3: Leistungen-Detail CTA-H2 "Leistungsangebot" 242px @28px > Box 240px.
	   Modul-Index variiert je Seite (_12 zahnfuellung, _13 inlay, _14 parodontitis/zahnreinigung, ...).
	   Selektor ueber intro-leistung-Row-Klasse ist stabil. */
	body #page-container .et_pb_row.intro-leistung .et_pb_text h2 {
		font-size: 27px !important;
	}
}


/*############################## W5.2.3 WORTTRENNUNGEN 480-767px (2026-07-27) ##############################*/

/* Mid-Viewport-Sweep (767/600/480) fand die Luecke zwischen den @479-Regeln
   und der 767-Grenze: Stellen-Detail-H1s (36px) und Home-em (50px-Lock) brechen
   im Bereich 480-599. min-width-Guard verhindert Kollision mit den @479-Regeln
   (sonst wuerde der spaetere Block bei <=479 gewinnen). Werte = maxFit bei
   kleinster Box im Bereich (Viewport 480) minus Sicherheit. */

@media (min-width: 480px) and (max-width: 767px) {

	/* Startseite: "unser Leistungsangebot" em rendert 50px (globale Regel),
	   "Leistungsangebot" 432px > Box 328px @480. 30px = konsistent mit .ziz-l-title. */
	body.page-id-104 #page-container .et_pb_section_4 .ziz-l-title em {
		font-size: 30px !important;
	}

	/* Stellen-Detail Empfang: Content-H1 "Empfangsmitarbeiter:in" 417px @36px > Box 287px @480 */
	body.page-id-1299 #page-container .et_pb_text_0 h1,
	body.page-id-1299 #page-container .et_pb_text_0 h1 span {
		font-size: 24px !important;
	}

	/* Stellen-Detail Empfang: Overlay-H1 "ZFA/ZMV/MFA/Hotelfachkraft" 461px @32px > Box 380px @480 */
	body.page-id-1299 #page-container .et_pb_fullwidth_header .et_pb_module_header {
		font-size: 26px !important;
	}

	/* Stellen-Detail ZFA: Content-H1 "Zahnmedizinische" 324px @36px > Box 287px @480 */
	body.page-id-1300 #page-container .et_pb_text_0 h1,
	body.page-id-1300 #page-container .et_pb_text_0 h1 span {
		font-size: 31px !important;
	}

	/* Stellen-Detail Sterilgut: Content-H1 "Sterilgutaufbereitung" 375px @36px > Box 287px @480 */
	body.page-id-1301 #page-container .et_pb_text_0 h1,
	body.page-id-1301 #page-container .et_pb_text_0 h1 span {
		font-size: 27px !important;
	}
}


/*############################## W5.2.4 OVERLAY-H1 KORREKTUR 480-767px (2026-07-27) ##############################*/

/* Diagnose (diagnose-w523.mjs): W5.2.3 hatte Overlay und Content vertauscht.
   Die 287px-Box (@480; 364px @600) gehoert dem Fullwidth-Header-Overlay
   (.et_pb_module_header), die 380px-Box dem Content-H1 (.et_pb_text_0).
   Die Content-Regeln aus W5.2.3 griffen und bleiben; hier die fehlenden bzw.
   korrigierten Overlay-Regeln, kalkuliert auf die echte 287px-Box.
   Spaeter-im-File gewinnt bei gleicher Spezifitaet -> 1299 ueberschreibt die 26px. */

@media (min-width: 480px) and (max-width: 767px) {

	/* Empfang: "Empfangsmitarbeiter:in" 417px @36 -> 278px @24 < 287 */
	body.page-id-1299 #page-container .et_pb_fullwidth_header .et_pb_module_header {
		font-size: 24px !important;
	}

	/* ZFA: "Zahnmedizinische" 324px @36 -> 279px @31 < 287 */
	body.page-id-1300 #page-container .et_pb_fullwidth_header .et_pb_module_header {
		font-size: 31px !important;
	}

	/* Sterilgut: "Sterilgutaufbereitung" 375px @36 -> 281px @27 < 287 (fixt auch 600px: 281 < 364) */
	body.page-id-1301 #page-container .et_pb_fullwidth_header .et_pb_module_header {
		font-size: 27px !important;
	}
}


/* ============================================================
   W5.2.5 - Worttrennungs-Paket 27.07.2026 (ersetzt F13 hyphens:auto)
   Prinzip: Font-Sizes/Spalten geometrisch so gesetzt, dass die
   laengsten Woerter OHNE Trennung in ihre Boxen passen (wordW < boxW).
   Messbasis: diag-geometry.mjs + diag-columns.mjs
   @1920/1440/1366/1200/1024/900/768/600/480/390/360.
   ============================================================ */

/* E-Mail-Adressen nie umbrechen (brachen am Punkt/Bindestrich) */
#page-container a[href^="mailto:"] { white-space: nowrap; }

/* -- Leistungsseiten-H1 im Banner: "Wurzelkanalbehandlung" 570px @48px
      vs. Spaltenbox 480/430/368/302 @1440/1366/1200/1024.
      vw-Formel haelt wordW im ganzen Band unter boxW. */
@media (min-width: 981px) and (max-width: 1680px) {
	body.page-id-978 #page-container .et_pb_text_0 h1,
	body.page-id-1186 #page-container .et_pb_text_0 h1,
	body.page-id-1187 #page-container .et_pb_text_0 h1,
	body.page-id-1188 #page-container .et_pb_text_0 h1,
	body.page-id-1191 #page-container .et_pb_text_0 h1 {
		font-size: min(48px, calc(3.2vw - 8px)) !important;
	}
}

/* -- Home: Panel-Spalten haben Divi custom_padding-left 240px ab 981.
      Textbox @1366 nur 377px, "Leistungsangebot" 395px @50px -> Overflow.
      Padding im Laptop-Band auf 40px, gibt +200px Textbreite.
      :has() Chrome105+/FF121+/Safari15.4+; Fallback = Status quo. */
@media (min-width: 981px) and (max-width: 1440px) {
	body.page-id-104 #page-container .et_pb_column:has(> .et_pb_text_7),
	body.page-id-104 #page-container .et_pb_column:has(> .et_pb_text_13) {
		padding-left: 40px !important;
	}
}

/* -- Praxis: Display-H2s (50px) vs. Halb-Spalten (469-273px).
      "Zahnarztpraxis"/"Arbeitsplatz" passen per vw-Formel ohne Umbruch.
      v4.6.7 (02.09.2026): Untergrenze 768 auf 769. Bei exakt 768px stapelt Divi
      die Spalten der Row 2 noch (Box 648px), ab 769px stehen sie nebeneinander
      (Box 273px). Die vw-Formel ergab bei 768 aber schon 22.6px neben 50px-
      Nachbarn ("moderne Technik", "Praxisimpressionen"). Gemessen 02.09.:
      bei 768 passen "Qualitaetsanspruch" (449px in 648) und
      "Kontrolluntersuchung" (539px in 568) mit 50px ohne Umbruch. */
/* v4.6.8 (02.09.2026, Ultrareview L1d + Nachmessung): die alte text_7-Formel
      brach "Kontrolluntersuchung" und "Vorsorgeuntersuchung" im GESAMTEN Band
      769 bis 980 mitten im Wort (gemessen 769, 780, 800, 860, 900, 940, 980).
      Box der Farbtraeger-Spalte = 0.5 vw minus 138 px (245 px bei 769, 350 px
      bei 980), das Wort braucht 11.1 px Breite je Schriftpixel. Neue Formel
      4.4vw minus 13px mit 4 px Reserve: 769 ergibt 20.8 px (Bedarf 231 in 245),
      860 ergibt 24.8 px (275 in 290), 980 ergibt 30.1 px (334 in 350), ab etwa
      1430 px greift die 50-px-Kappe. text_4 daneben bekommt dieselbe Formel,
      damit beide Ueberschriften der Row gleich gross bleiben. */
@media (min-width: 769px) and (max-width: 1440px) {
	body.page-id-352 #page-container .et_pb_text_4 h2,
	body.page-id-352 #page-container .et_pb_text_7 h2 {
		font-size: min(50px, calc(4.4vw - 13px)) !important;
	}
}

/* -- Stellenangebote: Display-H2s in Halb-Spalten, Box 220px @900
      (h2-Box w=200): 22px haelt "Zahnarztpraxis" (198px) drin.
      v4.6.7 (02.09.2026): Untergrenze 768 auf 769, gleiche Ursache wie Praxis.
      Bei exakt 768px ist die Spalte gestapelt (Box 628px), 22px stand dort
      neben 50px-Nachbarn. Am Desktop (981 bis 1440) haben text_2/text_3 50px,
      "INDIVIDUELLE" braucht 375px, "GEMEINSAMEN" 402px, beides passt in 628. */
@media (min-width: 769px) and (max-width: 980px) {
	body.page-id-369 #page-container .et_pb_text_2 h2,
	body.page-id-369 #page-container .et_pb_text_3 h2 {
		font-size: 22px !important;
	}
}

/* -- Job-Seiten Fullwidth-Header + Empfang-H1 im Tablet-Band */
@media (min-width: 768px) and (max-width: 980px) {
	body.page-id-1299 #page-container .et_pb_fullwidth_header .et_pb_module_header,
	body.page-id-1300 #page-container .et_pb_fullwidth_header .et_pb_module_header,
	body.page-id-1301 #page-container .et_pb_fullwidth_header .et_pb_module_header {
		font-size: 38px !important;
	}
	body.page-id-1299 #page-container .et_pb_text_0 h1 {
		font-size: 44px !important;
	}
}
/* "Empfangsmitarbeiter:in" 487px @42px vs Box ~500 @981-1260 */
@media (min-width: 981px) and (max-width: 1260px) {
	body.page-id-1299 #page-container .et_pb_text_0 h1 {
		font-size: 42px !important;
	}
}
/* "Ansprechpartner" 296px @36px vs Box 253-270 @1024 -> 28px = 230px */
@media (min-width: 981px) and (max-width: 1150px) {
	body.page-id-1299 #page-container .et_pb_text_3 h2,
	body.page-id-1300 #page-container .et_pb_text_3 h2,
	body.page-id-1301 #page-container .et_pb_text_3 h2 {
		font-size: 28px !important;
	}
}

/* -- Leistungsseiten Content-H2s: "Leistungsangebot" 433px @50px vs
      Box 402 @1024 -> 42px = 364px. 80px-Display-H2s auf 1186/1191
      analog auf 68px. */
@media (min-width: 981px) and (max-width: 1100px) {
	body.page-id-978 #page-container .et_pb_text_12 h2,
	body.page-id-1186 #page-container .et_pb_text_14 h2,
	body.page-id-1187 #page-container .et_pb_text_14 h2,
	body.page-id-1188 #page-container .et_pb_text_13 h2,
	body.page-id-1191 #page-container .et_pb_text_18 h2 {
		font-size: 42px !important;
	}
	body.page-id-1186 #page-container .et_pb_text_3 h2,
	body.page-id-1191 #page-container .et_pb_text_3 h2 {
		font-size: 68px !important;
	}
}

/* -- Stellenangebote: Bewerbungsablauf-Karten (row_14, 4 Spalten).
      @1366: colW nur 228px -> "Eingangsbestaetigung" (212px @20px) brach.
      Desktop: Row breiter. Tablet-Band: 2x2-Grid. Schmal: 1 Spalte.
      (Divi nativ stackt erst ab 479.) */
@media (min-width: 1367px) {
	body.page-id-369 #page-container .et_pb_row_14 {
		max-width: 1280px !important;
		width: 92% !important;
	}
}
@media (min-width: 768px) and (max-width: 1366px) {
	body.page-id-369 #page-container .et_pb_row_14 {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 24px !important;
	}
	body.page-id-369 #page-container .et_pb_row_14 .et_pb_column {
		width: calc(50% - 12px) !important;
		margin: 0 !important;
	}
}
@media (min-width: 480px) and (max-width: 767px) {
	body.page-id-369 #page-container .et_pb_row_14 .et_pb_column {
		width: 100% !important;
		margin: 0 0 24px !important;
	}
}

/* -- Stellenangebote Benefits (row_5/row_6): 1_4-Spalten @480-767
      nur ~150px breit, Woerter wie "Gesamtpaket" brachen -> stacken. */
@media (max-width: 767px) {
	body.page-id-369 #page-container .et_pb_row_5 .et_pb_column,
	body.page-id-369 #page-container .et_pb_row_6 .et_pb_column {
		width: 100% !important;
	}
}

/* -- Schmale Viewports: Fliesstext/Listen leicht runter, damit
      Komposita ("Kontrolluntersuchung", "Sterilgutaufbereitung")
      ohne Trennung passen.
      N-6 (14.08.): die Praxis-Regel fuer row_2/row_3 p ist RAUS. Sie war der
      Grund fuer Valentins "unterschiedliche Schriftgroessen" auf /praxis/:
      Rows 2 und 3 standen auf 17px, Row 1 und der Rest der Seite auf 20px.
      Der Platz war nur wegen der 40px Spalten-Padding knapp. Nach v4.6.6 N-1
      und N-2 bleibt seitlich nur noch die Row mit 2x20px, die Box ist also
      Viewport minus 40: 350px bei 390 und 320px bei 360. Das laengste Wort
      "Volumentomographie-Aufnahmen" braucht 297px bei 20px und passt damit
      auch auf 360px Geraeten. Genau deshalb ist text_inner seitlich ganz raus
      und nicht nur halbiert. */
@media (max-width: 479px) {
	body.page-id-1328 #page-container .et_pb_fullwidth_header .et_pb_module_header {
		font-size: 30px !important;
	}
}
/* -- N-6c (14.08.): Startseite, CTA-Titel "unser Leistungsangebot".
      Vorbestehender Fehler, nicht aus dem heutigen Diff, beim Umbruch-Scan
      aufgefallen: unter 360px bricht "Leistungsangebot" mitten im Wort. Die
      479er-Regel setzt dort 23px, das Wort braucht damit 199px, die Box hat aber
      nur 162px bei 320 und 176px bei 330 bis 340. Kein hyphens (Valentins Regel),
      also Groesse runter. Boxbreite waechst hier nicht linear mit dem Viewport
      (162, 176, 176, 190, dann konstant 199), eine vw-Formel traegt deshalb
      nicht, ein Stufenwert ist der ehrlichere Weg. 18px deckt den engsten Fall
      bei 320px (dort passen maximal 18.2px). Ab 360px bleibt es bei 23px,
      unveraendert. */
@media (max-width: 359px) {
	body.page-id-104 #page-container .et_pb_section_4 .ziz-l-title em {
		font-size: 18px !important;
	}
}

/* v4.6.8 (02.09.2026): Untergrenze von 390 auf 359. Bei 360 und 384 passen die
   FAQ-Antworten und Karten-Texte mit 20 px ohne Worttrennung (gemessen Home und
   Veneer), bei 320 bricht "Wurzelkanalbehandlungen". Damit hat die Startseite bei
   Valentins Breite 384 nur noch eine Fliesstextgroesse. */
@media (max-width: 359px) {
	#page-container .ziz-faq-answer,
	#page-container .ziz-acc-content {
		font-size: 17px !important;
	}
}
/* Listen der Stellen-Detailseiten bleiben wie bisher bis 390 px bei 17 px, nicht mitgeaendert. */
@media (max-width: 390px) {
	body.page-id-1299 #page-container li,
	body.page-id-1300 #page-container li,
	body.page-id-1301 #page-container li {
		font-size: 17px !important;
	}
}

/* ============================================================
   W5.2.6 - Nachschliff 27.07.2026 (Follow-up zu W5.2.5)
   Befunde aus Praezisions-Sweep @1920-360 nach W5.2.5-Deploy.
   Kernbefund Span-Lock: Regel "Hero sections on subpages"
   (Z.153) matcht Banner-H1-SPANS direkt mit 48px !important -
   die w525-H1-Regel (Z.1099) traf nur das H1-Element, Spans
   blieben 48px. Messbasis: diag-w526*.mjs in
   Claude-Shared/ZIZ/27072026/.
   ============================================================ */

/* -- Banner-H1-Spans der Leistungs-/Patinfo-Detailseiten:
      ID-Selektor (1-2-2) uebersteuert die Span-Regel (0-3-2).
      Neu dazu: 1184/1022/1033 (H1 + Span) - fehlten im alten
      Audit-Umfang. */
@media (min-width: 981px) and (max-width: 1680px) {
	body.page-id-978 #page-container .et_pb_text_0 h1 span,
	body.page-id-1186 #page-container .et_pb_text_0 h1 span,
	body.page-id-1187 #page-container .et_pb_text_0 h1 span,
	body.page-id-1188 #page-container .et_pb_text_0 h1 span,
	body.page-id-1191 #page-container .et_pb_text_0 h1 span,
	body.page-id-1184 #page-container .et_pb_text_0 h1,
	body.page-id-1184 #page-container .et_pb_text_0 h1 span,
	body.page-id-1022 #page-container .et_pb_text_0 h1,
	body.page-id-1022 #page-container .et_pb_text_0 h1 span,
	body.page-id-1033 #page-container .et_pb_text_0 h1,
	body.page-id-1033 #page-container .et_pb_text_0 h1 span {
		font-size: min(48px, calc(3.2vw - 8px)) !important;
	}
}

/* -- "Leistungsangebot"-H2 (50px, Box 402 @1024) auf den 8 im
      alten Audit fehlenden Leistungsseiten. row_7-scoped, weil
      Modul-Nummern pro Seite variieren. 42px -> 363px.
      Band bis 1150 statt 1100: 1101-1120 war marginal
      (Box 438 vs. Wort 432) - alte 5 Pids (w525 Z.1170) fuer
      dieselbe Bandluecke mit verlaengert. */
@media (min-width: 981px) and (max-width: 1150px) {
	body.page-id-1190 #page-container .et_pb_row_7 h2,
	body.page-id-1182 #page-container .et_pb_row_7 h2,
	body.page-id-1132 #page-container .et_pb_row_7 h2,
	body.page-id-1189 #page-container .et_pb_row_7 h2,
	body.page-id-1185 #page-container .et_pb_row_7 h2,
	body.page-id-1181 #page-container .et_pb_row_7 h2,
	body.page-id-1184 #page-container .et_pb_row_7 h2,
	body.page-id-1183 #page-container .et_pb_row_7 h2,
	body.page-id-978 #page-container .et_pb_text_12 h2,
	body.page-id-1186 #page-container .et_pb_text_14 h2,
	body.page-id-1187 #page-container .et_pb_text_14 h2,
	body.page-id-1188 #page-container .et_pb_text_13 h2,
	body.page-id-1191 #page-container .et_pb_text_18 h2 {
		font-size: 42px !important;
	}
}

/* -- Display-H2s (80px, row_2) inkl. Spans: veneer "Leidenschaft"
      498px -> 68px = 423px; patinfo "Informationen" 566px -> 60px
      = 425px (Box(981) ~435). Band bis 1279: nativ 80px passt
      erst ab Box(1280) ~577. 1186/1191 (w525 nur bis 1100) fuer
      die Bandluecke 1101-1279 mitgezogen. */
@media (min-width: 981px) and (max-width: 1279px) {
	body.page-id-1189 #page-container .et_pb_row_2 h2,
	body.page-id-1189 #page-container .et_pb_row_2 h2 span,
	body.page-id-1186 #page-container .et_pb_row_2 h2,
	body.page-id-1186 #page-container .et_pb_row_2 h2 span,
	body.page-id-1191 #page-container .et_pb_row_2 h2,
	body.page-id-1191 #page-container .et_pb_row_2 h2 span {
		font-size: 68px !important;
	}
	body.page-id-1022 #page-container .et_pb_row_2 h2,
	body.page-id-1022 #page-container .et_pb_row_2 h2 span {
		font-size: 60px !important;
	}
}

/* -- Home "unser Leistungsangebot": em rendert 50px (Wort 432px),
      Flex-Innenspalte ~433px @1024. 44px -> 380px. Selektor-
      Muster identisch zur bestehenden 479er-Regel (Z.880). */
@media (min-width: 981px) and (max-width: 1179px) {
	body.page-id-104 #page-container .et_pb_section_4 .ziz-l-title em {
		/* W5.2.7: Box = ziz-l-left minus 2x56 Padding = 349px @981 / 370px @1024
		   (44px-Kalkulation traf padding-lose Innenspalte). Wort @40px = 345.6px.
		   Band bis 1179: nativ 50px (432px) passt erst ab Box(1180) ~446px. */
		font-size: 40px !important;
	}
}

/* -- Stellenangebote Benefits (row_5/6): "Fortbildungsmoeglich-
      keiten" 233px @20px vs. P-Box 219 @1024 -> 17px = 198px.
      Band bis 1150 (Box(1101) 235 vs. 233 marginal). row_6
      symmetrisch mit. */
@media (min-width: 981px) and (max-width: 1150px) {
	body.page-id-369 #page-container .et_pb_row_5 p,
	body.page-id-369 #page-container .et_pb_row_6 p {
		font-size: 17px !important;
	}
}

/* -- Bewerbungsablauf-Karten Desktop: w525-Regel (Z.1187) verlor
      gegen gleichrangige spaetere !important-Regel im Unified-CSS
      (computed blieb 1090px). Doppel-Klasse (1-3-1) gewinnt per
      Spezifitaet - Injektions-Test verifiziert: colW 228 -> 267,
      "Eingangsbestaetigung" 212px + Padding passt. */
@media (min-width: 1367px) {
	body.page-id-369 #page-container .et_pb_row_14.et_pb_row_14 {
		max-width: 1280px !important;
		width: 92% !important;
	}
}

/* -- Notdienst: Chrome bricht "Universitaetsklinikum" (185px,
      passt allein in die 280er-Zeile) wegen overflow-wrap:
      break-word trotzdem mid-line. Normales Wort-Wrapping
      reicht fuer den Uniklinik-Link (laengstes Wort < Box). */
body.page-id-992 #page-container a[href*="uni-heidelberg"] {
	overflow-wrap: normal !important;
}



/* === ZIZ Trustindex Business-Logo lokal gepinnt (Umzug 2026-09-21) ===
   Trustindex-Free liefert die Google-Avatar-URL (lh3 gps-cs-s), die nach Wochen
   403 wird; Auto-Refresh ist Pro. Praxis-Icon lokal setzen, damit der Kopf des
   Bewertungs-Widgets nie wieder ein kaputtes Bild zeigt. Nur .ti-footer,
   Rezensenten-Avatare bleiben unberuehrt. */
.ti-footer .ti-profile-img img { visibility: hidden !important; }
.ti-footer .ti-profile-img {
  background-image: url('/wp-content/uploads/ziz-favicon-512.png') !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-color: #ffffff !important;
}