@charset "UTF-8";
/*-------------   Color  -------------- */
/* --------------- Fonts ----------------------- */
/*  -----------------  Grid  ------------------------ */
/* One-up pairs */
/* Custom pairs */
/* basic rem mixin */
/*
    @include magic-border(2px, blue, 0.3s, 0);
    @include magic-border(4px, #222, 0.2s, 1);
    @include magic-border-mask(10px, 0.4s, linear-gradient(to bottom, #40e0d0, #ff8c00, #ff0080), 0);
*/
/* nunito-800 - latin */
/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter-Regular";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/inter-v20-latin-regular.woff2") format("woff2"), url("fonts/inter-v20-latin-regular.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* inter-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter-Semibold";
  font-style: normal;
  font-weight: 600;
  src: url("fonts/inter-v20-latin-600.woff2") format("woff2"), url("fonts/inter-v20-latin-600.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* inter-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter-Bold";
  font-style: normal;
  font-weight: 700;
  src: url("fonts/inter-v20-latin-700.woff2") format("woff2"), url("fonts/inter-v20-latin-700.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* sora-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Sora";
  font-style: normal;
  font-weight: 600;
  src: url("fonts/sora-v17-latin-600.woff2") format("woff2"), url("fonts/sora-v17-latin-600.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
*,
:after,
:before {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: #404040;
  font-family: "Inter-Regular", sans-serif;
  font-weight: 400;
  margin: 0;
  line-height: 1.4;
  overscroll-behavior: none;
  font-size: 1rem;
}

ul,
ol,
p,
figure {
  margin: 0;
  padding: 0;
}

main ul {
  padding-left: 20px;
  list-style: none;
}
main ul li + li {
  margin-top: clamp(0.25rem, 0.0867rem + 0.4082vw, 0.5rem);
}
main ul li {
  position: relative;
}
main ul li:before {
  content: "";
  position: absolute;
  display: block;
  width: 12px;
  height: 12px;
  left: -20px;
  top: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238fd400' fill-rule='evenodd' d='M.162 5.608 5.608.162a.554.554 0 0 1 .784 0l5.446 5.446a.554.554 0 0 1 0 .784l-5.446 5.446a.554.554 0 0 1-.784 0L.162 6.392a.554.554 0 0 1 0-.784'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

main ul.sidebar-actions li:before {
  display: none;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

h1 {
  line-height: 1;
  hyphens: auto;
}

h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
  hyphens: auto;
}

a,
.produkthighlights .title,
h1,
h2,
.timeline time,
h3,
h4 {
  color: #009739;
}

h2 + h3 {
  color: #404040;
}

.fakten p,
.banner h3,
.produkthighlights .subtitle {
  color: #00763A;
}

.produkthighlights .material {
  color: #404040;
}

.produktnews .title,
.events-carousel h3,
.news-carousel h3,
.produktnews h3 {
  color: #8FD400;
}

.text-white,
.text-white a,
.fakten h3,
.banner.color_1 p {
  color: #fff;
}

nav ul {
  list-style: none;
}

h1 {
  margin: 0 0 clamp(1.25rem, 0.4337rem + 2.0408vw, 2.5rem) 0;
}

.header h2 {
  margin: 0 0 clamp(1.875rem, 0.6505rem + 3.0612vw, 3.75rem) 0;
}

h2 {
  margin: 0 0 clamp(0.625rem, 0.2168rem + 1.0204vw, 1.25rem) 0;
}

h4,
h5 {
  margin: 0 0 clamp(0.3125rem, 0.1084rem + 0.5102vw, 0.625rem) 0;
}

h4 + h5 {
  margin: 0 0 clamp(0.625rem, 0.2168rem + 1.0204vw, 1.25rem) 0;
}

p + h4,
ul + h4,
ol + h4 {
  margin: clamp(0.9375rem, 0.3253rem + 1.5306vw, 1.875rem) 0 clamp(0.3125rem, 0.1084rem + 0.5102vw, 0.625rem) 0;
}

h4 + .btn {
  margin-top: clamp(0.25rem, 0.0867rem + 0.4082vw, 0.5rem);
}

.btn {
  margin-top: clamp(1.25rem, 0.4337rem + 2.0408vw, 2.5rem);
  margin-bottom: 8px;
}
.btn a {
  display: inline-block;
  border-radius: 8px;
  padding: clamp(0.3125rem, 0.1084rem + 0.5102vw, 0.625rem) clamp(0.9375rem, 0.3253rem + 1.5306vw, 1.875rem);
  text-decoration: none;
  transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;
}
.btn a:hover {
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  transform: translateX(5px);
}

.btn-hell a {
  background-color: #8FD400;
  color: #404040;
}

.btn-dunkel a {
  background-color: #00763A;
  color: #fff;
}

.btn-outline a {
  background-color: #fff;
  border: 1px solid #009739;
  color: #009739;
}

.produktnews h3 {
  margin: 0;
}

.produktnews .title,
h3 {
  margin: 0 0 clamp(0.625rem, 0.2168rem + 1.0204vw, 1.25rem) 0;
}

p + p {
  margin: clamp(0.3125rem, 0.1084rem + 0.5102vw, 0.625rem) 0 0 0;
}

.hero h1 {
  font-size: clamp(3rem, 2.6735rem + 0.8163vw, 3.5rem);
}

.fakten h3 {
  font-size: clamp(3rem, 2.6735rem + 0.8163vw, 3.5rem);
}

.hero-img h1 {
  font-size: clamp(3rem, 2.8367rem + 0.4082vw, 3.25rem);
}

.timeline time,
h2 {
  font-size: clamp(2.375rem, 2.2117rem + 0.4082vw, 2.625rem);
}

h3 {
  font-size: clamp(2rem, 1.8367rem + 0.4082vw, 2.25rem);
}

.banner h3,
.produkthighlights .title {
  font-size: clamp(1.6875rem, 1.4834rem + 0.5102vw, 2rem);
}

.hero p {
  font-size: clamp(1.5rem, 1.3776rem + 0.3061vw, 1.6875rem);
}

h4,
.hero-img p,
.produktnews .title,
#haupt-menu {
  font-size: clamp(1.3125rem, 1.1901rem + 0.3061vw, 1.5rem);
}

h5,
h6,
.copy-big,
.copy-big + .btn,
.banner p,
.pagemenu .title {
  font-size: clamp(1.125rem, 1.0026rem + 0.3061vw, 1.3125rem);
}

.timeline span,
p,
ul,
ol,
.events-carousel .news-list-date,
.events-carousel h3,
.news-carousel h3,
.pagemenu .subtitle,
.produktnews .teaser-text,
.produkthighlights .material,
.produkthighlights .subtitle {
  font-size: clamp(1rem, 0.9184rem + 0.2041vw, 1.125rem);
}

.news-carousel .news-list-date {
  font-size: clamp(0.75rem, 0.6684rem + 0.2041vw, 0.875rem);
}

h1,
h2,
h3,
h4 {
  font-family: "Sora", sans-serif;
  font-weight: 600;
}

.btn a {
  font-family: "Inter-Semibold", sans-serif;
  font-weight: 600;
}

h2 + h3 {
  font-family: "Inter-Regular", sans-serif;
  font-weight: 400;
}

h3,
.footer-main,
.footer-sub,
.pagemenu .title,
.produktnews .title,
.produkthighlights .subtitle,
.produkthighlights .title,
b, strong {
  font-family: "Inter-Bold", sans-serif;
  font-weight: 700;
}

.text-center,
.center {
  text-align: center;
}

.grid {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.inner-row,
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2.6vw;
  z-index: 1;
}

.row.align-items-center {
  align-items: center;
}

.col-1 {
  grid-column-end: span 1;
}

.col-offset-1 {
  grid-column-start: 2;
}

.row-1 {
  grid-row-end: span 1;
}

.row-offset-1 {
  grid-row-start: 2;
}

.col-2 {
  grid-column-end: span 2;
}

.col-offset-2 {
  grid-column-start: 3;
}

.row-2 {
  grid-row-end: span 2;
}

.row-offset-2 {
  grid-row-start: 3;
}

.col-3 {
  grid-column-end: span 3;
}

.col-offset-3 {
  grid-column-start: 4;
}

.row-3 {
  grid-row-end: span 3;
}

.row-offset-3 {
  grid-row-start: 4;
}

.col-4 {
  grid-column-end: span 4;
}

.col-offset-4 {
  grid-column-start: 5;
}

.row-4 {
  grid-row-end: span 4;
}

.row-offset-4 {
  grid-row-start: 5;
}

.col-5 {
  grid-column-end: span 5;
}

.col-offset-5 {
  grid-column-start: 6;
}

.row-5 {
  grid-row-end: span 5;
}

.row-offset-5 {
  grid-row-start: 6;
}

.col-6 {
  grid-column-end: span 6;
}

.col-offset-6 {
  grid-column-start: 7;
}

.row-6 {
  grid-row-end: span 6;
}

.row-offset-6 {
  grid-row-start: 7;
}

.col-7 {
  grid-column-end: span 7;
}

.col-offset-7 {
  grid-column-start: 8;
}

.row-7 {
  grid-row-end: span 7;
}

.row-offset-7 {
  grid-row-start: 8;
}

.col-8 {
  grid-column-end: span 8;
}

.col-offset-8 {
  grid-column-start: 9;
}

.row-8 {
  grid-row-end: span 8;
}

.row-offset-8 {
  grid-row-start: 9;
}

.col-9 {
  grid-column-end: span 9;
}

.col-offset-9 {
  grid-column-start: 10;
}

.row-9 {
  grid-row-end: span 9;
}

.row-offset-9 {
  grid-row-start: 10;
}

.col-10 {
  grid-column-end: span 10;
}

.col-offset-10 {
  grid-column-start: 11;
}

.row-10 {
  grid-row-end: span 10;
}

.row-offset-10 {
  grid-row-start: 11;
}

.col-11 {
  grid-column-end: span 11;
}

.col-offset-11 {
  grid-column-start: 12;
}

.row-11 {
  grid-row-end: span 11;
}

.row-offset-11 {
  grid-row-start: 12;
}

.col-12 {
  grid-column-end: span 12;
}

.col-offset-12 {
  grid-column-start: 13;
}

.row-12 {
  grid-row-end: span 12;
}

.row-offset-12 {
  grid-row-start: 13;
}

@media only print, screen and (min-width: 320px) {
  .col-xs-1 {
    grid-column-end: span 1;
  }
  .col-offset-xs-1 {
    grid-column-start: 2;
  }
  .row-xs-1 {
    grid-row-end: span 1;
  }
  .row-offset-xs-1 {
    grid-row-start: 2;
  }
  .col-xs-2 {
    grid-column-end: span 2;
  }
  .col-offset-xs-2 {
    grid-column-start: 3;
  }
  .row-xs-2 {
    grid-row-end: span 2;
  }
  .row-offset-xs-2 {
    grid-row-start: 3;
  }
  .col-xs-3 {
    grid-column-end: span 3;
  }
  .col-offset-xs-3 {
    grid-column-start: 4;
  }
  .row-xs-3 {
    grid-row-end: span 3;
  }
  .row-offset-xs-3 {
    grid-row-start: 4;
  }
  .col-xs-4 {
    grid-column-end: span 4;
  }
  .col-offset-xs-4 {
    grid-column-start: 5;
  }
  .row-xs-4 {
    grid-row-end: span 4;
  }
  .row-offset-xs-4 {
    grid-row-start: 5;
  }
  .col-xs-5 {
    grid-column-end: span 5;
  }
  .col-offset-xs-5 {
    grid-column-start: 6;
  }
  .row-xs-5 {
    grid-row-end: span 5;
  }
  .row-offset-xs-5 {
    grid-row-start: 6;
  }
  .col-xs-6 {
    grid-column-end: span 6;
  }
  .col-offset-xs-6 {
    grid-column-start: 7;
  }
  .row-xs-6 {
    grid-row-end: span 6;
  }
  .row-offset-xs-6 {
    grid-row-start: 7;
  }
  .col-xs-7 {
    grid-column-end: span 7;
  }
  .col-offset-xs-7 {
    grid-column-start: 8;
  }
  .row-xs-7 {
    grid-row-end: span 7;
  }
  .row-offset-xs-7 {
    grid-row-start: 8;
  }
  .col-xs-8 {
    grid-column-end: span 8;
  }
  .col-offset-xs-8 {
    grid-column-start: 9;
  }
  .row-xs-8 {
    grid-row-end: span 8;
  }
  .row-offset-xs-8 {
    grid-row-start: 9;
  }
  .col-xs-9 {
    grid-column-end: span 9;
  }
  .col-offset-xs-9 {
    grid-column-start: 10;
  }
  .row-xs-9 {
    grid-row-end: span 9;
  }
  .row-offset-xs-9 {
    grid-row-start: 10;
  }
  .col-xs-10 {
    grid-column-end: span 10;
  }
  .col-offset-xs-10 {
    grid-column-start: 11;
  }
  .row-xs-10 {
    grid-row-end: span 10;
  }
  .row-offset-xs-10 {
    grid-row-start: 11;
  }
  .col-xs-11 {
    grid-column-end: span 11;
  }
  .col-offset-xs-11 {
    grid-column-start: 12;
  }
  .row-xs-11 {
    grid-row-end: span 11;
  }
  .row-offset-xs-11 {
    grid-row-start: 12;
  }
  .col-xs-12 {
    grid-column-end: span 12;
  }
  .col-offset-xs-12 {
    grid-column-start: 13;
  }
  .row-xs-12 {
    grid-row-end: span 12;
  }
  .row-offset-xs-12 {
    grid-row-start: 13;
  }
}
@media only print, screen and (min-width: 568px) {
  .col-sm-1 {
    grid-column-end: span 1;
  }
  .col-offset-sm-1 {
    grid-column-start: 2;
  }
  .row-sm-1 {
    grid-row-end: span 1;
  }
  .row-offset-sm-1 {
    grid-row-start: 2;
  }
  .col-sm-2 {
    grid-column-end: span 2;
  }
  .col-offset-sm-2 {
    grid-column-start: 3;
  }
  .row-sm-2 {
    grid-row-end: span 2;
  }
  .row-offset-sm-2 {
    grid-row-start: 3;
  }
  .col-sm-3 {
    grid-column-end: span 3;
  }
  .col-offset-sm-3 {
    grid-column-start: 4;
  }
  .row-sm-3 {
    grid-row-end: span 3;
  }
  .row-offset-sm-3 {
    grid-row-start: 4;
  }
  .col-sm-4 {
    grid-column-end: span 4;
  }
  .col-offset-sm-4 {
    grid-column-start: 5;
  }
  .row-sm-4 {
    grid-row-end: span 4;
  }
  .row-offset-sm-4 {
    grid-row-start: 5;
  }
  .col-sm-5 {
    grid-column-end: span 5;
  }
  .col-offset-sm-5 {
    grid-column-start: 6;
  }
  .row-sm-5 {
    grid-row-end: span 5;
  }
  .row-offset-sm-5 {
    grid-row-start: 6;
  }
  .col-sm-6 {
    grid-column-end: span 6;
  }
  .col-offset-sm-6 {
    grid-column-start: 7;
  }
  .row-sm-6 {
    grid-row-end: span 6;
  }
  .row-offset-sm-6 {
    grid-row-start: 7;
  }
  .col-sm-7 {
    grid-column-end: span 7;
  }
  .col-offset-sm-7 {
    grid-column-start: 8;
  }
  .row-sm-7 {
    grid-row-end: span 7;
  }
  .row-offset-sm-7 {
    grid-row-start: 8;
  }
  .col-sm-8 {
    grid-column-end: span 8;
  }
  .col-offset-sm-8 {
    grid-column-start: 9;
  }
  .row-sm-8 {
    grid-row-end: span 8;
  }
  .row-offset-sm-8 {
    grid-row-start: 9;
  }
  .col-sm-9 {
    grid-column-end: span 9;
  }
  .col-offset-sm-9 {
    grid-column-start: 10;
  }
  .row-sm-9 {
    grid-row-end: span 9;
  }
  .row-offset-sm-9 {
    grid-row-start: 10;
  }
  .col-sm-10 {
    grid-column-end: span 10;
  }
  .col-offset-sm-10 {
    grid-column-start: 11;
  }
  .row-sm-10 {
    grid-row-end: span 10;
  }
  .row-offset-sm-10 {
    grid-row-start: 11;
  }
  .col-sm-11 {
    grid-column-end: span 11;
  }
  .col-offset-sm-11 {
    grid-column-start: 12;
  }
  .row-sm-11 {
    grid-row-end: span 11;
  }
  .row-offset-sm-11 {
    grid-row-start: 12;
  }
  .col-sm-12 {
    grid-column-end: span 12;
  }
  .col-offset-sm-12 {
    grid-column-start: 13;
  }
  .row-sm-12 {
    grid-row-end: span 12;
  }
  .row-offset-sm-12 {
    grid-row-start: 13;
  }
}
@media only print, screen and (min-width: 820px) {
  .col-md-1 {
    grid-column-end: span 1;
  }
  .col-offset-md-1 {
    grid-column-start: 2;
  }
  .row-md-1 {
    grid-row-end: span 1;
  }
  .row-offset-md-1 {
    grid-row-start: 2;
  }
  .col-md-2 {
    grid-column-end: span 2;
  }
  .col-offset-md-2 {
    grid-column-start: 3;
  }
  .row-md-2 {
    grid-row-end: span 2;
  }
  .row-offset-md-2 {
    grid-row-start: 3;
  }
  .col-md-3 {
    grid-column-end: span 3;
  }
  .col-offset-md-3 {
    grid-column-start: 4;
  }
  .row-md-3 {
    grid-row-end: span 3;
  }
  .row-offset-md-3 {
    grid-row-start: 4;
  }
  .col-md-4 {
    grid-column-end: span 4;
  }
  .col-offset-md-4 {
    grid-column-start: 5;
  }
  .row-md-4 {
    grid-row-end: span 4;
  }
  .row-offset-md-4 {
    grid-row-start: 5;
  }
  .col-md-5 {
    grid-column-end: span 5;
  }
  .col-offset-md-5 {
    grid-column-start: 6;
  }
  .row-md-5 {
    grid-row-end: span 5;
  }
  .row-offset-md-5 {
    grid-row-start: 6;
  }
  .col-md-6 {
    grid-column-end: span 6;
  }
  .col-offset-md-6 {
    grid-column-start: 7;
  }
  .row-md-6 {
    grid-row-end: span 6;
  }
  .row-offset-md-6 {
    grid-row-start: 7;
  }
  .col-md-7 {
    grid-column-end: span 7;
  }
  .col-offset-md-7 {
    grid-column-start: 8;
  }
  .row-md-7 {
    grid-row-end: span 7;
  }
  .row-offset-md-7 {
    grid-row-start: 8;
  }
  .col-md-8 {
    grid-column-end: span 8;
  }
  .col-offset-md-8 {
    grid-column-start: 9;
  }
  .row-md-8 {
    grid-row-end: span 8;
  }
  .row-offset-md-8 {
    grid-row-start: 9;
  }
  .col-md-9 {
    grid-column-end: span 9;
  }
  .col-offset-md-9 {
    grid-column-start: 10;
  }
  .row-md-9 {
    grid-row-end: span 9;
  }
  .row-offset-md-9 {
    grid-row-start: 10;
  }
  .col-md-10 {
    grid-column-end: span 10;
  }
  .col-offset-md-10 {
    grid-column-start: 11;
  }
  .row-md-10 {
    grid-row-end: span 10;
  }
  .row-offset-md-10 {
    grid-row-start: 11;
  }
  .col-md-11 {
    grid-column-end: span 11;
  }
  .col-offset-md-11 {
    grid-column-start: 12;
  }
  .row-md-11 {
    grid-row-end: span 11;
  }
  .row-offset-md-11 {
    grid-row-start: 12;
  }
  .col-md-12 {
    grid-column-end: span 12;
  }
  .col-offset-md-12 {
    grid-column-start: 13;
  }
  .row-md-12 {
    grid-row-end: span 12;
  }
  .row-offset-md-12 {
    grid-row-start: 13;
  }
}
@media only print, screen and (min-width: 1220px) {
  .col-lg-1 {
    grid-column-end: span 1;
  }
  .col-offset-lg-1 {
    grid-column-start: 2;
  }
  .row-lg-1 {
    grid-row-end: span 1;
  }
  .row-offset-lg-1 {
    grid-row-start: 2;
  }
  .col-lg-2 {
    grid-column-end: span 2;
  }
  .col-offset-lg-2 {
    grid-column-start: 3;
  }
  .row-lg-2 {
    grid-row-end: span 2;
  }
  .row-offset-lg-2 {
    grid-row-start: 3;
  }
  .col-lg-3 {
    grid-column-end: span 3;
  }
  .col-offset-lg-3 {
    grid-column-start: 4;
  }
  .row-lg-3 {
    grid-row-end: span 3;
  }
  .row-offset-lg-3 {
    grid-row-start: 4;
  }
  .col-lg-4 {
    grid-column-end: span 4;
  }
  .col-offset-lg-4 {
    grid-column-start: 5;
  }
  .row-lg-4 {
    grid-row-end: span 4;
  }
  .row-offset-lg-4 {
    grid-row-start: 5;
  }
  .col-lg-5 {
    grid-column-end: span 5;
  }
  .col-offset-lg-5 {
    grid-column-start: 6;
  }
  .row-lg-5 {
    grid-row-end: span 5;
  }
  .row-offset-lg-5 {
    grid-row-start: 6;
  }
  .col-lg-6 {
    grid-column-end: span 6;
  }
  .col-offset-lg-6 {
    grid-column-start: 7;
  }
  .row-lg-6 {
    grid-row-end: span 6;
  }
  .row-offset-lg-6 {
    grid-row-start: 7;
  }
  .col-lg-7 {
    grid-column-end: span 7;
  }
  .col-offset-lg-7 {
    grid-column-start: 8;
  }
  .row-lg-7 {
    grid-row-end: span 7;
  }
  .row-offset-lg-7 {
    grid-row-start: 8;
  }
  .col-lg-8 {
    grid-column-end: span 8;
  }
  .col-offset-lg-8 {
    grid-column-start: 9;
  }
  .row-lg-8 {
    grid-row-end: span 8;
  }
  .row-offset-lg-8 {
    grid-row-start: 9;
  }
  .col-lg-9 {
    grid-column-end: span 9;
  }
  .col-offset-lg-9 {
    grid-column-start: 10;
  }
  .row-lg-9 {
    grid-row-end: span 9;
  }
  .row-offset-lg-9 {
    grid-row-start: 10;
  }
  .col-lg-10 {
    grid-column-end: span 10;
  }
  .col-offset-lg-10 {
    grid-column-start: 11;
  }
  .row-lg-10 {
    grid-row-end: span 10;
  }
  .row-offset-lg-10 {
    grid-row-start: 11;
  }
  .col-lg-11 {
    grid-column-end: span 11;
  }
  .col-offset-lg-11 {
    grid-column-start: 12;
  }
  .row-lg-11 {
    grid-row-end: span 11;
  }
  .row-offset-lg-11 {
    grid-row-start: 12;
  }
  .col-lg-12 {
    grid-column-end: span 12;
  }
  .col-offset-lg-12 {
    grid-column-start: 13;
  }
  .row-lg-12 {
    grid-row-end: span 12;
  }
  .row-offset-lg-12 {
    grid-row-start: 13;
  }
}
@media only print, screen and (min-width: 1420px) {
  .col-xl-1 {
    grid-column-end: span 1;
  }
  .col-offset-xl-1 {
    grid-column-start: 2;
  }
  .row-xl-1 {
    grid-row-end: span 1;
  }
  .row-offset-xl-1 {
    grid-row-start: 2;
  }
  .col-xl-2 {
    grid-column-end: span 2;
  }
  .col-offset-xl-2 {
    grid-column-start: 3;
  }
  .row-xl-2 {
    grid-row-end: span 2;
  }
  .row-offset-xl-2 {
    grid-row-start: 3;
  }
  .col-xl-3 {
    grid-column-end: span 3;
  }
  .col-offset-xl-3 {
    grid-column-start: 4;
  }
  .row-xl-3 {
    grid-row-end: span 3;
  }
  .row-offset-xl-3 {
    grid-row-start: 4;
  }
  .col-xl-4 {
    grid-column-end: span 4;
  }
  .col-offset-xl-4 {
    grid-column-start: 5;
  }
  .row-xl-4 {
    grid-row-end: span 4;
  }
  .row-offset-xl-4 {
    grid-row-start: 5;
  }
  .col-xl-5 {
    grid-column-end: span 5;
  }
  .col-offset-xl-5 {
    grid-column-start: 6;
  }
  .row-xl-5 {
    grid-row-end: span 5;
  }
  .row-offset-xl-5 {
    grid-row-start: 6;
  }
  .col-xl-6 {
    grid-column-end: span 6;
  }
  .col-offset-xl-6 {
    grid-column-start: 7;
  }
  .row-xl-6 {
    grid-row-end: span 6;
  }
  .row-offset-xl-6 {
    grid-row-start: 7;
  }
  .col-xl-7 {
    grid-column-end: span 7;
  }
  .col-offset-xl-7 {
    grid-column-start: 8;
  }
  .row-xl-7 {
    grid-row-end: span 7;
  }
  .row-offset-xl-7 {
    grid-row-start: 8;
  }
  .col-xl-8 {
    grid-column-end: span 8;
  }
  .col-offset-xl-8 {
    grid-column-start: 9;
  }
  .row-xl-8 {
    grid-row-end: span 8;
  }
  .row-offset-xl-8 {
    grid-row-start: 9;
  }
  .col-xl-9 {
    grid-column-end: span 9;
  }
  .col-offset-xl-9 {
    grid-column-start: 10;
  }
  .row-xl-9 {
    grid-row-end: span 9;
  }
  .row-offset-xl-9 {
    grid-row-start: 10;
  }
  .col-xl-10 {
    grid-column-end: span 10;
  }
  .col-offset-xl-10 {
    grid-column-start: 11;
  }
  .row-xl-10 {
    grid-row-end: span 10;
  }
  .row-offset-xl-10 {
    grid-row-start: 11;
  }
  .col-xl-11 {
    grid-column-end: span 11;
  }
  .col-offset-xl-11 {
    grid-column-start: 12;
  }
  .row-xl-11 {
    grid-row-end: span 11;
  }
  .row-offset-xl-11 {
    grid-row-start: 12;
  }
  .col-xl-12 {
    grid-column-end: span 12;
  }
  .col-offset-xl-12 {
    grid-column-start: 13;
  }
  .row-xl-12 {
    grid-row-end: span 12;
  }
  .row-offset-xl-12 {
    grid-row-start: 13;
  }
}
/* column width  .row width = 100% -20% = 80VW */
/* debug grid */
.testgrid {
  position: fixed;
  z-index: 100000000000000000;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.testgrid .wrapp {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2.6vw;
  pointer-events: none;
}
.testgrid .wrapp div {
  background: rgba(109, 207, 121, 0.2);
}

/* headrom & Nav */
#oben {
  position: fixed;
  width: 100%;
  z-index: 99;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  will-change: transform;
  transition: transform 0.3s ease-in-out;
  transform: translateY(0);
}

#oben.headroom--hidden {
  transform: translateY(-125%);
}

#oben .grid {
  height: 100%;
}
#oben .grid .flex {
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 40px 0;
}
#oben .grid .flex nav.default {
  margin: auto 0;
  display: flex;
  gap: 60px;
  height: 40px;
  align-items: center;
}
#oben .logo svg {
  display: block;
  height: 80px;
  width: auto;
  object-fit: cover;
}
#oben .language-menu {
  padding-top: 5px;
}
#oben .language-menu,
#oben .slimmenu {
  display: flex;
  gap: 30px;
  line-height: 30px;
}
#oben .ico-lang {
  padding-top: 5px;
}
#oben .ico-lang svg {
  width: 30px;
  height: 30px;
}

#haupt-menu a {
  color: #404040;
  text-decoration: none;
}
#haupt-menu a.active, #haupt-menu a:hover {
  color: #009739;
}
#haupt-menu li.dropdown ul {
  display: none;
  position: absolute;
  text-transform: none;
  padding: 0;
}
#haupt-menu li.dropdown ul li a {
  padding: 5px;
}
#haupt-menu li.dropdown ul li a:after {
  height: 2px;
}
#haupt-menu li.dropdown ul li + li {
  margin-left: 0;
}
#haupt-menu li.dropdown:hover ul {
  display: block;
}

.language {
  margin-right: 70px;
}

.language-menu {
  text-transform: uppercase;
}
.language-menu ul {
  display: none;
  padding: 2vw 0;
}
.language-menu:hover ul {
  display: block;
  position: absolute;
}

/* --------------------------------------------------------------------------
   1️⃣  Mobile “burger” button
   -------------------------------------------------------------------------- */
#mobile-btt {
  position: absolute;
  right: 0;
  top: 64px;
  z-index: 1000;
  width: 40px;
  height: 30px;
  padding: 0;
  cursor: pointer;
  border: none;
  outline: none;
  background: transparent;
}

#mobile-btt:before,
#mobile-btt:after,
#mobile-btt span {
  background: #009739;
}

/* top & bottom bars – drawn with ::before / ::after */
#mobile-btt:before,
#mobile-btt:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  pointer-events: none;
  transition: transform 0.25s;
  transform-origin: 50% 50%;
}

/* middle bar – the <span> element (visually hidden text) */
#mobile-btt span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  text-indent: -9999px;
  transition: opacity 0.25s;
}

/* Position the top/bottom bars */
#mobile-btt:before {
  transform: translateY(-12px);
}

#mobile-btt:after {
  transform: translateY(12px);
}

/* --------------------------------------------------------------------------
   2️⃣  Button “active” state – turn burger into an X
   -------------------------------------------------------------------------- */
/* The selector uses the relational :has() pseudo‑class to check whether
   the popover dialog is currently open. */
body:has(#mobile-nav[popover]:popover-open) #mobile-btt span {
  opacity: 0;
}
body:has(#mobile-nav[popover]:popover-open) #mobile-btt:before {
  transform: rotate(45deg);
}
body:has(#mobile-nav[popover]:popover-open) #mobile-btt:after {
  transform: rotate(-45deg);
}

#mobile-nav ul li a {
  padding: 2px 10px;
  display: inline-block;
}

/* --------------------------------------------------------------------------
   3️⃣  Popover dialog animation
   -------------------------------------------------------------------------- */
/* When the dialog is open we want it fully opaque & at normal scale */
#mobile-nav[popover]:popover-open {
  margin-left: calc(100vw - 380px);
}

/* Closed state – start from transparent and collapsed horizontally */
#mobile-nav[popover] {
  font-size: 1.2rem;
  padding: 60px;
  opacity: 1;
  margin-left: 100vw;
  width: 380px;
  height: 100%;
  /* “allow‑discrete” lets the transition block for display/overlay while the
     other properties (opacity, transform) animate smoothly */
  transition: margin-left 0.5s, transform 0.7s, overlay 0.7s allow-discrete, display 0.7s allow-discrete;
}

/* The @starting-style rule tells the browser that the dialog *starts* from
   the same values as its closed state, so the transition runs from there */
@starting-style {
  #mobile-nav[popover]:popover-open {
    margin-left: 100vw;
  }
}
/* --------------------------------------------------------------------------
   4️⃣  Backdrop (the dark overlay that appears behind the dialog)
   -------------------------------------------------------------------------- */
#mobile-nav[popover]::backdrop {
  background-color: transparent;
  transition: display 0.7s allow-discrete, overlay 0.7s allow-discrete, background-color 0.7s;
}

#mobile-nav[popover]:popover-open::backdrop {
  background-color: rgba(0, 0, 0, 0.25);
}

/* Starting style for the backdrop – transparent at the very beginning */
@starting-style {
  #mobile-nav[popover]:popover-open::backdrop {
    background-color: transparent;
  }
}
/* --------------------------------------------------------------------------
   5️⃣  (Optional) Fallback class for browsers without native popover support
   -------------------------------------------------------------------------- */
body:not(:has(#mobile-nav[popover])) #mobile-nav.open {
  margin-left: calc(100vw - 380px);
}

body:not(:has(#mobile-nav[popover])) #mobile-nav.open::backdrop {
  background-color: rgba(0, 0, 0, 0.25);
}

#mobile-btt.mobile-close {
  right: 25px;
  top: 25px;
}

#mobile-nav {
  border: 0;
  box-shadow: -6px 9px 14px 0px #c1c1c1;
}
#mobile-nav .haupt {
  margin: 2vw 0;
  list-style-type: none;
}
#mobile-nav .haupt li a {
  text-transform: uppercase;
  padding: 4px 16px;
}
#mobile-nav .meta {
  list-style-type: none;
}
#mobile-nav .meta li a {
  padding: 4px 16px;
}
#mobile-nav .moblie-language {
  margin-top: 2vw;
  list-style-type: none;
  display: flex;
}
#mobile-nav .moblie-language li a {
  text-transform: uppercase;
  padding: 4px 16px;
  padding-right: 0;
}

/* FAQ */
/* pixel-lightbox  v 1.77 */
html {
  scroll-behavior: smooth;
}

main {
  padding-top: 160px;
}

.dark-green-gradient-bg .grid {
  background: linear-gradient(270deg, #009739 0%, #004119 100%);
}
.dark-green-gradient-bg .grid p {
  color: #fff;
}

.green-gradient-bg .grid {
  background: linear-gradient(270deg, #8FD400 0%, #009739 100%);
}
.green-gradient-bg .grid p {
  color: #fff;
}

.white-bg .grid {
  background: #fff;
}

.beige-bg .grid {
  background: #EAE6DC;
}

.green-bg .grid {
  background: #009739;
}

.yellow-green-bg .grid {
  background: #8FD400;
}

.frame-dark-green-gradient-bg {
  background: linear-gradient(270deg, #009739 0%, #004119 100%);
  border-radius: 18px;
  padding: clamp(1.5625rem, 0.5421rem + 2.551vw, 3.125rem);
}
.frame-dark-green-gradient-bg h2, .frame-dark-green-gradient-bg h3, .frame-dark-green-gradient-bg h4 {
  color: #8FD400;
}
.frame-dark-green-gradient-bg p {
  color: #fff;
}

.frame-green-gradient-bg {
  background: linear-gradient(270deg, #8FD400 0%, #009739 100%);
  border-radius: 18px;
  padding: clamp(1.5625rem, 0.5421rem + 2.551vw, 3.125rem);
}

.frame-yellow-green-bg {
  background: #8FD400;
  border-radius: 18px;
  padding: clamp(1.5625rem, 0.5421rem + 2.551vw, 3.125rem);
}

.frame-beige-bg {
  background: #EAE6DC;
  border-radius: 18px;
  padding: clamp(1.5625rem, 0.5421rem + 2.551vw, 3.125rem);
}

.frame-border-radius-img img {
  border-radius: 18px;
}

.align-items-center .grid .row {
  align-items: center;
}

.h-full .grid .row .col-12 {
  height: 100%;
}
.h-full .grid .row .col-12 .frame {
  height: 100%;
}

.v-bottom .grid .row {
  align-items: end;
}

.frame-type-textpic {
  width: 100%;
  height: auto;
}
.frame-type-textpic .ce-gallery {
  width: 100%;
  height: 100%;
}
.frame-type-textpic .ce-gallery .ce-outer {
  width: 100%;
  height: 100%;
}
.frame-type-textpic .ce-gallery .ce-outer .ce-inner {
  width: 100%;
  height: 100%;
}
.frame-type-textpic .ce-gallery .ce-outer .ce-inner .ce-row {
  width: 100%;
  height: 100%;
}
.frame-type-textpic .ce-gallery .ce-outer .ce-inner .ce-row .ce-column {
  width: 100%;
  height: 100%;
}
.frame-type-textpic .ce-gallery .ce-outer .ce-inner .ce-row .ce-column .image {
  width: 100%;
  height: 100%;
  margin: 0;
}

.ce-center .ce-outer,
.ce-center .ce-inner {
  position: static;
  float: none;
}

.ce-gallery figure {
  display: flex;
  margin: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* video */
.frame-type-textmedia,
.ce-gallery,
.ce-column {
  width: 100%;
}

.ce-gallery picture {
  width: 100%;
}
.ce-gallery img {
  width: auto;
  max-width: 100%;
  width: 100%;
}

.pl-three .ce-center .ce-gallery img {
  max-width: 33.333%;
}

.ce-intext.ce-right .ce-gallery,
.ce-intext.ce-left .ce-gallery,
.ce-above .ce-gallery {
  margin-bottom: 0;
}

.frame-type-image + .frame-type-text {
  margin-top: clamp(1.25rem, 0.4337rem + 2.0408vw, 2.5rem);
}

section div + section {
  padding: 0;
  margin-top: clamp(2.5rem, 0.8673rem + 4.0816vw, 5rem);
}

section.hero.default + section.default,
section {
  padding: clamp(5rem, 1.7347rem + 8.1633vw, 10rem) 0;
}

section.default + section.default {
  padding: 0 0 clamp(5rem, 1.7347rem + 8.1633vw, 10rem) 0;
}

section.beige-bg {
  padding: clamp(2.5rem, 0.8673rem + 4.0816vw, 5rem) 0;
}

section.beige-bg.hero-img {
  padding: 0;
}

section.banner {
  padding: 0;
}

section.banner + section.beige-bg {
  margin-top: clamp(5rem, 1.7347rem + 8.1633vw, 10rem);
}

section.hero {
  padding: 0;
  position: relative;
  height: calc(100dvh - 160px);
}
section.hero .grid {
  margin: 0;
  padding: 0;
}
section.hero .grid .background-image {
  position: absolute;
  inset: 0;
}
section.hero .grid .background-image video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
section.hero .grid .background-image:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Form EINMAL definiert */
  -webkit-mask: url("../Images/hero-maske2.svg") no-repeat center right/105dvw;
  mask: url("../Images/hero-maske2.svg") no-repeat center right/105dvw;
  /* Füllung + Weichzeichner – beide werden von der Maske beschnitten */
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  width: 58%;
}
section.hero .grid .row {
  z-index: 3;
  position: absolute;
  inset: 0;
  align-items: center;
}
section.hero .grid .row .frame {
  padding-left: 10%;
}

section.full-width .grid {
  width: 100%;
}
section.full-width .grid .col-md-5 + .col-md-7 .frame-type-text,
section.full-width .grid .col-md-7 + .col-md-5 .frame-type-text {
  padding-right: 25%;
  padding-left: 12.5%;
}
section.full-width .grid .col-md-6 + .col-md-6 .frame-type-text {
  padding-right: 25%;
  padding-left: 25%;
}
section.full-width .col-12:first-child .frame-type-text {
  padding: 0 12.5% 0 20%;
}
section.full-width .frame-green-gradient-bg,
section.full-width .frame-dark-green-gradient-bg {
  border-radius: 0;
  padding-top: clamp(6.25rem, 2.1684rem + 10.2041vw, 12.5rem);
  padding-bottom: clamp(6.25rem, 2.1684rem + 10.2041vw, 12.5rem);
  position: relative;
}
section.full-width .frame-green-gradient-bg h3, section.full-width .frame-green-gradient-bg h4, section.full-width .frame-green-gradient-bg p,
section.full-width .frame-dark-green-gradient-bg h3,
section.full-width .frame-dark-green-gradient-bg h4,
section.full-width .frame-dark-green-gradient-bg p {
  color: #fff;
}
section.full-width .frame-green-gradient-bg:before,
section.full-width .frame-dark-green-gradient-bg:before {
  content: "";
  position: absolute;
  display: block;
  height: 100%;
  width: auto;
  top: 0;
  left: 0;
  aspect-ratio: 325/700;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='325' height='700' viewBox='0 0 325 700'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M296.155 0 44.749 251.565l-1.376 1.401c-44.512 46.062-44.507 119.204.013 165.211l1.363 1.386L325 700H0V0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}

.produkthighlights .prod-high-item {
  border-radius: 18px;
  position: relative;
  border: 1px solid #404040;
  transition: box-shadow 0.3s ease-in-out;
}
.produkthighlights .prod-high-item:hover {
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.3);
}
.produkthighlights .image {
  padding: 20px 0;
  border-bottom: 1px solid #404040;
  position: relative;
}
.produkthighlights .image img {
  max-width: 70%;
  margin: 0 auto;
}
.produkthighlights .teaser-text {
  padding: 20px;
}
.produkthighlights .teaser-text .material {
  border-top: 1px solid #B5B0AD;
  padding-top: 20px;
  margin-top: 20px;
}
.produkthighlights .prod-high-item a {
  display: block;
  height: 100%;
  text-decoration: none;
}
.produkthighlights .prod-high-item a .colors {
  position: absolute;
  width: 100%;
  top: 20px;
  left: 20px;
}
.produkthighlights .prod-high-item a .colors .prod-color {
  font-size: 0;
  width: 25px;
  height: 25px;
  display: block;
  margin-bottom: 5px;
  border-radius: 6px;
}
.produkthighlights .prod-high-item a .colors .prod-color.weiß {
  background-color: #ffffff;
  border: 1px solid #404040;
}
.produkthighlights .prod-high-item a .colors .prod-color.schwarz {
  background-color: #2c2c2c;
  border: 1px solid #404040;
}
.produkthighlights .prod-high-item a .colors .prod-color.braun {
  background-color: #947266;
  border: 1px solid #404040;
}
.produkthighlights .prod-high-item a .colors .prod-color.pink {
  background-color: #c70677;
  border: 1px solid #404040;
}
.produkthighlights .prod-high-item a .colors .prod-color.grün {
  background-color: #2e8747;
  border: 1px solid #404040;
}
.produkthighlights .prod-high-item a .colors .prod-color.lila {
  background-color: #522278;
  border: 1px solid #404040;
}
.produkthighlights .prod-high-item a .colors .prod-color.rot {
  background-color: #CD1316;
  border: 1px solid #404040;
}
.produkthighlights .prod-high-item a .colors .prod-color.gelb {
  background-color: #dba20f;
  border: 1px solid #404040;
}
.produkthighlights .prod-high-item a .colors .prod-color.blau {
  background-color: #283eb8;
  border: 1px solid #404040;
}
.produkthighlights .prod-high-item a .badges {
  display: flex;
  gap: 5px;
  position: absolute;
  z-index: 0;
  top: -26px;
  right: 25px;
}
.produkthighlights .prod-high-item a .badges .status {
  color: white;
  padding: 0 10px;
  line-height: 25px;
  display: block;
  border-radius: 6px 6px 0 0;
}
.produkthighlights .prod-high-item a .badges .status.Bestseller {
  background-color: #005721;
}
.produkthighlights .prod-high-item a .badges .status.Neuheit {
  background-color: #009739;
}

.produktnews .col-md-8 {
  border-radius: 18px;
  border: 1px solid #BBBDBE;
}
.produktnews .col-md-8 img {
  border-radius: 18px;
}
.produktnews .col-md-4 {
  border-radius: 18px;
  padding: 2.6vw;
  background: linear-gradient(270deg, #009739 0%, #004119 100%);
  color: white;
}
.produktnews .prod-facts {
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  padding-top: clamp(0.3125rem, 0.1084rem + 0.5102vw, 0.625rem);
}

.pagemenu .col-md-4 {
  border-radius: 18px;
  background-color: #EAE6DC;
}
.pagemenu .col-md-4 .teaser-text {
  padding: clamp(0.625rem, 0.2168rem + 1.0204vw, 1.25rem);
  height: 100%;
}
.pagemenu .col-md-4 .image img {
  border-radius: 20px 20px 0 0;
}
.pagemenu a {
  text-decoration: none;
}
.pagemenu a .title {
  color: #009739;
}
.pagemenu a .subtitle {
  color: #404040;
}
.pagemenu .pitem {
  transition: box-shadow 0.3s ease-in-out;
}
.pagemenu .pitem:hover {
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.3);
}

.banner .grid {
  border-radius: 18px;
  justify-content: center;
}
.banner .grid .frame-type-text {
  padding: clamp(2.5rem, 0.8673rem + 4.0816vw, 5rem) 0;
}
@media only print, screen and (min-width: 820px) {
  .banner .grid .col-md-5 {
    grid-column-end: span 4;
  }
}
.banner .grid .col-md-7 img {
  border-radius: 18px 0 0 18px;
}

.banner.bgcolor_1 .grid {
  background: linear-gradient(270deg, #8FD400 0%, #009739 100%);
}

section.beige-bg section {
  margin-top: 2.6vw;
  padding: 0;
}
section.beige-bg section .grid {
  padding: 0;
}

section.beige-bg {
  background: #EAE6DC;
  margin-left: 2.5%;
  margin-right: 2.5%;
  border-radius: 18px;
}
section.beige-bg .grid {
  width: 100%;
  padding: 0 2.5%;
}

section.beige-bg.hero-img {
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
}
section.beige-bg.hero-img .grid {
  width: 100%;
  padding: 0 5%;
}

.fakten p {
  max-width: 18ch;
  margin: 0 auto;
}
.fakten .frame-yellow-green-bg {
  background: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='391' height='391' viewBox='0 0 391 391'%3E%3Cpath fill='%238fd400' fill-rule='evenodd' d='M5.284 182.742 182.742 5.284c7.046-7.045 18.47-7.045 25.516 0l177.458 177.458c7.045 7.046 7.045 18.47 0 25.516L208.258 385.716c-7.046 7.045-18.47 7.045-25.516 0L5.284 208.258c-7.045-7.046-7.045-18.47 0-25.516'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.fakten .frame {
  padding: clamp(3.75rem, 1.301rem + 6.1224vw, 7.5rem) 0;
  height: 100%;
}

/* custom headrom  & ... */
.border-box {
  box-sizing: border-box;
}

/* slider */
.blaze-slider {
  --slides-to-show: 1;
  --slide-gap: $gap;
  direction: ltr;
}

.blaze-container {
  position: relative;
}

.blaze-track-container {
  overflow: clip;
}

.blaze-track {
  will-change: transform;
  touch-action: pan-y;
  display: flex;
  gap: var(--slide-gap);
  --slide-width: calc((100% - (var(--slides-to-show) - 1) * var(--slide-gap)) / var(--slides-to-show));
  box-sizing: border-box;
}

.blaze-track > * {
  box-sizing: border-box;
  width: var(--slide-width);
  flex-shrink: 0;
}

/*------------------------------------------------------------------------------------------------------------*/
/* CUSTOM */
.background-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.background-image .video-embed {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  /*
  height: 100vh;
  height: 100dvh;
  */
  aspect-ratio: 16/9;
  overflow: hidden;
}
.background-image .video-embed .video-embed-item {
  /* Make video to at least 100% wide and tall */
  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  /* Center the video */
  position: absolute;
  bottom: 0;
  left: 0;
}

.termine {
  border: 1px solid #CDDC39;
  border-collapse: collapse;
}
.termine thead th {
  border-top: 1px solid #CDDC39;
  border-bottom: 1px solid #CDDC39;
}
.termine tr td {
  border-left: 1px solid #CDDC39;
  border-top: 1px solid #CDDC39;
  border-bottom: 1px solid #CDDC39;
}

.news-carousel .blaze-slider > .blaze-prev, .news-carousel .blaze-slider > .blaze-next {
  display: none;
}

.events-carousel .satz,
.news-carousel .satz {
  display: flex;
  gap: clamp(0.625rem, 0.2168rem + 1.0204vw, 1.25rem);
  justify-content: space-between;
}
.events-carousel .carousel-event-item a,
.events-carousel .carousel-item a,
.news-carousel .carousel-event-item a,
.news-carousel .carousel-item a {
  text-decoration: none;
  color: #fff;
  display: block;
  height: 100%;
}
.events-carousel .news-list-date,
.news-carousel .news-list-date {
  display: block;
  border-bottom: 1px solid #8FD400;
  padding-bottom: clamp(0.1875rem, 0.1059rem + 0.2041vw, 0.3125rem);
  margin-bottom: clamp(0.625rem, 0.2168rem + 1.0204vw, 1.25rem);
}
.events-carousel .carousel-item .text h3,
.news-carousel .carousel-item .text h3 {
  margin-bottom: clamp(0.3125rem, 0.1084rem + 0.5102vw, 0.625rem);
}

.events-carousel .news-list-date {
  display: flex;
  justify-content: space-between;
}

.news-carousel .blaze-pagination {
  gap: 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.news-carousel .blaze-pagination button {
  background: transparent;
  cursor: pointer;
  border: 2px solid #009739;
  border-radius: 5px;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 0;
  transform: rotate(45deg);
}

.news-carousel .blaze-pagination button:hover {
  background: #8FD400;
}

.news-carousel .blaze-pagination button.active {
  opacity: 1;
  background: #009739;
}

.news-carousel .controls {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.25rem, 0.4337rem + 2.0408vw, 2.5rem);
}
.news-carousel .controls .blaze-next,
.news-carousel .controls .blaze-prev {
  display: none;
}

.news .article.carousel-event-item {
  border: 1px solid #8FD400;
}

.news .article.carousel-event-item,
.news .article.carousel-item {
  border-radius: 18px;
  padding: clamp(0.625rem, 0.2168rem + 1.0204vw, 1.25rem);
  background-color: #009739;
  margin: 0;
  transition: background-color 0.3s ease-in-out;
}
.news .article.carousel-event-item:hover,
.news .article.carousel-item:hover {
  background-color: #00763A;
}
.news .article.carousel-event-item .news-img-wrap,
.news .article.carousel-item .news-img-wrap {
  background: none;
  margin: 0;
  border: 1px solid #fff;
}

/* ── FLOATING SIDEBAR BUTTONS ── */
.sidebar-actions {
  position: fixed;
  right: 0;
  top: 18%;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 0;
}
.sidebar-actions li + li {
  margin-top: 0;
}

.sidebar-btn {
  background-color: transparent;
  border-radius: 8px;
  display: flex;
  align-items: center;
  transition: transform 0.5s ease-out, background-color 0.3s ease-out;
  transform: translateX(calc(100% - 64px));
  background-color: transparent;
}
.sidebar-btn a {
  position: relative;
  padding: 0 20px 0 84px;
  text-decoration: none;
  color: #004119;
  line-height: 64px;
}
.sidebar-btn:hover {
  transform: translateX(0);
  background-color: #EAE6DC;
}

.sticky18 a:before {
  content: "";
  position: absolute;
  display: block;
  width: 64px;
  height: 64px;
  background-color: #004119;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' style='width: 20px; height: 20px; stroke: white; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'%3E%3C/path%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 36px 36px;
  background-position: center center;
  top: 0;
  left: 0;
  border-radius: 8px;
}

.sticky17 a:before {
  content: "";
  position: absolute;
  display: block;
  width: 64px;
  height: 64px;
  background-color: #004119;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' style='width: 20px; height: 20px; stroke: white; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 36px 36px;
  background-position: center center;
  top: 0;
  left: 0;
  border-radius: 8px;
}

/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline:before {
  content: "";
  width: 60px;
  height: 100%;
  display: block;
  background: rgb(234, 230, 220);
  background: linear-gradient(90deg, rgb(234, 230, 220) 0%, rgba(234, 230, 220, 0) 100%);
  position: absolute;
  z-index: 2;
}

.timeline:after {
  content: "";
  right: 0;
  top: 0;
  width: 60px;
  height: 100%;
  display: block;
  background: rgb(234, 230, 220);
  background: linear-gradient(90deg, rgba(234, 230, 220, 0) 0%, rgb(234, 230, 220) 100%);
  position: absolute;
}

.timeline a {
  color: inherit;
}
.timeline a .frame {
  overflow-x: hidden;
}
.timeline a .header.col-12 {
  overflow-x: hidden;
}

.timeline button {
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  transition: transform 0.5s;
}

.timeline button:hover {
  transform: scale(1.2);
}

.timeline button.disabled:hover {
  transform: scale(1);
}

.timeline {
  white-space: nowrap;
  overflow-x: hidden;
  position: relative;
}

.timeline ol {
  font-size: 0;
}

.timeline ol li {
  position: relative;
  display: inline-block;
  list-style-type: none;
  width: 230px;
  height: 4px;
  background: #8FD400;
}

.timeline ol li:last-child {
  width: 480px;
}

.timeline ol li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
  transform: translateY(-50%) rotate(45deg);
  background: white;
  border: 4px solid #8FD400;
}

.timeline ol li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  bottom: 0;
  width: 4px;
  height: 34px;
  background: #8FD400;
}

.timeline ol li:nth-child(odd):before {
  transform: translateY(-100%);
}

.timeline ol li div {
  position: absolute;
  left: 0;
  width: 25vw;
  padding: 1rem 0;
  white-space: normal;
  color: black;
}

.timeline ol li:nth-child(odd) div {
  top: -16px;
  transform: translateY(-100%);
}

.timeline ol li:nth-child(even) div {
  top: calc(100% + 16px);
}

.timeline time {
  display: block;
  margin: 1rem 0;
}

.timeline span {
  max-width: 40ch;
  display: block;
}

/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 766px) {
  .timeline ol li div {
    left: 0;
    width: 40vw;
  }
}
@media screen and (max-width: 566px) {
  .timeline ol li div {
    left: 0;
    width: 60vw;
  }
}
/* SCROLL */
#sectionPin {
  display: flex;
  background: var(--text-color);
  color: var(--bg-color);
  overflow: scroll;
}

.pin-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 50px;
}

.pin-wrap > * {
  min-width: 14vmax;
  padding: 0 5vmax;
}

@supports (animation-timeline: view()) {
  @keyframes move {
    to {
      transform: translateX(calc(-100% + 100vw));
    }
  }
  #sectionPin {
    overflow: visible;
    view-timeline-name: --section-pin-tl;
    view-timeline-axis: block;
  }
  .pin-wrap-sticky {
    height: 70vh;
    width: 100vw;
    position: sticky;
    top: 100px;
    width: 100vw;
    overflow-x: hidden;
  }
  .pin-wrap-sticky .pin-wrap {
    height: 70vh;
    width: 290vmax;
    will-change: transform;
    animation: linear move forwards;
    animation-timeline: --section-pin-tl;
    animation-range: contain 0% contain 100%;
  }
}
@media (prefers-reduced-motion: no-preference) {
  /* css page transition api */
  @view-transition {
    navigation: auto;
  }
  body {
    view-transition-name: page;
  }
  ::view-transition-old(page) {
    animation: page-out 0.9s cubic-bezier(0.86, 0, 0.07, 1) both;
  }
  ::view-transition-new(page) {
    animation: page-in 0.9s cubic-bezier(0.86, 0, 0.07, 1) both;
  }
  @keyframes page-out {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes page-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  /* css scroll driven aniomations */
  @supports (animation-timeline: view()) {
    .faq-item,
    .content-elements,
    .portofolio-item {
      animation: autoBLurAnimation linear both;
      animation-timeline: view();
      animation-duration: 0.7ms; /* Firefox requires this to apply the animation */
    }
  }
  .forcehardware {
    transform: translate3d(0, 0, 0);
  }
  .backface {
    backface-visibility: hidden;
  }
  .pers-origin {
    perspective-origin: 50% 0;
  }
  @keyframes autoBLurAnimation {
    0% {
      filter: blur(40px);
    }
    15% {
      filter: blur(0px);
    }
    95% {
      filter: blur(0px);
    }
    100% {
      filter: blur(40px);
    }
  }
  @keyframes open {
    from {
      transform: scale(0.8);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
  @keyframes close {
    from {
      transform: scale(1);
      opacity: 1;
    }
    to {
      transform: scale(0.8);
      opacity: 0;
    }
  }
  @keyframes in-view {
    from {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}
/* footer */
footer {
  position: relative;
  padding-top: clamp(2.5rem, 0.8673rem + 4.0816vw, 5rem);
  margin-top: clamp(5rem, 1.7347rem + 8.1633vw, 10rem);
}
footer a {
  text-decoration: none;
  color: #404040;
}
footer a:hover {
  text-decoration: underline;
}
footer li.active a {
  color: #009739;
}
footer .text-white a {
  text-decoration: underline;
}
footer .text-white a:hover {
  text-decoration: none;
}
footer ul {
  list-style-type: none;
}

footer:before {
  content: "";
  position: absolute;
  display: block;
  aspect-ratio: 1549/900;
  width: 30%;
  height: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1549' height='900' viewBox='0 0 1549 900'%3E%3Cpath fill='%23009739' fill-rule='evenodd' d='M545.188 0c63.477.386 126.852 24.542 175.609 72.5l1.472 1.461L1548.413 900H0V438.987L365.064 73.96C413.534 25.511 476.75.874 540.232.02L542.156 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  left: 0;
  bottom: 0;
  z-index: -1;
}

footer:after {
  content: "";
  position: absolute;
  display: block;
  aspect-ratio: 87/60;
  width: auto;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='870' height='600' viewBox='0 0 870 600'%3E%3Cpath fill='%238fd400' fill-rule='evenodd' d='M870 0v600H134.3l-73.468-73.461c-80.297-80.296-81.1-209.986-2.409-291.354l2.41-2.451L293.591 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.footer-top {
  padding-bottom: clamp(0.625rem, 0.2168rem + 1.0204vw, 1.25rem);
}

.footer-bottom {
  height: 60px;
  align-items: center;
}

footer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column;
  gap: 10px;
}
footer ul.social {
  flex-flow: row;
  display: flex;
  gap: 20px;
  line-height: 1;
}
footer ul.social li a span {
  font-size: 0;
}

.facebook-btn, .instagram-btn, .linkedin-btn {
  color: white;
  font-size: 12px;
  text-decoration: none;
  background-repeat: no-repeat;
  background-size: 20px;
  display: inline-block;
}

.facebook-btn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='16' viewBox='0 0 9 16'%3E%3Cpath fill='%23404040' fill-rule='nonzero' d='M2.557 16V8.844H0V6h2.557V3.76C2.557 1.324 4.143 0 6.46 0 7.57 0 8.523.078 8.8.113v2.543H7.193c-1.26 0-1.503.563-1.503 1.385V6h2.843l-.39 2.844H5.69V16'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  width: 9px;
  height: 16px;
  background-size: cover;
}

.instagram-btn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16'%3E%3Cpath fill='%23404040' fill-rule='nonzero' d='M8.802 3.898A4.095 4.095 0 0 0 4.7 8a4.095 4.095 0 0 0 4.102 4.102A4.095 4.095 0 0 0 12.903 8a4.095 4.095 0 0 0-4.101-4.102m0 6.77a2.67 2.67 0 0 1-2.667-2.668 2.67 2.67 0 0 1 2.667-2.667A2.67 2.67 0 0 1 11.468 8c0 1.471-1.2 2.667-2.666 2.667m5.225-6.938a.954.954 0 0 1-.956.957.957.957 0 1 1 .957-.957m2.717.971c-.06-1.282-.354-2.417-1.292-3.352C14.516.413 13.382.12 12.1.056c-1.32-.075-5.28-.075-6.6 0-1.278.06-2.413.354-3.352 1.29C1.21 2.28.921 3.415.856 4.697c-.075 1.32-.075 5.28 0 6.6.06 1.283.354 2.418 1.292 3.353.94.936 2.07 1.229 3.352 1.293 1.32.075 5.28.075 6.6 0 1.281-.06 2.416-.354 3.352-1.293.935-.935 1.228-2.07 1.292-3.352.075-1.321.075-5.277 0-6.598m-1.706 8.015a2.7 2.7 0 0 1-1.521 1.521c-1.053.418-3.552.322-4.715.322-1.164 0-3.666.092-4.716-.322a2.7 2.7 0 0 1-1.52-1.52C2.148 11.662 2.245 9.163 2.245 8s-.093-3.667.32-4.716a2.7 2.7 0 0 1 1.521-1.521c1.053-.418 3.552-.321 4.716-.321 1.163 0 3.666-.093 4.715.32a2.7 2.7 0 0 1 1.52 1.522c.418 1.053.322 3.552.322 4.716s.096 3.667-.321 4.716'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  width: 17px;
  height: 16px;
  background-size: cover;
}

.linkedin-btn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16'%3E%3Cpath fill='%23404040' fill-rule='nonzero' d='M3.935 16H.523V5.318h3.412zM2.227 3.86c-1.09 0-1.975-.878-1.975-1.939S1.137 0 2.227 0s1.976.86 1.976 1.921-.885 1.94-1.976 1.94M16.705 16H13.3v-5.2c0-1.24-.025-2.829-1.773-2.829-1.774 0-2.046 1.347-2.046 2.74V16H6.073V5.318h3.272v1.457h.048c.455-.84 1.568-1.725 3.228-1.725 3.452 0 4.088 2.21 4.088 5.082V16z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  width: 17px;
  height: 16px;
  background-size: cover;
}

/* media */
@media only screen and (min-width: 2000px) {
  .grid {
    width: 80%;
  }
  section section .grid {
    width: 100%;
  }
  section.beige-bg.hero-img .grid {
    padding: 0 10%;
  }
  section.beige-bg {
    margin-left: 5%;
    margin-right: 5%;
  }
  section.beige-bg .grid {
    padding: 0 5%;
  }
  section.hero .row .frame {
    padding-left: 20%;
  }
}
@media only screen and (max-width: 1920px) {
  footer:before {
    width: 37.5%;
  }
}
@media only screen and (max-width: 1660px) {
  .box {
    width: 20% !important;
  }
}
@media only screen and (max-width: 1260px) {
  .box {
    width: 25% !important;
  }
}
@media only screen and (max-width: 1560px) {
  .box {
    width: 33% !important;
  }
  section.hero .grid .background-image:after {
    width: 62%;
  }
}
@media only screen and (max-width: 1280px) {
  #haupt-menu {
    display: none !important;
  }
  section.hero .grid .background-image:after {
    width: 65%;
  }
}
@media only screen and (max-width: 820px) {
  section.hero .grid .row .frame {
    padding: 0 5%;
  }
  section.hero .grid .background-image:after {
    width: 100%;
    mask-position: center -30%;
    mask-size: 110dvh;
    backdrop-filter: none;
    background-color: rgba(255, 255, 255, 0.9);
  }
  section.hero .grid .row {
    align-items: end;
    padding-bottom: 40px;
  }
}
@media only screen and (max-width: 760px) {
  .box {
    width: 50% !important;
  }
}

/*# sourceMappingURL=main.css.map */