/*
 * DEBUG
——————————————————————————————————————————————— */
/* * { 
  outline: 1px solid red;
  }
   */


/*
 * LENIS Styles
——————————————————————————————————————————————— */
html, body {
  height: 100%;
  }

html.lenis {
  height: auto;
  }

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
  }

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
  }

.lenis.lenis-stopped {
  overflow: hidden;
  }

.lenis.lenis-scrolling iframe {
  pointer-events: none;
  }
  
/* Kein doppeltes Glätten, wenn du Lenis nutzt */
html { scroll-behavior: auto; }
.gewinnspiel-visual { display:block; }
/* Parallax-Elemente performanter */
[data-parallax] { will-change: transform; }

/*
 * MAKE BOXES PREDICTABLE & SOME RESETS
 ——————————————————————————————————————————————— */
*, *::before, *::after {
  box-sizing: border-box;
  }

html, body, p, img, figure {
  margin: 0; padding: 0;
  }
  
img { max-inline-size:100%; block-size:auto; display:block; }

/* Reserviert immer Platz für die Scrollbar – und zwar auf BEIDEN Seiten */
/* → die Seite bleibt zentriert, auch wenn Content auf/zu klappt */
html{ scrollbar-gutter: stable both-edges; }

/* Fallback für alte Browser (optional, schadet nicht) */
body{ overflow-y: scroll; }

/*
 * MAIN VALUES
 ——————————————————————————————————————————————— */
:root {
   /* SCALE / TYPO */
   --p: clamp(1.125rem, 0.993rem + 0.5634vw, 1.5rem);
 
   /* COLORS */
   --ogt-green:  rgb(106, 176, 35);
   --ogt-black:  rgb( 33,  37, 41);
   --ogt-white:  rgb(255, 252, 248);
   --ogt-akzent: #f8ff8c;
   --ogt-blue:   #12638e;
 
   /* GRID BASICS */
   --max-width: 1280px;
   --grid-cols: 4;
   --gutter: calc(var(--p) * 1);
 
   /* WHITESPACE */
   --v-space: calc(var(--p) * 4);
 
   /* CONTAINER & OUTER PADDING */
   --container: min(100%, var(--max-width)); /* gekapselte Seitenbreite */
   --outer-padding: 1;                       /* 1=Außen-Gutter an, 0=aus */
   --outer: calc(var(--gutter) * var(--outer-padding));
 
   /* Minimaler Rand für sehr kleine Screens (z. B. Smartphones) */
   --min-side: 24px;
 
   /* Optional: Seitenrand außerhalb der max-width (z. B. für absolute Elemente) */
   --page-margin: clamp(0px, calc((100% - var(--max-width)) / 2), 999rem);
 }
 
 /* ===== Globale Spalten (Fallback) – z. B. für Full-Bleed Bereiche außerhalb .container ===== */
 :root{
   --col-01: calc(
     (max(0px, var(--container) - (var(--gutter) * (var(--grid-cols) - 1))))
     / var(--grid-cols)
   );
   --col-02: calc((var(--col-01) * 2) + var(--gutter));
   --col-03: calc((var(--col-01) * 3) + (var(--gutter) * 2));
   --col-04: calc((var(--col-01) * 4) + (var(--gutter) * 3));
 }
 
 /* ===== Container: echte Außen-Gutters + Spalten korrekt aus der Content-Box berechnet ===== */
 .container {
   inline-size: var(--container);
   margin-inline: auto;
   /* Nie weniger als --min-side, sonst klebt's am Rand bei schmalen Viewports */
   padding-inline: max(var(--outer), var(--min-side));
   box-sizing: border-box;
   position: relative;
   z-index: 9;
 
   /* Spalten aus 100% der Content-Box (kein doppeltes Abziehen von Außen-Padding) */
   --col-01: calc((100% - (var(--gutter) * (var(--grid-cols) - 1))) / var(--grid-cols));
   --col-02: calc((var(--col-01) * 2) + var(--gutter));
   --col-03: calc((var(--col-01) * 3) + (var(--gutter) * 2));
   --col-04: calc((var(--col-01) * 4) + (var(--gutter) * 3));
 }
 
 /* ===== Full-Bleed Utility (für Hero, Swiper etc.) – zentriert ohne 100vw-Drift ===== */
 .full-bleed {
   inline-size: 100dvw;
   margin-inline: calc(50% - 50dvw);
 }


/*
 * VISUAL GRID HELPER
 ——————————————————————————————————————————————— */
.grid-helper{
   pointer-events: none;
   position: fixed;
   inset: 0;
   z-index: 9999;
 }
 
 /* <- das fehlt dir aktuell: */
 .grid-helper .container{
   display: flex;
   gap: var(--gutter);
   margin-inline: auto;
   inline-size: min(100%, var(--max-width));
   padding-inline: var(--outer);   /* gleiche Außen-Gutters wie deine Seite */
   box-sizing: border-box;
 }
 
 .grid-row{
   inline-size: var(--col-01);
   block-size: 100dvh;             /* robuster als 100vh auf Mobile */
   background-color: rgba(255,0,255,.1);
 }


/*
 * SET BASE COLORS
 ——————————————————————————————————————————————— */
html {
  color:            var(--ogt-green);
  background-color: var(--ogt-white);
  }
::-moz-selection {
  background: var(--ogt-blue);
  text-shadow: none;
  }
::selection {
  background: var(--ogt-blue);
  text-shadow: none;
  }

.embla__container *::-moz-selection {
    background: transparent;
    text-shadow: none;
  }

.embla__container *::selection {
    background: transparent;
    text-shadow: none;
  }
.embla__container *::-moz-selection {
  background: transparent;
  text-shadow: none;
}



/*
 * TYPOGRAPHY
 ——————————————————————————————————————————————— */
/*
 * LOAD fonts
 */
/* open-sans-latin-400-normal */
@font-face {
  font-family: 'Handwritten';
  font-style: normal;
  font-display: auto;
  font-weight: 800;
  src: url('fonts/dakota_rough-webfont.woff2') format('woff2');
  }

/* open-sans-latin-400-normal */
/* @font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: auto;
  font-weight: 400;
  src: url('fonts/open-sans_5.2.6_latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
} */
  
/* open-sans-latin-700-normal */
/* @font-face {
  font-family: 'Open Sans Bold';
  font-style: normal;
  font-display: auto;
  font-weight: 700;
  src: url('fonts/open-sans_5.2.6_latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
} */

@font-face {
  font-family: 'Open Sans Condensed Bold';
  font-style: normal;
  font-display: auto;
  font-weight: 700;
  src: url('fonts/open-sans-condensed/bold.woff') format('woff');
  }
@font-face {
  font-family: 'Open Sans Condensed Light';
  font-style: normal;
  font-display: auto;
  font-weight: 400;
  src: url('fonts/open-sans-condensed/light.woff') format('woff');
  }

/*
 * INIT fonts
 */
body,
p, small {
 font-family: 'Open Sans Condensed Light', 'Helvetica Neue', helvetica, arial, sans;
 text-rendering: optimizeLegibility; 
 
 letter-spacing: calc( var(--p) * .015 );
 }
 @media only screen 
 and (orientation: portrait) 
 and (max-width: 767px) {
   body,
   p, small {
    /* font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;*/
    text-shadow: 0 0 0.02em currentColor;
    -webkit-text-stroke: 0.4px currentColor;
    }
 }

strong,
.subline,
.accordion label {
 font-family: 'Open Sans Condensed Bold', 'Helvetica Neue', helvetica, arial, sans;
 text-rendering: optimizeLegibility; 
 }
.accordion-content p {
 font-family: 'Open Sans Condensed Light', 'Helvetica Neue', helvetica, arial, sans;
 text-rendering: optimizeLegibility; 
 }
 
.hervorheben {
  color: var(--ogt-white);
  background-color: var(--ogt-green);
  padding: 0 calc( var(--p) * .25 );
  }

h1, h2 {
  font-family: 'Handwritten', sans;
  text-rendering: optimizeLegibility;
  }

.tnb h2 {
  font-family: 'Open Sans Condensed Bold', 'Helvetica Neue', helvetica, arial, sans;
  text-rendering: optimizeLegibility;
  }
  
h2.arrow-down::after {
  content: '';
  display: inline-block;
  width:  calc( var(--p) * 5 );
  height: calc( var(--p) * 3 );

  /* margin-left: var(--p);   */
  /* position: absolute; */
  background-image: url('../media/arrow-down-green.svg');
  background-position: center center;
  background-size: cover;
  }
  @media only screen 
  and (orientation: portrait) 
  and (max-width: 767px) {
    h2.arrow-down::after {
      width:  calc( var(--p) * 3 );
      height: calc( var(--p) * 2 );
    }
  }

.gewinnspiel-intro .arrow-down-white {
  margin-top: var(--v-space);
}

p.arrow-down-white::after {
  content: '';
  display: inline-block;
  width:  calc( var(--p) * 5 );
  height: calc( var(--p) * 3 );

  margin-left: var(--p);  
  position: absolute;
  background-image: url('../media/arrow-down-white.svg');
  background-position: center center;
  background-size: cover;
  }
p.arrow-down-green::after {
  content: '';
  display: inline-block;
  width:  calc( var(--p) * 5 );
  height: calc( var(--p) * 3 );

  margin-left: calc( var(--p) * .5 );  
  position: absolute;
  background-image: url('../media/arrow-down-green.svg');
  background-position: center center;
  background-size: cover;
  }
  @media only screen 
  and (orientation: portrait) 
  and (max-width: 767px) {
    p.arrow-down-green::after {
      width:  calc( var(--p) * 3 );
      height: calc( var(--p) * 2 );
    }
  }

/*
 * HELPER
 ——————————————————————————————————————————————— */ 
 
.no-wrap {
  white-space: nowrap;
  }
.hidden {
  display: none;
  }
.spacer {
  height: var(--v-space);
}
  
body {
  position: relative;
  }


/*
 * LINKS
 ——————————————————————————————————————————————— */ 

/* a {
  position: relative;
  transition: color .35s ease;
  }  
a:hover,
a:active {
  color: var(--sb-dark)!important;
  text-decoration: none;
  transition: color 1s ease;
  }
  
a::before {  
  transform: scaleX(0);
  transform-origin: bottom right;
  }
a:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  transition: transform .35s ease;
  }
a::before {
  content:  '';
  display:  inline-block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0 0 0 0;
  background: var(--sb-logo);
  z-index: -1;
  transition: transform .15s ease;
  } */



/*
 * BASE LAYOUT, FONT SIZES AND COLORS
 ——————————————————————————————————————————————— */ 
body {
  font-size: var(--p); 
  }

html,
body,
h1, h2, h3, h4,
section {
  margin: 0; padding: 0;
  }
  
/* html {
  color: var(--ogt-green);
  } */
footer,
.green {
  color: var(--ogt-white);
  }
  
.container h2,
.container .subline {
  color: var(--ogt-green);
  }

.green .container h2,
.green .container .subline {
  color: var(--ogt-white);
  }
  
section {
  background-color: var(--ogt-white);
  position: relative;
  }
section.green {
  background-color: var(--ogt-green);
  }

.container h1, 
.container h2 {
  font-size: calc( var(--p) * 2.75 ); 
  }
.bigger {
  font-size: calc( var(--p) * 4.5 );
  line-height:  calc( var(--p) * 4.25 );  
  }
  @media only screen 
  and (orientation: portrait) 
  and (max-width: 767px) {
    .container h1, 
    .container h2 {
      font-size: calc( var(--p) * 2 ); 
      }
    .bigger {
      font-size: calc( var(--p) * 2.75 ); 
      line-height:  calc( var(--p) * 2.5 ); 
      }
  }

.down h1, 
.down h2 {
  transform: rotate(3deg);  
  }
.up h1, 
.up h2 {
  /* font-size: calc( var(--p) * 3 );  */
  transform: rotate( calc( var(--hl-rotation) * -1 ) );  
  }

.content .subline {
  font-size:  calc( var(--p) * 1.25 );
  margin: var(--v-space) 0;
  }

.faqs label {
  font-size: calc( var(--p) * 1.25 );
  }

.unterstrich {
  position: relative;
  display: inline-block;
  }
.unterstrich::after {
  content: '';
  position: absolute;
  
  height: calc( var(--p) * 2 );
  
  transform: rotate(3deg);  
  
  left: 0;
  right: 0;
  bottom: calc( ( var(--p) * 1.75 ) * -1 );
  
  background-image: url('../media/unterstrich.svg');
  background-repeat: no-repeat;
  /* background-position: 0 100%; */
  background-size: 100%;
  
  /* background: red; */
  pointer-events: none;
  }
  @media only screen 
  and (orientation: portrait) 
  and (max-width: 767px) {
    .unterstrich::after {
      bottom: calc( ( var(--p) * 1.75 ) * -1 );
    }
  }

:root {
  --balken-h:  calc( var(--p) * 12 );
  --hl-rotation:    3deg;
  }


.section-abschluss {
  position: relative;
  z-index: 4;
  overflow-x: clip;
  }
.section-abschluss div {
  position: absolute;
  width: 110%;
  left: -5%;
  height: var(--balken-h);
  background: var(--ogt-green);
  
  margin: calc( ( var(--balken-h) / 2 ) * -.5 ) 0;
  
  /* background: red; */
  }
  @media only screen 
  and (orientation: portrait) 
  and (max-width: 767px) {
    .section-abschluss.about div {
      margin-top: calc( ( var(--balken-h) / 2 ) * -1 );
    }
  }
.section-abschluss .down {
  transform: rotate( calc( var(--hl-rotation) * 1 ) );
  }
.section-abschluss .up {
  transform: rotate( calc( var(--hl-rotation) * -1 ) );
  }

.subline {
  /* font-size: calc( var(--p) * 1.25 );  */
  margin-bottom: calc( var(--p) * 3 );
  } 
p {
  /* font-size: var(--p);  */
  }
section h1,
section h2 {
  width: var(--col-03);
  margin-bottom: calc( var(--p) * 2 );
  /* margin-left: calc( var(--p) * -1 ); */
  }
  @media only screen and (orientation: portrait) {
    section h1,
    section h2 {
      width: var(--col-04);
      margin-bottom: calc( var(--p) * 2 );
      }
  }

/*
 * HERO
 ——————————————————————————————————————————————— */ 
.hero {
  position: relative;

  /* height: 130lvh; */
  
  padding-top: var(--v-space); 
  
  overflow: clip;
  }
.hero { min-block-size: 100svh; block-size: 125lvh; }
.hero { isolation: isolate; }
.hero-bg { contain: paint; }

.hero .layout-bar {
  width: calc( var(--p) * 9 );
  height: 120%;
  
  background-color: var(--ogt-green);
  
  position: absolute;
  left:  calc( var(--p) * -4 );
  top: -10%;
  transform: rotate(5deg);
  }

.hero .hl {
  position: absolute;
  
  width: 35vw;
  
  top: 25vh;
  
  left:   calc( var(--p) * 3 );
  z-index: 9;
  
  transform: rotate(5deg);
  }

.hero .hl img {
  width: 100%;
  }

  @media only screen 
  and (orientation: portrait) 
  and (max-width: 767px) {
    
    .hero {
      height: 110lvh;
      }
    
    .hero .layout-bar {
      height: calc( var(--p) * 9 );
      width: 120%;
      
      top:  calc( var(--p) * -4 );
      left: -10%;
      transform: rotate(5deg);    
      }
    
    .hero .hl {
      width: calc( var(--col-03) + ( var(--gutter) * 2 ) );
      top: calc( var(--p) * 2.5 );
      
      left: 0;
      right: 0;
      margin: 0 auto;
      }

    .hero-bg img { 
      -o-object-position: 54% 50%; 
      object-position: 54% 50%; 
      }

  }

@media (min-aspect-ratio: 21/10) {
  .hero { 
    /* min-block-size: 100svh;  */
    block-size: calc( 100vh * 1.5 ); 
    }
    
  .hero .hl {
    /* width: 25vw; */
    height: calc( 100vh * .5 );
    width: auto;
    top: calc( 100vh * .25 );
    /* background: red; */
    }
  
  .hero .hl img {
    width: auto;
    height: 100%;
    }
    
}

.hero .scroll-cta {
  position: absolute;
  z-index: 9;
  left: var(--col-01);
  top: 80vh;
  
  cursor: pointer;
  }

  @media only screen 
  and (orientation: portrait) 
  and (max-width: 767px) {
    .hero .scroll-cta {
      position: absolute;
      z-index: 9;
      left: var(--gutter);
      top: 70vh;
      }

  }

.hero .scroll-cta img {
  transform: rotate(40deg);
  animation: arrow-bounce 2s ease-in-out infinite;
  }
  
@keyframes arrow-bounce {
  0%, 100% {
    transform: translateY(0) rotate(35deg);
  }
  50% {
    transform: translateY(20px) rotate(45deg);
  }
}
  

/*
 * CLAIM
 ——————————————————————————————————————————————— */ 

#antwort {
 background: red;
 height: 10px;
 width: 100%; 
}

.claim {
  position: relative;
  margin: 0;
  padding: 0;
  }

.claim .claim-img-wrapper {
  width: var(--col-03);
  position: absolute;
  z-index: 12;
  right: 0;
  top: calc( ( var(--balken-h) / 2 ) * -1.75 );
  }
  
  @media only screen 
  and (orientation: portrait) 
  and (max-width: 767px) {

    .claim .claim-img-wrapper {
      width: var(--col-04);
      /* position: absolute; */
      left: 0;
      right: 0;
      margin: 0 auto;
      
      top: calc( ( var(--balken-h) / 2 ) * -1.25 );
      }
  
  }

.claim img {
  width: 100%;  
  }
  
/*
 * ÜBERGANG
 ——————————————————————————————————————————————— */ 
.layout-bar {
  position: relative;
  overflow-x: clip;
  }

.layout-bar::before {
  content: '';
  display: block;
  width: 110%;
  height: calc( var(--p) * 5 );
  background-color: var(--ogt-green);
  
  position: absolute;
  top:  calc( var(--p) * -2.5 );
  left: -5%;
  transform: rotate(4deg);
  }


/*
 * SECTIONS
 ——————————————————————————————————————————————— */ 
section {
  overflow-x: clip;
  padding-top: calc( var(--balken-h) / 2 );
  }

.container .content {
  margin-left: calc( var(--col-01) + var(--gutter) );
  width: var(--col-02);
  }
  @media only screen 
  and (orientation: portrait) 
  and (max-width: 767px) {
    .container .content {
      margin-left: 0;
      width: var(--col-04);
    }
  }

/*
 * ABOUT
 ——————————————————————————————————————————————— */ 
section.about {
  /* padding-top: var(--v-space); */
  padding-top: calc( var(--balken-h) / 1.5 );
  }
  
.about .content .subline {
  margin-bottom: calc( var(--p) * 2 ); 
  }


.about ul {
  list-style-type: none;
  padding: 0;
  /* width: var(--col-02); */
  /* margin-bottom: var(--v-space); */
  }
  @media only screen 
  and (orientation: portrait) 
  and (max-width: 767px) {
    .about ul {
      margin-left: calc( var(--col-01) + var(--gutter) );
      width: var(--col-03);
    }
  }
  
.about ul li {
  position: relative;
  /* padding-left:  calc( var(--p) * 3 ); */
  margin-bottom: calc( var(--p) * 2 );
  }
.about ul li::before {
  content: '';
  position: absolute;
  left: calc( var(--p) * -3.75 );
  top: calc( var(--p) * -.5 );
  width: calc( var(--p) * 3 );
  height: calc( var(--p) * 3 );
  
  background-image: url('../media/check.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  }
  
.about a {
  text-decoration: none;
  color: var(--ogt-white);
  border-bottom: 2px solid var(--ogt-white);
  }


.markets a {
  padding: 0; margin: 0;
  }  

.market-logos {
  display: flex;
  flex-wrap: wrap;
  /* gap: var(--gutter); */
  }
  
.market-logos div {
  padding: 0; margin: 0;
  width: calc(100% / 6);
  aspect-ratio: 1/1;
  }  
  @media only screen 
  and (orientation: portrait) 
  and (max-width: 767px) {
    .market-logos {
      gap: var(--gutter);
    }
    .market-logos div {
      width: var(--col-01);
    }  
  }
  
.market-logos div img {  
  width: 100%;
  }
  
  
/*
 * GEWINNSPIEL
 ——————————————————————————————————————————————— */     

section.gewinnspiel {
  padding-top: calc( var(--balken-h) / 1 );
  }

.gewinnspiel-intro-container {
  position: relative;
  /* display: flex; */
  }
  
.gewinnspiel-visual {
  position: absolute;
  padding-top: calc( var(--balken-h) / 2 );
  width: var(--col-02);
  z-index: 15;
  top: calc( ( var(--balken-h) / 2 ) * -1 );
  right: 0;
  }
  @media only screen 
  and (orientation: portrait) 
  and (max-width: 767px) {
    .gewinnspiel-visual {
      top: calc( ( var(--balken-h) / 2 ) * -.5 );
    }
    
  }
  
  .gewinnspiel-visual img {
    width: 100%;
    }

.gewinnspiel-intro h2 {
  width: var(--col-03);
  }

.motive-container {
  margin-top: var(--v-space);
  margin-bottom: calc( var(--v-space) * 2 );
  }
  
.motive-container .motive {
  display: flex;
  gap: var(--gutter);
  }

.motive-container .motive .motiv {
  margin: 0; padding: 0;
  width: var(--col-01);
  }  
  @media only screen 
  and (orientation: portrait) 
  and (max-width: 767px) {
    
    .motive-container .motive {
      flex-wrap: wrap;
      row-gap: calc( var(--p) * 4.5 );
      }

    .motive-container .motive .motiv {
      width: var(--col-02);
      }  
  }
  
.motive-container .motive img {
  margin: 0; padding: 0;
  width: 100%;
  }  

.motiv {
  position: relative;
  /* text-align: center; */
  }

.motiv button {
  
  cursor: pointer;
  
  border: none;
  background-color: var(--ogt-white);
  color: var(--ogt-green);
  
  /* font-family: 'Handwritten';
  font-style: normal;
  font-display: auto;
  font-weight: 800;
  font-size: calc( var(--p) * 1.25 ); */
  
  width: calc( var(--p) * 5 );
  height: calc( var(--p) * 5 );
  
  border-radius: 50%;
  
  position: absolute;
  z-index: 12;
  
  bottom: calc( var(--p) * -3.5 );
  left: 0;
  }

.motiv button img {
  transform: scale(.95);
  transition: transform 200ms cubic-bezier(.18,.89,.32,1.28);
  }
.motiv button:hover img {
  transform: scale(1);
  }


.n {
  position: relative;
  }
  @media only screen 
  and (orientation: portrait) 
  and (max-width: 767px) {
    .n {
      left: calc( var(--col-01) + var(--gutter) );
      width: var(--col-03);
    }
    .hide-on-mobile {
      display: none;
    }
  }
  
.n::before {
  content: '';
  position: absolute;
  left: calc( var(--p) * -3.75 );
  top: calc( var(--p) * -.5 );
  width: calc( var(--p) * 3 );
  height: calc( var(--p) * 3 );
    
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  }
.n1::before { background-image: url('../media/n1.svg'); }
.n2::before { background-image: url('../media/n2.svg'); }
.n3::before { background-image: url('../media/n3.svg'); }

/*
 * TOAST
 ——————————————————————————————————————————————— */     
/* Toast-Hinweis für Downloads/Sharing */
 .motiv-toast {
   position: fixed;
   left: 50%;
   bottom: 24px;
   transform: translateX(-50%);
   background: var(--ogt-blue);
   color: #fff;
   padding: 12px 16px;
   border-radius: 10px;
   font-size: 14px;
   line-height: 1.2;
   box-shadow: 0 8px 24px rgba(0,0,0,.2);
   opacity: 0;
   visibility: hidden;
   transition: opacity .25s ease, visibility .25s ease;
   z-index: 9999;
 }
 
 .motiv-toast.show {
   opacity: 1;
   visibility: visible;
 }



/*
 * FAQs
 ——————————————————————————————————————————————— */     

section.faqs {
  padding-top: 0;
  }

.accordion-container {
  margin-top: calc( var(--v-space) * 1 );
  
  display: flex;
  justify-content: center;
  }
 
.faqs-container {
  width: var(--col-03);
  }
  @media only screen 
  and (orientation: portrait) 
  and (max-width: 767px) {
    .faqs-container {
      width: var(--col-04);
      }		
  }
 
.faqs a {
 color: var(--ogt-white);
 text-decoration: none;
 border-bottom: 1px solid var(--ogt-white);
 /* transition: color .35s ease-out; */
 }
.faqs a:hover {
 color: white;
 /* border-bottom: 1px solid var(--color-yellow);
 transition: color .05s ease-in; */
 }

 .accordion label {
   position: relative;
   
   z-index: 1;
   
   text-decoration: none;
   
   padding: .35rem .15rem 0rem .15rem;
   /* transition: color .4s ease-out 0s; */
   transition: color .35s ease-out;
   }
 .accordion label:hover {
   /* color: white; */
   /* color: var(--color-yellow); */
   text-decoration: none;
   transition: color .05s ease-in;
   }
 
 .accordion {
   overflow: hidden;
   margin-bottom: calc( var(--p) * .5 );
   
   border-top: 1px solid var(--ogt-white);
   }
    .accordion label  {
    width: 100%;
    display: inline-block;
    cursor: pointer;
    padding-right: 2rem;
    /* transition: color .75s ease; */
    }
    
 .accordion label::after  {
   content: '+';
   position: absolute;
   top: .5rem;
   right: .75rem;
   }
 .accordion .accordion-content {
   max-height: 0;
   opacity: 0;
   transition: all 0.25s ease;
   }
 .accordion .accordion-content p {
   padding-left: calc( var(--p) * .2 );
   }
 /* Toggle visibility of content when heading is clicked */
 .accordion input[type="radio"]:checked + label +  .accordion-content {
   max-height: 600vh;
   opacity: 1;
   padding: 1rem 0 2rem 0;
   transition: all 0.25s ease;
   }
 .accordion input[type="radio"]:checked + label {
   /* color: white; */
   color: var(--color-yellow);
   transition: all 0.25s ease;
   }
 .accordion input[type="radio"]:checked + label::after {
   content: '';
   }
   
 /* Hide the radioes visually */
 .accordion input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  }  
 
 .accordion-content {
   text-transform: none;
   padding: 0;
   /* transition: padding .5s ease; */
   }
 

/*
 * MÄRKTE
 ——————————————————————————————————————————————— */     
section.markets {
  padding-top: var(--balken-h);
  }

.market-logos {
  margin-top: var(--v-space);
}

/*
 * PRODUCT-SWIPER
 ——————————————————————————————————————————————— */     
.embla {
  margin-top: var(--v-space);
  box-sizing: border-box;
  }
/* Embla Basis */
  .embla { position: relative; }
  .embla__viewport {
    overflow: hidden;
    /* Horizontaler Drag, aber vertikales Scrollen weiterhin möglich */
    touch-action: pan-y;
  }
  .embla__container {
    display: flex;
    will-change: transform;
    gap: 16px; /* wie dein vorheriges spaceBetween */
  }
  
  /* Slide-Breiten wie zuvor */
  .embla__slide { flex: 0 0 var(--col-01); }
  @media only screen and (orientation: portrait) and (max-width: 767px) {
    .embla__slide { flex-basis: var(--col-02); }
  }
  .embla__slide .slide-image-container img { 
    width: 100%;
    display: block; 
    transform: scale(.9);
    transform-origin: center;
    }
  
  /* Custom Buttons – gleiche Optik wie vorher */
  .embla__prev,
  .embla__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc( var(--p) * 3 );
    height: calc( var(--p) * 3 );
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
  }
  .embla__prev { left: 0; }
  .embla__next { right: 0; }
  
  .embla__prev img,
  .embla__next img {
    width: 100%; height: auto; display: block;
    transform: scale(.9);
    transition: transform 200ms cubic-bezier(.18,.89,.32,1.28);
  }
  .embla__prev:hover img,
  .embla__next:hover img { transform: scale(1.1); }
  
  /* Desktop: Grab-Cursor für „frei“ anfühlendes Dragging */
  @media (pointer: fine) {
    .embla__viewport { cursor: grab; }
    .embla__viewport:active { cursor: grabbing; }
  }
  
  /* Mobile: Buttons ausblenden – wie vorher bei Swiper */
  @media (pointer: coarse) {
    .embla__prev, .embla__next { display: none !important; pointer-events: none !important; }
  }

.embla__slide .partner-link div {
  }
.partner-link p {
  line-height: calc( var(--p) * .95 ); 
}
.partner-link {
  display: flex;
  align-items: center;
  }  
.partner-link-logo img {
  height: calc( var(--p) * 3 );
  margin-top: calc( var(--p) * .25 );
  margin-left: calc( var(--p) * .25 );
  }


.slide-image-container {
  position: relative;
  }
.slide-image-container::after {
  content: '';
  position: absolute;
  
  width: 100%;
  aspect-ratio: 4/3;
  
  left: 0;
  top: 0;
  
  background-image: url('../media/produkt-rahmen.svg');
  background-position: center center;
  background-size: cover;
  
  }

/*
 * DATENBANK BUTTON + HOVER BEHAVIOR
 ——————————————————————————————————————————————— */ 

.datenbank-button {
  display: flex;
  }
.datenbank-button span {
  display: block;
  }
.datenbank-button .arrow img {
  width: calc( var(--p) * 5 );
  transform: scale(1,-1) rotate(-50deg);
  }

.button a img {
  width: 100%;
  height: auto;
  /* display: block; */
  
  transform: scale(.9);
  transition: transform 200ms cubic-bezier(.18,.89,.32,1.28);
  }

.button a:hover img {
  transform: scale(1);
  }

/*
 * TNB
 ——————————————————————————————————————————————— */   
.tnb h1 {
  width: var(--col-04);
  }
.tnb .tnb-hero {
  margin-top: calc( var(--balken-h) * -.5 );
  }
.tnb #maincontent {
  padding-top: calc( var(--balken-h) * .5 );
  }

.tnb #maincontent {
     inline-size: var(--container);
     margin-inline: auto;
     /* Nie weniger als --min-side, sonst klebt's am Rand bei schmalen Viewports */
     padding-inline: max(var(--outer), var(--min-side));
     box-sizing: border-box;
     position: relative;
     /* z-index: 9; */
     /* background: red; */
     padding-top: calc( var(--balken-h) * 1 );
   }
   
 @media only screen and (min-width: 768px) {
    .tnb #maincontent section {
      padding: calc( var(--v-space) * .5 ) var(--col-01); 
    }
 }
   

/*
 * FOOTER
 ——————————————————————————————————————————————— */ 

.footer-abschluss {
 margin-bottom: calc( var(--balken-h) * -.35 );
 }
main {
  padding-bottom: calc( var(--balken-h) * .5 );
  }

footer {
  overflow-x: clip;
  position: relative;
  background-color: var(--ogt-green);
  /* padding: var(--gutter); */
  padding-top: var(--v-space);
  margin-top: var(--v-space);
  }
  
footer .container {
  height: 70svh;
  }
  @media only screen 
  and (orientation: portrait) 
  and (max-width: 767px) {
    footer .container {
      height: 100svh;
      }
  }

footer a,
#footer-impressum a {
  text-decoration: none;
  color: var(--ogt-white);
  
  border-bottom: 1px solid var(--ogt-white);
  }
  
footer .container {
  display: flex;
  flex-direction: column;
  
  align-content: space-between;
  }
  
.meta-and-social-bar {
  margin-top: auto;
  padding-bottom: calc( var(--gutter) * 1 );
  }

.logo-and-address {
  display: flex;
  /* gap: calc( ( var(--gutter) * 2 ) + var(--col-01) ); */
  gap: calc( var(--col-01) + ( var(--gutter) * 2 ) );
  }

.address p {
  margin-bottom: var(--p);
  }

footer .logo {
  width: var(--col-01);
  /* background: blue; */
  }
  @media only screen 
  and (orientation: portrait) 
  and (max-width: 767px) {
    
    .logo-and-address { 
      flex-direction: column;
    }
    footer .logo {
      width: var(--col-02);
      }  
  }
  
footer .logo img {
  width: 100%;
  }
  
footer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  }
  
footer ul li {
  display: inline-block;
  margin-right: var(--p);
  }
footer .social-block ul li {
  margin-right: 0;
  margin-left: var(--p);
  }
  
footer .meta-and-social-bar {
  display: flex;
  /* justify-content: space-between; */
  justify-content: center;
  }

section.footer-impressum-container {
  margin: 0;
  padding: 0;
  
  background-color: var(--ogt-green);
  }

#footer-impressum h2 {
  font-size: calc( var(--p) * 1.5 );
  margin-top: calc( var(--p) * 4 );
  margin-bottom: calc( var(--p) * 1 );
  
  transform: rotate(-1deg); 
  }

#footer-impressum p {
  font-size: calc( var(--p) * 1 );
  margin-bottom: calc( var(--p) * 1 ); 
  }
  
#footer-impressum {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.5s ease;
  }

#footer-impressum.active {
  max-height: 8000px; /* groß genug wählen */
  opacity: 1;
  }



.meta-block li {
  margin-bottom: var(--p);
}

.meta-block a[href="impressum/"][aria-expanded="true"]::before {
  content: "× ";
  font-weight: 700;
  /* wird durch die small-Regel „überdeckt“, ist nur Fallback */
}

/* (Optional) Accessibility: weniger Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  #footer-impressum {
    transition: none !important;
  }
}
.datenschutz main a,
.tnb main a {
  color: var(--ogt-green);
}


/* === Hero-Reveal =================================== */
/* Bild weich einblenden */
.hero-bg {
  opacity: 0;
  transition: opacity .8s ease;
}
.hero-bg.is-ready { opacity: 1; }

/* Balken + Headline einblenden, ohne bestehende transform zu überschreiben */
.hero .layout-bar,
.hero .hl {
  opacity: 0;
  /* moderne, additive Transform-Komponente */
  translate: 0 12px;
  transition: opacity .6s ease, translate .6s ease;
  will-change: opacity, transform;
}

/* leichte Staffelung für schöneren Effekt */
.hero .layout-bar { transition-delay: .10s; }
.hero .hl         { transition-delay: .25s; }

.hero .layout-bar.reveal-in,
.hero .hl.reveal-in {
  opacity: 1;
  translate: 0 0;
}

/* Motion-Respect */
@media (prefers-reduced-motion: reduce) {
  .hero-bg,
  .hero .layout-bar,
  .hero .hl {
    transition: none !important;
    opacity: 1 !important;
    translate: 0 0 !important;
  }
}

/* Balken bleibt wie gehabt – optional von unten */
/* Headline (HL) kommt von OBEN nach UNTEN */
.hero .hl {
  opacity: 0;
  translate: 0 -28px;        /* Start: 28px nach oben versetzt */
  transition: opacity .3s ease, translate .3s ease;
  transition-delay: .25s;    /* Staffelung hinter dem Balken */
  will-change: opacity, transform;
}

.hero .hl.reveal-in {
  opacity: 1;
  translate: 0 0;            /* Ziel: an ihrer finalen Position */
}

/* optional: Balken leicht von unten */
.hero .layout-bar {
  opacity: 0;
  translate: 0 16px;
  transition: opacity .6s ease, translate .6s ease;
  transition-delay: .10s;
}
.hero .layout-bar.reveal-in { opacity: 1; translate: 0 0; }

/* Motion-Respect */
@media (prefers-reduced-motion: reduce) {
  .hero .hl,
  .hero .layout-bar {
    transition: none !important;
    opacity: 1 !important;
    translate: 0 0 !important;
  }
}