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

/* 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-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Noto Sans';src:url('fonts/noto-sans-v39-latin-600.woff2') format('woff2');font-weight:600;font-display:swap}
/* Regular/Bold bleiben als Reserve eingebunden */
@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;
  --edge: 20px;            /* Abstand der durchlaufenden Linien zum Fensterrand */
  /* Ueberhang der Linien ueber den Content hinaus */
  --bleed: calc(max(0px, (100vw - 1360px)/2) + 24px - 20px);
  --col-gap: 20px;         /* Gutter 12-Spalten-Grid */
  --c-text: #1d1d1b;
  --c-muted: #555;
  --c-line: #1d1d1b;
  --c-footer: #000;
  --fade: 1.4s;
  --lb-top: 90px;          /* >>> Rand oben in der Vollbild-Ansicht (Bild + X) <<< */
  --pub-shift: 60px;       /* >>> Publications: mittlere Linie laenger, letzte beginnt spaeter <<< */
}
*{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; font-weight:300;
  display:flex; flex-direction:column; min-height:100vh;
}
img{display:block; max-width:100%; height:auto}
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; max-width:none;
  padding-left:var(--edge); padding-right:var(--edge)}
/* Name und Contact auf Grid-Position einruecken - ihre Unterstriche
   laufen dadurch bis kurz vor den Fensterrand (padding, NICHT margin:
   margin wuerde die Linie mitverschieben) */
.nav{display:flex; align-items:flex-end; gap:0}
.brand{
  font-size:24px; font-weight:300; letter-spacing:.01em;
  border-bottom:1px solid var(--c-line);
  padding:0 40px 10px var(--bleed); white-space:nowrap;
}
.nav-main{display:flex; align-items:flex-end; flex:1}
.nav-item{
  font-size:13.5px; font-weight:300;
  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:600}
/* 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:600; 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:600; 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; padding-right:calc(var(--bleed) + 4px);
  margin-left:14px; /* Luecke vor Contact */
}
.nav-contact:hover{font-weight:600}

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:300; 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:600}
.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:var(--lb-top) 90px 28px;
}
.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:flex-start; 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}
/* X oberkantenbuendig mit der Bildoberkante; folgt automatisch --lb-top
   (10px Button-Innenabstand herausgerechnet) */
.lb-close{top:calc(var(--lb-top) - 10px); 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:56px}
.foot{
  display:grid; grid-template-columns:auto auto auto 1fr;
  gap:0 52px; padding:26px var(--pad) 30px;
  max-width:var(--wrap); margin:0 auto; font-size:13px;
  align-items:start;
}
.foot a{display:block; margin-bottom:9px}
.foot-col{white-space:nowrap}
/* Icon-Spalte rechts: zwei Zeilen mit Symbol + Text, Symbolgroessen wie bisher */
.foot-icons{justify-self:end; display:flex; flex-direction:column; gap:9px}
.ic-row{display:flex !important; align-items:center; gap:12px; margin:0 !important}
.insta-ic{width:32px; height:32px; flex:0 0 32px}
.cam-ic{width:26px; height:19px; flex:0 0 34px}
.ft-login{text-decoration:underline}
.foot a:hover{text-decoration:underline}



.insta svg{width:30px; height:30px}



/* --- 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:600; padding:10px 0; }
.wl-row{display:grid; grid-template-columns:90px 1fr; gap:20px;
  padding:9px var(--bleed);
  /* Linien beidseitig bis kurz vor den Fensterrand; Text bleibt im Grid,
     weil margin und padding sich exakt aufheben */
  margin-left:calc(-1 * var(--bleed)); margin-right:calc(-1 * var(--bleed)); 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:600}
/* 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:3.5fr 2.5fr 5fr; gap:36px;
  padding:0 0 22px; align-items:stretch}
/* Trennlinien sitzen auf den Spalten -> Segmente mit Luecken wie im Header;
   aeussere Spalten ragen bis kurz vor den Fensterrand. */
.pub-row > *{border-top:1px solid var(--c-line); padding-top:22px}
.pub-row:first-of-type > *{border-top:0; padding-top:0} /* keine Linie unter "Publications" */
.pub-row:last-child > *{border-bottom:1px solid var(--c-line); padding-bottom:22px}
.pub-row > *:first-child{margin-left:calc(-1 * var(--bleed)); padding-left:var(--bleed)}
.pub-row > *:last-child{margin-right:calc(-1 * var(--bleed)); padding-right:var(--bleed)}
/* Inhalte in den (gleich hohen) Spalten vertikal zentrieren */
.pub-cover{display:flex; flex-direction:column; justify-content:center; align-items:flex-start}
.pub-info{display:flex; flex-direction:column; justify-content:center}
.pub-preview{align-content:center; position:relative}
/* Mittlere Linie um --pub-shift verlaengern (Inhalt bleibt an Ort) */
.pub-info{margin-right:calc(-1 * var(--pub-shift)); padding-right:var(--pub-shift)}
/* Letzte Linie um denselben Betrag spaeter beginnen lassen ->
   der Zwischenraum bleibt gleich, beide Linien wandern nach rechts */
.pub-preview{border-top:0 !important}
.pub-preview::before{content:''; position:absolute; top:0;
  left:var(--pub-shift); right:0; border-top:1px solid var(--c-line)}
.pub-row:first-of-type .pub-preview::before{display:none}
.pub-row:last-child .pub-preview{border-bottom:0 !important}
.pub-row:last-child .pub-preview::after{content:''; position:absolute; bottom:0;
  left:var(--pub-shift); right:0; border-bottom:1px solid var(--c-line)}
.pub-cover img{max-height:360px; width:auto; max-width:100%}
.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:340px; width:auto; max-width:100%; 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 --- */
/* Biografie: ohne Portrait - Typografie traegt die Seite */
.bio{max-width:none}

.bio-text{max-width:330px; font-size:13px; line-height:1.8; font-weight:300}
.bio-text p{margin-bottom:1.5em}
.bio-text p:last-child{margin-bottom:0}
.bio-text strong{font-weight:600}

@media (max-width:760px){
  .pub-row{grid-template-columns:1fr; gap:22px;
    border-top:1px solid var(--c-line); padding-top:22px}
  .pub-row:first-of-type{border-top:0; padding-top:0}
  .pub-row > *{border-top:0; border-bottom:0; padding-top:0; padding-bottom:0;
    margin-left:0; margin-right:0; padding-left:0; padding-right:0}
  .pub-preview::before, .pub-preview::after{display:none}
  /* Letzte Zeile: KEINE Linien an den einzelnen Spalten (sonst je eine
     unter Cover, Text und Leseprobe) - nur eine Abschlusslinie ganz unten.
     Muss hier stehen, weil .pub-row:last-child > * staerker gewichtet ist
     als .pub-row > * und die Regel sonst ueberstimmt wird. */
  .pub-row:last-child > *{border-bottom:0; padding-bottom:0}
  .pub-row:last-child{border-bottom:1px solid var(--c-line); padding-bottom: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}
}


/* --- Rechtsseiten (Imprint etc.) --- */
.legal{max-width:720px; font-size:13.5px; line-height:1.65}
.legal h2{font-size:15px; font-weight:600; 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; padding:0 var(--edge)}


@media (max-width: 900px){
  /* Bleed-Ueberhang der aeusseren Spalten hier abschalten: er schob die
     Leseproben-Zone nach rechts ueber den sichtbaren Bereich hinaus.
     Die Trennlinien enden auf Tabletbreite dann am Raster - unauffaellig. */
  .pub-row > *:first-child{margin-left:0; padding-left:0}
  .pub-row > *:last-child{margin-right:0; padding-right:0}
  .pub-preview{justify-items:center}
  .pub-preview img{margin-left:auto; margin-right:auto}
  .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{--lb-top:20px; padding:var(--lb-top) 70px 20px}
  .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:0 12px 8px var(--bleed); 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 13px var(--bleed);
    border-bottom:1px solid var(--c-line)}
  .mobile-menu a.active{font-weight:600}
  .hero{aspect-ratio:4/3}
  .works{gap:28px}
  .work{width:100%}
  .work img{height:auto; width:100%}
  .foot{grid-template-columns:1fr 1fr; gap:22px 30px}
  .foot-icons{justify-self:start}
  
  .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. */
  
  /* Bild randlos - volle Displaybreite; Blättern über die Pfeile
     in der Caption-Zeile darunter */
  .lightbox{--lb-top:16px; padding:var(--lb-top) 0 16px}
  .lb-prev, .lb-next{display:none}
  .lb-btn-m{display:block}
  .lb-bottom{padding:0 14px}
  .lb-close{right:14px}
  .lb-close .xic{width:28px; height:28px}
}

/* --- Login (Private Galerien) --- */
/* Formular-Block mittig auf dem Bildschirm, optisch leicht erhoeht (42%).
   Die Formular-Inhalte selbst bleiben linksbuendig (Label, Fehlermeldung). */
.pw-wrap{min-height:calc(100vh - 420px); display:flex;
  flex-direction:column; justify-content:center; align-items:center;
  padding-bottom:8vh}
.pw-form{width:100%; max-width:420px; display:flex; flex-direction:column}
.pw-input{
  border:0; border-bottom:1px solid var(--c-line); border-radius:0;
  background:none; font-family:inherit; font-size:15px; font-weight:300;
  color:var(--c-text); padding:6px 0 10px; width:100%; outline:none;
}
.pw-input:focus{border-bottom-width:1px; padding-bottom:10px}
.pw-label{font-size:12px; margin-top:8px; text-align:left}
.pw-error{font-size:12px; margin-top:14px; color:#cd594b}
.pw-submit{
  align-self:flex-start; margin-top:28px; background:none; border:0;
  font-family:inherit; font-size:13.5px; font-weight:300; color:var(--c-text);
  cursor:pointer; padding:0;
  display:inline-flex; align-items:center; gap:0px; line-height:1;
}
.pw-submit .lbl{display:inline-flex; flex-direction:column; align-items:flex-start}
.pw-submit .lbl::after{content:attr(data-text); font-weight:600; height:0;
  visibility:hidden; overflow:hidden}
.pw-submit .chev{width:11px; height:auto}
.pw-submit .chev{transition:transform .15s ease}
.pw-submit:hover .chev{transform:translateX(4px)}
.pw-submit:hover path{stroke-width:1.9px}

/* --- Masonry-Raster (Private Galerien) --- */
.masonry{columns:3; column-gap:40px; margin-top:6px}
/* Abstand als padding statt margin: Safari (iPad) verschiebt margins
   sonst an den Spaltenanfang - mittlere Spalte startete dadurch tiefer */
.masonry .m-item{break-inside:avoid; -webkit-column-break-inside:avoid;
  margin:0; padding-bottom:40px; display:block}
.masonry .m-item img{width:100%; height:auto; max-width:100%; cursor:pointer; display:block}
@media (max-width:900px){
  .masonry{columns:2; column-gap:28px}
  .masonry .m-item{padding-bottom:28px}
}
@media (max-width:640px){
  .pw-wrap{min-height:calc(100vh - 520px); padding-bottom:4vh}
  .masonry{columns:1}
  .masonry .m-item{padding-bottom:22px}
}

/* --- Footer: Login-Link unter Instagram --- */

.ft-login{text-decoration:underline}