/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: var(--base-font-size);
	font: inherit;
	vertical-align: baseline;
	marker: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
button{
	background-color: none;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	width: 100%;
	height: auto;
}
a {
	text-decoration: none;
	color: inherit;
}
figure {
	line-height: 0;
}
.scale-100 {
  width: 100% !important;
  margin: auto;
  margin-bottom: calc(var(--unit)*4);
}

.scale-75 {
  width: 75% !important;
  margin: auto;
  margin-bottom: calc(var(--unit)*4);
}

.scale-50 {
  width:30% !important;
  margin: auto;
  margin-bottom: calc(var(--unit)*4);

}

@media only screen and (max-width: 768px) {
  /* Alle Scale-Klassen auf dieselbe Größe setzen */
  .scale-100,
  .scale-75,
  .scale-50 {
    width: 90% !important; /* Gleiche Breite auf mobilen Geräten */
    margin: auto;
    padding-bottom: 10%; /* Kein zusätzliches Padding auf mobilen Geräten */
  }
}

@media screen and (min-width: 767px) and (max-width: 1024px) {
  /* Alle Scale-Klassen auf dieselbe Größe setzen */
  .scale-100,
  .scale-75,
  .scale-50 {
    width: 70% !important; /* Gleiche Breite auf mobilen Geräten */
    margin: auto;
    padding-bottom: 10%; /* Kein zusätzliches Padding auf mobilen Geräten */
  }
}




*, *::after, *::before {
  box-sizing: border-box;
	-webkit-box-sizing: border-box;
  cursor:none;
}

body::-webkit-scrollbar {
	display: none;
}

body {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	
}








/* Kirby Grid */
.grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-row-gap: calc(var(--unit) * 2.5);
	position: relative;
}

.grid > .column {
	grid-column: span var(--span);
  height: 100%;
}

@media screen and (min-width: 1024px) {
	.grid {
		--gutter: calc(var(--unit) * 2.5);
		grid-template-columns: repeat(12, 1fr);
		grid-gap: var(--gutter);
	}
}

/* M Sized für Ipad etc */
@media screen and (min-width: 767px) and (max-width: 1024px) {
	.grid {
		--gutter: calc(var(--unit) * 2.5);
		grid-template-columns: repeat(8, 1fr);
		grid-gap: var(--gutter);
    grid-row-gap: calc(var(--unit) * 4);
    place-content: start space-evenly;
	}

  .grid > .column:nth-child(3):nth-last-child(1) {
    grid-column: 3 / span 4; /* Das 3. und letzte Element spannt über 4 Spalten */
  }

 /* Wenn es genau 2 Boxen (columns) gibt */
.grid > .column:nth-child(1):nth-last-child(2), /* Erster von zwei */
.grid > .column:nth-child(2):nth-last-child(1) { /* Zweiter von zwei */
  grid-column: 2 / span 6; /* Beide Boxen spannen über 6 Spalten */
}

}

/* Mobile Styles für das Grid */
@media all and (max-width: 767px) {
	.grid {
		display: grid;
		grid-template-columns: repeat(1, 1fr); /* Einspaltiges Layout für mobile Geräte */
		grid-row-gap: calc(var(--unit) * 6); /* Etwas mehr Abstand zwischen den Zeilen */
		padding-left: var(--unit);
		padding-right: var(--unit);
	}

	.wrap-true {
		padding-left: 10vw !important; /* Weniger Padding für mobile Geräte */
		padding-right: 10vw !important;
	}

	.wrap-false {
		padding-left: 6vw !important; /* Etwas engeres Padding auf mobilen Geräten */
		padding-right: 6vw !important;
	}
}

.wrap-true {
	padding-right: 20vw;
	padding-left: 20vw;
}
.wrap-false {
	padding-right: 7.5vw;
	padding-left: 7.5vw;
}


@media only screen and (min-width: 1800px) {
  .wrap-true {
    padding-right: 30vw;
    padding-left: 30vw;
  }
  .wrap-false {
    padding-right: 15vw;
    padding-left: 15vw;
  }
 }


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

.text-color-true h1,
.text-color-true h2,
.text-color-true h3,
.text-color-true h4,
.text-color-true h5,
.text-color-true h6,
.text-color-true p,
.text-color-true a,
.text-color-true span,
.text-color-true strong,
.text-color-true em,
.text-color-true div,
.text-color-true section,
.text-color-true footer,
.text-color-true header,
.text-color-true nav,
.text-color-true ul,
.text-color-true ol,
.text-color-true li {
  color: var(--color-white) !important; /* Erneut die Textfarbe auf weiß setzen */
}
.text-color-true .btn {
  border: 1px solid var(--color-white) !important;
  background-color: transparent !important; /* Heller Hintergrund für den Normalzustand */
  color: var(--color-white) !important; /* Dunkle Schrift für den Normalzustand */
}

.text-color-true .btn:hover {
  background-color: var(--color-white) !important; /* Dunkler Hintergrund auf Hover */
  color: var(--color-green-dark) !important; /* Weiße Schrift auf Hover */
}

.text-color-true {
  .toggle-icon > svg {
    fill: var(--color-white);
  }
  .accordion-item {
    border-bottom: 1.5px solid var(--color-white);
  }
}


.text-color-false  {
  color: inherit;
}


/* Spacing */

.bottomspace-small {
	padding-bottom: calc(var(--unit) * 4);
}

.bottomspace-big {
	padding-bottom: calc(var(--unit) * 10);
}

.bottomspace-neg {
	margin-bottom: -12%;
}

.topspace-small {
	padding-top: calc(var(--unit) * 4);
}

.topspace-big {
	padding-top: calc(var(--unit) * 10);
}

.topspace-neg {
	margin-top: -12%;
}

.margin-s {
  margin-bottom: .75rem;
}
.margin-m {
  margin-bottom: 1.5rem;
}
.margin-l {
  margin-bottom: 3rem;
}
.margin-xl {
  margin-bottom: 4.5rem;
}
.margin-xxl {
  margin-bottom: 6rem;
}

.Abstand{
  height:50vh;
}

@media only screen and (max-width: 768px) {
  
  .ref > .topspace-small {
    padding-top: calc(var(--unit) * 0)!important;
  }
  
  .ref > .topspace-neg {
    padding-top: calc(var(--unit) * 0) !important;
  }

  .ref > .topspace-big {
    padding-top: calc(var(--unit) * 0)!important;
  }

  .ref > .bottomspace-big {
    padding-bottom: calc(var(--unit) * 0)!important;
  }
  
  .ref > .bottomspace-neg {
    margin-bottom: calc(var(--unit) * 0)!important;
  }

  .ref > .bottomspace-small {
    padding-bottom: calc(var(--unit) * 0)!important;
  }
}






/* Typography */
@font-face {
	font-family: "Basier";
	src: url("../fonts/basiersquare-regular-webfont.woff");
	font-weight: normal;
  font-style: normal;
}

@font-face {
	font-family: "Basier Italic";
	src: url("../fonts/basiersquare-regularitalic-webfont.woff");
	font-weight: normal;
  font-style: italic;
}


@font-face {
  font-family: "Spectral";
  src: url("../fonts/Spectral-Regular.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Spectral Italic";
  src: url("../fonts/Spectral-Italic.ttf");
  font-weight: normal;
  font-style: italic;
}

::selection {
  color: var(--color-green-highlight);
}

i {
  font-style: italic;
}

em {
    font-style: italic !important;
    font-family: "Spectral Italic" !important;
    font-size: 110% !important;
    letter-spacing: -1% !important;
}

.uppercased {
  text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}


p {
  line-height: 1.25em !important;
  color: var(--color-green-dark) !important;
  text-align: center !important;
  hyphens: none; /* Verhindert automatische Trennungen */
  -moz-hyphens: none;
  -webkit-hyphens: none;
  word-break: normal; /* Standardzeilenumbruch ohne Trennungen */
  -ms-word-break: normal; /* Verhindert Zeilenumbruch innerhalb von Wörtern */
  word-wrap: normal; /* Standardverhalten für Zeilenumbruch */
  overflow-wrap: normal; /* Verhindert Zeilenumbruch innerhalb von Wörtern */
}
.left > p{
    text-align: left !important;
}
.left {
  padding-top: calc(var(--unit)*2)!important;
  text-align: left !important;
}



p > em{
  font-family: "Basier Italic" !important;
  font-size: 100% !important;
}

p a {
  text-decoration: underline;
}
h1 {
  font-size: var(--font-size-4) !important;
  line-height: 0.8em !important;
  color: var(--color-green-dark);
  text-align: center;
  font-family: var(--font-family-serif) !important;
  letter-spacing: -0.05em !important;
}
h1 > p {
  text-align: center;
  color: var(--color-green-light) !important;
  line-height: 1em !important;
}

h2, 
h2 > p {
  text-align: center;
  font-size: var(--font-size-3) !important;
  font-family: var(--font-family-serif) !important;
  letter-spacing: -0.05em;
  padding-bottom: var(--unit);
  color: var(--color-green-dark);
}
h3, 
h3 > p{
  text-align: center;
  font-size: var(--font-size-1) !important;
  font-family: var(--font-family-serif) !important;
  letter-spacing: -0.05em;
  padding-bottom: calc(var(--unit)*2) !important;
  color: var(--color-green-dark);
  line-height: normal;
  
}
h4,
h4 > p{
  text-align: center;
  letter-spacing: -0.05em;
  line-height: 1.5em !important;
  padding-bottom: var(--unit) !important;
  letter-spacing: 0.125em;
  text-align: center;
  color: var(--color-green-dark);
  text-transform: uppercase;
}



/* Basics */

:root {
  --unit: 10px;
  --padding: 1.5rem;
  --color-black: #000;
  --color-white: #fff;
  --color-light: #efefef;
  --color-green-dark:  #025543;
  --color-green-light: #3DB278;
  --color-green-highlight: #29E4CD;
  --color-green-sage: #F2F7F2;
  --color-green-moss: #6B796F;
  --color-green-moss-2:#CBD1CC;
  --color-green-moss-3: #B5BEB8;
  --font-family-sans: "Basier", sans-serif;
  --font-family-serif: "Spectral", serif;
  --base-font-size: 12px !important; 
  --font-size-1: 1.75em; 
  --font-size-2: 3.5em; 
  --font-size-3: 4.5em; 
  --font-size-4: 8em; 
  --font-size-5: 10em; 
  --font-size-6: 16em !important;
}
body {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  font-size: var(--base-font-size);
  hyphens: auto;
  font-family: var(--font-family-sans);
  color: var(--color-black);  
  transition: all 0.5s ease;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--base-font-size);
  font-family: var(--font-family-sans);
  color: var(--color-black);  
  line-height: 1.5em;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: var(--base-font-size);
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
hr {
  border: none; /* Entfernt alle Standard-Ränder */
  border-bottom: 1.5px solid var(--color-green-dark); /* Fügt nur eine untere Linie hinzu */
  margin-bottom: calc(var(--unit)*2); /* Optional, um den Abstand unter der Linie zu definieren */
}
img {
  width: 100%;
}
li {
  list-style: none;
}
a {
  color: currentColor;
  text-decoration: none;
}
strong, b {
  font-weight: 600;
}
small {
  font-size: inherit;
  color: var(--color-text-grey);
}

.bg-light {
  background-color: var(--color-light);
}
.color-grey {
  color: var(--color-text-grey);
}
section {
  background-color: var(--background-color, transparent);
}
main {
  min-height: 100vh;

  z-index: 0;
  position: relative;
  font-family: var(--font-family-sans);

}
.hidden {
  display: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

@media (max-width: 768px) {
	html, body {
		overflow-x: hidden !important;
	}
}


/* Mobile Styles */
@media only screen and (max-width: 768px) {

  /* Anpassen der Basis-Schriftgröße */
  :root {
    --base-font-size: 14px !important; /* Reduziert die Basis-Schriftgröße auf mobilen Geräten */
    --font-size-1: 2em; 
    --font-size-2: 2.5em; 
    --font-size-3: 3.25em; 
    --font-size-4: 5em; 
    --font-size-5: 6em; 
    --font-size-6: 10em !important;
  }

  body, html {
    font-size: var(--base-font-size);
    line-height: 1.4em; /* Etwas kompakteres Line-Height für mobile Bildschirme */
  }

  /* Passen Sie Abstände, Paddings und Margins an, um alles kompakter zu machen */
  body {
    padding: 0;
    margin: 0;
  }
}

/* M Sized für Ipad etc */
@media screen and (min-width: 767px) and (max-width: 1024px) {
	/* Anpassen der Basis-Schriftgröße */
  :root {
    --base-font-size: 14px !important; /* Reduziert die Basis-Schriftgröße auf mobilen Geräten */
    --font-size-1: 1.5em; 
    --font-size-2: 3.25em; 
    --font-size-3: 3.25em; 
    --font-size-4: 7em; 
    --font-size-5: 6em; 
    --font-size-6: 10em !important;
  }
}

/* Images */

.video,
.img {
  position: relative;
  display: block;
  --w: 1;
  --h: 1;
  padding-bottom: calc(100% / var(--w) * var(--h));
  background: var(--color-black);
}
.img img,
.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.img[data-contain] img {
  object-fit: contain;
}
.img-caption,
.video-caption {
  padding-top: .75rem;
  line-height: 1.5em;
}

/* Menu */
.menu {
  font-family: var(--font-family-sans);
  position: fixed;
  top: 0;
  right: -100vw;
  bottom: 0;
  width: 100vw;
  background-color: var(--color-green-dark);
  color: var(--color-green-highlight);
  transition: right 0.3s ease-in-out;
  padding-left: calc(var(--unit)*4);
  padding-right: calc(var(--unit)*8);
  padding-bottom: calc(var(--unit)*4);
  padding-top: calc(var(--unit)*4);
  z-index: 1000000;
  display: flex;
  justify-content: space-between;
}

.menu-left {
  flex: 0.55;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 120px;
}

.menu-right {
  flex: 0.45;
  display: flex;
  padding-top: 6.25em;
  flex-direction: column;
}

.menu-active .menu {
  right: 0;
}

.menu-inactive .menu {
  right: -100vw;
}

.menu-text p{
  font-size: var(--font-size-2);
  text-align: left !important;
  color: var(--color-green-highlight)!important;
  line-height: 1 !important;
}

.menu-text p >em{
  font-family: "Spectral Italic" !important;
 font-size: 110% !important;
}

.menu-contact{
  text-transform: uppercase;
  p {
  color: var(--color-green-highlight)!important;
  text-align: left !important;
  letter-spacing: 0.125em;
  }
  
}
.menu-contact-item{
  font-size: var(--font-size-2);
  text-transform: none;

  p{
    color: var(--color-green-highlight)!important;
    text-align: left !important;
    letter-spacing: 0 !important;
  }
  a {
    text-decoration: none !important;
    color: var(--color-green-highlight)!important;
  }
}


.menu-pagelist{
  font-family: var(--font-family-serif);
  font-size: calc(var(--font-size-2)*1.2);
  letter-spacing: -0.05em;
  padding-bottom: 40px;
}

.menu-pagelist li {
  padding: 10px 0; /* Abstand oben und unten */
  border-bottom: 1px solid var(--color-green-highlight); /* 1px Linie unten, du kannst die Farbe anpassen */
  transition: transform 0.3s ease; /* Übergangseffekt für die transform-Eigenschaft */
}

.menu-pagelist li:hover {
  transform: translateX(15%);
}

.legal {
  display: flex;
  flex-direction: row;
}

.legal-menu-item {
  margin-bottom: 10px;
  margin-right: var(--unit);
  letter-spacing: 0.125em;
}

.legal-menu-item a {
  text-transform: uppercase;
  color: var(--color-green-highlight);
}

.menu-bar {
  position: fixed;
  right: 1em;
  top: var(--unit);
  bottom: 0;
  max-width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: var(--unit);
  z-index: 10000;
  color: var(--color-green-dark);
  font-family: var(--font-family-sans);
  text-transform: uppercase;
  
}

.menu-bar-menu {
  right: 1em;
  top: var(--unit);
  bottom: 0;
  max-width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: var(--unit);
  height: 100vh;
  position: absolute;
  text-transform: uppercase;

}

.menu-btn {
  writing-mode: vertical-lr;
  text-align: center;
  letter-spacing: 0.125em;
  margin-bottom: 20px;
  border: 1px solid var(--color-green-dark);
  border-radius: calc(var(--unit)*2);
  padding: var(--unit);
  min-height: 80px;
  background-color: transparent; /* Heller Hintergrund für den Normalzustand */
  color: var(--color-green-dark); /* Dunkle Schrift für den Normalzustand */
  transition: background-color 0.3s, color 0.3s; /* Sanfte Übergänge */
}

.menu-btn:hover {
  background-color: var(--color-green-dark); /* Dunkler Hintergrund auf Hover */
  color: var(--color-white); /* Weiße Schrift auf Hover */
}

.menu-close-btn {
  writing-mode: vertical-lr;
  text-align: center;
  letter-spacing: 0.125em;
  margin-bottom: 20px;
  border: 1px solid var(--color-green-highlight);
  border-radius: calc(var(--unit)*2);
  padding: var(--unit);
  min-height: 80px;
  background-color: var(--color-green-dark); /* Heller Hintergrund für den Normalzustand */
  color: var(--color-green-highlight); /* Dunkle Schrift für den Normalzustand */
  transition: background-color 0.3s, color 0.3s; /* Sanfte Übergänge */
}

.menu-btn:hover {
  background-color: var(--color-green-highlight); /* Dunkler Hintergrund auf Hover */
  color: var(--color-green-dark); /* Weiße Schrift auf Hover */
}
.icon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.icon-container a {
  margin-bottom: 20px;
  max-height: 100px;
}

.icon-container a img {
  max-height: 60px;
  max-width: 50px;
  transition: transform 0.3s ease-in-out; /* Adds a smooth transition effect */
}

.icon-container a img:hover {
  transform: rotate(15deg); /* Rotates the icon by 15 degrees on hover */
}

.language-menu {
  writing-mode: vertical-lr;
  text-align: center;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.language-menu li {
  list-style: none;
  margin-bottom: 10px;
  opacity: 0.25;
  letter-spacing: 0.125em;
}

.language-menu li.active {
  opacity: 1 !important;
}

.language-menu a {
  text-decoration: none;
}


/* Mobile Styles für Menü */
@media only screen and (max-width: 926px) {
  
  /* Menu Bar */
  .menu-bar {
    position: fixed;
    padding: 0;
    right: 0;
    max-height: 7.5vh;
    width: 100%;
    max-width: 100vw;
    display: flex;
    justify-content: center; /* Zentriert den Button horizontal */
    align-items: end; /* Zentriert den Button auch vertikal */
    z-index: 10000;
  }

  /* Verstecke die Icons und das Language-Menü auf mobilen Geräten */
  .menu-bar >
    .icon-container {
      display: none !important;
  }


  .menu-text {
    display: none;
  }

  /* Menü-Button Anpassungen */
  .menu-btn {
    writing-mode: horizontal-tb; /* Horizontaler Textfluss */
    text-align: center;
    height: auto;
    min-height: auto;
    min-width: 80px;
    top: 20px;
    position: fixed;
    left: 50%; /* Verschiebe ihn horizontal in die Mitte */
    transform: translateX(-50%); /* Zentriere den Button */
    z-index: 10001; /* Stellt sicher, dass er immer über anderen Elementen liegt */
    border: 1px solid var(--color-green-dark);
    border-radius: calc(var(--unit)*2);
    padding: var(--unit);
    background-color: transparent;
    color: var(--color-green-dark);
    transition: background-color 0.3s, color 0.3s; /* Sanfte Übergänge für Hover */
  }
  /* Menü inaktiver Zustand (versteckt) */
  .menu-inactive .menu {
    right: -100vw; /* Menü ist außerhalb des Viewports */
  }

  /* Menü aktiver Zustand (sichtbar) */
  .menu-active .menu {
    right: 0; /* Menü wird auf dem Bildschirm angezeigt */
  }

   /* Menü-Struktur für mobile Geräte */
   .menu {
    display: flex;
    flex-direction: column-reverse; /* Stellt sicher, dass die Abschnitte untereinander stehen */
    align-items: flex-start;
    justify-content: flex-start;
    width: 100vw; /* Volle Breite auf mobilen Geräten */
    padding: calc(var(--unit)*2);
  }

  .menu-bar-menu {
    padding: 0;
    top: 20px;
    right: 0;
    max-height: 7.5vh;
    width: 100%;
    max-width: 100vw;
    display: flex;
    justify-content: center; /* Zentriert den Button horizontal */
    align-items: end; /* Zentriert den Button auch vertikal */
    z-index: 10000;
  }

  /* Zentrierter Zurück-Button */
  .menu-close-btn {
    writing-mode: horizontal-tb; /* Horizontaler Textfluss */
    height: auto;
    min-height: auto;
    min-width: 80px;
    position: absolute;
    z-index: 300;
    top: 2.5vw; /* Abstand vom oberen Rand */
    left: 50%; /* Verschiebe ihn horizontal in die Mitte */
    transform: translateX(-50%); /* Zentriere den Button */

  }

  /* Language Menu unter dem Zurück-Button */
  .language-menu {
    display: flex;
    justify-content: center;
    width: auto;
    padding-top: 0px;
    writing-mode: horizontal-tb;
  }

  .language-menu li {
    list-style: none;
    margin-right: 20px;
    opacity: 1;
    letter-spacing: 0.125em;
  }

  /* Textabschnitt: Willkommen */
  .menu-left {
    padding-top: 7.5vh;
    padding-right: 0;
    width: 100%;
    justify-content: flex-start; 
    gap: calc(var(--unit)*2); 
}

  /* Page List (Seitenliste) */
  .menu-right {
    padding-top: 10vh;    
    width: 100%;
    flex: auto;
  }

  /* Kontaktinformationen */
  .menu-contact {
    padding: 20px 0;
    width: 100%;
    order: 3;
    text-transform: uppercase;
    color: var(--color-green-highlight);
  }

  .menu-contact-item{
    height: auto;
        padding-bottom: 20px;
  }
  /* Impressum / Datenschutz (Legal) */
  .legal {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: flex-start;
    order: 4;
    padding-top: 20px;
  }

  .legal-menu-item {
    margin-right: var(--unit);
    letter-spacing: 0.125em;
    /*color: var(--color-green-highlight);*/
  }


.menu-pagelist li {
  padding: 16px 0; /* Abstand oben und unten */
}

}

@media only screen and (min-width: 926px) and (max-width: 1080px) {
  .menu-left{
    padding-right: 60px;
  }
  .menu-contact-item{
    overflow: visible;
    width: 200%;
    height: auto;
  }
}


/* Footer */
footer {
  font-family: var(--font-family-sans);
  position: relative;
  width: 100vw;
  background-color: var(--color-white);
  color: var(--color-green-moss);
  padding-left: calc(var(--unit)*4);
  padding-right: calc(var(--unit)*8);
  padding-bottom: calc(var(--unit)*4);
  padding-top: calc(var(--unit)*4);
  z-index: 10000;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; /* Ermöglicht das Umbrechen der Inhalte */


  .legal-menu-item a {
    text-transform: uppercase;
    color: var(--color-green-moss);
  }
  .icon-container{
    display: flex;
    flex-direction: row;
    a {
      padding: var(--unit);
    }
  }
}

.footer-left {
  flex: 0.5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 60px;
}

.footer-middle {
  flex: 0.3;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.footer-right {
  display: flex;
  flex-direction: column;
  justify-content: end;
}


.footer-text > p {
  text-align: left !important;
  color: var(--color-green-moss) !important;
}

.footer-contact-immo{
  display: flex;
  flex-direction: row;
  justify-content:space-between;
}


.footer-contact > p {
  text-transform: uppercase !important;
  text-align: left !important;
  letter-spacing: 0.125em;
  color: var(--color-green-moss) !important;
}


.logo-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.logo-container a {
  margin-bottom: 20px;
  max-height: 80px !important;
}

.logo-container a img {
  max-height: 80px !important;
  overflow: hidden;
  width: auto;
}

.immo-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1; /* Sorgt dafür, dass beide Container den gleichen Platz einnehmen */
  max-width: 50%; /* Begrenzung der Breite auf die Hälfte des Elterncontainers */
}
.immo-container a {
  margin-bottom: 20px;
  max-height: 100px !important;
  width: 100%;
}

.immo-container a img {
  max-height: 120px !important;
  overflow: hidden;
}

.immo-container iframe {
  height: auto; /* Passt die Höhe an, um das Seitenverhältnis beizubehalten */
  
}

/* Für kleinere Bildschirme, z.B. Smartphones */
@media only screen and (max-width: 768px) {
  footer {
    flex-direction: column; /* Ordnet die Footer-Elemente untereinander an */
    padding-bottom: 0;
  }

  .footer-left, .footer-middle, .footer-right {
    flex: 1; /* Nimmt die volle Breite ein */
    padding-right: 0; /* Kein zusätzlicher rechter Abstand */
    padding-left: 0;
  }

  .footer-left {
    padding-bottom: 40px;
  }

  .footer-middle {
    padding-bottom: 40px;
  }

  .footer-right {
    padding-bottom: 20px;
    max-width: 60vw !important;
    align-items: flex-start;
  }

  .icon-container {
    justify-content: flex-start; /* Icons linksbündig ausrichten */
  }

  .footer-contact-immo {
    flex-direction: row; /* Spalten untereinander auf kleinen Bildschirmen */
    justify-content: flex-start;
  }

  .immo-container {
    padding-right:20px; /* Nimmt die volle Breite auf kleinen Bildschirmen */
    flex:none;
    a {
      width: auto;
    }
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  footer {
    display: flex;
    flex-direction: row; /* Haupt-Elemente nebeneinander anordnen */
    width: 100%;
    padding: calc(var(--unit) * 4);
    align-items: flex-end;
    padding-bottom: 20px;
    padding-top: 20px;

  }

  

  /* Für die Badges (z.B. immo-container) untereinander */
  .footer-contact-immo {
    display: flex;
  }

  .immo-container {
    width: 50%; /* Nimmt die volle Breite innerhalb der Spalte ein */
    margin-bottom: 20px; /* Platz zwischen den Badges */
    text-align: center; /* Zentriert die Inhalte innerhalb der Spalte */
  }

  /* Zentriere auch die Icons in der Icon-Container */
  .icon-container {
    display: flex;
    width: 100%; /* Breite auf 100% setzen */
  }
  .footer-left {
    flex-direction: column;
    flex: auto;
    padding-bottom: 60px;
  }

  .footer-middle {
    padding-left: 10px;
    padding-right: 10px;
  }

  .footer-right {
    flex-grow: 1; /* Der rechte Container wächst am wenigsten */
    flex-basis: 150px; /* Feste Mindestbreite für den rechten Container */
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
  }


}


/* Cursor */
.custom-cursor, .custom-cursor-left, .custom-cursor-right, .custom-cursor-close, .custom-cursor-up {
	position: fixed;
	pointer-events: none;
	display: flex;
	align-items: center;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	margin-left: -20px;
	backface-visibility: hidden;
	transition: transform 0.2s ease-out;
	z-index: 300000000000;
	pointer-events: none;
	opacity: 0;

  
}
.custom-cursor, .custom-cursor-left, .custom-cursor-right, .custom-cursor-close, .custom-cursor-up > svg 
{
mix-blend-mode: multiply
;}

@media (max-width: 768px) {
	.custom-cursor, 
	.custom-cursor-left, 
	.custom-cursor-right, 
	.custom-cursor-close, 
	.custom-cursor-up {
		display: none;
	}
}

@media  (hover: none) {
  .custom-cursor, 
	.custom-cursor-left, 
	.custom-cursor-right, 
	.custom-cursor-close, 
	.custom-cursor-up {
		display: none;
	}
}

@media (pointer: coarse) {
  .custom-cursor, 
	.custom-cursor-left, 
	.custom-cursor-right, 
	.custom-cursor-close, 
	.custom-cursor-up {
		display: none;
	}
}


/* Intro */
.curtain {
	z-index: 1051;
	position: absolute;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	perspective: 2000px; /* Erhöhte Perspektive für plastischeren Effekt */
}

.curtain-inner {
	width: 100%;
	height: 100%;
	background-color: var(--color-green-dark);
	display: flex;
	justify-content: center;
	align-items: center;
	transform-origin: left; /* Drehpunkt an der linken Seite */
	animation: openSide 2s cubic-bezier(0.5, 0, 0.75, 0) forwards 1.5s;
	transition: transform 2s cubic-bezier(0.5, 0, 0.75, 0);
}

@keyframes openSide {
	0% {
		transform: rotateY(0);
	}
	100% {
		transform: rotateY(-90deg); /* Drehen um -90 Grad */
	}
}

.curtain-logo {
	position: relative;
	z-index: 1052; /* Sicherstellen, dass das Logo über dem Vorhang ist */
	color: white;
	font-size: 3rem; /* Nach Bedarf anpassen */
	text-align: center;
  width: 25%
}

@media only screen and (max-width: 768px) {

  /* Intro - Curtain Container für mobile Geräte */
  .curtain {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1051;
    overflow: hidden;
    perspective: 1500px; /* Etwas geringere Perspektive für mobile */
  }

  /* Inneres des Vorhangs */
  .curtain-inner {
    width: 100%;
    height: 100%;
    background-color: var(--color-green-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: left; /* Drehpunkt bleibt links */
    animation: openSideMobile 1.5s cubic-bezier(0.5, 0, 0.75, 0) forwards 2s; /* Kürzere Animation für mobile */
    transition: transform 1.5s cubic-bezier(0.5, 0, 0.75, 0); /* Schnellerer Übergang */
  }

  /* Animation für das Öffnen des Vorhangs */
  @keyframes openSideMobile {
    0% {
      transform: rotateY(0);
    }
    100% {
      transform: rotateY(-90deg); /* Drehen um -90 Grad bleibt */
    }
  }

  /* Curtain-Logo für mobile Geräte */
  .curtain-logo {
    position: relative;
    z-index: 1052;
    width: 60%;
    color: white;
    font-size: 2rem; /* Kleinere Schriftgröße für mobile */
    text-align: center;
  }
}



/* Basisstile für Intro */
.page-intro {
  width: 100%;
}

.ref {
  margin-bottom: 75vh;
}

.intro-headline {
  max-width: 60vw;
  margin: auto;
  margin-bottom: 10vh;
}

.intro-headline-gallery {
  position: fixed;
  display: flex;
  justify-content: center; /* Horizontale Zentrierung */
  align-items: center; /* Vertikale Zentrierung */  -webkit-transform: translateZ(0);
  top: 0;
  left: 0;
  width: 70vw;
  margin-top: -10vh;
  margin-left:15vw;
  z-index: -10;
  height: 100vh; /* Höhe des Viewports */
  h1 {
    font-size: calc(var(--font-size-2)*0.9) !important;
    line-height: 0.8em !important;
    color: var(--color-green-dark);
    text-align: center;
    font-family: var(--font-family-sans) !important;
    letter-spacing: -0.05em !important;
    text-shadow: 0px 0px 13px rgba(255,255,255,0.5);
    em {
      font-family: "Spectral Italic" !important;
      font-size: 110% !important;
    }
  }
}
.intro-headline > h1 {
  font-size: calc(var(--font-size-2)*0.9) !important;
  line-height: 0.8em !important;
  color: var(--color-green-dark);
  text-align: center;
  font-family: var(--font-family-sans) !important;
  letter-spacing: -0.05em !important;
  em {
    font-family: "Spectral Italic" !important;
    font-size: 110% !important;
  }
}
h1.intro-headline-gallery {
  font-size: var(--font-size-2); /* Fallback-Wert */
  font-size: calc(var(--font-size-2) * 0.8) !important; /* Hauptwert */
}

 

/* Gallery container */
.intro-gallery {
  width: 80vw;
  z-index: -50;
  position: relative;
  margin: auto;
  margin-top: 80vh;
  height: auto; /* Höhe des Containers einstellen */
  min-height: 100vh;
  margin-bottom: 20vh;
}

/* Container für die Galerie-Bilder */
.gallery-images {
  position: relative;
  width: 100%;
}

/* Galerie-Bilder-Stile */
.gallery-item {
  display: block; /* Blockweise Anordnung */
  margin: -10% auto 0 auto; /* Negative Marge für 10% Überlappung */
  position: relative;
  aspect-ratio: 3 / 4;
  object-fit: cover; /* Bild passend zuschneiden */
}


/* Positionierung der Bilder */
.gallery-item:nth-child(1) {
  top: 0;
  z-index: 1; /* Z-index für das erste Bild */
  width: 40%; /* Breite der Bilder, kann nach Belieben angepasst werden */

}

.gallery-item:nth-child(2) {
  width: 30%; /* Breite der Bilder, kann nach Belieben angepasst werden */
  left: 20%; /* Leicht überlappendes zweites Bild */
  z-index: 2; /* Höherer z-index für das zweite Bild */
}

.gallery-item:nth-child(3) {
  width: 35%; /* Breite der Bilder, kann nach Belieben angepasst werden */
  left: -30%; /* Leicht überlappendes drittes Bild */
  z-index: 3; /* Höchster z-index für das dritte Bild */
}

/* Video container */
.intro-video {
  width: 75vw;
  height: 75vh; /* Höhe des Viewports */
  display: flex;
  margin-bottom: 10vh;
  overflow: hidden;
}

/* Video-Stile */
.intro-video-item {
  width: 100%; /* Video auf die Container-Breite skalieren */
  height: auto; /* Höhe des Videos automatisch basierend auf der Breite */
  object-fit: cover; /* Video im Container passend anzeigen */
}


/* Mobile Styles für die Galerie und das Video */
@media only screen and (max-width: 768px) {
.ref {
  margin-bottom: 85vh;
}
  .intro-headline {
    max-width: 85%;
    margin: auto;
    padding-bottom: 15vh;
  }

  .intro-headline-gallery {
    position: fixed;
    align-content:flex-start;
    padding-top: 25vh;
    top: 0;
    left: 0;
  }

  /* Gallery container */
  .intro-gallery {
    width: 100vw; /* Breiter auf mobilen Geräten, um mehr Platz zu nutzen */
    margin-top: 95vh;
    min-height: 60vh; /* Weniger Mindesthöhe für mobile Geräte */
    margin-bottom: 10vh; /* Weniger Abstand von unten */
    
  }

  .intro-headline-gallery > h1 {
    font-size: calc(var(--font-size-2)*0.9) !important;
  }

  h1.intro-headline-gallery {
    font-size: calc(var(--font-size-2)*0.9) !important;
  }

  /* Galerie-Bilder-Stile */
  .gallery-item {
    margin: -7.5% auto 0 auto; /* Geringere Überlappung der Bilder */
    width: 80%; /* Bilder auf fast volle Breite skalieren */
    aspect-ratio: 3 / 4;
    object-fit: cover; /* Bild passend zuschneiden */
    position: relative;
  }

  /* Positionierung der Bilder */
  .gallery-item:nth-child(1),
  .gallery-item:nth-child(3) {
    width: 70%; /* Gleiche Breite für alle Bilder auf mobilen Geräten */
    left: 0; /* Überlappung entfernen für eine klarere Darstellung */
    z-index: auto; /* Keine spezifische z-index-Regel, um Konflikte zu vermeiden */
  }

  .gallery-item:nth-child(2) {
    width: 60%; /* Gleiche Breite für alle Bilder auf mobilen Geräten */
    left: 30; /* Überlappung entfernen für eine klarere Darstellung */
    z-index: auto; /* Keine spezifische z-index-Regel, um Konflikte zu vermeiden */
  }

  /* Video container */
  .intro-video {
    width: 100vw; /* Volle Breite auf mobilen Geräten */
    height: 70vh; /* Geringere Höhe des Viewports für mobile Geräte */
    margin-bottom: 5vh; /* Weniger Abstand von unten */
  }

  /* Video-Stile */
  .intro-video-item {
    width: 100%; /* Video auf volle Breite skalieren */
    height: auto; /* Höhe des Videos automatisch anpassen */
    object-fit: cover; /* Video passend anzeigen */
  }
}

@media screen and (min-width: 767px) and (max-width: 1024px) {
   /* Gallery container */
   .intro-gallery {
    width: 100vw; /* Breiter auf mobilen Geräten, um mehr Platz zu nutzen */
    margin-top: 100vh;
    min-height: 60vh; /* Weniger Mindesthöhe für mobile Geräte */
    margin-bottom: 10vh; /* Weniger Abstand von unten */
  }
  .intro-headline-gallery > h1 {
    font-size: calc(var(--font-size-2)*0.8) !important;
  }
  h1.intro-headline-gallery  {
    font-size: calc(var(--font-size-2)*0.8) !important;
  }

  /* Galerie-Bilder-Stile */
  .gallery-item {
    margin: -10% auto 0 auto; /* Geringere Überlappung der Bilder */
    width: 100%; /* Bilder auf fast volle Breite skalieren */
    aspect-ratio: 3 / 4;
    object-fit: cover; /* Bild passend zuschneiden */
    position: relative;
  }

}

@media only screen and (min-width: 1400px) { 
  .intro-headline  {
    max-width: 1080px;
  }
}



/* Blocks */

.blocks{
  height: 100%;
}

.btn {
  text-align: center;
  display: flex;
  align-items: center; /* Vertikale Zentrierung des Textes */
  justify-content: center; /* Horizontale Zentrierung des Textes */
  margin: auto;
  margin-bottom: 20px;
  justify-items: center;
  border: 1px solid var(--color-green-light);
  border-radius: calc(var(--unit)*2);
  padding: var(--unit);
  min-width: 80px;
  max-width: 200px;
  background-color: var(--color-white); /* Heller Hintergrund für den Normalzustand */
  color: var(--color-green-light); /* Dunkle Schrift für den Normalzustand */
  transition: background-color 0.3s, color 0.3s; /* Sanfte Übergänge */
}

.btn:hover {
  background-color: var(--color-green-light); /* Dunkler Hintergrund auf Hover */
  color: var(--color-white); /* Weiße Schrift auf Hover */
}

.block-list {
  max-width: 1080px;
  margin: auto;
}

.list-short {
  padding: var(--unit) 0;
  width: 100%;
}

.list-short ul {
  column-count: 1;
  column-gap: var(--unit);
}

.list-short li {
  list-style-type: none;
  font-size: var(--font-size-1);
  text-transform: none;
  letter-spacing: -0.05em;
  padding-top: calc(0.5 * var(--unit));
  padding-bottom: calc(0.5 * var(--unit));
  border-bottom: 1.5px solid black;
}

.list-long ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(25% - var(--unit)), 1fr));
  gap: var(--unit);
  list-style-type: none;
}
.list-long li {
  font-size: var(--base-font-size);
  letter-spacing: -0.025em;
  margin-bottom: calc(var(--unit) * 2);
  padding-top: calc(var(--unit) * 0.5);
  position: relative;
  line-height: 1.25;
}
.list-long li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: #000;
}

@media only screen and (max-width: 700px) {
  .list-long ul {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .btn {
    margin-bottom: 0px;
  }
  
}
@media only screen and (max-width: 500px) {
  .list-long ul {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}

/* Preview */

.project-tile {
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Box-Shadow anpassen */
  color: var(--color-green-dark);
  line-height: 1;
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
  padding: var(--unit);
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Übergang für Skalierung und Schatten */
}

.project-link .project-tile:hover {
  transform: scale(1.1); /* Skaliert das Element um 5% */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Optional: Schatten leicht vergrößern */
}


.project-tile .sold-badge {
  position: absolute;
  top: -10px;
  left: 25%;
  width: 50%;
  background-color: var(--color-green-dark);
  color: white;
  z-index: 300;
  padding-left: calc(var(--unit)*2);
  padding-right: calc(var(--unit)*2);
  padding-top: var(--unit);
  padding-bottom: var(--unit);
  border-radius: 20px;
  font-size: calc(var(--base-font-size)*1.25);
  text-transform: uppercase;
  letter-spacing: 0.125em;
}

.project-tile .price-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 50%;
  max-width: 80%;
  background-color: var(--color-green-light);
  color: white;
  z-index: 300;
  padding-left: calc(var(--unit)*2);
  padding-right: calc(var(--unit)*2);
  padding-top: var(--unit);
  padding-bottom: var(--unit);
  border-radius: 20px;
  font-size: calc(var(--base-font-size)*1.25);
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0.125em;
}

.project-image {
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* Setzt die Höhe auf die gleiche wie die Breite, um ein Quadrat zu erstellen */
}

.project-image img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Damit das Bild das Quadrat füllt */
  transform: translate(-50%, -50%); /* Zentriert das Bild */
}

.project-info {
  padding-top: 15px;
  padding-bottom: 15px;

}

.project-meta {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: calc(var(--unit)*1);
}

.project-meta span {
  flex-basis: 30%; /* Grundbreite der äußeren Spans */
}

.project-meta span:nth-child(2) {
  flex-basis: 30%; /* Grundbreite des mittleren Spans */
  margin: 0 5%; /* Abstand von 5% auf jeder Seite */
}

.project-title {
  color: var(--color-green-dark);
  margin-top: calc(var(--unit)*2);
  margin-left: 15%;
  margin-right: 15%;
  word-break:normal;
  font-size: calc(var(--font-size-1)*0.9) !important;
}

@media (max-width: 768px) {

.project-tile .sold-badge {
  font-size: var(--base-font-size);
}
.project-tile .price-badge {
  font-size: var(--base-font-size);
}
}




@media screen and (min-width: 767px) and (max-width: 1024px) {

  .project-tile .sold-badge {
    font-size: var(--base-font-size);
  }
  .project-tile .price-badge {
    font-size: var(--base-font-size);
  }
  }

  @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    .project-tile {
      font-size: 78%!important;
    }
    .project-tile .sold-badge {
      font-size: calc(var(--base-font-size)*0.9);
    }
    .project-tile .price-badge {
      font-size: calc(var(--base-font-size)*0.9);
    }
    .project-title{
      margin-left: 7%;
      margin-right: 7%;
    }
  }


/* Accordion */

.accordion-item .accordion-content {
  display: none;
}

.accordion-item.active .toggle-icon {
  transform: rotate(45deg);
}

.accordion-item.active .accordion-content {
  display: flex;
  letter-spacing: -0.025em;
  line-height: 1.125;
  padding-top: calc(var(--unit) * 1);
  padding-bottom: calc(var(--unit) * 1);
  line-height: 1.25;
}

.accordion-item {
  padding-top: calc(0.75 * var(--unit));
  padding-bottom: calc(0.75 * var(--unit));
  border-bottom: 1.5px solid var(--color-green-dark);
}
.accordion-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 !important;
}

.accordion-title p {
  font-family: var(--font-family-sans) !important;
  letter-spacing: 0.1em;
  font-size: initial !important;
  line-height: 1.25em;
  text-transform: uppercase;
  padding: 0 !important;
  text-align: left !important;
  hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  -ms-word-break: break-all;
  word-wrap: break-word;
  
  display: inline-block;
}

.accordion-title:hover {
  color: var(--color-green-highlight) !important;
}

.accordion-title p em {
  display: inline-block;
}

.accordion-content .textinhalt {
  width: 70%;
  vertical-align: top;
  column-fill: balance-all; /* Die Spalten werden so ausgeglichen wie möglich, aber die erste ist tendenziell länger */
}
.accordion-content .textinhalt p {
  padding-bottom: var(--unit);
  line-height: 1.25;
  text-align: left !important;
}

.accordion-content.with-image {
  flex-direction: row !important;
}
.accordion-content.with-image .textinhalt {
  column-count: 1 !important;
  width: calc(50% - var(--unit) / 2);
  padding-right: var(--unit);
}
.accordion-content.with-image .textinhalt p {
  padding-bottom: var(--unit);
  line-height: 1.25;
}

.accordion-image {
  width: 40%;
  height: 40%;
  padding-left: 10%;
  overflow: hidden; /* Verhindert, dass das Bild aus dem Container herausragt */
}

.accordion-image img {
  object-fit: cover; /* Bilder werden gestreckt, um den gesamten Raum auszufüllen */
}

.toggle-icon {
  height: 1em;
  width: 1em;
  fill: var(--color-green-dark);
  margin-left: 1em;
  flex-shrink: 0; /* Verhindert das Schrumpfen des Icons */
}

@media (max-width: 1024px) {
  
  .accordion-item {
    padding-top: calc(1.5 * var(--unit));
    padding-bottom: calc(1.5 * var(--unit));
    border-bottom: 1.5px solid var(--color-green-dark);
  }
  .accordion-content {
    grid-template-columns: 1fr; /* Einspalten-Layout für kleine Bildschirme */
    line-height: 1.25;
  }
  .accordion-content.with-image {
    flex-direction: column-reverse !important;
  }
  .accordion-content.with-image .textinhalt {
    column-count: 1 !important;
    width: 100% !important;
    padding-right: var(--unit);
    line-height: 1.25;
  }

  .accordion-content .textinhalt {
    width: 90%;
    vertical-align: top;
    column-fill: balance-all; /* Die Spalten werden so ausgeglichen wie möglich, aber die erste ist tendenziell länger */
  }
  .toggle-icon {
    height: 1.25em;
    width: 1.25em;
    fill: var(--color-green-dark);
    margin-left: 1em;
}
}