:root{
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;

    --vm-white: #ffffff;
    --vm-black: #000000;
    --vm-grey-500: #717070;
    --vm-grey-200: #d9d9d9;

    --vm-green-900: #00300f;
    --vm-green-800: #006719;
    --vm-green-700: #287b33;
    --vm-green-400: #76b82a;
    --vm-green-300: #93d216;
    --vm-green-200: #d8e6b0;
    --vm-green-100: #edf1ed;

    --vm-yellow-600: #ff920d;
    --vm-yellow-400: #f7a600;
    --vm-yellow-200: #ffc701;
    --vm-yellow-100: #ffe8a3;

    --vm-linear-gradient-light: linear-gradient(90deg, #ffffff, #edf1ed);
    --vm-linear-gradient-middle: linear-gradient(45deg, #717070, #aebac1, #e4e8e5);
    --vm-linear-gradient-lines: linear-gradient(90deg, #d8e6b0, #76b82a);
    --vm-linear-gradient-darkgreene: linear-gradient(45deg, #000000, #00300f, #006719, #93d216);
    --vm-linear-gradient-lightgreene: linear-gradient(45deg, #287b33, #76b82a, #93d216);
    --vm-linear-gradient-orange: linear-gradient(45deg, #f7a600, #ffc701, #ffe8a3);
    --vm-linear-gradient-orange-hover: linear-gradient(45deg, #ff920d, #f7a600, #ffc701, #ffe8a3);
    --vm-linear-gradient-buttons-inside: linear-gradient(90deg, #00300f, #00300f);
    --vm-linear-gradient-buttonborder: linear-gradient(90deg, #006719, #287b33, #93d216, #93d216);
}

html{
    scrollbar-gutter: stable;
  }

*{
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

body {
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
    margin: 0;
    line-height: 1.4;
    color: var(--vm-green-900);
    max-width: 1400px;
    margin-inline: auto;
  }

main{
  margin-inline: auto;
}

h1, h3, h4,
button, input, label {
  line-height: 1.2;
}

h2{
  line-height: 1.8;
}

a{
  text-decoration: none;
  color: var(--vm-white);
}

img{
  display: block;
  block-size: auto;
  max-inline-size: 100%;
}

input, button, textarea, select {
  font: inherit;
  font-size: max(16px, 1em);
}

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

h1,
h2,
h3,
h4,
p,
ol,
ul,
figure,
blockquote {
  margin-block: 0;
}

/* Schriften laden */

/*--------- fonts ------------*/
@font-face {
  font-family: 'Alana';
  src: url(../fonts/Alana-Regular.woff2) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url(../fonts/montserrat-latin-100-italic.woff2) format('woff2'),
      url(../fonts/montserrat-latin-100-italic.woff) format('woff'),
      url(../fonts/montserrat-latin-100-italic.ttf) format('ttf');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url(../fonts/montserrat-latin-100-normal.woff2) format('woff2'),
      url(../fonts/montserrat-latin-100-normal.woff) format('woff'),
      url(../fonts/montserrat-latin-100-normal.ttf) format('ttf');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url(../fonts/montserrat-latin-200-italic.woff2) format('woff2'),
      url(../fonts/montserrat-latin-200-italic.woff) format('woff'),
      url(../fonts/montserrat-latin-200-italic.ttf) format('ttf');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url(../fonts/montserrat-latin-200-normal.woff) format('woff2'),
      url(../fonts/montserrat-latin-200-normal.woff) format('woff'),
      url(../fonts/montserrat-latin-200-normal.ttf) format('ttf');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url(../fonts/montserrat-latin-300-italic.woff2) format('woff2'),
      url(../fonts/montserrat-latin-300-italic.woff) format('woff'),
      url(../fonts/montserrat-latin-300-italic.ttf) format('ttf');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url(../fonts/montserrat-latin-300-normal.woff2) format('woff2'),
      url(../fonts/montserrat-latin-300-normal.woff) format('woff'),
      url(../fonts/montserrat-latin-300-normal.ttf) format('ttf');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url(../fonts/montserrat-latin-400-italic.woff2) format('woff2'),
      url(../fonts/montserrat-latin-400-italic.woff) format('woff'),
      url(../fonts/montserrat-latin-400-italic.ttf) format('ttf');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url(../fonts/montserrat-latin-400-normal.woff2) format('woff2'),
      url(../fonts/montserrat-latin-400-normal.woff) format('woff'),
      url(../fonts/montserrat-latin-400-normal.ttf) format('ttf');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url(../fonts/montserrat-latin-500-italic.woff2) format('woff2'),
      url(../fonts/montserrat-latin-500-italic.woff) format('woff'),
      url(../fonts/montserrat-latin-500-italic.ttf) format('ttf');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url(../fonts/montserrat-latin-500-normal.woff2) format('woff2'),
      url(../fonts/montserrat-latin-500-normal.woff) format('woff'),
      url(../fonts/montserrat-latin-500-normal.ttf) format('ttf');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url(../fonts/montserrat-latin-600-italic.woff2) format('woff2'),
      url(../fonts/montserrat-latin-600-italic.woff) format('woff'),
      url(../fonts/montserrat-latin-600-italic.ttf) format('ttf');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url(../fonts/montserrat-latin-600-normal.woff2) format('woff2'),
      url(../fonts/montserrat-latin-600-normal.woff) format('woff'),
      url(../fonts/montserrat-latin-600-normal.ttf) format('ttf');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url(../fonts/montserrat-latin-700-italic.woff2) format('woff2'),
      url(../fonts/montserrat-latin-700-italic.woff) format('woff'),
      url(../fonts/montserrat-latin-700-italic.ttf) format('ttf');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}


/* hier beginnt die Spielwiese */

section {
  padding-block-start: 5svb;
  padding-block-end: 4svb;
}

footer{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: var(--vm-green-900);
  color: var(--vm-white);
  padding-inline: 2em;
  gap: 2rem;
  padding-block-start: 2svb;
  padding-block-end: 2svb;
  line-height: 1.4;

  .logo-footer{
    width: 35%;
    cursor: pointer;
    min-width: 85px;
  }

  h4{
    color: var(--vm-green-300);
    font-size: clamp(0.65rem, 1.1vw, 1.75rem);
    line-height: 1.8;
  }

  p{
    font-size: clamp(0.35rem, 0.75vw, 1.3rem);
  }
}

nav.primary-navigation{
  display: flex;
  position: fixed;
  width: 100%;
  max-width: 1400px;
  min-height: 60px;
  background-color: var(--vm-green-900);
  justify-content: space-between;
  padding-block: 0.7rem;
  padding-inline: 2.5em;
  z-index: 100;
  border-bottom: 2px solid var(--vm-green-300);
}

nav.primary-navigation > div{
  display: flex;
  align-items: center;
}

.logo-header{
  width: 8vw;
  cursor: pointer;
}

.text-middle{
  color: var(--vm-white);
  font-size: clamp(0.5rem, 1.1vw, 1.75rem);
  text-align: center;
}

@media (width < 445px){
  .text-middle{
    display: none !important;
  }
}

.wrapper-second-navigation{
  width: 3vw;
  min-width: 40px;
  cursor: pointer;
}


/* Bereich des Dropdown-Icons */

/* Dropdown-Menü */
.dropdown-menu {
  position: absolute;
  top: calc(100%);
  right: 0;
  display: flex;
  flex-direction: column;
  width: 33vw;
  min-width: 330px;


  background-color: rgba(255, 255, 255, 0.65);

  z-index: 1000;

  .dropdown-icon {
    display: block;
    cursor: pointer;
  
  }

  a{
    display: block;
    font-size: clamp(1rem, 1.2vw, 1.5rem);
    padding: 1em 2em;
    margin-block: 0.25em;
    background-color: rgba(255, 255, 255, 0.85);
    color: var(--vm-green-900);
    text-decoration: none;
  }

  a:hover{
    background-color: rgba(118, 184, 42, 0.5);
    font-weight: 500;
  }
}


/* Der äußere Rahmen (unverändert) */
.top-section-slideshow {
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  background-size: cover;
  padding-block-start: 10rem;
  padding-block-end: 38rem;
}

@media (width < 445px){
  .top-section-slideshow{
    max-height: 650px;
    padding-block-start: 6rem;
    padding-block-end: 28rem;
  }
}

.position-right{
  object-position: right;
}

/* Gemeinsame Animations-Regeln für Bilder und Texte */
.top-section-slideshow img,
.text-slideshow .wrapper-intro-text {
  position: absolute;
  opacity: 0;
  animation: bildWechsel 9s infinite;
}

/* Spezifisch für die Bilder */
.top-section-slideshow img {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Spezifisch für die Textkästen (Layout und Position) */
.text-slideshow .wrapper-intro-text {
  z-index: 5;
  font-family: sans-serif;
  box-sizing: border-box; /* Verhindert, dass der Kasten rechts übersteht */
}

/* Synchronisierter Zeitverzug für Bild 1 und Text 1 */
.top-section-slideshow img:nth-child(1),
.text-slideshow .wrapper-intro-text:nth-child(1) {
  animation-delay: 0s;
}

/* Synchronisierter Zeitverzug für Bild 2 und Text 2 */
.top-section-slideshow img:nth-child(2),
.text-slideshow .wrapper-intro-text:nth-child(2) {
  animation-delay: 3s;
}

/* Synchronisierter Zeitverzug für Bild 3 und Text 3 */
.top-section-slideshow img:nth-child(3),
.text-slideshow .wrapper-intro-text:nth-child(3) {
  animation-delay: 6s;
}

/* Die gemeinsame Ein- und Ausblend-Animation */
@keyframes bildWechsel {
  0% { opacity: 0; }
  15% { opacity: 1; }
  35% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 0; }
}


.wrapper-intro-text{
  z-index: 10;
  border-radius: 0px 0px 10em 0px;
  background-color: rgba(255, 255, 255, 0.85);
  padding-block-start: 3em;
  padding-block-end: 1em;
  padding-inline-end: 3em;
  border-right: 2em solid rgba(217, 218, 217, 0.5);
  border-bottom: 1em solid rgba(217, 218, 217, 0.5);

  @media (width < 420px){
    border-radius: 0px 0px 4em 0px;
    padding-block-end: 0.5em;  
    padding-inline-end: 1.5em;
    border-right: 1em solid rgba(217, 218, 217, 0.5);
    border-bottom: 0.5em solid rgba(217, 218, 217, 0.5);
  }

}


.text-slideshow{
  padding-block-end: 4vw;
  padding-right: 4vw;
  line-height: 1.4;
  z-index: 10;

  h1{
    font-family: "alana", sans-serif;
    font-weight: 400;
    font-size: clamp(2.8rem, 7vw, 7rem);
    color: var(--vm-green-700);
    line-height: 1;
    padding-inline-start: 5vw;
    }
  
  .first-row{
    font-size: clamp(0.85rem, 2.3vw, 2.5rem);
    margin-inline-start: 5.5vw;
    font-family: 'Montserrat';
    padding-inline-start: 5vw;
  }

  .second-row{
    font-size: clamp(0.85rem, 2.3vw, 2.5rem);
    margin-inline-start: 9.5vw;
    font-family: 'Montserrat';
    padding-inline-start: 5vw;
  }

  .third-row{
    font-size: clamp(0.85rem, 2.3vw, 2.5rem);
    margin-inline-start: 7.5vw;
    font-family: 'Montserrat';
    padding-inline-start: 5vw;
  }

  .intro-bildunterschrift{
    font-size: clamp(0.7rem, 0.95vw, 1.5rem);
    font-family: 'Montserrat';
    font-style: italic;
    margin-block-start: 2em;
    padding-inline-start: 5em;
    max-width: 75ch;
  }
}

.head2{
  font-family: "alana", sans-serif;
  font-size: clamp(2.5rem, 5vw, 5rem);
  color: var(--vm-green-900);
  padding-inline-start: 1.5em;
  line-height: 1.2;
  }

.margin-top{
  padding-block-start: 1.5em;
}

.margin-left{
  padding-inline-start: 26svb;

  @media (width < 420px){
    padding-inline-start: 6svb;

  }

}

.vita-section{
  background: var(--vm-green-100);
}

.portfolio-section{
  display: grid;
  gap: 4rem;
  grid-template-columns: repeat(6, 1fr);
  background: var(--vm-green-900);
  padding-inline: 8vw;

  .wrapper-print{
    grid-column: 1/4;
    display: flex;
    flex-flow: column;
    margin-block-start: 4vw;

    @media (width < 420px){
      grid-column: 1/-1;
    }

  }
  
  .wrapper-digital{
    grid-column: 4/7;
    display: flex;
    flex-flow: column;

    @media (width < 420px){
      grid-column: 1/-1;
      margin-inline-start: 80px;
    }
  }
  
  .wrapper-tools{
    grid-column: 3/7;
    display: flex;
    flex-flow: column;
    margin-block-start: 2vw;

    @media (width < 420px){
      grid-column: 1/-1;
    }
  }
  
  .head2-negativ{
    font-family: "alana", sans-serif;
    font-size: clamp(2rem, 5vw, 5rem);
    color: var(--vm-white);
    line-height: 1;
    }

  .aufzaehlung{
    display: flex;
    align-items: center;
    line-height: 2.5;
    font-size: clamp(0.8rem, 1.4vw, 1.5rem);
    padding-inline-start: 6vw;
    color: var(--vm-white);
  }
  
  .bollo{
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid transparent;
    background: var(--vm-linear-gradient-buttons-inside) padding-box, var(--vm-linear-gradient-lightgreene) border-box;
    border-radius: 50%;
    margin-right: 1em;
  }  

}

.line-divide-section{
  height: 0.5rem;
  width: 100%;
  display: block;
  background: var(--vm-linear-gradient-lines);
}

/* .breadcrumbs{
  padding: 5px;
  color: var(--vm-white);
  font-weight: 600;
  font-size: 1rem;
  background-color: #76b82a;
  position: fixed;
  display: block;
  rotate: -90deg;
  margin-right: 97%;
} */

.grid-container-vita-top{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-inline: 4vw;
}

.wrapper-titel{
  display: block;
}

.wrapper-left{
  display: grid;
  grid-column: span 2;

  ::first-letter{
    font-family: "alana", sans-serif;
    font-size: clamp(2.1rem, 2.5vw, 3.4rem);
    line-height: 0.65;
  }

  .first-text{
    margin-bottom: 2em;
    margin-top: 4em;
    padding: 1em 4em 1em 1em;
    background-color: var(--vm-white);
    border-radius: 0px 0px 5em 0px;
    font-size: clamp(0.85rem, 1.2vw, 1.6rem);
    max-width: 70ch;
    border-bottom: 0.6em solid var(--vm-green-200);
    border-right: 1.2em solid var(--vm-green-200);
  }

  .second-text{
    margin-bottom: 2em;
    margin-inline-start: 12vw;
    padding: 1em 4em 1em 1em;
    background-color: var(--vm-white);
    border-radius: 0px 0px 5em 0px;
    font-size: clamp(0.85rem, 1.2vw, 1.6rem);
    max-width: 60ch;
    border-bottom: 0.6em solid var(--vm-green-200);
    border-right: 1.2em solid var(--vm-green-200);
  }

  .third-text{
    margin-bottom: 2em;
    margin-inline-start: 7vw;
    padding: 1em 4em 1em 1em;
    background-color: var(--vm-white);
    border-radius: 0px 0px 5em 0px;
    font-size: clamp(0.85rem, 1.2vw, 1.6rem);
    max-width: 60ch;
    border-bottom: 0.6em solid var(--vm-green-200);
    border-right: 1.2em solid var(--vm-green-200);
  }

}

.slideshow-portrait{
  display: grid;
  grid-column: 3/4;
  grid-row: auto;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding-inline-start: 15px;
}

.wrapper-portraits{
  display: inline-flex;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-size: cover;
  align-items: end;
}

/* Animations-Regeln für Bilder */
.slideshow-portrait img {
  opacity: 0;
  animation: bildWechsel-portrait 9s infinite;
  object-fit: cover;
  position: absolute;
}

/* Synchronisierter Zeitverzug für Bild 1 */
.slideshow-portrait img:nth-child(1){
  animation-delay: 0s;
}

/* Synchronisierter Zeitverzug für Bild 2 */
.slideshow-portrait img:nth-child(2){
  animation-delay: 3s;
}

/* Synchronisierter Zeitverzug für Bild 3 */
.slideshow-portrait img:nth-child(3){
  animation-delay: 6s;
}

@keyframes bildWechsel-portrait {
  0% { opacity: 0; }
  15% { opacity: 1; }
  35% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 0; }
}

.grid-container-vita{
  display: grid;
  grid-template-columns: 1.5fr 3fr;
  row-gap: 2em;
  margin-inline-start: 7svb;
  margin-inline-end: 5svb;
  padding-block-start: 3em;
}

.jahreszahl{
  display: grid;
  font-family: 'alana', sans-serif;
  font-size: clamp(0.85rem, 2.6vw, 2.5rem);
  padding-block-end: 1em;
  color: var(--vm-green-900);
  padding-inline-start: 2em;
  border-bottom: 1px solid var(--vm-green-300);
}

.text-stationen{
  display: grid;
  font-size: clamp(0.65rem, 1.3vw, 1.5rem);
  /* max-inline-size: 55ch; */
  padding-block-end: 1em;
  padding-inline-end: 1em;
  border-bottom: 1px solid var(--vm-green-300);
  border-right: 1px solid var(--vm-green-300);
  border-radius: 0px 0px 35px 0;
}

.case-studies-section{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 2rem;
  justify-content: center;
  background: var(--vm-green-100);
  padding-inline: 6svb;
  padding-bottom: 4svb;
}

.grid-all{
  display: grid;
  grid-column: 1/-1;
  padding-inline-start: 0;
}

.wrapper-case-studies-grey{
  display: grid;
  background: var(--vm-linear-gradient-middle);
  border-radius: 0px 0px 1vw 0px;
  padding-inline-end: 0.7em;
  padding-block-end: 0.7em;
}

.container-case-study-green{
  display: flex;
  flex-flow: column;
  background: var(--vm-linear-gradient-darkgreene);
  border-radius: 0px 0px 3vw 0px;
  padding: 1rem;
  width: 100%;

}

.image-case-study{
  background-color: var(--vm-white);
  border-radius: 0px 0px 1.5vw 0px;
  border: 1.5px solid var(--vm-white);

  img{
    border-radius: 0px 0px 1.5vw 0px;
    background-size: cover;
  }

}

.image-case-study:hover{
  border: 2px solid var(--vm-green-300)
}

.bildunterschriften{
  color: var(--vm-white);
  line-height: 1.4;
  padding-block-start: 1em;
}

.wrapper-bus{
  display: flex;
  flex-flow: column;
  margin-top: auto;
}

p{
  margin-bottom: 0.5em;
  font-size: clamp(0.9rem, 1vw, 1.3rem);
}

.arrow-circle{
  width: 3svb;
  height: 3svb;
  margin-inline-start: 90%;
}

.arrow-circle:hover{
  transform: translate(2px);
  width: 3.2svb;
  height: 3.2svb;
  margin-inline-start: 89%;
}

/* styling case studies beispiele */

.section-case-studies{
  display: flex;
  flex-flow: column;
  padding: 3rem;
  background: var(--vm-green-100);
  border-bottom: 2px solid var(--vm-linear-gradient-lines);
}

.section-case-studies.seite.aktiv {
  display: flex;
}
.seite{
  display: none;
}

#startseite.seite.aktiv {
  display: block;
}

.wrapper-close-button{
  display: flex;
  max-width: 1400px;
  justify-content: flex-end;
}

.button-close{
  display: flex;
  position: fixed;
  border: 2px solid transparent;
  border-radius: 0 0 0.5em 0;
  padding: 0.2em 0.4em;
  font-size: clamp(1rem, 1.5vw, 1.9rem);
  font-weight: 500;
  background: var(--vm-linear-gradient-lightgreene) padding-box, var(--vm-linear-gradient-buttonborder) border-box;
  color: var(--vm-white);
  cursor: pointer;
  margin-right: 0px;
}

.button-close:hover{
  background: var(--vm-linear-gradient-orange) padding-box, var(--vm-linear-gradient-orange-hover) border-box;
  transform: translate(5px, 5px)
}

.left-zero{
  padding-inline-start: 0;
  margin-block-end: 3rem;
}

.buttonholder-beschreibungen{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 0.9em;
  margin-bottom: 0.5vw;
  justify-items: center;
  justify-content: center;
}

.button-beschreibung-dark{
  display: grid;
  align-items: center;
  width: 70%;
  border: none;
  border-radius: 0 0 0.5em 0;
  padding: 0.2em 0.5em;
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 500;
  cursor: pointer;
  background-color: var(--vm-green-900);
  color: var(--vm-green-400);
}

.button-beschreibung-dark:hover{
  background-color: var(--vm-green-800);
  color: var(--vm-green-100);
  transform: translate(5px, 5px)
}

.button-beschreibung-light{
  background-color: var(--vm-green-400);
  color: var(--vm-green-900);
}

.button-beschreibung-light:hover{
  background-color: var(--vm-green-300);
  color: var(--vm-green-700);
  transform: translate(5px, 5px)
}

.grid-four-columns{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  padding-inline: 6vw;
  padding-bottom: 4vw;
  background-color: var(--vm-green-900);
}

#impressum{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-inline: 5vw;
  gap: 3vw;

  background-color: var(--vm-green-100);
  line-height: 1.4;

  align-items: first baseline;

  .span2{
    display: grid;
    grid-column: 1/-3;
  }
  
  .span2-right{
    display: grid;
    grid-column: -3/-1;
  }

  p{  
    font-size: clamp(0.35rem, 0.75vw, 1.3rem);
  }

  h3{
    color: var(--vm-green-400);
    font-size: clamp(0.65rem, 1.2vw, 2rem);
    line-height: 2.5;
  }

  h4{
    font-size: clamp(0.45rem, 0.85vw, 1.65rem);
    line-height: 2.5;
  }

}


.wrapper-zitate{
  display: grid;
  background: var(--vm-linear-gradient-lightgreene);
  border-radius: 0px 0px 1vw 0px;
  padding: 0.7em;
}

.container-zitat{
  display: flex;
  flex-flow: column;
  background-color: var(--vm-white);
  border-radius: 1vw;
  padding: 1em;
  font-style: italic;

  p{
    font-size: clamp(0.75rem, 1vw, 1.2rem);
    line-height: 1.2;
    font-weight: 500;
    font-style: normal;
    text-align: right;
    color: var(--vm-grey-500);
  }
  
  p:first-child{
    margin-top: 1em;
  }
}

.italic{
  font-style: italic;
}

article{
  font-size: 1rem;
  font-size: clamp(0.95rem, 1.2vw, 1.2rem);
  line-height: 1.7;
  margin-bottom: 2em;
}

article::before{
  content: '»';
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 500;
  color: var(--vm-green-400);
  line-height: 0.6;
  vertical-align: text-bottom;
}

article::after{
  content: '«';
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 500;
  color: var(--vm-green-400);
  justify-content: end;
  line-height: 0.6;
  vertical-align: text-bottom;
}

.light-green{
  color: var(--vm-green-400);
}

section.mail{
  padding-inline: 8svb;
  background-color: var(--vm-green-100);
}

.mailtext{
  padding: 4vw;
  font-size: clamp(0.7rem, 1.3vw, 1.6rem);
}

.buttonsubmit{
  display: flex;
  margin-inline: auto;
  background: var(--vm-linear-gradient-lightgreene) padding-box, var(--vm-linear-gradient-buttonborder) border-box;
  font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.8rem);
  padding-inline: 1.5em;
  padding-block: 0.25em;
  border: 2px solid transparent;
  border-radius: 0 1em 0 0;
  color: var(--vm-white);
  cursor: pointer;
}

.buttonsubmit:hover{
  background: var(--vm-linear-gradient-orange) padding-box, var(--vm-linear-gradient-orange-hover) border-box;
  font-weight: 600;
  transform: translate(5px, 5px)
}

.sm-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-block: 3vw;

  img{
    width: 3rem;
    margin-inline: 1.5rem;
  }
}

.sm-wrapper-footer{
  display: flex;
  align-items: center;

  img{
    width: 2rem;
    margin-inline-end: 1.5rem;
  }
}

.no-margin{
  padding-inline-start: 0;
}


.popup {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Inhalt des Popups */
.popup-box {
  background: rgba(255, 255, 255, 0.85);
  padding: 2rem;
  border-radius: 12px;
  max-width: 800px;
  width: 80%;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.popup-box-colors {
  background: rgba(255, 255, 255, 0.85);
  padding: 2rem;
  border-radius: 12px;
  max-width: 400px;
  width: 50%;
  position: relative;
  box-shadow: 0 5px 30px rgba(0,0,0,0.6);

  div{
    margin-block: 1.5em;
    display: flex;
    align-items: center;
  }

  input[type="radio"]{
    appearance: none;
    width: 1.4em;
    height: 1.4em;
    outline: 2px solid var(--radio-color);
    outline-offset: 2px;
    border-radius: 50%;
    margin-right: 1em;
}

label{
  font-size: clamp(0.9rem, 1.5vw, 1.8rem);
  font-weight: 500;
}

input[type="radio"]:checked{
  background-color: var(--radio-color);
}

}

#pink{
  --radio-color: #c4036d;
}

#blue{
  --radio-color: #0056a1;
}

#black{
  --radio-color: #000000;
}

#green{
  --radio-color: #76b82a;
}

:root:has(#green:checked){
  --vm-green-900: #00300f;
  --vm-green-800: #006719;
  --vm-green-700: #287b33;
  --vm-green-400: #76b82a;
  --vm-green-300: #93d216;
  --vm-green-200: #d8e6b0;
  --vm-green-100: #edf1ed;
  --vm-linear-gradient-light: linear-gradient(90deg, #ffffff, #edf1ed);
  --vm-linear-gradient-middle: linear-gradient(45deg, #717070, #aebac1, #e4e8e5);
  --vm-linear-gradient-lines: linear-gradient(90deg, #d8e6b0, #76b82a);
  --vm-linear-gradient-darkgreene: linear-gradient(45deg, #000000, #00300f, #006719, #93d216);
  --vm-linear-gradient-lightgreene: linear-gradient(45deg, #287b33, #76b82a, #93d216);
  --vm-linear-gradient-buttons-inside: linear-gradient(90deg, #00300f, #00300f);
  --vm-linear-gradient-buttonborder: linear-gradient(90deg, #006719, #287b33, #93d216, #93d216);
}

:root:has(#pink:checked){
  --vm-green-900: #62091f;
  --vm-green-800: #be477d;
  --vm-green-700: #ce4289;
  --vm-green-400: #ec5f75;
  --vm-green-300: #f28b56;
  --vm-green-200: #f6b2b6;
  --vm-green-100: #f6ecf0;
  --vm-linear-gradient-light: linear-gradient(90deg, #ffffff, #edf1ed);
  --vm-linear-gradient-middle: linear-gradient(45deg, #717070, #aebac1, #e4e8e5);
  --vm-linear-gradient-lines: linear-gradient(90deg, #f6ecf0, #f28b56, #ce4289);
  --vm-linear-gradient-darkgreene: linear-gradient(45deg, #000000, #62091f, #ce4289, #f28b56);
  --vm-linear-gradient-lightgreene: linear-gradient(45deg, #e6007e, #ec5f75, #e796c2);
  --vm-linear-gradient-buttons-inside: linear-gradient(90deg, #62091f, #62091f);
  --vm-linear-gradient-buttonborder: linear-gradient(90deg, #be477d, #ce4289, #f28b56, #f6ecf0);
}

:root:has(#blue:checked){
  --vm-green-900: #062c4f;
  --vm-green-800: #313b81;
  --vm-green-700: #0056a1;
  --vm-green-400: #5091c1;
  --vm-green-300: #68b1df;
  --vm-green-200: #bddbf1;
  --vm-green-100: #eaf2fb;
  --vm-linear-gradient-light: linear-gradient(90deg, #ffffff, #edf1ed);
  --vm-linear-gradient-middle: linear-gradient(45deg, #717070, #aebac1, #e4e8e5);
  --vm-linear-gradient-lines: linear-gradient(90deg, #eaf2fb, #68b1df, #0056a1);
  --vm-linear-gradient-darkgreene: linear-gradient(45deg, #000000, #062c4f, #0056a1, #68b1df);
  --vm-linear-gradient-lightgreene: linear-gradient(45deg, #0056a1, #5091c1, #bddbf1);
  --vm-linear-gradient-buttons-inside: linear-gradient(90deg, #062c4f, #062c4f);
  --vm-linear-gradient-buttonborder: linear-gradient(90deg, #313b81, #0056a1, #68b1df, #eaf2fb);
}

:root:has(#black:checked){
  --vm-green-900: #000000;
  --vm-green-800: #575756;
  --vm-green-700: #706f6f;
  --vm-green-400: #a9acae;
  --vm-green-300: #cacaca;
  --vm-green-200: #dedede;
  --vm-green-100: #ededed;
  --vm-linear-gradient-light: linear-gradient(90deg, #ffffff, #edf1ed);
  --vm-linear-gradient-middle: linear-gradient(45deg, #717070, #aebac1, #e4e8e5);
  --vm-linear-gradient-lines: linear-gradient(90deg, #ededed, #cacaca, #706f6f);
  --vm-linear-gradient-darkgreene: linear-gradient(45deg, #000000, #000000, #706f6f, #cacaca);
  --vm-linear-gradient-lightgreene: linear-gradient(45deg, #706f6f, #a9acae, #dedede);
  --vm-linear-gradient-buttons-inside: linear-gradient(90deg, #000000, #000000);
  --vm-linear-gradient-buttonborder: linear-gradient(90deg, #575756, #706f6f, #cacaca, #ededed);
}



.close{
  padding-inline: 0.5rem;
  font-size: 2rem;
  line-height: 1;
  color: var(--vm-green-300);
  margin-inline-start: 95%;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background-color: var(--vm-green-900);

}

/* Animations-Regeln für Bilder im Case Study Bereich */

.bildkarousell{
  width: 90%;
  margin: 20px auto; /* Abstand zwischen den Slidern */
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  
  overflow-x: auto;
  display: flex;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  
  img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

/* .bildkarousell::-webkit-scrollbar{
  display: none;
} */


@media (width < 445px){


  .slideshow-portrait{
    display: none;
  }

  .logo-header{
    width: 105px;
  }

  .text-slideshow{
    width: 350px;
  }

  .wrapper-left{
    grid-column: span 3;
  }

}