:root {
  /* colors */
  --clr-dark-100: #2d2730;
  --clr-dark-080: #575259;
  --clr-dark-060: #7f787a;
  --clr-dark-050: #969397;
  --clr-dark-040: #aba9ac;
  --clr-dark-025: #c7bfbc;
  --clr-dark-020: #d5d4d6;
  --clr-dark-010: #eae9ea;
  --clr-dark-005: #f5f4f5;

  --clr-white: #ffffff;
  --clr-beige-light: #faf2ea;
  --clr-beige-dark: #e9ddd3;

  --clr-accent: #98dcb4;
  --clr-accent-light: #c1ead2;

  /* font face */
  --ff-primary: "Sofia Sans Extra Condensed", sans-serif;
  --ff-secondary: "EB Garamond", serif;

  --ff-heading: var(--ff-primary);
  --ff-body: var(--ff-secondary);

  /* font weight */
  --fw-regular: 400;
  --fw-bold: 700;

  /* font sizes */
  --fs-300: 0.875rem; /* footer 14px */
  --fs-400: 1rem; /* body mh5 dh5 16px */
  --fs-425: 1.063rem;
  --fs-450: 1.125rem; /* mh4 18px */
  --fs-500: 1.25rem; /* mh3 20px */
  --fs-600: 1.5rem; /* mh2 dh4 24px */
  --fs-700: 1.875rem; /* mh1 dh3 30 px */
  --fs-800: 2.25rem; /* dh2 36px */
  --fs-900: 3rem; /* dh1 48px */
  --fs-950: 5rem;

  --fs-body: var(--fs-400);
  --fs-primary-heading: var(--fs-700);
  --fs-secondary-heading: var(--fs-425);
  --fs-tertiary-heading: var(--fs-500);
  --fs-nav: var(--fs-450);
  --fs-button: var(--fs-450);

  /* line-height */
  --lh-300: 0.8;
  --lh-400: 1;
  --lh-500: 1.2;
  --lh-600: 1.5;
  --lh-650: 1.75;
  --lh-700: 2;
  --lh-800: 2.25;

  /* letter-spacing */

  --ls-heading: 0.09rem;
  --ls-nav: 0.113rem;
  --ls-400: 0.1rem;
  --ls-500: 0.175rem;

  /* general sizing */
  --size-100: 0.25rem;
  --size-200: 0.5rem;
  --size-300: 0.75rem;
  --size-400: 1rem;
  --size-425: 1.125rem; /* 18px */
  --size-450: 1.25rem;
  --size-500: 1.5rem;
  --size-600: 2rem;
  --size-650: 2.5rem;
  --size-600-neg: -2rem;
  --size-700: 3rem;
  --size-700-neg: -3rem;
  --size-750: 3.5rem;
  --size-800: 4rem;
  --size-800-neg: -4rem;
  --size-900: 5rem;
  --size-900-neg: -5rem;
  --size-950: 7rem;

  --stroke-weight-300: 2px;
  --stroke-weight-400: 3px;

  --flow-spacer: 2rem;

  --border-radius-button: 100vh;
  --border-radius-900: 100vh;
  --border-radius-projects: 1em;
}

@media (min-width: 50em) {
  :root {
    /* desktop heading sizes */
    --fs-primary-heading: var(--fs-900);
    --fs-secondary-heading: var(--fs-425);
    --fs-tertiary-heading: var(--fs-700);
  }
}

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

/* Remove default margin */
* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
  line-height: var(--lh-650);
  font-size: var(--fs-body);
  font-family: var(--ff-body);
  color: var(--clr-dark-100);
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

p a {
  color: var(--clr-dark-100);
  font-weight: var(--fw-bold);
}

p span {
  color: var(--clr-dark-100);
  font-weight: var(--fw-bold);
}

/* Make images easier to work with */
img,
picture,
svg {
  /* max-width: 100%; */
  width: 100%;
  display: block;
}

svg {
  fill: var(--clr-dark-100);
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Utitily classes */

.fill-beige-light {
  fill: var(--clr-beige-light);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* added line */
  border: 0;
}

.container {
  --max-width: 1280px;
  --container-padding: var(--size-400);

  width: min(var(--max-width), 100% - (var(--container-padding) * 2));
  margin-inline: auto;
}

@media (min-width: 50em) {
  .container {
    --container-padding: var(--size-600);
  }
}

@media (min-width: 65em) {
  .container {
    --container-padding: var(--size-800);
  }
}

.flow > * + * {
  /* selects everything but the first element */
  /* vertikaler abstand aller elemente */
  margin-top: var(--flow-spacer, 2em);
}

.flex {
  display: flex;
}

/* wenn bild linksbündig sein soll */
.width-auto {
  width: auto;
}

.margin-auto {
  margin: auto;
}

@media (min-width: 50em) {
  .justify-self-end-md 
    /*for medium screenzised and up*/ {
    justify-self: end;
  }
}

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

@media (max-width: 50em) {
  .reversed {
    order: -1;
  }
}

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

.text-left {
  text-align: left;
}

.text-blocksatz {
  text-align: justify;
}

.text-grey-100 {
  color: var(--clr-dark-100);
}

.text-grey-060 {
  color: var(--clr-grey-060);
}

.text-grey-010 {
  color: var(--clr-grey-010);
}

.text-neutral-100 {
  color: var(--clr-white);
}

.bg-accent {
  background-color: var(--clr-accent);
}

.bg-dark-100 {
  background-color: var(--clr-dark-100);
}

.bg-beige-light {
  background-color: var(--clr-beige-light);
  z-index: -1;
}

.bg-beige-dark {
  background-color: var(--clr-beige-dark);
}

.bg-white-100 {
  background-color: var(--clr-white);
}

.fw-bold {
  font-weight: var(--fw-bold);
}
.fw-regular {
  font-weight: var(--fw-regular);
}

.lh-300 {
  line-height: var(--lh-300);
}

/* h2 */
.primary-heading {
  font-family: var(--ff-heading);
  font-size: var(--fs-primary-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-400);
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
}

/* h1 impressum & datenschutz */
.h1-impressum {
  font-size: var(--fs-900);
}

.section-h2 {
  line-height: 1;
  position: relative;
  display: inline-block;
}

.section-h2::after {
  content: "";
  height: 50%;
  width: 110%;
  display: block;
  position: absolute;
  bottom: 0;
  left: -0.1em;
  right: -0.1em;
  z-index: -1;
}

.section-h2[data-type="on-white"]::after {
  background-color: var(--clr-beige-light);
}

.section-h2[data-type="on-beige"]::after {
  background-color: var(--clr-white);
}
/* h3 */
.secondary-heading {
  font-family: var(--ff-heading);
  font-size: var(--fs-secondary-heading);
  line-height: var(--lh-500);
  text-transform: uppercase;
  letter-spacing: 1.8px;
}

.tertiary-heading {
  font-family: var(--ff-heading);
  font-size: var(--fs-tertiary-heading);
  line-height: var(--lh-500);
}

.fs-300 {
  font-size: var(--fs-300);
}
.fs-400 {
  font-size: var(--fs-400);
}
.fs-500 {
  font-size: var(--fs-500);
}
.fs-600 {
  font-size: var(--fs-600);
}

/* padding oben und unten */
.padding-block-hero {
  padding-block-start: var(--size-900);
  padding-block-end: var(--size-900);
}

@media (min-width: 50em) {
  .padding-block-hero {
    padding-block-start: var(--size-950);
  }
}

.padding-top-section {
  padding-top: var(--size-900);
}

@media (min-width: 50em) {
  .padding-top-section {
    padding-top: var(--size-950);
  }
}

.padding-block-section {
  padding-block: var(--size-900);
}

@media (min-width: 50em) {
  .padding-block-section {
    padding-block: var(--size-950);
  }
}

.padding-inline-300 {
  padding-left: var(--size-300);
  padding-right: var(--size-300);
}

.padding-inline-700 {
  padding-left: var(--size-700);
  padding-right: var(--size-700);
}

.padding-block-100 {
  padding-block: var(--size-100);
}

.padding-block-300 {
  padding-block: var(--size-300);
}
.padding-block-400 {
  padding-block: var(--size-400);
}
.padding-block-700 {
  padding-block: var(--size-700);
}
.padding-block-900 {
  padding-block: var(--size-900);
}

.padding-top-700 {
  padding-top: var(--size-700);
}

.margin-block-auto {
  margin-block: auto;
}

.margin-block-400 {
  margin-block: var(--size-400);
}
.margin-block-500 {
  margin-block: var(--size-500);
}
.margin-block-700 {
  margin-block: var(--size-700);
}

.margin-bottom-400 {
  margin-bottom: var(--size-400);
}
.margin-bottom-500 {
  margin-bottom: var(--size-500);
}
.margin-bottom-700 {
  margin-bottom: var(--size-700);
}

.margin-top-400 {
  margin-top: var(--size-400);
}
.margin-bottom-500 {
  margin-top: var(--size-500);
}
.margin-top-700 {
  margin-top: var(--size-700);
}

/* general styling */

/* button */

button {
  cursor: pointer;
  text-decoration: none;
  font-family: "Sofia Sans Extra Condensed", sans-serif;
  border-radius: var(--border-radius-button);
  border: none;
  padding: 1em 2em;
  font-weight: var(--fw-bold);
  font-size: var(--fs-button);
  line-height: var(--lh-400);
  letter-spacing: 0.175rem;
  text-transform: uppercase;
  color: var(--clr-dark-100);
  background-color: var(--clr-accent);
  transition: 0.3s;
}

button:hover,
button:focus-visible {
  background-color: var(--clr-accent-light);
}

/* navigation */

.primary-header {
  font-family: var(--ff-heading);
  letter-spacing: var(--ls-nav);
  padding-top: var(--size-300);
  padding-bottom: var(--size-300);
  background-color: var(--clr-beige-light);
  width: 100%;
  position: fixed;
  align-items: center;
  transition: 0.3s;
  z-index: 2;
}

.primary-header.scrolled {
  background-color: var(--clr-beige-light);
  box-shadow: 0 5px 10px 0.1px rgba(0, 0, 0, 0.05);
}

.nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.primary-navigation li {
  position: relative;
  padding: 0;
  margin: auto;
}

.mobile-nav-toggle {
  display: none;
}

.nav-list a {
  text-decoration: none;
  color: var(--clr-dark-100);
  font-size: var(--fs-nav);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  transition: 0.3s;
}

.nav-list a:hover,
.navlist a:focus {
  color: var(--clr-dark-060);
}

.logo-wrapper {
  height: var(--size-650);
  width: var(--size-650);
  align-items: left;
}

.logo {
  fill: var(--clr-dark-100);
  height: 100%;
}

.nav-list {
  display: flex;
  gap: clamp(var(--size-500), 5vw, var(--size-950));
}

@media (min-width: 50em) {
  .nav-list-buttons {
    display: flex;
    gap: var(--size-300);
  }
}

@media (max-width: 50em) {
  .primary-header {
    padding: var(--size-400) 0;
  }

  .primary-navigation {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: translateX(100%);
    transition: 0.5s;
    background-color: var(--clr-beige-light);
    z-index: -1;
  }

  .mobile-nav-toggle {
    background-color: transparent !important;
    border: none !important;
    position: relative;
    display: flex;
    cursor: pointer;
    border: 0;
    padding: 0.5rem 0;
    align-items: center;
    justify-content: flex-end;
  }

  .bar {
    position: relative;
    width: var(--size-600);
    height: var(--stroke-weight-400);
    border-radius: var(--stroke-weight-400);
    background-color: var(--clr-dark-100);
    transform-origin: center;
    transition: 0.3s;
  }

  .bar::before,
  .bar::after {
    content: "";
    position: absolute;
    width: 100%;
    height: var(--stroke-weight-400);
    border-radius: var(--stroke-weight-400);
    background-color: var(--clr-dark-100);
    transform-origin: center;
    transition: 0.5s;
  }

  .bar::before {
    transform: translateY(-9px) translateX(-16px);
  }

  .bar::after {
    transform: translateY(9px) translateX(-16px);
  }

  .nav-list {
    flex-direction: column;
  }

  .nav-list a {
    width: 100%;
    padding: var(--size-200);
  }

  /* open */
  .primary-header.open .bar {
    background-color: transparent;
    transform: rotate(180deg);
  }

  .primary-header.open {
    background-color: var(--clr-white);
  }

  /*strich oben*/
  .primary-header.open .bar:before {
    transform: translateX(-16px) rotate(45deg);
  }

  /*strich unten*/
  .primary-header.open .bar:after {
    transform: translateX(-16px) rotate(-45deg);
  }

  .primary-header.open .primary-navigation {
    transform: translateX(0);
  }
}

/* navigation end */

/* hero */
.hero-grid {
  padding-top: var(--size-900);
  display: grid;
}

@media (min-width: 50em) {
  .hero-grid {
    grid-auto-flow: column;
    grid-template-columns: 2fr 1fr;
  }
}

.hero-bild-wrapper {
  position: relative;
}

.sign {
  position: absolute;
  left: 0;
  top: 0;
  padding-top: var(--size-900);
  padding-left: 0;
  justify-content: left bottom;
  align-content: left bottom;
}

@media (min-width: 50em) {
  .sign {
    padding-top: var(--size-950);
    padding-left: var(--size-900);
  }
}

.sign svg {
  margin-top: var(--size-400);
  margin-right: auto;
  left: 0;
  fill: none;
  stroke: var(--clr-dark-100);
  stroke-width: 1px;
  width: 100px;
  height: 100px;
  transform-origin: top left;
  transform: scale(1.4);
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 30em) {
  .sign svg {
    transform: scale(1.8);
  }
}

@media (min-width: 40em) {
  .sign svg {
    transform: scale(2);
  }
}

@media (min-width: 60em) {
  .sign svg {
    transform: scale(2.5);
  }
}

.hero-text-large {
  display: none;
}
@media (min-width: 50em) {
  .hero-text-large {
    display: grid;
    align-items: end;
    padding-block: var(--size-900);
  }
}

.hero-text-small {
  display: grid;
  align-items: end;
  padding-block: var(--size-300);
}

.container-hts {
  display: block;
  background-color: var(--clr-white);
}

@media (min-width: 50em) {
  .container-hts {
    display: none;
  }
}

.bold-h1 {
  font-family: var(--ff-heading);
  font-size: 16.75rem;
  line-height: 0.7;
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
  color: var(--clr-white);
  /*     color: var(--clr-dark-100); */
  padding-block: var(--size-900);
}

.bold-h1[data-type="inverted"] {
  color: var(--clr-beige-light);
}

.bold-h1 span {
  display: none;
}

@media (max-width: 75em) {
  .bold-h1 {
    font-size: 20vw;
  }
}

@media (max-width: 50em) {
  .bold-h1 {
    font-size: 40vw;
  }
}

.hero-picture {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 75%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

@media (min-width: 50em) {
  .hero-picture {
    width: 50%;
  }
}

.hero-picture picture {
  max-height: 100%;
}

.service-h2 {
  display: flex;
  color: var(--clr-dark-100);
  text-decoration: none;
  text-align: right;
  align-items: right;
  justify-content: center;
  width: fit-content;
  gap: 1rem;
  opacity: 0.25;
  transition: 0.3s;
  margin-left: auto;
  white-space: nowrap;
}

.hero-text-small .service-h2 {
  opacity: 1;
}
.services {
  margin-block: auto;
}

.service-h2:hover,
.service-h2:focus {
  opacity: 1;
}

.service-h2 svg {
  transition: 0.3s;
}

.service-h2:hover svg {
  display: block;
  width: 15px;
}

.arrow {
  width: 15px;
  display: none;
  fill: none;
  stroke: var(--clr-dark-100);
  stroke-width: var(--stroke-weight-300);
  stroke-linecap: round;
  stroke-linejoin: round;
  align-self: flex-end;
  justify-self: center;
  margin-block: auto;
}

.hero-socials {
  display: flex;
  justify-self: end;
  gap: 25px;
  width: fit-content;
}

@media (min-width: 50em) {
  .hero-socials {
    margin-left: auto;
  }
}

.hero-social-icon {
  display: block;
  text-decoration: none;
  color: var(--clr-dark-100);
  width: 25px;
  height: 25px;
  transition: 0.3s;
}

.hero-social-icon:hover,
.hero-social-icon:focus {
  opacity: 0.6;
}

.hero-social-icon i {
  width: 100%;
}

/* HERO END */

/* MODERATION */

.grid-2fr-1fr {
  display: grid;
  gap: var(--size-700);
}

.grid-2fr-1fr > * {
  margin: auto;
}

@media (min-width: 50em) {
  .grid-2fr-1fr {
    grid-auto-flow: column;
    grid-template-columns: 2fr 1fr;
  }
}

.slideshow-moderation {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.slideshow-moderation > * {
  object-fit: cover;
  height: 100%;
  width: 100%;
  position: absolute;
}

.slideshow-moderation > * + * {
  opacity: 0;
}
/* MODERATION END */

/* AUDIO */

.grid-audio {
  display: grid;
  gap: var(--size-700);
}

@media (min-width: 50em) {
  .grid-audio {
    grid-auto-flow: column;
    gap: var(--size-500);
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.audio-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* AUDIO END */

/* MODEL SLIDER */
.slider {
  list-style: none;
  gap: var(--size-600);
  /* scroll-padding-inline: 25px; */
}

.slider > * {
  position: relative;
  padding: var(--size-700) var(--size-600);
  width: 100%;
  flex: 0 0 auto;
  flex-direction: column;
}

@media (max-width: 50em) {
  .slider > * {
    padding-bottom: var(--size-200);
  }
}

@media (min-width: 50em) {
  .slider li:nth-child(even) {
    bottom: 0;
    margin-top: auto;
  }
}

.modelfoto {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.a11y-slider-container {
  display: grid;
}

.a11y-slider-prev {
  bottom: 0;
  left: 0;
  position: absolute;
  background-color: transparent;
  padding-block: 0;
  width: fit-content;
}

@media (max-width: 50em) {
  .a11y-slider-prev {
    display: none;
    transition: 0.3s;
  }
}

.a11y-slider-next {
  bottom: 0;
  right: 0;
  position: absolute;
  background-color: transparent;
  padding-block: 0;
  width: fit-content;
  transition: 0.3s;
}

@media (max-width: 50em) {
  .a11y-slider-next {
    display: none;
  }
}

.a11y-slider-next:hover,
.a11y-slider-next:focus,
.a11y-slider-prev:hover,
.a11y-slider-prev:focus {
  background-color: transparent;
  opacity: 0.6;
}

.a11y-slider-next > *,
.a11y-slider-prev > * {
  stroke: var(--clr-dark-100);
  fill: none;
  stroke-width: var(--stroke-weight-400);
  stroke-linecap: round;
  stroke-linejoin: round;
  align-self: center;
  justify-self: center;
  margin-block: auto;
}

/* 480px = 30em
608px = 38rem
620px = 40rem
672 42
720px = 45em*/
@media (min-width: 40em) {
  .slider > * {
    /* width: 50%; */
    width: calc(50% - var(--size-400));
  }
}

/* 800px = 50 em
1040px = 65em*/
@media (min-width: 65em) {
  .slider > * {
    padding: var(--size-700) var(--size-600);
    /* min-width: 24rem;*/
    width: calc(33% - var(--size-500));
  }
}

.slider img {
  width: 100%;
  object-fit: cover;
  inset: 0;
}

.slider .testimonial {
  flex-direction: column;
  gap: var(--size-200);
}

.a11y-slider-dots {
  display: flex;
  justify-content: center;
  margin-top: var(--size-500);
  gap: var(--size-300);
}

.a11y-slider-dots li {
  display: block;
  width: 12px;
  height: 12px;
  padding: 0;
  transition: 0.3s;
}

.a11y-slider-dots li:hover {
  opacity: 0.6;
}

.a11y-slider-dots li button {
  display: block;
  font-size: 0;
  text-indent: -9999px;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-900);
  background-color: var(--clr-dark-025);
}

.a11y-slider-dots li button.active {
  background-color: var(--clr-dark-100);
}
/* MODEL SLIDER END */

/* LOGO SLIDER */

.slider-logos {
  /* display: flex; */
list-style:none;
/* gap: 3rem;
justify-content: center;
align-items: center;
margin-inline: auto; */
}

.koop-logo {
  fill: var(--clr-dark-100);
  height: 3rem;
  width: auto;
  max-width: 100%;
  transition: transform 0.3s ease;
  margin-inline: auto;
}

@media (max-width: 50em) {
  .koop-logo-banner {
    gap: 1.5rem;
    justify-content: center;
  }

  .koop-logo {
    height: 2rem;
  }
}
/* LOGO SLIDER END */

/* ABOUT */
.about-strich {
  display: block;
  width: var(--stroke-weight-300);
  background-color: var(--clr-dark-100);
  height: 4rem;
  margin-inline: auto;
}
/* ABOUT END */

/* CTA */

.cta {
  position: relative;
}

.cta::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: linear-gradient(
    to right,
    var(--clr-white) 50%,
    var(--clr-beige-light) 0%
  );
  z-index: -2;
}

@media (max-width: 50em) {
  .cta::after {
    background: linear-gradient(
      to top,
      var(--clr-white) 50%,
      var(--clr-beige-light) 0%
    );
  }
}

.grid-1fr-1fr {
  display: grid;
  gap: var(--size-400);
}

@media (max-width: 50em) {
  .grid-1fr-1fr {
    grid-template-rows: 1fr 1fr;
  }
}

@media (min-width: 50em) {
  .grid-1fr-1fr {
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr;
    gap: var(--size-700);
  }
}

.cta-picture-wrapper {
  position: relative;
  background-color: transparent;
  top: 0;
  height: 100%;
  overflow: hidden;
}

.cta-picture {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform-origin: top;
  transform: scale(0.8);
  height: 100%;
}

.cta-text-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-text {
  position: relative;
  display: block;
  margin: 0 auto;
  padding-inline: var(--size-400);
  padding-block: var(--size-700);
}

@media (min-width: 50em) {
  .cta-text {
    padding-inline: var(--size-700);
    padding-block: var(--size-700);
  }
}

/* CTA END */

button[data-type="more"] {
  display: none;
  margin: 0 auto;
  background-color: transparent;
}

@media (max-width: 50em) {
  button[data-type="more"] {
    display: flex;
    gap: var(--size-200);
    width: 100%;
    margin: auto;
    fill: none;
    align-items: center;
    justify-content: center;
  }

  button[data-type="more"] svg {
    fill: none;
    stroke: var(--clr-dark-100);
    stroke-width: var(--stroke-weight-300);
    stroke-linecap: round;
    stroke-linejoin: round;
    width: auto;
  }
  .preview-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* FOOTER */

.grid-footer {
  display: grid;
  column-gap: 0;
  row-gap: var(--size-500);
  grid-template-columns: 1fr 1fr;
}

@media (min-width: 50em) {
  .grid-footer {
    grid-auto-flow: column;
    gap: var(--size-700);
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.primary-footer {
  background-color: var(--clr-dark-100);
  color: var(--clr-beige-light);
  font-size: var(--fs-400);
}

.primary-footer .container {
  padding-block: var(--size-600);
  display: flex;
  gap: var(--size-600);
  flex-direction: column;
}

@media (min-width: 50em) {
  .primary-footer .container {
    padding-block: var(--size-700);
  }
}

.primary-footer svg {
  fill: var(--clr-beige-light);
}
#logo-footer {
  width: 50px;
  height: 50px;
}
.footer-hl {
  display: flex;
  gap: var(--size-600);
  align-items: center;
}

.primary-footer a {
  cursor: pointer;
  text-decoration: none;
  color: var(--clr-beige-light);
  transition: 0.3s;
}

.primary-footer a:hover,
.primary-footer a:focus {
  opacity: 0.6;
}

.primary-footer button:hover,
.primary-footer button:focus {
  opacity: 0.6;
}

.primary-footer button {
  background-color: transparent;
  padding: 0;
  color: var(--clr-beige-light);
  font-family: var(--ff-secondary);
  text-transform: none;
  font-weight: var(--fw-regular);
  letter-spacing: normal;
  font-size: var(--fs-400);
}

.horizontal-line {
  display: block;
  height: var(--stroke-weight-300);
  background-color: var(--clr-beige-light);
  max-width: 100%;
  /* margin-block: var(--size-500); */
}

.vertical-line {
  display: block;
  width: var(--stroke-weight-300);
  background-color: var(--clr-beige-light);
  max-height: 100%;
}

.follow-line {
  grid-column: 1 / 3;
  width: 100%;
}

.service-with-line {
  display: flex;
  gap: var(--size-500);
}

.service-with-line-follow {
  display: flex;
  gap: var(--size-500);
  align-items: stretch;
}

@media (max-width: 50em) {
  .service-with-line-follow {
    grid-column: 1 / 3;
  }
}

.footer-follow {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  width: 100%;
}

@media (min-width: 50em) {
  .footer-follow {
    justify-content: normal;
    flex-direction: column;
    gap: var(--size-600);
  }
}

.footer-service-block {
  display: flex;
  gap: var(--size-300);
  flex-direction: column;
  text-align: left;
}

.footer-service-block > * {
  width: fit-content;
  text-align: left;
}

.footer-h3 {
  font-family: "Sofia Sans Extra Condensed", sans-serif;
  font-weight: var(--fw-bold);
  font-size: var(--fs-button);
  line-height: var(--lh-400);
  letter-spacing: 0.175rem;
  text-transform: uppercase;
  padding-top: var(--size-100);
}

.copyright {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
}

@media (max-width: 50em) {
  .copyright {
    text-align: center;
    flex-direction: column;
    gap: var(--size-300);
    align-items: center;
  }
}
/* FOOTER END */

/* small screen only */

.small-only {
  display: block;
}

@media (min-width: 50em) {
  .small-only {
    display: none;
  }
}

.large-only {
  display: none;
}

@media (min-width: 50em) {
  .large-only {
    display: block;
  }
}

.datenschutz {
  display: flex;
  flex-direction: column;
}

.datenschutz h1 {
  width: fit-content;
}

.datenschutz h2 {
  font-size: var(--fs-700);
  padding: 0;
}

.datenschutz img {
  width: auto;
}

.anchor {
  position: relative;
  padding-bottom: var(--size-700);
  margin: 0;
}

/* error pages */

.error-page {
  min-height: 100vh;
}

/* animation version 1 */

.reveal {
  position: relative;
  transform: translateY(50px);
  opacity: 0;
  transition: 1s all ease;
}
.reveal.active {
  transform: translateY(0);
  opacity: 1;
}