/*
Projekt       : Wellnesswiedel
Komponente    : Wordpress
Datei         : style.css
Beschreibung  : Spezielle Anpassungen des Themes "twentytwentyfour" für die Website "wellnesswiedel.de"
Author:         Datenwege Informatik
Author URI:     http://Datenwege-Informatik.de
Template:       twentytwentyfour
Version:        1.0
Historie
   06.07.24  Gernot Daum  Beginn der Implementierung
*/

/* Fonts */
@font-face {
  font-family: 'Nunito Light';
  font-style: normal;
  src: url('assets/fonts/Nunito-Light.woff2') format('woff2'),
       url('assets/fonts/Nunito-Light.woff') format('woff'),
       url('assets/fonts/Nunito-Light.ttf') format('truetype'),
       url('assets/fonts/Nunito-Light.eot') format('embedded-opentype');
}
@font-face {
  font-family: 'Nunito Regular';
  font-style: normal;
  src: url('assets/fonts/Nunito-Regular.woff2') format('woff2'),
       url('assets/fonts/Nunito-Regular.woff') format('woff'),
       url('assets/fonts/Nunito-Regular.ttf') format('truetype'),
       url('assets/fonts/Nunito-Regular.eot') format('embedded-opentype');
}
@font-face {
  font-family: 'Nunito Bold';
  font-style: normal;
  src: url('assets/fonts/Nunito-Bold.woff2') format('woff2'),
       url('assets/fonts/Nunito-Bold.woff') format('woff'),
       url('assets/fonts/Nunito-Bold.ttf') format('truetype'),
       url('assets/fonts/Nunito-Bold.eot') format('embedded-opentype');
}

@font-face {
  font-family: 'FontAwesome Solid';
  font-style: normal;
  src: url('assets/fonts/fa-solid-900.woff2') format('woff2'),
       url('assets/fonts/fa-solid-900.woff') format('woff'),
       url('assets/fonts/fa-solid-900.ttf') format('truetype'),
       url('assets/fonts/fa-solid-900.eot') format('embedded-opentype');
}

/* Eigene Konstanten body */
body {
	/*   Farben */
	--wdl--transparency-base: rgba(255, 255, 255, 0.7);
	--wdl--transparency-base-2: rgba(249, 249, 249, 0.35);
	--wdl--transparency-accent-3: rgba(234, 235, 236, 0.75);
	--wdl--transparency-orange1: rgba(255, 105, 0, 0.1);
	--wdl--transparency-orange2: rgba(255, 105, 0, 0.3);
	--wdl--transparency-green: rgba(114, 128, 63, 0.3);
	--wdl--gradient-heat: linear-gradient(0, var(--wdl--transparency-base) 0%,
	                    var(--wdl--transparency-orange2) 100%);
  --wdl--gradient-green: linear-gradient(135deg, var(--wdl--transparency-base) 0%,
	                    var(--wdl--transparency-green) 50%, var(--wdl--transparency-base) 100%);

	/*   Schriften */
	--wp--preset--font-family--heading: 'Nunito Bold', -apple-system, BlinkMacSystemFont, sans-serif;
	--wp--preset--font-family--body: 'Nunito Light', -apple-system, BlinkMacSystemFont, sans-serif;
  --wp--preset--font-size--x-small: clamp(9pt, 0.7vw, 24pt);
	--wp--preset--font-size--small: clamp(10pt, 0.9vw, 32pt);
  --wp--preset--font-size--s-medium: clamp(12pt, 1.15vw, 34pt);
  --wp--preset--font-size--medium: clamp(13pt, 1.3vw, 36pt);
  --wp--preset--font-size--large: clamp(16pt, 2vw, 48pt);
  --wp--preset--font-size--x-large: clamp(24pt, 3.2vw, 90pt);
  --wp--preset--font-size--big: clamp(30pt, 4vw, 115pt);
  --wp--preset--font-size--huge: clamp(36pt, 4.8vw, 120pt);

  /*   Breiten und Abstände */
  --global--spacing-unit: clamp(7.5px, 0.7813vw, 30px);
  --wdl--spacing-seam: 6px;
  --wdl--spacing-regular: var(--global--spacing-unit);
  --wdl--spacing-large: calc(2 * var(--global--spacing-unit));
  --wdl--spacing-x-large: calc(3 * var(--global--spacing-unit));
  --wdl--spacing-big: calc(4 * var(--global--spacing-unit));
  --wdl--spacing-huge: calc(6 * var(--wdl--spacing-regular));
  --global--spacing-horizontal: var(--wdl--spacing-regular);
  --global--spacing-vertical: var(--wdl--spacing-large);
  --global--spacing-section: var(--wdl--spacing-huge);

  --default-outer-margin-mult: 4;
	--default-outer-margin: calc(var(--default-outer-margin-mult) * var(--global--spacing-horizontal));
	--default-outer-spacing: calc(2 * var(--default-outer-margin));
  --street-width: 1600px;
  --responsive--street-width: min(calc(100vw - var(--default-outer-spacing)), var(--street-width));
  --constriction-width: 1280px;
  --responsive--constriction-width: min(calc(100vw - var(--default-outer-spacing)), var(--constriction-width));
  --narrow-width: 960px;
  --single-track-width: 800px;
  --responsive--single-track-width: min(calc(100vw - var(--default-outer-spacing)), var(--single-track-width));
  --responsive--content-width: var(--responsive--street-width);
  --margin-street: max(var(--default-outer-margin), calc((100vw - var(--street-width)) / 2));
  --margin-constriction: max(var(--default-outer-margin), calc((100vw - var(--constriction-width)) / 2));
  --wp--style--global--wide-size: var(--street-width);
  --wp--style--global--content-size: var(--constriction-width);

  /*   Sonstiges */
	--wdl-border-radius: var(--wdl--spacing-regular);
	--wdl-border-radius-large: var(--wdl--spacing-large);
	--wdl-border-radius-btn: 0 0 var(--global--spacing-unit) var(--global--spacing-unit);
}

/* Allgemein */

/* Theme Reset */
.has-global-padding {padding-right: 0; padding-left: 0}
.has-global-padding > .alignfull {margin-right: 0; margin-left: 0}
#masthead > *, #content .entry-content > *:not(.alignfull), #footer > * {
	max-width: var(--responsive--content-width);
	margin-left: auto;
	margin-right: auto
}
:where(.wp-site-blocks) > * {margin-block-start: 0}
:where(.wp-site-blocks :focus) {outline-width: 0}
.wp-block-post-featured-image img,
.wp-block-post-featured-image .block-editor-media-placeholder,
.wp-block-post-featured-image .wp-block-post-featured-image__overlay {border-radius: 0}

p {hyphens: auto}
h1, h2, h3 {text-align: center}
h1, h2, h3, h4 {font-family: 'Nunito Bold'}
#content h2 {font-size: var(--wp--preset--font-size--x-large)}
#content h3, #content .h3 {font-size: var(--wp--preset--font-size--large)}
#content h4 {font-size: var(--wp--preset--font-size--medium)}
a {text-decoration: none; color: var(--wp--preset--color--accent)}
a:hover {text-decoration: underline}
.listcaption {margin-bottom: 4px}
.listcaption + * {margin-top: 4px; margin-block-start: 4px}
.subtitle {margin-top: 0}
.infotext {font-size: var(--wp--preset--font-size--small)}
.dyn-columns {column-gap: var(--global-spacing-medium)}
.dyn-columns {column-count: 2}
.prices td {border: none; padding: 0 10px 0 0}
svg path, svg line, svg rect, svg circle {stroke: var(--wp--preset--color--contrast); }

/* Text mit Symbol illustrieren */
.illustrated {
	--js-size: 20px;
	--js-top: calc(var(--wdl--spacing-seam) / 2);
	--js-left: calc(-1 * (var(--js-size) + var(--wdl--spacing-seam)));
	position: relative;
	gap: 0
}
.illustrated .wp-block-column:first-child {
	position: absolute;
	top: var(--js-top);
	left: var(--js-left);
	width: var(--js-size); max-width: var(--js-size)
}
.illustrated svg {max-width: var(--js-size); max-height: var(--js-size)}

/* Kopf */
#masthead {
	background: var(--wp--preset--color--accent-3) !important;
	padding-top: var(--global--spacing-section);
	padding-bottom: var(--global--spacing-section)
}
#masthead > *, .mixed-navigation {
	align-items: flex-start
}
#masthead h2 {font-size: var(--wp--preset--font-size--large)}
header .wp-block-site-logo, header .wp-block-navigation-item__content, #masthead .contact {
	border-radius: var(--wdl-border-radius);
	border: 2px solid var(--wp--preset--color--accent-3)
}
header .wp-block-navigation-item__content, #masthead .contact {
	padding: var(--wdl--spacing-seam);
	font-size: var(--wp--preset--font-size--small);
}
#masthead .contact {
	margin-left: var(--global--spacing-horizontal);
}
#masthead .contact-items {row-gap: 0}
.home header .wp-block-site-logo,
#masthead .current-menu-item a, #masthead a.current-menu-ancestor,
header .wp-block-site-logo:hover, #masthead .wp-block-navigation-item__content:hover,
#masthead .contact:hover {
	border: 2px solid var(--wp--preset--color--accent);
	text-decoration: none
}
#content section.page-header {margin-top: 0}
#content .page-header .overlay {top: 15%}
#content .page-header .overlay > * {
	width: 90%;
	max-width: var(--narrow-width);
	margin-left: auto;
	margin-right: auto;
	padding: var(--wdl--spacing-large);
	border-radius: var(--wdl-border-radius-large);
	background: var(--wdl--transparency-base);
	text-align: center
}
.home #content .page-header .overlay {top: 25%}
.home #content .page-header .overlay > * {
	width: 25%;
	min-width: 210px;
	margin-left: 5% !important;
}
#welcome {padding-top: var(--global--spacing-vertical)}
#content .page-header img {min-height: 600px; object-fit: cover}
#content .page-header .overlay h1 {
	font-size: var(--wp--preset--font-size--medium);
	font-family: 'Nunito Bold';
	text-transform: uppercase
}
#content .page-header .overlay h2 {
	margin-top: 0;
	font-family: 'Nunito Light';
	font-size: var(--wp--preset--font-size--large);
}
.home #content .page-header .sale, .home #content .page-header .appointment {
	right: 9%;
	left: initial;
	transform: rotate(8deg);
	font-size: var(--wp--preset--font-size--small)
}
#content .page-header .sale {
	top: -5%;
	max-width: 320px
}
.home #content .page-header .appointment {
	top: -2.5%;
	max-width: 260px
}
#content .page-header .sale > *, #content .page-header .appointment > * {
	padding: var(--wdl--spacing-regular);
	color: white;
	background: var(--wp--preset--color--accent)
}
#content .page-header .sale > *:nth-child(1), #content .page-header .appointment > *:nth-child(1) {
  border-radius: var(--wdl-border-radius-large) var(--wdl-border-radius-large) 0 0;
  padding-bottom: 0
}
#content .page-header .sale > *:nth-child(2), #content .page-header .appointment > *:nth-child(2) {
	margin-top: -2px;
  border-radius: 0 0 var(--wdl-border-radius-large) var(--wdl-border-radius-large)
}
#masthead .contact {--js-top: 10px; --js-left: calc(-1 * var(--js-size)) }
#masthead .contact a {text-decoration: none}


/* Fuß */
footer {
	background: var(--wp--preset--color--accent-3);
	font-size: var(--wp--preset--font-size--small)
}
footer .closure {font-size: var(--wp--preset--font-size--x-small)}
#footer h2 {font-size: var(--wp--preset--font-size--medium)}
#footer ul {row-gap: 0}
#footer a {text-decoration: none}
#footer .current-menu-item a, #footer a:hover {color: var(--wp--preset--color--accent)}
footer .wp-block-column .wp-block-group {row-gap: var(--wdl--spacing-large)}
#footer .width-contactdata {row-gap: 0}
footer .width-contactdata .wp-block-heading {margin-bottom: var(--wdl--spacing-large)}

/* Navigation */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
  background: transparent;
  border: none
}
.wp-block-navigation .has-child:not(.open-on-click) > .wp-block-navigation__submenu-container,
.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
  min-width: 240px;
}
#footer .wp-block-navigation__submenu-icon {display: none}
#footer .wp-block-navigation__submenu-container {
	position: relative;
  height: auto;
  min-width: 200px;
  opacity: 1;
  overflow: visible;
  visibility: visible;
  width: auto;
}
#footer .wp-block-navigation-submenu {
	flex-direction: column;
	align-items: flex-start
}
#footer .wp-block-navigation-submenu a {
	padding-top: 0;
	padding-bottom: 0
}

/* Inhalte */
.background {padding: var(--wdl--spacing-large)}
#content .light {background: white}
#content .dimmed {background: var(--wp--preset--color--accent-3)}
#content .dark {background: var(--wp--preset--color--contrast-3)}
#content .warm, #content .heat {background: var(--wdl--gradient-heat)}
#content .green {background: var(--wdl--gradient-green)}

/*   Abschnitte */
#content section {
	margin-top: var(--wdl--spacing-huge);
	margin-bottom: var(--wdl--spacing-huge)
}
#content section.background {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: var(--global--spacing-section);
	padding-bottom: var(--global--spacing-section);
}
#content section.page-header.background {padding-top: 0}
section.background > * {
	max-width: var(--responsive--constriction-width);
	margin-left: auto;
	margin-right: auto
}
#content .section-header + section {margin-top: var(--global--spacing-vertical)}
#content .single-track {max-width: 800px; margin-left: auto; margin-right: auto}
.page-header.story {position: relative; z-index: 1}
#content .story + section.background {margin-top: calc(-1 * var(--wdl--spacing-regular))}

/*   Überlagerungen */
.overlay-anchor {position: relative}
#content .overlay-anchor figure {margin-bottom: 0}
.overlay, #content .overlay, #content .overlay-item {
	position: absolute;
	width: 100%;
	max-width: none;
	top: 0;
	left: 0;
	margin: 0
}
.overlay.alignleft > * {margin-left: 0 !important}
.overlay.alignright > * {margin-right: 0 !important}
#content .overlay.productdata {
	width: 25%;
	top: initial;
	bottom: 0;
	left: initial;
	right: 0
}

/*   Designelemente für die navtiles */
.navtiles figure {position: relative}
#content .navtiles .overlay {
	top: var(--global--spacing-vertical);
	left: var(--global--spacing-vertical);
	width: auto
}
#content .navtiles .overlay > * {
	min-height: 64px;
	margin-top:0;
	margin-bottom: 0;
	padding: var(--wdl--spacing-large);
}
.navtiles h2, .navtiles h3, .navtiles .symlink a {margin: 0}
.navtiles h2 {margin-bottom: var(--global--spacing-vertical); text-align: center}
#content .navtiles h2 {font-size: var(--wp--preset--font-size--large)}
#content .navtiles h3 {font-size: var(--wp--preset--font-size--medium)}
.navtiles .symlink {display: inline; width: calc(var(--js-size) + 2 * var(--js-border-size));}
.navtiles .overlay-anchor:hover .symlink a {color: var(--wp--preset--color--accent)}
#content .navtiles {
	gap: var(--wdl--spacing-regular);
	margin-top: 0;
	margin-bottom: 0;
	padding-top: var(--global--spacing-section);
	padding-bottom: var(--global--spacing-section)
}
#content .navtiles.col-4 > * {width: calc(25% - 3 * var(--wdl--spacing-regular) / 4)}
#content .navtiles .wp-block-columns {
	gap: var(--wdl--spacing-regular);
	margin-top: var(--wdl--spacing-regular)
}
#content .navtiles .overlay {
	display: flex;
	top: 50%;
	left: 20%;
	width: 60%;
	align-items: center;
	background: var(--wdl--transparency-accent-3);
	border-radius: var(--wdl-border-radius)
}
#content .navtiles.dark .overlay {background: var(--wdl--transparency-base-2)}
#content .navtiles.col-4 .overlay {left: 5%; width: 90%}
#content .navtiles .symlink {
  --js-size: var(--wdl--spacing-x-large);
  --js-border-size: 1px;
  padding-left: var(--wdl--spacing-regular);
  padding-right: var(--wdl--spacing-regular)
}
#content .col-3, #content .sub-navigation {gap: var(--wdl--spacing-regular)}
#content .sub-navigation {
  padding: var(--wdl--spacing-large);
	position: absolute;
	width: 100%;
	bottom: 0;
	background: var(--wdl--transparency-base-2);
}
#content .sub-navigation .wp-block-group {width: calc(33.33% - 2 * var(--wdl--spacing-regular) / 3)}
#content .col-4 .wp-block-group {width: calc(25% - 3 * var(--wdl--spacing-regular) / 4)}
#content .col-3 .wp-block-group {width: calc(33.33% - 2 * var(--wdl--spacing-regular) / 3)}

/*   Designelement Story */
.story {--js-height: 200px; gap: 0}
.story .wp-block-column:nth-child(1), .story .wp-block-column:nth-child(1) img {
	border-radius: var(--global--spacing-unit) 0 0 var(--global--spacing-unit)
}
.story .wp-block-column:nth-child(2), .story .wp-block-column:nth-child(2) img {
	border-radius: 0 var(--global--spacing-unit) var(--global--spacing-unit) 0
}
.story .content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--global--spacing-vertical);
	border-radius: var(--wdl-border-radius-large);
	background: var(--wp--preset--color--accent-2);
	font-size: var(--wp--preset--font-size--s-medium)
}
#content .story .content h1, #content .story .content .h1 {
	font-size: var(--wp--preset--font-size--medium);
	font-family: 'Nunito Bold';
	text-transform: uppercase
}
#content .story .content h2, #content .story .content .h2 {
	margin-top: var(--wdl--spacing-seam);
	font-family: 'Nunito Light';
	font-size: var(--wp--preset--font-size--large);
}
#content .story .content h3 {font-size: var(--wp--preset--font-size--medium)}
#content .story .picture img {min-height: var(--js-height); object-fit: cover}

.page-header .story .wp-block-column:nth-child(1),
.page-header .story .wp-block-column:nth-child(1) img
{border-top-left-radius: 0}
.page-header .story .wp-block-column:nth-child(2),
.page-header .story .wp-block-column:nth-child(2) img
{border-top-right-radius: 0}

.story .symlink {
	--js-size: var(--wdl--spacing-big);
	--js-border-size: 2px;
}
/*   		"Fullscreen" Variante */
.story.fullscreen figure:nth-child(1) img {
	border-radius: var(--wdl-border-radius-large) var(--wdl-border-radius-large) 0 0
}
.story.fullscreen figure + .content {
	margin-top: 0;
	border-radius: 0 0 var(--wdl-border-radius-large) var(--wdl-border-radius-large)
}
.story.fullscreen .content h2 {font-size: var(--wp--preset--font-size--x-large)}
/*   		Galerie-Variante */
.gallery .story {
	width: 50%;
	margin: 0;
	flex-direction: column;
	row-gap: 0
}
.gallery .story .content:nth-child(1), .gallery .story .picture:nth-child(1) img {
	border-radius: var(--wdl-border-radius-large) var(--wdl-border-radius-large) 0 0
}
.gallery .story .content:nth-child(2), .gallery .story .picture:nth-child(2) img {
	border-radius: 0 0 var(--wdl-border-radius-large) var(--wdl-border-radius-large)
}


/*   Symbole und Links mit Symbolen */
i.fa-solid {
	font-family: 'FontAwesome Solid';
	text-align: center;
	font-style: normal
}
i.fa-solid.huge {font-size: var(--wp--preset--font-size--huge)}
i.fa-solid:before {display: block; width: 100%}
.symlink {
	--js-size: var(--wdl--spacing-huge);
	--js-font-size: var(--wp--preset--font-size--large);
	--js-border-size: 4px;
	margin-top: var(--wdl--spacing-large);
	font-size: var(--wp--preset--font-size--x-small);
	text-align: center
}
.symlink a {
	display: block;
	width: calc(var(--js-size) + 2 * var(--js-border-size));
	margin: 0 auto;
	color: var(--wp--preset--color--contrast);
	text-decoration: none
}
.symlink a:hover {color: var(--wp--preset--color--accent)}
.symlink a i {
	display: block;
	height: var(--js-size);
	border: var(--js-border-size) solid;
	border-radius: 50%
}
.symlink a i:before {
	line-height: 1;
	margin-top: calc((var(--js-size) - var(--js-font-size) ) / 2);
	font-size: var(--js-font-size)
}
.symlink p {margin: 10px 0 0 0}
.fa-house:before {content: '\f015'}
.fa-phone:before {content: '\f095'}
.fa-appointment:before {content: '\f274'}
.fa-catalogue:before {content: '\f02d'}
.fa-more:before {content: '\f061'}
.fa-top:before {content: '\f062'}
.fa-prior:before {content: '\f062'}
.fa-next:before {content: '\f063'}

/*     Spezielle Formatierungen */
.sale .symlink, .appointment .symlink {
	--js-size: var(--wdl--spacing-big);
	--js-font-size: var(--wp--preset--font-size--medium);
	--js-border-size: 2px;
	margin-top: 0
}
.sale .symlink a, .appointment .symlink a {color: white}
.sale .symlink a:hover, .appointment .symlink a:hover {color: white; opacity: 0.6}

/* Pseudo Tabellen */
.valuepairs {display: flow-root}
.valuepairs div {float: left; padding: 2px 12px 2px 0}
.valuepairs .name {clear: left; width: calc(30% - 12px); max-width: 120px}
.valuepairs .value {width: calc(70% - 12px)}
.valuepairs .line {width: calc(100% - 12px)}

/*   Diverse Spezialformatierungen */
#content .partners {margin-top: 0; gap: 0}
#content .partners >* {width: 16.66%}
#inspirationen {--js--grid-interspace: var(--wdl--spacing-large)}
#inspirationen > * {
	display: flex;
	margin-top: var(--js--grid-interspace);
	column-gap: var(--js--grid-interspace)
}
.customers tr td:nth-child(2) {background: var(--wdl--transparency-orange1)}
.customers tr td:last-child {background: var(--wdl--transparency-orange2)}

/*   Unsere Kompetenzen */
#content .services {
	gap: 0;
	font-size: var(--wp--preset--font-size--small);
	text-align: center
}
#content .services .wp-block-column {padding: var(--global--spacing-unit)}
#content .services figure, #content .services svg {max-width: 90px;	margin-left: auto; margin-right: auto}
#content .services h3, #content .services h3 + p {margin-top: var(--global--spacing-horizontal-vw)}
#content .services path, #content .services line, #content .services circle {stroke: var(--wp--preset--color--accent)}

/*   FAQ */
.wp-block-getwid-accordion {
  padding-top: var(--global--spacing-vertical);
  padding-bottom: var(--global--spacing-vertical)
}
#content .wp-block-getwid-accordion__header-wrapper {border: none}
#content .wp-block-getwid-accordion__header {box-sizing: border-box}
.wp-block-getwid-accordion__header a {color: var(--wp--preset--color--contrast)}
.wp-block-getwid-accordion__header i {color: var(--wp--preset--color--accent)}
.wp-block-getwid-accordion__content {
	background: var(--wp--preset--color--base);
	border: none
}

/*   Call To Action Bereiche */
.contact {
  border-radius: var(--global--spacing-unit);
}
.contact .CTA {
	margin-left: var(--wdl-spacing-medium-vw);
  margin-right: var(--wdl-spacing-medium-vw);
  padding: var(--wdl-spacing-medium-vw);
	color: var(--wp--preset--color--accent);
	background: var(--wdl-black)
}
.contact .CTA .wp-block-button {width: 100%}
.contact .CTA .wp-block-button a {
  width: 100%;
  margin-top: var(--wdl-spacing-medium-vw);
	border-radius: var(--wdl-border-radius-btn);
	background: var(--wp--preset--color--accent);
	font-family: 'Nunito Bold';
	font-size: var(--wp--preset--font-size--large);
	text-transform: uppercase
}
.contact .CTA .wp-block-button a:hover {
	background: var(--wp--preset--color--contrast-3);
	color: var(--wp--preset--color--accent);
	text-decoration: none
}

/* Kontaktseite */
#content #kontakt .overlay {padding: var(--global--spacing-section) var(--wdl--spacing-large)}
#kontakt img {max-height: 640px; object-fit: cover}
#content #formulare {margin-top: 0; padding-top: var(--wdl--spacing-huge)}
#content .form-selector {
	gap: var(--global--spacing-unit);
	margin-top: var(--global--spacing-section)
}
#content .select-tab {gap: var(--global--spacing-unit); cursor: pointer}
#content .select-tab h3 {font-size: var(--wp--preset--font-size--medium)}
#content .selected .select-tab h3, .select-tab:hover h3
{color: var(--wp--preset--color--accent)}
.select-tab .wp-block-column {display: flex; align-items: center}
.select-tab .wp-block-column:first-child {flex-basis: 25% !important}
.select-tab .wp-block-column:last-child {flex-basis: 75%  !important}
.select-tab h3 {text-align: left}
.select-tab figure {min-width: 100%; margin-top: 0}
.select-tab img {min-height: 0; max-width: 90px}
.selected .select-tab svg path, .select-tab:hover svg path,
.selected .select-tab svg line, .select-tab:hover svg line,
.selected .select-tab svg rect, .select-tab:hover svg rect,
.selected .select-tab svg circle, .select-tab svg circle
{stroke: var(--wp--preset--color--accent)}

.forms > .wp-block-group {display: none; margin-top: 0}
.forms > .wp-block-group.selected {display: block}
#catalogue-form .form-selector-catalogue {gap: 0}
#catalogue-form > .wp-block-group {display: none; margin-top: 0}
#catalogue-form > .wp-block-group.selected {display: block}
#catalogue-form h3 {
	width: 90%;
	margin: 0 auto;
	padding: var(--global--spacing-unit-vw) 0;
	cursor: pointer;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--contrast-3);
	border-top-left-radius: var(--global--spacing-unit);
	border-top-right-radius: var(--global--spacing-unit);
}
#catalogue-form .selected h3, #catalogue-form h3:hover {
	color: var(--wp--preset--color--accent);
}
#catalogue-form form {
	padding: 0 30px;
	border: 1px solid
}
.wpcf7-form-control-wrap, .wpcf7-form-control {display: block; width: 100%}
.wpcf7-form-control-wrap {margin-top: var(--global--spacing-unit)}
.wpcf7-form-control, .wpcf7-form .btn a {
	box-sizing: border-box;
	padding: var(--global--spacing-unit);
	border: 1px solid var(--wp--preset--color--contrast-2);
	border-radius: var(--global--spacing-unit)
}
.wpcf7-radio {padding: 0; border: none}
.wpcf7-radio .wpcf7-list-item {
	display: block;
	margin-top: var(--global-seam)
}
.wpcf7-radio .wpcf7-list-item:first-child {
	margin-top: var( --global-seam)
}
.wpcf7-list-item-label {font-size: var(--wp--preset--font-size--x-small)}
.wpcf7-form .btn a {
	display: block;
	width: 100%;
  color: var(--wp--preset--color--base);
  background-color: var(--wp--preset--color--contrast-3);
  line-height: normal;
	text-align: center;
	text-decoration: none
}
.btn.submit input {
  color: var(--wp--preset--color--base);
  background-color: var(--wp--preset--color--accent)
}
.wpcf7-form .btn a, .btn.submit input {
	border-radius: var(--wdl-border-radius-btn);
	font-family: 'Nunito Bold';
  font-size: var(--wp--preset--font-size--medium);
	border: none;
	text-transform: uppercase
}
.wpcf7-form .btn a:hover, .btn.submit input:hover {opacity: 0.8}
.btn.submit input:enabled:hover {cursor: pointer}
.wpcf7-form .line {display: flow-root; margin-top: var(--global--spacing-vertical)}
.wpcf7-form .col1, .wpcf7-form .col2 {float: left; width: calc(50% - var(--wdl--spacing-large))}
.wpcf7-form .col1 {margin-right: var(--wdl--spacing-large)}
.wpcf7-form .col2 {margin-left: var(--wdl--spacing-large)}
.wpcf7-form h3 {margin-top: 0; text-align: left}
.wpcf7-form p {margin: 0}
.wpcf7-form .lbl {font-size: var(--wp--preset--font-size--x-small)}
.wpcf7-form .check .wpcf7-form-control {
	padding: 0;
	border: none;
	font-size: var(--wp--preset--font-size--x-small)
}
.wpcf7-form-control-wrap {margin-top: 0}
.wpcf7-form .check span {
	line-height: 1;
	position: relative;
	top: -2px
}
.wpcf7-form .check-cluster .check {margin-top: var(--global--spacing-unit)}
.wpcf7-list-item {margin: 0}
.wpcf7-acceptance {display: inline}
input[type='text'], input[type='email'], input[type='date'], input[type='file'], input[type='submit'],
select, textarea {
	font-family: var(--wp--preset--font-family--system-font);
	font-size: var(--wp--preset--font-size--small)
}
.wpcf7-form input[type='date']::-webkit-calendar-picker-indicator {
  background-image: url('/wp-content/uploads/2023/11/000000-Termin.svg');
}
.wpcf7-for input[type='checkbox'] {
	--js-size: var(--global--spacing-unit);
	-webkit-appearance: none;
	width: var(--js-size);
	height: var(--js-size);
  background-image: url('assets/icons/unchecked.png');
	margin: 2px;
	border: 2px solid var(--wp--preset--color--contrast-2);
	border-radius: var(--js-size);
}
.wpcf7-form input[type='checkbox'], .wpcf7-form input[type='radio'] {
	--js-size: var(--global--spacing-unit);
  -moz-appearance: none;
  -webkit-appearance: none;
	margin: 0;
	width: var(--js-size);
	height: var(--js-size);
  background-image: url('assets/icons/unchecked.png');
  background-size: var(--js-size) var(--js-size);
  background-position: center center;
  border: none;
  outline: none
}
.wpcf7-form input[type='checkbox']:checked, .wpcf7-form input[type='radio']:checked {
  background-image: url('assets/icons/checked.png');
}
.wpcf7-not-valid-tip {
  color: var(--wp--preset--color--accent);
  font-size: var(--wp--preset--font-size--x-small)
}
.wpcf7 form.sent .wpcf7-response-output {
	margin-left: 0;
	margin-right: 0;
  color: var(--wdl-msg-ok-light);
	background: var(--wdl-msg-ok);
  border-color: var(--wdl-msg-ok-dark)
}
.wpcf7 form.invalid .wpcf7-response-output {
	color: var(--wdl-msg-not-ok-light);
	background: var(--wdl-msg-not-ok);
  border-color: var(--wdl-msg-not-ok-dark)
}
.wpcf7-form textarea:focus, .wpcf7-form input:focus{border: 1px solid var(--wp--preset--color--accent)}
.wpcf7-form input[type='checkbox']:focus, .wpcf7-form input[type='radio']:focus {outline: none}

 /*     Datenschutz Hinweis einblenden */
.btn.submit {position: relative}
.btn.submit .tooltiptext {
	--js-opacity: 1;
  position: absolute;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
  bottom: 105%;
  visibility: hidden;
  width: 100%;
  padding: 5px 0;
  color: var(--wp--preset--color--contrast-3);
  background-color: var(--wp--preset--color--accent);
  text-align: center;
  border-radius: var(--global--spacing-unit);
  font-size: var(--wp--preset--font-size--x-small)
}
.btn.submit .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--wp--preset--color--accent) transparent transparent transparent;
}
.btn.submit:hover .tooltiptext {
  visibility: visible;
  opacity: var(--js-opacity);
}

/*     Google Maps */
div#googleMap {width: 100%; min-height: 25em}


/*   Rechtliche Seiten */
.legal #content section:first-child {padding-top: var(--wdl-padding-top)}
.legal #content section > * {
	width: var(--responsive--single-track-width);
	margin-left: auto;
	margin-right: auto
}
.legal #content h1, .legal #content .h1 {font-size: var(--wp--preset--font-size--large)}
.legal #content h2 {
	margin-top: var(--global--spacing-vertical);
	font-size: var(--wp--preset--font-size--medium)
}
.legal #content h3, .legal #content p, .legal #content ul, .legal #content .valuepairs
{font-size: var(--wp--preset--font-size--small)}
.legal h1, .legal h2, .legal h3 {text-align: left}
.legal p {margin-top: var(--global--spacing-unit)}
.legal .valuepairs .name {width: calc(40% - 12px); max-width: 120px}
.legal .valuepairs .value {width: calc(60% - 12px)}

/* Responsive */
/*   Kleiner Bildschirm */
@media only screen and (max-width: 1120px) {
	#masthead > * {flex-wrap: wrap}
	#masthead > .wp-block-group > *:nth-child(1) {order:1}
	#masthead > .wp-block-group > *:nth-child(2) {order:0}
	#masthead > .wp-block-group > *:nth-child(3) {order:2}
	#masthead > .wp-block-group > *:nth-child(4) {order:4}
}

/*   Tablett Landscape */
@media only screen and (max-width: 960px) {
  .home #content .page-header img {object-position: 20% 0}
	#content div.small1 {display: block}
	#content .page-header .sale {top: initial; bottom: 13%; right: 25%}
	.wp-block-site-logo img {max-width: 120px}
	#content .navtiles.col-4 > * {width: calc(50% - var(--wdl--spacing-regular) / 2)}
	#content .col-3 .wp-block-group, #content .sub-navigation .wp-block-group
  {width: calc(50% - var(--wdl--spacing-regular) / 2)}
  #content .partners >* {width: 33.33%}
}

/*   Tablett Portrait / großer Umbruch */
@media only screen and (max-width: 782px) {
	#content .wide1, #footer .wide1 {display: none}
	#content .small1, #footer .small1 {display: initial}
  .dyn-columns {column-count: 1}
	#content .page-header .sale {bottom: 8%}
	#content .navtiles .overlay {flex-direction: column; top: 35%}
	#content .navtiles .overlay > * {min-height: 0}
	#content .navtiles .overlay h3 {padding-bottom: 0}
	#content .navtiles .overlay .symlink {padding-top: var(--wdl--spacing-seam)}
	.story {--js-height: 400px}
	.story .picture {order: 0}
	#content .story .picture img {
		min-height: 360px;
	  border-radius: var(--global--spacing-unit) var(--global--spacing-unit) 0 0
  }
  #content .page-header .story .picture img {border-radius:  0}
  #content .story .content {
  	order: 1;
	  border-radius: 0 0 var(--global--spacing-unit) var(--global--spacing-unit)
  }
  #inspirationen .gallery {margin-top: 0}
  #inspirationen h2 {margin-bottom: var(--wdl--spacing-large)}
  .gallery .story {width: 90%; margin-bottom: var(--js--grid-interspace)}
  #content #inspirationen .story .picture img {height: 240px}
	#content .form-selector {margin-top: var(--wdl--spacing-large)}
	#content .form-selector .wp-block-column {margin-bottom: var(--wdl--spacing-regular)}
  .select-tab .wp-block-column:first-child {max-width: 40px}
	#inspirationen > * {flex-direction: column}
	.galery .story {width: 100%}
	#catalogue-form h3 {font-size: var(--wp--preset--font-size--medium)}
	#footer .illustrated {--js-top: var(--wdl--spacing-seam); --js-left: 0}
	#footer .illustrated .wp-block-column:last-child
	{margin: var(--wdl--spacing-seam) 0 var(--wdl--spacing-seam) calc( 2 * var(--js-size))}
	footer .closure ul {justify-content: flex-start}
}

/*   Smartphone groß */
@media only screen and (max-width: 600px) {
	.home #content .page-header .overlay > * {font-size: var(--wp--preset--font-size--small)}
  .home #content .page-header .overlay h1 {font-size: var(--wp--preset--font-size--small)}
  .home #content .page-header .overlay h2 {font-size: var(--wp--preset--font-size--medium)}
  .home #content .page-header img {	object-position: 30% 0}
	#content .page-header .sale {right: 10%; bottom: 2%}
  .prices td:nth-child(1) {width: 66%}
}

/*   Smartphone */
@media only screen and (max-width: 480px) {
	.customers {font-size: var(--wp--preset--font-size--small)}
}

/*   Smartphone klein */
@media only screen and (max-width: 400px) {
	#content .navtiles.col-4 > * {width: 100%}
}

/*   Smartphone sehr klein */
@media only screen and (max-width: 360px) {
	#content .page-header .sale {right: 2%}
}

/* Werkstatt */
/*
.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
  height: auto;
  min-width: 240px;
  opacity: 1;
  overflow: visible;
  visibility: visible;
  width: auto;
}
*/