/* ================================
   Design Tokens
================================ */
:root {
	--color-brown-dark: #51423a;
	--color-brown-light: #a99088;
	--color-beige: #e2d2c1;
	--color-rose: #e2bab7;
	--color-mauve-light: #af67a1;
	--color-mauve-dark: #904d86;
	--color-sand: #debb85;
	/* Layout */
	--header-offset-desktop: 150px;
	/* für :target */
	--header-offset-mobile: 70px;
	/* für :target (<=959px) */
}
/* ================================
   Global Behavior
================================ */
html {
	scroll-behavior: smooth;
}
:target {
	scroll-margin-top: var(--header-offset-desktop);
}
#main {
	min-height: calc(100vh - 655px);
}
details:hover {
	cursor: pointer;
}
/* remove default triangle; place custom icon at the end */
summary.detailed-treatments {
	display: block;
}
summary.detailed-treatments::after {
	margin-left: 1ch;
	display: inline-block;
	content: '🔍';
	transition: 0.2s;
}
/* Utility note:
   Die Klasse .hidden erzwingt Sichtbarkeit – das widerspricht dem
   sonst üblichen Semantik-Namen "hidden". Beibehalten für Kompatibilität. */
.hidden {
	display: block !important;
	visibility: visible !important;
}
em {
	font-size: 1em;
}
@media print {
	#cookie-law-info-bar {
		display: none !important;
	}
}
/* ================================
   Header / Sticky / Topbar
================================ */
.fixed-header-box {
	position: sticky!important;
	top: 0;
	z-index: 1000;
	background: #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
}
/* Hintergrundfarbe für diverse Header-Zustände */
body.sticky-header-type-over.sticky-header .sticky-header-state-reset .header-content-wrapper,
body.sticky-header-type-over.sticky-header .sticky-header-state-stuck header.main-header,
body.sticky-header-type-half-over.sticky-header .sticky-header-state-stuck header.main-header,
body:not(.sticky-header-type-half-over):not(.sticky-header) header.main-header,
body.sticky-header-type-half-over header.main-header .first-row,
.header-content-wrapper {
	background-color: var(--color-beige)!important;
}
div.meta-header-inside {
	padding: 0 !important;
}
header.page-header.layout-centered {
	padding: 30px 0 10px;
}
/* ================================
   Buttons / Links / Forms
================================ */
#online-terminbuchung.vamtam-button.accent1.button-style-3 {
	background: var(--color-rose);
	color: var(--color-brown-dark);
}
#online-terminbuchung.vamtam-button.button-style-3 span.icon:last-child,
#online-terminbuchung.vamtam-button.button-style-3:hover span.icon:last-child {
	border-color: var(--color-beige);
	background-color: var(--color-brown-dark);
}
body.sticky-header-type-over.sticky-header .sticky-header-state-reset header.main-header #header-text .icon {
	color: var(--color-sand) !important;
}
.button_kontaktformular {
	background: #000;
	color: #fff;
}
input.nf-field-4.ninja-forms-field.nf-element {
	background: #000;
}
div.nf-form-content label {
	font-size: 15px;
}
a.blacklink {
	color: var(--color-brown-dark);
	text-decoration: underline;
}
/* ================================
   Tabellen Farb-Header
================================ */
table.header-brown-dark {
	background-color: var(--color-brown-dark);
}
table.header-brown-light {
	background-color: var(--color-brown-light);
}
table.header-beige {
	background-color: var(--color-beige);
}
table.header-rose {
	background-color: var(--color-rose);
}
table.header-mauve-light {
	background-color: var(--color-mauve-light);
}
table.header-mauve-dark {
	background-color: var(--color-mauve-dark);
}
/* Optional, falls abgerundete Header gewünscht:
table[class*="header-"] { border-radius: 8px; }
*/
/* ================================
   "Zeiten & Termine" Abschnitt
================================ */
#zeiten-und-termine .row {
	margin-bottom: 1em;
}
#zeiten-und-termine #online-terminbuchung {
	margin: 0;
}
#zeiten-und-termine .vamtam-button.accent1.button-filled {
	background: var(--color-beige);
	transition: all .3s ease;
}
#zeiten-und-termine .vamtam-button.accent1.button-filled:hover {
	background-color: color-mix(in srgb, var(--color-beige) 66%, white);
}
#zeiten-und-termine a {
	color: var(--color-brown-dark);
	text-decoration: underline;
}
/* ================================
   Kreise (vereinheitlicht)
================================ */
/* Zentrieren für alle Kreis-Varianten */
div.kreiss,
div.kreis,
div.kreis2,
div.kreis3,
div.kreis4,
div.kreis5,
div.kreis6,
div.kreis7,
div.kreis8 {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 50%;
	
}
/* Größe 225px: kreis, kreis2, kreis3, kreis4 */
div.kreis,
div.kreis2,
div.kreis3,
div.kreis4 {
	width: 225px;
	height: 225px;
}
/* Größe 150px: kreis5..kreis8 */
div.kreis5,
div.kreis6,
div.kreis7,
div.kreis8 {
	width: 150px;
	height: 150px;
}
/* Farbausprägungen */
div.kreis,
div.kreis5 {
	background-color: var(--color-beige);
}
div.kreis2,
div.kreis6 {
	background-color: #c685a0;
}
/* eigener Ton */
div.kreis3,
div.kreis7 {
	background-color: var(--color-brown-light);
}
div.kreis4,
div.kreis8 {
	background-color: var(--color-rose);
}
/* ================================
   Tabellen / Sonstiges
================================ */
table.sondertermin {
	background-color: var(--color-rose);
}
/* ================================
   QuadMenu Anpassungen
================================ */
/* ≥ 1146px: QuadMenu-Background transparent & keine Hover-Hintergründe */
@media screen and (min-width: 1146px) {
	#quadmenu.quadmenu-custom_theme_1 {
		background-color: transparent;
	}
	#quadmenu.quadmenu-custom_theme_1 .quadmenu-navbar-nav > li:not(.quadmenu-item-type-button).quadmenu-has-link:hover,
	#quadmenu.quadmenu-custom_theme_1 .quadmenu-navbar-nav > li:not(.quadmenu-item-type-button).quadmenu-has-link.open {
		background-color: transparent;
	}
}
/* ≤ 1145px: Header-Layout & Abstände */
@media screen and (max-width: 1145px) {
	header.main-header.layout-logo-menu .header-contents {
		display: flex!important;
		align-items: center;
		justify-content: space-between;
	}
	header.main-header.layout-logo-menu .header-contents .first-row {
		order: 1;
		flex-basis: 185px;
	}
	header.main-header.layout-logo-menu .header-contents .second-row {
		order: 3;
		flex-basis: 62px;
	}
	header.main-header.layout-logo-menu .header-contents .second-row #menus {
		justify-content: flex-end;
	}
	header.main-header.layout-logo-menu .header-contents #header-text {
		order: 2;
		flex-basis: auto;
	}
	/* Offcanvas: zusätzlicher Abstand oben für die Liste */
	#quadmenu .quadmenu-navbar-nav {
		margin-top: 50px;
	}
}
/* ≤ 959px: responsive theme-spezifische Korrekturen + :target Offset */
@media screen and (max-width: 959px) {
	.responsive-layout header.main-header.layout-logo-menu .header-contents {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.responsive-layout header.main-header .second-row {
		height: unset!important;
		min-height: unset!important;
	}
	.responsive-layout #menus {
		float: unset;
		display: unset;
		background: unset;
		padding: unset !important;
		width: unset;
		min-height: unset;
		position: unset;
	}
	:target {
		scroll-margin-top: var(--header-offset-mobile);
	}
}

:root {
	--site-max: 1240px;
	--gutter: 0px;
}
/* Der Flex-Container soll den Inhalt zentrieren */
.page-wrapper {
	display: flex;
	/* falls nicht schon so */
	justify-content: center;
	flex-wrap: wrap;
	/* erlaubt Umbruch bei kleineren Screens */
}
/* Artikel nicht unendlich wachsen lassen, Breite deckeln & zentrieren */
.page-wrapper > article {
	flex: 0 1 var(--site-max);
	/* grow 0, shrink 1, Basis = Box-Breite */
	max-width: var(--site-max);
	width: 100%;
	min-width: 0;
	/* verhindert Overflow bei Flex */
	margin-inline: auto;
	padding-inline: var(--gutter);
	box-sizing: border-box;
}

#regelungen {
	margin: 0;
	background: var(--color-rose);
	background: var(--color-beige);
	color: var(--color-brown-dark);
}
#regelungen.vamtam-button.button-style-3 span.icon:last-child,
#regelungen.vamtam-button.button-style-3:hover span.icon:last-child {
	border-color: var(--color-beige);
	background-color: var(--color-brown-dark);
}
#post-12882 em{
	font-size: 15px;
}