/*/////////////////////////////////// BASIS //////////////////////////////////*/
*, *::before, *::after {
  box-sizing: border-box;
}

:root {
	font-size: var(--default-font-size);
	--default-font-size: 16px;
	--default-font-family: 'Manrope', 'Helvetica', 'Arial', sans-serif;
	--heading-font-family: 'Lora', 'Georgia', serif;

	--content-width: 1200px;
	--section-padding: 80px 0;
	--column-gap: 20px;

	/* -- Farben -- */
	--color-one: #30CDCA;
  --color-two: #009C99;
  --color-three: #3A506B;
  --color-four: #DAD7CF;
  --color-five: #F5F1ED;
  --color-bg: #FFFFFF;
  --color-txt: #0B132B;
	--color-error: #ff0000;
	--color-border: #B1A699;   /* Dunkelbeige */

	--box-shadow-small: 0 2px 10px #02383d22;
	--box-shadow-regular: 0 5px 20px #02383d33;
	--box-shadow-large: 0 5px 20px #02383d55;

	--transition: all ease-in-out 0.3s;
	--transition-fast: all ease-in-out 0.2s;
	--transition-slow: all ease-in-out 0.6s;
}

html {
	box-sizing: border-box; 
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-size: var(--default-font-size);
  font-family: var(--default-font-family);
  line-height: 1.5;
  color: var(--color-txt);
  transition: var(--transition);
  background: var(--color-bg);
}

/*///////////////////////////////// SCHRIFT //////////////////////////////////*/

/* Quelle: https://gwfh.mranftl.com/ – Community Projekt für Google-Webfonts */
/* lora-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/lora-v37-latin-600.woff2') format('woff2');
}

/* lora-600italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Lora';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/lora-v37-latin-600italic.woff2') format('woff2'); 
}

/* manrope-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/manrope-v20-latin-regular.woff2') format('woff2'); 
}

/* manrope-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/manrope-v20-latin-600.woff2') format('woff2');
}

/* manrope-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/manrope-v20-latin-700.woff2') format('woff2');
}

/* TEXT ---------------------------------------------------------------------*/
/* -- Überschriften -- */
h1, h2, h3, h4, h5, h6, [class^="heading-"] {
	font-family: var(--heading-font-family);
	font-weight: 600; 	
	margin: 1rex 0 2rex 0;
	line-height: 1.4;
}

h1, .heading-xl		{ font-size: 4rem; }
h2, .heading-l		{ font-size: 3rem; }
h3, .heading-m		{ font-size: 2.2rem; }
h4, .heading-s		{ font-size: 1.6rem; }
h5, .heading-xs		{ font-size: 1.4rem; }
h6, .heading-xxs	{ font-size: 1.2rem; font-family: var(--default-font-family)}

h1, h2, h3, .heading-xl, .heading-l, .heading-m {
	width: fit-content;
	margin: 1rex 0 5rex 0;	
}

:where(h1, h2, h3, .heading-xl, .heading-l, .heading-m).underline::after {
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	margin: inherit;
	background: linear-gradient(90deg, var(--color-one) 20%, var(--color-three) 20%);
}

.tag-line {
	display: block;
	margin: 1rem 0 0 0;
  color: var(--color-border);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
}

/* -- Weitere "Textelemente" o. Ä. -- */
ul, ol { 
	margin: 10px 0px 10px 10px;
	padding: 0px 0px 0px 10px;
}

ul li, ol li {
	margin: 5px 0;
}

p, .paragraph {
	margin: 1.2em 0;
	line-height: 1.6;
}

:is(p, .paragraph, span, a).small {
	font-size: 0.8rem;
}

hr {
  border: none;
	border-top: 1px solid var(--color-border);
}

blockquote {
	width: fit-content;
  margin: calc(var(--section-padding) / 2) 0;	
  border-left: 4px solid;
  border-radius: 6px;  
  border-color: var(--color-one);	
	padding: 1px 20px;
	background: #fff;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

.rounded {
	border-radius: 18px;
}

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

main a {
	color: var(--color-two);
}

main a:is(:hover, :focus) {
	color: var(--color-txt);
}

/* INVERTED (heller Text auf dunklem Grund) --------------------------------*/
.inverted {
	color: #fff;
}

.inverted .tag-line {
	color: var(--color-four);
}

.inverted .btn.outline {
	border-color: #fff;
	color: #fff;
}

.inverted .btn.outline:is(:hover, :focus) {
	background: #fff;
	color: var(--color-two);
}

/*///////////////////////////////// LAYOUT ///////////////////////////////////*/
section  {
	position: relative;
	padding: var(--section-padding);
	overflow: hidden;
	z-index: 1;
}

section > * {
	z-index: 1;
}

.content {
	position: relative;
	max-width: var(--content-width);
	margin-inline: auto;
}

.flex {
	display: flex;
	flex-wrap: wrap;
	gap: var(--column-gap);
}

.show-desktop  { display: block }
.show-mobile	 { display: none }

/* COLUMNS -------------------------------------------------------------------*/
.columns {
	display: flex;
	flex-wrap: wrap;
	margin: calc(var(--column-gap) / -2);
}
 
.column {
	position: relative;
	box-sizing: border-box;
	min-width: 0;
	padding: calc(var(--column-gap) / 2);
}

.column.full          { flex: 0 0 100%; }
 
.column.half,
.column.two-quarters,
.column.three-sixths,
.column.five-tenths   { flex: 0 0 50%; }
 
.column.one-third,
.column.two-sixths    { flex: 0 0 33.333%; }
 
.column.two-thirds,
.column.four-sixths   { flex: 0 0 66.666%; }
 
.column.one-quarter   { flex: 0 0 25%; }
.column.three-quarters { flex: 0 0 75%; }
 
.column.one-sixth     { flex: 0 0 16.666%; }
.column.five-sixths   { flex: 0 0 83.333%; }

.column.one-fifth,
.column.two-tenths    { flex: 0 0 20%; }

.column.two-fifths,
.column.four-tenths   { flex: 0 0 40%; }

.column.three-fifths,
.column.six-tenths    { flex: 0 0 60%; }

.column.four-fifths,
.column.eight-tenths  { flex: 0 0 80%; }

.column.one-tenth     { flex: 0 0 10%; }
.column.three-tenths  { flex: 0 0 30%; }
.column.seven-tenths  { flex: 0 0 70%; }
.column.nine-tenths   { flex: 0 0 90%; }

.wide-gap.columns {--column-gap: 40px;}
.wide-gap.columns .columns {--column-gap: 20px}

/* -- Spacing -- */
.space-evenly  { justify-content: space-evenly; }
.space-between { justify-content: space-between; }
.space-around  { justify-content: space-around; }
.center        { justify-content: center; }
.end           { justify-content: flex-end; }

form.flying-labels .columns .column {
	position: relative;
}

.column hr {
	width: auto;
}

/* ALIGNMENTS ----------------------------------------------------------------*/
.v-align-top     { align-items: flex-start; align-content: baseline; }
.v-align-center  { align-items: center; align-content: center; }
.v-align-bottom  { align-items: flex-end; align-content: end; }
.v-align-stretch { align-items: stretch; }

.align-left		{	margin-inline: 0 auto; }
.align-center {	margin-inline: auto; }
.align-right	{ margin-inline: auto 0; }

.txt-align-left 	{	text-align: left; }
.txt-align-center {	text-align: center; }
.txt-align-right	{ text-align: right; }

:where(.align-left, .txt-align-left) :is(h1, h2, h3, h4, h5, h6, [class^="heading-"], .btn) {
	margin-left: 0;
	margin-right: auto;
}


:where(.align-center, .txt-align-center) :is(h1, h2, h3, h4, h5, h6, [class^="heading-"], .btn) {
	margin-left: auto;
	margin-right: auto;
}

:where(.align-rigth, .txt-align-right) :is(h1, h2, h3, h4, h5, h6, [class^="heading-"], .btn) {
	margin-left: auto;
	margin-right: 0;
}

/* ABSTANDHALTER ------------------------------------------------------------*/
:where(span, div).empty-space {
	display: block;
	width: 100%;
	margin: 0;
	border: none;
	padding: 0;
}

:where(span, div).empty-space.s		{	padding-top: 10px; }
:where(span, div).empty-space.m		{	padding-top: 20px; } 
:where(span, div).empty-space.l		{	padding-top: 40px; }
:where(span, div).empty-space.xl	{	padding-top: 65px; }
:where(span, div).empty-space.xxl	{	padding-top: 80px; }

/* HINTERGRÜNDE -------------------------------------------------------------*/
.bg-color-one    { background: var(--color-one); }
.bg-color-two    { background: var(--color-two); color: #fff; }
.bg-color-three  { background: var(--color-three); color: #fff; }
.bg-color-four	 { background: var(--color-four); }
.bg-color-five	 { background: var(--color-five); }

.bg-color-one .tag-line {
	color: #fff;
}

.bg-color-one .content .btn {
	color: var(--color-txt);
  border-color: color: var(--color-txt); 
}

section .bg-img {
	width: 150%;
	height: auto;
	opacity: 0.2;
	transform: translate(-10%, 25%);
	pointer-events: none;
	z-index: -1;	
}

/* -- Wellenhintergrund -- */
.wave-bg {
	position: absolute;
	inset: 0;
	background-color: currentColor;
	-webkit-mask-image: url(../images/layout/wellen.svg);
	mask-image: url(../images/layout/wellen.svg);
	-webkit-mask-size: cover;
	mask-size: cover;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	z-index: -1
}

/*////////////////////////////// KOMPONENTEN /////////////////////////////////*/
/* SWITCH --------------------------------------------------------------------*/
div.switch { 
	display: none; 
	position: fixed;
	top: 0;
	right: 0; 
	width: 70px; 
	height: 70px; 
	cursor: pointer; 
	background: var(--color-one);
	z-index: 5000; 
	transition: var(--transition-fast); 	
}

.switch::before, .switch::after, .switch span {
	content: '';
	display: block;
	position: absolute; 
	inset: auto 0;
	width: 50%;
	min-height: 2px; 
	margin: auto;
	background: #ffffff;	
	transition: var(--transition);
}

div.switch:before { 
	top: 33.33334%;
}

div.switch span { 
	top: 50%;
}

div.switch:after { 
	top: 66.66664%; 
}

.switch.active::before, .switch.active::after  {
	top: 50%; 
	width: 0; 
	opacity: 0;
} 

div.switch.active span:first-of-type { 
	transform:rotate(45deg)
}

div.switch.active span:last-of-type { 
	transform:rotate(-45deg)
}

/* HEADER/NAV ----------------------------------------------------------------*/
header {
	position: fixed;
	inset: 0;
	width: 100%;
	height: fit-content;
	background: #fff;
	box-shadow: 0 0 20px #00000017;
	z-index: 1000;
}

header * {
	transition: var(--transition);
}

header .logo img {
  width: 200px;
  border-radius: 0;
}

header.flat .logo img {
  width: 180px;
}

nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 auto;
	padding: 30px 40px;
}

.flat nav {
	padding: 18px 40px;
}

nav ul {
	display: flex;
  margin: 0 40px 0 auto;
  padding: 0;
	gap: 20px;
  list-style: none;  
}

nav ul li {
	position: relative;
}

nav ul li a {
	display: block;
	padding: 12px;
	font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: var(--color-txt);
  word-wrap: break-word;
  z-index: 1;
}

nav ul li a:hover, nav ul li a:focus {
	color: var(--color-one);
}

/* -- subnav -- */
nav ul li ul.subnav {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
	background: #fff;
	border-radius: 4px;
	font-weight: 600;
  letter-spacing: 0.3em;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	box-shadow: var(--box-shadow-small);
	z-index: 1001;
}

nav ul li:hover .subnav,
nav ul li:focus-within .subnav {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

nav ul li .subnav li {
	display: block;
	padding: 0;
}

nav ul li .subnav li a {
	padding: 8px 20px;
	white-space: nowrap;
	font-weight: 400;
  letter-spacing: 0.1em;
}

nav ul li .subnav li a::after {
	display: none;
}

nav ul li .subnav li a:hover {
	background: var(--color-one);
  color: #fff;
}

/* COOKIE MANAGER BUTTON -----------------------------------------------------*/
a.show_cookiemanager:is(:hover,:focus) {
	color: #fff;
	background: var(--color-one);
	opacity: 1;
}

a.show_cookiemanager.stop {
	bottom: 80px;
}

a.show_cookiemanager svg path { 
	fill: none; 
	stroke: currentColor; 
	stroke-width: 0.8 
}

/* SIDE PANEL ------------------------------------------------------------*/
.panel {
	position: fixed;
  bottom: 20px;
  right: 20px;
  border-radius: 50px;  
  padding: 10px;
  z-index: 1001;
  transition: var(--transition);
}

.panel.stop {
  bottom: 80px;
}

a.show_cookiemanager, .panel a, .scrolltop, .scrolldown { 
	display: flex;
	width: 50px;
	height: 50px;
	margin-top: 10px;
	border: none;
	border-radius: 50px;
	align-content: center;
	color: var(--color-one);
  background-color: #f5f8f9;
	opacity: 1;
	transition: var(--transition);
}

.panel svg {
	margin: auto;
}

.panel a {
	position: relative;
}

.panel .togglebox {
	position: absolute;
	inset: 0 50px 0 auto;
	height: 50px;
	align-content: center;
  margin: auto 0;
  border-radius: 50px;
  padding: 12px 20px;
  background: var(--color-one);
  white-space: nowrap;
  color: #fff;
  font-family: var(--default-font-family);
  font-size: 1rem;
  letter-spacing: 0.1em;
  opacity: 0;
  transition: var(--transition);
  transform: translateX(20px);
  visibility: hidden;
}

.panel .togglebox::after {
	content: '';
	position: absolute;
	inset: 0 -52px 0 auto;
  width: calc(100% + 40px);
	height: 100%;
	margin: auto;
	border-radius: 50px;
	background: var(--color-one);
	z-index: -1;
}

.panel *:hover > .togglebox,
.panel *:focus > .togglebox {
	opacity: 1;
	transform: translateX(0);
	visibility: visible;
	z-index: -1;
}

.scroll-buttons {
	position: relative;
	margin-top: 10px;
}

.scroll-buttons > * {
	margin-top: 0;
}

.scrolldown {
	position: absolute;
	inset: 0;
}

:is(.scrolltop, .scrolldown, .panel a):hover,
:is(.scrolltop, .scrolldown, .panel a):focus { 
  opacity: 1;
  color: #fff;
  background-color: var(--color-one); 
}

.scrolltop.flat, .scrolldown {
	visibility: visible;
}

.scrolltop, .scrolldown.flat {
	visibility: hidden;
}

.scrolltop:hover, .scrolldown:hover {
	cursor: pointer;
}

/* BUTTONS -------------------------------------------------------------------*/
.btn {
	display: block;
	position: relative;
  width: fit-content;
	border: none;
	margin-top: 20px;
	margin-bottom: 20px;
	border-radius: 100px;
  padding: 12px 30px;
  cursor: pointer;
  color: #fff;
  font-family: var(--default-font-family);
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.25em;
  line-height: inherit;
  text-align: center;
 	text-decoration: none;
 	text-transform: uppercase;
	background: var(--color-one);
  transition: var(--transition-slow);
  overflow: hidden;
}

.btn:hover, .btn:focus {
	color: #fff;
	background-color: transparent;
	transition: all .1s linear;
}

.btn::after {
	content: "";
  position: absolute;
  width: 100%;
  height: 0;
  left: 50%;
  top: 50%;
  background-color: var(--color-two);
	opacity: 0.3;
  transform: translate(-50%,-50%) rotate(-45deg);
  filter: blur(5px);
  z-index: -1;
}

.btn:is(:hover, :focus)::after {
	height: 800%;
  transition: all .4s linear;
  opacity: 1;
}

a, .btn, button {
	cursor: pointer;
	transition: var(--transition);
}

.btn.outline {
	color: var(--color-one);
	border: 2px solid var(--color-one);
	background-color: transparent;
}

.btn.outline::after {
	background-color: var(--color-one);
}

.btn.outline:is(:hover,:focus) {
	color: #fff;
}

.btn.small {
  padding: 6px 25px;
}

/* SPECIAL LINKS ---------------------------------------------------------------*/
.linelink {
	position: relative;
	padding-bottom: 4px;
	font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.25em;
}
	
.linelink::before {	
	content: "";
  position: absolute;
  bottom: -2px;	
	right: 0;
  left: auto;
  width: 0;
  height: 2px;
  transition: var(--transition);
}

.linelink:is(:hover, :focus)::before {
	width: 100%;
  left: 0;
  right: auto;
  background-color: var(--color-one);
}

/* THEME IMAGE ---------------------------------------------------------------*/
section.theme {
	margin-top: 100px;
	padding: 80px 0;
	align-content: center;
	overflow: hidden;
	background: var(--color-one);
}

section.theme .tag-line {
  color: var(--color-three);
  font-family: var(--default-font-family);
}

section.theme .bg-img {
	width: 110%;
  height: 120%;
  bottom: -40%;
  left: 20%;
  margin: auto;
  transform: rotate(-15deg);
}

section.theme a {
	color: #fff;
}

section.theme a:is(:hover,:active) {
	color: var(--color-txt);
}

/* -- Hero Img/Box -- */
section.theme.hero {
	width: 100%;
	height: 100%;
	height: auto;
	min-height: 480px;
	align-content: center;
	color: var(--color-three);
	background: var(--color-five);
	overflow: hidden;
	position: relative;
}

section.theme.hero .tag-line {
	color: var(--color-border);
}

section.theme.hero .bg-img {
	top: 20%;
	right: -40%;
	left: auto;
	color: var(--color-border);
	opacity: 0.6;
	transform: rotate(-22deg);
}

section.theme.hero h1 {
	font-size: 3rem;
	line-height: 1.15;
	max-width: 600px;
}

section.theme.hero p {
	max-width: 500px;
}

/* IMG FORMATS ---------------------------------------------------------------*/
.cutout {
	display: block;
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

.cutout.square {	
	aspect-ratio: 1/1; 
}

.cutout img {
	display: block;
  position: absolute;
	inset: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  object-fit: cover;
}


img.iconimg {
	width: 120px;
  border-radius: 100px;
  border: 1px solid var(--color-border);
  padding: 5px;
  margin: 0 auto 20px auto;
}
/* CARDS----------------------------------------------------------------------*/
.cards, .icon-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 40px;
  grid-column-gap: 22px;
  width: 100%;
  margin: 0 0 40px 0;
  padding: 0;
  list-style: none;
}

.cards, .cards *, .icon-cards, .icon-cards * {
	transition: var(--transition);
}

.cards .card {
  width: 100%;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  align-content: baseline;
  background: #fff;
  box-shadow: var(--box-shadow-small);
}

.cards .card:is(:hover, :focus) {
	transform: translateY(-5px);
	box-shadow: var(--box-shadow-regular);
}

.cards .card .cardImg {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 3/2;
  margin: 0;
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  background-color: transparent;
  z-index: 1;
}

.cards .card .cardImg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cards .card a:is(:hover,:focus) .cardImg img {
	transform: scale(1.1);
}

.cards .card .cardContent {
  display: block;
  margin: 0;
  padding: var(--column-gap);
  color: var(--color-txt);
}

.cards .card ul.tags {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	gap: 5px;
}

.cards .card ul.tags li {
  display: inline-block;
  margin: 0;
  border-radius: 4px;  
  padding: 0 15px;  
	font-size: 0.9rem;
  line-height: 2;
  font-weight: 400;
  color: #fff;
  background: var(--color-one);
}

.cards.small .card {
	padding: 12px 32px;
}

/* ICONCARDS------------------------------------------------------------------*/
.icon-cards {
	grid-row-gap: 22px;
}

.icon-cards .card {
	display: flex;
	width: 100%;
	gap: 20px;
	margin: 0;
	border-radius: 18px;
	padding: 32px;
	align-content: center;
	background: #fff;
  box-shadow: var(--box-shadow-small);
}

.icon-cards .card:is(:hover, :focus) {
	transform: translateY(-5px);
	box-shadow: var(--box-shadow-regular);
}

.icon-cards .card:is(:hover, :focus) .card-ico {
	color: #fff;
	background: var(--color-three);
}

.icon-cards .card .card-content {
	display: block;
  align-content: center;
	width: calc(100% - 84px);
	font-size: 1.2rem;
	font-weight: bold;
}

.icon-cards .card .card-ico {
	display: block;
	position: relative;	
	width: 64px;
	height: 64px;
  margin: auto;
  border-radius: 100%;
	padding: 10px;
  overflow: hidden;
  background-color: var(--color-one);
  color: var(--color-txt);
	z-index: 1;
}

.icon-cards.small .card {
	padding: 12px 32px;
}

/* ICON LIST -----------------------------------------------------------------*/
ul.icon-list {
	display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--column-gap);
  list-style: none;
  margin: calc(var(--section-padding) / 2) auto;
  padding: 0;
}

ul.icon-list li {
	display: flex;
	gap: calc(var(--column-gap) / 2);
	justify-content: space-between;
	align-items: center;
}

ul.icon-list li .icon {
	flex: 0 0 50px;
  height: 50px;
  border-radius: 3px;
  padding: 12px;
  align-content: center;
  text-align: center;
  color: #fff;
  background: var(--color-one);
}

ul.icon-list li :where(img,svg) {
  width: 100%;
  height: 100%;
}

ul.icon-list li p {
	margin: 0;
	align-content: center;	
	font-size: 0.9rem;
	letter-spacing: 0.02rem;
}

/* LIST BENEFITS -------------------------------------------------------------*/
ul.benefits {
	margin: 0;
  padding: 0;
  list-style: none;
  column-count: 2;
  break-inside: avoid;
  gap: var(--column-gap);
}

ul.benefits li {
	position: relative;
	margin: 0 0 var(--column-gap) 0;
	padding-left: 40px;
	break-inside: avoid;
}

ul.benefits li::before {
	content: '';
	position: absolute;
	top: 5px;
  left:0;
	width: 30px;
  height: 30px;
	border-radius: 50px;
  color: #fff;  
  background: var(--color-one) url('../images/layout/checkbox_white.svg') no-repeat center;
}


ul.benefits :where(h1, h2, h3, h4, h5, h6, [class^="heading-"]) {
	margin: 0;
}

ul.benefits p {
	margin: 0.6em 0;
}

/* HOVERING IMAGES -----------------------------------------------------------*/
.hovering-images {
	display: flex;
	position: relative;
}

.hovering-images picture {
	display: flex;
	margin: auto;
	z-index: 1;
	overflow: hidden;
}

.hovering-images picture img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}
/* -- same size --*/
.hovering-images.same-size picture{
	width: 55%;
	aspect-ratio: 17/23;
	border-radius: 18px;
}

.hovering-images.same-size picture:nth-of-type(1) {
	margin: 0;
  margin-bottom: 12%;
	outline: 15px solid #fff;
	z-index: 2;
}

.hovering-images.same-size picture:nth-of-type(2) {
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0;
	z-index: 1;
}

/* -- square -- */
.hovering-images.square picture:nth-of-type(1) {
	width: calc(80% - 100px);
	margin-left: 20%;
	aspect-ratio: 17/23;
	/* animation: links-rechts-schieben 2.5s infinite alternate; */
}

.hovering-images.square picture:nth-of-type(2) {
	position: absolute;
	bottom: 10%;
	left: 0;
  max-height: 50%;		
  outline: 15px solid #fff;
  border-radius: 18px;
	aspect-ratio: 1;
	/* animation: oben-unten-schieben 2.5s infinite alternate; */
}

/* -- drei Bilder -- */
.hovering-images.twofold picture:nth-of-type(1) {
	width: 35%;
	margin-bottom: auto;
	aspect-ratio: 1/1;
	animation: links-rechts-schieben 2.5s infinite alternate;
}

.hovering-images.twofold picture:nth-of-type(2) {
	width:40%;
	aspect-ratio: 4/5;
	animation: oben-unten-schieben 2.5s infinite alternate;
	z-index: 2;
}

.hovering-images.twofold picture:nth-of-type(3) {
	width:25%;
	aspect-ratio: 1/1;
	display: flex;
	margin-top: auto;
	align-items: self-end;
	animation: rechts-links-schieben 2.5s infinite alternate;
}

/* SOCIALS --------------------------------------------------------------------*/
.socials {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
  justify-content: left;
	gap: 10px;
}

.socials li {
  margin: 0;
}

.socials li a {
  display: flex;
  align-content: center;
  position: relative;  
  width: 48px;
  height: 48px;  
  background-color: var(--color-three);
  border-radius: 100%; 
  text-align: center;
  color: #fff;  
  transition: var(--transition);
  z-index: 2;
}

.socials li a > * {
	margin: auto;
}

.socials li a::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background: var(--color-one);
  transform: scale(0.5);
  opacity: 0;
  transition: var(--transition);
  z-index: -1;
}

.socials li a:hover::after {
  transform: scale(1);
  opacity: 1;
}

/* TILES --------------------------------------------------------------------*/
.tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--column-gap);
}

.tiles .single-tile {
	border-radius: 12px;
	padding: 40px 30px;
}

/* -- Single Tile -- */
.single-tile {
	position: relative;
  border-radius: 6px;
  padding: 40px;
	background: var(--color-five);
  overflow: hidden;
  transition: var(--transition-slow);
}

.single-tile::before {
	content: '';
	position: absolute;	
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: var(--color-one);
	transition: var(--transition-slow);
	z-index: 1;
}

.single-tile .single-tile-content {
	position: relative;
	z-index: 2;
}

.single-tile:hover,
.single-tile:hover :where(a, h1, h2, h3, h4, h5, h6, [class^="heading-"], .btn, .linelink) {
	color: #fff;
}

.single-tile .linelink::before {
	background: #fff;
}

.single-tile:hover::before, 
.single-tile:focus::before {
	top: auto;
	bottom: 0;
	height: 100%;
}

.single-tile .icon-circle {
	position: relative;
	width: 60px;
	height: 60px;
	margin-bottom: 65px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-four);
	transition: var(--transition-slow);
	color: var(--color-two);
}

.single-tile .icon-circle::before {
	content: '';
  position: absolute;
	inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  transition: var(--transition-slow);
  transform: scale(0);
  z-index: 1;
}

.single-tile:hover .icon-circle::before {
	transform: scale(1);
}

.single-tile .icon-circle svg {
	z-index: 2;
}

/* BOX -----------------------------------------------------------------------*/
.box {
	height: 100%;
	border-radius: 12px;
	padding: 20px;
}

/* :where() hat Spezifität 0 – jede .bg-color-*-Klasse überschreibt den Standard */
:where(.box) {
	background: var(--color-five);
}

.box > :first-child { margin-top: 0; }
.box > :last-child  { margin-bottom: 0; }

/* PROCESS -------------------------------------------------------------------*/
ol.process {
	--process-dot: 42px;
	--process-gap: 40px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: var(--process-gap);
	margin: 50px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: process;
}

ol.process > li {
	position: relative;
	counter-increment: process;
}

/* Nummer */
ol.process > li::before {
	content: counter(process);
	display: grid;
	place-items: center;
	position: relative;
	z-index: 1;
	width: var(--process-dot);
	height: var(--process-dot);
	margin-bottom: 24px;
	border-radius: 100%;
	background: var(--color-two);
	color: #fff;
	font-family: var(--heading-font-family);
	font-size: 1.2rem;
	font-weight: 600;
	transition: var(--transition);
}

ol.process > li:hover::before {
	background: var(--color-three);
}

/* Verbindungslinie zum nächsten Schritt */
ol.process > li::after {
	content: '';
	position: absolute;
	width: calc(100% - var(--process-dot));
	top: calc(var(--process-dot) / 2 - 1px);
	left: calc(var(--process-dot) + (var(--process-gap) / 2));
	height: 2px;
	background: var(--color-border);
}

ol.process > li > :first-child { margin-top: 0; }
ol.process > li > :last-child  { margin-bottom: 0; }

/* //// INTERAKTIV ///////////////////////////////////////////////////////////*/
/* FORMULARE -----------------------------------------------------------------*/
input, textarea, select {
	min-width: 100%;
	max-width: 100%;
	width: 100%;
	font-family: var(--default-font-family);
	background: #fff;
	transition: var(--transition);
}

input.btn:is(:hover, :focus) {
	background: var(--color-three);
}

.error {
	color: #ff0000;
	border-color: var(--color-error);
}

:where(input:is([type=radio], [type=checkbox])) { 
	display: none;
}

:where(input:is([type=radio],[type=checkbox])) + label { 
	display: block;
	position: relative; 
	width: 100%;
}

:where(input:is([type=radio],[type=checkbox])) + label b { 
	display: block; 
	position: absolute; 
	inset: 0;
	min-width: 15px; 
	min-height: 15px; 
	background-repeat: no-repeat; 
	background-position: center; 
	background-size: contain;
	transition: var(--transition);
}

input[type=radio]:checked + label b {
	background-image: url(../images/layout/radio.svg);
}

input[type=checkbox]:checked + label b { 
	background-image: url(../images/layout/checkbox.svg); 
}

/* INPUTS CLICK */
:where(input:is([type=radio],[type=checkbox])) + label { 
	display: block;
	position: relative; 
	width: 100%; 
	padding: 0 0 0 35px;
}

:where(input:is([type=radio],[type=checkbox])) + label b { 
	display: block; 
	width: 25px; 
	height: 25px; 
	border: solid 2px var(--color-border); 
	background-color: #ffffff;
}

input[type=radio]:checked + label b { 
	border-color: var(--color-one);
}

input[type=checkbox]:checked + label b { 
	border-color: var(--color-one);
}

/* INPUTS TYPING */
:where(select, textarea, input:is([type="date"], [type="time"], [type="number"], [type="text"], [type="file"])) {
	border: solid 2px var(--color-border); 
	border-radius: 3px;
	padding: 10px;
	font-size: 1rem;
	color: var(--color-txt);
	outline: none;
}

:where(select, textarea, input:is([type="date"], [type="time"], [type="number"], [type="text"])):is(:focus,:hover) {
	border-color: var(--color-one);
}

.flying-labels :where(select, textarea, input:is([type="date"], [type="time"], [type="number"], [type="text"], [type="file"])) {
	padding: 20px 10px 10px 10px;
}

.flying-labels :where(select, textarea, input:is([type="date"], [type="time"], [type="number"], [type="text"])):is(:focus, :not(:placeholder-shown)),
.flying-labels select:not([value=""]) {
	 font-size: 0.9rem;
}

/* label */
:where(select, textarea, input:is([type="date"], [type="time"], [type="number"], [type="text"], [type="file"])) + label { 
	display: block; 
	height: fit-content;
	padding: 8px; 
	background: transparent; 
	pointer-events: none;
	transition: var(--transition);
}

.flying-labels :where(select, textarea, input:is([type="date"], [type="time"], [type="number"], [type="text"], [type="file"])) + label {
	position: absolute;
	top: 18px;
	left: 15px; 
}

.flying-labels :where(textarea, input:is([type="date"], [type="time"],[type="number"], [type="text"])):is(:focus, :not(:placeholder-shown)) + label,
.flying-labels select:focus + label, .flying-labels select:not([value=""]) + label { 
	top: -2px;
	left: 10px;
	padding: 4px 8px;
	color: #fff;
	background-color: var(--color-one);
	font-size: 0.8em; 
}

textarea { 
	overflow: auto;
	min-height: 120px; 
}

form .texterror p,
:where(select, textarea, input:is([type="date"], [type="time"], [type="number"], [type="text"], [type="file"], [type=radio], [type=checkbox])).error + label {
  color: #ea2222;
}


:where(select, textarea, input:is([type="date"], [type="time"], [type="number"], [type="text"], [type="file"],[type=radio],[type=checkbox])).error,
:where(input:is([type=radio],[type=checkbox]).error) + label b {
  color: #ea2222;
  border-color: #ea2222;
} 

/* OPEN STREET MAP (OSM) ------------------------------------------------------*/
#map { 
	position: relative;
	width: 100%;
	border-radius: 18px;
	padding: 0 0 100% 0; 
	white-space: nowrap;
	filter: grayscale(0.7);
}

#map .leaflet-popup-content {
	text-align: center;
}

.osm_error { 
	position: relative;
	width: 100%; 
	padding: 0 0 100% 0; 
	background: #dddddd;
}

.osm_error h4 { 
	position: absolute;
  inset: 10% 0;
  width: 80%;
  margin: auto;
  text-align: center;
  font-size: 1.1rem;
}

/* ACCORDION -----------------------------------------------------------------*/
.accordion .accTab {
	display: grid;
	grid-template-rows: auto 0fr;
	align-content: baseline;
	transition: grid-template-rows 0.35s ease;
	background: #ffffff80;
	border-radius: 6px;
	margin-bottom: 12px;
	overflow: hidden;
}

.accordion .accTab.active {
	grid-template-rows: auto 1fr;
}

.accordion .accTitle {
	position: relative;
	width: 100%;
	border: none;
	padding: 18px 20px;
	text-align: left;
	font-family: var(--default-font-family);
	font-weight: 600;
	font-size: 1rem;
	color: var(--color-two);
	cursor: pointer;
	background: #fff;
	transition: var(--transition-fast);
}

.accordion .accTitle:is(:hover,:focus) {
	background: var(--color-two);
	color: #fff;
}

.accordion .accTitle::after {
	transform: rotate(0deg);
	margin-left: -2px;
}

.accordion .accTitle:is(:hover,:focus)::after,
.accordion .accTitle.active::after {
	transform: rotate(90deg);
}

.accordion .accTitle::after, 
.accordion .accTitle::before {
 content:'';
 display:block;
 position:absolute;
 top: 0;
 bottom:0;
 margin:auto;
 background: var(--color-txt);
 transition: var(--transition-fast);
}

.accordion .accTitle:before {
  right:15px;
  width:18px;
  height:2px
}
.accordion .accTitle:after {
  right:23px;
  width:2px;
  height:18px;
}

.accordion .accContent {
	min-height: 0;
	overflow: hidden;
	padding: 0 20px;
	transition: var(--transition);
}

.accordion .accTab.active .accContent {
	padding: 20px;
}

/* TABS -----------------------------------------------------------------------*/
.tabs {
	position: relative;
	margin: 20px 0 40px 0;
}

.tabs .tabs-switches {
	display: flex;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--color-three);
}

.tabs .tab-switch {
	cursor: pointer;
	width: inherit;
	margin: 0;
	padding: 20px 0;
	text-align: center;
}

.tabs .tab-switch:hover,
.tabs .tab-switch.active {
	color: var(--shade02);
	background: #fff;
}

div.tabs-contents {
	position: relative;
	background: #fff;
}

.tabs .tab-content {
	display: none;
	padding: 30px;
	box-shadow: var(--box-shadow);
}

.tabs, .tabs .tabs-switches, .tabs .tab-switch, .tabs .tab-content {
	transition: var(--transition-slow); 
}

.tabs .tab-content.active {
	display: block;
}

/* --- vertical --- */
.tabs.vertical {
	display: flex;
	width: 100%;
}

.tabs.vertical .tabs-switches {
	display: block;
	width: 25%;
}

.tabs.vertical .tab-switch {
	width: 100%;
}

.tabs.vertical .tabs-contents {
	width: 75%;
}

.tabs.vertical .tab-content {
	height: 100%;
}

/* --- reverse ---*/
.tabs.vertical.reverse {
	flex-direction: row-reverse;
}

/* --- colors --- */
.bg-color-three .tabs .tabs-switches { background: var(--color-two); color: #fff; }
.bg-color-three .tabs .tab-switch.active { color: var(--color-txt); }
.bg-color-four .tabs .tabs-switches { background: var(--color-border); }
.bg-color-five .tabs .tabs-switches { background: var(--color-four); }


/* FOOTER --------------------------------------------------------------------*/
footer {
	background: var(--color-two);
	color: #fff;
	--column-gap: 40px;
}

footer a {
	color: #fff;
}

footer .sitemap {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 40px;
	padding: 80px 40px;
	margin: 0 auto;
}

footer .sitemap::before {
	content: '';
	position: absolute;
	top: 50px;
	left: 0;
	height: calc(100% - 100px);
	width: 33.333%;
	border-radius: 0 22px 22px 0;
	background: #fff;
}

footer .sitemap .wave-bg {
	transform: translateY(35%);
  opacity: 0.05;
}

/* Logobox */
footer .logo-box {
	align-content: center;
	color: var(--color-txt);
	background: #fff;
}

footer .logo-box .logo img {
	width: 200px;
	height: auto;
}

footer .logo-box a {
	color: var(--color-one)
}

footer .logo-box .contact {
	padding: 20px 50px;
	line-height: 1.2;
}

footer .logo-box .contact .phone {
	font-size: 2em;
  font-weight: 600;
  line-height: 1.8;
	color: var(--color-txt);
}

footer .logo-box .contact .mail:is(:hover, :focus) {
	color: var(--color-txt);
}

footer .logo-box .contact .phone:is(:hover, :focus) {
	color: var(--color-two);
}

/* Info */
footer .info-box ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

footer .info-box ul li a {
  color: #fff;
}

footer .info-box ul li a:is(:hover, :focus) {
  color: var(--color-one);
}

/* Copyright-Leiste */
footer .legals .content,
footer .legals ul {
	display: flex;
}

footer .legals {
	display: flex;
	justify-content: space-between;
	padding: 20px 40px;
	background: var(--color-txt)
}

footer .legals a:is(:hover,:focus) {
	color: var(--color-one);
}

footer .legals ul {
  flex-wrap: wrap;
	padding: 0;
  margin: 0 -10px;
  list-style: none;
  align-items: center;  
}

footer .legals ul li {
	margin: 0;
  padding: 0 10px;
  position: relative;
}

footer .legals ul li:first-of-type::after {
	display: none;	
}

footer .legals ul li::after {
  content: "";	
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  height: 1rem;
  width: 1px;
  margin: auto;
  background: var(--color-border);
}

footer .legals .copyright {
	margin: 0;
}

footer .wisl {
	font-size: 0.7rem;
}

/*//////////////////////////////// JS-HELPER /////////////////////////////////*/
/* Opener und Closer -------------------------------------------------------- */
.is-opened {
  overflow: hidden;
  max-height: 100%;
  opacity: 1;
  transition: var(--transition);
}

/* Modal-Blur -------------------------------------------------------------- */
body.modal-blur {
	filter: blur(10px);
}

/* Scroll-in-view Animationen ---------------------------------------------- */
.fade-in, .fade-up, .fade-down, .fade-left, .fade-right, .fade-zoom-in, .fade-zoom-out {
	opacity: 0;	
	transition: var(--transition-slow);
}

.fade-up				{ translate: 0 30%; }
.fade-down			{ translate: 0 -30%; }
.fade-left			{ translate: 30% 0; }
.fade-right			{ translate: -30% 0; }
.fade-zoom-in 	{ transform: scale(0.5); }
.fade-zoom-out  { transform: scale(1.5); }
:where(.fade-in, .fade-up, .fade-down, .fade-left, .fade-right, .fade-zoom-in, .fade-zoom-out):is(.active) {
	opacity: 1;
	translate: 0;
	transform: none;
	transition: var(--transition-slow);
}

/*////////////////////////////// ANIMATIONEN /////////////////////////////////*/
@keyframes fade-down {
	0%	 { transform: translateY(-30px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }	
}

@keyframes fade-down-reverse {
	0%	 { transform: translateY(0); opacity: 1; }
	100% { transform: translateY(-30px); opacity: 0; }	
}

@keyframes von-oben-in-view {
	0%	 { transform: translateY(-100%); }
	100% { transform: translateY(0); }	
}

@keyframes nach-oben-aus-view {
	0%	 { transform: translateY(0); }
	100% { transform: translateY(-100%); }	
}

@keyframes links-rechts-schieben {
	0%	 { transform: translateX(30px); }
	100% { transform: translateX(70px); }	
}

@keyframes rechts-links-schieben {
	0%	 { transform: translateX(-20px); }
	100% { transform: translateX(-60px); }	
}

@keyframes oben-unten-schieben {
	0%	 { transform: translateY(0); }
	100% { transform: translateY(-20px); }	
}

/*//////////////////////////// RESPONSIVE: TABLET /////////////////////////////*/
@media only screen and (max-width: 1279px) {
	body {
		word-break: break-word;
    word-wrap: break-word;
	}
	
	h1, h2, h3, h4, h5, h6, [class^="heading-"] {
		hyphens: auto;
	  overflow-wrap: break-word;
	  hyphenate-limit-chars: 8 4 4; /* min. Wortlänge, min. vor/nach Trennung */
	}
	
	h1, .heading-xl		{ font-size: 2.6rem; }
	h2, .heading-l		{ font-size: 2.2rem; }
	h3, .heading-m		{ font-size: 1.8rem; }
	h4, .heading-s		{ font-size: 1.6rem; }
	h5, .heading-xs		{ font-size: 1.2rem; }
	h6, .heading-xxs	{ font-size: 1.1rem; }

	div.switch {
		display: block;
		height: 112px;
		transition: var(--transition);		
	}
	
	.flat .switch {
		height: 86px;
	}
	
	nav {
		padding: 30px 100px 30px 40px;
	}
	
	.flat nav {
		padding: 20px 100px 20px 40px;
	}
	
	nav ul {
		display: none;		
		position: absolute;
		top: 0px;
    right: 30px;
    z-index: 10002;
		padding: 20px 0;
		background: #fff;
    box-shadow: var(--box-shadow-small);
		animation: 0.3s fade-down-reverse ease-in-out;
	}
	
	nav ul li {
		display: block;
		text-align: center;
	}
	
	nav ul li ul.subnav {
  	top: 0;		
		left: -100%;
  	width: 100%;
  	border-radius: 0;
	}
	
	nav ul.active {
		display: block;
		animation: 0.3s fade-down ease-in-out;
	}
	
	.content {
		margin-inline: 20px;
	}
	
	.categories {
	  grid-template-columns: repeat(2, 1fr);
	  gap: var(--column-gap);
	}

	.flex:not(.mobile) { display: block; }

	.tiles {
		grid-template-columns: repeat(2, 1fr);
	}
	
	section.theme .bg-img {
		left: -30%;
		width: 200%;
	}
	
	section.theme.hero .bg-img {
		width: 200%;
	}
	
	section.theme.hero .btn {
		margin: 0;
	}
	
	.osm_error h4 {
		inset: 5% 0;
	  width: 95%;
	  font-size: 0.8rem;		
	}
		
	/* FOOTER ----------------------------*/
	footer .sitemap {
	  grid-template-columns: 1fr;
	}
	
	footer .sitemap::before {
		height: 215px;
  	width: calc(100% - 20px);
	}
}

/*//////////////////////////// RESPONSIVE: MOBIL /////////////////////////////*/
@media only screen and (max-width: 740px) {
	:root {
		--frame-size: 10px;
		--default-font-size: 15px;
  }

	ul.icon-list {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Prozessstrahl vertikal */
	ol.process {
		--process-dot: 44px;
		--process-gap: 32px;
		grid-auto-flow: row;
		margin-top: 30px;
	}

	ol.process > li {
		min-height: var(--process-dot);
		padding-left: calc(var(--process-dot) + 20px);
		text-align: left;
	}

	ol.process > li::before {
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
		font-size: 1.2rem;
	}

	ol.process > li::after {
		top: calc(var(--process-dot) + 8px);
		bottom: calc(-1 * var(--process-gap) + 8px);
		left: calc(var(--process-dot) / 2 - 1px);
		right: auto;
		width: 2px;
		height: auto;
	}
	
	ol.process > li:last-child::after {
		display: none;
	}

	.mobile {
		display: block;
	}
	
	a.show_cookiemanager {
		left: 45px;
	}
	
	body {
		padding-top: 0;
		word-break: break-word;
 		word-wrap: break-word;
	}
			
	.show-desktop { 
		display: none 
	}
	
	.show-mobile { 
		display: block 
	}
	
	.flex:not(.mobile) { display: block; }
	
	.columns .column:where(
		.one-tenth, .two-tenths, .three-tenths, .four-tenths,
		.six-tenths, .seven-tenths, .eight-tenths, .nine-tenths,
		.one-sixth, .two-sixths, .three-sixths, .four-sixths, .five-sixths,
		.one-quarter, .two-quarters, .three-quarters,
		.one-third, .two-thirds,
		.half, .five-tenths
	):not(.mobile) {
		flex: 0 0 100%;
	}
	
	div.switch {
		width: 80px;
		height: 80px;
	}
	
	.flat div.switch {
		width: 70px;
		height: 70px;
	}
	
	nav 						  			 { padding: 11px 20px; }
	header.flat nav				   { padding: 11px 20px; }
	header.flat .logo img	   { width: 162px; }
	nav .btn								 { display: none;	}
	
	nav ul {
  	top: 78px;	
  	right: 0;  		
		width: 100%;
  	margin: 0;
  	padding: 0 20px;
  	box-shadow: 0 8px 8px rgba(0,0,0,0.1);
	}
	
	header.flat nav ul {
		top: 68px;
	}
	
	nav ul li a {
		text-align: left;
	}
	
	nav ul li ul.subnav {
	 	position: relative;
    top: 0;
    left: 0;
		background: transparent;
		visibility: visible;
		transform: none;
		opacity: 1;
		box-shadow: none;
  }
  
  nav ul li ul.subnav a {
  	color: var(--color-one)
  }
	
	a.show_cookiemanager {
		width: 40px;
		height: 40px;
		left: calc(50% - 165px);
    bottom: 20px;
	}
	
	.panel {
		display: flex;
		max-width: 350px;
		right: 0;
		left: 0;
		bottom: 10px;
		width: calc(100% - 50px);
		margin: auto;
		justify-content: space-between;
	}

	.panel a, .scroll-buttons	{
		margin-top: 0;
	}

	.panel::before {
		/* Dient als Platzhalter und Pseudo "show_cookiemanager" */
		content:'';
		display: block;
	}
	
	.panel::before, .panel a, .scrolltop, .scrolldown {
		width: 40px;
		height: 40px;
	}
	
	.panel a *:is(svg, img) {
		display: block;
		width: 20px;
		height: 20px;
		margin: auto;
	}
	
	.panel .togglebox {
		display: none;
	}
	
	.tiles {
		grid-template-columns: 1fr;
	}
	
	.cards {
	  grid-template-columns: 100%;
	  grid-row-gap: 40px;
	  grid-column-gap: 0;
	  width:100%;
	}
		
	section.theme {
		margin-top: 70px;
	}
	
	section.theme.hero {
		min-height: 80vh;
		clip-path: none;
		padding: var(--section-padding);
	}
	
	section.theme.hero::before {
	  height: 100%;
	  top: -5px;
	  left: -40%;
	  width: 103%;
	  opacity: 0.2;
	}
	
	.herobox {
		margin-top: 0;
	}
	
	.hero-follow {
  	margin-top: -125px;
	}
	
	ul.benefits {
	  column-count: 1;
	  gap: 0;
	}
	
	/* TILES -------------------------------*/
	.categories {
	  grid-template-columns: repeat(1, 1fr);
	  gap: var(--column-gap);
	}
	
	/* HOVERING-IMAGES ---------------------*/
	.hovering-images {
		padding-top: 20px;
	}
	
	/* Tabs --------------------------------*/
	.tabs .tabs-switches {
  	display: block;
  }	
  
  .tabs.vertical {
  	display: block;
  }
  
  .tabs.vertical .tabs-switches,
  .tabs.vertical .tabs-contents {
  	width: 100%
  }
	
	/* FOOTER -----------------------------*/
	
	footer .sitemap::before {
		height: 30%
	}
	
	footer .logo-box .logo {
		margin-bottom: 20px;
	}
	
	footer .logo-box p {
		margin: 0;
	}
	
	footer .legals,
	footer .legals ul {
		display: block;
	}
	
	footer .legals {
		padding-bottom: 80px;
	}
	
	footer .legals ul li {
		margin: 12px 0;
	}
	
	footer .legals ul li::after {
		display: none;
	}
	
	footer .legals .copyright {
		margin-top: 24px;
	}
}

@media only screen and (max-width: 400px) {
	a.show_cookiemanager {
	  left: 38px;
  }
}