/* ==========================================================================
   bernd kammerer — photography and film
   Farbwelt und Typo angelehnt an berndkammerer.com,
   Galerie-Logik angelehnt an steffenjahn.com
   ========================================================================== */

:root{
  --bg:        #9b87ce;   /* Lavendel-Hintergrund */
  --bg-deep:   #8a74c4;   /* leicht dunkler, für Flächen */
  --accent:    #2b28d8;   /* Signalblau der Navigation */
  --neon:      #e4ff00;   /* Neongelb für Streckentitel */
  --magenta:   #ff00b4;   /* aktive Rubrik in der Navigation */
  --ink:       #14121f;   /* Text */
  --ink-soft:  #3b3550;
  --overlay:   #0b0a12;   /* Lightbox */
  --header-h:  clamp(96px, 12vw, 168px);

  --gap:       11px;      /* Abstand zwischen den Bildern */
  --row:       clamp(96px, 10.5vw, 168px);  /* Grundhöhe eines Bildes */
  --label-col: 190px;     /* Breite der Titelspalte links */
  --block:     920px;     /* maximale Breite des Bildblocks */
  --maxw:      1180px;

  --font-display: "Oswald", "Roboto Condensed", "Helvetica Neue Condensed", Impact, sans-serif;
  --font-logo:    "Jost", "Futura", "Century Gothic", "Avenir Next", sans-serif;
  --font-text:    "Jost", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-text);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

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

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

.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:none;
  padding:16px 32px 14px;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
  pointer-events:none;
}
.site-header > *{ pointer-events:auto; }

.logo{ display:block; flex:0 0 auto; }
.logo img{ width:clamp(240px, 40vw, 580px); height:auto; }

/* CSS-Wortmarke — wird nur benutzt, wenn keine Logodatei vorhanden ist */
.logo{ display:flex; flex-direction:column; }
.logo-type{
  font-family:var(--font-logo);
  font-weight:600;
  font-size:clamp(38px, 4.3vw, 61px);
  line-height:.94;
  letter-spacing:-.01em;
  color:var(--ink);
  position:relative;
  text-shadow:
     0.055em 0    0 rgba(255,0,0,.72),
    -0.055em 0    0 rgba(0,190,255,.72),
     0      0.045em 0 rgba(255,215,0,.55);
}
.logo-sub{
  font-family:var(--font-logo);
  font-weight:300;
  font-size:clamp(14px, 1.5vw, 21px);
  letter-spacing:.02em;
  color:var(--ink);
  margin-top:.2em;
}

.site-nav{
  margin-left:auto;
  display:flex; flex-wrap:wrap; justify-content:flex-end;
  gap:4px 22px;
}
.site-nav a{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(20px, 1.8vw, 27px);
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--accent);
  transition:opacity .15s ease;
}
.site-nav a:hover{ opacity:.55; }
.site-nav a[aria-current="page"]{ color:var(--magenta); }

/* Burger — nur auf schmalen Fenstern sichtbar */
.nav-toggle{
  display:none;
  position:relative; z-index:2;
  width:46px; height:38px;
  padding:8px 3px;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:space-between;
  align-self:flex-start;
}
.nav-toggle span{
  display:block; height:3px; width:100%;
  background:var(--accent);
  border-radius:2px;
  transition:transform .28s cubic-bezier(.2,.7,.3,1), opacity .18s ease, background-color .2s;
}
.nav-toggle[aria-expanded="true"] span{ background:var(--magenta); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(10.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-10.5px) rotate(-45deg); }

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

main{
  max-width:var(--maxw); margin:0 auto;
  padding:calc(var(--header-h) + 24px) 32px 140px;
}
body.page-intro main{
  padding-top:64px;
  /* Das Portfolio nutzt fast die volle Fensterbreite */
  max-width:1760px;
  padding-left:clamp(20px, 2.6vw, 40px);
  padding-right:clamp(20px, 2.6vw, 40px);
}

/* ---------- Eine Strecke: Titel links, Bilder rechts -------------------- */

.series{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin:0 0 clamp(64px, 8vw, 128px);
  scroll-margin-top:110px;
}

.series-label{
  flex:0 0 var(--label-col);
  width:var(--label-col);
  position:relative;
  align-self:stretch;
}
.series-label-inner{
  position:absolute; right:0;
  top:var(--label-top, 46%);
  transform:translateY(-100%);
  width:100%;
  text-align:right;
}
.series-label h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:13px;
  line-height:1.3;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin:0;
  color:var(--neon);
  padding-bottom:2px;
  text-shadow:0 0 14px rgba(228,255,0,.28);
}
.series-note{
  font-size:12px; line-height:1.5;
  color:var(--ink-soft);
  margin:6px 0 0;
}

/* ---------- Bildblock: unregelmäßige Höhen, Reihen unten bündig -------- */

.grid{
  flex:1 1 auto;
  min-width:0;
  max-width:var(--block);
  display:flex; flex-wrap:wrap;
  align-items:flex-end;
  gap:var(--gap);
  margin:0; padding:0;
}

.shot{
  position:relative;
  flex:0 0 auto;
  height:calc(var(--row) * var(--k, 1));
  width:calc(var(--row) * var(--k, 1) * var(--ar));
  max-width:100%;
  overflow:hidden;
  background:var(--bg-deep);
}
.shot img,
.shot video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1), opacity .5s ease;
  opacity:0;
}
.shot img.is-loaded,
.shot video.is-loaded{ opacity:1; }
.shot:hover img,
.shot:hover video{ transform:scale(1.04); }

/* Kennzeichnung für Filme und GIFs in der Strecke */
.shot-tag{
  position:absolute; top:6px; left:6px;
  z-index:2;
  font-family:var(--font-display);
  font-size:9px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--neon);
  background:rgba(14,14,16,.55);
  padding:2px 5px;
  pointer-events:none;
}
.shot-film{ cursor:default; }
.shot.is-hidden{ display:none; }

.show-all{
  flex:0 0 auto;
  align-self:flex-end;
  height:calc(var(--row) * .95);
  width:calc(var(--row) * .95);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:7px;
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--neon);
  font-family:var(--font-display);
  text-transform:uppercase;
}
.sa-disc{
  position:relative;
  width:calc(var(--row) * .46);
  height:calc(var(--row) * .46);
  display:flex; align-items:center; justify-content:center;
  border:1px solid currentColor;
  border-radius:50%;
  transition:box-shadow .35s ease, transform .35s ease;
}
.sa-disc::after{
  content:"";
  position:absolute; inset:-6px;
  border:1px solid currentColor;
  border-radius:50%;
  opacity:0;
  transition:opacity .35s ease, transform .35s ease;
  transform:scale(.85);
}
.sa-disc img, .sa-disc svg{
  width:62%; height:62%;
  color:currentColor;
  overflow:visible;
}

/* ---------- lodernde Flammen über der Kamera --------------------------- */

.bc-flame{
  transform-box:fill-box;
  transform-origin:50% 100%;
  will-change:transform, opacity;
  animation:lodern .9s ease-in-out infinite alternate;
}
.bc-a{ fill:#ff5200; opacity:.92; }
.bc-b{ fill:#ff8400; opacity:.88; }
.bc-c{ fill:#ffab00; opacity:.92; }
.bc-core{ fill:#fff2a0; }
.bc-embers{ fill:#ffe14d; opacity:.9; }

/* jede Zunge mit eigenem Takt, damit sich das Züngeln nie wiederholt */
.bc-fire .bc-flame:nth-of-type(1){ animation-duration:1.07s; animation-delay:-.31s; }
.bc-fire .bc-flame:nth-of-type(2){ animation-duration:.74s;  animation-delay:-.62s; }
.bc-fire .bc-flame:nth-of-type(3){ animation-duration:.93s;  animation-delay:-.11s; }
.bc-fire .bc-flame:nth-of-type(4){ animation-duration:.66s;  animation-delay:-.47s; }
.bc-fire .bc-flame:nth-of-type(5){ animation-duration:1.13s; animation-delay:-.78s; }
.bc-fire .bc-flame:nth-of-type(6){ animation-duration:.81s;  animation-delay:-.05s; }
.bc-fire .bc-flame:nth-of-type(7){ animation-duration:.99s;  animation-delay:-.55s; }
.bc-fire .bc-flame:nth-of-type(8){ animation-duration:.71s;  animation-delay:-.24s; }
.bc-fire .bc-flame:nth-of-type(9){ animation-duration:1.02s; animation-delay:-.69s; }
.bc-fire .bc-flame:nth-of-type(10){ animation-duration:.58s; animation-delay:-.18s; }
.bc-fire .bc-flame:nth-of-type(11){ animation-duration:.64s; animation-delay:-.42s; }
.bc-fire .bc-flame:nth-of-type(12){ animation-duration:.55s; animation-delay:-.08s; }
.bc-fire .bc-flame:nth-of-type(13){ animation-duration:.69s; animation-delay:-.6s; }

@keyframes lodern{
  0%   { transform:scale(.94, .78) translateX(-.5px); }
  50%  { transform:scale(1.03, 1.06) translateX(.4px); }
  100% { transform:scale(.97, 1.34) translateX(-.2px); }
}

/* beim Darüberfahren brennt es kräftiger */
.show-all:hover .bc-flame,
.show-all:focus-visible .bc-flame{ animation-duration:.42s; }
.show-all:hover .bc-fire,
.show-all:focus-visible .bc-fire{ filter:drop-shadow(0 0 6px rgba(255,140,0,.75)); }

.show-all:hover .sa-disc,
.show-all:focus-visible .sa-disc{
  box-shadow:0 0 22px rgba(228,255,0,.45);
  transform:scale(1.06);
}
.show-all:hover .sa-disc::after{ opacity:.55; transform:scale(1); }
.show-all.is-busy .sa-disc{ animation:flare .5s ease-out 1; }
@keyframes flare{
  0%   { box-shadow:0 0 0 rgba(255,140,0,0); }
  40%  { box-shadow:0 0 34px rgba(255,120,0,.85); }
  100% { box-shadow:0 0 0 rgba(255,140,0,0); }
}

.sa-label{
  font-size:11px; font-weight:700; letter-spacing:.11em;
  text-shadow:0 0 12px rgba(228,255,0,.3);
  white-space:nowrap;
}

/* ---------- Portfolio: zweispaltiges Masonry ---------------------------- */

/* Sechsspaltiges Raster. Jedes Bild belegt zwei oder drei Spalten,
   Reihen sind oben bündig, die Unterkanten bleiben unregelmäßig. */
.masonry{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:clamp(44px, 5.5vw, 96px) clamp(12px, 1.8vw, 26px);
  align-items:start;
  margin:0 0 60px;
}
.mspacer{ grid-column:span 1; }

.mshot{
  position:relative;
  display:block;
  grid-column:span var(--span, 3);
  width:100%;
  aspect-ratio:var(--ar);
  overflow:hidden;
  background:var(--bg-deep);
}
.mshot img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .6s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.mshot img.is-loaded{ opacity:1; }
.mshot:hover img{ transform:scale(1.025); }

/* ---------- Intro ------------------------------------------------------- */

.intro{
  position:relative;
  height:100svh; min-height:520px;
  overflow:hidden;
  background:var(--bg-deep);
}
/* Die drei Ebenen wandern beim Scrollen unterschiedlich schnell.
   Das Bild ist höher als der Ausschnitt, damit unten keine Lücke entsteht. */
.intro-img{
  position:absolute; top:0; left:0; right:0;
  height:150%;
  will-change:transform;
}
.intro-img img{
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.1s ease;
}
.intro-img img.is-loaded{ opacity:1; }
.intro-veil{
  position:absolute; inset:clamp(28px, 6vh, 78px) clamp(28px, 6vw, 96px);
  background:rgba(155,135,206,.30);
  backdrop-filter:saturate(1.1);
  pointer-events:none;
  will-change:transform;
}
.intro-inner{ will-change:transform, opacity; }
.intro-inner{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:0 clamp(28px, 6vw, 96px);
  pointer-events:none;
}
.intro-name{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(30px, 7.4vw, 108px);
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  margin:0;
  text-align:center;
  /* garantiert Kontrast, egal wie hell oder dunkel das Foto ist */
  mix-blend-mode:difference;
  white-space:nowrap;
}
.intro-name span{
  display:inline-block;
  opacity:0;
  transform:translateY(.18em);
  animation:introIn .9s cubic-bezier(.2,.7,.3,1) forwards;
}
.intro-name .sp{ width:.42em; animation:none; opacity:1; }
@keyframes introIn{ to{ opacity:1; transform:none; } }

.intro-scroll{
  position:absolute; left:50%; bottom:clamp(34px, 7vh, 84px);
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color:#fff;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));
  animation:bob 2.6s ease-in-out infinite;
}
.intro-cam{
  display:block;
  width:clamp(46px, 6vw, 74px);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.intro-cam svg, .intro-cam img{ width:100%; height:auto; overflow:visible; }
.intro-scroll:hover .intro-cam{ transform:scale(1.12); }
.intro-scroll:hover .bc-flame{ animation-duration:.4s; }
.intro-scroll .line{ width:1px; height:clamp(26px, 4vh, 40px); background:currentColor; opacity:.75; }

@keyframes bob{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%    { transform:translateX(-50%) translateY(7px); }
}

/* Auf der Startseite bleibt der Kopf zunächst weg und kommt erst,
   wenn das Intro weitgehend weggescrollt ist. */
body.page-intro .site-header{
  opacity:0;
  transform:translateY(-16px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
body.page-intro .site-header:not(.is-visible) > *{ pointer-events:none; }
body.page-intro .site-header.is-visible{ opacity:1; transform:none; }

/* ---------- Lightbox ---------------------------------------------------- */

.lightbox{
  position:fixed; inset:0; z-index:200;
  background:var(--overlay);
  display:none;
  align-items:center; justify-content:center;
}
.lightbox.is-open{ display:flex; }
.lightbox figure{ margin:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:56px 72px; }
.lightbox img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  user-select:none;
}
.lb-btn{
  position:absolute; top:0; bottom:0;
  width:22%; min-width:64px;
  background:none; border:0; cursor:pointer;
  color:#fff; font-size:34px; line-height:1;
  opacity:.55; transition:opacity .2s;
  font-family:var(--font-display);
}
.lb-btn:hover{ opacity:1; }
.lb-prev{ left:0; }
.lb-next{ right:0; }
.lb-close{
  position:absolute; top:14px; right:20px;
  width:auto; height:auto; bottom:auto;
  font-size:30px; padding:8px 12px;
}
.lb-count{
  position:absolute; bottom:16px; left:0; right:0;
  text-align:center; color:#fff; opacity:.6;
  font-family:var(--font-display); letter-spacing:.16em; font-size:13px;
}
.lb-caption{
  position:absolute; top:18px; left:24px;
  color:#fff; opacity:.65;
  font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.14em; font-size:13px;
}

/* ---------- Textseiten -------------------------------------------------- */

.page{ max-width:760px; }
.page h1{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(30px,4vw,52px); margin:0 0 20px;
}
.page h2{ font-family:var(--font-display); text-transform:uppercase; font-size:22px; margin:36px 0 8px; }
.page a{ color:var(--accent); }
.page a:hover{ text-decoration:underline; }

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

.site-footer{
  border-top:1px solid rgba(20,18,31,.22);
  margin:0 32px;
  padding:22px 0 46px;
  display:flex; flex-wrap:wrap; gap:8px 28px;
  font-size:14px; color:var(--ink-soft);
}
.site-footer a:hover{ color:var(--accent); }
.site-footer .spacer{ margin-left:auto; }

/* ---------- Mobil ------------------------------------------------------- */

@media (max-width:900px){
  :root{ --row:clamp(84px, 22vw, 130px); --gap:7px; --header-h:104px; }
  /* Auf dem Handy scrollt der Header mit weg, sonst liegt er auf den Bildern */
  .site-header{ position:absolute; padding:16px 18px 12px; align-items:center; }
  /* Auf der Startseite folgt der Kopf mit, sonst wäre er nach dem
     Einblenden sofort wieder aus dem Bild gescrollt. */
  body.page-intro .site-header{ position:fixed; }

  .nav-toggle{ display:flex; }
  /* Logo bleibt über dem geöffneten Menü sichtbar */
  .logo{ position:relative; z-index:2; }

  /* Navigation wird zum Vollbild-Menü hinter dem Burger */
  .site-nav{
    position:fixed; inset:0;
    z-index:1;
    background:var(--bg);
    display:flex; flex-direction:column;
    justify-content:center; align-items:flex-start;
    gap:2px;
    padding:0 26px;
    max-width:none;
    transform:translateY(-100%);
    opacity:0;
    visibility:hidden;
    transition:transform .38s cubic-bezier(.3,.8,.3,1), opacity .28s ease, visibility .38s;
  }
  .site-nav.is-open{ transform:none; opacity:1; visibility:visible; }
  .site-nav a{
    font-size:clamp(30px, 9vw, 46px);
    line-height:1.32;
  }
  main{ padding:24px 18px 90px; }
  .site-footer{ margin:0 18px; }
  .lightbox figure{ padding:44px 10px; }
  .lb-btn{ width:30%; }

  .series{ flex-direction:column; gap:10px; }
  .series-label{ flex:0 0 auto; width:100%; }
  .series-label-inner{
    position:static; transform:none; text-align:left;
  }
  .grid{ max-width:100%; }
  .intro-name{ letter-spacing:.1em; }

  .masonry{ grid-template-columns:1fr; gap:clamp(26px,6vw,48px); }
  .mshot{ grid-column:1 / -1; }
  .mspacer{ display:none; }
}

@media (max-width:560px){
  .site-nav a{ font-size:16px; }
  .intro-veil{ inset:16px; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}