/**
* @license
* MyFonts Webfont Build ID 504008
*
* The fonts listed in this notice are subject to the End User License
* Agreement(s) entered into by the website owner. All other parties are
* explicitly restricted from using the Licensed Webfonts(s).
*
* You may obtain a valid license from one of MyFonts official sites.
* http://www.fonts.com
* http://www.myfonts.com
* http://www.linotype.com
*
*/

@font-face {
  font-family: "Gilroy";
  src: url("/assets/webfonts/gilroy-webfont-kit/webFonts/GilroyExtraBold/font.woff2")
      format("woff2"),
    /* url("/assets/webfonts/gilroy-webfont-kit/webFonts/GilroyExtraBold/font.woff")
      format("woff"); */;
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("/assets/webfonts/gilroy-webfont-kit/webFonts/GilroyMedium/font.woff2")
      format("woff2"),
    /* url("/assets/webfonts/gilroy-webfont-kit/webFonts/GilroyMedium/font.woff")
      format("woff"); */;
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* transitions for animation */
  --transition-hover: 0.3s;

  /* colors */
  --clr-grey-100: #2b2b2c;
  --clr-grey-090: #404041;
  --clr-grey-080: #555556;
  --clr-grey-070: #6b6b6b;
  --clr-grey-060: #808080;
  --clr-grey-050: #959595;
  --clr-grey-040: #aaaaab;
  --clr-grey-030: #bfbfc0;
  --clr-grey-020: #d5d5d5;
  --clr-grey-010: #eaeaea;
  --clr-grey-005: #f4f4f4;
  --clr-neutral-100: #fff;

  --clr-accent-010: #ffecf6;
  --clr-accent-020: #ffd8ed;
  --clr-accent-030: #ffc5e4;
  --clr-accent-040: #ffb1db;
  --clr-accent-050: #ff9ed2;
  --clr-accent-060: #ff8ac9;
  --clr-accent-070: #ff77c0;
  --clr-accent-080: #ff63b7;
  --clr-accent-090: #ff50ae;
  --clr-accent-100: #ff3ca5;
  --clr-accent-110: #e63695;

  --bg-color-transparent: #ffffffcc;
  --bg-color-transparent-dark: #2b2b2ce2;
  --overlay-color-tp: #2b2b2c99;

  /* font face */
  --ff-primary: "Gilroy";

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

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

  /* font sizes */
  --fs-300: 0.875rem; /* footer 14px */
  --fs-400: 1rem; /* body mh5 dh5 16px */
  --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-600);
  --fs-tertiary-heading: var(--fs-500);
  --fs-nav: var(--fs-300);
  --fs-button: var(--fs-300);

  /* 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-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-450: 1.25rem;
  --size-500: 1.5rem;
  --size-600: 2rem;
  --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-400: 3px;

  --flow-spacer: 2rem;

  --border-radius-button: 0.5em;
  --border-radius-900: 100vh;
  --border-radius-projects: 1em;
  --border-radius-cards: 10px;

  --globalheader-height: 80px;
}

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

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

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

/* Remove list styles on ul, ol which suggests default styling will be removed */
ul,
ol {
  list-style: none;
}

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

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

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
  line-height: var(--lh-650);
  /* text-transform: lowercase; */
}

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

p a,
a {
  color: var(--clr-grey-100);
  font-weight: var(--fw-bold);
  transition: var(--transition-hover);
  cursor: pointer;
}

a:hover,
a:focus {
  color: var(--clr-accent-110);
}

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

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

p.smallprint {
  font-size: var(--fs-300);
}

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

/* 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 */

.light-border {
  border: var(--clr-grey-010) 1px solid;
}

.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;
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

  width: min(var(--max-width), 100% - (var(--container-padding) * 2));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--size-700);
}

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

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

.container-txt-left {
  /* --max-width: 1216px; */
  --max-width: 576px;
  --container-padding: var(--size-400);

  width: min(var(--max-width), 100% - (var(--container-padding) * 2));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

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

@media (min-width: 65em) {
  .container-txt-left {
    --container-padding: var(--size-800);
    margin-right: 32px;
    margin-left: auto;
  }
}

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

.duo-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.duo-buttons-center {
  align-items: center;
}

@media (max-width: 50em) {
  .duo-buttons {
    flex-direction: column;
  }
}

.button-center {
  margin-inline: auto;
}

.nav-duo-buttons {
  gap: 1em;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.html5-ads {
  max-width: 100%;
  height: 100%;
  display: grid;
  gap: var(--flow-spacer, 2em);
}

.html5-ads > * {
  aspect-ratio: 300 / 250;
  width: fit-content;
}

@media (min-width: 50em) {
  .html5-ads {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

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

.grid {
  display: grid;
}

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

/* macht, dass alles mittig ist text und bild */
.even-columns.home > * {
  margin: auto;
}

@media (min-width: 40em) {
  .thirds-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .half-columns {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
  }

  .thirds-columns {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
  }
  .columns-3rds {
    grid-template-columns: 1fr 2fr;
  }

  .columns-ein-viertel {
    grid-template-columns: 1fr 3fr;
  }
  .columns-ein-fuenftel {
    grid-template-columns: 1fr 4fr;
  }
}

@media (max-width: 50em) {
  .columns-3rds.padding-block-300 {
    gap: var(--size-500);
  }

  .columns-3rds,
  .columns-ein-viertel,
  .columns-ein-fuenftel {
    gap: var(--size-500);
  }

  .columns-ein-fuenftel {
    gap: var(--size-300);
  }
}

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

.horizontal-align-center {
  justify-content: center;
}

.justify-self-end {
  justify-self: end;
}

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

.width-100 {
  width: 100%;
}

@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) {
  .img-reversed {
    order: -1;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

.stroke-dark {
  border: var(--stroke-weight-400) solid var(--clr-grey-100);
}

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

.fs-primary-heading {
  font-size: var(--fs-primary-heading);
  line-height: var(--lh-500);
  /* text-transform: lowercase; */
}
.fs-secondary-heading {
  font-size: var(--fs-secondary-heading);
  line-height: var(--lh-500);
  /* text-transform: lowercase; */
}

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

.privacy-policy .fs-tertiary-heading {
  font-size: var(--fs-600);
  letter-spacing: 0.175rem;
  text-transform: uppercase;
}

.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 */
.padding-block-hero {
  padding-block-start: var(--globalheader-height);
}

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

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

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

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

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

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

.padding-horizontal-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.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-auto {
  margin: auto;
}
.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-top-500 {
  margin-top: var(--size-500);
}
.margin-top-700 {
  margin-top: var(--size-700);
}

/* general styling */

body {
  font-size: var(--fs-body);
  font-family: var(--ff-body);
  color: var(--clr-grey-100);
}

/* button */

.card .stretched-link::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0);
}

.button-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

button {
  max-width: 100%;
  cursor: pointer;
  text-decoration: none;
  border: var(--stroke-weight-400) solid var(--clr-accent-110);
  border-radius: var(--border-radius-button);
  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-neutral-100);
  background-color: var(--clr-accent-110);
  width: fit-content;
  white-space: nowrap;
  transition: var(--transition-hover);
}

button:hover,
button:focus-visible {
  background-color: var(--clr-accent-100);
  border: var(--stroke-weight-400) solid var(--clr-accent-100);
}

button[data-type="inverted"] {
  color: var(--clr-neutral-100);
  background-color: transparent;
}

button.inverted {
  color: var(--clr-grey-100);
  background-color: transparent;
  border: var(--stroke-weight-400) solid var(--clr-grey-100);
}

button[data-type="inverted"]:hover,
button[data-type="inverted"]:focus-visible {
  border: var(--stroke-weight-400) solid var(--clr-accent-110);
  color: var(--clr-accent-110);
  background-color: transparent;
}

button.inverted:hover,
button.inverted:focus-visible {
  border: var(--stroke-weight-400) solid var(--clr-accent-110);
  color: var(--clr-accent-110);
  background-color: transparent;
}

button[data-type="accent"] {
  color: var(--clr-neutral-100);
  background-color: transparent;
  border: var(--stroke-weight-400) solid var(--clr-neutral-100);
}

button[data-type="accent"]:hover,
button[data-type="accent"]:focus-visible {
  color: var(--clr-accent-100);
  border: var(--stroke-weight-400) solid var(--clr-accent-100);
}

button[data-type="accordion"] {
  padding: 1rem;
  background-color: transparent;
  color: var(--clr-grey-100);
  border-radius: 0;
  border: none;
  text-align: left;
  width: 100%;
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
  --icon-accordion: "\f107"; /* arrow down */
}

button[data-type="accordion"]::after {
  font-family: "Font Awesome 5 Free";
  content: var(--icon-accordion);
  font-weight: 900;
  display: inline-block;
  vertical-align: middle;
}

button[data-type="accordion"].up {
  --icon-accordion: "\f106"; /* arrow up */
}

button[data-type="accordion"]:hover,
button[data-type="accordion"]:focus-visible {
  color: var(--clr-grey-060);
}

button[data-type="icon"] {
  --icon: "\f130"; /* rechts */
}

button[data-type="icon"].second {
  --icon: "\f0e0"; /* links */
}

button[data-type="icon"]::after {
  font-family: "Font Awesome 5 Free";
  content: var(--icon);
  font-weight: 900;
  padding-left: 1rem;
}

button[data-type="terciary"],
button[data-type="terciary-ext"] {
  background-color: transparent;
  border: none;
  color: var(--clr-grey-100);
  text-transform: none;
  text-decoration: underline;
  letter-spacing: var(--ls-400);
  padding: 0;
}

button[data-type="terciary"]:hover,
button[data-type="terciary"]:focus-visible,
button[data-type="terciary-ext"]:hover,
button[data-type="terciary-ext"]:focus-visible {
  color: var(--clr-accent-100);
}

button[data-type="terciary"]::after,
button[data-type="terciary-ext"]::after {
  font-family: "Font Awesome 5 Free";
  content: "\f061";
  font-weight: 900;
  display: inline-block;
  vertical-align: middle;
  padding-left: 0.5rem;
  padding-bottom: 1px;
}

button[data-type="terciary-ext"]::before {
  font-family: "Font Awesome 5 Free";
  content: "\f08e";
  font-weight: 900;
  display: inline-block;
  vertical-align: middle;
  padding-right: 0.5rem;
  padding-bottom: 1px;
}

button.lang-select {
  text-decoration: underline;
}

/* slider */

.slider,
.slider-noborder {
  display: flex;
  scroll-behavior: smooth;
  list-style: none;
  overflow: scroll !important;
  gap: 2rem;
}

.slider > *,
.slider-noborder > * {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--size-400);
  overflow: hidden;
}
.slider > * {
  border: var(--stroke-weight-400) solid var(--clr-grey-100);
}

.slider-noborder .thumbnail {
  border-radius: var(--border-radius-cards);
  overflow: hidden;
  margin-bottom: 1rem;
}

@media (min-width: 50em) {
  .slider > *,
  .slider-noborder > * {
    width: calc(50% - var(--size-400));
  }
}

.slider .position {
  line-height: var(--lh-400); /* 100% */
  letter-spacing: var(--ls-500);
  text-transform: uppercase;
  color: var(--clr-grey-060);
}

.slider img {
  width: 100%;
}

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

@media (min-width: 50em) {
  .work-grid {
    grid-template-columns: 1fr 1fr;
  }
  .showreel {
    grid-column-start: 1;
    grid-column-end: 3;
  }
}

@media (min-width: 65em) {
  .work-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .showreel {
    grid-column-start: 2;
    grid-column-end: 4;
  }
}

.work-card {
  position: relative;
  background-color: var(--clr-neutral-100);
}

.work-video {
  background-color: var(--clr-grey-100);
  aspect-ratio: 16 / 9;
}

.work-card,
.work-video {
  border-radius: var(--border-radius-cards);
  overflow: hidden;
}

.work-h3 {
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
  text-align: left;
}

.work-description {
  height: max-content;
  background-color: var(--clr-neutral-100);
  display: flex;
  align-items: center;
  padding: var(--size-400);
  gap: var(--size-200);
  justify-content: space-between;
  margin-block: auto;
}

.case {
  background-color: var(--clr-neutral-100);
  border-radius: var(--border-radius-cards);
  overflow: hidden;
}

.case__content {
  flex-direction: column;
  gap: var(--size-400);
  height: 100% !important;
}

.case__video {
  aspect-ratio: 16 / 9 !important;
  height: 100% !important;
}

.star-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  vertical-align: middle;
  color: var(--clr-accent-100);
}

.case__text {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

@media (min-width: 50em) {
  .case__text {
    padding: 2rem;
    gap: 32px;
  }
}

.case__text h3 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-500);
}

.case__portrait {
  display: flex;
  gap: 32px;
}

.case__portrait picture {
  border-radius: var(--border-radius-900);
  overflow: hidden;
  width: 64px;
  max-height: 64px;
  margin-block: auto;
  background-color: var(--clr-grey-030);
}

.case__name {
  font-weight: var(--fw-regular);
  line-height: var(--lh-500);
  height: fit-content;
  margin-block: auto;
}

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

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

.case-button {
  margin-top: auto;
}

/* navigation */

.primary-header {
  padding-top: var(--size-300);
  padding-bottom: var(--size-300);
  background-color: var(--clr-grey-100);
  width: 100%;
  position: fixed;
  align-items: center;
  transition: 0.3s;
  z-index: 2;
}

.header-light {
  background-color: var(--clr-neutral-100);
}

.primary-header.scrolled {
  background-color: var(--bg-color-transparent-dark);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 5px 20px 0.1px rgba(0, 0, 0, 0.1);
}

.header-light.scrolled {
  background-color: var(--bg-color-transparent);
}

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

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

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

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

.logo-desktop {
  height: 4rem;
}

.logo {
  height: 100%;
}

.logo-mobile {
  height: 2rem;
  display: none;
}

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

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

.nav-list a {
  text-decoration: none;
  color: var(--clr-grey-100);
  font-size: var(--fs-nav);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  transition: var(--transition-hover);
  letter-spacing: 0.175rem;
}

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

  .logo-mobile {
    display: block;
  }

  .primary-navigation {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--clr-neutral-100);
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: translateX(100%);
    transition: 0.5s;
    background-color: var(--clr-neutral-100);
    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-grey-100);
    transform-origin: center;
    transition: var(--transition-hover);
  }

  .bar::before,
  .bar::after {
    content: "";
    position: absolute;
    width: 100%;
    height: var(--stroke-weight-400);
    border-radius: var(--stroke-weight-400);
    background-color: var(--clr-grey-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-neutral-100);
  }

  /*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);
  }
}

.mobile-only {
  display: none;
}
.desktop-only {
  display: block;
}

@media (max-width: 50em) {
  .mobile-only {
    display: block;
  }
  .desktop-only {
    display: none;
  }
}

/* navigation end */

/* decoration elements */

.horizontal-line {
  display: block;
  height: var(--stroke-weight-400);
  background-color: var(--clr-grey-100);
  max-width: 100%;
}

.vertical-line {
  display: block;
  width: var(--stroke-weight-400);
  background-color: var(--clr-grey-100);
  height: 100%;
}

.horizontal-line[data-type="inverted"],
.vertical-line[data-type="inverted"] {
  background-color: var(--clr-neutral-100);
}

/* decoration elements end */

.headline-combo {
  gap: var(--size-500);
  margin-bottom: var(--size-700);
}
@media (min-width: 50em) {
  .headline-combo {
    margin-bottom: var(--size-900);
  }
}

/* home images */

.home-img-wrapper {
  position: relative;
  transform: translateX(-1.5%);
}
.home-img {
  position: relative;
  border: solid var(--clr-grey-100) var(--stroke-weight-400);
  width: 97%;
  transform: translateX(4.5%);
  background-color: var(--clr-neutral-100);
}

.ratio-1x1 {
  aspect-ratio: 1;
}

.ratio-1x1::after {
  content: "";
  position: absolute;
  background-color: var(--clr-grey-100);
  border: solid var(--clr-grey-100) var(--stroke-weight-400);
  z-index: -2;
  width: 100%;
  aspect-ratio: 1;
  top: 0;
  transform: translate(-3.5%, 3.5%);
}

.ratio-16x9 {
  aspect-ratio: 16 / 9;
}

.ratio-16x9::after {
  content: "";
  position: absolute;
  background-color: var(--clr-grey-100);
  border: solid var(--clr-grey-100) var(--stroke-weight-400);
  z-index: -1;
  width: 100%;
  aspect-ratio: 16 / 9;
  top: 0;
  transform: translate(-3.5%, 6%);
}

/* skills */

.skills-columns-wrapper {
  gap: var(--size-600);
}

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

.skills-columns-wrapper .ankerlink {
  margin: 0;
}

.skills-hl {
  font-size: var(--fs-800);
  font-weight: var(--fw-bold);
  line-height: var(--lh-400); /* 100% */
  /* text-transform: lowercase; */

  padding-right: var(--size-500);
  background-color: var(--clr-grey-100);
  width: fit-content;
  margin: 0;
}

.skill-list {
  row-gap: var(--size-700);
  column-gap: var(--size-500);
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  justify-content: space-between;
}

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

.skill-list li {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 100%;
  font-weight: var(--fw-bold);
  line-height: var(--lh-400); /* 100% */
  letter-spacing: var(--ls-400);
  text-transform: uppercase;
  margin: auto;
  gap: var(--size-300);
}

.skill-list li img {
  margin: auto;
  width: var(--size-600);
}

.skill-list li i {
  margin: auto;
  font-size: var(--fs-700);
}

/* skills end */

.ankerlink {
  position: relative;
  display: inline-block;
  width: 100%;
  isolation: isolate;
  /*margin-bottom: var(--size-450);*/
}

h2 {
  font-size: var(--fs-400);
  font-weight: var(--fw-bold);
  line-height: var(--lh-400); /* 100% */
  letter-spacing: var(--ls-400);
  margin-top: 0;
  text-transform: uppercase;
  padding-right: var(--size-300);
  background-color: var(--clr-neutral-100);
  width: fit-content;
}

.projects-h3 {
  font-size: var(--fs-400);
  font-weight: var(--fw-bold);
  line-height: var(--lh-650); /* 100% */
  letter-spacing: var(--ls-400);
  text-transform: uppercase;
  padding-right: var(--size-300);
  width: fit-content;
}

.ankerlink::after {
  content: "";
  display: block;
  position: absolute;
  background: var(--clr-grey-100);
  height: var(--stroke-weight-400);
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
}

.ankerlink[data-type="inverted"]::after {
  background: var(--clr-neutral-100);
}

/* video */

.video {
  position: relative;
  width: 100%;
}

.video iframe {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-width: 321px;
}

/* footer */

.hidden {
  display: none;
}

.primary-footer-wrapper {
  display: grid;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--size-600);
  font-size: var(--fs-button);
  grid-template-areas:
    "logo-social"
    "lang"
    "nav"
    "copyright";
}

@media (min-width: 50em) {
  .primary-footer-wrapper {
    grid-template-areas: "copyright lang nav logo-social";
    justify-content: space-between;
  }

  .primary-footer-wrapper p {
    text-align: left;
  }
}

.primary-footer-wrapper > :nth-child(1) {
  grid-area: logo-social;
}

.primary-footer-wrapper > :nth-child(2) {
  grid-area: lang;
}

.primary-footer-wrapper > :nth-child(3) {
  grid-area: nav;
}

.primary-footer-wrapper > :nth-child(4) {
  grid-area: copyright;
}

footer a {
  cursor: pointer;
  text-decoration: none;
  color: var(--clr-neutral-100);
  transition: var(--transition-hover);
}

footer button {
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
  cursor: pointer;
  text-decoration: none;
  color: var(--clr-neutral-100);
  border: none;
  background-color: transparent;
  padding: 0;
}

footer button:is(:hover, :focus) {
  color: var(--clr-accent-100);
  border: none;
  background-color: transparent;
  padding: 0;
}

.footer-hello-wrapper {
  display: grid;
  grid-auto-flow: column;
  gap: var(--size-300);
  justify-content: space-between;
}

.footer-hello-wrapper .horizontal-line {
  width: var(--size-900);
}

.footer-hello {
  cursor: pointer;
  text-decoration: none;
  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-neutral-100);
  max-width: fit-content;
}

.social-list {
  gap: var(--size-300);
  font-size: var(--fs-800);
  color: var(--clr-neutral-100);
  align-items: center;
  justify-content: center;
  height: 32px;
}

.social-list li {
  width: 32px;
}

.social-list svg {
  fill: var(--clr-neutral-100);
  transition: var(--transition-hover);
}

.social-list svg:hover,
.social-list svg:focus {
  fill: var(--clr-accent-100);
}

.toTop-wrap a:is(:hover, :focus) {
  color: var(--clr-grey-100);
}

.toTop-wrap {
  position: relative;
}

.toTop {
  margin: auto;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  height: var(--size-750);
  width: var(--size-750);
  background-color: var(--clr-neutral-100);
  border-radius: var(--border-radius-900);
  color: var(--clr-grey-100);
  font-size: 1.2rem;
  transition: var(--transition-hover);
}
.toTop:hover {
  background-color: var(--clr-grey-020);
  color: var(--clr-grey-100);
  animation: bounce 1.2s ease-in-out infinite 0.1s;
}

@keyframes bounce {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}
/* end footer */

/* img full width*/

@media (max-width: 50em) {
  .img-full {
    position: relative;
    width: 100%;
    aspect-ratio: 16 /9;
  }

  .img-full img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.programs-icons {
  gap: var(--size-300);
  flex-wrap: wrap;
}

.programs-icons > * {
  max-width: var(--size-750);
  aspect-ratio: 1;
  flex-grow: 1;
}

/* projects unterseiten */

.column-gap {
  gap: var(--flow-spacer, 2em);
}

/* error pages */

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

/* creation hero */

.text__centered {
  margin-block: auto;
}

@media (min-width: 50em) {
  .hero-home {
    display: flex;
  }
}

.text__container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

h1 {
  font-size: 48px;
  font-weight: var(--fw-bold);
  width: 100%;
  line-height: var(--lh-500);
}

.h1-line::after {
  content: "";
  border-bottom: var(--stroke-weight-400) solid var(--clr-grey-100);
  width: 100%;
  display: block;
  padding-top: 32px;
}

h1 span,
h3 span {
  color: var(--clr-accent-100);
}

h3 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-800);
  line-height: var(--lh-500);
}

.grid-hero {
  display: grid;
}

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

.hero-home__media,
.hero-home__media picture {
  width: 100%;
  min-height: 100%;
  position: relative;
  display: inline;
}

.hero-home__media picture img {
  width: 100%;
  min-height: 100%;
  max-height: 75vh;
  object-fit: cover;
}

@media (max-width: 50em) {
  .hero-home__media picture img {
    max-height: 75vw;
  }
}

.jump-nav {
  color: var(--clr-neutral-100);
  background-color: var(--clr-grey-100);
  overflow: auto;
  white-space: nowrap;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 80px;
  z-index: 1000;
}

@media (min-width: 50em) {
  .sticky {
    top: 87px;
  }
}

.jump-nav__list {
  display: flex;
  gap: 32px;
  padding: 8px 0;
  list-style: none;
}

.jump-nav__list-element {
  text-decoration: none;
  color: var(--clr-neutral-100);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-500);
  font-size: 14px;
  transition: var(--transition-hover);
}

.jump-nav__list li:nth-last-child(1) {
  padding-right: 16px;
}

.active {
  color: var(--clr-accent-100);
}

.services-cards {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 0 auto;
}

.card {
  background-color: var(--clr-neutral-100);
  border: var(--stroke-weight-400) solid var(--clr-grey-100);
  border-radius: var(--border-radius-cards);
  padding: 2rem;

  display: flex;
  flex-direction: column;
  gap: 20px;
  /* width: 100%; */

  /* overflow: hidden; */
  transition: var(--transition-hover);
  height: fit-content;

  /* Mobile: 1 Card pro Reihe */
  flex: 0 0 100%;
}

.card:hover,
.card:focus-visible {
  transform: translateY(-16px);
  box-shadow: 0 10px 20px rgba(230, 61, 140, 1);
}

/* Tablet: 2-2-1 Layout */
/* @media (max-width: 50em) and (min-width: 40px) { */
@media (min-width: 40em) {
  .card:nth-child(1),
  .card:nth-child(2),
  .card:nth-child(3),
  .card:nth-child(4) {
    flex: 0 0 calc(50% - 1rem); /* 2rem / 2 = 1rem */
  }

  .card:nth-child(5) {
    flex: 0 0 100%;
  }
}

/*Desktop: 3-2 Layout */
@media (min-width: 65em) {
  .card:nth-child(1),
  .card:nth-child(2),
  .card:nth-child(3) {
    /* Bei 3 Cards: 100% - 2 * gap / 3 */
    flex: 0 0 calc(33.333% - 21.33px); /* (2rem * 2) / 3 = 21.33px */
  }

  .card:nth-child(4),
  .card:nth-child(5) {
    /* Bei 2 Cards: 100% - gap / 2 */
    flex: 0 0 calc(50% - 1rem); /* 2rem / 2 = 1rem */
  }
}

.card i {
  margin-left: auto;
  height: 32px;
  font-size: var(--fs-700);
}

.card__text {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.card__heading {
  font-size: 20px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-500);
}
.card-toggle {
  /* width: 100%; */
  padding: 1rem 2rem;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

/* .card-toggle:hover,
.card-toggle:focus {
} */

.card-toggle::after {
  content: "\f107";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  transition: transform 0.3s ease;
}

.card-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.card-content {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 0;
  opacity: 0;
}

.card-content.expanded {
  max-height: 1000px;
  opacity: 1;
}

.card-content-inner {
  padding-bottom: 2rem;
}

.pink-check {
  --icon-space: 1.5em;
  padding: 0;
}

.pink-check li {
  padding-left: var(--icon-space);
  line-height: var(--lh-600);
  padding-bottom: var(--size-300);
}

.pink-check li span {
  font-weight: var(--fw-bold);
}

.pink-check li:before {
  content: "\f00c"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: calc(var(--icon-space) * -1);
  width: var(--icon-space);
  color: var(--clr-accent-100);
}

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

.card small span {
  font-weight: var(--fw-bold);
}

.about__media {
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  max-height: 400px;
}

.about__media picture {
  width: 100%;
  min-height: 100%;
}

.about__media picture img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
  flex: 1;
}

.grid-about {
  width: 100%;
  display: grid;
  gap: 32px;
}

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

.accordion-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: var(--stroke-weight-400) solid var(--clr-grey-100);
}

.accordion-wrapper__element {
  border-bottom: var(--stroke-weight-400) solid var(--clr-grey-100);
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 1rem 2rem;
  display: none;
  overflow: hidden;
}

.show {
  display: block;
}

#contact {
  text-align: center;
  align-items: center;
  justify-content: center;
}

#contact > * + * {
  width: fit-content;
}

#contact p {
  margin: auto;
}

.language-switch {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  margin: auto;
  align-items: center;
}

/* language-switch im header */
nav .language-switch button,
header .language-switch button {
  text-transform: none;
  letter-spacing: normal;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  border: none;
  background-color: transparent;
  padding: 0;
  line-height: normal;
}

header .language-switch {
  color: var(--clr-neutral-100);
}

header[data-type="inverted"] .language-switch {
  color: var(--clr-grey-100);
}

header[data-type="inverted"] #switch-lang {
  color: var(--clr-grey-100);
}