/* FONTS START */

@font-face {
    font-family: 'Corporate S';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/Corporate-S-Light-Regular.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Corporate S';
    font-style: italic;
    font-weight: 300;
    src: url('../fonts/Corporate-S-Light-Italic.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Corporate S';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Corporate-S-Regular.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Corporate S';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/Corporate-S-Bold.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Corporate S';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/Corporate-S-Bold-Italic.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Corporate S';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/Corporate-S-Extra-Bold.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Corporate S';
    font-style: italic;
    font-weight: 800;
    src: url('../fonts/Corporate-S-Extra-Bold-Italic.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Corporate S';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/Corporate-S-Demi.woff2') format('woff2');	
    font-display: swap;
}

.hide-item {
	display:none!important;
}

/*** HIDE BorlabsCookie for admins ***/
.admin-bar div#BorlabsCookieDebugConsole,
.elementor-editor-active div#BorlabsCookieDebugConsole{
    display: none ! Important;
}

body {
    font-family: 'Corporate S', sans-serif!important;
	font-weight: 400;
	max-width: 1920px;
	width: 100%;
	margin-inline: auto !important;
}

h1, h2, h3, h4, h5, h6,
p, a, li {
	font-family: 'Corporate S', sans-serif!important;
	font-weight: 400!important;
}

.single-post h3 {
    color: #000 !important;
    font-size: 20px ! Important;
}
.single-post h4 {
    color: #000 !important;
    font-size: 18px ! Important;
}
.single-post .box-in-post h3 {
    color: #001489 ! Important;
    font-size: 20px ! Important;
    line-height: 26px ! Important;
}
.single-post .op-col-content h3 {
    color: #001489 ! Important;
    font-size: 24px ! Important;
    line-height: 30px ! Important;
	min-height: 60px !important;
	margin-bottom: 10px !important;
}
.single-post .dc-white-box h3 {
	color: #001489 ! Important;
}
.single-post p {
    line-height: 20px;
}
.op-col-3 h3 {
	min-height: 60px;
}

.default-content h2 {
	font-size: 30px;
	line-height: 36px;
}

.default-content p {
	font-size: 16px;
	line-height: 20px;
	color: #626262;
}
.btn-arrow-right a {  
    background-image: url(/wp-content/uploads/2025/10/arrow-right.png);
    padding-right: 30px !important;
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 20px auto;
}

.mb-0 p {
	margin-bottom: 0!important;
}

.pop-dc-logout {
    text-align: center!important;
}
.pop-dc-logout a {
    color: #A50050;
}

/** left nav **/
.left-nav .elementor-nav-menu > li{
      border-bottom: 1px solid #E5E5E5;
}
.left-nav li a {
    padding: 21px 0 !important;
}
.left-nav .sub-menu li a{
    padding-left: 30px!important;
	padding-top: 0!important;
	padding-bottom:20px!important;
}
.left-nav .elementor-nav-menu a {    
    display: flex;
    justify-content: space-between;
}
/* Rotate icon when submenu is open */
.left-nav a[aria-expanded="true"] .sub-arrow i {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

/* Default state (closed) */
.left-nav a[aria-expanded="false"] .sub-arrow i {
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

/* quellen */
.quellen-acc {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.quellen-acc summary.e-n-accordion-item-title {
    padding-left: 0 !important;
}
.top-kontakt-link .elementor-widget-container {
    background-image: url('/wp-content/uploads/2025/10/email-img-red.png');
    background-repeat: no-repeat;
    background-position: left center;   
	transition: color 0.3s, background-image 0.3s;
	background-size: contain;
}


.top-kontakt-link .elementor-widget-container:hover,
.top-kontakt-link .elementor-widget-container a:hover {
    background-image: url('/wp-content/uploads/2025/10/email-img-blue.png'); 
	background-repeat: no-repeat;
    background-position: left center;
	background-size: contain;
}


.top-kontakt-link .elementor-heading-title a {
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
	padding-left: 25px;
	font-weight: 600!important;
}

.top-kontakt-link .elementor-heading-title a:hover,
.top-kontakt-link .elementor-widget-container:hover a{
    color: #001489!important;
}
.single-post #content {
    background-image: url(https://osteoporose-praxiswissen.de/wp-content/uploads/2025/10/post-bg.webp);
    background-position: bottom right;
    background-size: cover;    background-attachment: fixed; 
	padding-bottom: 200px;
}
.info-img-left img {
    height: 250px!important;
    object-fit: cover;
}

.ok-small-box .ok-arrow-2 {
  display:none;
}
.ok-small-box:hover .ok-arrow-2 {
  display:flex;
}
.ok-small-box:hover .ok-arrow-1 {
  display:none;
}
.bold-font p {
    font-weight: 700!Important;
}
.home .white-boxes {
    max-width: 550px;
}
#dc-login-iframe {
  margin: 0 auto !important;
  max-width: 430px;
  width: 100%;
}

.dc-login-wrapper {
  display: flex;  
  justify-content: center;
}
.dc-post #dc-login-iframe { 
  max-width: 520px;
  width: 100%;
}

button.back-btn {
    border-radius: 20px;
    background: #A50050;
    color: #fff;
}
button.back-btn:hover {    
    background: #001489;
    border: 1px solid #001489;   
}
.dc-login-wrapper p {
    color: #A50050;
}

/* ===== Contact page  ===== */
.op-form {
  --border: #d1d5db;
  --focus: #b0005b;
  --text: #111827;
  --label: #6b7280;
  --bg: #fff;
  font-size: 15px;
  display: grid;
  gap: 18px;
}

.op-form .row { display: grid; gap: 18px; }
.op-form .row-3 { grid-template-columns: repeat(3, 1fr); }
.op-form .row-2 { grid-template-columns: repeat(2, 1fr); }
.op-form .row-1 { grid-template-columns: 1fr; }

@media (max-width: 900px) {
  .op-form .row-3 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .op-form .row-2 { grid-template-columns: 1fr; }
}

/* ===== CF7 + floating label  ===== */

.op-form .form-field p { 
  position: relative; 
  margin: 0; 
}

/* CF7 inserts <br> */
.op-form .form-field br { 
  display: none; 
}

/* Inputs & textarea inside CF7 wrap */
.op-form .form-field .wpcf7-form-control {
  width: 100%;
  padding: 16px 12px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  color: #111827;
  outline: none;
  transition: border-color 0.2s ease;
}

/* Textarea sizing */
.op-form .form-field textarea.wpcf7-form-control { 
  min-height: 110px; 
  resize: vertical; 
}

/* Absolute label */
.op-form .form-field label { 
  position: absolute;
  top: 50%;            
  left: 12px;
  transform: translateY(-50%);
  background: #fff;    
  padding: 0 5px;
  font-size: 14px;
  color: #6b7280;     
  pointer-events: none;
  transition: all 0.18s ease;
  line-height: 1;
}

/* Focus ring / pink border on focus */
.op-form .form-field .wpcf7-form-control:focus { 
  border-color: #b0005b; 
}

/* ===== Float conditions using :has()  ===== */
/* Float when focused */
.op-form .form-field:has(input:focus) label,
.op-form .form-field:has(textarea:focus) label {
  top: -8px;
  left: 8px;
  font-size: 12px;
  color: #b0005b;
  transform: none; 
}

/* Float when not empty (placeholder-shown === false) */
.op-form .form-field:has(input:not(:placeholder-shown)) label,
.op-form .form-field:has(textarea:not(:placeholder-shown)) label {
  top: -8px;
  left: 8px;
  font-size: 12px;
  color: #b0005b;
  transform: none;
}

/* ===== Radio (Anrede)  ===== */
.op-form .row .wpcf7-form-control.wpcf7-radio.radio-inline .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  margin: 0 14px 0 0;
}
.op-form .row .wpcf7-form-control.wpcf7-radio.radio-inline input[type="radio"] {
  accent-color: #b0005b;
  margin-right: 8px;
}
.op-form .label-inline {
  display: inline-block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #111827;
}

/* ===== Acceptance (privacy) ===== */
.op-form .privacy .wpcf7-form-control.wpcf7-acceptance .wpcf7-list-item label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.op-form .privacy input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #b0005b;
}
.op-form .privacy a { color: #b0005b; text-decoration: underline; }

/* Button (unchanged) */
.op-form .btn-absenden {
  border: none; border-radius: 9999px; padding: 12px 26px;
  background: #b0005b; color: #fff; font-weight: 600; font-size: 15px;
  cursor: pointer; transition: background .25s ease;
}
.op-form .btn-absenden:hover { background: #8b004a; }

/* --- make labels always fixed above the field --- */
.op-form .form-field label {
  position: absolute;
  top: -10px;         
  left: 12px;
  font-size: 12px;
  color: #626262;
  background: #fff;
  padding: 0 5px;
  transform: none;
}

/* disable float logic */
.op-form .form-field:has(input:focus) label,
.op-form .form-field:has(textarea:focus) label,
.op-form .form-field:has(input:not(:placeholder-shown)) label,
.op-form .form-field:has(textarea:not(:placeholder-shown)) label {
  top: -10px;
  left: 12px;
  font-size: 12px;
  color: #b0005b;
  transform: none;
}

/* Homepage */

.blue-box {
	height: 100%;
	transition: 0.3s all ease-in-out;
}

.blue-box .elementor-icon-box-wrapper {
	flex-direction: row-reverse !important;
	padding: 20px;
	background-color: #001489;
	border-radius: 30px;
	height: 100%;
}

.blue-box .elementor-icon-box-wrapper p {
	color: #ffffff;
}

.blue-box p	{
	color: #fff !important;
	font-size: 16px;
	line-height: 20px;
	width: 150px;
	max-width: 100%;
}

.blue-box .elementor-icon-box-title {
	font-weight: 800 !important;
	margin-bottom: 3px !important;
}

.blue-box .elementor-icon-box-icon {
	display: flex !important;
	align-items: flex-end;
}

.blue-box svg {
	width: 35px !important;
	height: 40px !important;
}

.blue-box rect {
	width: 100% !important;
	height: 100% !important;
}

.blue-box .elementor-icon {
	width: 35px;
	height: 35px;
}

.blue-boxes, .blue-box-wrapper {
	padding: 0 !important;
}

.hero-section {
	overflow: hidden;
}

.hero-section a {
	width: 100% !important;
}

.blue-box:hover {
	transform: scale(1.05);
	cursor: pointer;
}

.blue-boxes {
	column-gap: 16px !important;
	margin-top: 40px;
}

.hero-column p {
	margin-bottom: 0 !important;
}

.hero-heading {
	padding: 0 !important;
}

.hero-column {
	padding-inline: 0 !important;
}

.hero-section h1 {
	font-size: 60px;
	line-height: 80px;
}

.hero-section p {
	max-width: 450px;
	width: 100%;
	font-size: 16px;
	line-height: 20px;
}

.hero-section h2 {
	font-weight: 800 !important;
	max-width: 450px;
	width: 100%;
}

.hero-subtitle {
	font-size: 20px;
	line-height: 24px;
}

.primary-button a {
	font-size: 16px;
	line-height: 20px;
	border-radius: 20px;
	box-shadow: 3px 3px 6px #0000000D;
}

.hero-section .primary-button a {
	max-width: 490px;
	width: 100%;
}

.primary-button a:hover {
	background-color: #001489;
}

.hero-subtitle p {
	color: #001489 !important;
	font-size: 20px;
	line-height: 24px;
}

.cta-block .e-con-inner:first-of-type .elementor-element:first-of-type::before {
	width: 95% !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
}

.cta-block {
	max-width: 90% !important;
	margin-top: 70px !important;
}

.main-image-container p {
	margin-bottom: 5px;
	max-width: 450px;
	width: 100%;
}

.main-image-container.container-left {
	padding-right: 0 !important;
	padding-left: 20px !important;
}

.main-image-container .elementor-element {
	padding-inline: 0 !important;
}

.main-image-container .left-block {
	max-width: 570px;
	margin-left: auto !important;
	padding-right: 90px !important;
}

.main-image-container .right-block {
	max-width: 570px;
	margin-right: auto !important;
	padding-left: 90px !important;
}

.main-image-container img {
	height: 480px !important;
	object-fit: cover !important;
	width: 100%;
}

.modern-images img {
	border-radius: 30px !important;
}

.femur {
	width: 181px !important;
	height: 181px !important;
}

.femur img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

.skeleton {
	width: 100%;
}

.skeleton img {
	position: absolute;
    width: 250px;
    object-fit: cover;
	left: 50%;
	transform: translatex(-50%);
	top: -380px;
}

.skeleton:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 350px;
	background: transparent linear-gradient(180deg, #FFFFFF00 0%, #FFFFFF64 11%, #FFFFFF 26%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
	top: -140px;
	left: 0;
	z-index: 1;
}

.modern-images h3, .modern-images p, .modern-images a {
	z-index: 3;
	position: relative;
}

.modern-images h3 {
	font-size: 20px;
	line-height: 24px;
}

.modern-images a {
	padding-inline: 0;
	font-size: 16px;
	line-height: 20px;
}

.modern-images svg {
	width: 20px !important;
	height: 20px !important;
}

.modern-images .elementor-button-content-wrapper {
	column-gap: 10px;
}

.inflammation img {
	object-position: -115px 0 !important;
}

.modern-images a:hover {
	transform: scale(1.05);
}
/** DC fix page style **/
.dc-logged-in .elementor-button br {
    display: none !important;
}
.quellen-acc summary.e-n-accordion-item-title br {
    display: none;
}

.elementor-lightbox .elementor-lightbox-image {    
    background: #fff!important;
    border-radius: 10px!important;
}
.dialog-lightbox-message .elementor-slideshow__title {
    display: none!important;
}

/* Media Queries */

@media(max-width: 1024px) {
	.blue-box-wrapper:first-of-type {
		max-width: 300px !important;
	}
	
	.blue-box-wrapper:nth-of-type(2) {
		max-width: 220px !important;
	}
	
	.main-image-container img {
		height: 350px !important;
	}
	
	.modern-images {
		justify-content: center !important;
	}
		
	.modern-images {
			width: 400px !important;
			max-width: 100%;
		}
	
	.modern-images:first-child {
		width: 100% !important;
		max-width: 100% !important;
	}
}

@media(min-width: 768px) {
.left-nav a {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}
	.hero-icons, .elementor-element-cc125ed {
		position: absolute !important;
		left: -3000% !important;
		height: 0;
	}
	
	.elementor-element-cc125ed {
		display: block !important;
	}
	
.op-col-content {
     display: flex!important;   
     flex-direction: column!important; 
     height: 100%!important;
   }
 .op-col-btn {
     margin-top: auto;
   }
  .op-col-3 > .e-con-full.e-flex.e-con.e-child {
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
   }
	.op-col-3 .elementor-widget-button {
        margin-top: auto; 
    }
	.col-3-wrap{
      display: flex!important;
      flex-wrap: nowrap!important;
      gap: 20px!important;
    }
	
   .op-col-3 {
      max-width: calc(33.333% - 20px) !important;     
      box-sizing: border-box!important;
   }

	#arzneimittel-fachinformationen .download-box, #biosimilar-praxistools .download-box,  #patientinnen-patienten .download-box, #diagnostik-therapieentscheidung .download-box {
	  max-width: calc(33.333% - 20px) !important;     
      box-sizing: border-box!important;
	}
	
	.page-id-517 .download-box > .elementor-element:nth-of-type(2) {
	height: calc(100% - 180px);
}

.page-id-517 .download-box .download-btn {
	margin-top: auto;
}
}

@media(min-width: 575px) {
	.blue-boxes {
		flex-wrap: nowrap !important;
	}
}

@media(max-width: 1300px) {
	.femur {
		left: 20px !important;
	}
}

@media(max-width: 991px) {
	.hero-section h1 {
    font-size: 50px;
    line-height: 60px;
}
	
}
	
	
@media(max-width: 768px) {
  .left-nav .sub-menu li a {    
      font-size: 16px ! Important;
	  padding-left: 15px !important;
  }
		.hero-slider a {
			padding: 11px 18px;
			border: 2px solid #001489;
			color: #001489;
			border-radius: 20px;
			display: block;
			width: max-content;
			line-height: 14px !important;
			font-weight: 500 !important;
		}
		
		body.home .hero-slider a:hover {
			background-color: #001489;
			color: #ffffff;
		}
		
		.hero-slider p {
			width: max-content;
		}
		
		.hero-slider {
			padding-left: 50px !important;
			padding-right: 0 !important;
			overflow: auto !important;
			scrollbar-width: none; /* Firefox */
  			-ms-overflow-style: none; /* IE/Edge */
			column-gap: 5px !important;
		}
		
		.hero-slider .elementor-element {
			width: max-content !important;
			flex-shrink: 0 !important;
		}
		
		.hero-icons  * {
			padding-inline: 0 !important;
		}
		
		.hero-icons {
			padding: 20px 20px 0 20px !important;
		}
		
		.hero-icons svg {
			width: 40px;
			height: 40px;
			padding: 10px;
			background-color: #A50050;
			border-radius: 1000px;
		}
		
		.decorative-dots {
			    border: none;
				background-image: radial-gradient(#626262 1px, transparent 1px);
				background-size: 6px 6px;
				padding: 2px;
				width: calc(90vw - 300px);
				height: 1px;
				display: block;
				top: 20px;
				position: relative;
		}
		
		.blue-box, .blue-box-wrapper {
			width: fit-content !important;
		}
		
		.blue-box svg {
			width: 20px !important;
			height: 20px !important;
		}
		
		.blue-box .elementor-icon {
			width: 20px;
			height: 20px;
		}
	
		.main-image-container, .main-image-container.container-left {
			padding-inline: 0 !important;
		}
		
		.main-image-container.container-left .elementor-element-48683a1 {
			flex-direction: column-reverse !important;
		}
	
		.main-image-container .left-block {
			max-width: 100%;
			padding-inline: 20px !important;
		}
		
		.main-image-container img {
			width: 100%;
		}
		
		.main-image-container .right-block {
			max-width: 100%;
			margin-right: 0 !important;
			padding-inline: 20px !important;
			}
		
		.blue-box p {
			font-size: 16px;
			line-height: 20px;
		}
		
		.main-image-container .elementor-element {
			padding-top: 0!important;
		}
		
			.bell-button a {
				font-weight: 500 !important;
				padding-block: 0 !important;
		}
		
		.hero-section a {
				font-size: 16px !important;
				line-height: 20px !important;
				width: 100% !important;
		}
		
		.bell-button a:hover {
			transform: scale(1.05) !important;
		}
	
	   .ok-small-box.box-left {
          width: 50% ! Important;
       }
       .ok-small-box.box-right {
         max-width: 50%;
		 width: 50% ! Important;
       }
	   /*.hero-section .box-right p {
          font-size: 12px;
          line-height: 16px;
       }*/
	
	   .elementor-widget-container h2 {
         font-size: 24px !important;
         line-height: 30px !important;
       }
	  
	.op-table-in .elementor-widget-container table {
       display: block;       
       width: 100%;         
       overflow-x: auto;    
       -webkit-overflow-scrolling: touch;
   }
		
	.single-post .op-col-content h3, .op-col-3 h3 {
		min-height: unset !important;
	}
}	
	
@media(max-width: 575px) {
	
	h1 {
		font-size: 30px !important;
		line-height: 120% !important;
	}
	
	h2 {
		font-size: 28px;
		line-height: 34px;
	}
	
	.hero-section {
		padding-block: 60px !important;
	}
	
	.hero-section h1 {
    font-size: 40px !important;
    line-height: 50px !important;
}
	.blue-box p {
		width: 100px;
	}
	
	.blue-box .elementor-icon-box-description {
		font-size: 12px;
		line-height: 16px;
	}
	
	.main-image-container img {
		height: 290px !important;
	}
	
	.main-image-container .elementor-element {
	padding-top: 0 !important;
}
	
	.decorative-dots {
		width: 60px;
	}
	
	.skeleton:before {
		top: -110px;
	}
	
	.cta-block {
		margin-top: 0 !important;
	}
	
	.hero-section {
		background-image: unset !important;
		background: linear-gradient(180deg, #FBFBFB 0%, #E1E6E8 100%) !important;
	}
	
	.blue-box-wrapper:first-of-type {
		width: 60% !important;
		
	}
	
	.blue-box {
		width: 100% !important;
	}
	
	.blue-box-wrapper:nth-of-type(2) {
		width: calc(40% - 10px) !important;
	}
	
	.blue-boxes {
		column-gap: 10px !important;
	}
	
	.blue-box-wrapper:nth-of-type(2) .elementor-icon {
		position: absolute;
		bottom: 20px;
		right: 10px;
	}
	
	.blue-box p {
		width: auto !important;
	}
	
	.blue-box-wrapper:first-of-type p {
		width: 100px !important;
	}
	
	.hero-subtitle p {
		font-size: 20px;
		line-height: 24px;
	}
	
	.dc-login-wrapper #dc-login-iframe {
       width: 100% !important;
       height: 100% !important;
       min-height: 220px;        
       min-width: 380px;
}
	
}

@media(max-width: 400px) {
	.hero-section .box-right p,
	.hero-section .box-left p{
          font-size: 12px;
          line-height: 16px;
       }
	
	.decorative-dots {
		display: none;
	}
	
	.blue-box-wrapper:first-of-type, .blue-box-wrapper:nth-of-type(2) {
		max-width: 100% !important;
	}
	
}

@media(max-width: 380px) {
	
		.blue-box, .blue-box-wrapper {
			width: 100% !important;
		}
	
	.blue-box-wrapper, .blue-box-wrapper:nth-of-type(2), .blue-box-wrapper:first-of-type {
		width: 100% !important;
	}
	
	.blue-box-wrapper:nth-of-type(2) .elementor-icon {
		position: relative;
		bottom: unset;
		right: unset;
	}
	.dc-login-wrapper #dc-login-iframe {  
    margin-left: -20px ! Important;
  }
  
}

@media(max-width: 320px) {
.dc-login-wrapper #dc-login-iframe {  
    margin-left: -20px ! Important;
}
.dc-login-wrapper #dc-login-iframe {     
   min-width: 340px;
}	
	
}

/* Media Queries */