/* Screen 03 Portfolio. Tokens, Nav, Typo, Kontakt und Footer bleiben in site.css. */

.pfo img{aspect-ratio:4/5;object-fit:cover;background:var(--surface)}
.pfo .q img{aspect-ratio:5/4}
/* object-position aus den Specs. Nicht inline: style-src 'self' blockiert style-Attribute. */
.pfo [data-n="1"] img{object-position:50% 55%}
.pfo [data-n="2"] img,.pfo [data-n="3"] img{object-position:50% 0%}
.pfo [data-n="4"] img{object-position:50% 35%}
.pfo [data-n="5"] img{object-position:50% 60%}
.pfo [data-n="6"] img{object-position:50% 62%}
.pfo [data-n="10"] img,.pfo [data-n="11"] img,.pfo [data-n="18"] img{object-position:50% 30%}
.pfo [data-n="13"] img,.pfo [data-n="21"] img,.pfo [data-n="23"] img,.pfo [data-n="24"] img{object-position:50% 60%}
.pfo [data-n="14"] img{object-position:50% 40%}
.pfo [data-n="20"] img{object-position:45% 50%}
.pfo figure{position:relative;min-width:0}
.pfo figure button{all:unset;display:block;width:100%;cursor:zoom-in}
.pfo figure button:focus-visible,.chip:focus-visible,.lb :focus-visible{outline:2px solid var(--velvet-text);outline-offset:4px}

.pf-intro{padding-top:40px}
.pf-intro .h1{margin-top:16px}
.pf-intro .body{margin-top:20px;max-width:34em}
.pf-meta{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line-strong);border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cream)}
.chip b{color:var(--velvet-text);font-weight:700}
.pf-count{display:block;width:100%;margin-bottom:4px;font-size:12px;line-height:16px;color:var(--moss-text);letter-spacing:.02em}

.chap{margin-top:96px}
.chap .h2{margin-top:12px}
.chap .line,.m-a .line{margin-top:12px;color:var(--cream-2);font-size:15px;line-height:24px}
.chap+.m{margin-top:32px}

.m{margin-top:48px}
.m-a .txt{margin-bottom:32px}
.m-a figure,.m-d figure{margin-left:-20px;margin-right:-20px;margin-left:calc(-1 * var(--pad-l));margin-right:calc(-1 * var(--pad-r))}
.m-a figcaption,.m-d figcaption{padding-left:20px;padding-right:20px;padding-left:var(--pad-l);padding-right:var(--pad-r)}
.m-b,.m-e{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.m-e figure:first-child{grid-column:1/3;margin-bottom:12px}
.m-c .sm{width:62%;margin:28px 0 0 auto}
.m-c.rev .sm{margin-left:0;margin-right:0}
.m-s figure{width:78%;margin-left:auto}

.m-a.chap-a{margin-top:96px}
.pf-intro+.m-a.chap-a{margin-top:64px}

.pf-end{margin-top:96px;padding-bottom:96px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}

@media (min-width:1024px){
  .pfo .g{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
  .pfo .g>*{min-width:0}
  .pf-intro{padding-top:96px;align-items:end}
  .pf-intro .t{grid-column:1/8}
  .pf-intro .r{grid-column:8/13}
  .pf-intro .body{margin-top:0}
  .chap{margin-top:200px;align-items:end}
  .chap .t{grid-column:1/7}
  .chap .line{grid-column:8/12;margin-top:0;font-size:16px;line-height:26px}
  .chap+.m{margin-top:64px}
  .m{margin-top:120px}
  .m-a{align-items:end}
  .m-a figure{margin:0;grid-column:1/8;grid-row:1}
  .m-a figcaption{padding:0}
  .m-a .txt{grid-column:9/13;grid-row:1;margin:0 0 24px}
  .m-a .line{font-size:16px;line-height:26px}
  .m-a.rev figure{grid-column:6/13}
  .m-a.rev .txt{grid-column:1/5}
  .m-b figure:nth-child(1){grid-column:2/7}
  .m-b figure:nth-child(2){grid-column:8/13;margin-top:96px}
  .m-c{align-items:end}
  .m-c .bg{grid-column:1/8;grid-row:1}
  .m-c .sm{grid-column:9/13;grid-row:1;width:auto;margin:0}
  .m-c.rev .bg{grid-column:6/13}
  .m-c.rev .sm{grid-column:1/5}
  .m-d figure{grid-column:2/12;margin:0}
  .m-d figcaption{padding:0}
  .m-e{align-items:start}
  .m-e figure:nth-child(1){grid-column:1/5;margin:0}
  .m-e figure:nth-child(2){grid-column:5/9;margin-top:64px}
  .m-e figure:nth-child(3){grid-column:9/13}
  .m-s figure{grid-column:7/12;width:auto;margin:0}
  .m-a.chap-a{margin-top:200px}
  .pf-intro+.m-a.chap-a{margin-top:160px}
  .pf-end{margin-top:160px;padding-bottom:128px;flex-direction:row;align-items:center;justify-content:space-between}
}
@media (min-width:1440px){
  .pf-intro .h1{white-space:nowrap}
}

/* Lightbox: volle Fläche, Bild unbeschnitten. Schließen sitzt wie der Menü-Button. */
html.lb-open,html.lb-open body{overflow:hidden}
.lb{
  border:0;padding:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;
  background:var(--forest);color:var(--cream);overflow:hidden;
}
.lb::backdrop{background:var(--forest)}
.lb[open]{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
.lb-top{
  position:relative;flex:none;height:64px;display:flex;align-items:center;
  padding:0 20px;
  padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));
  border-bottom:1px solid var(--line);
}
.lb-count{
  margin:0;min-width:0;font-size:11px;line-height:16px;font-weight:700;letter-spacing:.18em;
  text-transform:none;color:var(--cream);
}
.lb-count span{color:var(--moss-text)}
.lb-close{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;height:44px;
  padding:0;border:0;background:transparent;color:var(--cream);font-family:inherit;font-size:11px;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
}
.lb-close i{display:block;width:14px;height:14px;position:relative;flex:none}
.lb-close i::before,.lb-close i::after{content:"";position:absolute;left:0;top:6px;width:14px;height:1.5px;background:var(--cream)}
.lb-close i::before{transform:rotate(45deg)}
.lb-close i::after{transform:rotate(-45deg)}
.lb-stage{flex:1;min-height:0;position:relative;overflow:hidden;touch-action:pan-y}
.lb-track{display:flex;width:100%;height:100%;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.lb-slide{flex:0 0 100%;height:100%;min-width:100%;display:flex;align-items:center;justify-content:center;padding:16px 0}
.lb-slide img{width:auto;height:auto;max-width:100%;max-height:100%;aspect-ratio:auto;object-fit:contain;background:none}
.lb-foot{
  flex:none;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 20px 0 20px;
  padding:0 max(20px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(20px,env(safe-area-inset-left));
  border-top:1px solid var(--line);
}
.lb-foot .cap{flex:1;margin:0;text-align:center}
.lb .lb-nav{
  all:unset;box-sizing:border-box;width:44px;height:44px;min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  border:1.5px solid var(--line-strong);border-radius:999px;cursor:pointer;color:var(--cream);background:transparent;
}
.lb .lb-nav svg{width:15px;height:15px;display:block}
.lb .lb-nav[disabled]{opacity:.35;cursor:default}
.lb-hint{display:none;margin:0}
@media (max-width:1023px){
  .lb-stage .lb-nav{display:none}
}
@media (min-width:1024px){
  .lb-top{height:88px;padding:0 80px}
  .lb-count{font-size:12px}
  .lb-close{position:absolute;top:21.5px;right:80px;margin-left:0}
  .lb-slide{padding:32px 136px}
  .lb-stage .lb-nav{position:absolute;top:50%;width:56px;height:56px;min-width:56px;min-height:56px;margin-top:-28px;border-color:var(--cream)}
  .lb-stage .lb-prev{left:40px}
  .lb-stage .lb-next{right:40px}
  .lb-foot{padding:0 80px}
  .lb-foot .cap{text-align:left;flex:none}
  .lb-foot .lb-nav{display:none}
  .lb-hint{display:block;margin-left:auto;font-size:12px;line-height:16px;color:var(--moss-text);letter-spacing:.02em}
}
@media (prefers-reduced-motion:reduce){
  .lb-track{transition:none !important}
}

/* Wrapper .v5ch ab 600 px neutral halten: Nachbar-Selektoren aus portfolio.css auf den Wrapper übertragen */
.pf-intro+.v5ch>.m-a.chap-a:first-child{margin-top:64px}
.chap+.v5ch>.m:first-child{margin-top:32px}
@media (min-width:1024px){
  .pf-intro+.v5ch>.m-a.chap-a:first-child{margin-top:160px}
  .chap+.v5ch>.m:first-child{margin-top:64px}
}

/* 2 · Portfolio v5 (unter 1024 px). Ersetzt v4 (verworfen). Reihenfolge und 25 Bilder unverändert.
   Raster: 6 Spalten, Gutter 6 px, Seitenrand 20 px. Spaltenbreiten bei 390: 2 Sp. 112,7 · 3 Sp. 172 · 4 Sp. 231,3 · 6 Sp. 350.
   .v5ch ist ein neuer Wrapper je Kapitel (Block ab 1024 px, ändert Desktop nicht). Die Sektionen darin werden unter 1024 px zu display:contents. */
@media (max-width:1023px){
  .pfo .v5ch{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;grid-auto-flow:row dense;
    padding:0 var(--pad-r) 0 var(--pad-l);margin-top:44px}
  .pfo .pf-intro+.v5ch{margin-top:40px}
  .pfo .v5ch>.m{display:contents}
  .pfo .v5ch figure{margin:0 !important;width:auto !important;min-width:0;grid-column:span 6}
  .pfo .v5ch figcaption{padding:0}

  /* Kapitel-Titel kompakt: Kicker und Titel in einer Zeile, Zeile darunter */
  .pfo .v5ch .txt{grid-column:1 / -1;margin:0 0 8px;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px}
  .pfo .v5ch .txt .h2,.pfo .chap .h2{margin:0;font-size:30px;line-height:34px}
  .pfo .v5ch .txt .line,.pfo .chap .line{flex-basis:100%;margin:4px 0 0;font-size:14px;line-height:20px}
  .pfo .chap{margin-top:44px;display:flex;flex-wrap:wrap;align-items:baseline}
  .pfo .chap .t{display:flex;align-items:baseline;column-gap:12px}
  .pfo .chap+.v5ch{margin-top:14px}

  /* Modul A: groß links (4 Sp., 2 Reihen) + zwei kleine gestapelt rechts. Modul B: gespiegelt. */
  .pfo .v5ch .v5-a{grid-column:1 / 5;grid-row:span 2}
  .pfo .v5ch .v5-a2{grid-column:5 / 7}
  .pfo .v5ch .v5-b2{grid-column:1 / 3}
  .pfo .v5ch .v5-b{grid-column:3 / 7;grid-row:span 2}
  /* Modul Q+S: Querformat 4 Sp. + Hochformat 2 Sp. auf gleicher Höhe (S/Q gespiegelt) */
  .pfo .v5ch .v5-ql{grid-column:1 / 5}
  .pfo .v5ch .v5-qs{grid-column:5 / 7}
  .pfo .v5ch .v5-sq{grid-column:1 / 3}
  .pfo .v5ch .v5-qr{grid-column:3 / 7}
  /* Modul T: 3er-Reihe */
  .pfo .v5ch .v5-t{grid-column:span 2}
  /* Modul P: versetztes Paar, rechts 24 px tiefer, links füllt die volle Reihenhöhe (kein Leerraum links) */
  .pfo .v5ch .v5-pl{grid-column:1 / 4}
  .pfo .v5ch .v5-pr{grid-column:4 / 7;margin-top:24px !important}
  /* Modul W: Querformat über 6 Spalten mit Seitenrand, einmal auf der Seite */
  .pfo .v5ch .v5-w{grid-column:1 / -1}

  /* Füll-Bilder: Höhe kommt aus der Reihe, Bild füllt per object-fit, Ausschnitt per object-position */
  .pfo .v5ch .v5-fill{position:relative;min-height:0}
  .pfo .v5ch .v5-fill button{position:absolute;inset:0;width:auto;height:auto}
  .pfo .v5ch .v5-fill picture{display:block;width:100%;height:100%}
  .pfo .v5ch .v5-fill img{width:100%;height:100%;aspect-ratio:auto}
  .pfo .v5ch [data-n="5"] img{object-position:55% 50%}
  .pfo .v5ch [data-n="7"] img{object-position:15% 50%}
  .pfo .v5ch [data-n="13"] img{object-position:50% 0%}
  .pfo .v5ch [data-n="18"] img{object-position:30% 50%}
  .pfo .v5ch [data-n="21"] img{object-position:50% 50%}
  .pfo .v5ch [data-n="22"] img{object-position:55% 50%}
  .pfo .v5ch [data-n="24"] img{object-position:40% 50%}

  .pfo .v5ch+.pf-end,.pf-end{margin-top:56px}
}
@media (min-width:600px) and (max-width:1023px){
  .pfo .v5ch{max-width:600px;margin-inline:auto}
  .pfo .pf-intro,.pfo .chap{max-width:600px;margin-left:auto;margin-right:auto}
  .pfo .pf-end{max-width:600px;margin-inline:auto}
}