/* =============================================================================
   FRIDOLIN KANDEL · PORTFOLIO
   Design-Tokens 1:1 aus Figma. Werte hier zentral ändern = wirkt überall.
   ============================================================================= */

:root {
  /* ---- Schriften (beide Google Fonts) ---- */
  --font-display: "Anton", system-ui, sans-serif;
  --font-mono: "Azeret Mono", ui-monospace, monospace;

  /* ---- Basisfarben ---- */
  --ink: #191919;     /* Schrift/Linien auf hellen Flächen */
  --paper: #ffffff;   /* Schrift/Linien auf dunklen Flächen */

  /* ---- Maße aus Figma ---- */
  --header-h: 62px;
  --cover-w: clamp(300px, 34vw, 461px);    /* Titelbild-Breite (3:4) */
  --cover-text-gap: clamp(28px, 4.5vw, 64px); /* Abstand Text ↔ Foto */
  --title-top: 40px;                       /* Abstand Titel von Bildoberkante */
  --page-pad: clamp(20px, 5vw, 114px);     /* seitlicher Seitenrand */
  --hairline: 0.5px;                       /* feine Kontur */

  /* Wird pro Farbfläche gesetzt (siehe [data-theme]) */
  --bg: var(--paper);
  --fg: var(--ink);
}

/* Theme-Umschaltung: helle vs. dunkle Farbfläche.
   --fg = Schriftfarbe, --bg = Flächenfarbe. */
[data-theme="light"] { --fg: var(--ink); }
[data-theme="dark"]  { --fg: var(--paper); }

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* =============================================================================
   KOPFZEILE  ·  weiße Fläche, feine Unterkante über die volle Breite
   ============================================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: var(--paper);
  color: var(--ink);
  border-bottom: var(--hairline) solid var(--ink);
  --fg: var(--ink);
}

/* Logo als SVG (komplette Wortmarke inkl. „Design & Fotografie“) */
.logo { display: flex; align-items: center; }
.logo img { display: block; height: 28px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 7px; }

/* Hamburger (SVG) – nur mobil sichtbar */
.nav-toggle {
  display: none;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle img { display: block; height: 21px; width: auto; }

/* =============================================================================
   CTA-BUTTONS
   Default : Füllung in Schriftfarbe mit 10 % Deckkraft, keine Kontur.
   Hover   : Füllung verschwindet, feine 0,5-px-Outline erscheint.
   Schriftfarbe folgt dem Hintergrund (--fg = weiß bzw. schwarz).
   ============================================================================= */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 7px;                                   /* klein: 7 L/R · 6 O/U */
  border: var(--hairline) solid transparent;          /* reserviert Platz für Hover-Outline */
  border-radius: 2px;
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  color: var(--fg);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.cta:hover {
  background: transparent;
  border-color: var(--fg);
}

/* große Buttons (Email, Instagram): nur Outline, kein Grau-Fill.
   Padding 17 L/R · 12 O/U, Pill-Form. Hover = gefüllt (invertiert). */
.cta--pill {
  border-radius: 32px;
  padding: 12px 17px;
  background: transparent;
  border-color: var(--fg);
}
.cta--pill:hover {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

/* Pfeil-Icon (aus deiner SVG), färbt sich mit der Schriftfarbe */
.cta__arrow { width: 13px; height: 12px; flex: 0 0 auto; }
.cta__arrow--back { transform: scaleX(-1); }          /* „Alle Projekte“ zeigt nach links */

/* =============================================================================
   STARTSEITE  ·  Sticky-Stacking
   Foto zentriert · Titel + CTA oben links daneben.
   ============================================================================= */
.projects { position: relative; }

.project {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;     /* Foto horizontal zentriert */
  background: var(--bg);
  color: var(--fg);
  padding: var(--header-h) var(--page-pad) 0;
}

/* Wrapper umschließt nur das Foto; der Text wird daneben absolut platziert */
.project__inner { position: relative; }

/* Höhe folgt dem sichtbaren Bereich → Foto wird auf keinem Screen
   unten abgeschnitten; Breite ergibt sich aus dem 3:4-Verhältnis. */
.project__cover {
  display: block;
  height: min(615px, calc(100vh - var(--header-h) - 80px));
  width: auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  transition: transform .4s ease;
}
.project__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Hover: das ganze Fotoelement verkleinert sich minimal */
.project__cover:hover { transform: scale(0.97); }

/* Titel + CTA: oben links vom Foto, mit Abstand zu Foto und Außenkante */
.project__text {
  position: absolute;
  top: var(--title-top);
  right: calc(100% + var(--cover-text-gap));
  width: clamp(180px, 18vw, 272px);
  display: flex;
  flex-direction: column;
  gap: 13px;
  text-align: left;
}
.project__title {
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: -.26px;
  white-space: pre-line;
}
.project__text .cta { align-self: flex-start; }

/* =============================================================================
   DETAILSEITE  ·  Sticky-Split
   Links Infospalte (1/3) sticky · rechts Fotos einspaltig (2/3).
   ============================================================================= */
.detail {
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  padding: calc(var(--header-h) + 40px) clamp(40px, 7vw, 110px) 80px 20px;
  display: grid;
  grid-template-columns: 1fr min(461px, 38vw);   /* Text links · feste Fotospalte rechts */
  gap: clamp(40px, 6vw, 105px);
}

.detail__info {
  position: sticky;
  top: calc(var(--header-h) + 40px);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 460px;
}
.detail__title {
  font-weight: 500;
  font-size: 13px;
  line-height: 1.25;
}
.detail__desc {
  font-weight: 300;
  font-size: 12px;
  line-height: 1.4;
}
.detail__info .cta { align-self: flex-start; }

/* Foto-Galerie: eine Spalte, volle Breite der rechten 2/3 */
.detail__gallery {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ph { overflow: hidden; width: 100%; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph--1x1  { aspect-ratio: 1 / 1; }
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--3x4  { aspect-ratio: 3 / 4; }
.ph--2x1  { aspect-ratio: 2 / 1; }

/* =============================================================================
   FUSSZEILE
   ============================================================================= */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 54px var(--page-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  --fg: var(--paper);
}
.site-footer__links { display: flex; gap: 7px; }
.site-footer__copy { font-size: 11px; line-height: 14px; opacity: .8; }
/* Footer-Buttons: Hover = schwarz gefüllt, weiße Schrift (statt weiß gefüllt) */
.site-footer .cta--pill:hover {
  background: #000;
  color: var(--paper);
  border-color: var(--paper);
}

/* =============================================================================
   MOBIL  ·  einfaches Scrollen statt Stacking, Hamburger-Menü
   ============================================================================= */
@media (max-width: 760px) {
  /* Header subtil: nur 5 px Abstand rundum zu Logo und Menü.
     :root (nicht html) – sonst überschreibt die :root-Regel oben per Spezifität. */
  :root { --header-h: 31px; }
  .site-header { padding: 5px; }
  .logo img { height: 21px; }
  .nav-toggle { display: block; }

  /* Navigation als ausklappbares Panel */
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: var(--ink);
    color: var(--paper);
    border-bottom: var(--hairline) solid var(--ink);
    /* vollständig über die Oberkante schieben (Höhe + Header-Versatz) */
    transform: translateY(calc(-100% - var(--header-h) - 2px));
    transition: transform .3s ease;
    --fg: var(--paper);
  }
  body.nav-open .site-nav { transform: translateY(0); }

  /* Startseite: Sticky-Stacking bleibt aktiv → Parallax auch mobil.
     Foto oben (volle Breite), Titel + CTA darunter, leicht eingerückt. */
  .project {
    align-items: flex-start;
    justify-content: flex-start;
    padding: calc(var(--header-h) + 16px) 5px 16px;
  }
  .project__inner { position: static; display: flex; flex-direction: column; gap: 27px; width: 100%; }
  .project__cover { width: 100%; height: auto; }
  .project__text {
    position: static;
    width: auto;
    inset: auto;
    padding-left: clamp(24px, 8vw, 40px);   /* eine Gridspalte nach rechts */
  }
  .cta__arrow { width: 12px; height: 11px; }

  /* Detailseite: einspaltig, Info nicht mehr sticky */
  .detail {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: calc(var(--header-h) + 24px) 20px 60px;
  }
  .detail__info { position: static; max-width: none; }
}

/* Sanfteres Verhalten, wenn Nutzer Animationen reduziert haben möchte */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .project__cover { transition: none; }
  .project__cover:hover { transform: none; }
}