@import "_reset.css";

:root {
  color-scheme: light dark; 
  --colortype: #000000;
  --colorcounter: #ffffff;
  --light-code: #333333;
  --dark-code: #cccccc; 
  --font: "Waldenburg", Helvetica, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --colortype: #ffffff;
    --colorcounter: #000000;
  }

  .invert img {
    filter: invert(1);
    background-color: #ffffff; 
  }
}

@supports (-webkit-backdrop-filter: none) {
  :root {
    color-scheme: dark;
    --colortype: #ffffff;
    --colorcounter: #000000;
    --light-code: #cccccc;
  }

  .invert img {
    filter: invert(1);
    background-color: #ffffff; 
  }
}

@font-face {
  font-family: "Waldenburg";
  src: url("/assets/font/KMR-Waldenburg-FettHalbschmal.woff2") format("woff2"),
       url("/assets/font/KMR-Waldenburg-FettHalbschmal.woff") format("woff");
}

* {
  background-color: var(--colorcounter);
  color: var(--colortype);
  font-family: var(--font);
}

code {
  color: var(--light-code);
}

@media (prefers-color-scheme: dark) {
  code {
    color: var(--dark-code);
  }
}

body {
  font-size: 14px;
  font-family: var(--font);
  line-height: 110%;
}

main {
  overflow: hidden;
  background-color: var(--colorcounter);
}

a {
  text-decoration: none;
  color: grey;
    background: none;
}

a:hover {
    text-decoration: none;
    color: var(--colortype);
}

.div {
  display: inline;
}

.grid-container {
  margin: 1.02em;
  display: inline-grid;
  grid-template-columns: repeat(8, minmax(0, auto));
  grid-template-rows: repeat(6, minmax(0, auto));
  gap: 2px;
  width: fit-content;
  height: calc(100vh - 2.04em);
}

p {
  max-width: 15vw;
}

.grid-item#last {
  height: 0;
  transition: height 0.3s ease, width 0.3s ease;
}

.grid-item#last.sperr {
  height: 1000px !important;
  transition: height 0.3s ease, width 0.3s ease;
}

.grid-item {
  font-size: 1em;
  text-align: left;
  cursor: crosshair;
}

.grid-item.active {
  cursor: nw-resize;
}

.grid-item p {
  display: none;
}

.grid-item.active p {
  display: block;
}

.grid-item article {
  display: none;
  padding-right: 0.5em;
}

.grid-item.active article {
  display: block;
}

.grid-item.active .project-text {
  display: none;
}

.grid-item.active.single .project-text {
  display: block;
}

.img-item {
  padding-right: 0.1em;
  max-height: 0;
  max-width: 0;
  overflow: hidden;
  transition: all 2s ease;
}

.img-item.active {
  max-width: 100%;
  max-height: 100%;
}

#img-eins.fallback {
  display: none;
}


sup {
  vertical-align: super;
  font-size: 70%;
}

article h2,
article ul,
article p {
  padding-bottom: 1em;
}

.uma {
  width: 11em;
  height: 1.08em;
  overflow: hidden;
  transition: height 0.3s ease, width 0.3s ease;
  cursor: crosshair;
}

.uma p {
  display: block;
  width: 12em;
}

.uma.activex {
  display: all;
  width: 13em;
  height: 8.8em;
}

.kontakt {
  width: 3.8em;
  height: 1em;
  overflow: hidden;
  transition: height 0.3s ease, width 0.3s ease;
  cursor: crosshair;
}

.kontakt p {
  display: block;
  width: 3.8em;
}

.kontakt.activex {
  display: all;
  height: 3.5em;
  width: 4.8em;
}

/* FILTER */
filter {
  visibility: hidden;
  display: flex;
  flex-direction: column;
  column-gap: 10px;
  width: fit-content;
  position: fixed;
  right: 0;
  top: 0;
  background-color: transparent;
  align-items: end;
  justify-content: end;
  padding: 1.02em;
}

filter div {
  background: transparent;
}

.filter-button {
  color: gray;
  background-color: transparent;
  border: none;
  padding: 0;
  font-size: 1em;
  line-height: 110%;
}

.filter-button:hover, .filter-button.active {
  color: var(--colortype);
}

@media screen and (max-width: 1200px) {
  body {
    overflow: scroll;
  }

  main {
    overflow: scroll;
  }

  .grid-container {
    display: inline-grid;
    grid-template-columns: repeat(4, auto);
    grid-template-rows: repeat(5, auto);
    height: 100vh;
    width: fit-content;
  }

  .img-item.active {
    min-height: 0;
    max-height: calc(100vh-6em);
    min-width: 0;
  }

  p {
    max-width: 35vw;
  }
}

@media screen and (max-width: 500px) {
  body {
    overflow: scroll;
  }

  main {
    overflow: scroll;
  }

  .grid-container {
    display: inline-grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: fit-content;
    width: auto;
    gap: 0.2em;
    height: auto;
  }

  .img-item.active {
    width: max-content;
  }

  .empty {
    position: absolute;
  }

  .grid-item.active.single .project-text {
    display: none;
  }
}