/* =========================================================
   Ralf Gellert – Fotografie
   Eigenständiger Nachbau der Portfoliobox-Seite ralfgellert.de
   ---------------------------------------------------------
   Farben & Schriften zentral hier ändern:
   ========================================================= */
/* Schriften lokal eingebunden (keine Verbindung zu Google Fonts) */
@font-face { font-family: 'Alegreya Sans SC'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/alegreya-sans-sc-300.woff2') format('woff2'); }
@font-face { font-family: 'Alegreya Sans SC'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/alegreya-sans-sc-400.woff2') format('woff2'); }
@font-face { font-family: 'Josefin Sans'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/josefin-sans-300.woff2') format('woff2'); }
@font-face { font-family: 'Josefin Sans'; font-weight: 300; font-style: italic; font-display: swap; src: url('fonts/josefin-sans-300-italic.woff2') format('woff2'); }

:root {
  --bg: rgb(252, 251, 248);          /* Seitenhintergrund (warmes Off-White) */
  --text: rgb(74, 74, 74);           /* Fließtext, Menü, Bildunterschriften */
  --muted: rgb(155, 155, 155);       /* "⇧ BACK", Social-Icons */
  --accent: rgb(159, 203, 216);      /* Hover / aktiver Menüpunkt (hellblau) */
  --cover-yellow: rgb(248, 231, 28); /* Schrift auf der Startseite */
  --font-logo: 'Alegreya Sans SC', sans-serif;
  --font-ui: 'Josefin Sans', sans-serif;
  --font-body: 'Josefin Sans', sans-serif;
  --grid-gap: 1.68em;
}

* { box-sizing: border-box; }
html { font-size: 107%; }
body {
  margin: 0;
  background: var(--bg);
  color: #000;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; }

/* ---------- Einblend-Animation ---------- */
.fade-in { animation: fadeIn 1s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Kopfbereich / Menü ---------- */
.site-header {
  padding: 3em 1em 0;
  text-align: center;
  background: var(--bg);
}
.logo {
  display: inline-block;
  font-family: var(--font-logo);
  font-size: 2.4em;
  letter-spacing: 0.08em;
  color: #000;
  margin: 0 0 0.5em;
  line-height: 1.25;
  transition: color .2s;
}
.logo:hover { color: var(--accent); }
.main-menu {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: 0.78em;
  letter-spacing: 0.1em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4em 1.6em;
}
.menu-toggle {
  display: none;
  position: relative; z-index: 950;
  width: 34px; height: 26px; margin: 1.3em auto 0;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.menu-toggle span {
  position: absolute; left: 0; width: 100%; height: 2px; background: #111;
  transition: transform .3s, opacity .3s, top .3s;
}
.menu-toggle span:nth-child(1) { top: 2px; }
.menu-toggle span:nth-child(2) { top: 12px; }
.menu-toggle span:nth-child(3) { top: 22px; }
body.menu-open .menu-toggle span:nth-child(1) { top: 12px; transform: rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle span:nth-child(3) { top: 12px; transform: rotate(-45deg); }
.main-menu a { color: var(--text); white-space: pre; transition: color .2s; }
.main-menu a:hover,
.main-menu a.active { color: var(--accent); }

/* ---------- Galerie (Layout "random" von Portfoliobox) ---------- */
.gallery-section {
  padding: 3em 4vw 0;
  min-height: 86vh;
  max-width: 3011px;
  margin: 0 auto;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gap);
  margin: 5.75em 0 4em;
  align-items: start;
}
.item { margin: 0 0 4.44em; }
/* Wiederkehrendes 9er-Muster: Spaltenbreite + versetzte Höhe */
.item:nth-child(9n+1) { grid-column: span 4; margin-top: 0; }
.item:nth-child(9n+2) { grid-column: span 4; margin-top: 8.882em; }
.item:nth-child(9n+3) { grid-column: span 4; margin-top: 1.48em; }
.item:nth-child(9n+4) { grid-column: span 3; margin-top: 0; }
.item:nth-child(9n+5) { grid-column: span 5; margin-top: 4.376em; }
.item:nth-child(9n+6) { grid-column: span 4; margin-top: 7.402em; }
.item:nth-child(9n+7) { grid-column: span 5; margin-top: 7.503em; }
.item:nth-child(9n+8) { grid-column: span 4; margin-top: 0; }
.item:nth-child(9n+9) { grid-column: span 3; margin-top: 5.064em; }

.item .img-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  cursor: pointer;
  background: rgba(0,0,0,0.03);
}
.gallery.shadows .img-wrap { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15); }
.item img {
  width: 100%;
  height: auto;
  transition: transform 1.2s ease-out;
}
.item .img-wrap:hover img { transform: scale(1.05); }  /* "zoom-small" */
.item.video .img-wrap::after {          /* Play-Symbol bei Videos */
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  margin: -14px 0 0 -9px;
  border-style: solid;
  border-width: 14px 0 14px 24px;
  border-color: transparent transparent transparent rgba(255,255,255,.9);
  filter: drop-shadow(0 0 6px rgba(0,0,0,.35));
  pointer-events: none;
}
/* Videos, die direkt in der Galerie laufen (stumm, in Schleife).
   Das Standbild liegt darunter und ist sichtbar, bis das Video lädt
   oder falls keine Internetverbindung besteht. */
.item.autoplay .img-wrap { aspect-ratio: 16 / 9; }
.item.autoplay img { width: 100%; height: 100%; object-fit: cover; }
.item.autoplay .tile-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  pointer-events: none;           /* Klick öffnet die Großansicht mit Ton */
  transition: transform 1.2s ease-out;
}
/* gekürzte Videos erst zeigen, wenn sie am ersten echten Bild stehen */
.item.autoplay[data-start] .tile-video { opacity: 0; transition: opacity .25s, transform 1.2s ease-out; }
.item.autoplay .img-wrap:hover .tile-video { transform: scale(1.05); }
.item.autoplay .img-wrap::after { display: none; }   /* kein Play-Symbol */

.caption {
  display: block;
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: 0.71em;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--text);
  text-align: left;
  padding: 0.85em 1.45em 0;
  min-height: 1.2em;
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0;
  background: #fff;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.lightbox.open { display: flex; animation: fadeIn .4s ease both; }
.lb-stage {
  height: 90%;
  width: calc(100% - 140px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-stage iframe { width: 100%; max-width: 1280px; aspect-ratio: 16 / 9; border: 0; }
.lb-caption {
  font-family: var(--font-ui);
  font-style: italic; font-weight: 300;
  font-size: 0.75em; letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--text);
  min-height: 1.5em;
  margin-top: 0.6em;
}
.lb-close, .lb-prev, .lb-next {
  position: absolute;
  background: none; border: 0; cursor: pointer;
  color: #999; transition: color .2s;
  font-family: var(--font-ui);
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { color: #333; }
.lb-close { top: 14px; left: 18px; font-size: 26px; line-height: 1; font-weight: 300; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); font-size: 34px; padding: 20px; font-weight: 300; }
.lb-prev { left: 8px; }
.lb-next { right: 8px; }

/* ---------- Fußbereich ---------- */
.site-footer {
  padding: 3em 5vw 4.5em;
  text-align: center;
  background: var(--bg);
  font-family: var(--font-ui);
}
.back-top {
  display: inline-block;
  font-size: 1.34em;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 1.7em;
  cursor: pointer;
}
.back-top:hover { color: var(--muted); }
.social { display: flex; justify-content: center; gap: 0.9em; margin-bottom: 1em; }
.social a { color: var(--muted); transition: color .2s; }
.social a:hover { color: #999; }
.social svg { width: 1.15em; height: 1.15em; fill: currentColor; }
.social.dark a { color: var(--text); }
.copyright, .legal-link {
  font-size: 0.64em;
  font-style: italic;
  font-weight: 300;
  color: var(--text);
}
.legal-link { display: inline-block; margin-top: 1.3em; letter-spacing: 0.05em; }
.legal-link:hover { text-decoration: underline; }

/* ---------- Startseite (Cover) ---------- */
.cover {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #8a8f8a;
}
.cover-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.cover-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-logo);
  color: var(--cover-yellow);
  text-align: center;
}
.cover-welcome { font-size: 1.6em; font-weight: 300; letter-spacing: 0.15em; margin: 0 0 0.9em; line-height: .5; }
.cover-name    { font-size: 3.51em; letter-spacing: 0.08em; margin: 0 0 1.1em; line-height: 1.25; color: inherit; }
.cover-enter   { font-size: 1.63em; font-weight: 300; margin-bottom: 5.75em; color: inherit; }
.cover a:hover { color: #555; }

/* ---------- Kontakt ---------- */
.contact-section {
  min-height: 69vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1em;
}
.contact-text {
  margin-top: 5.75em;
  font-family: var(--font-ui);
  font-style: italic; font-weight: 300;
  font-size: 0.78em; letter-spacing: 0.06em; line-height: 1.65em;
  color: var(--text);
  text-align: center;
}
.contact-text a:hover { color: var(--accent); }
.contact-image { max-width: 415px; width: 100%; margin: 5.05em 0 0.3em; }
.contact-image img { width: 100%; height: auto; }
.site-footer.contact-footer { padding: 0 5vw 16em; }

/* ---------- Impressum ---------- */
.legal {
  padding: 4em 10vw 5vh;
  font-family: var(--font-ui);
  font-weight: 300;
  color: var(--text);
  line-height: 1.8em;
  font-size: 1.05em;
  max-width: 1100px;
  margin: 0 auto;
}
.legal h2, .legal h3 { font-style: italic; font-weight: 300; color: #000; font-size: 1em; margin: 2em 0 0.6em; }
.legal h2 { font-size: 1.1em; }
.legal p { margin: 0 0 1em; }
.legal ul { margin: 0 0 1em; padding-left: 1.3em; }

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
  .site-header { padding-top: 1.5em; }
  .logo { font-size: 2.51em; letter-spacing: 0.02em; margin-bottom: 0.45em; }
  /* Burger-Menü wie im Original */
  .menu-toggle { display: block; }
  .main-menu {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(252, 251, 248, 0.88);
    flex-direction: column; flex-wrap: nowrap;
    justify-content: center; align-items: center;
    font-size: 1.6em; letter-spacing: 0.25em; line-height: 2em;
    gap: 0;
    opacity: 0; visibility: hidden;
    transition: opacity .35s, visibility .35s;
  }
  .main-menu.fade-in { animation: none; }
  body.menu-open .main-menu { opacity: 1; visibility: visible; }
  body.menu-open .menu-toggle { position: fixed; top: 1.2em; right: 1.2em; margin: 0; }
  .gallery-section { padding: 0 3vw; min-height: 60vh; }
  /* Gleiches versetztes Layout wie am Desktop, nur kompakter:
     Bilder nebeneinander, kleinere Abstände und Versätze. */
  /* Handy: gleiches versetztes 3er-Layout wie am Desktop, kompakter.
     --grid-gap = waagerechter Weißraum zwischen den Bildern */
  .gallery { margin-top: 2.5em; --grid-gap: 1.25em; }
  .item { margin-bottom: 1.6em; }
  .item:nth-child(9n+2) { margin-top: 3.2em; }
  .item:nth-child(9n+3) { margin-top: 0.6em; }
  .item:nth-child(9n+5) { margin-top: 1.6em; }
  .item:nth-child(9n+6) { margin-top: 2.7em; }
  .item:nth-child(9n+7) { margin-top: 2.7em; }
  .item:nth-child(9n+9) { margin-top: 1.8em; }
  .overview-gallery .caption { display: none; }  /* overview: keine Bildunterschriften auf dem Handy */
  .caption { font-size: 0.385em; padding: 0.6em 0.3em 0; line-height: 1.3; }  /* Bildunterschriften Handy (vorher 0.55em) */
  .item.video .img-wrap::after { border-width: 9px 0 9px 15px; margin: -9px 0 0 -6px; }
  .item .img-wrap:hover img { transform: none; }
  .lb-stage { width: 100%; }
  .lb-prev, .lb-next { font-size: 26px; padding: 10px; }
  .cover-name { font-size: 2.4em; }
}