/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://example.com/hello-elementor-child
 Description:  Ein Child-Theme für Hello Elementor
 Author:       Dein Name
 Author URI:   https://example.com
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hello-elementor-child
*/

/* Hier kannst du deine eigenen CSS-Styles hinzufügen */


* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	--spacing-large: 2.618rem;
	--spacing-medium: 1.618rem;
	--spacing-small: 1rem;
	--primary-gradient: linear-gradient(
        135deg, 
        hsl(from var(--e-global-color-f2ccfd0) h s l) 35%, 
        hsl(from var(--e-global-color-dcf0e53) h s calc(l + 25)),
        hsl(from var(--e-global-color-f2ccfd0) h s l)
    );
}

/* Page View Transition
***********************************************************/
@view-transition {
	navigation: auto;
}

::view-transition-group(*) {
	animation-duration: .5s;
}

::view-transition-new(root) {
	animation-name: fade-in;
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
}

/* Custom Scrollbar
***********************************************************/
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #D9D9D9;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #145B7D;
    border-radius: 10px;
    border: 3px solid #D9D9D9;
}

::-webkit-scrollbar-thumb:hover {
    background: #8FA99B;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #8FA99B #D9D9D9;
}

.scrollable {
    -ms-overflow-style: scrollbar;
}

/* Main
***********************************************************/
main {
	min-block-size: calc(100svh - var(--hdr-block-size, 0px) - var(--ftr-block-size, 0px));
}

/* Form
***********************************************************/
input {
	accent-color: var(--e-global-color-f2ccfd0);
}

/* Typographie
***********************************************************/
h1.elementor-heading-title,
.h1 .elementor-heading-title,
h1, .h1,

h2.elementor-heading-title,
.h2 .elementor-heading-title,
h2, .h2,

h3.elementor-heading-title,
.h3 .elementor-heading-title,
h3, .h3,

h4.elementor-heading-title,
.h4 .elementor-heading-title,
h4, .h4,

h5.elementor-heading-title,
.h5 .elementor-heading-title,
h5, .h5,

h6.elementor-heading-title, 
.h6 .elementor-heading-title,
h6, .h6 {
	text-wrap: balance;
	margin-block-start: var(--spacing-medium);
	margin-block-end: var(--spacing-small);
	font-variant-ligatures: none;
	-webkit-font-variant-ligatures: none;
	font-feature-settings: "liga" 0, "clig" 0;
}

h1:first-child.elementor-heading-title,
.h1 .elementor-heading-title:first-child,
h1:first-child, .h1:first-child,

h2:first-child.elementor-heading-title,
.h2 .elementor-heading-title:first-child,
h2:first-child, .h2:first-child,

h3:first-child.elementor-heading-title,
.h3 .elementor-heading-title:first-child,
h3:first-child, .h3:first-child,

h4:first-child.elementor-heading-title,
.h4 .elementor-heading-title:first-child,
h4:first-child, .h4:first-child,

h5:first-child.elementor-heading-title,
.h5 .elementor-heading-title:first-child,
h5:first-child, .h5:first-child,

h6:first-child.elementor-heading-title, 
.h6 .elementor-heading-title:first-child,
h6:first-child, .h6:first-child {
	margin-block-start: 0;
}

h1.elementor-heading-title ,
.h1 .elementor-heading-title,
h1, .h1 {
	margin-block-start: var(--spacing-large);
	margin-block-end: var(--spacing-medium);
}

h2.elementor-heading-title ,
.h2 .elementor-heading-title,
h2, .h2 {
	margin-block-start: var(--spacing-large);
	margin-block-end: var(--spacing-medium);
}

h3.elementor-heading-title ,
.h3 .elementor-heading-title,
h3, .h3 {
	margin-block-start: var(--spacing-medium);
	margin-block-end: var(--spacing-small);
}

h4.elementor-heading-title ,
.h4 .elementor-heading-title,
h4, .h4 {
	margin-block-start: var(--spacing-medium);
	margin-block-end: var(--spacing-small);
}

h5.elementor-heading-title ,
.h5 .elementor-heading-title,
h5, .h5 {
	margin-block-start: var(--spacing-small);
	margin-block-end: var(--spacing-small);
}

h6.elementor-heading-title , 
.h6 .elementor-heading-title,
h6, .h6 {
	margin-block-start: var(--spacing-small);
	margin-block-end: var(--spacing-small);
}

p {
	margin-block-end: var(--spacing-small);
}

/* Link */
a[class] {
  text-decoration: none !important;
}
/*
a[target="_blank"]:not(:has(> img))::after,
a[target="_new"]:not(:has(> img))::after {
	content: '\f35d';
	position: relative;
	top: -1px;
	font-family: "Font Awesome 5 Free";
    font-weight: 900;
	font-size: 75%;
	margin-inline-start: 1ch;
}
*/
main {
	a.elementor-button {
		margin-block-start: var(--spacing-small);
	}
}

/* Unordered List */
ul {

	&:not([class]) {
		--primary-color: var(--e-global-color-f2ccfd0);
		list-style: none;
		--checklist-size: 1em;
		margin-block-end: var(--spacing-small);
		
		li {
			position: relative;
			margin-inline-start: calc(1.5 * var(--checklist-size)) !important;
			
			&::before {
				content: '';
				position: absolute;
				top: 3px;
				background: var(--primary-color);
				aspect-ratio: 1;
				width: var(--checklist-size);
				mask-repeat: no-repeat;
				mask-position: center center;
				margin-inline-start: calc(-1.5 * var(--checklist-size));
				mask-size: 6px;
				mask-image: url('/wp-content/themes/hello-elementor-child/assets/icons/list-icon.svg');
			}
		}
	}
}

/* Ordered List */
ol {
	&.elementor-toc__list-wrapper {
		li .elementor-toc__list-item-text-wrapper::before {
			display: none;
		}
	}
	
	&:not([class]) {
		--primary-color: var(--e-global-color-f2ccfd0);
		--checklist-size: 1em;
		list-style: none;
		counter-reset: list-item;
		margin-block-end: var(--spacing-small);

		li {
			counter-increment: list-item;
			position: relative;
			margin-inline-start: calc(1.5 * var(--checklist-size));

			&::before {
				content: counters(list-item, ".") ". ";
				position: absolute;
				color: var(--primary-color);
				margin-inline-start: calc(-1.5 * var(--checklist-size));
			}

			ol {
				counter-reset: list-item;
			}
		}
	}
}

/* Text selection */
::selection {
	color: #fff;
	background-color: #8FA99B;
}

/* Custom Headline Styling 
****************************************************/
.no-top-margin {
	margin-top: 0px !important;
}

/* Formulare 
****************************************************/
/* Grundlegendes Design für alle Druck-Formulare */
.custom-form-wrapper { 
	font-family: Roboto, Arial, Helvetica, sans-serif !important;
	line-height: 1.5; 
	color: #333; 
	max-width: 900px; 
	margin: 0 auto; 
	padding: 20px; 
	background: #fff; 
	border-radius: 8px; 
	box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
}

.custom-form-wrapper h1, 
.custom-form-wrapper h2 { 
	font-size: 32px;
	color: var(--e-global-color-f4bd169); 
	text-align: center; 
	margin-bottom: 5px; 
	margin-top: 0px;
}

.custom-form-wrapper h3 {
	color: var(--e-global-color-f4bd169) !important;
    font-size: var(--e-global-typography-f95f889-font-size);
    font-weight: var(--e-global-typography-f95f889-font-weight);
    line-height: var(--e-global-typography-f95f889-line-height);
    letter-spacing: var(--e-global-typography-f95f889-letter-spacing);
    word-spacing: var(--e-global-typography-f95f889-word-spacing);
    text-wrap: balance;
    font-family: Roboto, Arial, Helvetica, sans-serif;
}

.custom-form-wrapper p.subtitle { 
	font-size: 14px; 
	color: #666; 
	text-align: center; 
	margin-bottom: 30px; 
}

.custom-form-wrapper fieldset { 
	border: 1px solid #e0e0e0; 
	border-radius: 8px; 
	padding: 20px; 
	margin-bottom: 20px; 
	background: #fdfdfd; 
}

.custom-form-wrapper legend { 
	font-weight: bold; 
	color: var(--e-global-color-0e4569a); 
	font-size: 18px; 
	padding: 0 10px; 
	background: var(--e-global-color-primary); 
	border: 1px solid #e0e0e0; 
	border-radius: 4px; 
}

.form-group { 
	margin-bottom: 15px; 
}

.custom-form-wrapper label { 
	display: block; 
	margin-bottom: 5px; 
	font-weight: bold; 
	font-size: 14px; 
}

.custom-form-wrapper input[type="text"], 
.custom-form-wrapper input[type="date"], 
.custom-form-wrapper input[type="email"], 
.custom-form-wrapper input[type="tel"], 
.custom-form-wrapper textarea { 
	width: 100%; 
	padding: 10px; 
	border: 1px solid #ccc; 
	border-radius: 4px; 
	box-sizing: border-box; 
	font-family: inherit; 
}

.custom-form-wrapper textarea { 
	resize: vertical; 
	min-height: 60px; 
}

/* Layouts für Checkboxen und Radios */
.radio-group, .checkbox-group { 
	display: flex; 
	gap: 15px; 
	align-items: center; 
	flex-wrap: wrap; 
	margin-top: 5px; 
}

.radio-group label, 
.checkbox-group label { 
	font-weight: normal; 
	display: flex; 
	align-items: center; 
	gap: 5px; 
	cursor: pointer; 
}

.checkbox-grid { 
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
	gap: 10px; 
	margin-top: 10px; 
}

.checkbox-grid label { 
	font-weight: normal; 
	display: flex; 
	align-items: center; 
	gap: 8px; 
	font-size: 14px; 
}

.section-title { 
	font-weight: bold; 
	color: var(--e-global-color-primary); 
	margin-top: 20px; 
	margin-bottom: 10px; 
	border-bottom: 2px solid #eaeaea; 
	padding-bottom: 5px; 
	font-size: 16px; 
}

/* Spalten-Layout */
.flex-row { 
	display: flex; 
	gap: 15px; 
	flex-wrap: wrap; 
}

.flex-row > div { 
	flex: 1; 
	min-width: 200px; 
}

/* Buttons */
.action-buttons { 
	text-align: center; 
	margin-top: 30px; 
	border-top: 1px solid #eaeaea; 
	padding-top: 20px; 
}

.button-group { 
	display: flex; 
	gap: 15px; 
	justify-content: center; 
	flex-wrap: wrap; 
	margin-top: 15px; 
}

.action-btn { 
	padding: 15px 25px; 
	border: none; 
	border-radius: 6px; 
	cursor: pointer; 
	font-size: 16px; 
	font-weight: bold; 
	transition: background 0.3s; 
	text-decoration: none; 
	color: white; 
	flex: 1; 
	min-width: 250px; 
	max-width: 350px; 
	display: inline-block; 
	box-sizing: border-box; 
}

.btn-print { 
	background-color: var(--e-global-color-primary); 
	border: 1px solid var(--e-global-color-primary); 
	border-radius: 8px !important; 
}

.btn-print:hover { 
	background-color: #54595F00; 
	color: var(--e-global-color-primary); 
	border-color: var(--e-global-color-primary); 
}

.btn-mail { 
	background-color: var(--e-global-color-primary); 
	border: 1px solid var(--e-global-color-primary); 
	border-radius: 8px !important; 
}

.btn-mail:hover { 
	background-color: #54595F00; 
	color: var(--e-global-color-primary); 
	border-color: var(--e-global-color-primary); 
}

.praxis-footer { 
	display: none; 
}

/* Signatur */
.signature-hantke {
	background-image: url(/wp-content/uploads/susanne-hantke-unterschrift.webp);
    background-size: contain; /* Das ist das Äquivalent zu object-fit: contain; */
    background-repeat: no-repeat; /* Wichtig, damit die Unterschrift nicht gekachelt wird */
    background-position: center left; /* Optional: Positioniert die Unterschrift mittig-links */
    width: auto;
    height: 100%;
    min-height: 40px;
}

/* Spezielle Regeln für die PDF-Generierung / den Ausdruck */
@media print {
	body { 
		background: #fff; 
	}

	body * { 
		visibility: hidden; 
	}

	.custom-form-wrapper, .custom-form-wrapper * { 
		visibility: visible; 
	}

	.custom-form-wrapper { 
		position: absolute; 
		left: 0; 
		top: 0; 
		max-width: 100%; 
		padding: 0; 
		box-shadow: none; 
	}

	.action-buttons { 
		display: none; 
	}
  
	/* Optik für Papier/PDF optimieren */
	.custom-form-wrapper fieldset { 
		border: none; 
		padding: 0; 
		margin-bottom: 15px; 
		page-break-inside: avoid; 
	}

	.custom-form-wrapper legend { 
		border: none; 
		padding: 0; 
		font-size: 16px; 
		border-bottom: 2px solid #000; 
		width: 100%; 
		border-radius: 0; 
		margin-bottom: 10px; 
	}

	.custom-form-wrapper input[type="text"], 
	.custom-form-wrapper input[type="date"], 
	.custom-form-wrapper input[type="email"], 
	.custom-form-wrapper input[type="tel"], 
	.custom-form-wrapper textarea { 
		border: none; 
		border-bottom: 1px dotted #000; 
		border-radius: 0; 
		padding: 2px 0; 
		background: transparent; 
	}

	.checkbox-grid { 
		grid-template-columns: 1fr 1fr; 
	}

	/* Praxis-Footer nur im Ausdruck zeigen */
	.praxis-footer { 
		display: block; 
		margin-top: 40px; 
		font-size: 10px; 
		color: #555; 
		text-align: center; 
		border-top: 1px solid #ccc; 
		padding-top: 10px; 
		page-break-inside: avoid; 
	}
}

/* Footer Form auf Kontaktseite ausblenden */
.page-id-40 .elementor-element-d2677df {
	display: none !important;
}










/* Borlabs Cookie Banner
***********************************************************/

/* Popup */
#BorlabsCookieBox {
    --dialog-animation-delay: 2s;
    --dialog-animation-duration: 1s;

    --dialog-backdrop-background-color: var(--e-global-color-5bed60f);
    --dialog-backdrop-background-opacity: 0.8;

    --dialog-background-color: #fff;
    --dialog-footer-background-color: var(--e-global-color-4509d7f);

    --dialog-text-color: var(--e-global-color-5bed60f);
    --dialog-footer-text-color: var(--e-global-color-5bed60f);

    --dialog-button-accept-all-color: var(--e-global-color-primary);
    --dialog-button-accept-all-color-hover: var(--e-global-color-primary);

    --dialog-button-accept-only-essential-color: var(--e-global-color-primary);
    --dialog-button-accept-only-essential-color-hover: var(--e-global-color-primary);

    --dialog-button-preferences-color: var(--e-global-color-primary);
    --dialog-button-preferences-color-hover: var(--e-global-color-primary);

    --dialog-button-save-consent-color: var(--e-global-color-primary);
    --dialog-button-save-consent-color-hover: var(--e-global-color-primary);

    --dialog-button-close-color: var(--e-global-color-b58c841);
    --dialog-button-close-color-hover: var(--e-global-color-primary);

    --dialog-button-selection-color: var(--e-global-color-primary);
    --dialog-button-selection-color-hover: var(--e-global-color-primary);

    --dialog-button-accept-all-text-color: #fff;
    --dialog-button-accept-only-essential-text-color: #fff;
    --dialog-button-preferences-text-color: #fff;
    --dialog-button-save-consent-text-color: #fff;
    --dialog-button-close-text-color: #fff;
    --dialog-button-selection-text-color: #fff;
	
    --dialog-button-border-radius-bottom-left: 0.5rem;
    --dialog-button-border-radius-bottom-right: 0.5rem;
    --dialog-button-border-radius-top-left: 0.5rem;
    --dialog-button-border-radius-top-right: 0.5rem;

    --dialog-link-primary-color: var(--e-global-color-primary);
    --dialog-link-primary-color-hover: var(--e-global-color-primary);
    --dialog-link-secondary-color: var(--e-global-color-primary);
    --dialog-link-secondary-color-hover: var(--e-global-color-5bed60f);
	
	--dialog-list-item-control-element-color: var(--e-global-color-primary);
    --dialog-list-item-control-element-color-hover: var(--e-global-color-primary);

    --dialog-card-background-color: #fff;
    --dialog-card-text-color: var(--e-global-color-5bed60f);
    --dialog-card-separator-color: var(--e-global-color-4509d7f);

    --dialog-list-item-background-color-even: #fff;
    --dialog-list-item-background-color-odd: #fff;
    --dialog-list-item-text-color-even: var(--e-global-color-5bed60f);
    --dialog-list-item-text-color-odd: var(--e-global-color-5bed60f);
    --dialog-list-item-separator-color: var(--e-global-color-4509d7f);

    --dialog-control-element-color: var(--e-global-color-primary);
    --dialog-control-element-color-hover: var(--e-global-color-primary);

    --dialog-card-control-element-color: var(--e-global-color-primary);
    --dialog-card-control-element-color-hover: var(--e-global-color-primary);

    --dialog-checkbox-background-color-active: var(--e-global-color-primary);
    --dialog-checkbox-border-color-active: var(--e-global-color-primary);
    --dialog-checkbox-check-mark-color-active: #fff;

    --dialog-switch-button-background-color-active: var(--e-global-color-primary);
    --dialog-switch-button-background-color-inactive: var(--e-global-color-4509d7f);
    --dialog-switch-button-color-active: #fff;
    --dialog-switch-button-color-inactive: var(--e-global-color-5bed60f);
	
	--dialog-checkbox-border-color-inactive: var(--e-global-color-primary);

    --dialog-tab-bar-tab-background-color-active: var(--e-global-color-primary);
    --dialog-tab-bar-tab-background-color-inactive: #fff;
    --dialog-tab-bar-tab-text-color-active: #fff;
    --dialog-tab-bar-tab-text-color-inactive: var(--e-global-color-5bed60f);

    --dialog-tab-bar-tab-border-color-bottom-active: var(--e-global-color-primary);
    --dialog-tab-bar-tab-border-color-bottom-inactive: var(--e-global-color-4509d7f);

    --dialog-separator-color: var(--e-global-color-4509d7f);
    --dialog-font-family: inherit;
    --dialog-font-size: 14px;
}

/* Content Blocker Notice */
.brlbs-cmpnt-content-blocker {
    --content-blocker-background-color: var(--e-global-color-4509d7f);
    --content-blocker-background: var(--e-global-color-4509d7f);

    --content-blocker-button-color: var(--e-global-color-primary);
    --content-blocker-button-color-hover: var(--e-global-color-primary);
    --content-blocker-button-text-color: #fff;
    --content-blocker-button-text-color-hover: #fff;

    --content-blocker-link-color: var(--e-global-color-primary);
    --content-blocker-link-color-hover: var(--e-global-color-primary);

    --content-blocker-separator-color: var(--e-global-color-b58c841);
    --content-blocker-text-color: var(--e-global-color-5bed60f);

    --content-blocker-font-family: inherit;
    --content-blocker-font-size: 14px;

    --content-blocker-border-radius-top-left: 16px;
    --content-blocker-border-radius-top-right: 16px;
    --content-blocker-border-radius-bottom-left: 16px;
    --content-blocker-border-radius-bottom-right: 16px;

    --content-blocker-button-border-radius-top-left: 9999px;
    --content-blocker-button-border-radius-top-right: 9999px;
    --content-blocker-button-border-radius-bottom-left: 9999px;
    --content-blocker-button-border-radius-bottom-right: 9999px;

    --content-blocker-separator-width: 1px;
}

/* Floating Widget */
#BorlabsCookieWidget {
	--widget-position: bottom-left;
	--widget-color: var(--e-global-color-primary);
}






@media (min-width: 1025px) and (max-width: 1140px) {
    .elementor-nav-menu--dropdown-tablet .elementor-menu-toggle, .elementor-nav-menu--dropdown-tablet .elementor-nav-menu--dropdown {
        display: flex !important;
    }
}