:root {
	--blue: #144069;
	--grey: #5d5d5d;
	--darkgrey: #1f272f;
	--accent: #636D5C;
	--white: #ffffff;
	
	--h1: clamp(40px, 2.78vw + 31.67px, 55px);
	--h2: clamp(30px, 1.48vw + 25.56px, 38px);
	--h3: clamp(22px, 1.48vw + 17.56px, 30px);
	--p: 16px;

  	--fixed-size: 1200px;
  	--fixed-size--small: calc(var(--fixed-size) * 0.7);

  	--radius: 30px;
  	--gap: 50px;

  	--box-shadow: 0 0px 13.6px 0 rgba(0, 0, 0, 0.10);
  	--box-shadow--top: 0 -4px 6.8px 0 rgba(0, 0, 0, 0.10);
  	--box-shadow--bottom: 0 4px 6.8px 0 rgba(0, 0, 0, 0.10);
}

/* ======================
TYPOGRAPHY
====================== */

body {
  	font-family: "helvetica-neue-lt-pro", Arial, sans-serif;
	color: var(--darkgrey);
	font-size: var(--p);
	font-weight: 400;
}

h1 {
  	color: var(--blue);
  	font-size: var(--h1);
  	font-style: normal;
  	font-weight: 300;
  	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.1;
}

h2 {
	color: var(--blue);
  	font-size: var(--h2);
  	font-style: normal;
  	font-weight: 300;
	line-height: 1;
	letter-spacing: 0.38px;
}

h3 {
  	color: var(--accent);
  	font-size: var(--h3);
  	font-style: normal;
  	font-weight: 200;
	line-height: 1.2;
	letter-spacing: 0.3;
}

.text-white {
	color: var(--white);
}

.text-blue {
	color: var(--blue);
}

.text-grey {
	color: var(--grey);
}

a {
	text-decoration: none;
	color: inherit;
}

a:hover, .footer-links li a:hover, header .nav-phone:hover {
	text-decoration: underline;
}

/* ======================
TYPOGRAPHY END
====================== */

/* ======================
UTILITY
====================== */

.wp-block-post-content {
  	margin-top: 0px;
}

.fixed-size {
	padding: 3em 15px;
  	max-width: var(--fixed-size);
  	margin-inline: auto;
}

.fixed-size--small {
	padding: 3em 15px;
  	max-width: var(--fixed-size--small);
  	margin-inline: auto;
}

.has-shadow {
  	box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.3);
}

/* ======================
UTILITY END
====================== */

/* ======================
BUTTON
====================== */

.button--blue .wp-block-button__link.wp-element-button {
  	background-color: var(--blue);
}

.button--accent .wp-block-button__link.wp-element-button {
	background-color: var(--accent);
}

.button--has-arrow .wp-block-button__link::after {
  	content: "\f054";
  	font-family: "Font Awesome 5 Free";
  	font-size: .75em;
  	font-weight: 900;
  	line-height: 1;
  	margin-left: 8px;
  	-moz-osx-font-smoothing: grayscale;
  	-webkit-font-smoothing: antialiased;
  	display: inline-block;
  	font-style: normal;
  	font-variant: normal;
  	text-rendering: auto;
}

/* ======================
BUTTON END
====================== */

/* ======================
ACCORDIONS
====================== */

.wp-block-getwid-accordion {
  	width: 100%;
  	display: flex;
  	flex-direction: column;
	gap: 10px;
}

.wp-block-getwid-accordion .wp-block-getwid-accordion__header-wrapper:first-child,
.wp-block-getwid-accordion .wp-block-getwid-accordion__header-wrapper{
	border: 2px solid var(--blue);
	border-radius: var(--radius);
}

.wp-block-getwid-accordion .wp-block-getwid-accordion__header {
	margin: 0;
	padding: 15px 25px;
	width: 95%;
}

.wp-block-getwid-accordion__header-title {
	color: var(--darkgrey);
}

.wp-block-getwid-accordion__content {
  	padding: 1.5em;
	border: none;
}

.wp-block-getwid-accordion__icon i {
  	color: var(--blue);
}

/* ======================
ACCORDIONS END
====================== */

/* ======================
NAVIGATION
====================== */
.header-zeile {
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.3);
	z-index: 2;
}

.wp-block-navigation ul {
  	display: flex;
  	flex-direction: row;
  	justify-content: space-evenly;
}

header .social__phone {
  	list-style: none;
}

header .nav-phone {
  	color: var(--blue);
  	text-decoration: none;
  	display: inline-flex;
  	align-items: center;
  	gap: 6px;
}

header .nav-phone svg {
  	width: 21px;
  	height: 21px;
  	display: block;
  	color: var(--blue);
  	flex-shrink: 0;
  	position: relative;
  	top: 1px;
}

.wp-block-navigation-item__label {
	color: var(--blue);
	font-weight: 500;
}

.wp-block-navigation-item__label:hover {
	color: var(--grey);
}

.current-menu-item .wp-block-navigation-item__label {
	color: var(--grey);
	font-weight: 400;
}

/* ======================
NAVIGATION END
====================== */

/* Headerbild */
.header-image {
	min-height: clamp(200px, 24.691vw + 125.926px, 600px);
}

/* Under Header + Icons */
.under-header {
	margin-top: 0;
}

.icons-under-header a+a {
  	margin-left: 15px;
}

.icons-under-header {
  	position: absolute;
  	top: -50px;
}

/* Icons Heading Kontaktseite */
.icon-heading {
  	position: relative;
  	padding-left: 50px;
}

.icon-heading::before {
  	content: "";
  	position: absolute;
  	left: 0px;
  	width: 40px;
  	height: 40px;
  	background-repeat: no-repeat;
  	background-position: center;
  	background-size: 40px 40px;
}

.icon-heading--phone::before {
  	background-image: url("/wp-content/uploads/2026/08/telefon_icon.svg");
}

.icon-heading--clock::before {
  	background-image: url("/wp-content/uploads/2026/08/uhr_icon.svg");
}

.icon-heading--pin::before {
  	background-image: url("/wp-content/uploads/2026/08/map_icon.svg");
}

/* Einstiegspunkte */
.einstiegspunkte, .aerzte, .leistungen {
	position: relative;
	z-index: 2;
}

.has-logo {
	position: relative;
}

.has-logo::before {
	content: "";
    display: block;
	position: absolute;
    background: url("/wp-content/uploads/2026/08/logo_snake.svg") center / contain no-repeat;
}

.has-logo--left::before {
	width: 370px;
    height: 520px;
	top: 50px;
	z-index: 1;
}

.has-logo--right::before {
	width: 370px;
    height: 400px;
	top: 80px;
	right: 0;
	z-index: 1;
	filter: brightness(100);
}

/* Praxisteam Mitarbeiter + Ärzte */
.praxisteam h3,
.praxisteam p {
	margin-block-start: 10px;
}

/* News Kacheln */
.kachelbereich {
	margin: 3em 0;
}

.kachelbereich .wp-block-columns {
  	gap: 0;
  	margin-bottom: 0;
}

.kachelbereich .wp-block-column {
  	padding: 40px;
}

.kachelbereich .wp-block-columns:nth-child(1)>.wp-block-column:nth-child(1),
.kachelbereich .wp-block-columns:nth-child(2)>.wp-block-column:nth-child(2),
.kachelbereich .wp-block-columns:nth-child(3)>.wp-block-column:nth-child(1) {
  	background-color: rgb(20 64 105 / 20%);
}

.kachelbereich>.wp-block-columns {
  	margin-top: 0 !important;
  	margin-bottom: 0 !important;
}

/* Öffnungszeiten Tabelle (Footer + Kontakt) */
.oeffnungszeiten-table table {
  	width: auto;
  	border-collapse: collapse;
}

.oeffnungszeiten-table table td {
  	border: 0 !important;
  	padding: 0;
  	vertical-align: top;
	line-height: 1.7;
}

.oeffnungszeiten-table table td:first-child {
  	width: 125px;
  	white-space: nowrap;
}

.oeffnungszeiten-table table td:last-child {
  	white-space: nowrap;
}

/* Footer */
.footer-links {
	display: flex;
	flex-direction: row;
	list-style: none;
	gap: 50px;
	padding: 0;
}

.footer-links li a {
	text-decoration: none;
	color: var(--blue);
	font-weight: 500;
}

/* Bandf Banner */
.banner-bandf {
    margin-top: 0;
	height: 100px;
	min-height: 100px;
}

.banner-bandf p {
    text-align: right !important;
    line-height: 32px;
}

/* ======================
RESPONSIVE
====================== */

@media only screen and (max-width: 1200px) {
	.has-logo--left::before, .has-logo--right::before {
		display: none;
	}
}

@media only screen and (max-width: 960px) {
    .oeffnungszeiten-table table,
    .oeffnungszeiten-table tbody,
    .oeffnungszeiten-table tr,
    .oeffnungszeiten-table td {
        display: block;
        width: 100%;
    }
}

@media only screen and (max-width: 781px) {
	header .social__phone {
  		text-align: center;
	}
	
	.icons-under-header {
  		position: relative;
  		top: 0px;
	}
	
	.wp-container-core-group-is-layout-40fe1019 {
  		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	
	.wp-container-core-group-is-layout-40fe1019 img {
  		display: block;
		margin: 0 auto;
	}
	
	.aerzte img, .praxisteam img {
		display: block;
		margin: 0 auto;
	}
	
	.aerzte p, .aerzte h3, .praxisteam p, .praxisteam h2, .praxisteam h3 {
		text-align: center;
	}
	
	.kachel-switch {
		flex-direction: column-reverse;
	}
	
	.banner-bandf {
		min-height: 150px;
		height: 150px;
	}

    .banner-bandf p,
    .banner-bandf img {
        text-align: center !important;
        display: block;
        margin: 0 auto;
    }

    .banner-bandf .wp-block-image>a {
        display: block;
    }
}

@media only screen and (max-width: 600px) {
	.wp-container-core-group-is-layout-40fe1019 {
    	grid-template-columns: repeat(1, minmax(0, 1fr));
  	}
}

@media only screen and (max-width: 400px) {
	.wp-block-getwid-accordion .wp-block-getwid-accordion__header {
		width: 85%;
	}
}

/* ======================
RESPONSIVE END
====================== */