/*
Theme Name: Awisolar
Theme URI: https://www.awisolar.de/
Author: Web-Publishing Ronge, Thomas Ronge
Author URI: https://www.web-publishing.de/
Description: Theme für awisolar.de
Version: 1.0
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/*

Klassen im Wordpress Backend:
form						Icons beim Button welche zum Kontaktformular verlinken
back-dark				Accordion mit dunklem Hintergrund
last						Accordion > border-bottom: 1px solid #fcfcfc;
slider					Macht aus einem Galerie-Block einen Bilderslider
ul-no-margin-before	UL > kein Abstand davor
no-padding-top			Überschriften: Kein Innen-Abstand nach Oben
no-padding-bottom		Überschriften: Kein Innen-Abstand nach unten
no-margin-bottom		Kein Außen-Abstand nach unten
padding-5				Padding 5px
white-space-nowrap	Kein Umbruch
reihenfolge-1			Reihenfolge ändern bis Breite von 781 Pixel
reihenfolge-2			Reihenfolge ändern bis Breite von 781 Pixel

Farben:
49745c	Logo Grün
f3c418	Logo Gelb

alt:
fcfcfc	Schrift fast weiß, rgb(251, 251, 251)			AWI-Solar Schrift Weiß
																		AWI-Solar Hintergrund Weiß
5f5f5f	Überschrift heller grau, rgb(129, 122, 122)	AWI-Solar Schrift Hellgrau
302b2b	Überschrift dunkel, rgb(52, 46, 46)				AWI-Solar Schrift Dunkelgrau
e8e8e8	Hintergrund hellgrau, rgb(232, 232, 232)		AWI-Solar Hintergrund Hellgrau
342e2e	Hintergrund fast schwarz, rgb(52, 46, 46)		AWI-Solar Hintergrund Dunkelgrau
*/

/* Variables */
/* start - Wrapper für alle Navigations-Einstellungen ############################################################################################ */
/* start - Navigation ############################################################################################################################ */
/* start - damit die Unterpunkte im Mouseover-Menü nach Links statt nach Rechts angezeigt werden ################################################# */
/* start - Ein-Ausblenden der normalen/mobilen Navigation ######################################################################################## */
/* start - buttons ############################################################################################################################### */
/* start - Kontaktformular mit Plugin contact-form-7 ############################################################################################# */
/* start - Am Blockelement auswählbar "Gesamte Breite" ########################################################################################### */
/* Tel-Links nur in Smartphones anzeigen: */

/* ubuntu-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/ubuntu-sans-v4-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/ubuntu-sans-v4-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/ubuntu-sans-v4-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/ubuntu-sans-v4-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('fonts/ubuntu-sans-v4-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('fonts/ubuntu-sans-v4-latin-regular.svg#UbuntuSans') format('svg'); /* Legacy iOS */
}

/* ubuntu-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu Sans';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/ubuntu-sans-v4-latin-italic.eot'); /* IE9 Compat Modes */
  src: url('fonts/ubuntu-sans-v4-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/ubuntu-sans-v4-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/ubuntu-sans-v4-latin-italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('fonts/ubuntu-sans-v4-latin-italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('fonts/ubuntu-sans-v4-latin-italic.svg#UbuntuSans') format('svg'); /* Legacy iOS */
}

/* ubuntu-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/ubuntu-sans-v4-latin-700.eot'); /* IE9 Compat Modes */
  src: url('fonts/ubuntu-sans-v4-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/ubuntu-sans-v4-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/ubuntu-sans-v4-latin-700.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('fonts/ubuntu-sans-v4-latin-700.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('fonts/ubuntu-sans-v4-latin-700.svg#UbuntuSans') format('svg'); /* Legacy iOS */
}

/* ubuntu-sans-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu Sans';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/ubuntu-sans-v4-latin-700italic.eot'); /* IE9 Compat Modes */
  src: url('fonts/ubuntu-sans-v4-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/ubuntu-sans-v4-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/ubuntu-sans-v4-latin-700italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('fonts/ubuntu-sans-v4-latin-700italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('fonts/ubuntu-sans-v4-latin-700italic.svg#UbuntuSans') format('svg'); /* Legacy iOS */
}

/* Variables */
:root {

	--breite--header: 1240px;
	--breite--content: 1240px;
	--breite--footer: 1240px;

	/* Font Family */
	--global--font-primary: 'Ubuntu Sans', 'Arial', sans-serif;
	--global--font-secondary: 'Ubuntu Sans', 'Arial', sans-serif;

	/* Font Size */
	--global--font-size-xs: 14px;
	--global--font-size-sm: 16px;
	--global--font-size-base: 18px;
	--global--font-size-l: 24px;
	--global--font-size-lg: 26px;
	--global--font-size-xl: 28px;
	--global--font-size-xxl: 40px;
	--global--letter-spacing: normal;

	/* Line Height */
	--global--line-height-body: 1.7;
	--global--line-height-heading: 1.3;
	--global--line-height-page-title: 1.1;

	/* Headings */
	--heading--font-family: var(--global--font-secondary);
	--heading--font-size-h6: 16px;
	--heading--font-size-h5: 21px;
	--heading--font-size-h4: 23px;
	--heading--font-size-h3: 25px;
	--heading--font-size-h2: 27px;/*40px*/
	--heading--font-size-h1: 42px;
	--heading--letter-spacing-h6: 0.05em;
	--heading--letter-spacing-h5: 0.05em;
	--heading--letter-spacing-h4: var(--global--letter-spacing);
	--heading--letter-spacing-h3: var(--global--letter-spacing);
	--heading--letter-spacing-h2: var(--global--letter-spacing);
	--heading--letter-spacing-h1: var(--global--letter-spacing);
	--heading--line-height-h6: var(--global--line-height-heading);
	--heading--line-height-h5: var(--global--line-height-heading);
	--heading--line-height-h4: var(--global--line-height-heading);
	--heading--line-height-h3: var(--global--line-height-heading);
	--heading--line-height-h2: var(--global--line-height-heading);
	--heading--line-height-h1: var(--global--line-height-page-title);
	--heading--font-weight: normal;
	--heading--font-weight-page-title: 300;
	--heading--font-weight-strong: 600;
	--branding--color-text: var(--global--color-primary);
	--branding--color-link: var(--global--color-primary);
	--branding--color-link-hover: var(--global--color-secondary);
	--branding--title--font-family: var(--global--font-primary);
	--branding--title--font-size: var(--global--font-size-lg);
	--branding--title--font-size-mobile: var(--heading--font-size-h4);
	--branding--title--font-weight: normal;
	--branding--title--text-transform: uppercase;
	--branding--description--font-family: var(--global--font-primary);
	--branding--description--font-size: var(--global--font-size-sm);
	--branding--description--font-family: var(--global--font-primary);
	--branding--logo--max-width: 300px;
	--branding--logo--max-height: 100px;
	--branding--logo--max-width-mobile: 96px;
	--branding--logo--max-height-mobile: 96px;

	/* Colors */
	--global--color-text: #5f5f5f;
	--global--color-black: #000;
	--global--color-dark-gray: #28303d;
	--global--color-gray: #39414d;
	--global--color-light-gray: #f0f0f0;
	--global--color-green: #d1e4dd;
	--global--color-blue: #17649a;
	--global--color-red: #a72920;
	--global--color-orange: #e4dad1;
	--global--color-yellow: #eeeadd;
	--global--color-white: #fff;
	--global--color-white-50: rgba(255, 255, 255, 0.5);
	--global--color-white-90: rgba(255, 255, 255, 0.9);
	--global--color-primary: var(--global--color-light-gray);
	--global--color-secondary: var(--global--color-light-gray);

	/* Body text color, site title, footer text color. */
	--global--color-secondary: var(--global--color-text);

	/* Page, Body */
	--global--body-color-background: #fbfbfb;

	/* Footer */
	--footer--color-text: var(--global--color-primary);
	--footer--color-link: var(--global--color-primary);
	--footer--color-link-hover: var(--global--color-primary-hover);
	--footer--font-family: var(--global--font-primary);
	--footer--font-size: var(--global--font-size-sm);
}

html {
	width: 100%;
	position: relative;
	margin: 0px !important;
	padding: 0px !important;
	border: 0px !important;
}

body {
	width: 100%;
	height: 100%;
	margin: 0px !important;
	padding: 0px !important;
	border: 0px !important;
	font-family: var(--global--font-primary);
	font-weight: 300;
	color: var(--global--color-text);
	text-align: left;
	font-size: 16px;
	background-color: #fff;
}

b, strong {
	font-weight: 700;
}

blockquote, pre, p, td, img, ul, li {
	font-size: var(--global--font-size-base);
}

p.blocksatz {
	text-align: justify;
}

img, ul, ul li {
	border: 0;
	margin: 0;
	/*padding: 0;*/
}

.divContent UL,
.divContent OL {
	margin-top: 0px;
	margin-bottom: 15px;
	padding-top: 0px;
	padding-bottom: 0px;
	color: #5f5f5f;
}
.divContent UL LI {
	margin-top: 10px;
	margin-left: 20px;
	padding-top: 10px;
	font-size: var(--global--font-size-base);
}

img {
	max-width: 100%;
	height: auto;
}

.header-hotline-wrapper {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.header-hotline {
	max-width: var(--breite--header);
	margin: 0 auto;
	text-align: right;
}
.header-hotline a, .header-hotline a:visited {
	font-size: 18px;
	color: #fff;
	background-color: #aa0000;
	font-weight: bold;
	line-height: 30px;
	display: inline-block;
	padding: 0 10px 0 20px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 30px;
}
@media (max-width: 1240px) {
	.header-hotline a, .header-hotline a:visited {
		border-bottom-right-radius: unset;
	}
}
@media (max-width: 460px) {
	.header-hotline-wrapper {
		top: 327px;
	}
	.header-hotline a, .header-hotline a:visited {
		border-bottom-left-radius: unset;
		border-top-left-radius: 30px;
	}
}
.header-hotline a span.phone {
	/*font-size: 24px;*/
}

body.home .divBeitragsbild {
	display: none;
}
:root {
	--hoehe-beitragsbild-normal: 500px;
	--hoehe-beitragsbild-klein: 300px;
	--hoehe-beitragsbild-kleiner: 250px;
}
.divBeitragsbild {
	position: relative;
	height: var(--hoehe-beitragsbild-normal);
	max-height: var(--hoehe-beitragsbild-normal);
	background-position: center center;
	background-size: cover;
}
@media (max-width: 767px) {
	.divBeitragsbild {
		height: var(--hoehe-beitragsbild-klein);
		max-height: var(--hoehe-beitragsbild-klein);
	}
	div#n2-ss-2 .n2-ss-slider-1 {
		min-height: var(--hoehe-beitragsbild-klein) !important;
	}
	div#n2-ss-2 .n2-ss-slider-1{
		min-height: var(--hoehe-beitragsbild-klein) !important;
		
	}
}
@media (max-width: 479px) {
	.divBeitragsbild {
		height: var(--hoehe-beitragsbild-kleiner);
		max-height: var(--hoehe-beitragsbild-kleiner);
	}
	div#n2-ss-2 .n2-ss-slider-1 {
		min-height: var(--hoehe-beitragsbild-kleiner) !important;
	}
	div#n2-ss-2 .n2-ss-slider-1{
		min-height: var(--hoehe-beitragsbild-kleiner) !important;
		
	}
}

.has-awisolar-schrift-weiss-color,
.has-awisolar-schrift-weiss-color h1,
.has-awisolar-schrift-weiss-color h2,
.has-awisolar-schrift-weiss-color h3,
.has-awisolar-schrift-weiss-color h4,
.has-awisolar-schrift-weiss-color h5,
.has-awisolar-schrift-weiss-color h6,
.has-awisolar-schrift-weiss-color ul,
.has-awisolar-schrift-weiss-color ul li::marker {
	color: #fcfcfc !important;
}
.has-awisolar-schrift-hellgrau-color,
.has-awisolar-schrift-hellgrau-color h1,
.has-awisolar-schrift-hellgrau-color h2,
.has-awisolar-schrift-hellgrau-color h3,
.has-awisolar-schrift-hellgrau-color h4,
.has-awisolar-schrift-hellgrau-color h5,
.has-awisolar-schrift-hellgrau-color h6,
.has-awisolar-schrift-hellgrau-color ul,
.has-awisolar-schrift-hellgrau-color ul li::marker {
	color: #5f5f5f !important;
}
.has-awisolar-schrift-dunkelgrau-color,
.has-awisolar-schrift-dunkelgrau-color h1,
.has-awisolar-schrift-dunkelgrau-color h2,
.has-awisolar-schrift-dunkelgrau-color h3,
.has-awisolar-schrift-dunkelgrau-color h4,
.has-awisolar-schrift-dunkelgrau-color h5,
.has-awisolar-schrift-dunkelgrau-color h6,
.has-awisolar-schrift-dunkelgrau-color ul,
.has-awisolar-schrift-dunkelgrau-color ul li::marker {
	color: #5f5f5f !important;
}
.has-awisolar-hintergrund-weiss-background-color {
	background-color: #fbfbfb !important;
}
.has-awisolar-hintergrund-hellgrau-background-color {
	background-color: #e8e8e8 !important;
}
.has-awisolar-hintergrund-dunkelgrau-background-color {
	background-color: #666666 !important;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
h1.wp-block-heading, h2.wp-block-heading, h3.wp-block-heading, h4.wp-block-heading, h5.wp-block-heading, h6.wp-block-heading {
	margin: 0;
	color: #5f5f5f;
	font-size: var(--heading--font-size-h1);
	font-family: var(--global--font-primary);
	font-weight: 400;
	padding: 0 0 calc(var(--heading--font-size-h1) + 4px) 0 !important;
	line-height: normal;
	letter-spacing: -1.2px;
}
h2,h2.wp-block-heading,.h2 {font-size: var(--heading--font-size-h2);padding: calc(var(--heading--font-size-h2) + 10px) 0 calc(var(--heading--font-size-h2) + 5px) 0 !important;}
h3,h3.wp-block-heading,.h3 {font-size: var(--heading--font-size-h3);padding: calc(var(--heading--font-size-h3) + 8px) 0 calc(var(--heading--font-size-h3) + 4px) 0 !important;}
h4,h4.wp-block-heading,.h4 {font-size: var(--heading--font-size-h4);padding: calc(var(--heading--font-size-h4) + 6px) 0 calc(var(--heading--font-size-h4) + 3px) 0 !important;}
h5,h5.wp-block-heading,.h5 {font-size: var(--heading--font-size-h5);padding: calc(var(--heading--font-size-h5) + 4px) 0 calc(var(--heading--font-size-h5) + 2px) 0 !important;}
h6,h6.wp-block-heading,.h6 {font-size: var(--heading--font-size-h6);padding: calc(var(--heading--font-size-h6) + 2px) 0 calc(var(--heading--font-size-h6) + 1px) 0 !important;font-weight: 700;}

:root :where(p.has-background) {
	padding: 0;
}
h1.wp-block-heading {
	font-family: var(--global--font-primary);
	font-weight: 400;
	padding: 0 0 0 0;
	max-width: var(--breite--content);
	margin: 70px 0 20px 0;
	margin-left: auto;
	margin-right: auto;
	line-height: 32px;
}
@media all and (max-width: 1300px) {
	h1.wp-block-heading {
		padding-right: 35px;
	}
	h1.wp-block-heading:after {
		right: 40px;
	}
}

.em.em-item.em-item-single {
	width: 100%;
}
.wp-block-heading-single-news-wrapper {
	left: calc(-50vw + 50%);
	position: relative;
	max-width: 100vw;
	width: 100vw;
	margin: 40px 0 30px 0;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, .12);
	-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, .12);
	-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, .12);
}
@media all and (max-width: 1300px) {
	.wp-block-heading-single-news-wrapper {
		left: unset;
		position: relative;
	}
}
.em.pixelbones h1 {
	font-size: var(--heading--font-size-h1) !important;
}
@media (min-width:600px) {
	.em.pixelbones h1 {
		font-size: var(--heading--font-size-h1) !important;
		margin-left: auto;
		margin-right: auto;
		line-height: normal !important;
	}
}
h1.wp-block-heading-single-news {
	padding: 0 50px 0 0;
	max-width: var(--breite--content) !important;
	margin-left: auto;
	margin-right: auto;
	background-image: url('images/layout/empty.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 50px;
	background-position: right center;
	font-size: var(--heading--font-size-h1) !important;
}
.em.em-item.em-item-single .em-item-image {
	flex: unset;
	max-width: 30%;
}
@media all and (max-width: 900px) {
	.em.em-item.em-item-single .em-item-image {
		max-width: 50%;
	}
}
@media all and (max-width: 400px) {
	.em.em-item.em-item-single .em-item-image {
		max-width: 100%;
	}
}

a,
a:visited {
	color: #777777;
	text-decoration: underline;
}
a:hover {
	color: #564c4c;
	text-decoration: none;
}

div.container {
	padding-left: 0px;
	padding-right: 0px;
	width: auto !important;
}

.divCompanyWrapper {
	width: 100%;
	height: 107px;
	box-shadow: 0px 10px 15px rgba(0, 0, 0, .15);
	background-color: #fff;
}
body.home .startseite-top-gruppe {
	box-shadow: inset 0 10px 15px rgba(0, 0, 0, 0.15);
}
.divCompany {
	width: 100%;
	max-width: var(--breite--header);
	margin: 0 auto;
}
@media all and (max-width: 1400px) {
	.divCompany {
		width: unset;
		max-width: var(--breite--header);
		margin: unset;
		margin-left: 79px;
	}
}
@media all and (max-width: 767px) {
	.divCompany {
		margin-left: 20px;
	}
}
@media all and (max-width: 575px) {
	.divCompany {
		margin-left: 0;
	}
}
@media all and (max-width: 400px) {
	.divCompany {
		margin-left: -20px;
	}
}
.divCompanyName {
	height: 107px;
	vertical-align: middle;
	text-align: right;
	display: table-cell;
	padding-left: 28px;
	/*padding-right: 100px;*/
}
@media all and (max-width: 400px) {
	.divCompanyName {
		margin: 35px 0 0 20px;
	}
}
.divCompanyName a,
.divCompanyName a:visited {
	color: #5f5f5f;
	text-decoration: none;
	font-size: 27px;
	text-transform: uppercase;
	z-index: 1;
	position: relative;
}
.divCompanyName a:hover {
	/*opacity: 0.8;*/
}
.divCompanyName img {
	max-width: unset;
}

.divCompanyNameSubTitle {
	position: relative;
	z-index: 999;
	display: inline-block;
	padding: 5px 25px 5px 20px; /* Mehr Platz auf der linken Seite */
	white-space: nowrap;
	color: #49745c;
}
.divCompanyNameSubTitle::before {
	content: '';
	position: absolute;
	top: -1px;
	left: 8px;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		to bottom, 
		rgba(255, 255, 255, 1) 0%, 
		rgba(255, 255, 255, 1) 10%, 
		rgba(255, 255, 255, 0.90) 100%
	);
	border: none;
	border-bottom-right-radius: 10px;
	transform: skew(-20deg);
	z-index: -1;
	-webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.1);
	-webkit-clip-path: inset(0px -10px -10px -10px); /* Für ältere Safari */
	clip-path: inset(0px -10px -10px -10px);
}
.divCompanyNameSubTitle .text {
	font-size: 14px;
	position: relative;
	left: 8px; /* Text nach rechts verschieben für besseren Abstand */
	text-align: left;
}

.divContentWrapper {
	width: 100%;
}
.divContent {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--breite--content);
	margin: 0 auto;
	padding: 0px 0px 20px 0px;
	/*margin-top: 40px;*/
}
@media all and (min-width: 767px) {
	body.sticky_header .divContent {
		margin-top: 0px;
	}
}
.divContent > .container {
	width: 100% !important;
	padding: 0 30px 0 30px;
	display: inline-block;
}
@media all and (max-width: 600px) {
	.divContent > .container {
		padding: 0 10px 0 10px;
	}
}
@media all and (max-width: 400px) {
	.divContent > .container {
		padding: 0 5px 0 5px;
	}
}

.captcha-image i {
	color: #564c4c !important;
}

/*--------------------------------------------------------------
3.0 Alignments
--------------------------------------------------------------*/

.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

span.screen-reader-text {
	display: none;
}

/* start - Wrapper für alle Navigations-Einstellungen ############################################################################################ */

/* start - Navigation ############################################################################################################################ */

:root {
	/* Main navigation */
	--primary-nav--font-family: var(--global--font-primary);
	--primary-nav--font-family-mobile: var(--global--font-primary);
	--primary-nav--font-size: var(--global--font-size-md);
	--primary-nav--font-size-sub-menu: var(--global--font-size-xs);
	--primary-nav--font-size-mobile: var(--global--font-size-sm);
	--primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm);
	--primary-nav--font-size-button: var(--global--font-size-xs);
	--primary-nav--font-style: normal;
	--primary-nav--font-style-sub-menu-mobile: normal;
	--primary-nav--font-weight: normal;
	--primary-nav--font-weight-button: 500;
	--primary-nav--color-link: #777777;
	--primary-nav--color-link-hover: #564c4c;
	--primary-nav--color-text: var(--global--color-primary);
	--primary-nav--padding: calc(0.66 * var(--global--spacing-unit));
	--primary-nav--border-color: var(--global--color-primary);
}

.navigation-main {
	display: block;
	color: #999;
	margin: 0;
	min-width: 450px;/*damit bei kleinen Diplay erzwungen wird, den Schriftzug "AWI-Solar", umzubrechen*/
	padding: 30px 10px 0 40px;
	z-index: 500;
	text-align: left;
	position: relative;
}

.menu-container {
	display: inline-block;
}
.menu-toggle {
	display: none;
	cursor: pointer;
}
.menu_title {
	display: none !important;
}
.main-small-navigation ul.mobile-menu {
	display: none;
}

/*** ESSENTIAL STYLES ***/
.menu, .menu * {
	display: table;
	margin:	0 auto 0;
	padding: 0;
	list-style:	none;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
}
.menu {
	line-height: 1.0;
}
.menu ul {
	margin: 0px;
	padding: 0px;
}
.menu ul ul,
ul.menu ul {
	position: absolute;
	top: -9999px;
	left: -9999px;
	width: 200px; /* left offset of submenus need to match (see below) */
	opacity: 0;
	transition: opacity .15s ease-in-out;
	-moz-transition: opacity .15s ease-in-out;
	-webkit-transition: opacity .15s ease-in-out;
	-o-transition: opacity .15s ease-in-out;
}
.menu ul li ul li,
ul.menu ul li {
	width: 100%;
	margin: 0px;
}
.menu li {
	float: left;
	display: block;
	position: relative;
	margin: 0px;
}
.menu li li {
	float: none;
	display: block;
	position: relative;
	background: none;
	margin: 0px;
}
.menu a {
	display: inline-block;
	position: relative;
}
.menu li:hover ul,
.menu li[aria-expanded="true"] ul {
	left: 0;
	top: 48px; /* match top ul list item height */
	z-index: 99;
	opacity: 1;
}
ul.menu li:hover li ul,
div.menu ul li:hover li ul {
	top: -9999px;
	opacity: 1;
}
ul.menu li li:hover ul,
ul.menu li li[aria-expanded="true"] ul {
	left: 200px; /* match ul width */
	top: 0;
	opacity: 1;
}

/*** SKIN ***/
.navigation-main .menu .current_page_item a:not([href*="#"]), 
.navigation-main .menu .current_page_ancestor a:not([href*="#"]), 
.navigation-main .menu .current-menu-item a:not([href*="#"]), 
.navigation-main .menu .current-cat a:not([href*="#"]) {
	background: none;
}

/* start - damit sich der Pfeil bei mouseover dreht und bei aktivem Navigationspunkt gedreht bleibt ############################################## */
ul.menu .menu-item-has-children > a {
	position: relative;
	padding-left: 25px; /* Platz für den Pfeil */
}

ul.menu .menu-item-has-children > a:before {
	content: '+';/*▸▾⯈⯆*/
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.2s ease;
	opacity: 1;
}
ul.menu .menu-item-has-children > a:hover:before {
	opacity: 0;
	transform: translateY(-50%) rotate(90deg);
}
ul.menu .menu-item-has-children > a:after {
	content: '−';
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%) rotate(-90deg);
	opacity: 0;
	transition: all 0.2s ease;
}
ul.menu .menu-item-has-children > a:hover:after {
	opacity: 1;
	transform: translateY(-50%) rotate(0);
}
ul.menu .current_page_item.menu-item-has-children > a:before,
ul.menu .current_page_parent.menu-item-has-children > a:before {
	opacity: 0;
	transform: translateY(-50%) rotate(90deg);
}
ul.menu .current_page_item.menu-item-has-children > a:after,
ul.menu .current_page_parent.menu-item-has-children > a:after {
	opacity: 1;
	transform: translateY(-50%) rotate(0);
}
/* ende  - damit sich der Pfeil bei mouseover dreht und bei aktivem Navigationspunkt gedreht bleibt ############################################## */

/* Sicherstellen, dass Anker-Links ohne active-anchor Klasse den zugeklappten Pfeil anzeigen */
ul.menu .menu-item-has-children > a[href*="#"]:not(.active-anchor):before {
	content: '+';/*▸▾⯈⯆*/
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.2s ease;
	opacity: 1;
}
ul.menu .menu-item-has-children > a[href*="#"]:not(.active-anchor):hover:before {
	opacity: 0;
	transform: translateY(-50%) rotate(90deg);
}
ul.menu .menu-item-has-children > a[href*="#"]:not(.active-anchor):hover:after {
	opacity: 1;
	transform: translateY(-50%) rotate(0);
}
ul.menu .menu-item-has-children > a[href*="#"]:not(.active-anchor):after {
	opacity: 0;
}
/* Richtiger Pfeil, wenn ein Unterpunkt aktiv ist */
.navigation-main div ul.menu li.menu-item.current-menu-ancestor > a:before,
.navigation-main div ul.menu li.menu-item.current-menu-parent > a:before {
	opacity: 0;
	transform: translateY(-50%) rotate(90deg);
}
/* Richtiger Pfeil, wenn ein Unterpunkt aktiv ist */
.navigation-main div ul.menu li.menu-item.current-menu-ancestor > a:after,
.navigation-main div ul.menu li.menu-item.current-menu-parent > a:after {
	opacity: 1;
	transform: translateY(-50%) rotate(0);
}

/* start - Unterstreichung von normalen und Ankerlinks ########################################################################################### */
.menu a,
.menu a:link,
.menu a:visited {
    background: none;
    color: #5f5f5f;
    line-height: 48px;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    margin: 0px;
    padding: 0 20px 0 0px;
    border-left: none;
    border-right: none;
    font-size: 16px;
    position: relative;
}
.menu a:focus,
.menu a:active {
    text-decoration: underline !important;
}
/* Standard-Unterstreichung für aktuelle Seiten-Links - aber nur wenn kein Anker aktiv ist */
.navigation-main div ul.menu li.menu-item.current_page_item > a:not(.active-anchor) {
    text-decoration: underline !important;
}
/* Unterstreichung für aktive Anker-Links */
.navigation-main div ul.menu li.menu-item a.active-anchor {
    text-decoration: underline !important;
}
.navigation-main div ul.menu li.menu-item.current_page_item > a[href*="#"]:not(.active-anchor) {
    text-decoration: none !important;
}
/* Hover-Unterstreichung für alle Links */
.navigation-main div ul.menu li.menu-item > a:hover {
    text-decoration: underline !important;
}
/* Unterstreichung für übergeordnete Menüpunkte, wenn ein Unterpunkt aktiv ist */
.navigation-main div ul.menu li.menu-item.current-menu-ancestor > a,
.navigation-main div ul.menu li.menu-item.current-menu-parent > a {
    text-decoration: underline !important;
}
/* Sicherstellen, dass Anker-Links ohne active-anchor Klasse nicht unterstrichen werden */
.navigation-main div ul.menu li.menu-item.current-menu-ancestor > a[href*="#"]:not(.active-anchor),
.navigation-main div ul.menu li.menu-item.current-menu-parent > a[href*="#"]:not(.active-anchor) {
    text-decoration: underline !important;
}
/* ende  - Unterstreichung von normalen und Ankerlinks ########################################################################################### */

.navigation-main .menu li .current_page_item > a, 
.navigation-main .menu li .current_page_item > a:hover,
.navigation-main .menu li .current-menu-item > a, 
.navigation-main .menu li .current-menu-item > a:hover,
.navigation-main .menu li .current-cat > a, 
.navigation-main .menu li .current-cat > a:hover {
	background: none;
	/*text-decoration: underline;*/
}
.navigation-main .menu .current_page_item ul li a,
.navigation-main .menu .current-menu-item ul li a,
.navigation-main .menu .current-menu-ancestor ul li a,
.navigation-main .menu .current_page_ancestor ul li a,
.navigation-main .menu .current-cat ul li a {
	background: none;
	color: #333;
}
/*.navigation-main .menu li.current-menu-ancestor .sub-menu li.current-menu-item a,
.navigation-main .menu .current-menu-ancestor ul.sub-menu li a:hover,
.navigation-main .menu .current_page_ancestor ul.sub-menu li a:hover {
	text-decoration: underline;
}*/
.navigation-main .menu li.current-menu-ancestor a,
.navigation-main .menu li.current_page_ancestor a {
	background-color: transparent;
}
.menu {
	display: block;
	margin: 0 auto;
}
.menu ul.sub-menu {
	/*background-color: rgba(255, 255, 255, .95);*/
	background: linear-gradient(
		to bottom, 
		rgba(255, 255, 255, 1) 0%, 
		rgba(255, 255, 255, 1) 20%, 
		rgba(255, 255, 255, 0.95) 100%
	);
}
.menu ul.sub-menu,
.menu ul.children {
	display: block;
	border-radius: 0px 0px 2px 2px;
	-moz-border-radius: 0px 0px 2px 2px;
	-khtml-border-radius: 0px 0px 2px 2px;
	-webkit-border-radius: 0px 0px 2px 2px;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, .5);
	-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, .5);
	-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, .5);
	transition-delay: .2s;
	-webkit-transition-delay: .2s; /* Safari */
}
.menu ul.sub-menu ul.sub-menu,
.menu ul.children ul.children {
	transition-delay: 0s;
	-webkit-transition-delay: 0s; /* Safari */
}
body.sticky_header .menu a,
body.sticky_header .menu a:link,
body.sticky_header .menu a:visited {
	color: #6F6C6D;
}
.menu li:last-child a {
	padding-right: 0;
}
.menu-footer-container .menu a,
.menu-footer-container .menu a:link,
.menu-footer-container .menu a:visited {
	padding: 0px 30px;
	padding-top: 15px !important;
	padding-bottom: 15px !important;
	letter-spacing: unset !important;
	font-size: 18px;
}
.menu a:focus,
.menu a:hover,
.menu a:active {
	background: none;
	text-decoration: underline;
}
.menu li li a,
.menu li li a:link,
.menu li li a:visited {
	display: block;
	color: #333;
	width: 100%;
	background: none;
	text-align: left;
	text-transform: none;
	line-height: normal;
	margin: 0px;
	padding: 10px 12px 10px 25px;
	border-left: none;
	border-right: none;
	border-bottom: none;
	border-top: none;
	box-sizing: border-box;
	font-size: 14px;
}
.menu a:focus, 
.menu li li a:focus {
	outline: normal;
}
.menu li:first-child a {
	/*border-left: none;*/
}
.menu li li:first-child a {
	/*padding-left: 12px;*/
}
.menu li:last-child a {
	/*border-right: none;*/
}
.menu li:first-child,
.menu li:first-child a {
	/*border-radius: 2px 2px 0px 0px;
	-moz-border-radius: 2px 2px 0px 0px;
	-khtml-border-radius: 2px 2px 0px 0px;
	-webkit-border-radius: 2px 2px 0px 0px;*/
}
body.sticky_header .menu > li:first-child {
	margin-left: 120px;
	transition: margin 1s ease-in-out;
	-moz-transition: margin 1s ease-in-out;
	-webkit-transition: margin 1s ease-in-out;
	-o-transition: margin 1s ease-in-out;
}
/*body.sticky_header .menu li:first-child ul li {
	margin-left: unset;
}*/
.menu li li:first-child,
.menu li li:first-child a {
	border-radius: 0px;
	-moz-border-radius: 0px;
	-khtml-border-radius: 0px;
	-webkit-border-radius: 0px;
}

/* Bei nicht so hohen Screens soll der Header nicht sticky sein: */
@media all and (max-height: 600px) {
	#quadmenu.quadmenu-sticky-top {
		position: absolute !important;
	}
}

/* ende  - Navigation ############################################################################################################################ */

/* start - damit die Unterpunkte im Mouseover-Menü nach Links statt nach Rechts angezeigt werden ################################################# */

.navigation-main .menu li ul.sub-menu {
	position: absolute;
	top: 100%;
	right: 0;
	clip-path: inset(0 100% 0 0); /* komplett nach rechts ausgeblendet */
	-webkit-clip-path: inset(0 100% 0 0);
	opacity: 0;
	visibility: hidden;
	transition: clip-path 0.28s ease, opacity 0.18s ease;
	pointer-events: none;
	border: 1px solid #f0f0f0;
}

/* reveal */
.navigation-main .menu > li:hover > ul.sub-menu {
	clip-path: inset(0 0 0 0);
	-webkit-clip-path: inset(0 0 0 0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* ende  - damit die Unterpunkte im Mouseover-Menü nach Links statt nach Rechts angezeigt werden ################################################# */

/* start - Ein-Ausblenden der normalen/mobilen Navigation ######################################################################################## */

/* WPR Menu > Appearance > Display Menu From Width(px): 9000 */

@media all and (max-width: 900px) {
	.navigation-main {
		display: none !important;
	}
}
@media all and (min-width: var(--breite--header)) {
	/*#wprmenu_bar {
		display: none;
	}*/
	body.sticky_header .wp-block-heading-wrapper {
		margin-top: 80px !important;
	}
}

/* Tel-Links nur in Smartphones anzeigen: */
a[href^="tel"]:link,
a[href^="tel"]:visited, 
a[href^="tel"]:hover {
	pointer-events: none !important;
	text-decoration: none !important;
	cursor: unset !important;
}
a[href^="tel"]:hover {
	cursor: text;
}
/* Eingabegerät mit limitierter Präzision (z.B. Touch): */
@media (pointer: coarse) {
	a[href^="tel"]:link,
	a[href^="tel"]:visited,
	a[href^="tel"]:hover {
		pointer-events: unset !important;
		text-decoration: underline !important;
		cursor: pointer !important;
	}
	a[href^="tel"]:hover {
		text-decoration: none;
		cursor: pointer;
	}
}

/* ende  - Ein-Ausblenden der normalen/mobilen Navigation ######################################################################################## */

/* start - WPR Menu Farben ####################################################################################################################### */
/* Plugin "WP Responsive Menu", wp-responsive-menu von MagniGenie */
/* siehe auch in awi-solar.de */

/* Untermenüs immer offen! */
ul.sub-menu {
	display: block !important;
}

html body #wprmenu_menu_ul li.wprmenu_parent_item_li > ul {
	padding: 0;
	margin: 0;
}

.wprm-wrapper-outer {
	width: 100%;
	height: 100px;
	position: absolute;
	top: 0;
}
.wprm-wrapper {
	display: block !important;
	width: 100% !important;
	max-width: 1240px !important;
	height: 100px;
	margin: 0 auto !important;
}
#wprmenu_bar {
	background-color: transparent !important;
	position: relative !important;
	top: 40px;
	left: unset;
	right: unset;
	max-width: 70px;
	float: right;
	padding-right: 80px;
}
@media all and (max-width: 430px) {
	#wprmenu_bar {
		padding-right: 50px;
	}
}
#wprmenu_bar.active {
	top: 0;
	left: 0;
	right: unset;
	float: unset;
	position: absolute !important;
}

.wprmenu_bar .hamburger-inner, 
.wprmenu_bar .hamburger-inner::before, 
.wprmenu_bar .hamburger-inner::after {
	background: #5f5f5f !important;
}
.wprmenu_bar .hamburger--slider:hover .hamburger-box .hamburger-inner, 
.wprmenu_bar .hamburger--slider:hover .hamburger-box .hamburger-inner::before, 
.wprmenu_bar .hamburger--slider:hover .hamburger-box .hamburger-inner::after, 
.wprmenu_bar .hamburger-inner:hover, 
.wprmenu_bar .hamburger-inner:hover::before, 
.wprmenu_bar .hamburger-inner:hover::after {
	background: #eabe2a !important;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
	height: 2px;
}

#mg-wprm-wrap {
	background-color: #fbfbfb;
}

#mg-wprm-wrap li.menu-item-has-children ul.sub-menu a {
	font-size: 15px;
	text-transform: unset;
	font-weight: normal;
}

#mg-wprm-wrap ul#wprmenu_menu_ul li.menu-item a, 
div#mg-wprm-wrap ul>li:hover>span.wprmenu_icon, 
div#mg-wprm-wrap li.current-menu-item span.wprmenu_icon, 
div#mg-wprm-wrap ul li span.wprmenu_icon, 
div#mg-wprm-wrap ul li span.wprmenu_icon:hover, 
div#mg-wprm-wrap ul li span.wprmenu_icon:focus, 
div#mg-wprm-wrap ul li span.wprmenu_icon:active,
#mg-wprm-wrap li.current-menu-item > a {
	color: #5f5f5f !important;
}

#mg-wprm-wrap ul#wprmenu_menu_ul li.menu-item ul li a {
	padding-left: 30px !important;
}
#mg-wprm-wrap ul#wprmenu_menu_ul li.menu-item ul li ul li a {
	padding-left: 50px !important;
}

#mg-wprm-wrap ul#wprmenu_menu_ul li.menu-item.current_page_parent > a {
	color: #5f5f5f !important;
	background: #e6e6e6;
}

#mg-wprm-wrap li.current-menu-item > a {
	background: #e6e6e6;
}

ul#wprmenu_menu_ul li.menu-item.current_page_item > a, ul#wprmenu_menu_ul li.menu-item.current_page_parent > a, ul#wprmenu_menu_ul li.menu-item.current_page_parent li.current_page_item > a {
	color: #5f5f5f !important;
	text-decoration: underline;
}

#mg-wprm-wrap ul#wprmenu_menu_ul li.menu-item a:hover {
	background: #dcdcdc;
	color: #5f5f5f !important;
}

/* ende  - WPR Menu Farben ####################################################################################################################### */

/* ende  - Wrapper für alle Navigations-Einstellungen ############################################################################################ */

@media all and (max-width: 650px) {
	h1, .h1, h2, .h2,
	h1.wp-block-heading, h2.wp-block-heading {
		word-wrap: break-word;
		word-break: normal;
		hyphens: auto !important;
	}
}
@media all and (max-width: 450px) {
	h3, .h3, h4, .h4, h5, .h5, h6, .h6,
	h3.wp-block-heading, h4.wp-block-heading, h5.wp-block-heading, h6.wp-block-heading,
	blockquote, pre, p, td, img, ul, li {
		word-wrap: break-word;
		word-break: normal;
		hyphens: auto !important;
	}
	.divCompanyTable td,
	.divCompanyName a,
	.divCompanyName a:visited {
		word-wrap: unset !important;
		word-break: unset !important;
		hyphens: unset !important;
	}
}

/* start - buttons ############################################################################################################################### */

.wp-block-button__link, .wp-block-button__link:visited {
	color: #fff;
	background-color: #666;
	text-transform: unset;
	padding: 8px 20px;
}
.wp-block-button__link:active, .wp-block-button__link:focus, .wp-block-button__link:hover {
	color: #fff;
	background-color: #777;
}

/* ende  - buttons ############################################################################################################################### */

/* start - Datei Icons ########################################################################################################################### */

/*a[href$='.pdf'] {
	background: url(images/pdf.png) no-repeat 0 3px;
	padding-left: 20px;
	line-height: 16px;
}*/

/* ende  - Datei Icons ########################################################################################################################### */

hr.wp-block-separator {
	clear: both;
	display: block;
	height: 3px;
	border: none;
	padding-bottom: 30px;
	border-bottom: 3px solid #C5C6C6;
	margin-bottom: 30px;
}

figure.wp-block-table table,
figure.wp-block-table table td {
	border: none;
	width: unset;
}
figure.wp-block-table table td {
	padding-right: 15px;
}
figure.wp-block-table table td:last-child {
	padding-right: 0;
}

.captcha-image .cf7ic_instructions span {
	color: #564c4c !important;
	font-weight: 700;
}

/* start - Kontaktformular mit Plugin contact-form-7 ############################################################################################# */

.table-contact-form {
	width: 100%;
}
@media all and (max-width: 930px) {
	.table-contact-form td {
		display: block;
	}
}

label {
	display: inline-block;
	width: 98%;
	font-size: 16px;
	font-weight: 300;
}
label .required {
	font-size: 13px;
	font-weight: 300;
	opacity: 0.7;
}
.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap textarea {
	border-radius: unset;
	border: 1px solid #777777;
	background: transparent;
	padding: 0 10px;
	line-height: 35px;
}
.wpcf7-form-control-wrap input[type='text'],
.wpcf7-form-control-wrap input[type='email'],
.wpcf7-form-control-wrap textarea {
	width: 90%;
	max-width: 90%;
}
@media all and (max-width: 600px) {
	.wpcf7-form-control-wrap input[type='text'],
	.wpcf7-form-control-wrap input[type='email'],
	.wpcf7-form-control-wrap textarea {
		width: 100%;
		max-width: 100%;
	}
}
.wpcf7-form-control-wrap textarea {
	padding-top: 5px;
}
.wpcf7-form-control-wrap input:hover,
.wpcf7-form-control-wrap textarea:hover {
	background-color: #f0f0f0;
}
.wpcf7-form-control-wrap input:focus,
.wpcf7-form-control-wrap textarea:focus {
	border: 1px solid #817a7a;
	background-color: #f0f0f0;
	box-shadow: unset;
	outline: unset;
}
.wpcf7-form-control-wrap textarea {
	line-height: normal;
}

.wpcf7-form-control-wrap[data-name="your-message"] textarea {
	padding: 14px 0 5px 10px;
	border-radius: 5px;
	background: transparent;
	color: #333;
	/*text-transform: var(--formfieldtexttransform);
	font-weight: var(--formfieldfontweight);
	font-family: var(--global--font-primary);*/
	font-weight: 300;
	font-size: unset;
	letter-spacing: unset;
	line-height: unset;
}
.wpcf7-form-control-wrap textarea:focus {
	border-color: #a99d97;
	-webkit-box-shadow: unset !important;
	box-shadow: unset !important;
}

.wpcf7-form-control-wrap .wpcf7-checkbox .wpcf7-list-item {
	display: block;
}

.wpcf7-list-item {
	margin: 0;
}

form select, form select option, form textarea {
	border-color: #abb8c3;
}

.text-color-pflichtfeld {
	color: #aa0000;
	font-weight: normal;
}

.wpcf7 p {
	position: relative;
}
.wpcf7 p .fa,
.wpcf7 p .fas {
	position: absolute;
	color: #ccc;
	z-index: 1;
	font-size: 20px;
	top: 13px;
	left: 14px;
}

input[type="checkbox"][name^="acceptance-"] {
	padding: unset;
	margin-top: unset;
	line-height: unset;
	height: unset;
	width: unset;
	border-radius: unset;
	transition: unset;
	color: unset;
}

.wpcf7-form-control.wpcf7-submit {
	font-family: var(--global--font-primary) !important;
	font-weight: 400 !important;
	color: #fff !important;
	background-color: #666 !important;
	padding: 5px 20px 6px 20px !important;
	border: none !important;
	border-radius: 20px !important;
	line-height: 30px;
}
.wpcf7-form-control.wpcf7-submit:hover {
	background-color: #777 !important;
	border: none !important;
}

.captcha-image label > input + * {
	padding: 0;
}
.captcha-image label > input:checked + *, .captcha-image label > input:focus + * {
	padding: 0;
}

/* ende  - Kontaktformular mit Plugin contact-form-7 ############################################################################################# */

/* start - Bilder in Galerie quadratisch darstellen ############################################################################################## */

.wp-block-gallery .wp-block-image.size-large {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  width: 100%;
  max-width: 400px;
  /*border-radius: 8px;*/
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.wp-block-gallery .wp-block-image.size-large a {
  display: flex;
  width: 100%;
  height: 100%;
}

.wp-block-gallery .wp-block-image.size-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* Zoom-Effekt beim Hovern */
.wp-block-gallery .wp-block-image.size-large:hover img {
  transform: scale(1.02);
}

/* ende  - Bilder in Galerie quadratisch darstellen ############################################################################################## */

@media all and (max-width: 600px) {
	.wp-block-image .alignright {
		float: none;
		margin-left: 0;
	}
	.wp-block-image .alignleft {
		float: none;
		margin-right: 0;
	}
}

.clear {
	clear: both;
}

/* start - Am Blockelement auswählbar "Weite Breite" ########################################################################################### */

.wp-block-group.alignwide {
	max-width: var(--breite--content) !important;
	position: relative !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 0 110px 0 110px;
}
@media all and (max-width: 767px) {
	.wp-block-group.alignwide {
		padding: 0 50px 0 50px;
	}
	.alignfull .wp-block-group.alignwide {
		padding: 0 50px 0 50px;
	}
}
@media all and (max-width: 575px) {
	.wp-block-group.alignwide {
		padding: 0 30px 0 30px;
	}
	.alignfull .wp-block-group.alignwide {
		padding: 0 30px 0 30px;
	}
}
@media all and (max-width: 400px) {
	.wp-block-group.alignwide {
		padding: 0 10px 0 10px;
	}
	.alignfull .wp-block-group.alignwide {
		padding: 0 10px 0 10px;
	}
}

/* start - Am Blockelement auswählbar "Gesamte Breite" ########################################################################################### */

.alignfull {
	left: calc(-50vw + 50%);
	position: relative;
	max-width: 100vw;
	width: 100vw;
}

@media all and (max-width: 1269px) {
	/*.alignwide {
		margin: 0 30px 0 30px;
	}*/
}
@media all and (max-width: 575px) {
	/*.alignwide {
		margin: 0 15px 0 15px;
	}*/
}

/* ende  - Am Blockelement auswählbar "Gesamte Breite" ########################################################################################### */

.category-separator {
	display: block;
	width: 100%;
	clear: both;
	padding: 20px 0;
}

.pvc_stats {
	font-size: 10px;
	font-family: var(--global--font-primary);
	display: none;
}
.divFooter .pvc_stats {
	display: none;
}

@media all and (max-width: 781px) {
	figure.kontakt img {
		max-width: 30%;
		height: auto;
	}
}
@media all and (max-width: 700px) {
	figure.kontakt img {
		max-width: 35%;
		height: auto;
	}
}
@media all and (max-width: 600px) {
	figure.kontakt img {
		max-width: 40%;
		height: auto;
	}
}
@media all and (max-width: 500px) {
	figure.kontakt img {
		max-width: 45%;
		height: auto;
	}
}
@media all and (max-width: 400px) {
	figure.kontakt img {
		max-width: 50%;
		height: auto;
	}
}
@media all and (max-width: 350px) {
	figure.kontakt img {
		max-width: 70%;
		height: auto;
	}
}

.wp-block-group {
	clear: both;
}

.n2-ss-widget.n2-ss-control-bullet {
	--widget-offset: 25px !important;
}

a.cd-upload-btn {
	color: #777777 !important;
	pointer-events: unset !important;
	text-decoration: underline !important;
}
a.cd-upload-btn:hover {
	text-decoration: none !important;
	color: #564c4c !important;
}
#map a[href$="#"],
#map a[href$="#"]:link,
#map a[href$="#"]:visited,
#map a[href$="#"]:hover {
	pointer-events: unset;
	text-decoration: unset;
	color: #000;
}

.wp-element-caption {
	font-size: var(--global--font-size-sm);
}

mark {
	padding: 0;
}

ol.wp-block-list li {
	margin-bottom: 20px;
}

.radius10 {
	padding: 10px;
	border-radius: 10px;
}

.image-shadow img {
	box-shadow: 0px 2px 5px -1px #00000070;
	height: auto;
	display: flex;
	max-width: 100%;
	transition: box-shadow 0.2s ease;
}
/*Schatten bei den Grafiken mit Klasse image-shadow bei mouseover entfernen:*/
.image-shadow figure:hover a img,
figure.image-shadow:hover a img {
	box-shadow: unset !important;
}
figcaption.wp-element-caption {
	color: #5f6366;
}

.wp-block-nk-awb {
	padding: 0px 30px;
}
@media all and (max-width: 767px) {
	.wp-block-nk-awb {
		padding: 0px 0px;
	}
}

/* start - social-icons Startseite bei Kontaktaufnahme ########## */
.social-icons {
	display: flex;
	gap: 20px;
	padding: 15px;
}
.social-icons a {
	color: #5f5f5f; /* Deine Wunschfarbe */
	font-size: 28px;
	transition: transform 0.3s, color 0.3s;
}
.social-icons a:hover {
	color: #474B4F; /* Hellere Variation */
	transform: scale(1.1);
}
/* ende  - social-icons Startseite bei Kontaktaufnahme ########## */

.nk-awb-wrap:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('images/radius-f8fafc-10-top-left.png');
	background-repeat: no-repeat;
	width: 10px;
	height: 10px;
}
.nk-awb-wrap:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	background-image: url('images/radius-f8fafc-10-top-right.png');
	background-repeat: no-repeat;
	width: 10px;
	height: 10px;
}
.nk-awb-wrap .nk-awb-inner:before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	background-image: url('images/radius-f8fafc-10-bottom-left.png');
	background-repeat: no-repeat;
	width: 10px;
	height: 10px;
}
.nk-awb-wrap .nk-awb-inner:after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	background-image: url('images/radius-f8fafc-10-bottom-right.png');
	background-repeat: no-repeat;
	width: 10px;
	height: 10px;
}
.nk-awb-wrap .nk-awb-overlay {
	border-radius: 10px;
}
.wp-block-group.box-radius {
	border-radius: 10px;
}

.to-top a {
	width: 64px;
	height: 64px;
	display: inline-block;
}
.to-top {
	/*display: none;*/
	position: fixed;
	bottom: -60px;
	right: 23px;
	width: 64px;
	height: 64px;
	background-image: url('images/to-top.png');
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	z-index: 999;
}
.to-top:hover {
	background-image: url('images/to-top-hover.png');
}

/* start - Heller Hintergrund > Plugin Lightweight Accordion Von Andy Feliciotti, lightweight-accordion ########################################## */

/*
Zeigt Plus und bei mouseover ein Minus, funktioniert auch wenn die Accordions verschachtelt sind!
Es gibt auch dunkle Accordions: Klasse="back-dark" direkt im Accordion
Benutzt in:
luegensteinmuseum-wuerzburg.com
rsagrar.de
*/

/* Normal bzw. heller Hintergrund */
:root {
	--accordion-back-light-color-background: #666;/* var(--accordion-back-light-color-background) */
	--accordion-back-light-color-background-title: #888;/* var(--accordion-back-light-color-background-title) */
	--accordion-back-light-color-border-and-title: #fcfcfc;/* var(--accordion-back-light-color-border-and-title) */
	--accordion-back-light-color-content: #5f5f5f;/* var(--accordion-back-light-color-content) */
}
.lightweight-accordion {
	margin: 0;
}
.lightweight-accordion > details {
	margin: 0 0 20px 0;
}

/* Titel-Bereich */
.lightweight-accordion > details > summary.lightweight-accordion-title {
	background-color: var(--accordion-back-light-color-background);
	color: var(--accordion-back-light-color-border-and-title);
	border-radius: 10px;
	padding: 10px 2px 10px 2px;
	position: relative;
	padding-left: 34px; /* Platz für das Plus/Minus-Symbol links */
	cursor: pointer;
}

/* Standard-Marker ausblenden */
.lightweight-accordion > details > summary.lightweight-accordion-title::-webkit-details-marker {
	display: none;
}
.lightweight-accordion > details > summary.lightweight-accordion-title::marker {
	content: '';
}

/* Hover-Farbe */
.lightweight-accordion > details > summary.lightweight-accordion-title:hover {
	background-color: var(--accordion-back-light-color-background-title);
}

.lightweight-accordion > details > summary.lightweight-accordion-title span {
	font-size: 22px;
}

/* Wenn geöffnet */
.lightweight-accordion > details[open] > summary.lightweight-accordion-title {
	background: var(--accordion-back-light-color-background-title) !important;
	border-bottom: none;
	border-bottom-left-radius: unset;
	border-bottom-right-radius: unset;
}

/* Plus/Minus-Icon als zwei Balken */

/* Waagerechter Balken (bleibt immer gleich – das Minus) */
.lightweight-accordion > details > summary.lightweight-accordion-title::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 50%;
	width: 14px;
	height: 2px;
	background-color: currentColor;
	transform: translateY(-50%);
}

/* Senkrechter Balken (dreht sich weg) */
.lightweight-accordion > details > summary.lightweight-accordion-title::after {
	content: "";
	position: absolute;
	left: 20px;
	top: 50%;
	width: 2px;
	height: 14px;
	background-color: currentColor;
	transform-origin: center;
	transform: translateY(-50%) rotate(0deg); /* Plus */
	transition: transform 0.2s ease;
}

/* Beim Hover und im offenen Zustand: senkrechter Balken drehen -> Minus */
.lightweight-accordion > details > summary.lightweight-accordion-title:hover::after,
.lightweight-accordion > details[open] > summary.lightweight-accordion-title::after {
	transform: translateY(-50%) rotate(90deg); /* wird zur waagerechten Linie */
}

/* Body-Bereich */
.lightweight-accordion > details > .lightweight-accordion-body {
	border: 1px solid var(--accordion-back-light-color-background-title);
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.lightweight-accordion > details > .lightweight-accordion-body,
.lightweight-accordion > details > .lightweight-accordion-body a,
.lightweight-accordion > details > .lightweight-accordion-body a:visited {
	color: var(--accordion-back-light-color-content);
	background-color: transparent;
}

.lightweight-accordion > details > .lightweight-accordion-body a:hover {
	opacity: 0.8;
}

/* ende  - Heller Hintergrund > Plugin Lightweight Accordion Von Andy Feliciotti, lightweight-accordion ########################################## */

/* start - Dunkler Hintergrund > Plugin Lightweight Accordion Von Andy Feliciotti, lightweight-accordion ######################################### */

:root {
	--accordion-back-dark-color-border-and-title: #888;/* var(--accordion-back-dark-color-border-and-title) */
	--accordion-back-dark-color-content: #fcfcfc;/* var(--accordion-back-dark-color-content) */
}
.lightweight-accordion.back-dark {
	margin: 0;
}
.lightweight-accordion.back-dark > details {
	margin: 0 0 20px 0;
}

/* Titel-Bereich */
.lightweight-accordion.back-dark > details > summary.lightweight-accordion-title {
	background-color: transparent;
	color: var(--accordion-back-dark-color-content);
	border-radius: 10px;
	border: 1px solid var(--accordion-back-dark-color-border-and-title);
	padding: 10px 2px 10px 2px;
	position: relative;
	padding-left: 34px; /* Platz für das Plus/Minus-Symbol links */
	cursor: pointer;
}

/* Standard-Marker ausblenden */
.lightweight-accordion.back-dark > details > summary.lightweight-accordion-title::-webkit-details-marker {
	display: none;
}
.lightweight-accordion.back-dark > details > summary.lightweight-accordion-title::marker {
	content: '';
}

/* Hover-Farbe */
.lightweight-accordion.back-dark > details > summary.lightweight-accordion-title:hover {
	background-color: var(--accordion-back-dark-color-border-and-title);
}

.lightweight-accordion.back-dark > details > summary.lightweight-accordion-title span {
	font-size: 22px;
}

/* Wenn geöffnet */
.lightweight-accordion.back-dark > details[open] > summary.lightweight-accordion-title {
	background: var(--accordion-back-dark-color-border-and-title) !important;
	border-bottom: none;
	border-bottom-left-radius: unset;
	border-bottom-right-radius: unset;
}

/* Plus/Minus-Icon als zwei Balken */

/* Waagerechter Balken (bleibt immer gleich – das Minus) */
.lightweight-accordion.back-dark > details > summary.lightweight-accordion-title::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 50%;
	width: 14px;
	height: 2px;
	background-color: currentColor;
	transform: translateY(-50%);
}

/* Senkrechter Balken (dreht sich weg) */
.lightweight-accordion.back-dark > details > summary.lightweight-accordion-title::after {
	content: "";
	position: absolute;
	left: 20px;
	top: 50%;
	width: 2px;
	height: 14px;
	background-color: currentColor;
	transform-origin: center;
	transform: translateY(-50%) rotate(0deg); /* Plus */
	transition: transform 0.2s ease;
}

/* Beim Hover und im offenen Zustand: senkrechter Balken drehen -> Minus */
.lightweight-accordion.back-dark > details > summary.lightweight-accordion-title:hover::after,
.lightweight-accordion.back-dark > details[open] > summary.lightweight-accordion-title::after {
	transform: translateY(-50%) rotate(90deg); /* wird zur waagerechten Linie */
}

/* Body-Bereich */
.lightweight-accordion.back-dark > details > .lightweight-accordion-body {
	border: 1px solid var(--accordion-back-dark-color-border-and-title);
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.lightweight-accordion.back-dark > details > .lightweight-accordion-body,
.lightweight-accordion.back-dark > details > .lightweight-accordion-body a,
.lightweight-accordion.back-dark > details > .lightweight-accordion-body a:visited {
	color: var(--accordion-back-dark-color-content);
	background-color: transparent;
}

.lightweight-accordion.back-dark > details > .lightweight-accordion-body a:hover {
	opacity: 0.8;
}

.lightweight-accordion.back-dark ul,
.lightweight-accordion.back-dark ol,
.lightweight-accordion.back-dark li {
	color: var(--accordion-back-dark-color-content);
}

/* ende  - Dunkler Hintergrund > Plugin Lightweight Accordion Von Andy Feliciotti, lightweight-accordion ######################################### */

.divFooterWrapper {
	width: 100%;
	background-color: #fff;
	clear: both;
}
.divFooter {
	width: 100%;
	max-width: var(--breite--footer);
	margin: 0 auto;
	padding-top: 60px;
}
.divFooter .wp-block-group.alignfull {
	/*padding-top: 20px;*/
}

.footer-group {
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	gap: 15px;
}
/* Die p-Tags ohne Zeilenumbruch, aber mit Umbruch bei zu kleinen Bildschirmen */
.footer-group p {
	display: inline-block;
	white-space: nowrap;
	margin: 0;
	padding: 0 10px 10px 0;
	background: rgba(255, 255, 255, 0.1);
}
.footer-group p:not(.copyright):after {
	content: '|';
	padding-left: 10px;
}
.footer-group a,
.footer-group a:visited {
	color: #817a7a;
	text-decoration: none;
}
.footer-group a:hover {
	text-decoration: underline;
}
.footer-group p.copyright {
	margin-bottom: 35px;
}
.footer-group p:not(.copyright):after,
.footer-group p.copyright {
	color: #bababa;
}
@media (max-width: 550px) {
	.footer-group p.copyright {
		margin-bottom: 130px;
	}
}

.wp-block-group.footer-gruppe-kontakt {
	border-top: 2px solid #49745c;
	padding-top: 30px !important;
	margin-top: 30px !important;
	position: relative;
}
.wp-block-group.footer-gruppe-kontakt::before {
	content: 'Kontakt';
	position: absolute;
	top: -34px;
	left: 0;
	color: #fff;
	background-color: #49745c;
	line-height: 30px;
	padding: 1px 20px 1px 10px;
	border-top-left-radius: 5px;
	border-top-right-radius: 30px;
}
.wp-block-group.footer-gruppe-kontakt p {
	display: inline-block;
}
.wp-block-group.footer-gruppe-kontakt p::after {
	content: ', ';
	margin-right: 10px;
}
.wp-block-group.footer-gruppe-kontakt p:last-child::after {
	content: '';
	margin-right: 0;
}
@media (max-width: 1240px) {
	.wp-block-group.footer-gruppe-kontakt::before {
		left: 30px;
	}
	.wp-block-group.footer-gruppe-kontakt p {
		display: block;
	}
	.wp-block-group.footer-gruppe-kontakt p::after {
		content: '';
		margin-right: 0;
	}
}
.wp-block-group.footer-gruppe-links {
	border-top: 2px solid #49745c;
	padding-top: 30px !important;
	margin-top: 30px !important;
}
.wp-block-group.footer-gruppe-links p {
	font-size: 14px;
}

.wp-block-group.footer-gruppe-oeffnungszeiten {
	position: relative;
}
.wp-block-group.footer-gruppe-oeffnungszeiten p {
	display: inline-block;
}
.wp-block-group.footer-gruppe-oeffnungszeiten p::after {
	content: ', ';
	margin-right: 10px;
}
.wp-block-group.footer-gruppe-oeffnungszeiten p:first-child::after,
.wp-block-group.footer-gruppe-oeffnungszeiten p:last-child::after {
	content: '';
}
@media (max-width: 700px) {
	.wp-block-group.footer-gruppe-oeffnungszeiten {
		margin-top: 30px !important;
	}
	.wp-block-group.footer-gruppe-oeffnungszeiten p:first-child {
		font-weight: bold;
	}
	.wp-block-group.footer-gruppe-oeffnungszeiten p {
		display: block;
	}
	.wp-block-group.footer-gruppe-oeffnungszeiten p::after {
		content: '';
	}
}

/* Responsives Verhalten */
@media (max-width: 600px) {
	.footer-group {
		flex-direction: column;
		align-items: left;
	}
	.footer-group p {
		white-space: normal;
		text-align: left;
		width: 100%;
		margin-bottom: 20px;
	}
}

.special-background-light {
  position: relative;
  overflow: hidden;
}
.special-background-light::before {
	content: '';
	position: absolute;
	top: 0;
	right: -30%;
	width: 200%;
	height: 100%;
	border-radius: 0 0 100% 60%;
	background: #e8e8e8;
	z-index: -1;
}
@media all and (max-width: 781px) {
	.special-background-light::before {
		right: -90%;
		width: 400%;
		border-radius: 0 0 100% 60%;
	}
}
@media all and (max-width: 400px) {
	.special-background-light::before {
		right: -150%;
		width: 600%;
	}
}
.special-background-dark {
  position: relative;
  overflow: hidden;
}
.special-background-dark::before {
	content: '';
	position: absolute;
	top: 0;
	right: -30%;
	width: 200%;
	height: 100%;
	border-radius: 0 0 100% 60%;
	background: #666666;
	z-index: -1;
}
@media all and (max-width: 781px) {
	.special-background-dark::before {
		right: -90%;
		width: 400%;
		border-radius: 0 0 100% 60%;
	}
}
@media all and (max-width: 400px) {
	.special-background-dark::before {
		right: -150%;
		width: 600%;
	}
}

.divContent a.active-anchor {
	color: rgb(127, 0, 0);
	opacity: 0.6;
}

.template-xtra #divContentWrapper #divContent {
	margin-bottom: 50px;
}

div.tel-no-big,
div.tel-no-big p,
div.tel-no-big a,
div.tel-no-big a:visited {
	font-size: 22px;
}

@media all and (max-width: 781px) {
	:where(.wp-block-columns.is-layout-flex) {
		gap: 0;
	}
}

ul.ul-no-margin-before {
	margin-top: -20px;
}
.no-margin-bottom {
	margin-bottom: 0 !important;
}
.no-padding-bottom,
h1.no-padding-bottom,h2.no-padding-bottom,h3.no-padding-bottom,h4.no-padding-bottom,h5.no-padding-bottom,h6.no-padding-bottom,
h1.no-padding-bottom.wp-block-heading,h2.no-padding-bottom.wp-block-heading,h3.no-padding-bottom.wp-block-heading,h4.no-padding-bottom.wp-block-heading,h5.no-padding-bottom.wp-block-heading,h6.no-padding-bottom.wp-block-heading,
.h1.no-padding-bottom,.h2.no-padding-bottom,.h3.no-padding-bottom,.h4.no-padding-bottom,.h5.no-padding-bottom,.h6.no-padding-bottom {
	padding-bottom: 0 !important;
}
.no-padding-top,
h1.no-padding-top,h2.no-padding-top,h3.no-padding-top,h4.no-padding-top,h5.no-padding-top,h6.no-padding-top,
h1.no-padding-top.wp-block-heading,h2.no-padding-top.wp-block-heading,h3.no-padding-top.wp-block-heading,h4.no-padding-top.wp-block-heading,h5.no-padding-top.wp-block-heading,h6.no-padding-top.wp-block-heading,
.h1.no-padding-top,.h2.no-padding-top,.h3.no-padding-top,.h4.no-padding-top,.h5.no-padding-top,.h6.no-padding-top {
	padding-top: 0 !important;
}
.padding-5 {
	padding: 5px;
}
.white-space-nowrap {
	white-space: nowrap !important;
}

@media all and (max-width: 781px) {
	.reihenfolge-1 {
		order: 1;
	}
	.reihenfolge-2 {
		order: 2;
	}
}

p.button-tel {
	margin: 0;
	padding: 0;
	white-space: nowrap;
}
p.button-tel a,
p.button-tel a:visited {
	background-color: #666;
	padding: 10px 20px;
	color: #fff;
	border-radius: 9999px;
	box-shadow: none;
	text-decoration: none !important;
	font-size: 1.125em;
}
@media (pointer: coarse) {
	p.button-tel a[href^="tel"]:link, 
	p.button-tel a[href^="tel"]:visited {
		text-decoration: none !important;
	}
}
@media all and (max-width: 450px) {
	table.table-form-send-tel td {
		display: block;
		width: 100%;
		min-height: 80px;
	}
}

.center {
	text-align: center;
}

.startseite-slider-text {
}


.gruppe-kategorien > .wp-block-group__inner-container {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
:root {
	--hoehe-breite--categorie-element: 206px;
	--hover-backcolor--categorie-element: #f0f0f0;/*#eabe2a*/
}
.wp-block-lazyblock-cat-element {
	width: calc(var(--hoehe-breite--categorie-element) + 10px);
	height: calc(var(--hoehe-breite--categorie-element) + 10px);
	margin: 0 20px 20px 0;
	padding: 4px;
	border: 1px solid #ccc;
	display: inline-block;
	float: left;
}
.cat_wrapper {
	width: var(--hoehe-breite--categorie-element);
	height: var(--hoehe-breite--categorie-element);
	display: inline-block;
	border: 1px solid #f0f0f0;
	position: relative;
	overflow: hidden;
}
.cat_wrapper {
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
.cat_text_link {
	position: absolute;
	top: 0px; /* Oben mit 5px Abstand */
	left: 0px;
	right: 25px;
	background-color: #fff;
	padding: 0; /* Mehr Platz rechts für den Pfeil */
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	z-index: 2;
	transition: 0.2s ease-in-out;
}
.cat_text_link::after {
	content: '';
	position: absolute;
	right: -15px;
	top: 0;
	width: 15px;
	height: 100%; /* Gleiche Höhe wie der Button */
	background-color: #fff;
	clip-path: polygon(0 0, 100% 50%, 0 100%); /* Spitze mit 35 Grad */
}
.cat_text_link:hover {
	background-color: var(--hover-backcolor--categorie-element);
}
.cat_text_link:hover::after {
	background-color: var(--hover-backcolor--categorie-element);
}
.cat_text_link a {
	display: block;
	padding: 5px;
	width: 100%;
	text-decoration: none;
	color: #49745c;
}
.cat_wrapper:hover .cat_text_link,
.cat_wrapper:hover .cat_text_link::after,
.wp-block-lazyblock-cat-element:hover {
	background-color: var(--hover-backcolor--categorie-element);
}
.cat_img img {
	/*transition: 0.2s ease-in-out;*/ /* Transition auf Normalzustand setzen */
}
cat_wrapper .cat_img img {
	z-index: 0;
}
.cat_wrapper:hover .cat_img img {
}
.wp-block-group__inner-container .cat_img {
    position: relative;
    overflow: hidden; /* Wichtig für den Shine-Effekt */
    display: inline-block; /* Stellt sicher dass der Container nur Bildgröße hat */
}

.wp-block-group__inner-container .cat_img a {
    display: block; /* Stellt sicher dass der Link den Container füllt */
}

.wp-block-group__inner-container .cat_img img {
    display: block;
    position: relative; /* Bild bekommt eigene Positionierungsebene */
    z-index: 1; /* Bild unter dem Shine-Effekt */
}

.wp-block-group__inner-container .cat_img::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2; /* Muss höher sein als das Bild */
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 100%
    );
    transform: skewX(-25deg);
    pointer-events: none; /* Verhindert dass der Effekt Klicks blockiert */
}

.wp-block-group__inner-container .cat_img:hover::before {
    animation: shine 0.75s;
}

@keyframes shine {
    100% {
        left: 125%;
    }
}

/* Slide-Text - zunächst ausgeblendet unterhalb des Containers */
.cat_slide_text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;                  /* dockt am unteren Rand an */
    transform: translateY(100%);/* unsichtbar nach unten verschoben */
    transition: transform 280ms cubic-bezier(.2,.9,.2,1), opacity 200ms ease;
    opacity: 0;
    box-sizing: border-box;
    padding: 10px 12px;
    background: rgba(0,0,0,0.6);/* Lesbarkeit - anpassen */
    color: #fff;
    font-size: 14px;
    line-height: 1.3;
    max-height: 50%;            /* optional: begrenzen, damit es nie zu groß wird */
    overflow: auto;             /* falls Text länger ist */
    z-index: 2;                 /* über dem Bild, unter dem Top-Label */
    pointer-events: none;       /* verhindert Klicks, wenn es versteckt ist */
    will-change: transform, opacity;
}

/* beim Hovern hochsliden und sichtbar machen */
.cat_wrapper:hover .cat_slide_text {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
@media (pointer: coarse) {
	.cat_wrapper .cat_slide_text {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}
}

/* sicherstellen dass der obere Link über dem Slidetext bleibt */
.cat_text_link {
    z-index: 3; /* erhöht, damit der Top-Button oben bleibt */
}

/* start - Slider Euro-Zeichen rechts oben (Slider) ############################################################################################## */

/*:root {
  --button-total-width: 140px;
  --button-visible-part: 50px;
  --button-height: 45px;
}
.sticky-sidebar-button-foerderung {
	display: none;
}
body.foerderung .sticky-sidebar-button-foerderung {
	display: block;
	background-image: url('images/layout/icon-euro-mit-sternen912x992.png');
	width: var(--button-total-width);
	height: var(--button-height);
	position: fixed;
	top: 50px;
	right: calc(-1 * (var(--button-total-width) - var(--button-visible-part)));
	white-space: nowrap;
	background-repeat: no-repeat;
	background-position: top left;
	background-size: contain;
	line-height: 20px;
	font-weight: bold;
	color: #49745c;
	transition: right 0.3s ease;
	z-index: 1000;
	padding: 0;
}
@media (max-width: 940px) {
	body.foerderung .sticky-sidebar-button-foerderung {
		position: absolute;
		top: 620px;
	}
}
@media (max-width: 767px) {
	body.foerderung .sticky-sidebar-button-foerderung {
		top: 420px;
	}
}
@media (max-width: 479px) {
	body.foerderung .sticky-sidebar-button-foerderung {
		top: 370px;
	}
}
body.foerderung .sticky-sidebar-button-foerderung:hover {
  right: 0;
}
@media (pointer: coarse) {
	body.foerderung .sticky-sidebar-button-foerderung {
	right: 0;
	}
}
body.foerderung .sticky-sidebar-button-foerderung a.full-size-link {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  padding: 5px 0 0 50px;
  box-sizing: border-box;
}
body.foerderung .sticky-sidebar-button-foerderung a.full-size-link:hover {
  text-decoration: underline;
  color: inherit;
  background-color: transparent;
}
body.foerderung .sticky-sidebar-button-foerderung span {
  display: block;
  pointer-events: none;
}*/

/* ende  - Slider Euro-Zeichen rechts oben (Slider) ############################################################################################## */

/* start - Slider Euro-Zeichen rechts oben ####################################################################################################### */

:root {
  --button-total-width: 140px;
  --button-visible-part: 50px;
  --button-height: 45px;
}
.sticky-sidebar-button-foerderung {
	display: none;
}

body.foerderung .buttons {
	width: 100%;
	max-width: 1240px;
	height: calc(var(--button-height) + 5px);
	margin: 0 auto;
	padding: 5px 30px 0 30px;
	position: absolute;
}

body.foerderung .sticky-sidebar-button-foerderung {
	display: inline-block;
	background-image: url('images/layout/icon-euro-mit-sternen912x992.png');
	width: var(--button-total-width);
	height: var(--button-height);
	position: relative;
	white-space: nowrap;
	background-repeat: no-repeat;
	background-position: top left;
	background-size: contain;
	line-height: 20px;
	font-weight: bold;
	color: #49745c;
	transition: right 0.3s ease;
	z-index: 1000;
	padding: 0;
}
@media (max-width: 600px) {
	body.foerderung .buttons {
		padding-left: 10px;
	}
}
@media (max-width: 400px) {
	body.foerderung .buttons {
		padding-left: 5px;
	}
}
body.foerderung .sticky-sidebar-button-foerderung a.full-size-link {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  padding: 5px 0 0 50px;
  box-sizing: border-box;
  text-decoration: underline;
  color: inherit;
  background-color: transparent;
}
body.foerderung .sticky-sidebar-button-foerderung a.full-size-link:hover {
  text-decoration: none;
  color: inherit;
  background-color: transparent;
}
body.foerderung .sticky-sidebar-button-foerderung span {
  display: block;
  pointer-events: none;
}

/* ende  - Slider Euro-Zeichen rechts oben ####################################################################################################### */

.wp-block-buttons.form a.wp-block-button__link::after {
	content: ' ➨ 🖆';
}
.wp-block-buttons.form:hover a.wp-block-button__link::after {
	color: #f3c418;
}

/* start - Galerie-Block in Bilder-Slider umwandeln ############################################################################################## */

:root {
	--galerie-block-max-breite: 800px;/* var(--galerie-block-max-breite) */
	--galerie-block-max-hoehe: 300px;/* var(--galerie-block-max-hoehe) */
}

/* Jedes Slide und das Bild füllen den kompletten Wrapper aus */
.wp-block-gallery.slider .slides figure,
.wp-block-gallery.slider .slides img {
  width: 100% !important;
  height: 100% !important;
}

/* Bild skaliert proportional und füllt den Bereich – Überschüsse werden abgeschnitten */
.wp-block-gallery.slider .slides img {
  object-fit: cover !important;
}

/* Galerie‑Container: responsive Breite mit Maximalwert */
.wp-block-gallery.slider {
  position: relative;
  width: 100% !important;
  max-width: var(--galerie-block-max-breite) !important; /* hier eigene Maximalbreite definieren */
  overflow: hidden;
  margin: 0 auto;
}

/* Liste der Bilder: nebeneinander anordnen */
.wp-block-gallery.slider .slides {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  transition: transform 0.5s ease; /* Standard‑Animation */
}

/* Jedes Bild nimmt die volle Breite des Containers ein */
.wp-block-gallery.slider .slides figure {
  flex: 0 0 100%;
  margin: 0;
  display: block;
  text-align: center;
}

/* Bilder beschränken und zuschneiden */
.wp-block-gallery.slider img {
  width: 100% !important;
  height: auto !important;
}
.wp-block-gallery.slider .slides figure,
.wp-block-gallery.slider img {
  max-height: var(--galerie-block-max-hoehe) !important; /* eigene Maximalhöhe */
}

/* Navigationspfeile */
.slider-nav {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none; /* damit Klicks nur auf Pfeile gehen */
}

.slider-nav span {
  background: rgba(0,0,0,0.5);
  color: #fff;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 26px;
  cursor: pointer;
  pointer-events: all;
  user-select: none;
}

.wp-block-gallery.slider figure.wp-block-image:not(#individual-image) a,
.wp-block-gallery.slider figure.wp-block-image:not(#individual-image) img {
	/*flex: unset !important;
	height: unset !important;
	object-fit: none !important;
	width: unset !important;*/
}

/* ende  - Galerie-Block in Bilder-Slider umwandeln ############################################################################################## */