/* Portfolio – Julia Irma Lucie Fiedler
   Schrift: Systemschrift (Helvetica Neue / Helvetica / Arial). Eigene Schrift per @font-face in assets/fonts ablegen. */

:root {
  --bg: #fff;
  --fg: #000;
  --gutter: 44px;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --title-size: clamp(32px, 5vw, 56px);
  --small-size: 18px;
}

* { box-sizing: border-box; }

/* Bilder und Videos lassen sich nicht ziehen oder per langem Drücken sichern (siehe js/protect.js) */
img, video { -webkit-user-drag: none; -webkit-touch-callout: none; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-weight: 300;
  line-height: 1.15;
}

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

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

.site-header {
  position: absolute; /* Name und "about" scrollen mit der Seite weg */
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 24px var(--gutter);
  font-size: var(--title-size);
  pointer-events: none;
}

.site-header a,
.site-header span { pointer-events: auto; }

.site-header .site-name,
.site-header .about,
.site-header .hover-title {
  transition: opacity 0.15s ease;
}

.site-header .site-name { transition: opacity 0.15s ease, color 0.15s ease; }
.site-header .site-name:hover { text-decoration: none; }

/* Auf den Unterseiten wird der Name beim Hover grau wie "about" (Startseite: nur kein Underline) */
body:not(.home) .site-header .site-name:hover { color: #c4c4c4; }

.site-header .about { transition: opacity 0.15s ease, color 0.15s ease; }
.site-header .about:hover { color: #c4c4c4; text-decoration: none; }

/* Hover-Titel bleibt beim Scrollen am oberen Rand stehen */
.site-header .hover-title {
  position: fixed;
  top: 24px;
  left: var(--gutter);
  opacity: 0;
  pointer-events: none;
  white-space: pre-line; /* Zeilenumbrüche aus data-title übernehmen */
}

/* Hover auf ein Werk: Titel an, Name und "about" aus */
.site-header.is-hovering .site-name,
.site-header.is-hovering .about { opacity: 0; }
.site-header.is-hovering .hover-title { opacity: 1; }

/* ---------- Inhalt ---------- */

main {
  padding: 150px var(--gutter) 120px;
}

.work {
  display: block;
  position: relative;
  margin-left: calc(var(--x, 0) * 1%);
  width: calc(var(--w, 40) * 1%);
  margin-top: calc(var(--mt, 60) * 1px);
}

.work img,
.work video,
.work .placeholder {
  display: block;
  width: 100%;
  height: auto;
}

/* Platzhalter, bis echte Bilder da sind */
.placeholder {
  aspect-ratio: var(--ratio, 4 / 3);
  background: var(--ph, #000);
}

/* Auszeichnungs-Badges oben links am Bild */
.badges {
  position: absolute;
  top: -1.6vw;
  left: 0.8vw;
  display: flex;
  gap: 0.5vw;
}

.work .badge {
  display: block;
  width: 3.1vw;
  min-width: 24px;
  height: auto;
  border-radius: 50%;
}

/* ---------- Startseite: frei positioniert, skaliert mit der Fensterbreite ----------
   Alle Werte (--x, --w in % der Breite, --y in vw) stammen aus dem Readymag-Layout (1148 px breit). */

main.canvas {
  position: relative;
  height: 378vw;
  padding: 0;
}

main.canvas .work {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1vw);
  width: calc(var(--w) * 1%);
  margin: 0;
}

.draw-placeholder {
  aspect-ratio: 1 / 1;
  background: #000;
  color: #fff;
  font-size: 5vw;
  padding: 1.2vw 1.8vw;
}

/* Headline der Projektseiten führt am Handy zur Startseite (am Desktop nicht klickbar) */
.project-title a { color: inherit; text-decoration: none; pointer-events: none; }

/* Button zum Aufklappen des Beschreibungstexts: nur am Handy (per JS eingefügt) */
.text-toggle { display: none; }

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

.site-footer {
  padding: 0 var(--gutter) 24px;
  font-size: var(--small-size);
}

.site-footer a { transition: color 0.15s ease; }
.site-footer a:hover { color: #c4c4c4; text-decoration: none; }

/* ---------- About ----------
   Text links bleibt stehen, die rechte Spalte (Foto, Awards) scrollt nach oben.
   Maße aus dem Readymag-Layout (Breite in vw). */

.about-text {
  position: fixed;
  left: 3.7%;
  bottom: 5vh;
  width: 44%;
  font-size: 1.4vw;
  line-height: 2.15vw;
}

.about-text p { margin: 0 0 2.15vw; }
.about-text p:last-child { margin-bottom: 0; }

.about-column {
  margin-left: 53.8%;
  width: 39.6%;
  /* unten 5vh wie bei .about-text, damit die letzte Zeile am Scroll-Ende auf einer Linie mit der E-Mail liegt
     (+0.3vw gleicht die unterschiedliche Schriftgröße/Zeilenhöhe der beiden Spalten aus) */
  padding: 21.4vw 0 calc(5vh + 0.3vw);
}

.about-photo {
  display: block;
  width: 100%;
  height: auto;
}

.awards {
  margin-top: 4vw;
  font-size: max(11px, 0.95vw);
  line-height: 1.35;
}

.awards h2 {
  margin: 0 0 3.8vw;
  font-size: inherit;
  font-weight: 300;
}

.award-year {
  display: grid;
  grid-template-columns: 2.6vw 1fr;
  column-gap: 0;
}

.award-year .year { grid-column: 1; }
.award-year .lines { grid-column: 2; }
.award-year .lines p { margin: 0; }
.award-year .lines strong { font-weight: 600; }

/* ---------- Rechtliche Seiten (Impressum, Datenschutz) ----------
   Titel links, Fließtext ab ca. 35 % der Breite (Maße aus dem Readymag-Layout). */

main.legal {
  display: grid;
  grid-template-columns: 35.1% 1fr;
  padding: 12.4vw 0 8vw;
}

.legal-title {
  margin: 0;
  padding-left: var(--gutter); /* gleiche Einrückung wie der Name im Header */
  font-size: max(18px, 1.7vw);
  font-weight: 300;
  line-height: 1.3;
}

.legal-text {
  padding-right: var(--gutter);
  font-size: max(14px, 1.15vw);
  line-height: 1.55;
}

.legal-text p { margin: 0 0 1.75vw; }

/* Überschriften im Fließtext sehen aus wie normaler Text (wie in Readymag), nur mit Abstand */
.legal-text h2,
.legal-text h3 {
  margin: 0;
  font: inherit;
}
.legal-text h2 { margin: 3.5vw 0 1.75vw; }
.legal-text h2:first-child { margin-top: 0; }

.legal-text ul {
  margin: 0 0 1.75vw;
  padding: 0;
  list-style: none;
}

/* Links in Fließtexten: blau und unterstrichen wie in Readymag */
.legal-text a {
  color: #2f6ff2;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  overflow-wrap: anywhere;
}

/* ---------- Projektseite (z. B. Hug the System) ----------
   Titel, Text und Info bleiben stehen (fixed), die Medien scrollen darüber.
   Positionen aus dem Readymag-Layout: --x, --w in % der Breite, --y in vw. */

.project-title {
  position: fixed;
  top: 24px;
  left: var(--gutter);
  z-index: 1;
  margin: 0;
  font-size: max(28px, 4.8vw); /* skaliert mit der Fensterbreite, damit auch lange Titel wie im Original passen */
  font-weight: 300;
  line-height: 1.15;
}

.project-text {
  position: fixed;
  top: 11.6vw;
  left: var(--gutter);
  z-index: 1;
  width: 42vw;
  font-size: 1.4vw;
  line-height: 2.15vw;
}

.project-text p { margin: 0; }
.project-text p + p { margin-top: 2.15vw; }

/* Grauer Hinweis unter dem Text (z. B. Quellenangabe) */
.project-text .note {
  color: #b5b5b5;
  font-size: max(11px, 1.1vw);
  line-height: 1.8vw;
}

.project-meta {
  position: fixed;
  top: 11.6vw;
  left: 53.8%;
  z-index: 1;
  font-size: max(11px, 1.1vw);
  line-height: 1.8vw;
  color: #b5b5b5;
}

.project-meta p { margin: 0; }
.project-meta .gap { margin-top: 1.77vw; }

/* Auszeichnung mit rundem Badge neben dem Text */
.project-meta .award {
  display: flex;
  align-items: center;
  gap: 0.4vw;
  margin-top: 1.1vw;
}

.project-meta .award img {
  display: block;
  width: 3.4vw;
  min-width: 28px;
  height: auto;
  border-radius: 50%;
}

.project-media {
  position: relative;
  z-index: 2;
  height: calc(var(--h, 301.4) * 1vw); /* Gesamthöhe der Seite in vw, pro Seite mit --h einstellbar */
}

/* Längere Projektseiten (z. B. Alltäglicher Rassismus) */
.project-media.tall { height: 497.4vw; }

.project-media .item {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1vw);
  width: calc(var(--w) * 1%);
}

.project-media .item img,
.project-media .item video {
  display: block;
  width: 100%;
  height: auto;
}

/* Eingebettetes YouTube-Video */
.project-media .item iframe {
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio, 16 / 9);
  border: 0;
}

/* Handy-Foto mit Video im Display (St. Pauli) */
.project-media .phone { position: relative; }
.project-media .phone video {
  position: absolute;
  left: 19.9%;
  top: 0;
  width: 56.9%; /* leicht größer als das Display, damit kein Spalt zum Foto bleibt */
  height: 100%;
  object-fit: cover;
}

.project-media .phone img.views {
  position: absolute;
  left: 22.2%;   /* unten links im Display; Breite = Anteil am Foto (877 px) */
  top: 92.4%;
  width: 12.5%;
  height: auto;
}

/* Platzhalter, bis die echten Bilder und Videos da sind */
.ph {
  position: relative;
  aspect-ratio: var(--ratio, 4 / 3);
  background: var(--ph, #111);
}

.ph::after {
  content: attr(data-label);
  position: absolute;
  left: 8px;
  top: 8px;
  font-size: 11px;
  color: #777;
}

/* Echtes Bild in einem Rahmen mit festem Seitenverhältnis (schwarze Ränder bleiben schwarz) */
.project-media .ph > img,
.project-media .ph > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Variante: Bild füllt die Kachel und wird bei Bedarf zugeschnitten (Collagen) */
.project-media .ph.cover > img,
.project-media .ph.cover > video { object-fit: cover; }

/* Abgerundete Ecken für Bildschirm-Aufnahmen */
.project-media .round { border-radius: 0.9vw; overflow: hidden; }

/* Kleines Overlay-Bild (z. B. Node-Fenster) in einer Kachel, Position in % der Kachel */
.project-media .ph > img.node {
  inset: auto;
  left: 39.1%;
  top: 44.85%;
  width: 20.7%;
  height: auto;
  object-fit: initial;
}

/* Abschlussfläche in Orange mit "2022" */
.project-end {
  position: absolute;
  left: 0;
  top: calc(var(--y, 246.7) * 1vw); /* Position der Abschlussfläche, pro Seite mit --y einstellbar */
  width: 100%;
  height: 54.7vw;
  background: #ea6234;
  overflow: hidden;
}

/* Abschlussfläche als ein einziges Video (Seitenverhältnis 5:3) */
.project-end.video { position: relative; z-index: 2; top: auto; height: auto; background: transparent; }
.project-end.video video { display: block; width: 100%; height: auto; }

/* Helle Variante mit schwarzer Jahreszahl (Let's get physical) */
.project-end.light { background: #fdfdfd; }

.project-end.light .year-big {
  left: 22.9%;
  top: 15.2vw;
  font-size: 22.4vw;
  color: #000;
}

/* Farbpunkte links in der Abschlussfläche */
.project-end .dots {
  position: absolute;
  left: 3.4%;
  top: 3.2vw;
  display: flex;
  flex-direction: column;
  gap: 0.49vw;
}

.project-end .dots span {
  display: block;
  width: 2.17vw;
  height: 2.17vw;
  border-radius: 50%;
}

.project-end .year-big {
  position: absolute;
  left: 20.8%;
  top: 14.2vw;
  font-size: 22.6vw;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

/* Navigation unten, bleibt über den Medien */
.project-nav {
  position: fixed;
  bottom: 2.8vw;
  z-index: 3;
  display: flex;
  gap: 1.9vw;
  font-size: max(18px, 2.6vw);
  line-height: 1.15;
}

/* Über einer dunklen/bunten Abschlussfläche (Klasse "nav-grey") ist die Navigation grau; Hover wird weiß */
body.nav-grey-on .project-nav a { color: #c4c4c4; }
body.nav-grey-on .project-nav a:hover { color: #fff; }

.project-nav.left { left: 4.4vw; }
.project-nav.right { right: 4.9vw; }
.project-nav a { transition: color 0.15s ease; }
.project-nav a:hover { color: #c4c4c4; text-decoration: none; }

/* Draw-Tool (p5.js) als eingebettetes, quadratisches Fenster; Beschriftung "Draw"/"Delete" steckt in draw/ */
.tool-frame {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 0;
  background: #000;
}

/* Vollflächige Abschlusscollage: füllt am Seitenende das ganze Fenster (Titel und Text liegen darunter).
   Zwei Reihen mit je eigenen Spaltenbreiten (aus dem Readymag-Layout), Bilder füllen ihre Kachel. */
.project-media.fillend { height: calc(var(--ye) * 1vw + max(54.7vw, 100vh)); }

.project-end.collage {
  top: calc(var(--ye) * 1vw);
  height: max(54.7vw, 100vh);
  display: grid;
  grid-template-rows: 41.5fr 58.5fr;
}

/* Collage als ein einziges Bild (z. B. WWF) */
.project-end.collage.single { grid-template-rows: 1fr; }

.collage .row { display: grid; min-height: 0; }
.collage .row.r1 { grid-template-columns: 14.48fr 16.81fr 18.67fr 50.04fr; }
.collage .row.r2 { grid-template-columns: 39.29fr 24.42fr 36.29fr; }

.collage .cell { position: relative; overflow: hidden; min-width: 0; background: #000; }

.collage .cell img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kleines Overlay-Bild (Node-Fenster) auf der Rasterkachel */
.collage .cell img.node {
  inset: auto;
  left: 39.1%;
  top: 44.85%;
  width: 20.7%;
  height: auto;
  object-fit: initial;
}

/* ---------- Handy ---------- */

@media (max-width: 700px) {
  :root { --gutter: 24px; --title-size: 6vw; } /* Name und "about" bleiben in einer Zeile */
  .site-header { gap: 12px; }
  .site-header .site-name,
  .site-header .about { white-space: nowrap; }
  .work { margin-left: 0; width: 100%; }

  /* Handy: Werke einfach untereinander */
  main.canvas { height: auto; padding: calc(24px + 7.5vw) var(--gutter) 40px; } /* Höhe des Kopfs, danach gleicher Abstand wie zwischen den Projekten */
  main.canvas .work { position: relative; left: auto; top: auto; width: 100%; margin-top: 18px; }
  .badges { top: 8px; left: 8px; gap: 6px; } /* Badges liegen im Bild, nicht über dem Rand */
  .work .badge { width: 28px; }

  /* Footer: Name in der ersten Zeile, Imprint und Datenschutz in der zweiten */
  .site-footer .copy { display: block; }
  .site-footer .sep { display: none; }

  /* Startseite: Draw-Tool am Handy nicht anzeigen, St. Pauli direkt nach Sozialbank */
  main.canvas { display: flex; flex-direction: column; }
  .work[data-title="Tool.01"] { display: none; }
  .work[href="10.html"] { order: 1; }
  .work[href="7.html"],
  .work[href="8.html"],
  .work[href="9.html"] { order: 2; }

  /* Startseite: German-Design-Award-Logo am Handy nicht anzeigen */
  .nominee { display: none; }

  /* About: alles untereinander */
  .about-text { position: static; width: auto; margin: 110px var(--gutter) 0; font-size: 18px; line-height: 26px; }
  .about-text p { margin-bottom: 26px; }
  .about-column { margin: 40px var(--gutter) 0; width: auto; padding: 0 0 60px; }
  .awards { font-size: 13px; }
  .award-year { grid-template-columns: 40px 1fr; }
  .awards h2 { margin-bottom: 24px; }

  /* Rechtliche Seiten: Titel über dem Text */
  main.legal { display: block; padding: 120px var(--gutter) 60px; }
  .legal-title { padding: 0; margin-bottom: 24px; }
  .legal-text { padding: 0; }
  .legal-text p { margin-bottom: 24px; }

  .project-title a { pointer-events: auto; }

  /* Projektseite: alles untereinander, Navigation bleibt unten */
  .project-title,
  .project-text,
  .project-meta { position: static; width: auto; margin: 0 var(--gutter); }
  .project-title { padding-top: 24px; margin-bottom: 24px; }
  .project-text { font-size: 18px; line-height: 26px; }
  .project-text.text-collapsed { max-height: calc(26px * 4); overflow: hidden; }
  .text-toggle { display: block; margin: 8px var(--gutter) 0; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 14px; color: #8a8a8a; cursor: pointer; }
  .project-meta.text-collapsed { display: none; }
  .text-toggle[hidden] { display: none; }
  .project-text .note { font-size: 14px; line-height: 22px; }
  .project-meta { margin-top: 24px; font-size: 14px; line-height: 22px; }
  .project-meta .award { gap: 14px; margin-top: 14px; }
  .project-meta .award img { width: 36px; min-width: 36px; flex: none; }
  .project-media,
  .project-media.tall { height: auto; padding: 32px var(--gutter) 24px; }
  .project-media .item { position: static; left: auto; top: auto; width: 100%; margin: 0 0 24px; transform: none; }
  .project-media,
  .project-media.tall { padding-bottom: 0; }
  .project-media > :last-child { margin-bottom: 0; } /* Abstand zu den Pfeilen bestimmt allein die Navigation */
  .project-end { position: relative; top: auto; height: auto; margin: 0 calc(var(--gutter) * -1); padding: 24px var(--gutter); }
  .project-end.video { margin: 0 var(--gutter); padding: 0; width: auto; } /* Abschlussvideo: gleiche Seitenränder wie die Bilder */
  .project-media:has(+ .project-end.video) > :last-child { margin-bottom: 24px; } /* Abstand zum Abschlussvideo */
  .project-media:has(+ .project-end.video) { padding-bottom: 0; } /* Abstand davor und danach = 24 px wie zwischen den Bildern */
  .project-end .item { margin-bottom: 16px; }
  .project-end .year-big,
  .project-end.light .year-big { position: static; font-size: 30vw; }
  .project-end .dots { position: static; flex-direction: row; gap: 8px; margin-bottom: 16px; }
  .project-end .dots span { width: 24px; height: 24px; }
  /* Navigation am Handy: nur dünne Pfeile, back links und next rechts, fest am Ende der Seite (nicht mitscrollend) */
  .project-nav.left { position: static; display: flex; justify-content: space-between; margin: 0 var(--gutter); padding: 40px 0 32px; }
  body.nav-grey-on .project-nav a { color: inherit; } /* Pfeile stehen am Seitenende auf Weiß */
  .project-nav.left a { font-size: 0; padding: 12px 8px; margin: 0 -8px; }
  .project-nav.left a::before {
    content: "";
    display: block;
    width: 44px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 18'%3E%3Cpath d='M1 9H43M34 1L43 9L34 17' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 18'%3E%3Cpath d='M1 9H43M34 1L43 9L34 17' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .project-nav.left a:first-child::before { transform: scaleX(-1); }
  .project-nav.right { display: none; }

  /* Abschlusscollage: Bilder untereinander */
  .project-media.fillend { height: auto; }
  .project-end.collage { position: relative; top: auto; height: auto; display: block; padding: 0; margin: 0; } /* gleiche Seitenränder wie die Bilder */
  .collage .row { display: block; }
  .collage .cell img { position: static; height: auto; }
  .collage .cell img.node { position: absolute; }
}