/* --------------------------------------------------
   SCHRIFTEN
-------------------------------------------------- */

@font-face {
  font-family: "IBM Plex Serif";
  src: url("font/IBM_Plex_Serif/IBMPlexSerif-Regular.ttf")
    format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Serif";
  src: url("font/IBM_Plex_Serif/IBMPlexSerif-Italic.ttf")
    format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}


/* --------------------------------------------------
   GRUNDEINSTELLUNGEN
-------------------------------------------------- */

:root {
  --edge: 20px;
  --gap: 10px;
  --font-size: 10pt;
  --line-height: 1.28;
}

* {
  box-sizing: border-box;
}

html {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: var(--font-size);
  font-weight: 400;
}

body {
  margin: 0;
  padding: var(--edge);
  min-height: 100vh;

  color: #111;
  background-color: #fff;

  line-height: var(--line-height);
}

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



button,
input,
textarea,
select {
  font: inherit;
}

img,
video {
  display: block;
  max-width: 100%;
  background: transparent;
  object-fit: contain;
  border: none !important;
}


video {
    clip-path: inset(1px 1px);
}

img {
    clip-path: inset(1px 1px);
}





h1,
p {
  margin: 0 0 1em;
  font: inherit;
  hyphens: auto;
}


/* --------------------------------------------------
   HEADER
-------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;

  display: grid;
  grid-template-columns: repeat(18, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;

  margin:
    calc(var(--edge) * -1)
    calc(var(--edge) * -1)
    0;

  padding: var(--edge);

}

.brand {
  grid-column: 1 / 4;
}

.main-nav {
  grid-column: 9 / 9;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--gap);

  text-align: center;
}

.info-link {
  grid-column: 16 / 19;
  text-align: right;
}


/* --------------------------------------------------
   STARTSEITE
-------------------------------------------------- */

.project-index {
  width: 100%;
  margin-top: 10px;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 10px;
}

.project-index .project-thumb {
  display: block;
  flex: 0 0 auto;

  max-width: none;
  overflow: hidden;
}

.project-index .project-thumb img,
.project-index .project-thumb video {
  display: block;

  width: 100%;
  height: auto;
  max-width: none;

  object-fit: contain;
  border: none !important;

}




/* --------------------------------------------------
   INDIVIDUELLE GRÖSSEN AUF DER STARTSEITE
-------------------------------------------------- */

.project-index .bild-1 {
  width: 35%;
}

.project-index .bild-2 {
  width: 55%;
}

.project-index .bild-3 {
  width: 35%;
}

.project-index .bild-4 {
  width: 55%;
}

.project-index .bild-5 {
  width: 35%;
}

.project-index .bild-6 {
  width: 55%;
}

.project-index .bild-7 {
  width: 55%;
}


/* --------------------------------------------------
   INDIVIDUELLE GRÖSSEN AUF DER STARTSEITE (FÜR FOTOGRAFIE)
-------------------------------------------------- */

.project-index2 {
  width: 100%;
  margin-top: 10px;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 10px;
}

.project-index2 .project-thumb {
  display: block;
  flex: 0 0 auto;

  max-width: none;
  overflow: hidden;
}

.project-index2 .project-thumb img,
.project-index2 .project-thumb video {
  display: block;

  width: 100%;
  height: auto;
  max-width: none;

  object-fit: contain;
  border: none !important;

}







.project-index2 .bild-1 {
  width: 31.4%;
}

.project-index2 .bild-2 {
  width: 61.5%;
}

.project-index2 .bild-3 {
  width: 31.4%;
}


/* --------------------------------------------------
   PROJEKTSEITE
-------------------------------------------------- */

.project-page {
  margin-top: 10px;
}


/* --------------------------------------------------
   SLIDER
-------------------------------------------------- */

.slider {
  position: relative;
}

/* Pfeile müssen anklickbar bleiben */
.slider .arrow {
  pointer-events: auto;
}

/* Container der Projektbilder */
.slides {
  display: flex;
  justify-content: center;
  align-items: center;

  pointer-events: none;
}

/* Alle Slides zunächst ausblenden */
.slides .slide {
  display: none;

  height: auto;
  max-width: none;

  object-fit: contain;
  pointer-events: none;
}

/* Nur den aktiven Slide anzeigen */
.slides .slide.active {
  display: block;
}


/* --------------------------------------------------
   PROJEKTSEITEN: INDIVIDUELLE GRÖSSEN
-------------------------------------------------- */

/* --------------------------------------------------
   PROJEKT 1: HIER UND DA
   INDIVIDUELLE BILDGRÖSSEN
-------------------------------------------------- */

/* Projekt 1 – Bild 1 */
.projekt-1 .slides .slide:nth-child(1) {
  width: 35%;
}

/* Projekt 1 – Bild 2 */
.projekt-1 .slides .slide:nth-child(2) {
  width: 35%;
}

/* Projekt 1 – Bild 3 */
.projekt-1 .slides .slide:nth-child(3) {
  width: 35%;
}

/* Projekt 1 – Bild 4 */
.projekt-1 .slides .slide:nth-child(4) {
  width: 35%;
}

/*
  Eine Sammlung generativer Bildexperimente:
*/

/* Projekt 2 – Bild 1 */

.projekt-2 .slides .slide:nth-child(1) {
  width: 55%;
}

/* Projekt 2 – Bild 2 */

.projekt-2 .slides .slide:nth-child(2) {
  width: 35%;
}

/* Projekt 2 – Bild 3 */

.projekt-2 .slides .slide:nth-child(3) {
  width: 55%;
}

.projekt-2 .slides .slide:nth-child(4) {
  width: 55%;
}

.projekt-2 .slides .slide:nth-child(5) {
  width: 55%;
}

.projekt-2 .slides .slide:nth-child(6) {
  width: 55%;
}

.projekt-2 .slides .slide:nth-child(7) {
  width: 55%;
}

.projekt-2 .slides .slide:nth-child(8) {
  width: 55%;
}

.projekt-2 .slides .slide:nth-child(9) {
  width: 55%;
}

.projekt-2 .slides .slide:nth-child(10) {
  width: 55%;
}



/*
  IDAHOBIT
*/

.projekt-3 .slides .slide:nth-child(1) {
  width: 35%;
}

.projekt-3 .slides .slide:nth-child(2) {
  width: 35%;
}

.projekt-3 .slides .slide:nth-child(3) {
  width: 35%;
}

/*
  D_MAG
*/

.projekt-4 .slides .slide:nth-child(1) {
  width: 55%;
}

.projekt-4 .slides .slide:nth-child(2) {
  width: 35%;
}

.projekt-4 .slides .slide:nth-child(3) {
  width: 55%;
}

.projekt-4 .slides .slide:nth-child(4) {
  width: 55%;
}

.projekt-4 .slides .slide:nth-child(5) {
  width: 35%;
}

.projekt-4 .slides .slide:nth-child(6) {
  width: 55%;
}

/*
  Mitte
*/

.projekt-5 .slides .slide:nth-child(1) {
  width: 55%;
}

.projekt-5 .slides .slide:nth-child(2) {
  width: 55%;
}

.projekt-5 .slides .slide:nth-child(3) {
  width: 55%;
}

.projekt-5 .slides .slide:nth-child(4) {
  width: 55%;
}

.projekt-5 .slides .slide:nth-child(5) {
  width: 35%;
}

.projekt-5 .slides .slide:nth-child(6) {
  width: 55%;
}

.projekt-5 .slides .slide:nth-child(7) {
  width: 55%;
}


/*
  scrawl
*/

.projekt-6 .slides .slide:nth-child(1) {
  width: 55%;
}

.projekt-6 .slides .slide:nth-child(2) {
  width: 55%;
}

.projekt-6 .slides .slide:nth-child(3) {
  width: 55%;
}

.projekt-6 .slides .slide:nth-child(4) {
  width: 55%;
}

.projekt-6 .slides .slide:nth-child(5) {
  width: 55%;
}

/*
  Sailfish
*/

.projekt-7 .slides .slide:nth-child(1) {
  width: 35%;
}

.projekt-7 .slides .slide:nth-child(2) {
  width: 35%;
}

.projekt-7 .slides .slide:nth-child(3) {
  width: 35%;
}

.projekt-7 .slides .slide:nth-child(4) {
  width: 35%;
}





/*
  Philippinen
*/

.projekt-8 .slides .slide:nth-child(1) {
  width: 31.4%;
}

.projekt-8 .slides .slide:nth-child(2) {
  width: 61.5%;
}

.projekt-8 .slides .slide:nth-child(3) {
  width: 61.5%;
}

.projekt-8 .slides .slide:nth-child(4) {
  width: 61.5%;
}

.projekt-8 .slides .slide:nth-child(5) {
  width: 61.5%;
}


/*
  Allgäu
*/

.projekt-9 .slides .slide:nth-child(1) {
  width: 61.5%;
}

.projekt-9 .slides .slide:nth-child(2) {
  width: 61.5%;
}

.projekt-9 .slides .slide:nth-child(3) {
  width: 61.5%;
}

.projekt-9 .slides .slide:nth-child(4) {
  width: 61.5%;
}

.projekt-9 .slides .slide:nth-child(5) {
  width: 61.5%;
}

.projekt-9 .slides .slide:nth-child(6) {
  width: 61.5%;
}

.projekt-9 .slides .slide:nth-child(7) {
  width: 61.5%;
}

/*
  Moabit
*/

.projekt-10 .slides .slide:nth-child(1) {
  width: 31.5%;
}








/* --------------------------------------------------
   SLIDER-PFEILE
-------------------------------------------------- */

.arrow {
  position: fixed;
  top: 50%;
  z-index: 90;

  transform: translateY(-50%);

  border: 0;
  padding: 30px 0;

  color: inherit;
  background: transparent;

  font: inherit;
  font-size: 12pt;

  cursor: pointer;
}

.arrow-left {
  left: var(--edge);
}

.arrow-right {
  right: var(--edge);
}




/* --------------------------------------------------
   PROJEKTTEXTE FEST AM UNTEREN BILDSCHIRMRAND
-------------------------------------------------- */

.project-copy {
  position: absolute;
  right: var(--edge);
  top: 92%;
  left: var(--edge);
  z-index: 80;
  margin-bottom: 80px;

  display: grid;
  grid-template-columns: repeat(18, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;

  margin: 0;

  pointer-events: none;
}

.project-copy a,
.project-copy button {
  pointer-events: auto;
}


/* Titel und Projektdetails links */

.project-meta {
  grid-column: 1 / 10;
}


/* Beschreibung rechts */

.description {
  grid-column: 10 / 19;

  margin: 0;
}


/* Titel */

.project-meta h1 {
  margin: 0;

  font: inherit;
  font-style: normal;
}


/* Projektdetails direkt unter dem Titel */

.project-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;

  margin: 0;

  font-family: "IBM Plex Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

.project-details span {
  white-space: nowrap;
}


/* Beschreibung */

.description p {
  margin: 0;
}


/* --------------------------------------------------
   INFORMATIONSSEITE
-------------------------------------------------- */

.information-page {
  display: grid;
  grid-template-columns: repeat(18, minmax(0, 1fr));
  column-gap: var(--gap);

  width: 100%;
  margin-top: 10px;
}


/* Foto oben rechts */

.information-image {
  grid-column: 10 / 14;
}

.information-image img {
  display: block;

  width: 100%;
  height: auto;
  max-width: none;

  object-fit: contain;
}


/* Informationstext unter dem Foto */

.information-content {
  grid-column: 10 / 19;

  margin-top: 10px;
}


/* Einleitung */

.information-intro {
  margin-bottom: 40px;
}

.information-intro p {
  margin: 0 0 1em;
}


/* Abschnitte */

.cv-section {
  margin-bottom: 40px;
}

.cv-section h1 {
  margin: 0 0 10px;

  font: inherit;
  font-style: normal;
  text-transform: uppercase;
}


/* Einzelne Lebenslaufeinträge */

.cv-entry {
  margin-bottom: 20px;
}

.cv-entry:last-child {
  margin-bottom: 0;
}


/* Datum in IBM Plex Serif Italic */

.cv-date {
  margin: 0;

  font-family: "IBM Plex Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}


/* Abstand zwischen Datum und Beschreibung */

.cv-entry .cv-date + p {
  margin-top: 0;
}


.information-image {
  grid-column: 10 / 13;
}


/* --------------------------------------------------
   IMPRESSUM
-------------------------------------------------- */

.legal-page {
  min-height: 55vh;
  margin-top: 40px;
}


/* --------------------------------------------------
   FOOTER
-------------------------------------------------- */

footer {
  margin-top: 120px;

  display: flex;
  justify-content: center;
  gap: 0.5em;

  text-align: center;
}

footer span::after {
  content: " ·";
}


/* --------------------------------------------------
   MOBILE ANSICHT
/* --------------------------------------------------
   MOBILE ANSICHT
-------------------------------------------------- */

@media (max-width: 760px) {

  :root {
    /* Kleinere Abstände zum Bildschirmrand */
    --edge: 12px;
    --gap: 6px;

    /* Abstand zwischen Header und erstem Bild */
    --mobile-image-top-gap: 30px;

    /* Höhe des einzeiligen Headers */
    --mobile-header-height: 34px;
  }


  /* --------------------------------------------------
     BODY
  -------------------------------------------------- */

  body {
    padding: var(--edge);
  }


  /* --------------------------------------------------
     HEADER MOBIL
  -------------------------------------------------- */

  .site-header {
    align-items: start;
    row-gap: 0;

    margin:
      calc(var(--edge) * -1)
      calc(var(--edge) * -1)
      0;

    padding: var(--edge);
  }

  .brand {
    grid-column: 1 / 5;
    grid-row: 1;
  }

  .main-nav {
    grid-column: 7 / 13;
    grid-row: 1;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--gap);

    text-align: center;
  }

  .main-nav a,
  .main-nav span {
    white-space: nowrap;
  }

  .info-link {
    grid-column: 15 / 19;
    grid-row: 1;

    text-align: right;
  }


  /* --------------------------------------------------
     STARTSEITE GRAFIKDESIGN
  -------------------------------------------------- */

  .project-index {
    width: 100%;
    margin-top: var(--mobile-image-top-gap);

    gap: 10px;
  }


  /* Schmale Bilder */

  .project-index .bild-1,
  .project-index .bild-3,
  .project-index .bild-5 {
    width: 55% !important;
  }


  /* Breite Bilder */

  .project-index .bild-2,
  .project-index .bild-4,
  .project-index .bild-6,
  .project-index .bild-7 {
    width: 75% !important;
  }


  /* --------------------------------------------------
     STARTSEITE FOTOGRAFIE
  -------------------------------------------------- */

  .project-index2 {
    width: 100%;
    margin-top: var(--mobile-image-top-gap);

    gap: 10px;
  }


  /* Schmale Fotografiebilder */

  .project-index2 .bild-1,
  .project-index2 .bild-3 {
    width: 55%;
  }


  /* Breite Fotografiebilder */

  .project-index2 .bild-2 {
    width: 75%;
  }


  /* --------------------------------------------------
     PROJEKTSEITE MOBIL
  -------------------------------------------------- */

  .project-page {
    position: relative;

    display: grid;
    grid-template-columns: repeat(18, minmax(0, 1fr));
    column-gap: var(--gap);

    width: 100%;
    min-height: 0;

    margin-top: var(--mobile-image-top-gap);
  }


  /*
    Titel und Beschreibung werden zu Bestandteilen
    des Projekt-Grids.
  */

  .project-copy {
    position: static;

    display: contents;

    margin: 0;
    padding: 0;

    pointer-events: auto;
  }


  /* --------------------------------------------------
     SLIDER MOBIL
  -------------------------------------------------- */

  .slider {
    position: relative;

    grid-column: 1 / 19;
    grid-row: 1;

    width: 100%;

    /*
      Fallback für ältere Safari-Versionen.
    */

    height: calc(
      100vh
      - var(--mobile-header-height)
      - 70px
      - var(--mobile-image-top-gap)
    );

    /*
      Moderne mobile Browser.
    */

    height: calc(
      100svh
      - var(--mobile-header-height)
      - 70px
      - var(--mobile-image-top-gap)
    );

    min-height: 360px;
    margin: 0;
  }


  /* Slides horizontal und vertikal zentrieren */

  .slides {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;
  }


  /* Alle Projektbilder standardmäßig */

  .slides .slide {
    position: static;

    right: auto;
    bottom: auto;
    left: auto;

    width: 100% !important;
    height: auto;

    max-width: none;
    max-height: 100%;

    margin: 0;
    transform: none;

    object-fit: contain;
    object-position: center;
  }


  /* Nur aktiven Slide anzeigen */

  .slides .slide.active {
    display: block;
  }


  /*
    Videos:
    Keine feste Breite, damit die Projektgröße greift.
  */

  .slides video.slide {
    height: auto;

    max-width: none;
    max-height: 100%;

    object-fit: contain;
    object-position: center;

    clip-path: inset(1px);
  }


  /* --------------------------------------------------
     PROJEKT 1: HIER UND DA
  -------------------------------------------------- */

  .projekt-1 .slides .slide:nth-child(1),
  .projekt-1 .slides .slide:nth-child(2),
  .projekt-1 .slides .slide:nth-child(3),
  .projekt-1 .slides .slide:nth-child(4) {
    width: 70% !important;
  }


  /* --------------------------------------------------
     PROJEKT 2: BACHELORARBEIT
  -------------------------------------------------- */

  .projekt-2 .slides .slide:nth-child(2) {
    width: 70% !important;
  }


  /* --------------------------------------------------
     PROJEKT 3: IDAHOBIT
  -------------------------------------------------- */

  .projekt-3 .slides .slide:nth-child(1),
  .projekt-3 .slides .slide:nth-child(2),
  .projekt-3 .slides .slide:nth-child(3) {
    width: 70% !important;
  }


  /* --------------------------------------------------
     PROJEKT 4: D-MAG
  -------------------------------------------------- */

  /* D-MAG-Video */

  .projekt-4 .slides .slide:nth-child(1) {
    width: 80% !important;
  }


  /* Schmale D-MAG-Bilder */

  .projekt-4 .slides .slide:nth-child(2),
  .projekt-4 .slides .slide:nth-child(5) {
    width: 70% !important;
  }


  /* --------------------------------------------------
     PROJEKT 5: MITTE
  -------------------------------------------------- */

  .projekt-5 .slides .slide:nth-child(5) {
    width: 70% !important;
  }


  /* --------------------------------------------------
     PROJEKT 7: SAILFISH
  -------------------------------------------------- */

  .projekt-7 .slides .slide:nth-child(1),
  .projekt-7 .slides .slide:nth-child(2),
  .projekt-7 .slides .slide:nth-child(3),
  .projekt-7 .slides .slide:nth-child(4) {
    width: 70% !important;
  }


  /* --------------------------------------------------
     FOTOGRAFIE-PROJEKTE
     PROJEKT 8 BIS 10
  -------------------------------------------------- */

  .projekt-8 .slides .slide,
  .projekt-9 .slides .slide,
  .projekt-10 .slides .slide {
    width: 100% !important;
  }


  /* Schmale Fotografiebilder */

  .projekt-8 .slides .slide:nth-child(1),
  .projekt-10 .slides .slide:nth-child(1) {
    width: 71.4% !important;
  }


  /* --------------------------------------------------
     PFEILE MOBIL
  -------------------------------------------------- */

  .arrow {
    position: absolute;
    top: 50%;
    z-index: 10;

    width: 40px;
    height: 40px;
    padding: 0;

    transform: translateY(-50%);

    border: 0;
    border-radius: 50%;

    color: #111;
    background-color: rgba(255, 255, 255, 0.65);

    font-size: 12pt;
    line-height: 40px;
    text-align: center;

    cursor: pointer;

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    pointer-events: auto;
  }

  .arrow-left {
    left: var(--edge);
  }

  .arrow-right {
    right: var(--edge);
  }


  /* --------------------------------------------------
     PROJEKTTITEL UNTERHALB DES SLIDERS
  -------------------------------------------------- */

  .project-meta {
    grid-column: 1 / 19;
    grid-row: 2;

    width: 100%;

    padding-top: 10px;
    padding-bottom: var(--edge);

    margin: 0;
  }

  .project-meta h1 {
    margin: 0;

    font: inherit;
    font-style: normal;
  }


  /* Projektdetails */

  .project-details {
    display: block;

    margin: 0;

    font-family: "IBM Plex Serif", Georgia, serif;
    font-style: italic;
    font-weight: 400;
  }

  .project-details span {
    white-space: normal;
  }


  /* --------------------------------------------------
     PROJEKTBESCHREIBUNG
  -------------------------------------------------- */

  .description {
    grid-column: 1 / 19;
    grid-row: 3;

    width: 100%;

    padding-top: 20px;
    margin: 0;
  }

  .description p {
    margin: 0;
  }


  /* --------------------------------------------------
     INFORMATIONSSEITE
  -------------------------------------------------- */

  .information-page {
    width: 100%;
    margin-top: var(--mobile-image-top-gap);

    grid-template-columns: repeat(18, minmax(0, 1fr));
    column-gap: var(--gap);
  }

  .information-image {
    grid-column: 1 / 10;

    width: 100%;
  }

  .information-image img {
    width: 100%;
    height: auto;
    max-width: none;

    object-fit: contain;
  }

  .information-content {
    grid-column: 1 / 19;

    width: 100%;
    margin-top: 20px;
  }

  .information-intro,
  .cv-section,
  .cv-entry {
    width: 100%;
  }


  /* --------------------------------------------------
     FOOTER
  -------------------------------------------------- */

  footer {
    margin-top: 80px;

    display: flex;
    justify-content: center;
    gap: 0.5em;

    text-align: center;
  }
}


/* --------------------------------------------------
   KLEINE SMARTPHONES
   IPHONE MINI, IPHONE 8 ETC.
-------------------------------------------------- */

@media (max-width: 430px) {

  :root {
    --edge: 8px;
    --gap: 4px;

    /* Geringere Höhe durch kleineren Zeilenabstand */
    --mobile-header-height: 48px;
    --mobile-image-top-gap: 24px;
  }

  .site-header {
    row-gap: 0;
  }

  .brand {
    grid-column: 1 / 10;
    grid-row: 1;
  }

  .info-link {
    grid-column: 10 / 19;
    grid-row: 1;

    text-align: right;
  }

  .main-nav {
    grid-column: 1 / 19;
    grid-row: 2;

    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: start;
    column-gap: 8px;

    margin: 0;
    padding: 0;

    text-align: left;
  }

  .main-nav a,
  .main-nav span {
    margin: 0;
    padding: 0;

    line-height: var(--line-height);
  }


  /* Indexbilder */

  .project-index .bild-1,
  .project-index .bild-3,
  .project-index .bild-5,
  .project-index2 .bild-1,
  .project-index2 .bild-3 {
    width: 42% !important;
  }

  .project-index .bild-2,
  .project-index .bild-4,
  .project-index .bild-6,
  .project-index .bild-7,
  .project-index2 .bild-2 {
    width: 76% !important;
  }


  /* Sliderhöhe */

  .slider {
    height: calc(
      100vh
      - var(--mobile-header-height)
      - 65px
      - var(--mobile-image-top-gap)
    );

    height: calc(
      100svh
      - var(--mobile-header-height)
      - 65px
      - var(--mobile-image-top-gap)
    );

    min-height: 320px;
  }


  /* Pfeile */

  .arrow {
    width: 36px;
    height: 36px;

    font-size: 11pt;
    line-height: 36px;
  }
}