/* =========================================================
   Sebastian Hagenz – Fotografie
   Handschrift-/Klebestreifen-Look (siehe Mockup)
   ========================================================= */

/* --- Selbst gehostete Schrift ---------------------------- */
@font-face {
  font-family: 'Shagenz';
  src: url('../fonts/Shagenz.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-marker: 'Shagenz', cursive;
  --font-hand: 'Shagenz', cursive;
  --ink: #111;
  --paper: #fff;
  --max: 1000px;
  --nav-top: 18px;   /* Abstand Menü <-> oberer Viewport-Rand */

  /* ====== Schriftgrößen – ZENTRAL steuerbar ================
     GLOBALER Regler: --fs-scale multipliziert ALLE Größen unten.
     1 = Standard · 1.1 = alles 10% größer · 0.9 = 10% kleiner. */
  --fs-scale: .9;

  /* Haupt-Stellschrauben (jeweils Basiswert × --fs-scale). */
  --fs-menu:    calc(22px * var(--fs-scale));   /* Navigation (Logo + Links)          */
  --fs-heading: clamp(                          /* Große Überschriften (Projekt/Info) */
                  calc(26px  * var(--fs-scale)),
                  calc(4.4vw * var(--fs-scale)),
                  calc(44px  * var(--fs-scale)));

  /* Fließtext-Skala: ALLES hängt an --fs-text (= 18px × Scale). Die
     Stufen leiten sich davon ab und halten die Hierarchie. */
  --fs-text:    calc(18px * var(--fs-scale));  /* Basis: body, Projekt-Beschreibung    */
  --fs-text-sm: calc(var(--fs-text) * 0.89);   /* ~16px: Bildunterschrift, Footer      */
  --fs-text-md: calc(var(--fs-text) * 1.11);   /* ~20px: Projekt-Infos, Kontakt, Clients */
  --fs-text-lg: calc(var(--fs-text) * 1.22);   /* ~22px: Info-Intro                    */

  /* ---- Klebestreifen (Logik wie auf shagenz.com) ---------
     Drei "Ecken"-Tapes + drei "Kanten"-Tapes. */
  --tape-corner-1: url('../images/tapes/Tape1.png');
  --tape-corner-2: url('../images/tapes/Tape2.png');
  --tape-corner-3: url('../images/tapes/Tape3.png');
  --tape-edge-1:   url('../images/tapes/Tape4.png');
  --tape-edge-2:   url('../images/tapes/Tape5.png');
  --tape-edge-3:   url('../images/tapes/Tape6.png');

  /* Größe skaliert mit dem Viewport; Offset = exakt halbe Größe,
     damit das Tape genau zur Hälfte über die Bildkante ragt. */
  --tape-corner-size: clamp(175px, 25vw, 425px);
  --tape-corner-off:  calc(var(--tape-corner-size) * -0.5);
  /* Vertikale Luft im Slider, damit die Tapes nicht beschnitten werden
     (knapp über dem tatsächlichen Tape-Überstand gehalten). */
  --tape-clear:       calc(var(--tape-corner-size) * 0.45);
  /* Gewünschter Abstand Bild -> Schrift (unabhängig von der Tape-Größe) */
  --slider-gap:       2rem;

  /* Maximalhöhe für Bilder. Querformate werden über max-width: 76vw
     bestimmt (wie zuvor); nur Hochformate stoßen an diese Höhe und
     werden dadurch schmaler statt zu hoch. 56vw entspricht etwa der
     Höhe eines 3:2-Querformats, 85vh hält es auf flachen Screens im
     Viewport. */
  --img-height:       min(56vw, 85vh);

  /* Breite des ersten (zentrierten) Bildes im Slider. Wird auch zur
     Einrückung des Meta-Bereichs verwendet, damit dieser linksbündig
     mit dem ersten Bild sitzt. Muss mit dem Wert in site.js (layout)
     übereinstimmen. */
  --slider-img-width: 75vw;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Safari/Chrome: horizontale Zurück-/Vor-Wischgeste unterbinden */
  overscroll-behavior-x: none;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-hand);
  font-size: var(--fs-text);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* Full-Bleed-Slider (100vw) erzeugt keinen Seiten-Scroll */
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* Zweite Schriftstufe in kirbytext-Feldern (KirbyTag "big", siehe
   site/plugins/textsize). 1em = aktuelle Schriftgröße des Kontexts,
   + 0.5rem macht den markierten Text genau eine halbe rem größer. */
.kt-big,
.info__email { font-size: calc(1em + 0.5rem); }

/* --- Navigation (fix, oben links) ----------------------- */
.nav {
  position: fixed;
  top: var(--nav-top);
  left: var(--nav-top);
  z-index: 100;
  font-family: var(--font-hand);
  line-height: 1.05;
  mix-blend-mode: multiply;
}

.nav__logo {
  display: block;
  font-family: var(--font-hand);
  font-size: var(--fs-menu);
  font-weight: 700;
  letter-spacing: 0.5px;
  transform: rotate(-3deg);
}

.nav__links {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  font-size: var(--fs-menu);
  font-weight: 700;
}

.nav__links li { transform: rotate(-2deg); }
.nav__links a { display: inline-block; }
.nav__links a:hover { text-decoration: underline wavy; }

/* Sprachumschalter DE/EN – eigenes Menü unten links im Viewport,
   spiegelt die fixe Position des Haupt-Navs (oben links) nach unten. */
.langswitch {
  position: fixed;
  bottom: var(--nav-top);
  left: var(--nav-top);
  z-index: 100;
  font-family: var(--font-hand);
  line-height: 1.05;
  mix-blend-mode: multiply;
}
.langswitch__list {
  list-style: none;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-size: var(--fs-menu);
  font-weight: 700;
  transform: rotate(-2deg);
}
.langswitch__link { display: inline-block; opacity: 0.45; }
.langswitch__link:hover { opacity: 1; text-decoration: underline wavy; }
.langswitch__link.is-active { opacity: 1; text-decoration: underline; }

/* Visuell verstecktes, für Screenreader & SEO sichtbares <h1> */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Aktiver Menüpunkt eingekringelt */
.nav__link {
  position: relative;
  padding: 2px 8px;
}
.nav__link.is-active::after {
  content: "";
  position: absolute;
  inset: -4px -6px -6px -6px;
  border: 2px solid var(--ink);
  border-radius: 60% 40% 55% 45% / 55% 50% 50% 45%;
  transform: rotate(-4deg);
  pointer-events: none;
}

/* Eigener PNG/SVG-Kringel aus dem Pool: JS setzt --kringel + .has-kringel.
   Der Kringel wird auf die Breite (und Höhe) des Menüeintrags gestreckt. */
.nav__link.is-active.has-kringel::after {
  border: none;
  border-radius: 0;
  transform: none; /* Schräglage/Wackeln steckt in der Grafik selbst */
  background: var(--kringel) center / 100% 100% no-repeat;
}

/* --- Layout --------------------------------------------- */
.site { width: 100%; }

.work {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Projekt -------------------------------------------- */
.project {
  margin: 0 0 100px;
}

/* Bild-Serie: horizontaler Film-Streifen über die volle
   Viewport-Breite (Full-Bleed). Nachbarbilder ragen links und
   rechts angeschnitten herein und lassen sich anklicken. */
.project__gallery {
  display: flex;
  gap: 4vw;
  overflow-x: auto;
  overflow-y: hidden; /* prevent vertical scrolling inside the slider */
  touch-action: pan-x; /* prefer horizontal panning on touch devices */
  /* aus dem zentrierten Container auf 100vw ausbrechen */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Vertikales Padding (--tape-clear) reserviert Platz für die
     überstehenden Tapes, damit der Scroll-Container sie nicht
     beschneidet. 12vw seitlich => Nachbarbilder lugen hervor. */
  padding: var(--tape-clear) 12vw var(--tape-clear);
  /* Bottom-Padding per negativer Margin wieder aus dem Fluss nehmen:
     Tapes rendern voll, aber der Meta-Block rückt nach oben. Den
     sichtbaren Abstand bestimmt allein --slider-gap (auf .meta-wrap);
     die unteren Tapes lugen dank z-index hinter der Schrift hervor. */
  margin-bottom: calc(var(--tape-clear) * -1);
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.project__gallery::-webkit-scrollbar { display: none; }

/* Erstes Bild bündig mit der Menü-Oberkante: die obere Tape-Luft
   wieder hochziehen (Tapes bleiben im border-box -> nicht beschnitten). */
.project:first-child .project__gallery,
.work--single .project__gallery {
  margin-top: calc(var(--nav-top) - var(--tape-clear));
}

/* Folge-Projekte: das obere Tape-Padding (wie beim Bottom-Padding) per
   negativer Margin wieder aus dem Fluss nehmen. Die oberen Tapes rendern
   weiterhin voll (nicht beschnitten), aber der Projektabstand wird allein
   durch den margin-bottom von .project bestimmt. Die Tapes lugen dank
   z-index hinter dem darüberliegenden Meta-Block hervor. */
.project:not(:first-child) .project__gallery {
  margin-top: calc(var(--tape-clear) * -1);
}

.project__shot {
  position: relative;
  flex: 0 0 auto;
  /* Breite ergibt sich aus dem Bild (max-width/max-height unten). */
  margin: 0;
  cursor: pointer;
  scroll-snap-align: center;
}

/* Teaser eines graduierten Projekts: Cover + Titel, verlinkt auf /work/.
   Greift Größen-Logik von .project__shot/.project__media auf. */
.project--teaser { cursor: pointer; }
.project__teaser-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}
.project__teaser-link:hover .project__media { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22); }
.project__teaser-meta {
  display: block;
  margin-top: 10px;
  font-family: var(--font-hand);
  font-weight: 700;
}
.project__teaser-title { display: inline-block; transform: rotate(-2deg); }
.project__teaser-link:hover .project__teaser-title { text-decoration: underline wavy; }
.project__teaser-client {
  display: block;
  opacity: 0.6;
  font-weight: 400;
}

/* Gemeinsame Basis für Bilder UND Videos: identische Größen-Logik,
   damit sich Videos im Slider exakt wie Fotos verhalten. */
.project__media {
  display: block;
  width: auto;
  height: auto;
  max-width: 76vw;            /* Querformat wie zuvor */
  max-height: var(--img-height); /* Hochformat wird hierüber begrenzt */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Schwarzer Grund hinter Videos, falls das Seitenverhältnis vor dem
   JS-Layout noch nicht exakt zum gerenderten Rahmen passt. */
.project__video {
  background: #000;
  object-fit: cover;
}

/* Erstes Medium jedes Projekts: Breite = --slider-img-width; ist es
   Hochformat und höher als der Viewport, greift max. 90vh (und macht es
   schmaler). Zentriert wird es per JS (site.js -> layout()). */
.project__shot:first-child .project__media {
  /* Zentrale Variable, damit JS und CSS synchron bleiben (Default 75vw). */
  max-width: var(--slider-img-width);
  max-height: 90vh;
}

/* Leichte, deterministische Schräglage je Projekt-Serie.
   --tape-offset kommt aus dem Page Model (crc32(slug)). */
.project__shot:nth-child(odd) {
  transform: rotate(calc((var(--tape-offset) - 2) * 0.35deg));
}
.project__shot:nth-child(even) {
  transform: rotate(calc((var(--tape-offset) - 3) * -0.4deg));
}

/* =========================================================
   Klebestreifen – Verteilung & Skalierung wie auf shagenz.com
   ---------------------------------------------------------
   .project       = "Reihe"  -> rotiert die Tape-Bildzuweisung
   .project__shot = "Item"   -> Position, Drehung, Bildwahl
   Tapes als ::before (oben) / ::after (unten) Pseudo-Elemente.
   ========================================================= */

/* Pseudo-Randomizer: jede Projekt-Serie startet mit anderer
   Tape-Zuordnung, damit es zufällig wirkt. */
.project {
  --tc-1: var(--tape-corner-1); --tc-2: var(--tape-corner-2); --tc-3: var(--tape-corner-3);
  --te-1: var(--tape-edge-1);   --te-2: var(--tape-edge-2);   --te-3: var(--tape-edge-3);
}
.project:nth-child(even) {
  --tc-1: var(--tape-corner-2); --tc-2: var(--tape-corner-3); --tc-3: var(--tape-corner-1);
  --te-1: var(--tape-edge-2);   --te-2: var(--tape-edge-3);   --te-3: var(--tape-edge-1);
}
.project:nth-child(3n) {
  --tc-1: var(--tape-corner-3); --tc-2: var(--tape-corner-1); --tc-3: var(--tape-corner-2);
  --te-1: var(--tape-edge-3);   --te-2: var(--tape-edge-1);   --te-3: var(--tape-edge-2);
}

/* Basis der beiden Tape-Pseudo-Elemente */
.project__shot::before,
.project__shot::after {
  content: "";
  position: absolute;
  z-index: 5;
  pointer-events: none;
  width: var(--tape-corner-size);
  height: var(--tape-corner-size);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto; /* einheitliche Tape-Proportionen */
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.18));
}

/* Kleiner Varianzwinkel pro Item (wirkt "zufällig") */
.project__shot          { --r-b: 0deg; --r-a: 0deg; }
.project__shot:nth-child(2n) { --r-b:  3deg; --r-a: -2deg; }
.project__shot:nth-child(3n) { --r-b: -4deg; --r-a:  4deg; }
.project__shot:nth-child(5n) { --r-b:  2deg; --r-a: -5deg; }
.project__shot:nth-child(7n) { --r-b: -3deg; --r-a:  3deg; }

/* --- Position & Drehung (4er-Muster) -------------------- */
/* 1: oben-links + unten-rechts (diagonal) */
.project__shot:nth-child(4n+1)::before { top: var(--tape-corner-off); left: var(--tape-corner-off); transform: rotate(calc(-45deg + var(--r-b))); }
.project__shot:nth-child(4n+1)::after  { bottom: var(--tape-corner-off); right: var(--tape-corner-off); transform: rotate(calc(135deg + var(--r-a))); }
/* 2: oben-rechts + unten-links (gespiegelt) */
.project__shot:nth-child(4n+2)::before { top: var(--tape-corner-off); right: var(--tape-corner-off); transform: rotate(calc(45deg + var(--r-b))); }
.project__shot:nth-child(4n+2)::after  { bottom: var(--tape-corner-off); left: var(--tape-corner-off); transform: rotate(calc(225deg + var(--r-a))); }
/* 3: Mitte oben + Mitte unten (zentriert) */
.project__shot:nth-child(4n+3)::before { top: var(--tape-corner-off); left: 50%; transform: translateX(-50%) rotate(calc(0deg + var(--r-b))); }
.project__shot:nth-child(4n+3)::after  { bottom: var(--tape-corner-off); left: 50%; transform: translateX(-50%) rotate(calc(180deg + var(--r-a))); }
/* 4: beide oben (links + rechts) */
.project__shot:nth-child(4n)::before   { top: var(--tape-corner-off); left: var(--tape-corner-off); transform: rotate(calc(-45deg + var(--r-b))); }
.project__shot:nth-child(4n)::after    { top: var(--tape-corner-off); right: var(--tape-corner-off); transform: rotate(calc(45deg + var(--r-a))); }

/* --- Bildzuweisung (12er-Muster) ------------------------ */
.project__shot:nth-child(12n+1)::before  { background-image: var(--tc-1); } .project__shot:nth-child(12n+1)::after  { background-image: var(--tc-2); }
.project__shot:nth-child(12n+2)::before  { background-image: var(--tc-2); } .project__shot:nth-child(12n+2)::after  { background-image: var(--tc-3); }
.project__shot:nth-child(12n+3)::before  { background-image: var(--te-1); } .project__shot:nth-child(12n+3)::after  { background-image: var(--te-2); }
.project__shot:nth-child(12n+4)::before  { background-image: var(--tc-3); } .project__shot:nth-child(12n+4)::after  { background-image: var(--tc-1); }
.project__shot:nth-child(12n+5)::before  { background-image: var(--tc-3); } .project__shot:nth-child(12n+5)::after  { background-image: var(--tc-1); }
.project__shot:nth-child(12n+6)::before  { background-image: var(--tc-1); } .project__shot:nth-child(12n+6)::after  { background-image: var(--tc-2); }
.project__shot:nth-child(12n+7)::before  { background-image: var(--te-2); } .project__shot:nth-child(12n+7)::after  { background-image: var(--te-3); }
.project__shot:nth-child(12n+8)::before  { background-image: var(--tc-1); } .project__shot:nth-child(12n+8)::after  { background-image: var(--tc-2); }
.project__shot:nth-child(12n+9)::before  { background-image: var(--tc-2); } .project__shot:nth-child(12n+9)::after  { background-image: var(--tc-3); }
.project__shot:nth-child(12n+10)::before { background-image: var(--tc-3); } .project__shot:nth-child(12n+10)::after { background-image: var(--tc-1); }
.project__shot:nth-child(12n+11)::before { background-image: var(--te-3); } .project__shot:nth-child(12n+11)::after { background-image: var(--te-1); }
.project__shot:nth-child(12n+12)::before { background-image: var(--tc-2); } .project__shot:nth-child(12n+12)::after { background-image: var(--tc-3); }

/* --- Projekt-Infos -------------------------------------- */
/* Wrapper zentriert den Meta-Block und begrenzt ihn auf die Breite des
   ersten Bildes (bündige Ausrichtung). Sitzt im zentrierten .work. */
.project__meta-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--slider-gap); /* konstanter Abstand Galerie -> Schrift */
}
.project__meta {
  position: relative;
  z-index: 10; /* Schrift liegt über evtl. überstehenden unteren Tapes */
  max-width: var(--slider-img-width);
  width: 100%;
}

.project__title {
  font-family: var(--font-marker);
  font-weight: 400;
  font-size: var(--fs-heading);
  letter-spacing: 1px;
  margin: 0 0 6px;
  line-height: 1;
}

.project__info {
  margin: 0;
  font-family: var(--font-hand);
  font-size: var(--fs-text-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.15;
}

.project__info-row {
  display: flex;
  gap: 12px;
}
.project__info dt {
  min-width: 130px;
  color: #444;
}
.project__info dd { margin: 0; }
/* Verlinkte Einträge (model, client, …) als klickbar kennzeichnen. */
.project__info-link { text-decoration: underline; text-underline-offset: 3px; }
.project__info-link:hover { text-decoration: underline wavy; }

.project__desc {
  margin-top: 14px;
  max-width: 60ch;
  font-size: var(--fs-text);
}

.project__caption-img {
  position: absolute;
  bottom: 8px;
  left: 10px;
  font-family: var(--font-hand);
  font-size: var(--fs-text-sm);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* --- Info-Sektion (zentriertes Layout, siehe Mockup) ---- */
.info {
  /* etwas breiter als der übrige Content, damit die Bio bis zu 15vw
     weiter laufen kann (siehe .info__intro). Alles bleibt zentriert. */
  max-width: calc(var(--max) + 15vw);
  margin: 0 auto;
  padding: 80px 24px 100px;
  text-align: center;
}

.info__title {
  font-family: var(--font-marker);
  font-weight: 400;
  font-size: var(--fs-heading);
  margin: 0 0 16px;
}

/* Große handschriftliche Bio, zentriert, mit angenehmer Zeilenlänge. */
.info__intro {
  font-family: var(--font-hand);
  font-size: var(--fs-text-lg);
  text-transform: uppercase;
  line-height: 1.3;
  /* Grundmaß 48ch + 15vw extra Lauflänge, nach oben durch 92vw begrenzt. */
  max-width: min(calc(48ch + 15vw), 92vw);
  margin: 0 auto;
}
.info__intro p { margin: 0; } /* Standard-Absatzränder des kirbytext aufheben */

/* Instagram als Icon (Outline, nimmt die Tintenfarbe an). */
.info__instagram {
  display: inline-block;
  margin-top: 2.5rem;
  color: var(--ink);
  line-height: 0; /* kein zusätzlicher Abstand unter dem SVG */
}
.info__instagram svg {
  width: 40px;
  height: 40px;
}
.info__instagram:hover { opacity: 0.6; }

.info__contact {
  margin-top: 2rem;
  font-size: var(--fs-text-md);
  text-transform: uppercase;
}
.info__contact p { margin: 4px 0; }
.info__contact a:hover { text-decoration: underline wavy; }

.info__clients { margin-top: 2.5rem; }
.info__clients h3 {
  font-family: var(--font-marker);
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 6px;
}
.info__clients ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-text-md);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- Footer --------------------------------------------- */
.footer {
  max-width: var(--max);
  margin: 80px auto 0;
  padding: 40px 24px;
  font-family: var(--font-hand);
  font-size: var(--fs-text-sm);
  color: #777;
}

/* --- Mobile --------------------------------------------- */
@media (max-width: 700px) {
  :root {
    --img-height: 62vh;
    /* Fließtext auf Mobile verkleinern. Greift dank der calc()-Skala
       automatisch auf sm/md/lg durch und schafft so wieder Abstand zu
       den (per vw schrumpfenden) Headings. --fs-scale wirkt weiter mit. */
    --fs-text: calc(16px * var(--fs-scale));
  }
  /* Menü mittig oben und im Textfluss (scrollt mit, nicht fixiert). */
  .nav {
    position: static;
    left: auto;
    top: auto;
    text-align: center;
    padding-top: var(--nav-top);
    font-size: 90%;
  }
  /* Erstes Bild beginnt unter dem mitscrollenden Menü – mit einem kleinen
     negativen Versatz den Abstand etwas verringern. */
  .project:first-child .project__gallery,
  .work--single .project__gallery {
    margin-top: -10px;
  }
  /* Abstand letztes Projekt -> Info verringern. Die Galerien sind per
     negativer Margin hochgezogen, daher bestimmt der margin-bottom des
     letzten .project (= :nth-last-child(2), da .info das letzte Kind ist)
     den sichtbaren Abstand. Nur diesen kürzen, ohne die Lücken zwischen
     den Projekten anzutasten. */
  .work > .project:nth-last-child(2) { margin-bottom: 48px; }
  .info { padding: 36px 20px 72px; }
}