@import url('https://fonts.googleapis.com/css?family=Roboto'); /* Einbindung der font-family */
@import url('https://fonts.googleapis.com/css?family=Roboto Mono'); /* Einbindung der font-family */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); /* Einbindung der font-family */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"); /* Einbindung der bootstrap-icons */

@view-transition {
  navigation: auto;
}

@keyframes move-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes move-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Apply the custom animation to the old and new page states */
::view-transition-old(root) {
  animation: 0.4s ease-in both move-out;
}

::view-transition-new(root) {
  animation: 0.4s ease-in both move-in;
}

/* Aussehen/Typos/Designspezifikationen können easy aus Figma im Dev-Mode kopiert und hier eingefügt werden :) Müssen nur logische Klassen für angelegt werden */

:root {
  --grid-width: 80vw;
  --detail-grid-ratio: 0.75;
  --detail-grid-height: calc(var(--grid-width) * var(--detail-grid-ratio));
  --space-for-header-logo:0px;
  --safety-margin-against-rounding-errors: 1px;
}

[data-theme="light"] {
  --background: #efefec;
  --color: #000;
  --subheader-color: #949494;
  --footer-color: #333;
}

[data-theme="dark"] {
  --background: #333;
  --color: #efefec;
  --subheader-color: #b6b6b6;
  --footer-color: var(--color);
}

body {
  margin: 5vw; /* Äußerer Rand für die gesamte Website */
  padding: 0;
  font-family: 'Inter'; 
  background-color: var(--background);
  color: var(--color);
  overflow-y: scroll; /* Fügt einen Scrollbalken hinzu, auch wenn nicht erforderlich -> dadurch verschiebt sich der content nicht mehr beim skalieren*/
}

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

.hero {
  margin-left: 10%;
}

header img { 
  width: 300px; /* Festgelegte Breite des Header-Bilds (= Logo)(in px) */
  height: auto; /* Automatische Anpassung der Höhe des Bildes/Logos für das Seitenverhältnis */ 
  padding-top: 20px; /* Abstand oben */
  cursor: pointer; /* Macht, dass beim drüberhovern ein anderer Cursor erscheint um anzuzeigen, dass das Bild klickbar ist */
  animation: move-in 1s ease-in both;
}

.small {
  width: 100px;
}

h1 { /* Titel-Headline */
  color: var(--color);
  font-family: 'Inter', 'sans-serif';
  font-size: 80px;
  font-style: normal;
  letter-spacing: 0.01em;
  font-weight: 900;
  line-height: 90%; /* 72px */
  text-transform: uppercase;
  margin-bottom: 0;
}

h1 span { /* Hellgraue Formatierung der Headline */
  color: var(--subheader-color); 
} 

h2 { /* Headline der Projektbeschreibung (Titel des Projekts) */
  color: var(--color);
  font-family: 'Inter', sans-serif;
  font-size: 50px;
  font-style: normal;
  letter-spacing: 0.02em;
  font-weight: 900;
  line-height: 90%; /* 45px */
  text-transform: uppercase;
}
  
h2 span { /* Hellgraue Formatierung der Projektbeschreibung (Datum) */
  color: #949494;
} 

h2 { /* Headlines im Footer-Bereich + bei Detailbeschreibung */
  color: var(--color);
  font-family: "Inter", sans-serif;
  font-size: 30px;
  text-align: left;
  font-style: normal;
  letter-spacing: 0.02em;
  font-weight: 900;
  line-height: 90%; /* 32.4px */
  text-transform: uppercase;
}

h3 { /* Subline unter Titel / Jobbeschreibungen */
  color: var(--color);
  font-family: 'Inter';
  font-size: 20px;
  font-style: 200;
  letter-spacing: 0.04em;
  font-weight: 900;
  line-height: normal;
}

h4 { /* Headline für Tools */
  color: var(--color);
  font-family: "Inter", sans-serif;
  font-size: 18px;
  text-align: left;
  font-style: bold;
  letter-spacing: 0.02em;
  font-weight: 900;
  line-height: 90%; /* 32.4px */
  text-transform: uppercase;
}

p { /* Fließtexte unter Galerie + in Detailbeschreibung */
  margin-bottom: 10px;
  color: var(--color);
  font-family: 'Inter';
  font-size: 16px;
  font-style: Light;
  letter-spacing: 0.01em;
  text-align: left;
  align-items: flex-start;
  font-weight: 300;
  line-height: 1.5;
}

p a {
  vertical-align: baseline;
}

/* Links */ 
a {
  text-decoration: none;
  color: var(--color);
}

li {
  margin-bottom: 10px;
  color: var(--color);
  font-family: 'Inter';
  font-size: 16px;
  font-style: Light;
  letter-spacing: 0.01em;
  text-align: left;
  align-items: flex-start;
  font-weight: 300;
  line-height: 1.5;
  width: 80%;
}

/* Vertikales Menü (Contact / About / Portfolio) */
nav {
  position: fixed;
  left: 30px;
  top: 39%;
  transform: translateY(-50%) rotate(180deg); /* 180 Grad Drehung */
  writing-mode: vertical-rl;
}

/* Linkformatierung des vertikalen Menüs (Contact / About / Portfolio) */
nav a {
  text-decoration: none;
  color: var(--color);
  display: inline-block;
  margin-right: 20px;
  margin-inline: 20px;
  margin-left: 20px; 
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  letter-spacing: 0.02em;
  font-weight: 900;
  line-height: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* optische Zustände der Buttons bei Hover + Aktiv */
nav a:hover { color: gray }
nav a:focus { color: gray }

.ease-in {
  animation: move-in 1s ease-in both;
}

.Titel {
  margin-left: 37%;
  margin-top: var(--space-for-header-logo);
  margin-bottom: 60px;
}

#show-filter-container-button {
  display:none;
}

/* class= Filteroptionen nach Designart (corporate design, logo, etc.) */
.filter-container {
  display: flex;
  align-items: center;
  margin-top: 3em;
  margin-bottom: 20px; 
  /* margin-left: min(10vw, 80px); */
  padding-left: 10px;
}

.index-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 80vw;
  left: 50%;
  transform: translateX(-50%);
}

/* class= Verhalten des Containers, in dem die Filter-Buttons angeordnet sind */
.filter-button-container {
  flex-wrap: wrap;
  margin-left: 0;
}

/* class= Text in den Filter-Buttons */ 
.filter-text {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  letter-spacing: 0.05em;
  font-size: 16px;
  margin-right: 20px;
}

/* class= Formatierung der Filterbuttons */
.filter-button {
  font-family: 'Inter';
  font-style: Light;
  letter-spacing: 0.02em;
  color: var(--color);
  font-size: 16px;
  font-weight: 300;
  padding: 10px 20px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-top: 10px;
  border-radius: 24px;
  border: 1px solid var(--color);
  background-color: transparent;
  white-space: nowrap;
  cursor: pointer;
}

/* class= Filter Button bleibt ausgewählt */
.filter-button-selected { background-color: var(--color); color: var(--background); }

/* class= optische Zustände der Buttons bei Hover + Aktiv */
@media (pointer: fine) {
  .filter-button:hover { background-color: var(--color); color: var(--background); }
}
/*.filter-button:focus { background-color: black; color: white }*/
/*.filter-button:active { background-color: #000; color: #fff }*/

/* Portfolio-Raster / muss nicht als class (.) oder id (#) geschrieben werden, da es ein vorgefertigtes Element in HTML/CSS ist */
section {
  margin-top: 30px;
  /* margin-left: min(10vw, 80px); */
  width: var(--grid-width);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* class= Grid-Container */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
  grid-auto-rows: minmax(100px, auto); /* Mindesthöhe 100px, automatische Höhe */
  grid-gap: 10px; /* Abstand zwischen den Kacheln */
}

/* class= einzelne Bildflächen auf Detailseiten */
.square {
  height: 0;
  min-width: calc(33.33% - 20px);
  max-width: 33.33%;
  padding-bottom: calc(33.33% - 20px);
  position: relative;
  flex: 1;
  animation: move-in 1s ease-in both;
}

.appear {
  animation: move-in 0.8s ease-in both;
}

.leave {
  animation: move-out 0.8s ease-out both;
}

/* class= einzelne Kachelflächen im Grid */
.grid-item {
  position: absolute;
  left: 10px;
  top: 10px;
  right: 10px;
  bottom: 10px;
  background-color: #ddd;
  background-size:cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Macht, dass beim drüberhovern ein anderer Cursor erscheint um anzuzeigen, dass das Bild klickbar ist */ 
.grid-item:hover {
  cursor: pointer;
}

.overlay {
  display: none;
}

/* class= Overlays der grid-items / Projekt-Thumbnails */
.grid-item:hover + .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(80, 80, 80, 0.85); /* Grauer multiplizierender Farblayer, 85% Deckkraft*/
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  pointer-events: none; /* Erlaubt, dass Events durch das Overlay hindurch auf das darunterliegende Element durchgehen */
}

.description { /* class= Bold-Projektbeschreibung */
  color: #C5E313;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 2.5vw;
  font-style: Bold;
  letter-spacing: 0.01em;
  font-weight: 900;
  line-height: 90%; 
  text-transform: uppercase;
  text-wrap: wrap;
  word-wrap: break-word;
  letter-spacing: 1px;
  max-width: 80%; /* Begrenzt die Breite des Texts, damit es nicht über die Kachel hinaus läuft */
  margin: 20px;
  margin-bottom: 0px;
}

.description span { /* class= Light-Formatierung der Projektbeschreibung */
  color: #C5E313;
  font-family: 'Inter';
  font-size: 2.5vw;
  font-style: Light;
  letter-spacing: 0.02em;
  font-weight: 200;
  line-height: 90%;
  text-transform: uppercase;
}

.case-study_section {
  position: relative;
  width: 65%;
  padding: 0 20% 0 15%;
}

.case_study {
  columns: 2;
}

.case-study_image {
  object-fit: cover;
  width: calc(30% - 20px);
  height: calc(100% - 20px);
  margin: 1%;
}

.item-casestudy_medium { 
  /* Darstellungen für Case-Studies */
  min-height: 20%;
  width: 100.00%;
  position: relative;
  display: flex;
  animation: move-in 1s ease-in both;
}

.div_about { /* class= "About"-Beschreibungstext" */
  /* margin-left: min(10vw, 80px); */
  margin-right: 5vw;
  max-width: 30%;
  padding: 10px;
}

.about-image {
  max-width: 45%;
}

/* Struktur der About-Seite */
.about-content {
  /* margin-left: min(10vw, 80px); */
  display: flex;
  align-items: start;
  margin-top: 10vh;
}

.about-text { /* class= "About"-Beschreibungstext" */
  margin-right: 5vw;
  padding: 10px;
  max-width: 40%;
}

/* id= Burger-Menu f. Mobilansichten */
#burger-menu-button {
  display: none;
}

/* Vollflächiges Overlay für Menü in der Mobilansicht */
#menu-overlay {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  width: 100vw;
  height: 100vh;
  text-decoration: none;
  background-color: #000000;
  color: #efefec;
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-style: normal;
  letter-spacing: 0.02em;
  font-weight: 900;
  line-height: 6vh;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#menu-overlay a {
  color: #efefec;
}

.hoverButton {
  display: block;
  background-color: var(--background);
  width: 5vh;
  height: 5vh;
  border-radius: 2.5vh;
  position: fixed;
  bottom: 5vh;
  right: 5vw;
  z-index: 50;
  box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 2.6px 2px;
  animation: move-in 1s ease-in both;
  cursor: pointer;
}

.hoverButton.hidden {
  animation: move-out 1s ease-in both;
  transition: visibility 1s;
}

@media (hover: hover) {
  .hoverButton:hover {
    -webkit-filter: invert(.9);
    filter: invert(.9);
  }
}

.hoverButton:active {
  -webkit-filter: invert(.9);
  filter: invert(.9);
}

.hoverButton img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(-90deg)
}

/* id= Closing-Button Overlay-Menü Mobilansicht */
#burger-menu-close-button {
  position: fixed;
  font-size: 32px;
  right: 20px;
  top: 20px;
  line-height: normal;
}

.hidden {
  visibility: hidden;
}

.mobileTapHint {
  display: none;
  justify-content: center;
  object-fit: contain;
}

.tapIcon {
  width: 80px;
  height: 80px;
}

.mobile {
  display: none;
}

@media screen and (max-width: 621px) {
  [data-theme="dark"] {
    #headerLogo {
      -webkit-filter: invert(1);
      filter: invert(1)
    }
  }
}

@media screen and (max-width: 1050px) {
  #show-filter-container-button {
    margin-left: 10px;
    display: block;
    /* margin-left: min(15vw, 80px); */
  }

.item-casestudy_medium {
      flex-direction: column;
  }

  .case-study_image {
    width: 98%;
  }
  
  li {
    width: 90%;
  }

  /* hier ändert sich dann z.B. die Anordnung der Container-Elemente + padding + margin */
  .filter-container {
    display: none;
    flex-direction: column;
    align-items: start;
    margin-left: min(15vw, 80px);
    padding-left: 0;
  }
}

/* Flexbox für Mobil-Ansicht / Media Queries -> alles was zwischen den jeweiligen geschweiften klammern steht, tritt nur in Kraft, wenn die Screengröße ein bestimmtes px-Maß unter-/überschreitet */
@media screen and (max-width: 820px), (max-height: 630px) {
  nav {
    display: none;
  }

  /* hierdurch wird der linke Abstand des Textes angepasst */
  .filter-text {
    left: min(15vw, 80px);
  }

  /* aufgrund der Screengröße wird das menü links zu einem Burger-Menü angepasst und das wird hier stattdessen angezeigt und ausgerichtet */
  #burger-menu-button {
    display: flex;
    justify-content:center;
    z-index: 100;
    position: fixed;
    font-size: 32px;
    right: 20px;
    top: 20px;
    background-color: var(--background);
    border: var(--background);
    border-radius: 50%;
    width: 50px;
    height: 50px;
  }

  .mobile {
    padding-top: 30px;
    display: block;
  }

  .desktop {
    display: none;
  }

  .theme-switch {
    filter: invert(.9);
  }

  /* Anpassung der Schriftgröße für Mobilansichten */
  h1 {
    font-size: 40px;
  }

  .Titel {
    margin-left: min(15vw, 80px);
  }

  /* Anpassung der Schriftgröße für Mobilansichten */
  h4 {
    margin-left: min(15vw, 80px);
  }

  /* Anpassung der Schriftgröße für Mobilansichten */
  .description {
    font-size: 8vw;
    line-height: 6vw;
  }

  /* Anpassung der Schriftgröße für Mobilansichten */
  .description span {
    font-size: 6vw;
    line-height: 6vw;
  }

  /* Das Logo wird etwas weiter nach links geschoben / Rand angepasst */
  header img{
    margin-left: 10px;
  }

  .about-content {
    flex-direction: column-reverse;
    /* margin-left: 10%; */
    padding: 0;
    width: 100%;
  }

  /* der "About"-Text bekommt mehr Breite und läuft genauso breit wie die anderen Elemente im parent */
  .about-text {
    max-width: 100%;
    margin-left: 0px;
    margin-right: 0px;
  }

  .about-image {
    max-width: 90%;
  }
}

@media screen and (max-width: 820px) {
  /* Anpassung der Projektübersicht -> anstatt nebeneinander werden die Bilder des Projektes + die Beschreibung neu über-/untereinander angeordnet */
  .square {
    min-width: 100%;
    max-width: 100%;
    padding-bottom: 100%;
  }

  .div_about {
    max-width: 100%;
  }

  .case_study {
    columns: 1;
  }

  .case-study_section {
    width: var(--grid-width);
    padding: 0px;
    margin-left: min(10vw, 80px);

  }
}

/* Flexbox für Tablet-Ansicht */
@media screen and (min-width: 621px) and (max-width: 900px) {
  h1 {
    font-size: 54px;
  }

  /* s.o. */
  .description {
    font-size: 2.5vw;
    line-height: 2.5vw;
  }

  /* s.o. */
  .description span {
    font-size: 2.5vw;
    line-height: 2.5vw;
  }

  /* Anstatt 3 Spalten laufen die Bilder der Projekte jetzt 2-spaltig */
  .square {
    min-width: calc(50% - 20px);
    max-width: 50%;
    padding-bottom: calc(50% - 20px);
  }

  .about-content {
    flex-direction: column-reverse;
  }
  
  .about-text {
    max-width: 100%;
  }

  .about-image {
    max-width: 100%;
  }

  .case_study {
    columns: 1;
  }
}

/* Flexbox für Web-Ansicht */
@media screen and (min-width: 901px) {
  body {
    margin: 50px;
  }

  .description {
    font-size: 2.1vw;
    line-height: 2.1vw;
  }

  .description span {
    font-size: 2.1vw;
    line-height: 2.1vw;
  }

  .impressum {
    max-width: 50%;
  }

}

/* class= Icon-Container, der macht, dass die Icons alle gleichmäßig ausgerichtet sind */
.icon-container {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 20px; /* Abstand zwischen den Icons */
}

.icon {
  vertical-align: middle;
  width: 40px;
}

input[type=checkbox] {
  display: none;
}

.checkboxLabel {
  width: 30px;
  height: 30px;
  background-image: url("../logo+icons/002-dark.svg");
}

.checkboxLabel:hover {
  -webkit-filter: invert(.5);
  filter: invert(.5);
}

input[type=checkbox]:checked + .checkboxLabel {
  background-image: url("../logo+icons/003-light-mode.svg");
  -webkit-filter: invert(.9);
  filter: invert(.9);
}

input[type=checkbox]:checked + .checkboxLabel:hover {
  -webkit-filter: invert(.5);
  filter: invert(.5);
}

#mobileDarkToggle {
  -webkit-filter: invert(0);
  filter: invert(0);
}

[data-theme="dark"] {
	.icon {
    -webkit-filter: invert(.9);
    filter: invert(.9);
  }

  .hero {
    -webkit-filter: invert(.9);
    filter: invert(.9);
  }

  .hoverButton img {
    -webkit-filter: invert(.9);
    filter: invert(.9);
  }
}

.nav_icons {
  display:flex;
  gap: 30px;
  padding-bottom: 25px;
}

a >.icon:hover { 
  -webkit-filter: invert(.5); 
          filter: invert(.5);
}

/* Thumbnails der einzelnen Projektbilder im Grid -> "itemX"-Zuweisung in HTML zu den jeweiligen Verlinkungen */
  #item1 {
  background-image: url('../projects/thumbnails/colour/th_jeden2tag_c.png');
  }

  #item2 {
  background-image: url('../projects/thumbnails/colour/th_futuresevo_c.png');
  }

  #item3 {
  background-image: url('../projects/thumbnails/colour/th_vja_c.png');
  }

  #item4 {
  background-image: url('../projects/thumbnails/colour/th_panic_c.png');
  }

  #item5 {
  background-image: url('../projects/thumbnails/colour/th_plasma_c.png');
  }

  #item6 {
  background-image: url('../projects/thumbnails/colour/th_studiprojekte_c.png');
  }

  #item7 {
  background-image: url('../projects/thumbnails/colour/th_e-o_c.png');
  }

  #item8 {
  background-image: url('../projects/thumbnails/colour/th_jotem_c.png');
  }

  #item9 {
    background-image: url('../projects/thumbnails/colour/th_stellar_c.png');
    }

/* Portfolio-Detail */

/* Die Elemente innerhalb des containers werden nicht fortlaufend nebeneinander sondern in columns angeordnet */
.grid-container_detail {
  margin-top: var(--space-for-header-logo);
  margin-left: min(10vw, 80px);
}

/* Platzhalter für das Einfügen des Beschreibungstextes in der Tablet-Ansicht */
#placeholder_for_description {
  margin-top: 100px;
  margin-left: min(10vw, 80px);
}

/* class= Definiton für Erscheinungsbild der Bilder in den Bildkacheln der Projekte */
.grid-item_detail { 
  left: 10px;
  top: 10px;
  object-fit: cover;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  position: absolute;
}

/* class für das Portrait im About-Bereich */ 
.image-about {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* class= Die Bildkachel (= parent von den Bildern) */
.detail-item {
  min-width: 33.33%;
  max-width: 33.33%;
}

.grid-images {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.grid-images-big-screen {
  min-width: 66.66%;
  max-width: 66.66%;
  /* height: var(--detail-grid-height);*/
}

.grid-images-small-screen {
  min-width: 100%;
  /*min-height: var(--detail-grid-height);*/
}

.item-small { /* class= Bild oben links */
  min-width: 33.33%;
  height: 5calc(var(--detail-grid-height) / 2);
  /* padding-bottom: 33.33%; */
  position: relative;
  animation: move-in 1s ease-in both;
}

.item-small-low { 
  min-width: 33.33%;
  height: calc(var(--detail-grid-height) / 3);
  /* padding-bottom: 33.33%; */
  position: relative;
  animation: move-in 1s ease-in both;

}

.item-medium { /* class= Bild unten links */
  /* min-height: calc(var(--detail-grid-height) - 33.33% / var(--detail-grid-ratio) - var(--safety-margin-against-rounding-errors)); */
  height: calc(var(--detail-grid-height) / 2);
  min-width: 66.66%;
  position: relative;
  animation: move-in 1s ease-in both;

}

.item-medium-low { 
  /* min-height: calc(var(--detail-grid-height) - 33.33% / var(--detail-grid-ratio) - var(--safety-margin-against-rounding-errors)); */
  height: calc(var(--detail-grid-height) / 3);
  min-width: 66.66%;
  position: relative;
  animation: move-in 1s ease-in both;

}

.item-big { /* class= Bild gesamte Breite */
  /* min-height: calc(var(--detail-grid-height) - 33.33% / var(--detail-grid-ratio) - var(--safety-margin-against-rounding-errors)); */
  height: calc(var(--detail-grid-height) / 2);
  min-width: 100%;
  position: relative;
  animation: move-in 1s ease-in both;

}

.item-fixed-size { /* für .js-Datei -> Wenn die Größe in der Mobilansicht ist, dann wird diese class aktiv -> die Bildkacheln werden quadratisch */
  min-height: var(--detail-grid-height);
  min-width: 100%;
  position: relative;
  animation: move-in 1s ease-in both;

}

.item-large { /* class= Bild rechts */
  position: relative;
  /*min-height: calc(var(--detail-grid-height) - var(--safety-margin-against-rounding-errors));*/
  animation: move-in 1s ease-in both;

}

/* Beschreibungstext des Projektes */
.projektbeschreibung {
  position: relative;
  padding: 10px;
  padding-left: 30px;
}

/* class= für .js -> wird aktiv in der Tablet-Ansicht -> verändert den margin oben */
.grid_medium-screen {
  margin-top: 30px;
}

/* class= für .js -> wird aktiv in der Mobil-Ansicht -> verändert den margin oben + überschreibt Flexbox-Layout */
.grid_small-screen {
  margin-top: 30px;
  display: block;
  height: auto;
}

/* class= wird aus .js raus aktiviert -> bei Tabletgröße werden die Bildkacheln dann 2-spaltig angezeigt (Breite der Bildkacheln wird angepasst) */
.detail-item_medium-screen {
  min-width: 50%;
  max-width: 50%;
}

/* class= wird aus .js raus aktiviert -> bei Mobilgröße werden die Bildkacheln dann 1-spaltig angezeigt (Breite der Bildkacheln wird angepasst) */
.detail-item_small-screen {
  min-width: 100%;
  max-width: 100%;
}

/* Anordnung für Link + Pfeil zueinander (Bootstrap-Icon!) */
a, i {
  display: inline-block;
  vertical-align: middle;
}

#link-arrow { /* Bootstrap-Pfeil bei Link zum Projekt */
  font-size: 32px;
  margin-bottom: 2px;
  line-height: 0;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 200; /* Sit on top */
  padding-top: 50px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}

.modal-content {
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-image {
  display: none;
  max-width: 90vw;
  max-height: 90vh;
}

.close {
  position: fixed;
  top: -20px;
  right: 10px;
  font-size: 4em;
  cursor: pointer;
  color: #efefec;
}

/* ganzer Footer-Bereich (in dem die nachfolgenden Elemente alle drin sind) */
footer {
  position: static;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 60px;
}

/* Footer-Text */
.footer-text {
  margin-bottom: 10px;
  color: var(--color);
  font-family: 'Inter';
  font-size: 12px;
  font-style: Light;
  letter-spacing: 0.02em;
  text-align: center;
  font-weight: 300;
  line-height: normal;
}

/* Icons im Footer */
.footer-icons img {
  margin-right: 10px;
  margin-bottom: 10px; 
  align-items: left;
}

/* Link(s) im Footer */
footer a {
  color: var(--footer-color);
  text-decoration: none;
  text-align: left;
  align-items: left;
}

/* Formatierung der Platzierung des Impressums-Textblocks */
.impressum {
  margin-top: 100px;
  margin-left: min(10vw, 120px);
  margin-right: 15%;
}

/* Zweispaltige Formatierung des Headerbereichs der CaseStudy */
.half {
  width: 50%;
}