/*
Theme Name: Fahrner-Tutsek Photography
Description: Portfolio-Theme fuer Eva-Maria Fahrner-Tutsek. Layout nach Prototyp v34 (xspace GmbH).
Author: xspace GmbH / Thomas
Version: 1.1
*/

/* Noto Sans lokal (DSGVO). Font-Dateien nach /fonts/ legen - siehe ANLEITUNG.md.
   Fehlen die Dateien, greift der Fallback-Stack automatisch. */
@font-face{font-family:'Noto Sans';src:url('fonts/noto-sans-v39-latin-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Noto Sans';src:url('fonts/noto-sans-v39-latin-700.woff2') format('woff2');font-weight:700;font-display:swap}

/* ============================================================
   ATS Photography – Prototyp v1
   Wrapper & 12-Spalten-Grid: orientiert an atstiftung.de
   ============================================================ */
:root{
  --wrap: 1360px;          /* Content-Wrapper (Grid: "Havana…" bis "Contact") */
  --pad: 24px;
  --col-gap: 20px;         /* Gutter 12-Spalten-Grid */
  --c-text: #1d1d1b;
  --c-muted: #555;
  --c-line: #1d1d1b;
  --c-footer: #000;
  --fade: 1.4s;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Noto Sans',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  color:var(--c-text); background:#fff;
  font-size:15px; line-height:1.5;
  display:flex; flex-direction:column; min-height:100vh;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad)}

/* --- 12-Spalten-Grid (Basis für WP-Umsetzung) --- */
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--col-gap)}
.c12{grid-column:span 12}.c8{grid-column:span 8}.c6{grid-column:span 6}
.c4{grid-column:span 4}.c3{grid-column:span 3}.c2{grid-column:span 2}

/* --- Header --- */
header.wrap{padding-top:60px}
.nav{display:flex; align-items:flex-end; gap:0}
.brand{
  font-size:24px; font-weight:400; letter-spacing:.01em;
  border-bottom:1px solid var(--c-line);
  padding:0 40px 10px 0; white-space:nowrap;
}
.nav-main{display:flex; align-items:flex-end; flex:1}
.nav-item{
  font-size:13.5px; font-weight:400;
  border-bottom:1px solid var(--c-line);
  padding:0 28px 12px 14px; cursor:pointer;
  margin-left:14px; /* Luecke zwischen den Linien-Segmenten (wie Vorlage) */
}
.nav-item:hover, .nav-item.active{font-weight:700}
/* Fix: Breite der Bold-Variante unsichtbar reservieren, damit beim
   Hover nichts springt (Laufweite regular vs. bold) */
.nav-item, .nav-contact, .proj-nav a{
  display:inline-flex; flex-direction:column; align-items:flex-start;
}
.proj-nav a{flex-direction:row; align-items:center}
.nav-item::after, .nav-contact::after{
  content:attr(data-text); font-weight:700; height:0;
  visibility:hidden; overflow:hidden; pointer-events:none;
}
.proj-nav a .lbl{display:inline-flex; flex-direction:column}
.proj-nav a .lbl::after{
  content:attr(data-text); font-weight:700; height:0;
  visibility:hidden; overflow:hidden;
}
.nav-spacer{flex:1; border-bottom:1px solid var(--c-line); align-self:stretch}
.nav-contact{
  font-size:13.5px; border-bottom:1px solid var(--c-line);
  padding:0 4px 12px 24px;
  margin-left:14px; /* Luecke vor Contact */
}
.nav-contact:hover{font-weight:700}

main{flex:1}

/* --- Startseite: Crossfade-Slideshow --- */
.hero{margin-top:26px; position:relative; width:100%;
  aspect-ratio: 1110/512; overflow:hidden; background:#f2f2f2;}
.hero .slide{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:none;
}
.hero .slide.on{display:block}
.caption{font-size:11px; line-height:1.45; color:var(--c-text); margin-top:12px; max-width:420px}

/* --- Projektseite --- */
.page-title{font-size:24px; font-weight:400; margin:38px 0 30px}
.works{display:flex; flex-wrap:wrap; gap:40px 56px; justify-content:flex-start}
.work{display:flex; flex-direction:column; flex:0 0 auto; min-width:0; align-items:flex-start}
/* Safari: img nicht auf figure-Breite strecken (Caption kann breiter sein als ein
   Hochformat-Bild) - Proportionen bleiben immer erhalten */
.work img{max-width:none; aspect-ratio:auto}
/* Höhe skaliert mit Fensterbreite: Panorama + Hochformat passen so
   immer gemeinsam in die erste Zeile, statt bei schmaleren Fenstern umzubrechen. */
.work img{height:clamp(200px, 22vw, 360px); width:auto; cursor:pointer}
.work .caption{margin-top:14px}
.proj-nav{
  border-top:1px solid var(--c-line);
  margin-top:56px; padding:20px 0 34px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:13.5px;
}
.proj-nav a{display:flex; align-items:center; gap:14px}
.proj-nav a:hover{font-weight:700}
.arrow{line-height:0}
.arrow .chev{width:13px; height:auto}
.proj-nav a:hover path{stroke-width:1.9px}

/* --- Lightbox --- */
.lightbox{
  position:fixed; inset:0; background:#fff; z-index:100;
  display:none; flex-direction:column; padding:28px 90px;
}
.lightbox.open{display:flex}
.lightbox:focus{outline:none}
/* Bild + Caption bilden eine vertikal zentrierte Einheit: die Caption sitzt
   immer direkt unter dem Bild. Sie ist volle Stage-Breite und linksbündig -
   ihre x-Position (linker Seitenrand) ist damit bei Quer- und Hochformat identisch. */
.lb-stage{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:0}
/* Die Bildhöhe wird per JS EINHEITLICH für alle Bilder des Projekts gesetzt
   (kleinster gemeinsamer Nenner aus Fensterhöhe und -breite). Dadurch ist jedes
   Bild exakt gleich hoch: das Ensemble sitzt vertikal mittig und die Caption
   steht bei jedem Bild an derselben Stelle. */
.lb-stage img{width:auto; height:auto}
/* KEINE max-width-Kappung: feste Höhe + gekappte Breite würde das Bild
   verzerren. Die JS-Höhe ist so berechnet, dass die Breite immer passt. */
.lb-bottom{display:flex; align-items:flex-start; width:100%; margin-top:18px; gap:16px}
.lb-caption{flex:1; font-size:11px; line-height:1.45; text-align:left; white-space:pre-line}
/* Mobile Blätter-Pfeile in der Caption-Zeile (Desktop: ausgeblendet) */
.lb-btn-m{display:none; background:none; border:none; cursor:pointer;
  color:var(--c-text); padding:2px 0; line-height:0}
.lb-btn-m .chev{width:17px; height:auto}
.lb-btn-m:hover path{stroke-width:1.9px}
/* Nur ein Bild im Projekt: alle Pfeile aus */
.lightbox.single .lb-prev, .lightbox.single .lb-next,
.lightbox.single .lb-btn-m{display:none !important}
.lb-btn{
  position:absolute; background:none; border:none; cursor:pointer;
  color:var(--c-text); padding:10px; line-height:0;
}
.chev, .xic{display:block}
.chev path, .xic path{stroke-width:1.25px}
.lb-btn .chev{width:30px; height:auto}
.lb-close{top:26px; right:30px}
.lb-close .xic{width:34px; height:34px}
.lb-prev{left:26px; top:50%; transform:translateY(-50%)}
.lb-next{right:26px; top:50%; transform:translateY(-50%)}
.lb-btn:hover path{stroke-width:1.9px}
.lb-btn:focus-visible{outline:2px solid var(--c-text); outline-offset:2px}

/* --- Footer --- */
footer{background:var(--c-footer); color:#fff; margin-top:70px}
.foot{
  display:grid; grid-template-columns:2fr 2fr 3fr 2fr;
  gap:var(--col-gap); padding:44px var(--pad) 60px;
  max-width:var(--wrap); margin:0 auto; font-size:13px;
}
.foot a{display:block; margin-bottom:10px}
.foot a:hover{text-decoration:underline}
.insta{display:flex; align-items:flex-start; gap:12px; justify-content:flex-end}
.insta svg{margin-top:-4px}
.insta a{line-height:1.5}
.insta svg{width:30px; height:30px}
.foot-contact{text-align:left}


/* --- Selected Works: Liste --- */
.works-list{margin-top:6px; font-size:13.5px; width:100%}
.wl-head{display:grid; grid-template-columns:90px 1fr; gap:20px;
  font-weight:700; padding:10px 0; }
.wl-row{display:grid; grid-template-columns:90px 1fr; gap:20px;
  padding:9px 0; border-top:1px solid var(--c-line); cursor:pointer;}
.wl-row:last-child{border-bottom:1px solid var(--c-line)}
.wl-row:hover{font-weight:700}
/* Hover: Linie ÜBER und UNTER der Zeile verstärken (1px -> 2px).
   Padding wird um 1px reduziert, damit nichts springt. */
.wl-row{transition:border-color .12s}
.wl-row:hover{border-top-width:2px; padding-top:8px}
.wl-row:hover + .wl-row{border-top-width:2px; padding-top:8px}
.wl-row:last-child{border-bottom:1px solid var(--c-line)}
.wl-row:last-child:hover{border-bottom-width:2px; padding-bottom:8px}
/* Erste Zeile: Linie darüber gehört der Zeile selbst - abgedeckt.
   Zeile unter der gehoverten: deren border-top ist die "Linie darunter". */
.wl-row:focus-visible{outline:2px solid var(--c-text); outline-offset:-2px}

/* --- Publications --- */
.pub-row{display:grid; grid-template-columns:3fr 3fr 5fr; gap:40px;
  padding:34px 0; border-top:1px solid #c9c9c9; align-items:start;}
.pub-row:last-child{border-bottom:1px solid #c9c9c9}
.pub-cover img{max-height:230px; width:auto}
.pub-info{font-size:13px; line-height:1.55}
.pub-info strong{display:block; margin-bottom:8px}
.pub-preview{display:grid; grid-template-columns:24px 1fr 24px; gap:14px; align-items:center}
.pub-preview img{max-height:210px; width:auto; margin:0 auto}
.pv-btn{background:none;border:none;cursor:pointer;color:var(--c-text);padding:4px;line-height:0}
.pv-btn .chev{width:15px; height:auto}
.pv-btn:hover path{stroke-width:1.9px}
.pub-placeholder{height:200px; width:150px; background:#f0f0f0; display:flex;
  align-items:center; justify-content:center; font-size:11px; color:#999; text-align:center; padding:10px}

/* --- Biography --- */
.bio{display:grid; grid-template-columns:200px minmax(0,460px); gap:40px; align-items:start}
.bio img{width:100%; height:auto}
.bio-text{font-size:13.5px; line-height:1.65}
.bio-text strong{font-weight:700}

@media (max-width:760px){
  .pub-row{grid-template-columns:1fr; gap:22px}
  /* Bücher und Leseproben auf Mittelachse; Textblock als Ganzes zentriert,
     der Text selbst bleibt darin linksbündig */
  .pub-cover img, .pub-placeholder{margin:0 auto}
  .pub-preview{max-width:420px; margin:0 auto; width:100%}
  .pub-info{width:fit-content; max-width:100%; margin:0 auto}
  .bio{grid-template-columns:1fr}
  .bio img{max-width:240px}
}


/* --- Rechtsseiten (Imprint etc.) --- */
.legal{max-width:720px; font-size:13.5px; line-height:1.65}
.legal h2{font-size:15px; font-weight:700; margin:28px 0 6px}
.legal p{margin-bottom:14px}
.legal a{text-decoration:underline}


/* --- Mobile Navigation (Burger) --- */
.burger{display:none; background:none; border:none; cursor:pointer;
  color:var(--c-text); padding:6px 0 6px 12px; line-height:0}
.burger svg{width:26px; height:auto; display:block}
.mobile-menu{display:none}


@media (max-width: 900px){
  .brand{font-size:19px; padding-right:20px}
  .nav-item{padding:0 14px 10px 8px; font-size:12.5px}
  .work img{height:clamp(170px, 22vw, 240px)}
  .lightbox{padding:20px 70px}
  .lb-btn .chev{width:24px}
  .lb-prev{left:16px}
  .lb-next{right:16px}
}
@media (max-width: 640px){
  header.wrap{padding-top:28px}
  /* Desktop-Nav ausblenden, Burger rechts oben */
  .nav{align-items:flex-end}
  .nav-main{display:none}
  .brand{flex:1; font-size:18px; padding-right:12px; border-bottom:1px solid var(--c-line)}
  .burger{display:block; border-bottom:1px solid var(--c-line); padding-bottom:12px; align-self:stretch}
  /* Aufklappendes Menü: alle Punkte gleichwertig, Contact als normaler Eintrag */
  .mobile-menu.open{display:block}
  .mobile-menu a{display:block; font-size:15px; padding:13px 0;
    border-bottom:1px solid #c9c9c9}
  .mobile-menu a.active{font-weight:700}
  .hero{aspect-ratio:4/3}
  .works{gap:28px}
  .work{width:100%}
  .work img{height:auto; width:100%}
  .foot{grid-template-columns:1fr 1fr; row-gap:30px}
  .foot-contact{text-align:left}
  .insta{justify-content:flex-start; align-items:flex-start}
  /* Icon-Oberkante optisch buendig mit "Imprint": gleicht den inneren
     SVG-Einzug (+Text-Zeilenabstand) aus. Feintuning: Wert anpassen. */
  .insta svg{margin-top:-4px}
  /* Bild randlos - volle Displaybreite; Blättern über die Pfeile
     in der Caption-Zeile darunter */
  .lightbox{padding:16px 0}
  .lb-prev, .lb-next{display:none}
  .lb-btn-m{display:block}
  .lb-bottom{padding:0 14px}
  .lb-close{top:16px; right:14px}
  .lb-close .xic{width:28px; height:28px}
}