/* ===========================
   FONTS
=========================== */
@font-face {
  font-family: 'Navi';
  src: url('fonts/texgyreheroscn-regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Navi2';
  src: url('fonts/texgyreheros-regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* ===========================
   RESET & BASE
=========================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*::-webkit-scrollbar {
  display: none;
}

body {
  margin: 0;
  background-color: rgb(240, 240, 240);
  cursor: crosshair;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* berücksichtigt die ein-/ausblendbare Safari-Werkzeugleiste auf iOS */
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

img, video {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none; /* verhindert das "Bild sichern"-Menü bei langem Antippen auf iOS */
}

img, video, picture, svg {
  max-width: 100%;
  display: block;
}

h2 {
  font-family: 'Navi';
  font-size: 16.5pt;
  font-weight: normal;
}

h3 {
  font-family: 'Navi2';
  font-size: 12pt;
}

ul {
  font-family: 'Navi2';
  font-size: 12pt;
  margin-left: 1.2rem;
}

/* ===========================
   LAYOUT
=========================== */
.flexmama {
  display: flex;
  width: 100vw;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  gap: 0;
}

.flexone,
.flextwo {
  flex-grow: 1;
  font-family: 'Navi';
}

.flexone {
  background-color: rgb(240, 240, 240);
  position: relative;
  min-width: 0;
}

.flexone-scroll {
  height: 100%;
  overflow-y: scroll;
}

.flextwo {
  background-color: rgb(0, 0, 0);
  min-width: 20%;
  max-width: 65%;
  cursor: crosshair;
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.flextwo .photo {
  position: relative;
  width: 100%;
  cursor: pointer;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.flextwo .photo img,
.flextwo .photo video {
  width: 100%;
  height: auto;
}

.photo .credit {
  position: absolute;
  bottom: 0.3rem;
  right: 0.3rem;
  font-family: 'Navi2';
  font-size: 10pt;
  color: rgb(0, 0, 0);
  padding: 0.1rem 0.3rem;
  pointer-events: none;
}

/* Nur bei Poster Collection (img-section5): Größe & Hintergrund hier frei anpassen. */
#img-section5 .credit {
  font-size: 15pt;
  color: white;
  padding: 0 0.4rem 0.8rem 0.2rem;
  border-radius: 0 0 2rem 0;
  top: 0;
  left: 0;
  bottom: auto;
  right: auto;
  background-color: rgb(0, 0, 0);
}

/* Poster Collection: jedes Foto wird unabhängig vom eigenen Seitenverhältnis
   im festen DIN-A-Hochformat gezeigt (Breite : Höhe = 1 : √2) und dafür bei
   Bedarf mittig zugeschnitten. Die Startbreite von .flextwo wird passend
   dazu in js/index.js berechnet (computePosterCollectionWidth). */
#img-section5 .photo {
  aspect-ratio: 1 / 1.41421356;
}

#img-section5 .photo img,
#img-section5 .photo video {
  height: 100%;
  object-fit: cover;
}

/* ===========================
   RESIZABLE HANDLE
=========================== */
.resizable-handle {
  width: 0.2%;
  background-color: rgb(0, 0, 0);
  cursor: col-resize;
  padding: 0;
  z-index: 1;
  resize: horizontal;
  transition: 0.3s;
}

.resizable-handle:hover {
  width: 0.4%;
  background-color: #f6ff00;
}

/* ===========================
   COPYRIGHT / IMPRINT / PRIVACY
=========================== */
.sm {
  position: absolute;
  bottom: 0.1rem;
  left: 0;
  padding: 0.1rem 0.8rem;
  color: black;
  font-family: 'Navi';
  font-size: 16pt;
}

.imprint {
  position: absolute;
  bottom: 0.1rem;
  right: 0;
  padding: 0.1rem 0.8rem;
  color: black;
  font-family: 'Navi';
  font-size: 16pt;
  cursor: pointer;
}

.imprint:hover {
  background-color: rgb(218, 218, 218);
  border-radius: 5rem;
  
}

.privacy {
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.sm:hover .privacy {
  opacity: 1;
  color: rgba(0, 0, 0, 0.431);
  cursor: pointer;
}

/* ===========================
   LEGAL MODALS (Datenschutz / Imprint)
=========================== */
.legal-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 100%;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 1000;
}

.legal-modal.active {
  transform: translateY(0);
}

.modal-content {
  position: absolute;
  bottom: 0;
  width: 100%;
  max-height: 80%;
  background: rgb(0, 0, 0);
  color: rgb(218, 218, 218);
  padding: 0.8rem;
  overflow-y: auto;
  font-family: 'Navi2';
  font-size: 12pt;
}

.close-btn {
  position: absolute;
  top: 0.4rem;
  right: 0.8rem;
  font-size: 30px;
  color: rgb(218, 218, 218);
  background: none;
  border: none;
  cursor: pointer;
}

/* ===========================
   TOP NAV
=========================== */
.top-nav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 0.8rem;
  row-gap: 0.2rem;
  font-family: 'Navi';
  font-size: 16pt;
  color: rgb(0, 0, 0);
  background-color: rgb(225, 225, 225);
  padding: 0.1rem 0.8rem 0.2rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

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

.site-email {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.lang-btn {
  opacity: 0.5;
}

.lang-btn.active {
  opacity: 1;
  text-decoration: underline;
}

.top-nav a {
  color: rgb(0, 0, 0);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.top-nav a:hover {
  background-color: rgb(255, 255, 255);
  border-radius: 5rem;
  padding: 0 0.8rem 0;
  margin-right: -0.8rem;
  color: black;
}

/* DE ist (anders als EN) nicht am rechten Rand der Nav "verankert", daher
   bewirkt das normale margin-right:-0.8rem beim Hovern kein sichtbares
   Verschieben. Spiegelverkehrt (margin-left statt margin-right) wächst DE
   stattdessen sichtbar nach rechts und schiebt EN mit — analog dazu, wie
   EN beim Hovern DE nach links schiebt. */
.lang-btn[data-lang="de"]:hover {
  margin-right: 0;
  margin-left: -0.8rem;
}

/* ===========================
   TEXT / INFO BLOCKS
=========================== */
.Text {
  font-family: 'Navi';
  font-size: 18pt;
  line-height: 1.4rem;
  text-align: left;
  overflow: visible;
  white-space: normal;
  margin-right: 0.5rem;
  margin-bottom: 0.2rem;
}

.Text:hover {
  color:#00b862; 
  cursor: pointer;
}

.Text.viewing .title,
.info-text.viewing {
  color: rgb(0, 0, 0);
}

/* Hover soll auch dann rot werden, wenn der Titel gerade als "viewing"
   markiert ist (das Projekt, das man z.B. anfangs standardmäßig sieht) —
   sonst gewinnt .viewing wegen gleicher/höherer Spezifität. */
.Text:hover .title {
  color: #00b862;
}

.info-text a {
  color: black;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.project-list {
  margin-top: 1.5rem;
  padding: 8rem 2rem 0 8rem;
}

.project-label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  max-width: 100%;
}

.project-label .title {
  flex: 1 1 auto;
  min-width: 0;
}

.info-text {
  display: none;
  max-width: 52rem;
  font-family: 'Navi2';
  font-size: 14pt;
  line-height: 1.1;
  margin-top: 1.2rem;
  margin-bottom: 1.5rem;
  margin-left: 1.5rem;
  text-align: left;
  overflow: visible;
  white-space: normal;
  overflow-wrap: break-word;
}

.about-text {
  display: none;
  max-width: 36rem;
  font-family: 'Navi2';
  font-size: 16pt;
  line-height: 1.4rem;
  text-align: left;
  overflow: visible;
  white-space: normal;
  word-break: break-word;
  margin: 1rem 0.8rem 0 9.4rem;
}

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

.about-text a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;

}

/* "Zerfließ"-Effekt: einzelne Buchstaben (per JS in .letter-Spans zerlegt,
   siehe scatterifyText in index.js) bekommen ihre zufällige Zielposition
   über --dx/--dy/--rot mit, die hier bei Hover (Desktop) bzw. der Klasse
   .scattered (Mobile, automatisch beim Anzeigen) smooth angefahren wird. */
.scatter-text .letter {
  display: inline-block;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.scatter-text:hover .letter,
.scatter-text.scattered .letter {
  transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
  opacity: 0.75;
}

/* ===========================
   CIRCLES
=========================== */
/* Kreise werden per ::before gezeichnet (nicht als Unicode-Zeichen ○/●),
   damit leer/gefüllt in jeder Schriftart immer exakt gleich groß sind —
   unabhängig davon, welchen "display"-Wert jQuery beim Ein-/Ausblenden
   dem Element selbst zuweist. */
.filled {
  display: none;
  color: #00b862;
}

.empty {
  display: inline;
}

.empty, .filled {
  font-size: 1.8rem;
  position: relative;
  top: -0.05em;
}

.empty::before,
.filled::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  vertical-align: -0.05em;
  box-sizing: border-box;
}

.empty::before {
  border: 0.045em solid currentColor;
}

.filled::before {
  background-color: currentColor;
}

/* ===========================
   SLIDESHOW
=========================== */
.slideshow {
  display: none;
}

.slideshow .photo:last-child img,
.slideshow .photo:last-child video {
  border-bottom: solid 6px rgb(0, 0, 0);
}

.slideshow.grid-view .photo:last-child img,
.slideshow.grid-view .photo:last-child video {
  border-bottom: none;
}

.slideshow.grid-view {
  display: block;
  column-count: 2;
  column-gap: 4px;
}

.slideshow.grid-view .photo {
  width: 100%;
  margin-bottom: 4px;
  break-inside: avoid;
}

.slideshow.grid-view .photo.wide {
  column-span: all;
}

/* ===========================
   MOBILE: GEDREHTER SPLITSCREEN
   (steht bewusst am Dateiende, damit die Regeln bei gleicher
   Spezifität die vorherigen Desktop-Regeln zuverlässig überschreiben)
=========================== */
@media (max-width: 768px) {
  .flexmama {
    flex-direction: column;
  }

  .flexone,
  .flextwo {
    width: 100% !important;
  }
  /* Zweizeilige Nav: oben Name/Mail, darunter Info (links, unter dem Namen)
     und der Sprach-Toggle (rechts, unter der Mail) — dafür wird .nav-right
     per display:contents "aufgelöst", damit seine Kinder (#about-link,
     .lang-toggle) direkt als eigene Grid-Items in die passenden Bereiche
     einsortiert werden können. */
  .top-nav {
    font-size: 13pt;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "name email"
      "info lang";
    align-items: center;
    row-gap: 0.2rem;
  }

  .site-name {
    grid-area: name;
  }

  .nav-right {
    display: contents;
  }

  #about-link {
    grid-area: info;
    justify-self: start;
  }

  .lang-toggle {
    grid-area: lang;
    justify-self: end;
  }

  .empty, .filled {
    font-size: 1.8rem;
    top: 0em;
  }


  .flextwo {
    min-width: unset;
    max-width: unset;
    min-height: 20%;
    max-height: 80%;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
  }

  /* Fotos werden auf Mobile horizontal durchgewischt statt gestapelt/gekachelt.
     flex:0 0 auto verhindert, dass der Flex-Algorithmus die Sektion selbst
     schmaler quetscht als die Summe ihrer Fotos (die einzelnen .photo sind
     ihrerseits flex-shrink:0 und würden dann einfach über die Sektionsgrenze
     hinaus in die nächste Sektion hineinragen — das sah wie überlagerte Fotos aus). */
  .slideshow {
    flex-direction: row;
    flex: 0 0 auto;
  }

  .flextwo .photo {
    flex: 0 0 auto;
    height: 100%;
    width: auto;
    min-width: 10rem;
    scroll-snap-align: start;
    /* Breite ergibt sich aus aspect-ratio (per JS aus den echten
       Bildmaßen gesetzt) + der festen Höhe — nicht mehr aus
       gegenseitigem "auto", das auf manchen mobilen Browsern
       nicht zuverlässig war. min-width verhindert, dass eine Kachel
       auf 0 Breite kollabiert, falls das aspect-ratio doch mal fehlt. */
  }

  .flextwo .photo img,
  .flextwo .photo video {
    width: 100%;
    height: 100%;
    /* Notlösung: falls das aspect-ratio der Kachel (aus welchem Grund
       auch immer) doch nicht dem Bild entspricht, wird lieber verkleinert
       als verzerrt gestreckt. Bei korrektem aspect-ratio ändert das nichts. */
    object-fit: contain;
  }

  /* Videos bekommen (anders als Fotos) ein festes Seitenverhältnis statt
     eines aus videoWidth/videoHeight berechneten — je nach Browser/Timing
     kam das echte Maß zu spät oder inkonsistent an (siehe JS-Kommentar bei
     onMediaReady), wodurch die Kachel zu klein wirkte, mit schwarzem Rand
     drumherum (object-fit:contain in einem falsch proportionierten
     Container). object-fit:cover füllt die Kachel stattdessen immer
     vollständig aus, auch wenn das echte Format leicht abweicht. */
  .flextwo .photo.video-photo {
    aspect-ratio: 9 / 16;
  }

  .flextwo .photo.video-photo video {
    object-fit: cover;
  }

  .slideshow .photo:last-child img,
  .slideshow .photo:last-child video {
    border-bottom: none;
    border-right: solid 6px rgb(0, 0, 0);
  }

  .resizable-handle {
    width: 100%;
    height: 0.2rem;
    cursor: row-resize;
  }

  .resizable-handle:hover {
    width: 100%;
    height: 0.4rem;
  }

  .site-email {
    grid-area: email;
    justify-self: end;
    position: static;
    transform: none;
  }

.sm, .imprint {
  font-size: 13pt;
}

  .project-list {
    padding: 2rem 0.8rem 3rem 1.5rem;
  }

  .legal-modal {
    width: 100% !important;
  }

  .about-text{
    font-size: 13pt;
    margin: 1rem 0.8rem 0 1.8rem;
  }
}