/* ============================================================
   STUDIO FUCHS — Kategorie- & Shoot-Seiten
   ============================================================ */
:root{
  --white:#ffffff;
  --anthracite:#31302d;
  --anthracite-soft:#6a6862;
  --c1:#0400f5;                 /* Verlauf, dunkles Ende — auch Volltonakzent */
  --c2:#ffe8c7;                 /* Verlauf, helles Ende */
  --akzent:var(--c1);           /* alle Kleinteile: Linien, Hover, Marker */
  --brass:var(--akzent);        /* Altname, damit bestehende Regeln weiterlaufen */
  --grund:#faf8f4;              /* warmes Elfenbein */
  --tint:0;                     /* Stärke der getönten Fläche, 0 = aus */
  --hair:rgba(49,48,45,0.14);
  --headh:64px;                 /* Header-Höhe */
  --shooth:calc(100svh - var(--headh)); /* Startwert — pages.js misst nach und ersetzt ihn */
  --leiste:46px;                /* dauerhafte Leiste unter der Serie */
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--grund);
  color:var(--anthracite);
  font-family:'DM Sans',sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--anthracite); color:var(--white);}

/* feines Korn */
.grain{
  position:fixed; inset:-50%; width:200%; height:200%;
  pointer-events:none; z-index:90; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

header{
  position:fixed; top:0; left:0; right:0; z-index:80; height:var(--headh);
  display:flex; justify-content:space-between; align-items:center;
  padding:0 clamp(24px,5vw,64px);
  pointer-events:none;
}
/* Solider weißer Header — Menü immer klar lesbar */
header{background:var(--grund); border-bottom:1px solid var(--hair);}
header a{pointer-events:auto;}
.wordmark{
  display:inline-flex; align-items:center; gap:12px;
  font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:clamp(17px,2vw,21px); letter-spacing:.18em; text-transform:uppercase;
  color:var(--anthracite); text-decoration:none;
}
.wordmark img{height:34px; width:auto; display:block; opacity:.92; transition:opacity .35s ease;}
.wordmark:hover img{opacity:1;}
.wordmark span{font-style:italic; font-weight:300; text-transform:none; letter-spacing:.04em; color:var(--anthracite-soft); font-size:.82em;}
@media (max-width:520px){ .wordmark span{display:none;} }
header nav{display:flex; gap:34px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; pointer-events:auto;}
header nav a{color:var(--anthracite); opacity:.6; text-decoration:none; transition:opacity .3s, color .3s;}
header nav a:hover, header nav a.active{opacity:1;}
header nav a:hover{color:var(--brass);}

/* ——— Mobile-Menü ——— */
.menu-btn{
  display:none; pointer-events:auto;
  background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--anthracite);
  padding:6px 0;
}
.menu-overlay{
  position:fixed; inset:0; z-index:200; background:var(--grund);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  opacity:0; pointer-events:none; transition:opacity .45s ease;
}
.menu-overlay.offen{opacity:1; pointer-events:auto;}
.menu-overlay .schliessen{
  position:absolute; top:30px; right:24px;
  background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--anthracite-soft);
}
.menu-overlay nav{display:flex; flex-direction:column; gap:10px; text-align:center;}
.menu-overlay nav a{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
  font-size:clamp(1.9rem,8vw,2.6rem); color:var(--anthracite); text-decoration:none;
  opacity:0; transform:translateY(16px);
  transition:opacity .5s ease, transform .5s ease;
}
.menu-overlay.offen nav a{opacity:1; transform:translateY(0);}
.menu-overlay.offen nav a:nth-child(1){transition-delay:.08s;}
.menu-overlay.offen nav a:nth-child(2){transition-delay:.15s;}
.menu-overlay.offen nav a:nth-child(3){transition-delay:.22s;}
.menu-overlay.offen nav a:nth-child(4){transition-delay:.29s;}
.menu-overlay.offen nav a:nth-child(5){transition-delay:.36s;}
.menu-overlay nav a.aktiv{color:var(--brass);}
.menu-overlay nav a:hover{color:var(--brass);}
.menu-overlay .menu-meta a:hover{color:var(--brass);}
.menu-overlay .menu-meta{
  position:absolute; bottom:34px; left:0; right:0;
  display:flex; justify-content:center; gap:22px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
}
.menu-overlay .menu-meta a{color:var(--anthracite-soft); text-decoration:none;}
@media (max-width:860px){
  header nav{display:none;}
  .menu-btn{display:block;}
}

/* ——— Verlaufsschrift: am Fenster verankert, kühl nach hell ——— */
.verlauf, .cat-head h1, .titel-name h1{
  background-image:linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);
  background-attachment:fixed; background-size:100vw 100vh;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  padding-bottom:.06em;   /* Unterlängen nicht abschneiden */
}
/* Fallback: wo background-clip:text fehlt, bleibt die Schrift lesbar */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .verlauf, .cat-head h1, .titel-name h1{color:var(--anthracite); background-image:none;}
}

/* ——— optionale getönte Fläche (zwei Lichter) ——— */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:var(--tint);
  background:
    radial-gradient(120vmax 90vmax at 4% -4%,  var(--c1) 0%, transparent 60%),
    radial-gradient(100vmax 85vmax at 98% 104%, var(--c2) 0%, transparent 58%);
}
/* Inhalt über die Tönung heben — Kopfzeile, Korn und Menü sind bereits
   fixiert und liegen ohnehin darüber; ihre Position darf hier NICHT
   angefasst werden, sonst scrollt die Kopfzeile mit. */
main{position:relative; z-index:2;}

/* ——— Metadaten-Spalte (Model, Location, Kamera, Objektiv, Film) ——— */
.meta{
  border-left:1px solid var(--hair); padding-left:clamp(18px,2vw,28px);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--anthracite-soft); line-height:2.4;
}
.meta div + div{margin-top:11px;}
.meta b{display:block; font-weight:400; color:var(--anthracite); letter-spacing:.16em;}
.meta a{color:inherit; text-decoration:none; border-bottom:1px solid var(--akzent);}
.meta .film{color:var(--akzent);}
@media (max-width:1040px){
  .meta{border-left:none; border-top:1px solid var(--hair); padding:24px 0 0;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px;}
  .meta div + div{margin-top:0;}
}

/* ——— Kategorie-Kopf ——— */
.cat-head{
  padding:clamp(130px,22vh,220px) clamp(24px,5vw,64px) clamp(40px,7vh,80px);
  max-width:1500px; margin:0 auto;
}
.cat-head .kicker{
  font-size:11px; letter-spacing:.4em; text-transform:uppercase;
  color:var(--anthracite-soft); margin-bottom:16px;
}
.cat-head h1{
  font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:clamp(2.8rem,7vw,5.6rem); line-height:1.04;
}
.cat-head h1 em{font-style:italic; font-weight:300;}
.cat-head .intro{
  margin-top:26px; max-width:52ch; font-size:15px; line-height:2; color:var(--anthracite-soft);
}

/* ——— Grid: 1 Spalte mobil, 3 Spalten Desktop ——— */
.shoot-grid{
  display:grid; grid-template-columns:1fr; gap:2px;
  max-width:1500px; margin:0 auto;
  padding:0 clamp(0px,0vw,0px) clamp(80px,12vh,140px);
}
@media (min-width:700px){
  .shoot-grid{grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,28px); padding-left:clamp(24px,5vw,64px); padding-right:clamp(24px,5vw,64px);}
}
@media (min-width:1080px){
  .shoot-grid{grid-template-columns:repeat(3,1fr);}
}

.shoot-card{
  display:block; text-decoration:none; color:inherit; position:relative;
  opacity:0; transform:translateY(28px);
  transition:opacity 1s cubic-bezier(.22,.9,.3,1), transform 1s cubic-bezier(.22,.9,.3,1);
}
.shoot-card.vis{opacity:1; transform:translateY(0);}
.shoot-card .frame{
  position:relative; overflow:hidden; aspect-ratio:3/4; background:rgba(49,48,45,.07);
}
.shoot-card img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.9) contrast(1.01);
  transform:scale(1.001);
  transition:transform 1.4s cubic-bezier(.22,.9,.3,1), filter .8s ease;
}
.shoot-card:hover img{transform:scale(1.045); filter:saturate(1) contrast(1.02);}
.shoot-card .label{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:14px 4px 30px;
}
@media (max-width:699px){
  .shoot-card .label{padding:14px clamp(24px,5vw,64px) 34px;}
}
.shoot-card .title{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
  font-size:1.35rem; letter-spacing:.02em;
}
.shoot-card .meta{
  font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--anthracite-soft);
}

/* ============================================================
   SHOOT-SEITE — Titelseite · Kontaktbogen · Serie (seitwärts)
   ============================================================ */
.shoot-scroll{
  height:var(--shooth); margin-top:var(--headh);
  overflow-y:auto; overflow-x:hidden;
  scroll-snap-type:y mandatory; scroll-behavior:smooth; scrollbar-width:none;
}
.shoot-scroll::-webkit-scrollbar{display:none;}

/* ——— 1 · Titelseite ——— */
.shoot-titel, .shoot-bogen{
  height:var(--shooth); scroll-snap-align:start;
  position:relative; display:flex; flex-direction:column;
  overflow:hidden;
}
.titel-raster{
  flex:1; display:grid; grid-template-columns:1.1fr .8fr 210px;
  gap:clamp(28px,4.5vw,72px); align-items:end;
  padding:clamp(50px,9vh,110px) clamp(24px,5vw,64px) clamp(56px,8vh,90px);
  position:relative; max-width:1500px; margin:0 auto; width:100%;
}
.titel-nummer{
  position:absolute; top:clamp(20px,4vh,54px); right:clamp(24px,5vw,64px);
  font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(5rem,14vw,12rem); line-height:.8;
  color:var(--anthracite); opacity:.05; pointer-events:none; user-select:none;
}
.titel-name .kicker{
  font-size:11px; letter-spacing:.4em; text-transform:uppercase;
  color:var(--anthracite-soft); margin-bottom:22px;
}
.titel-name h1{
  font-family:'Cormorant Garamond',serif; font-weight:300; font-style:italic;
  font-size:clamp(3rem,9vw,7rem); line-height:.94; letter-spacing:-.01em;
}
.titel-text{max-width:42ch; padding-bottom:6px;}
.titel-text p{font-size:14.5px; line-height:2.05; color:var(--anthracite-soft);}
.titel-text p + p{margin-top:1.1em;}
.titel-text em{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:1.14em; color:var(--anthracite);
}
.titel-text a{color:var(--anthracite); text-decoration:none; border-bottom:1px solid var(--akzent);}
.titel-text a:hover{color:var(--akzent);}
.meta-frei{margin-top:16px; padding-top:14px; border-top:1px solid var(--hair);}
@media (max-width:1040px){
  .titel-raster{grid-template-columns:1fr; align-items:start; gap:30px; padding-top:clamp(70px,11vh,120px);}
  .shoot-titel{height:auto; min-height:var(--shooth);}
}

/* ——— 2 · Kontaktbogen ——— */
.bogen-inhalt{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(50px,9vh,110px) clamp(24px,5vw,64px) clamp(56px,8vh,90px);
  max-width:1500px; margin:0 auto; width:100%;
}
.bogen-kopf{margin-bottom:26px;}
.bogen-kopf .kicker{font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--anthracite-soft);}
.bogen{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(9px,1.3vw,18px);}
@media (max-width:900px){ .bogen{grid-template-columns:repeat(4,1fr);} }
@media (max-width:560px){ .bogen{grid-template-columns:repeat(3,1fr);} }
.kachel{
  position:relative; aspect-ratio:3/4; padding:0; border:none; cursor:pointer;
  background:rgba(49,48,45,.07); overflow:hidden;
  outline:1px solid transparent; outline-offset:3px;
  transition:outline-color .35s ease, opacity .35s ease;
}
.kachel img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.9) contrast(1.01);
  transition:transform 1.2s cubic-bezier(.22,.9,.3,1);
}
.kachel::after{
  content:attr(data-nr); position:absolute; bottom:-17px; left:0;
  font-size:8.5px; letter-spacing:.18em; color:var(--anthracite-soft);
}
.bogen:hover .kachel{opacity:.45;}
.bogen .kachel:hover{opacity:1; outline-color:var(--akzent);}
.bogen .kachel:hover img{transform:scale(1.05);}
.bogen .kachel:focus-visible{outline:2px solid var(--akzent); opacity:1;}

/* ——— 3 · Serie, seitwärts ——— */
.shoot-serie{
  height:var(--shooth); scroll-snap-align:start; position:relative;
}
.serie-lauf{
  height:100%; display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scrollbar-width:none;   /* kein CSS-smooth: kollidiert mit scrollTo */
  overscroll-behavior-x:contain;
}
.serie-lauf::-webkit-scrollbar{display:none;}
.serie-lauf:focus{outline:none;}
.serie-lauf:focus-visible{outline:1px solid var(--akzent); outline-offset:-3px;}
.serie-bild{
  flex:0 0 100%; height:100%; scroll-snap-align:center; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(18px,3.5vh,44px) clamp(16px,4vw,56px) calc(var(--leiste) + 16px);
  position:relative;
}
.serie-bild img{
  max-width:100%; max-height:100%; min-height:0; min-width:0;
  width:auto; height:auto; object-fit:contain; display:block;
  filter:saturate(.94) contrast(1.01);
  opacity:0; transform:scale(.97);
  transition:opacity 1.1s cubic-bezier(.19,1,.22,1), transform 1.4s cubic-bezier(.19,1,.22,1);
  box-shadow:0 40px 90px -50px rgba(49,48,45,.35);
}
.serie-bild.vis img{opacity:1; transform:scale(1);}
/* dauerhafte Leiste: Zähler, Rechtliches, Zurück — immer sichtbar */
.serie-leiste{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  height:var(--leiste); padding:0 clamp(16px,4vw,56px);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  border-top:1px solid var(--hair);
  background:color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter:blur(12px) saturate(1.03);
  -webkit-backdrop-filter:blur(12px) saturate(1.03);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--anthracite-soft);
}
.serie-leiste a{color:inherit; text-decoration:none; transition:color .3s;}
.serie-leiste a:hover{color:var(--akzent);}
.serie-leiste .mitte{display:flex; align-items:center; gap:clamp(12px,2vw,24px); flex-wrap:nowrap; overflow:hidden;}
.serie-zaehler{font-variant-numeric:tabular-nums; white-space:nowrap; flex:0 0 auto;}
@media (max-width:900px){ .serie-leiste .marke{display:none;} }
@media (max-width:640px){
  .serie-leiste{font-size:9px; letter-spacing:.12em; gap:10px;}
  .serie-leiste .mitte{gap:12px;}
}

.zum-bogen{
  position:absolute; top:clamp(14px,2.6vh,28px); left:50%; transform:translateX(-50%);
  z-index:3; background:color-mix(in srgb, var(--grund) 86%, transparent);
  border:1px solid var(--hair); cursor:pointer;
  font-family:inherit; font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--anthracite-soft); padding:9px 16px;
  transition:color .3s, border-color .3s;
}
.zum-bogen:hover{color:var(--akzent); border-color:var(--akzent);}
.serie-zurueck{flex:0 0 auto; opacity:.75;}

/* Abspann — volle Folie, damit nie zwei Leisten gleichzeitig zu sehen sind */
.shoot-fuss{
  height:var(--shooth); scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:26px; text-align:center; background:var(--grund);
  padding:clamp(40px,8vh,90px) clamp(24px,5vw,64px);
}
.fuss-marke{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
  font-size:clamp(1.3rem,3vw,1.9rem); color:var(--anthracite);
}
.fuss-links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(16px,3vw,32px);
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--anthracite-soft);
}
.fuss-links a{color:inherit; text-decoration:none; transition:color .3s;}
.fuss-links a:hover{color:var(--akzent);}
.fuss-zurueck{margin-bottom:8px;}

/* Scrollhinweis */
.scroll-pfeil{
  position:absolute; bottom:clamp(18px,3.4vh,34px); left:50%; transform:translateX(-50%);
  color:var(--anthracite-soft); font-size:15px;
  animation:pfeil 2.6s ease-in-out infinite;
}
@keyframes pfeil{ 0%,100%{transform:translate(-50%,0); opacity:.45;} 50%{transform:translate(-50%,7px); opacity:.9;} }

.backlink{
  display:inline-flex; align-items:center; gap:12px;
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--anthracite); text-decoration:none; opacity:.6; transition:opacity .3s, color .3s;
}
.backlink:hover{opacity:1; color:var(--akzent);}

footer{
  border-top:1px solid var(--hair);
  padding:44px clamp(24px,5vw,64px);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--anthracite-soft);
}
footer a{color:inherit; text-decoration:none; cursor:pointer;}
footer a:hover{color:var(--brass);}
.foot-col{display:flex; flex-direction:column; gap:12px;}
@media (min-width:700px){ .foot-col{flex-direction:row; gap:28px;} }

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  .shoot-card,.serie-bild img{opacity:1 !important; transform:none !important;}
}


/* ——— Buchstaben-Roll-Hover ——— */
.tflip{display:inline-block;}
.tflip .l{
  display:inline-block; overflow:hidden; vertical-align:top; position:relative;
}
.tflip .l span{
  display:block;
  transition:transform .8s cubic-bezier(.19,1,.22,1);
  transition-delay:calc(var(--i) * 14ms);
}
.tflip .l span:last-child{
  position:absolute; left:0; top:100%;
  color:var(--brass);
}
.tflip:hover .l span{transform:translateY(-100%);}
.tflip{transition:color .3s ease;}
.tflip:hover{color:var(--brass);}
@media (prefers-reduced-motion: reduce){
  .tflip .l span{transition:none;}
}