/* Bildreihen: jede Reihe hat eine gemeinsame Höhe, ausgewählte Fotos stehen allein.
   flex-grow und flex-basis folgen dem Seitenverhältnis (--r), dadurch bleiben alle
   Fotos unbeschnitten und die Kanten einer Reihe schließen bündig ab. */
.photo-flow{--row:340px;--gap:14px;display:flex;flex-wrap:wrap;gap:var(--gap);max-width:1320px;margin:0 auto;padding:0 5% clamp(64px,7vw,104px)}
.photo-flow>figure{flex:var(--r) 1 calc(var(--r) * var(--row));margin:0;min-width:0;position:relative}
.photo-flow>figure.is-wide{flex-basis:100%}
.photo-flow>figure[hidden]{display:none}
.photo-flow::after{content:"";flex:999 1 0}
.photo-flow img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;border-radius:0}
.photo-flow figcaption{display:none}
.portfolio-flow{--row:300px;padding-top:8px}
@media(max-width:1100px){.photo-flow{--row:260px}.portfolio-flow{--row:230px}}
/* Handy: Querformate über die volle Breite, Hochformate paarweise. */
@media(max-width:650px){
 .photo-flow{--gap:8px;padding-inline:4%}
 .photo-flow>figure{flex:1 1 100%}
 .photo-flow>figure.is-portrait{flex:1 1 calc(50% - var(--gap))}
 .photo-flow::after{display:none}
}

/* Kapitel einer Reportage: kurze Einleitung vor jeder Bildstrecke. */
.story-chapter{max-width:1320px;margin:0 auto;padding:clamp(56px,7vw,104px) 5% clamp(28px,3vw,40px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 6%;align-items:end}
.story-chapter-label{grid-column:1/-1;margin:0;font:400 13px/1.2 'Barlow Condensed',Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#85465f}
.story-chapter h2{margin:0;font-size:clamp(38px,4vw,60px);line-height:1.02}
.story-chapter>div p{margin:0;max-width:62ch;font-size:16px;line-height:1.75}
.story-chapter>div p+p{margin-top:14px}
@media(max-width:760px){.story-chapter{grid-template-columns:1fr;padding-top:56px}.story-chapter h2{font-size:clamp(34px,9vw,44px)}.story-chapter>div p{font-size:15px}}

/* Großansicht: Fotos per Klick, Tippen oder Enter öffnen. */
.photo-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.photo-open:focus-visible{outline:3px solid #85465f;outline-offset:3px}
.photo-viewer{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#141813f2;color:#f4f4eb;overflow:hidden}
.photo-viewer::backdrop{background:#141813e6}
.photo-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.photo-viewer-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font:400 14px/1.4 Outfit,Arial,sans-serif}
.photo-viewer-stage{display:grid;place-items:center;min-height:0;padding:0 64px}
.photo-viewer-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.photo-viewer-caption{margin:0;padding:10px 16px 18px;text-align:center;font:400 14px/1.5 Outfit,Arial,sans-serif;color:#d9dcd2}
.photo-viewer button{min-width:48px;min-height:48px;border:1px solid #f4f4eb55;border-radius:2px;background:#141813;color:#f4f4eb;font:400 20px/1 Outfit,Arial,sans-serif;cursor:pointer}
.photo-viewer button:hover{background:#2a3027}
.photo-viewer button:focus-visible{outline:3px solid #e8c889;outline-offset:2px}
.photo-viewer-prev,.photo-viewer-next{position:absolute;top:50%;transform:translateY(-50%)}
.photo-viewer-prev{left:10px}.photo-viewer-next{right:10px}
@media(max-width:650px){.photo-viewer-stage{padding:0 8px}.photo-viewer-prev,.photo-viewer-next{top:auto;bottom:12px;transform:none}}
@media(max-width:650px){.photo-viewer-caption{padding-bottom:76px}}
/* Feste Reihen der Reportagen. */
.photo-rows{display:block}
.photo-rows::after{content:none}
.flow-row{display:flex;gap:var(--gap)}
.flow-row+.flow-row{margin-top:var(--gap)}
.flow-row>figure{flex:var(--r) 1 0;margin:0;min-width:0}
.flow-row.is-lone{justify-content:center}
.flow-row.is-lone>figure{flex:0 1 calc(var(--r) * 620px)}
@media(max-width:650px){
 .flow-row{flex-wrap:wrap}
 .flow-row>figure{flex:1 1 100%}
 .flow-row>figure.is-portrait{flex:1 1 calc(50% - var(--gap))}
 .flow-row.is-lone>figure{flex:1 1 100%}
}
/* Portfolio: alte Versatz- und Einstiegsregeln aus pages.css aufheben, damit Reihen bündig bleiben. */
#filtered-photos.portfolio-flow figure,#filtered-photos.portfolio-flow figure[data-position="1"],#filtered-photos.portfolio-flow figure.portfolio-lead{margin:0;width:auto;max-width:none;grid-column:auto}
#filtered-photos.portfolio-flow figure img,#filtered-photos.portfolio-flow figure.portfolio-lead img{max-height:none}
/* Foto passt immer zwischen Kopfzeile und Bildunterschrift. */
.photo-viewer-stage img{max-height:calc(100dvh - 140px)}
@media(max-width:650px){.photo-viewer-stage img{max-height:calc(100dvh - 200px)}}
.story-note{max-width:1320px;margin:0 auto;padding:0 5%;font-size:14px;line-height:1.7;color:#4e6053}.story-note::before{content:"";display:block;width:48px;border-top:1px solid currentColor;margin-bottom:14px}
.story-note{max-width:min(1320px,calc(62ch + 10%))}
/* Kapitel: Name, Überschrift und Text untereinander, linksbündig über der Bildstrecke. */
.story-chapter{display:block;padding-bottom:clamp(24px,2.4vw,36px)}
.story-chapter-label{margin-bottom:14px}
.story-chapter h2{margin-bottom:22px;max-width:18ch}
.story-chapter>div{max-width:68ch}
.story-lead{padding-top:clamp(40px,5vw,72px)}.story-lead h2{font-size:clamp(44px,4.6vw,68px)}
/* Kapitelkopf: Text links, ein Foto rechts daneben; darunter die Bildreihen über die volle Breite. */
.story-head{max-width:1320px;margin:0 auto;padding:clamp(56px,7vw,104px) 5% clamp(28px,3vw,40px);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center}
.story-head>.story-chapter{margin:0;padding:0;max-width:none}
.story-head>.story-side{margin:0;flex:none}
.story-head>.story-side img{display:block;width:100%;height:auto;max-height:560px;object-fit:contain}
.story-head>.story-side.is-portrait{max-width:380px;justify-self:end}
@media(max-width:760px){.story-head{grid-template-columns:1fr;padding-top:56px}.story-head>.story-side.is-portrait{max-width:none;justify-self:stretch}}