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

@font-face {
  font-family: "GT America Mono Light";
  src: url("fonts/GT-America-Mono-Light.woff2") format("woff2"),
    url("fonts/GT-America-Mono-Light.woff") format("woff");
  font-style: normal;
}

@font-face {
  font-family: "GT America Thin";
  src: url("fonts/GT-America-Standard-Thin.woff2") format("woff2"),
    url("fonts/GT-America-Standard-Thin.woff") format("woff");
  font-style: normal;
}

@font-face {
  font-family: "GT America";
  src: url("fonts/GT-America-Standard-Regular.woff2") format("woff2"),
    url("fonts/GT-America-Standard-Regular.woff") format("woff");
  font-style: normal;
}

/* Variablen ----------------------------------------------------------------------------------- */

:root {
  --padding: 2rem;
  --paddingsmall: calc(var(--padding) / 2);
  --registerheight1: 3rem;
  --registerheight2: 1.8rem;
  --max-width: 100vw;
  --width: calc(100vw - (100vw - 100%));
  --color-black: #000;
  --color-white: #fff;
  --color-greywhite: #eaeaea;
  --color-dirtyyellow: #dcc823;
  --color-dirtyyellow-multiply: #eedd22;
  --color-text: var(--color-black);
  --color-background: var(--color-greywhite);

  --gridline: 2px;
  --border: solid var(--gridline) var(--color-black);
  --font-family-sans-light: "GT America Thin", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-mono-light: "GT America Mono Light", "SFMono-Regular", Consolas,
    "Liberation Mono", Menlo, Courier, monospace;
  --font-family-sans: "GT America", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
  --transition: all 0.5s ease-out;

  --gutter: 0;
  --typo1: 4rem;
  --typo2: 1.8rem;
  --typo3: 1.5rem;
  --typo4: 1.1rem;


  --columns: 6;
  --columnstart1: 1;
  --columnstart2: 2;
  --columnstart5: 5;
  --columnstart3: 3;
  --columnend5: 6;
  --columnend6: 7;
  --columnspan2: 2;
  --columnspan3: 3;
  --columnspan3_3: 3;
  --columnspan4: 4;

  --infografikduration: 15s;
  --mouseX: 0;
  --mouseY: 0;
  --opacity1: 0;
  --opacity2: 0;
  --opacity3: 0;
}

/* Allgemein ----------------------------------------------------------------------------------- */

html {
  font-family: var(--font-family-sans-light);
  color: var(--color-text);
  background: var(--color-background);
  scroll-behavior: smooth;
  -webkit-hyphens: auto;
  -o-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 3;
  font-display: swap;
}

ul {
  padding-left: calc(var(--padding) + var(--paddingsmall));
  padding-bottom: var(--padding);
}

li {
  list-style-type: disc;
}

.row li p {
  padding-top: var(--paddingsmall);
  padding-bottom: 0 !important;
}

.row li::marker {
  content: "→ ";
  font-feature-settings: "kern" 1, "ss03" 1;
  font-family: var(--font-family-mono-light);
  font-size: var(--typo3);
}

.row li:first-of-type p {
  padding-top: var(--padding);
}

a {
  color: currentColor;
  text-decoration: none;
}

button {
  font: inherit;
  background: none;
  border: 0;
  color: currentColor;
  cursor: pointer;
}

.black {
  background-color: #000;
  color: white;
}

.video,
.img {
  position: relative;
  display: block;
  --w: 1;
  --h: 1;
  padding-bottom: calc(100% / var(--w) * var(--h));
  background: var(--color-black);
}

.img img,
.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.img[data-contain] img {
  object-fit: contain;
}

.img[data-contain] img {
  object-fit: contain;
}
.img-caption,
.video-caption {
  padding-top: 0.75rem;
  line-height: 1.5em;
}

/* Typografie ----------------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
}

h1,
.h1 {
  font-size: var(--typo2);
  text-transform: uppercase;
  font-family: var(--font-family-mono-light);
  word-spacing: -0.5rem;
}

h2,
.h2 {
  font-size: var(--typo3);
  text-transform: uppercase;
  font-family: var(--font-family-mono-light);
  word-spacing: -0.2rem;
}

h3,
.h3 {
  font-size: var(--typo3);
  text-transform: uppercase;
  font-family: var(--font-family-mono-light);
  word-spacing: -0.2rem;
}

p,
span {
  font-size: var(--typo3);
}

a {
  text-decoration: none;
}

.whitetext {
  color: var(--color-white);
  position: absolute;
  padding: var(--paddingsmall);
}

strong {
  font-family: var(--font-family-mono-light);
}

.bigtext {
  display: inline-block;
}

.bigtext > *,
.bigtext > * > * {
  font-size: var(--typo1);
  font-family: var(--font-family-sans);
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  line-height: 1.3;
}

.monotext > *,
.monotext > * > * {
  font-family: var(--font-family-mono-light);
}

/* Header ----------------------------------------------------------------------------------- */

.header {
  width: 100%;
  z-index: 5;
  position: fixed;
  top: 0;
  left: 0;
  font-family: var(--font-family-mono-light);
  color: var(--color-black);
  text-transform: uppercase;
  background-color: var(--color-greywhite);
}

.header::after {
  position: absolute;
  content: "";
  border-bottom: var(--border);
  z-index: -1;
  /*height:calc(var(--headerheight) - calc(var(--typo3)/2));*/
  width: 100%;
  height: calc(var(--paddingsmall) + var(--typo3));
}

.mobilelogo,
.mobilesubtitle {
  display: none;
}

.title {
  padding-left: var(--padding);
  grid-column: links;
}

.title,
.subtitle {
  font-family: var(--font-family-mono-light);
  padding-top: var(--paddingsmall);
  padding-bottom: var(--paddingsmall);
  padding-right: var(--paddingsmall);
  background-color: var(--color-greywhite);
  justify-self: start;
}

.subtitle {
  padding-left: var(--paddingsmall);
  transform: translateX(calc(var(--paddingsmall) * -1));
  grid-column: content;
}

.burger {
  justify-self: end;
  background-color: var(--color-greywhite);
  grid-area: rechts;
  padding-left: var(--paddingsmall);
  padding-top: var(--paddingsmall);
  padding-bottom: var(--paddingsmall);
  padding-right: var(--padding);
  transition: var(--transition);
  min-width: 1rem;
}

.burger .h1 {
  width: 100%;
}

.burger.active {
  min-width: 100%;
}

.burger.active .h1:after {
  content: " ×";
  margin-left: auto;
  text-align: right;
  float: right;
}

.burger:hover {
  cursor: pointer;
}

.active {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.inactive {
  display: none;
}

.mobiletitle {
  display: none;
}

/* Menü ----------------------------------------------------------------------------------- */

nav {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  right: calc(calc(calc(100% / var(--columns)) + 2px) * (-1));
  position: fixed;
  flex-direction: column;
  background-color: var(--color-greywhite);
  border-left: var(--border);
  border-top: var(--border);
  height: 100%;
  z-index: 5;
  transition: var(--transition);
  -webkit-transition: var(--transition);
  width: calc(calc(100% / var(--columns)) + 2px);
  font-size: var(--typo3);
  top: calc(var(--headerheight) + var(--gridline));
}

nav.active {
  right: 0;
}

nav a {
  padding-top: var(--paddingsmall);
  padding-bottom: var(--paddingsmall);
  padding-left: var(--paddingsmall);
  padding-right: var(--padding);
  border-bottom: var(--border);
  font-family: var(--font-family-mono-light);
  text-transform: uppercase;
  background-color: var(--color-greywhite);
  transition: var(--transition);
  -webkit-transition: var(--transition);
  max-height: var(--registerheight2);
}

nav a:last-of-type {
  overflow-y: hidden;
}

nav a:not(.menu-current):hover {
  background-color: var(--color-black);
  color: var(--color-white);
  max-height: 5rem;
}

nav a::before {
  transition: var(--transition);
  -webkit-transition: var(--transition);
}

nav a:not(.menu-current):hover::before {
  content: "↗ ";
  font-feature-settings: "kern" 1, "ss03" 1;
  white-space: pre-wrap;
}

nav a.menu-current {
  max-height: inherit;
}

.insta a h1 {
  padding: var(--paddingsmall);
  padding-bottom: 0;
  hyphens: none;
  -ms-hyphens: none;
  -moz-hyphens: none;
  -moz-hyphens: none;
  font-size: var(--typo3);
}

.insta a h1:hover {
  color: var(--color-black);
}

.insta a h1:hover::before {
  content: "↗ ";
  font-feature-settings: "kern" 1, "ss03" 1;
  white-space: pre-wrap;
}

.insta a {
  max-height: inherit;
  padding: 0;
  border-bottom: none;
  overflow: inherit;
}

.insta a:not(.menu-current):hover::before {
  content: none;
}

.eapps-instagram-feed-posts-grid-load-more-text {
  font-family: var(--font-family-mono-light);
  text-transform: uppercase;
}

/* Loader ----------------------------------------------------------------------------------- */

div.loader {
  height: 100%;
  width: 100%;
  background-color: var(--color-black);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 25;
  transition: all 1s ease-out;
  pointer-events: none;
}

div.loader.hidden {
  opacity: 0;
}

div.loader .logosvg a {
  z-index: 26;
  mix-blend-mode: difference;
  filter: invert(1);
}

/* Scrollbutton ----------------------------------------------------------------------------------- */

#scrollbutton {
  width: calc(100% / 6);
  position: fixed;
  bottom: var(--padding);
  z-index: 20;
  text-align: right;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
}

#scrollbutton span a {
  padding: var(--padding);
}

#scrollbutton span a:before {
  content: " ↓ ";
  font-feature-settings: "kern" 1, "ss03" 1;
}

#scrollbutton span a:hover {
  cursor: pointer;
}

.noscrollbutton {
  opacity: 1 !important;
  pointer-events: inherit !important;
}

/* Blob ----------------------------------------------------------------------------------- */

.blob {
  position: fixed;
  bottom: 0;
  right: 0;
  width: calc(100% / 6);
  height: calc(100vw / 7);
  transition: all 0.3s ease-out;
  transform: translateX(calc(3rem * calc(var(--mouseX) / 100)))
    translateY(calc(2rem * calc(var(--mouseY) / 100)))
    skewX(calc(5deg * calc(var(--mouseX) / 100)))
    skewY(calc(5deg * calc(var(--mouseY) / 100)));
  z-index: 19;
}

.blob:hover {
  cursor: pointer;
}

.blob svg {
  width: 150%;
  height: 140%;
  transition: all 0.3s ease-out;
  animation: blobmovement 10s ease-in-out 0s infinite;
}

main[template="about"] .blob svg {
  transition-delay: 0.02s;
}

.logosvg a {
  z-index: 20;
  position: fixed;
  bottom: var(--padding);
  right: var(--padding);
  width: calc(
    calc(100% / var(--columns)) - var(--padding) - var(--padding) -
      var(--padding) - var(--padding) - var(--padding)
  );
}

@keyframes blobmovement {
  0% {
    transform: scaleX(1) scaleY(1);
  }
  25% {
    transform: scaleX(0.9) scaleY(1);
  }
  50% {
    transform: scaleX(1) scaleY(1);
  }
  75% {
    transform: scaleX(1) scaleY(0.9);
  }
  100% {
    transform: scaleX(1) scaleY(1);
  }
}

.blobexplode {
  animation: blobexplode 1.5s ease-in-out;
}

@keyframes blobexplode {
  0% {
    transform: inherit;
  }
  50% {
    width: 300%;
    height: 300%;
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.blobexplode.visible {
  display: block;
}

/* Start ----------------------------------------------------------------------------------- */

#start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.fixedimage {
  width: 100vw;
  position: fixed;
  top: var(--headerheight);
  z-index: 1;
}
.fixedimage.bannersize {
 top:0;
   }

.introtext {
  padding: var(--padding);
  margin-top: calc(var(--headerheight) * -1);
  max-width: 100%;
  z-index: 2;
}

.introtext p {
  hyphens: none;
  -ms-hyphens: none;
  -moz-hyphens: none;
  -moz-hyphens: none;
}

.arrowtext,
.arrowtext > *,
.arrowtext > * > * {
  display: inline;
}

.arrowtext p {
  font-size: inherit;
}

.introtext a,
.arrowtext a {
  text-decoration: none;
  transition: var(--transition);
  display: inline;
}

.introtext a,
.arrowtext a {
  width: calc(100%);
  background-image: linear-gradient(
    transparent calc(100% - var(--gridline)),
    var(--color-black) var(--gridline)
  );
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: var(--transition);
}

.introtext a:hover,
.arrowtext a:hover {
  background-size: 100% 100%;
}

.banner {
  background-color: var(--color-black);
  font-family: var(--font-family-mono-light);
  font-size: var(--typo2);
  text-transform: uppercase;
  color: var(--color-white);
  align-self: flex-end;
  width: 100%;
  z-index: 4;
  padding: var(--paddingsmall);
  overflow-x:hidden;
  white-space: nowrap;
  position:absolute;
}

.bannerwrapper{
  display: inline-block;  
  -moz-animation: marquee 30s linear infinite;
  -webkit-animation: marquee 30s linear infinite;
  animation: marquee 30s linear infinite;
}

.banner p {
  display: inline-block;
}

.banner:hover div {
  animation-play-state: paused;
}

@keyframes marquee {
  100% {
    transform: translateX(-100%);
  }
}

.arrowtext a::before {
  content: "→";
  font-feature-settings: "kern" 1, "ss03" 1;
}

/* Section ----------------------------------------------------------------------------------- */

.sectionheadline {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  grid-area: content;
  margin-top: var(--paddingsmall);
  margin-bottom: var(--padding);
  grid-row: 1;
  align-self: start;
}

.sectionheadline h1 {
  background-color: var(--color-greywhite);
  padding-right: var(--paddingsmall);
  background-color: var(--color-greywhite);
}

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

/* Grid ----------------------------------------------------------------------------------- */

.grid {
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-template-areas: "links content content content content rechts";
}

.grid.nostretch,
.columncontent.nostretch {
  align-content: start;
}

.column {
  background: url("images/schraffur.svg");
  background-size: 800px 800px;
  background-position: bottom left;
  border-right: var(--border);
  border-top: var(--border);
  border-bottom: var(--border);
}

.column.noschraffur {
  background: transparent;
}

.schraffur {
  background: url("images/schraffur.svg");
  background-size: 800px 800px;
  background-position: bottom left;
}

main[name="Jobs"] section.grid:last-of-type .column,
main[name="Netzwerk"] section.grid:last-of-type .column {
  border-bottom: none;
}

main[template="about"] section.grid:last-of-type .column:last-of-type {
  border-bottom: var(--border);
}

.columncontent {
  grid-column: content;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.columnbig {
  grid-column-start: links;
  grid-column-end: rechts;
}

.selfstretch {
  margin-left: calc(100% / var(--columns));
  margin-right: calc(100% / var(--columns));
  flex: 1;
}

.selfnostretch {
  align-self: start;
}

.sectionminfull.default .column {
  border-bottom: none;
}

.borders {
  border-left: var(--border);
  border-right: var(--border);
}

.grid .borders .column:first-of-type {
  border-left: none;
}

.borders .column {
  border-right: 0;
}

.borders .row:nth-of-type(4n + 1) {
  border-right: 0;
}

.marginbottom {
  padding-bottom: var(--padding);
}

.column.textcolumn {
  padding: var(--paddingsmall);
}

.column.textcolumn p {
  padding-right: var(--paddingsmall);
  padding-left: var(--paddingsmall);
  background-color: var(--color-greywhite);
}

.columnlinksspan2 {
  grid-column: links / span var(--columnspan2);
}

.columnrechtsspan2 {
  grid-column: span var(--columnspan2) / rechts;
}

.grid .column:first-of-type {
  border-left: var(--border);
}

.grid .column:last-of-type {
  border-right: var(--border);
}

.row {
  border-bottom: var(--border);
  background-color: var(--color-greywhite);
  /* align-self: stretch;*/
}

.noborderbottom {
  border-bottom: none;
}

.columnstart2 {
  grid-column-start: var(--columnstart2);
  border-left: var(--border);
}

.columnstart2_columnspan2 {
  grid-column: var(--columnstart2) / span var(--columnspan2);
  border-left: var(--border);
}

.columnstart2_columnspan3 {
  grid-column: var(--columnstart2) / span var(--columnspan3);
  border-left: var(--border);
}

.columnstart5 {
  grid-column-start: var(--columnstart5);
}

.columnstart1 {
  grid-column-start: var(--columnstart1);
}

.columnstart1span2 {
  grid-column: var(--columnstart1) / span var(--columnspan2);
}

.columnend6 {
  grid-column-end: var(--columnend6);
}

.columnspan2 {
  grid-column: span var(--columnspan2);
}

.columnspan3 {
  grid-column: span var(--columnspan3);
}

.columnspan3_3 {
  grid-column: span var(--columnspan3_3);
}

.columnspan4 {
  grid-column: span var(--columnspan4);
}

.columnall {
  grid-column-start: 1;
  grid-column-end: last;
}

.gridimage {
  background: none;
}

.gridimage figure {
  height: 100%;
}

main[template="login"] .columncontent form{
margin-top:10rem;
font-size:var(--typo3);
}

main[template="login"] .alert{
  margin-top:10rem;
  font-size:var(--typo3);
  }

main[template="login"] .columncontent form input[type=submit]{
  font-size:var(--typo3);
  font-family: var(--font-family-sans-light);
  padding-left:1rem;
  padding-right:1rem;
  margin-top:var(--paddingsmall);
  }

main[template="default"] .defaultimage {
  max-width: 100%;
  padding: var(--padding);
}

main[template="default"] .defaultimage img {
  max-width: 100%;
  height: auto;
}

.row h2 + p,
.row h2 + p,
.row h3 + p {
  padding-top: 0;
}

.row h1,
.row h2,
.row h3 {
  padding: var(--padding);
}

.row h2.gridlink {
  padding: 0;
}

.row p.gridlink a {
  font-family: var(--font-family-mono-light);
  text-transform: uppercase;
}

.row .h2.verdecki {
  display: inline-block;
  padding-left: var(--paddingsmall);
  padding-top: 0;
  padding-right: var(--paddingsmall);
  padding-bottom: var(--paddingsmall);
  transform: translate(calc(var(--paddingsmall) * (-1)), -0.5rem);
  background-color: var(--color-greywhite);
}

.row p.gridlink {
  padding: 0;
}

.row p.gridlink:last-of-type {
  padding-bottom: 0;
}

.row p.gridlink a,
.row h2.gridlink a {
  width: 100%;
  height: 100%;
  display: block;
  padding: var(--paddingsmall);
  hyphens:auto;
}

.row .gridlink {
  transition: var(--transition);
}

.row .gridlink:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

.noborder {
  border: none;
}

.row p {
  padding-left: var(--padding);
  padding-right: var(--padding);
  padding-top: var(--padding);
}

.column .row.notopborder:first-of-type {
  border-top: none;
}

.row p:last-of-type {
  padding-bottom: var(--padding);
}

.row.arrowlink a::before {
  content: "↗ ";
  font-feature-settings: "kern" 1, "ss03" 1;
}

.last {
  border-bottom: none;
}

.slant {
  grid-column-start: 1;
  background: linear-gradient(
    315deg,
    transparent calc(50% - 1px),
    var(--color-black),
    transparent calc(50% + 1px)
  );
  background-size: 100vw 100vw;
  padding-bottom: calc(var(--padding) * 2);
  background-repeat: no-repeat;
  background-position: bottom left;
  border-right: none;
}

/* Register ----------------------------------------------------------------------------------- */

.register-item {
  overflow-y: hidden;
  transition: var(--transition);
  -webkit-transition: var(--transition);
}

.register-item .register-item-content {
  max-height: 0;
  padding-bottom: 0 !important;
  transition: var(--transition);
}

.register-item:hover {
  cursor: pointer;
}

.register-item:not(.register-item--active):hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

.register-item--inactive {
  max-height: var(--registerheight1);
}

.register-item--inactive:hover {
  max-height: calc(var(--typo3) + var(--padding) + var(--padding));
}

.register-item--active .register-item-content {
  max-height: initial;
  padding-bottom: var(--padding) !important;
}

.row p.register-item-content {
  padding-top: 0;
}

/* Typewriter ----------------------------------------------------------------------------------- */

.txt-rotate > .wrap {
  border-right: var(--border);
  animation: blink 1s;
  animation-iteration-count: 3;
}

@keyframes blink {
  50% {
    border: none;
  }
}

/* Footer ----------------------------------------------------------------------------------- */

.footer {
  border-top: var(--border);
  background-color: var(--color-greywhite);
  padding: 0;
  min-height: inherit !important;
  z-index: 2;
  position: relative;
  /* line-height:calc(var(--typo3) + var(--paddingsmall)); */
  /* line-height: var(--padding); */
}

.row h2.gridlink a {
  padding: 0;
}

.footer .row p.gridlink a {
  padding: 0;
}

.footer .row p {
  padding-left: var(--paddingsmall);
  padding-right: var(--paddingsmall);
  padding-top: var(--paddingsmall);
}

.footer .row h1,
.footer .row h2:not(.verdecki),
.footer .row h3 {
  padding: var(--paddingsmall);
}

.footer .row p:last-of-type {
  padding-bottom: var(--paddingsmall);
}

.footer .adress {
  line-height: var(--padding);
  margin-bottom: calc(var(--gridline) * (-1));
}

/* Projekte ----------------------------------------------------------------------------------- */

.swiper {
  width: 100%;
  height: 100%;
}

.projektsliderouter {
  border-top: var(--border);
}

.projektslider .swiper-slide {
  background: url("images/schraffur.svg");
  background-size: 800px 800px;
  background-position: bottom left;
  background-color: var(--color-greywhite);
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.projektslider .swiper-slide img {
  height: 100%;
  width: auto;
}

.swiper .swiper-button-prev,
.swiper .swiper-button-next {
  position: absolute;
  top: 0;
  width: 30%;
  height: 100%;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  transition: var(--transition);
  font-size: 3rem;
  opacity: 0;
}

.swiper .swiper-button-prev:hover,
.swiper .swiper-button-next:hover {
  opacity: 1;
}
.swiper .swiper-button-prev {
  left: 0;
}

.swiper .swiper-button-next {
  right: 0;
}

.projektslider .swiper-button-prev:after {
  content: "←";
  font-feature-settings: "kern" 1, "ss03" 1;
  font-family: var(--font-family-mono-light);
}

.projektslider .swiper-button-next:after {
  content: "→";
  font-feature-settings: "kern" 1, "ss03" 1;
  font-family: var(--font-family-mono-light);
}

.swiper-button-next.swiper-button-next-inner,
.swiper-button-prev.swiper-button-prev-inner {
  z-index: 3;
}

.swiper-button-next.swiper-button-next-outer,
.swiper-button-prev.swiper-button-prev-outer {
  z-index: 2;
}

.swiper-pagination-custom {
  height: 100%;
  text-align: left;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  bottom: 0;
  pointer-events: none;
}

.swiper-pagination-custom > div {
  background-color: var(--color-greywhite);
  display: flex;
  pointer-events: visible;
}

.swiper-pagination-custom .next {
  margin-left: auto;
}

.swiper-pagination-custom .prev > div,
.swiper-pagination-custom .current > div .swiper-pagination-custom .next > div {
  height: 100%;
  transition: var(--transition);
}

.swiper-pagination-custom .prev .titlecontainer,
.swiper-pagination-custom .next .titlecontainer {
  width: var(--registerheight2);
  overflow: hidden;
  height: 100%;
  transition: var(--transition);
}

.swiper-pagination-custom .current .titlecontainer {
  width: calc(var(--typo3) + var(--padding));
}

.titlecontainer h2 a {
  height: 100%;
  text-align: left;
  display: block;
  transition: var(--transition);
  -webkit-transition: var(--transition);
}

.swiper-pagination-custom .prev .titlecontainer:hover,
.swiper-pagination-custom .next .titlecontainer:hover {
  width: calc(var(--typo3) + var(--padding));
  background-color: var(--color-black);
  color: var(--color-white);
}

.swiper-pagination-custom .current > div {
  transition: var(--transition);
}

.swiper-pagination-custom .current > div:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

.swiper-pagination-custom .prev > div:hover h2 a::after,
.swiper-pagination-custom .next > div:hover h2 a::after {
  content: " ← ";
  font-feature-settings: "kern" 1, "ss03" 1;
}

.swiper-pagination-custom .current > div h2 a::after {
  content: " ↑";
  font-feature-settings: "kern" 1, "ss03" 1;
  transition: var(--transition);
  -webkit-transition: var(--transition);
}

.swiper-pagination-custom .current > div h2 a span::after {
  content: "";
  transition: var(--transition);
}

.swiper-pagination-custom .current > div:hover h2 a span::after {
  content: url("images/Textsymbol.svg");
  filter: invert(1);
  height: 1rem;
  display: inline-block;
  margin-top: var(--paddingsmall);
}

.swiper-pagination-custom .current > div.active h2 a span::after {
  content: url("images/Textsymbol.svg");
  height: 1rem;
  display: inline-block;
  margin-top: var(--paddingsmall);
}

.swiper-pagination-custom .current > div.active h2 a::after {
  content: " ↓ ";
  font-feature-settings: "kern" 1, "ss03" 1;
}

.swiper-pagination-custom .prev > div,
.swiper-pagination-custom .current > div {
  border-right: var(--border);
}

.swiper-pagination-custom .next > div {
  border-left: var(--border);
}

.swiper-pagination-custom h2 a {
  padding: var(--paddingsmall);
}

.swiper-pagination-custom .titlecontainer h2 {
  writing-mode: vertical-rl;
  height: 100%;
}

.titlecontainer {
  width: 100%;
}

.current > div {
  display: flex;
  width: 100%;
}

.swiper-pagination-custom .slidercaption {
  text-align: left;
  padding: var(--paddingsmall);
  display: none;
  max-width: 20rem;
  font-size:var(--typo4);
}

.swiper-pagination-custom .slidercaption p {
  font-size:var(--typo4);
}

.swiper-pagination-custom .active .slidercaption {
  display: block;
}

.swiper-pagination-custom .slidercaption:hover {
  cursor: pointer;
}

/* Büro ----------------------------------------------------------------------------------- */

.infografik {
  display: flex;
  margin-top: calc(var(--padding) * 3);
  margin-bottom: calc(var(--padding) * 2);
  border: var(--border);
  position: relative;
  background-color: var(--color-greywhite);
}

.textblock {
  grid-area: content;
  grid-row: 2;
  font-family: var(--font-family-sans-light);
  text-transform: inherit;
  word-spacing: inherit;
  padding-right: var(--padding);
}

.infografik span.verdecki {
  position: absolute;
  padding-left: var(--paddingsmall);
  padding-top: 0;
  padding-right: var(--paddingsmall);
  padding-bottom: var(--paddingsmall);
  transform: translate(calc(var(--paddingsmall) * (-1)), -0.5rem);
  background-color: var(--color-greywhite);
  z-index: 3;
}

.infografik .blobinfo {
  padding: calc(var(--padding) * 3);
  transition: var(--transition);
  text-align: left;
  height: 100%;
  position: relative;
  width: calc(100% / 3);
}

.infografik .blobinfo:first-of-type {
  animation: erscheinen1 var(--infografikduration) infinite, 0;
  animation-play-state: running, paused;
}

.infografik .blobinfo:nth-of-type(2) {
  animation: erscheinen2 var(--infografikduration) infinite, 0;
  animation-play-state: running, paused;
}

.infografik .blobinfo:nth-of-type(3) {
  animation: erscheinen3 var(--infografikduration) infinite, 0;
  animation-play-state: running, paused;
}

.infografik:hover .blobinfo:first-of-type {
  animation: erscheinen1 var(--infografikduration) infinite, erscheinenall 2s;
  animation-play-state: paused, running;
  animation-fill-mode: backwards, forwards;
}

.infografik:hover .blobinfo:nth-of-type(2) {
  animation: erscheinen2 var(--infografikduration) infinite, erscheinenall 2s;
  animation-play-state: paused, running;
  animation-fill-mode: backwards, forwards;
}

.infografik:hover .blobinfo:nth-of-type(3) {
  animation: erscheinen3 var(--infografikduration) infinite, erscheinenall 2s;
  animation-play-state: paused, running;
  animation-fill-mode: backwards, forwards;
}

@keyframes erscheinen1 {
  0% {
    opacity: 0;
  }

  15% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes erscheinen2 {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }

  70% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes erscheinen3 {
  0% {
    opacity: 0;
  }
  55% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes erscheinenall {
  from {
    opacity: auto;
  }

  to {
    opacity: 1;
  }
}

@keyframes erscheinenall2 {
  from {
    opacity: auto;
  }

  to {
    opacity: auto;
  }
}

.blobinfo:first-of-type,
.blobinfo:nth-of-type(3) {
  margin-top: var(--padding);
}

.blobinfo p {
  padding-left: var(--paddingsmall);
  padding-right: var(--paddingsmall);
  padding-top: calc(var(--paddingsmall) / 2);
}

.blobinfo p:last-of-type {
  padding-bottom: var(--padding);
}

.blobinfo h3 {
  padding: var(--paddingsmall);
}

.blobinfo:first-of-type h3:after {
  content: "↗ ";
  font-feature-settings: "kern" 1, "ss03" 1;
  white-space: pre-wrap;
  margin-left: 0.5rem;
}

.blobinfo:nth-of-type(3) h3:before {
  content: "↘ ";
  font-feature-settings: "kern" 1, "ss03" 1;
  white-space: pre-wrap;
  transform: translateX(-100%);
  position: absolute;
  padding-right: 0.5rem;
}

.blobcontainer {
  display: block;
  background-color: var(--color-dirtyyellow-multiply);
  mix-blend-mode: multiply;
  height: 100%;
  width: 100%;
  top: 0;
  position: absolute;
  overflow: hidden;
}

.blobcontainerouter {
  width: 100%;
  height: 100%;
}

.blobcontainerouter2{
  width: 100%;
  height: 100%;
  -webkit-filter: contrast(12000%);
  filter: contrast(12000%);
  background-color: var(--color-greywhite);
  mix-blend-mode: screen;
}

.blobcontainerinner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  -webkit-filter: blur(50px);
  filter: blur(50px);
  mix-blend-mode: multiply;
}

.blobmeta {
  width: calc(100% / 3);
  background-color: black;
  margin: 5px;
  border-radius: 50%;
  transition: var(--transition);
}

.blobmeta:nth-of-type(1) {
  transform: translate(-10%, 20%);
  animation: move1 var(--infografikduration) infinite ease-in-out;
  animation-play-state: running;
}

.blobmeta:nth-of-type(2) {
  transform: translate(-20%, -50%);
  animation: move2 var(--infografikduration) infinite ease-in-out,
    wabern 3s infinite ease-in-out;
  animation-play-state: running;
}

.blobmeta:nth-of-type(3) {
  transform: translate(-20%, -20%);
  animation: move3 var(--infografikduration) infinite ease-in-out,
    wabern 3s infinite ease-in-out;
  animation-play-state: running;
}

@keyframes move1 {
  0% {
    transform: translate(100%, 120%) scale(0.5);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }

  20% {
    transform: translate(0%, 40%) scale(1.2);
    border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
  }
  45% {
    transform: translate(30%, -20%) scale(0.4);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }

  70% {
    transform: translate(100%, 10%) scale(0.3);
    border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
  }

  100% {
    transform: translate(150%, 120%) scale(0.4);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }
}

@keyframes move2 {
  0% {
    transform: translate(-50%, 20%) scale(0.1);
    border-radius: 70% 40% 40% 50% / 30% 30% 70% 70%;
  }

  35% {
    transform: translate(-20%, -100%) scale(0.3);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }

  60% {
    transform: translate(40%, 10%) scale(0.6);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }

  85% {
    transform: translate(50%, 30%) scale(0.3);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }
  100% {
    transform: translate(-90%, 120%) scale(0.2);
    border-radius: 70% 40% 40% 50% / 30% 30% 70% 70%;
  }
}

@keyframes move3 {
  0% {
    transform: translate(-140%, 140%) scale(0.6);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }
  25% {
    transform: translate(-190%, 20%) scale(0.7);
    border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
  }
  50% {
    transform: translate(-120%, -50%) scale(0.8);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }
  75% {
    transform: translate(-30%, 50%) scale(1.1);
    border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
  }
  100% {
    transform: translate(-140%, 140%) scale(0.6);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }
}

.infografik:hover .blobmeta {
  animation-play-state: paused, running;
}

@keyframes wabern {
  0% {
  }
  50% {
    border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
  }
  100% {
  }
}

/* Team ----------------------------------------------------------------------------------- */

.columncontent.black {
  background-color: var(--color-black);
}

.teamslider {
  grid-column: content;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.teambild a h2:before {
  transition: var(--transition);
  -webkit-transition: var(--transition);
}

.teambild a:hover h2:before {
  content: "↗ ";
  font-feature-settings: "kern" 1, "ss03" 1;
  white-space: pre-wrap;
  transition: var(--transition);
  -webkit-transition: var(--transition);
}

.swiper-button-next {
  font-family: var(--font-family-mono-light);
  color: var(--color-white);
  width: 100%;
  grid-column: rechts;
  position: relative;
  height: 100%;
  top: inherit;
  margin-top: inherit;
  z-index: 2;
  font-size: 3rem;
}

.swiper-button-next::after {
  content: "→";
  font-family: var(--font-family-mono-light);
  font-feature-settings: "kern" 1, "ss03" 1;
  text-shadow: -1px 0 var(--color-greywhite), 0 1px var(--color-greywhite),
    1px 0 var(--color-greywhite), 0 -1px var(--color-greywhite);
}

.swiper-button-prev {
  font-family: var(--font-family-mono-light);
  color: var(--color-white);
  width: 100%;
  grid-column: links;
  position: relative;
  height: 100%;
  top: inherit;
  margin-top: inherit;
  z-index: 2;
  font-size: 3rem;
}

.swiper-button-prev::after {
  content: "←";
  font-family: var(--font-family-mono-light);
  font-feature-settings: "kern" 1, "ss03" 1;
  text-shadow: -1px 0 var(--color-greywhite), 0 1px var(--color-greywhite),
    1px 0 var(--color-greywhite), 0 -1px var(--color-greywhite);
}

.swiper-button-next:focus,
.swiper-button-prev:focus {
  border: none;
  outline: none;
}

/* Netzwerk ----------------------------------------------------------------------------------- */

.linkcontainer {
  margin-left: var(--padding);
  margin-top: var(--padding);
  margin-right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: var(--transition);
  border-bottom: 0;
  padding: var(--padding);
  hyphens:none;
}

.linkcontainer:nth-of-type(4n + 1) {
  margin-right: var(--padding);
}

.linkcontainer a {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
}

.linktext {
  font-size: var(--typo3);
  width: 100%;
  transition: var(--transitions);
  padding: 0 !important;
}

.linkimage {
  max-height: var(--typo3);
  width: auto;
  max-width:90%;
  position: absolute;
  display: inline-block;
  transition: var(--transitions);
  opacity: 0;
}

.linkcontainer.small .linkimage{
  max-height: calc(var(--typo3) + var(--padding));
}

.linkcontainer:hover {
  background-color: var(--color-black);
}

.linkcontainer:hover .linktext.invertier {
  color: var(--color-white);
  opacity:1;
}

.linkcontainer:hover .linktext {
  opacity: 0;
}

.linkcontainer:hover .linkimage {
  opacity: 1;
}

/* Social Media --------------------------------------------------------------------------------- */

#eapps-instagram-feed-1 {
  width: 100% !important;
  padding: var(--padding);
}

nav .insta a:hover {
  max-height: inherit;
}

/* Responsiveness----------------------------------------------------------------------------------- */

/* kleine Geräte (Smartphones) ----------------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
  :root {
    --typo1: 1.3rem;
    --typo2: 1rem;
    --typo3: 1rem;
    --columns: 1;
    --padding: 1rem;
    --gridline: 1.5px;
    --columnstart2: inherit;
    --columnend5: inherit;
    --columnend6: inherit;
    --columspan2: inherit;
    --columnspan3: inherit;
    --columnspan4: inherit;
  }

  h1,
  .h1,
  h2,
  .h2,
  h3,
  .h3 {
    word-spacing: -0.1rem;
  }

  .column,
  .schraffur,
  .projektslider .swiper-slide {
    background-size: 600px 600px;
  }

  main[template="about"] .sectionminfull {
    min-height: unset !important;
  }

  /* Header: ohne Gridlines, nur einspaltig ----------------------------------------------------------------------------------- */

  .header::after {
    display: none;
  }

  .mobilelogo {
    width: 50%;
    height: 1rem;
    display: block;
    margin-top: var(--padding);
    margin-bottom: var(--padding);
    z-index: 100;
  }

  .mobilelogo img {
    width: auto;
    height: 100%;
  }

  .title {
    display: none;
  }

  .subtitle {
    display: none;
  }

  main[template="about"] ~ header {
    display: block;
  }

  .burger {
    padding-top: var(--padding);
    position: absolute;
    right: 0;
    grid-area: inherit;
  }

  .burger.active {
    min-width: auto;
  }

  .mobilesubtitle {
    display: block;
    position: absolute;
    bottom: var(--padding);
    right: var(--padding);
    z-index: 4;
  }

  .mobiletitle:not(header[template="home"] .mobiletitle) {
    display: block;
    padding-bottom: var(--paddingsmall);
    hyphens: none;
    -ms-hyphens: none;
    -moz-hyphens: none;
    -moz-hyphens: none;
  }

  .burger.active h1::after {
    margin-left: var(--padding);
  }

  .footer .columncontent {
    margin-top: var(--padding);
  }

  main[template="about"] section.grid:last-of-type .column:last-of-type {
    margin-bottom: var(--padding);
  }

  /* Menü: volle Breite ----------------------------------------------------------------------------------- */

  nav {
    width: 100%;
    border-left: none;
    overflow-y: scroll;
  }

  nav a {
    max-height: inherit;
    border-bottom: none;
    padding-bottom: 0;
    padding-left: var(--padding);
  }

  nav > a:last-of-type {
    display: none;
  }

  nav > a:nth-last-of-type(2) {
    padding-bottom: var(--padding);
  }

  .stop-scrolling {
    overflow: hidden;
  }

  .insta a h1 {
    border-top: var(--border);
    padding-top: var(--paddingsmall);
  }

  nav a.menu-current::before {
    content: "→ ";
    font-feature-settings: "kern" 1, "ss03" 1;
  }

  nav a {
    padding-top: var(--padding);
  }

  nav a:not(.menu-current):hover::before {
    content: none;
  }

  /* Logo & Blob ----------------------------------------------------------------------------------- */

  .blob {
    display: none;
  }

  .logosvg a {
    display: none;
    width: 100%;
    top: 0;
    padding-top: var(--padding);
    position: fixed;
    height: 2rem;
    text-align: center;
    bottom: inherit;
    right: inherit;
    background-color: var(--color-greywhite);
  }

  .logosvg a img {
    height: 100%;
    width: auto;
  }

  /* Loader ----------------------------------------------------------------------------------- */

  :root {
    --radius-1: 70%;
    --radius-2: 30%;
    --radius-3: 30%;
    --radius-4: 70%;
    --radius-5: 60%;
    --radius-6: 40%;
    --radius-7: 60%;
    --radius-8: 40%;
  }

  div.loader {
    height: 100%;
    width: 100%;
    background-color: var(--color-black);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 25;
    transition: all 1s ease-out;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  div.loader .logosvg {
    width: 60vw;
    height: calc(60vw * 0.95);
    right: calc(var(--padding) * (-2));
    bottom: calc(var(--padding) * (-2));
    background-color: var(--color-dirtyyellow);
    animation: blobloadmove 2s infinite alternate;
    position: absolute;
  }

  div.loader .logosvg a {
    display: none;
  }

  /* Allgemein ----------------------------------------------------------------------------------- */

  p {
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
  }

  .sectionheadline {
    padding-left: var(--padding);
    grid-column: span 2;
    position: relative;
    grid-row: 1;
    height: inherit !important;
    display: block;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
  }

  #scrollbutton {
    display: none;
  }

  .last {
    border-bottom: var(--border);
  }

  .mobilenoschraffur {
    background: none;
  }

  .selfstretch {
    border: none;
  }

  /* Startseite ----------------------------------------------------------------------------------- */

  #start {
    align-items: inherit;
  }

  .fixedimage {
    height: 100%;
    width: 100%;
  }



  .fixedimage a {
    display: block;
    height: 100%;
    width: auto;
  }

  .fixedimage a figure {
    height: 100%;
    width: auto;
  }

  .introtext {
    margin-top: var(--padding);
  }

  /* Gridanpassung ----------------------------------------------------------------------------------- */

  .grid {
    grid-template-columns: 100%;
    grid-template-areas: "content";
    padding-left: var(--padding);
    padding-right: var(--padding);
  }

  .column {
    border-left: var(--border);
  }

  .columncontent {
    grid-template-columns: 1fr 1fr 1fr;
  }

  main[template="default"] .columncontent .empty + .column .row:last-of-type {
    border-bottom: var(--border);
  }

  .columnlinksspan2,
  .columnspan3,
  .columnstart2_columnspan3,
  .columnrechtsspan2,
  .sectionheadline,
  .columnbig {
    grid-column: inherit;
    grid-row: inherit;
  }

  .columnstart2_columnspan3 {
    border-left: var(--border);
  }

  .columncontent .column {
    grid-column: span 3;
  }

  .sectionheadline {
    grid-row: 1;
    padding-left: 0;
  }

  footer .columncontent .column:nth-of-type(2) {
    border-left: var(--border);
    margin-top: var(--padding);
  }

  section .column:nth-of-type(3) {
    border-top: none;
  }

  section.grid:last-of-type .column .row:last-of-type {
    border-bottom: none;
  }

  .empty {
    display: none;
  }

  .row .gridlink:hover {
    background-color: initial;
    color: initial;
  }

  /* Projektslider ----------------------------------------------------------------------------------- */

  .projektslider {
    width: 100%;
    max-height: 100%;
  }

  .projektsliderouter {
    border-top: var(--border);
  }

  .projektslider .swiper-slide img {
    max-height: 100%;
    min-height: 60%;
    height: auto;
    width: 100%;
    align-self: center;
    object-fit: cover;
  }

  .swiper-pagination-custom {
    height: auto;
    position: absolute;
  }

  .swiper-pagination-custom .prev,
  .swiper-pagination-custom .next {
    display: none !important;
  }

  .swiper-pagination-custom .current {
    width: 100%;
    border-top: var(--border);
  }

  .swiper-pagination-custom .titlecontainer h2 {
    writing-mode: inherit;
  }

  .swiper-pagination-custom .current .titlecontainer {
    width: 35%;
  }

  .swiper-pagination-custom .prev > div,
  .swiper-pagination-custom .current > div {
    border-right: none;
  }

  .swiper-button-next,
  .swiper-button-prev {
    display: none !important;
  }

  .active .titlecontainer h2 a {
    display: initial;
  }

  /* .swiper-pagination-custom h2 a{
    padding: var(--padding);
  } */

  .swiper-pagination-custom .slidercaption {
    width: 65%;
    max-width: unset;
    padding-right: var(--padding);
  }

  /* Infografik ----------------------------------------------------------------------------------- */

  .blobinfo {
    padding: 0;
  }

  /* Netzwerk ----------------------------------------------------------------------------------- */

  .linkcontainer {
    grid-column: span 1;
    margin: 0;
  }

  .linktext {
    display: none;
  }

  .linkcontainer:nth-of-type(4n + 1) {
    margin: 0;
  }

  .linkimage {
    opacity: 1;
    filter: invert(1);
    position: relative;
    display: block;
  }

  /* Hover Effekte ----------------------------------------------------------------------------------- */

  nav a:not(.menu-current):hover {
    background-color: initial;
    color: initial;
    max-height: initial;
  }

  .register-item--inactive:hover {
    max-height: initial;
  }

  .swiper-pagination-custom .prev .titlecontainer:hover,
  .swiper-pagination-custom .next .titlecontainer:hover {
    width: initial;
  }

  .swiper-pagination-custom .current > div:hover,
  .register-item:not(.register-item--active):hover,
  .swiper-pagination-custom .prev .titlecontainer:hover,
  .swiper-pagination-custom .next .titlecontainer:hover,
  .linkcontainer:hover {
    background-color: var(--color-greywhite);
    color: initial;
  }
}

/* Tablets etc. ----------------------------------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 1200px) {
  :root {
    --typo1: 2.5rem;
    --typo2: 1rem;
    --typo3: 1rem;
    --columns: 3;
    --columnspan3: 2;
    --columnspan2: 2;
    --columnend6: 5;
    --padding: 1.5rem;
    --gridline: 1.5px;
  }

  .column,
  .schraffur,
  .projektslider .swiper-slide {
    background-size: 600px 600px;
  }

  h1,
  .h1 {
    word-spacing: inherit;
  }

  nav a {
    max-height: inherit;
  }

  nav a:last-of-type {
    overflow: inherit;
    padding-bottom: var(--paddingsmall);
  }

  .stop-scrolling {
    overflow: hidden;
  }

  .insta a h1 {
    padding-top: var(--paddingsmall);
  }

  main[template="about"] .sectionminfull,
  main[template="about"] .sectionminfullohneheader {
    min-height: unset !important;
  }

  .sectionminfullohneheader {
    margin-bottom: var(--padding);
  }

  .blob {
    width: calc(100% / 4);
    height: calc(100vw / 5);
  }

  .swiper-button-next,
  .swiper-button-prev {
    display: none !important;
  }

  main[template="about"] section.grid:last-of-type .column {
    /* border-bottom: none; */
  }

  .mobilenoschraffur {
    background: none;
  }

  .fixedimage {
    width: 100%;
    height: 100%;
  }

  .fixedimage a {
    width: auto;
    height: 100%;
    display: block;
  }

  .fixedimage a figure {
    height: 100%;
  }

  #scrollbutton {
    display: none;
  }

  nav a:not(.menu-current):hover::before {
    content: none;
  }

  /* Footeranpassung  ----------------------------------------------------------------------------------- */

  .footer .columncontent {
    margin-top: var(--padding);
  }

  .social .row:last-of-type {
    border-bottom: none;
  }

  /* Gridanpassung ----------------------------------------------------------------------------------- */

  .header.grid {
    grid-template-areas: "links content content rechts";
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .grid:not(.header.grid, .footer.grid) {
    grid-template-areas: " content content content  ";
    grid-template-columns: 1fr 1fr 1fr;
    padding-left: var(--padding);
    padding-right: var(--padding);
  }

  .footer.grid {
    grid-template-areas: " content  ";
    grid-template-columns: 1fr;
    padding-left: var(--padding);
    padding-right: var(--padding);
  }

  .sectionheadline {
    grid-column-start: content;
    grid-column-end: content;
    grid-row: 1;
    padding-left: 0;
  }

  .columncontent {
    grid-template-columns: 1fr 1fr;
  }

  .columncontent .column {
    grid-column: span 2;
  }

  /* .column {
    border-left: var(--border);
  } */

  .grid .column.empty:first-of-type + .column {
    border-left: var(--border);
  }

  /* .grid .column:last-of-type {
    border-left: var(--border);
    margin-bottom: var(--padding);
  } */

  .columnlinksspan2 {
    grid-column: 1 / span 1;
    grid-row: inherit;
  }

  .columnspan3 {
    grid-column: 2 / span 2;
  }

  .columnstart2_columnspan3 {
    grid-column: 1 / span 2;
    border-left: var(--border);
  }

  .columnrechtsspan2 {
    grid-column: 3 / span 1;
  }

  .columnbig {
    grid-column: content;
  }

  footer .columncontent .column:nth-of-type(2) {
    border-left: var(--border);
    margin-top: var(--padding);
  }

  .grid .column:blank,
  .grid .column:-moz-only-whitespace {
    height: 30px;
  }

  /* section .column:nth-of-type(3) {
    border-top: none;
  } */
  /* 
  main[name="Profil"] section.grid:last-of-type .column {
    border-bottom: none;
  } */

  .selfstretch {
    margin-right: var(--padding);
    margin-left: var(--padding);
  }

  .section.default .columncontent {
    grid-template-rows: auto 1fr;
  }

  section.grid.default:last-of-type .column .row:last-of-type {
    border-bottom: var(--border);
  }

  section.default .column.noschraffur {
    background: url("images/schraffur.svg");
    border-top: 0;
  }

  .row .gridlink:hover {
    background-color: initial;
    color: initial;
  }

  /* About ----------------------------------------------------------------------------------- */

  .textblock {
    grid-row: initial;
    grid-column: 1 / span 3;
  }

  .infografik {
    grid-column: 1 / span 2;
  }

  .blobinfo {
    padding: var(--padding);
  }

  /* Projektslider ----------------------------------------------------------------------------------- */

  .projektslider {
    width: 100%;
    max-height: 100%;
  }

  .projektsliderouter {
    border-top: var(--border);
  }

  .projektslider .swiper-slide img {
    max-height: 100%;
    min-height: 60%;
    height: auto;
    width: 100%;
    align-self: center;
    object-fit: cover;
  }

  .swiper-pagination-custom {
    height: auto;
    position: absolute;
  }

  .swiper-pagination-custom .prev,
  .swiper-pagination-custom .next {
    display: none !important;
  }

  .swiper-pagination-custom .current {
    width: 100%;
    border-top: var(--border);
  }

  .swiper-pagination-custom .titlecontainer h2 {
    writing-mode: inherit;
  }

  .swiper-pagination-custom .current .titlecontainer {
    width: 25%;
  }

  .swiper-pagination-custom .prev > div,
  .swiper-pagination-custom .current > div {
    border-right: none;
  }

  .swiper-button-next,
  .swiper-button-prev {
    display: none !important;
  }

  .active .titlecontainer h2 a {
    display: initial;
  }

  /* .swiper-pagination-custom h2 a{
    padding: var(--padding);
  } */

  .swiper-pagination-custom .slidercaption {
    width: 75%;
    max-width: unset;
    padding-right: var(--padding);
  }

  /* Netzwerk ----------------------------------------------------------------------------------- */

  main[name="Netzwerk"] .columncontent {
    grid-template-columns: 1fr 1fr 1fr;
  }

  main[name="Netzwerk"] .columncontent .column {
    grid-column: span 3;
  }

  .linkcontainer {
    grid-column: span 1;
    margin: 0;
  }

  .linktext {
    display: none;
  }

  .linkcontainer:nth-of-type(4n + 1) {
    margin: 0;
  }

  .linkimage {
    opacity: 1;
    filter: invert(1);
    position: relative;
    display: block;
  }

  /* Hover Effekte ----------------------------------------------------------------------------------- */

  nav a:not(.menu-current):hover {
    background-color: initial;
    color: initial;
    max-height: initial;
  }

  .register-item--inactive:hover {
    max-height: initial;
  }

  .swiper-pagination-custom .prev .titlecontainer:hover,
  .swiper-pagination-custom .next .titlecontainer:hover {
    width: initial;
  }

  .swiper-pagination-custom .current > div:hover,
  .register-item:not(.register-item--active):hover,
  .swiper-pagination-custom .prev .titlecontainer:hover,
  .swiper-pagination-custom .next .titlecontainer:hover,
  .linkcontainer:hover {
    background-color: var(--color-greywhite);
    color: initial;
  }
}

/* mittelgroße Geräte ----------------------------------------------------------------------------------- */

@media only screen and (min-width: 1201px) and (max-width: 1700px) {
  :root {
    --columns: 5;
    --columnspan3: 2;
    --columnspan2: 2;
    --columnend6: 5;
    --typo1: 3rem;
    --typo2: 1.5rem;
    --typo3: 1.3rem;
  }

  .grid {
    grid-template-areas: "links content content content rechts";
    grid-template-columns: 18% 22% 20% 22% 18%;
  }

  .columncontent{
    grid-template-columns: 1fr 1fr 1fr 1r;
  }

  main[name="Jobs"] .columncontent{
    grid-template-columns: 30% 20% 20% 30%;

  }

  .default .columnspan3 {
    grid-column: span calc(var(--columnspan3) + 1);
  }

  main[template="about"] .columnspan3 {
    grid-column: span var(--columnspan2);
  }

  main[template="about"] .columnstart2_columnspan3 {
    grid-column: var(--columnstart2) / span var(--columnspan2);
  }

  main[template="about"] .columnspan3 {
    grid-column: span calc(var(--columnspan2) + 1);
  }

  nav {
    width: calc(calc(100% * 0.2) + 2px);
  }

  .infografik .blobinfo{
    padding-left: calc(var(--padding) * 1);
    padding-right: calc(var(--paddingsmall) * 1);
    padding-top: calc(var(--padding) * 1.5);
    padding-bottom: calc(var(--padding) * 1.5);
  }
}

@keyframes blobloadmove {
  from {
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
  }
  to {
    border-radius: 53% 52% 90% 51% / 79% 69% 71% 65%;
  }
}