
@font-face {
	font-family: "archivo-400";
	src: url("../fonts/archivo-v19-latin-400.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "archivo-500";
	src: url("../fonts/archivo-v19-latin-500.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "archivo-700";
	src: url("../fonts/archivo-v19-latin-700.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "archivo-expanded-medium";
	src: url("../fonts/ArchivoExpanded-Regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "archivo-expanded";
	src: url("../fonts/archivo-expanded-500.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "archivo-expanded-800";
	src: url("../fonts/archivo-expanded-800.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "amatiksymbols";
	src: url("../fonts/amatiksymbols.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

:root {
	--nav-height: 70px;

	--font-h1: clamp(2.5rem, 1.5909rem + 4.5455vw, 8.75rem); /* 40 - 140px */
	--font-h1-hero: clamp(3.125rem, 2.5159rem + 3.0455vw, 7.3125rem); /* 50 - 117px */
    --font-h1-big: clamp(4.375rem, 2.2841rem + 10.4545vw, 18.75rem); /* 70 - 300px */
	
    --font-h2: clamp(1.875rem, 1.6023rem + 1.3636vw, 3.75rem); /* 30 - 60 */
	--font-h2-timeline: clamp(4.375rem, 3.0114rem + 6.8182vw, 13.75rem); /* 70 - 220px */
	--font-h2-textblock: clamp(1.5rem, 1.4091rem + 0.4545vw, 2.125rem); /* 22 - 35px */
	--font-h3: clamp(1.25rem, 0.9955rem + 1.2727vw, 3rem); /*20 - 48px */
	--font-h4: clamp(0.8125rem, 0.8rem + 0.0625vw, 0.875rem); /*14px*/
	--font-menu: clamp(1rem, 0.9636rem + 0.1818vw, 1.25rem);  /*16 - 20px*/

	--font-btn: clamp(1rem, 0.9636rem + 0.1818vw, 1.25rem);	/* 16 - 20px */
	--font-p-small: clamp(1rem, 0.9636rem + 0.1818vw, 1.25rem);	/* 16 - 20px */
	--font-p: clamp(1.25rem, 1.2136rem + 0.1818vw, 1.5rem); /* 20 - 24px*/
	--font-p-cite: clamp(1.5rem, 1.1727rem + 1.6364vw, 3.75rem); /* 25 - 60px */
    --font-p-big: clamp(1.25rem, 1.1136rem + 0.6818vw, 2.1875rem); /* 20 - 35px */
	
	--clr-schwarz: #1D1D1B;
	--clr-weiss: #ffffff;
	--clr-blau-dunkel: #002D4E;
	--clr-gruen-dunkel: #006F76;
	--clr-gruen-hell: #76B72E;
	--clr-cyan: #93D5F6;
	--clr-cyan-dunkel: #00A0CB;
	--clr-gelb: #FFD900;
	--clr-grau: #D9D9D9;

	--swiper-pagination-color: var(--clr-cyan-dunkel);

	--padder: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
    --gapper: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
	--letter-spacer: 0.05em;
    --letter-spacer-neg: -.125em;
    --bs-gutter-x: 3rem;
	--delay: .1s;

	--bar-width: 30px;
	--bar-height: 2px;
	--hamburger-gap: 6px;
	--burger-timing: .3s ease-in-out;
	--hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);

	--input-item-dummy-checkbox-radius: 0;

	transition-behavior: allow-discrete;
	interpolate-size: allow-keywords;

	--font: archivo-400;
}

/* Maptemp */

#map {
	z-index: 1;
}

.mapalternative .container.full:has(.intro) {
	position: fixed;
	width: 100%;
	z-index: 2;
	bottom: var(--padder);
	left: 0;
}

.mapalternative .container.full:has(.intro) .intro {
	padding-top: 0;
}

.mapalternative .container.full:has(.intro) .switcher {
	padding-bottom: 0;
}

.moduletable.filtermodul {
	z-index: 3;
	padding-top: 0;
	max-width: 300px;
}

.moduletable.filtermodul:first-child {
	padding-top: calc(2*var(--padder));
}

.mapalternative .moduletable.filtermodul {
	padding-top: 0;
}

.mapalternative .introtext h1, .mapalternative .introtext p {
	display: none;
}

.mapalternative .grid.g-14 {
	padding-top: 0;
	padding-inline: calc(2*var(--padder));
	padding-right: 0;
}

.filtertoggle {
	display: none;
}

@media (max-width: 1080px) {

.moduletable.filtermodul {
	padding-top: 0;
	max-width: 100%;
}	

.filtertoggle {
	cursor: pointer;
	display: block;
	position: fixed;
	background-color: var(--clr-weiss);
	border: 1px solid;
	padding: 0 0.5em;
	place-content: center;
	margin: 0;
	line-height: 2.5;
	left: var(--padder);
    z-index: 10;
}	

.filtertoggle.active {
	position: fixed;
	/* border: 0px solid; */
	/* padding: 0; */
	/* line-height: 1; */
	z-index: 9999999;
	top: var(--padder);
	border: 0;
  	text-indent: -99999px;
	background: transparent;
}

.filtertoggle::before, .filtertoggle.active::after {
	content: 'L';
	background-color: transparent;
	/* background-image: url(../images/filter.svg); */
	width: 20px;
	height: 15px;
	display: inline-flex;
	margin-right: 0.5rem;
	translate: 0;
	background-size: cover;
	font-family: amatiksymbols;
	font-size: 20px;
	line-height: 0;
}

.filtertoggle.active::before {
	content: '';
}

.filtertoggle.active::after {
	content: '×';
	background-color: transparent;
	background-image: none;
	width: 25px;
	height: 25px;
	display: inline-flex;
	margin-right: .5rem;
	translate: 0 0px;
	background-size: cover;
	font-size: 30px;
	right: calc(.5*var(--padder));
	top: 0;
	position: fixed;
	z-index: 1;
	line-height: 2;
	text-indent: 0;
}

.mapalternative .grid.g-14 {
	padding-inline: 0;
}

.mapalternative .moduletable.filtermodul {
	padding-inline: var(--padder);
}

.moduletable.filtermodul {
	position: relative;
	z-index: 1111111;
	background-color: var(--clr-weiss);
	width: 100%;
	top: 0;
	left: 0;
	height: auto;
	padding-block: calc(2.5*var(--padder));
	overflow-y: auto;
	padding-inline: var(--padder);
	padding-bottom: calc(1*var(--padder));
}

.filterswrapper.active {
	background: var(--clr-weiss);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	height: 120dvh;
	padding-top: calc(2*var(--padder));
}

body:has(.filterswrapper.active) header {
	display: none;
}

}

/* Suche */

.moduletable.filtermodul h2 {
	font-size: var(--font-p-small);
}

.mod-finder__search.input-group {
	height: 44px;
	margin-bottom: 1.5em;
}

.mod-finder__search .awesomplete {
	display: inline-block;
	position: relative;
	height: 100%;
}

.mod-finder__search input {
	height: 100%;
	padding: .25rem;
	margin-right: .5rem;
	border-radius: 0;
	border: 1px solid;
}

.mod-finder__search .btn.btn-primary {
	width: 44px;
	text-indent: -999px;
	padding: 0;
	border-width: 1px;
	height: 100%;
	display: inline-block;
}

.mod-finder__search .icon-search.icon-white::before {
	font-family: amatiksymbols;
	content: 'L';
	color: var(--clr-blau-dunkel);
	position: absolute;
	width: 44px;
	height: 44px;
	display: block;
	text-indent: 0;
	top: 0;
	align-content: center;
}

.mod-finder__search .icon-search.icon-white:hover::before {
	color: var(--clr-blau-dunkel);
}

.mod-finder.js-finder-searchform.form-search .finder {
	display: none;
}

@media (max-width: 1080px) {
	.mod-finder__search.input-group {
		margin-bottom: 0;
	}
}

/* Anmeldeformular */

.convertforms {
	margin: auto;
	padding-bottom: calc(1*var(--padder));
	width: 100%;
	max-width: 1920px;
	background-color: var(--clr-weiss);
}

.convertforms .cf-content-wrap, .convertforms .cf-form-wrap {
	padding: var(--padder);
	padding-block: 0;
}

main:has(.convertforms) .container.full.textpage .container.medium.content {
	padding-bottom: var(--padder);
}

.convertforms.cf-success .cf-response {
	background-color: transparent;
	display: block;
	color: var(--clr-schwarz);
}

.convertforms .cf-fields {
	max-width: 480px;
	margin: auto;
}

.convertforms blockquote p::before, .convertforms blockquote p::after {
	content: '';
} 

/* Filter */

.filterwrapper {
	min-width: 240px;
}

.switcher .btn, .switcher .btn.inv:hover {
	border: 1px solid var(--clr-btn-bg);
	padding-right: 20px;
	font-family: archivo-400;
	font-size: 20px;
	padding-left: 2em;
}

.mod-jfilters_filters {
	--filter-header-hover-background: transparent;
	--list-item-line-height: 1.8em;
	--input-item-dummy-size: 1.3em;
	--input-item-dummy-size-text-margin: 0.4em;
	--input-item-dummy-selected-color: var(--clr-schwarz);
	--input-item-dummy-color-background: #fff;
	--input-item-dummy-color-border: var(--clr-schwarz);
	--input-item-dummy-color-hover: var(--clr-schwarz);
	--input-item-dummy-color-shadow-active: rgba(42, 105, 183, 0.25);
	--input-item-dummy-checkbox-radius: 4px;
	--button-background-color: #FBFBFB;
	--button-background--hover-color: #F4F4F4;
	--button-background--hover-shadow: #BBB;
	--button-text-color: #555555;
	--button-boder-color: #999;
	--button-selected-boder-color: #969696;
	--button-radius: .15em;
	--button-height: 1.8em;
	position: sticky;
	top: calc(3*var(--padder));
	max-height: calc(90vh - var(--padder));
	overflow-y: auto;
	padding-bottom: calc(3*var(--padder));
}

.jfilters-filter-list {
	font-size: var(--font-h4);
}

.jfilters-item-link--checkbox::before {
	border-radius: 0;
}

.jfilters-item-link {
	text-decoration: none;
	display: inline;
	color: var(--clr-schwarz);
}

.jfilters-item-link--selected {
	content: "";
	font-weight: 400;
	color: var(--clr-schwarz);
}

.jfilters-item-link--selected.jfilters-item-link--checkbox .jfilters-item__label-text::before, 
.jfilters-item-link--checkbox:focus .jfilters-item__label-text::before, 
.jfilters-item-link--checkbox:hover .jfilters-item__label-text::before {
	scale: .75;
}

.jfilters-filter-header__toggle, .jfilters-filter-header__toggle:hover {
	color: var(--clr-schwarz);
}

.jfilters-filter-header__toggle .jfilters-chevron {
	width: 1.2em;
	height: 100%;
	display: inline-block;
	transition: transform .1s;
	margin-inline-start: 0.2em;
	translate: 0 5px;
}

.mod-jfilters_filters__submit-btn.btn {
	font-size: 15px;
	--clr-btn-bg: var(--clr-gelb);
	border-width: 1px;
	padding: 0.75em 1em;
	margin-top: 2rem;
}

@media (max-width: 1080px) {
	/* .mod-jfilters_filters {
		display: none;
	}

	.mod-jfilters_filters.active {
	display: block;
	} */

.moduletable.filtermodul {
	display: none;
}	

.active .moduletable.filtermodul {
	display: block;
	padding-top: 0;
}	

.jfilters-filters-container {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax(290px, 1fr));
}

.mod-jfilters_filters {
	padding-bottom: calc(6*var(--padder));
}

}
/* #region Reset */

* {
	margin:0;
	box-sizing: border-box;
	font-weight: normal;
}
  :before,:after {
	box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
  }	

video {
    width: 100%;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}  

/* #endregion Reset */

/* Body */

body {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-weight: normal;
	line-height: 1.3;
	scroll-behavior: smooth;
}

.skip {
	text-indent: -9999999px;
	position: absolute;
}

/* #region Standards */

h1, h2, h3, h4 {
	font-family: archivo-700;
	margin-bottom: .5em;
}

h1 {
	font-family: archivo-500;
	font-size: var(--font-h1);
	margin-bottom: .5em!important;
}

.heroclaim h1 {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: var(--font-h1-hero);
	line-height: 1.3;
}

.infobox h2 {
	font-size: var(--font-menu);
	font-family: archivo-700;
}

h3, .textblock h2  {
	font-size: var(--font-h3);
}

h4 {
	font-family: archivo-400;
}

.introwrapper h3 {
	font-size: var(--font-btn);
}

p {
	padding-bottom: calc(.5*var(--padder));
	max-width: 75ch;
	font-size: var(--font-p);
}

main ul, main ol {
	font-size: var(--font-p);
	padding-left: 0;
	margin-bottom: var(--padder);
}

main ul li, main ol li {
	margin-bottom: .5em;
}

.textblock p {
	max-width: 62ch;
}

.introwrapper p {
	font-size: var(--font-menu);
}

a {
	color: var(--clr-schwarz);
}

a.text-hidden, a.text-hidden img {
	width: 44px;
	height: 44px;
	display: block;
	padding-bottom: 4px;
	padding-top: 3px;
}

mark {
	background: inherit;
	color: inherit;
}

strong {
	font-weight: bold;
}

.bg-weiss {
	background-color: var(--clr-weiss);
}

.bg-gelb {
	background-color: var(--clr-gelb);
}

.bg-cyan {
	background-color: var(--clr-cyan);
}

.bg-gruen {
	background-color: var(--clr-gruen-hell);
}

.category-desc {
	padding-bottom: calc(1*var(--padder));
}

/* #endregion Standards */

/* #region Links und Buttons */

.btn, .btn.inv:hover, #cookiehintsubmitno:hover {
	--clr-btn-bg: var(--clr-gelb);
	position: relative;
	font-size: var(--font-btn);
	padding: .5em 2em;
	border-radius: 0;
	border: clamp(0.3125rem, 0.275rem + 0.1875vw, 0.5rem) solid var(--clr-btn-bg);
	background-color: var(--clr-btn-bg);
	color: var(--clr-blau-dunkel);
	width: fit-content;
	transition: background-color 0s;
	text-decoration: none;
	display: inline-block;
	height: fit-content;
	margin: auto;
	font-family: archivo-expanded-medium;
	cursor: pointer;
}

.btn:hover, .btn.inv, #cookiehintsubmitno {
	background-color: var(--clr-weiss);
	color: var(--clr-blau-dunkel);
	transition: background-color 0s;
	
}

.introtext .btn, .introtext .btn.inv:hover {
	--clr-btn-bg: var(--clr-blau-dunkel);
	color: var(--clr-weiss);
}

.introtext .btn:hover, .introtext .btn.inv {
	color: var(--clr-blau-dunkel);
}

.btn a, .btn.inv:hover a {
	color: var(--clr-weiss);
	text-decoration: none;
}

.btn:hover a, .btn.inv a {
	color: var(--clr-btn-bg);
}

.heroclaim .btn {
	background-color: var(--clr-gelb);
	border-color: var(--clr-gelb);
	color: var(--clr-blau-dunkel);
}

.heroclaim .btn:hover {
	background-color: var(--clr-blau-dunkel);
	color: var(--clr-weiss);
	border-color: var(--clr-weiss);
}

.mappopup .btn {
	border-width: 1px;
	display: block;
	font-size: 16px;
	color: var(--clr-schwarz);
	margin: 0;
	background-color: transparent;
	border-color: var(--clr-blau-dunkel);
	padding: 1em 1.5em;
}

.mappopup .btn:hover {
	color: var(--clr-weiss);
	background-color: var(--clr-blau-dunkel);
}

@media (max-width: 480px) {
.btn, .btn.inv:hover {
	padding: .5em 1em;
}
}

/* #endregion Links und Buttons */

/* #region Header */

header {
	position: fixed;
	width: 100%;
	background-color: var(--clr-weiss);
	z-index: 9999;
	height: calc(3*var(--padder));
	display: grid;
	align-content: center;
	transition: .3s;
}

.down {
	translate: 0 calc(-3*var(--padder));
}

.logowrapper img {
	height: calc(2.25*var(--padder));
	display: block;
	position: fixed;
	top: calc(.5*var(--padder));
	transition: .3s;
	background-color: var(--clr-weiss);
}

.down .logowrapper img, .down .hamburger-menu, .down .burger-back  {
	translate: 0 calc(3*var(--padder));
}

/* #endregion Header */

/* #region Menu */

/* Map Menu */

.mapmenu {
	margin-right: 20px;
	margin-top: -3px;
}

.mapmenu .image-title.visually-hidden {
	display: none;
}

.mapmenu ul {
	list-style: none;
	padding: 0;
}

@media (max-width: 810px) {
.mapmenu {
	margin-right: 50px;
	margin-top: 0px;
	z-index: 11;
}
}

.container.navbar {
	position: relative;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto auto;
	padding-block: calc(.5*var(--padder));
}

.burgerwrapper {
	position: relative;
	right: 0;
	top: 0;
	display: grid;
	align-content: center;
}

.burgermenu ul {
	display: flex;
	list-style: none;
	gap: 0;
	padding-left: 0;
}

.burgermenu ul li {
	margin-inline: calc(1*var(--padder));
	display: block;
	line-height: 1.5;
	position: relative;
}

.burgermenu ul li:first-child {
	margin-right: calc(.75*var(--padder));
	margin-left: 0;
}

.burgermenu ul li:last-child {
	margin-right: 0;
}

.burgermenu .mod-menu__sub li {
	margin-inline: 0;
}

.burgermenu ul li a {
	font-size: var(--font-menu);
	text-decoration: none;
	color: var(--clr-schwarz);
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: archivo-expanded-medium;
	/* padding-bottom: 20px; */
}

.burgermenu ul li a:hover, .burgermenu ul .current.active > a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

.burgermenu ul .active.deeper.parent > a {
	text-decoration: underline;
}

.burgermenu .visually-hidden {
	display: none;
}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

@media (max-width: 810px) {

	.burgermenu ul {
	display: grid;
	list-style: none;
	gap: calc(1*var(--padder));
	padding-inline: var(--padder);
	text-align: right;
	padding-top: calc(4*var(--padder));
	height: 100%;
	padding-bottom: 2rem;
	}

	.burgermenu ul li:first-child {
		margin-right: 0;
	}

	.burgermenu ul li {
		margin-inline: 0;
		text-align: left;
	}

	.burgermenu ul li a {
		font-size: var(--font-h3);
		color: var(--clr-weiss);
	}



}

/* Submenü */

.burgermenu .mod-menu__sub {
	display: none;
	border: clamp(0.3125rem, 0.275rem + 0.1875vw, 0.5rem) solid var(--clr-gruen-hell);
	padding: calc(.75*var(--padder)) calc(.5*var(--padder));
	background-color: var(--clr-weiss);
	gap: calc(.25*var(--padder));
	margin-left: calc(-1.75*var(--padder));
	max-width: min-content;
	position: absolute;
	right: 0;
	top: 35px;
}

body:has(.container.full.bg-gruen) .burgermenu .mod-menu__sub {
	border-color: var(--clr-blau-dunkel);
}

.burgermenu .parent:hover .mod-menu__sub {
	display: grid;
}

.burgermenu ul li:first-child .mod-menu__sub {
	margin-left: 2rem;
}

.burgermenu .mod-menu__sub li:first-child {
	margin-right: 0;
}

@media (max-width: 810px) {

.burgermenu .parent:hover .mod-menu__sub {
	display: block;
}

	.burgermenu .mod-menu__sub {
		display: block;
		border: 0px solid var(--clr-gruen-hell);
		position: relative;
		padding: calc(.25*var(--padder)) 0;
		background-color: transparent;
		gap: 0;
		margin-left: 0;
		max-width: 100%;
		width: 100%;
		padding-top: 0;
		margin-bottom: 0;
		top: 5px;
	}

	.burgermenu ul li:first-child .mod-menu__sub {
		margin-left: 0;
	}

	.burgermenu .mod-menu__sub li a {
		font-size: var(--font-menu);
	}
}

/* Burger */

.hamburger-menu {
	--x-width: calc(var(--hamburger-height) * 1.41421356237);

	display: none;
	flex-direction: column;
	gap: var(--hamburger-gap);
	width: max-content;
	position: fixed;
	right: var(--padder);
	top: calc(1.15*var(--padder));
	z-index: 2;
	cursor: pointer;
	transition: .3s;
}

.hamburger-menu {
	background: var(--clr-weiss);
	padding: 12px;
	position: absolute;
	top: -10px;
	right: -15px;
	aspect-ratio: 1/1;
	place-content: center;
	border-radius: 100%;
}

.active .hamburger-menu {
	background: transparent;
	top: -8px;
	right: -15px;
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
	content: '';
	width: var(--bar-width);
	height: var(--bar-height);
	background-color: var(--clr-schwarz);
	transform-origin: left center;
	transition: 
	opacity var(--burger-timing), 
	width var(--burger-timing),
	rotate var(--burger-timing), 
	translate var(--burger-timing);
}

.active .hamburger-menu::before,
.active .hamburger-menu::after,
.active .hamburger-menu input {
	background-color: var(--clr-weiss);
}

.hamburger-menu input {
	appearance: none;
	padding: 0;
	margin: 0;
	outline: none;
	pointer-events: none;
}

.hamburger-menu:has(input:checked)::before {
	rotate: 45deg;
	width: var(--x-width);
	translate: 0 calc(var(--bar-height) / -2);
}

.hamburger-menu:has(input:checked)::after {
	rotate: -45deg;
	width: var(--x-width);
	translate: 0 calc(var(--bar-height) / 2);
}

.hamburger-menu input:checked {
	opacity: 0;
	width: 0;

}

@media (max-width: 810px) {
	.hamburger-menu {
		display: flex;
	}

	.burgermenu {
		display: none;
	}

	.active .burgermenu {
		display: grid;
		position: fixed;
		width: 100svw;
		height: calc(100svh + 3* var(--padder));
		z-index: 1;
		left: 0;
		top: 0;
		background: var(--clr-blau-dunkel);
		align-content: start;
		overflow: scroll;
	}
}

/* #endregion Menu */

/* #region Main */

main {
	padding-top: calc(3*var(--padder));
}

/* #endregion Main */

/* #region Container */

.container {
	max-width: 2520px;
	padding-inline: calc(2*var(--padder));
	padding-block: calc(2.5*var(--padder));
	margin: auto;
}

.container.bottomblock {
	padding-block: 0;
	max-width: 1920px;
}

.container.full {
	max-width: 100%;
	padding: 0;
}

.container.full.bg-gruen, .container.full.bg-gelb, .container.full.bg-cyan {
	padding-bottom: var(--padder);
}

.container.full.bg-weiss {
	padding-bottom: 0;
}

/* .container.full > .container {
	padding-bottom: 0;
} */

.container.full:last-child > .container {
	padding-bottom: calc(2.5*var(--padder));
}

.container.full.accordion {
	padding-block: calc(2.5*var(--padder));
}

.container.full.zitat.noborder, .container.full.zitat.border {
	padding-top: var(--padder);
}

.container.full.zitat.border.abschluss {
	padding-top: calc(2.5*var(--padder));
}

.container.full.textpage .container.medium.content {
	padding-top: 0;
	max-width: 104ch;
	margin: auto;
}

.container.intro {
	padding-block: calc(1*var(--padder));
	padding-bottom: calc(2*var(--padder));
}

.container.medium {
	max-width: 1920px;;
}

.container.medismall {
	max-width: 1280px;
}

.container.small {
	max-width: 810px;
}

.introtext + .bigimage {
	padding-top: calc(2.5*var(--padder));
}

.container.full.newsslider {
	padding-bottom: calc(2*var(--padder));
}

.container.full.newsslider .container {
	padding-top: 0;
}

.container.full.newsslider .moduletable {
	padding-top: 0;
	padding-bottom: calc(2*var(--padder));
}

.container.intro.abschluss {
	padding-block: calc(2*var(--padder));
}

.container.full.textpage {
	padding-top: 0;
}

@media (max-width: 1080px) {
	.container {
		padding-inline: var(--padder);
	}
}

/* #endregion Container */

/* #region Grid-Systeme */

.grid {
	display: grid;
}

.grid.g-2 {
	grid-template-columns: repeat(2, 1fr);
	gap: calc(2*var(--gapper));
}

.grid.g-2.reverse div:first-child {
	order: 2;
}

.grid.g-3 {
	grid-template-columns: repeat( auto-fill, minmax(400px, 1fr));
	gap: var(--gapper);
}

.grid.g-4 {
	grid-template-columns: repeat( auto-fill, minmax(320px, 1fr));
	gap: var(--gapper);
}

.grid.g-14 {
	grid-template-columns: auto 1fr;
	gap: var(--gapper);
	padding-top: 0;
}

footer .grid.g-4 {
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

@media (max-width: 1080px) {
	.grid.g-14 {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 810px) {
	.grid.g-2, .grid.g-3, .grid.g-4 {
		grid-template-columns: 1fr;
	}

	.grid.g-2.reverse div:first-child {
		order: -1;
	}
}

/* #endregion Grid-Systeme */

/* Pagination */

.pagination {
	display: flex;
	gap: 1.5rem;
	padding: var(--padder);
	list-style: none;
	justify-content: center;
	font-size: var(--font-p);
}

.active.page-item a {
	text-decoration: none;
}

.search-pages-counter {
	text-align: center;
	padding: var(--padder);
}


/* #region Module */

/* Hero-Modul */

.container.full.hero {
	background-color: var(--clr-cyan);
	min-height: 100svh;
	overflow: auto;
	margin-bottom: calc(2*var(--padder));
}

.hero .grid.g-2 {
	min-height: 100svh;
	gap: 0;
}

.hero .heroimage {
	background-size: cover;
}

.hero .claimwrapper {
	position: relative;
}

.hero .heroclaim {
	padding: calc(3*var(--padder));
	background-color: var(--clr-blau-dunkel);
	color: var(--clr-weiss);
	translate: calc(-3*var(--padder));
	max-width: min-content;
	padding-bottom: var(--padder);
	padding-top: calc(2*var(--padder));
}

.hero .heroclaim .dachzeile {
	font-size: var(--font-p-big);
}

@media (max-width: 810px) {
	.container.full.hero {
		min-height: 75svh;
	}

	.hero .grid.g-2 {
		min-height: 75svh;
	}

	.hero .heroimage {
		width: 100vw;
		aspect-ratio: 1/1;
	}

.hero .heroclaim {
	translate: 0 calc(-2*var(--padder));
	padding-right: calc(3*var(--padder));
	height: calc(100% - .5*var(--padder));
	padding-left: calc(3*var(--padder));
}	

	.hero .heroclaim .btn {
		margin-bottom: var(--padder);
	}
}

@media (max-width: 480px) {
.hero .heroclaim {
	translate: 0 calc(-2*var(--padder));
	padding-right: calc(2*var(--padder));
	height: calc(100% - .5*var(--padder));
	padding-left: var(--padder);
}
}

/* Hero Slider */

.swiper.start {
	width: 100%;
	z-index: 0;
}

.swiper-slide img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Introtext Modul */

.intro .introtext {
	margin: auto;
	text-align: center;
}

.intro .introtext .date {
	padding-bottom: calc(.75*var(--padder));
	display: block;
}

.intro .introtext h2, .intro .introtext h1, .moduleintro {
	font-family: archivo-500;
	font-size: var(--font-h1);
	line-height: 1;
	max-width: 18ch;
	margin-inline: auto;
	text-align: center;
	hyphens: auto;
	hyphenate-limit-chars: auto 8;
}

.intro .introtext p {
	font-size: var(--font-p-big);
	padding-bottom: 0;
	margin: auto;
	max-width: 45ch;
	font-family: Georgia, 'Times New Roman', Times, serif;
}

.intro .introtext:has(.btn) p {
	padding-bottom: var(--padder);
}

.intro .introtext .zusatzinfo {
	padding-bottom: var(--padder);
	padding-top: calc(.5*var(--padder));
}

@media (max-width: 810px) {
.container.intro {
	padding-inline: 0;
}

.container.intro .introtext, .container.intro .caption  {
	padding-inline: var(--padder);
}



}

/* Image und Video Modul */

.bigimage {
	position: relative;
}

.bigimage img {
	width: 100%;
	height: auto;
}

.bigimage .product_of_month {
	top: auto;
	margin-top: calc(.5*var(--padder));
	right: calc(.5*var(--padder));
}

.caption {
	margin-top: 1em;
	max-width: 85ch;
	text-align: left;
}

.caption:has(p:empty) {
	display: none;
}

.bigimage .caption {
	margin-top: 1.5em;
}

.caption p {
	font-size: var(--font-p-small);
}

.caption p strong {
	font-family: archivo-700;
}

.bigimage + h1 {
	padding-top: calc(2*var(--padder));
}

/* #region Akkordeon */

.container.accordionwrapper {
	margin: auto;
	max-width: 1920px;
	padding-top: calc(2.5*var(--padder));
}

.container.intro + .container.accordionwrapper {
	padding-top: calc(2*var(--padder));
}

.container.accordionwrapper + .container.intro {
	padding-top: var(--padder);
}

/* .container.intro:has(h1) {
	padding-top: calc(2*var(--padder));
} */

.container.full.accordion + .container.linkblock .intro {
	padding-top: calc(2*var(--padder));
	padding-bottom: 0;
}

.container.medium.bigimage {
	padding-bottom: calc(2*var(--padder));
	padding-top: 0;
}

.container + .container.medium.bigimage {
	padding-top: calc(2*var(--padder));
}

.container.full:has(.intro) + .container.full .container.medium.bigimage {
	padding-top: calc(4*var(--padder));
}

@media (max-width: 810px) {
.container.medium.bigimage {
	padding-inline: 0;
}

.bigimage .caption {
	padding-inline: var(--padder);
}

}

.container.full.zitat .container {
	padding-top: 0;
}

.container.full.bild-links + .container.full.zitat.noborder {
	padding-top: calc(2*var(--padder));
}

.container.full.bild-links + .container.full.zitat.border {
	padding-block: calc(2*var(--padder));
}

details {
	position: relative;
	padding-bottom: .5rem;
	margin-inline: auto;
	display: block;
	clear: both;
	border-top: 2px solid;
}

summary {
	position: relative;
	cursor: pointer;
	font-size: var(--font-p);
	padding-block: calc(.5*var(--padder));
}

details::details-content {
	display: block;
	margin-inline: 0;
	block-size: 0;
	overflow: hidden;
	transition-property: block-size, content-visibility;
	transition-duration: 0.5s;
	transition-behavior: allow-discrete;
}

details[open]::details-content {
	/* Fallback for browsers that don't support calc-size() function */
	block-size: auto;
	
	/* calc-size() function allows transition to height: auto; */
	block-size: calc-size(auto, size);
}

.details__content {
	margin-top: .5rem;
	padding-right: var(--padder);
}

.details__content .grid.g-2 {
	gap: calc(.75*var(--gapper));
	padding-bottom: var(--padder);
}

.detailswrapper p {
	font-size: var(--font-p-small);
}

/* List Item ::marker supports only some CSS properties, so we're using ::before pseudo-element instead */
summary::marker {
	content: '';
	content: none;
}

summary::-webkit-details-marker {
display: none;
}

details > summary:first-of-type {
	list-style-type: none;
}

details summary::before {
	content: '+';
	position: absolute;
	font-size: var(--font-p-big);
	top: 0;
	right: 0;
	left: auto;
	place-content: center;
	display: grid;
	width: 50px;
	height: 100%;
	font-family: archivo-500;
}

details[open] summary::before {
	content: '–';
}

.grid.g-2 div:has(.klappbox) {
	padding-inline: var(--padder);
}

.klappbox.border {
	border: 5px solid var(--clr-gelb);
	padding: .5rem;
	padding-block: var(--padder);
}

.klappbox h2 {
	font-size: var(--font-h3);
	font-family: archivo-expanded;
}

/* #endregion Akkordeon */

/* Headline Artikel Modul */

.intro.headline h1 {
	font-family: archivo-expanded;
	font-size: var(--font-h1-big);
	line-height: 1;
	margin-bottom: .25em;
}

/* Timeline Modul */

.container.timeline-image {
	z-index: 1;
	position: relative;
}

.timeline-wrapper .timeline-image img, .timeline-year h2  {
	transform-style: preserve-3d;
	z-index: 0;
	translate: 0 calc(5*var(--padder));
	transform-origin: 0px bottom;
	animation: parallax 1s linear infinite;
	animation-play-state: paused;
	animation-delay: calc(var(--scroll) * -1s);
}

.timeline-wrapper .timeline-image img {
	translate: 0 0rem;
	animation: parallax-reverse 1s linear infinite;
	animation-play-state: paused;
	animation-delay: calc(var(--scroll) * -1s);
}

  @keyframes parallax {
	to {
	  translate: 0 0;
	}
  }

    @keyframes parallax-reverse {
	to {
	  translate: 0 calc(8*var(--padder));
	}
  }

.timeline-wrapper .timeline-year {
	transition: 2s;
	transition-delay: 0s;
}

.timeline-wrapper .timeline-content.textblock {
	transition: 2s;
	transition-delay: 0s;
}

.container.timeline-image img {
	aspect-ratio: 16/9;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.timeline-wrapper:has(.timeline-image) .timeline-element {
	translate: 0 calc(-8*var(--padder));
	padding-top: calc(6.5*var(--padder));
	margin-bottom: calc(-8*var(--padder));
}

.timeline-element * {
	color: var(--clr-weiss);
}

.timeline-element h2 {
	font-size: var(--font-h2-timeline);
	font-family: archivo-expanded;
	color: var(--clr-cyan);
	margin-bottom: calc(2*var(--padder));
}

/* Übersichten Modul */

/* Zitat Modul */

blockquote {
	margin: auto;
	max-width: 130ch;
}

blockquote p {
	font-size: var(--font-p-cite);
	text-align: center;
}

blockquote p::before {
	content: '„';
}

blockquote p::after {
	content: '“';
}

blockquote cite {
	font-size: var(--font-menu);
	margin: auto;
	width: 100%;
	text-align: center;
	display: block;
	font-style: normal;
}

/* Zitat mit Border Modul */

.border blockquote {
	border: calc(.5*var(--padder)) solid var(--clr-gelb);
	padding: var(--padder);
	max-width: 100%;
}

/* Infobox */

.infobox {
	margin-inline: auto;
	height: min-content;
}

/* Übersicht */

.blog .introwrapper {
	color: var(--clr-schwarz);
	text-decoration: none;
}

.blog .introimg, .grid.g-3 .introimg, .grid.g-4 .introimg, .swiper .introimg  {
	margin-bottom: 1em;
	position: relative;
}

.blog .introwrapper h2 {
	font-size: var(--font-p);
	margin-bottom: .25em;
}

.product_of_month {
	background-color: var(--clr-blau-dunkel);
	color: var(--clr-weiss);
	padding: 1em 1.25em;
	position: absolute;
	right: .75rem;
	top: .75rem;
	width: max-content;
}

/* Kategoriebeschreibung */

.category-desc .container.full:last-child > .container.intro, .category-desc .container.full:last-child > .container.intro p {
	padding-bottom: 0;
}

.switcher {
    display: inline-flex;
    padding-bottom: calc(2*var(--padder));
}

.btn.list, .btn.inv.list:hover, .btn.map, .btn.inv.map:hover {
	background-repeat: no-repeat;
	background-position: 10px center;
	background-size: 20px;
}

.btn.list, .btn.inv.list:hover {
	background-image: url(../images/liste-weiss.svg);
}

.btn.inv.list, .btn.list:hover {
	background-image: url(../images/liste-blau.svg);
}

.btn.map, .btn.inv.map:hover {
	background-image: url(../images/karte-weiss.svg);
}

.btn.inv.map {
	background-image: url(../images/karte-blau.svg);
}





/* Newsbox */

.boxcontent + .boxcontent {
	margin-top: var(--padder);
}

.moduletable.newsflashbox {
	max-width: 810px;
	margin: auto;
	margin-bottom: calc(2*var(--padder));
	container-type: inline-size;
}

.moduletable.newsflashbox h2 {
	font-size: var(--font-h3);
}

.moduletable.newsflashbox .introwrapper h3, .moduletable .swiper.news .textwrapper h3 {
	font-size: var(--font-p);
}

main:has(.com-content-category-blog.blog) .moduletable.newsflashbox {
	display: none;
}

.newsmodule {
	display: grid;
	gap: var(--gapper);
	margin-inline: auto;
}

.sticky .newsmodule, .sticky.infobox {
	position: sticky;
	top: calc(3*var(--padder));
	max-width: 60ch;
	margin-right: 0;
}

.newsmodule .introwrapper {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: var(--padder);
	border-top: 1px solid;
	padding-block: calc(.5*var(--padder));
}

.newsmodule .introwrapper .introimage img {
	aspect-ratio: 1/1;
	width: 100%;
	height: auto;
	object-fit: cover;
}

@media(max-width: 810px) {
	.newsmodule .introwrapper {
		grid-template-columns: 1fr;
	}

	.sticky .newsmodule, .sticky.infobox {
		max-width: 100%;
		margin-right: auto;
	}
}

/* Kontaktbox */

.contactmodule {
	display: grid;
	border: 3px solid var(--clr-gelb);
	padding: calc(.5*var(--padder));
	text-align: center;
	margin-inline: auto;
	max-width: min-content;
	max-height: min-content;
	hyphens: auto;
	hyphenate-limit-chars: auto 4;
	hyphenate-limit-lines: 2;
	min-width: 400px;
}

.contactmodule.green * {
	color: var(--clr-blau-dunkel);
	text-align: left;
	max-width: auto;
}

.contactmodule.green {
	border-color: var(--clr-gruen-hell);
	max-width: 100%;
	border-width: 3px;
}

.sticky .contactmodule.green {
	position: initial;
}

.sticky .contactmodule {
	position: sticky;
	top: calc(3*var(--padder));
	margin-bottom: var(--padder);
}

.contactmodule h2 {
	font-size: var(--font-h3);
	font-family: archivo-expanded-800;
	text-transform: uppercase;
	align-self: start;
}

.contactmodule h3 {
	font-size: var(--font-p);
	margin-bottom: .05em;
}

.contactmodule p {
	font-size: var(--font-menu);
	font-family: archivo-400;
}

.contactmodule button {
	align-self: end;
	margin-inline: auto;
}

.contactmodule .introtext .btn, .contactmodule .introtext .btn.inv:hover {
	--clr-btn-bg: var(--clr-gruen-hell);
}

@media(max-width: 480px) {
	.contactmodule {
		min-width: 270px;
	}
}

/* Newsflash Modul */

.mod-articlesnews.newsflash .introwrapper {
	display: grid;
	grid-template-columns: 25cqw 1fr;
	gap: calc(1.5*var(--padder));
	border-top: 1px solid;
	color: var(--clr-schwarz);
	text-decoration: none;
	padding-block: 1rem;
	padding-bottom: 2rem;
}

.mod-articlesnews.newsflash .introwrapper p {
	font-size: var(--font-menu);
	padding: 0;
}

.mod-articlesnews.newsflash .introwrapper .product_of_month {
	font-size: 10px;
	aspect-ratio: 1/1;
	place-content: center;
	max-width: 70px;
	max-height: 70px;
	border-radius: 70px;
	text-align: center;
	top: -.75rem;
	right: -.75rem;
}

.mod-articlesnews.newsflash .introwrapper:has(.product_of_month) .introtext {
	padding-right: 80px;
}

.introwrapper {
	text-decoration: none;
	color: var(--clr-schwarz);
	position: relative;
}

.introimg img {
	height: auto;
}

.introimg img {
	aspect-ratio: 16/9;
	width: 100%;
	object-fit: cover;
}

.download .introimg img {
	aspect-ratio: auto;
}

.swiper-pagination {
	position: relative;
	margin-top: var(--padder);
}

.swiper-pagination-bullet {
	width: 14px;
	height: 14px;
	display: inline-block;
	border-radius: 50%;
	background: var(--clr-cyan-dunkel);
	opacity: .8;
}

@media(max-width: 480px) {
	.mod-articlesnews.newsflash .introwrapper {
		grid-template-columns: 1fr;
	}

	.mod-articlesnews.newsflash .introwrapper .product_of_month {
	font-size: initial;
	aspect-ratio: initial;
	place-content: center;
	max-width: initial;
	max-height: initial;
	border-radius: initial;
	text-align: center;
	top: 1.75rem;
	right: .75rem;
	}

	.mod-articlesnews.newsflash .introwrapper:has(.product_of_month) .introtext {
	padding-right: 80px;
	}
}

/* Linkblock Modul */

.linkblock .introwrapper * {
	font-size: var(--font-btn) !important;
}

.linkblock .introwrapper p {
	padding-bottom: .25em;
	margin-top: .25em;
}

/* #endregion Module */

/* #region Content */

.content-text h2, .content-text p strong, .content-text h3 {
	font-family: archivo-expanded-800;
}

.content-text h2 {
	font-size: var(--font-h2-textblock);
	hyphens: auto;
	hyphenate-limit-chars: auto 9;
}

.content-text h3 {
	font-size: var(--font-p);
}

.content-text p + h2, .content-text p + h3 {
	margin-top: var(--padder);
}

/* #endregion Content */

/* #region  footer */

footer.container.full * {
	font-size: var(--font-btn);
}

footer.container.full {
	background-color: var(--clr-blau-dunkel);
	color: var(--clr-weiss);
	padding-block: var(--padder);
}

footer .grid.g-4 {
	padding-block: 0;
}

footer .mod-menu.mod-list.nav {
	padding: 0;
	list-style: none;
}

footer .mod-menu.mod-list.nav a {
    color: var(--clr-weiss);
    text-decoration: none;
    min-height: 44px;
    display: block;
}

.container.copyright {
	min-height: 25vh;
	padding-bottom: 0;
	display: grid;
	align-content: end;
}

.container.copyright p {
	padding: 0;
}

.sociallink {
    color: var(--clr-weiss);
    text-decoration: none;
    min-height: 44px;
    display: block;
    line-height: 1.5;
}

.sociallink::before {
	content: 'f';
	font-family: amatiksymbols;
	text-decoration: none;
	margin-right: .5rem;
	font-size: 25px;
}

.sociallink.instagram::before {
	content: 'a';
}

@media(max-width: 810px) {
	footer .grid.g-4 {
		grid-template-columns: 1fr;
	}
}

/* #endregion  footer */

#redim-cookiehint {
	background-color: var(--clr-cyan-dunkel);
	color: var(--clr-weiss);
	text-align: center;
	padding: var(--padder);
}

.cookiehead {
	display: none;
}

.cookiebuttons {
	display: flex;
	width: max-content;
	margin: auto;
	gap: var(--padder);
}

.cookiecontent p {
	margin: auto;
}
