/* /einblicke/: a contact sheet that fills (consult 21.10.2026, docs/consults/2026-10-21/einblicke-design.md).
   Under the intro a black band counts the days to the premiere (app.js renderCountdown). Then numbered frames
   in three columns: each photo from site-config fills one (3:4 when upright, else 4:3). There are no empty
   frames: until the first photo the sheet is hidden and the line "Die Probenfotos folgen" stands in its place.
   A poster frog peeks over the third frame (credits.css, credits-frogs.js); gallery-motion.js lets each frame
   develop once as it scrolls in. */
.rehearsal-section{padding-bottom:var(--space-m)}

.countdown-band{background:var(--ink);color:var(--paper)}
/* .countdown-inner also has class section, which sets its width per breakpoint like the intro above. */
.countdown-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 40px;padding:22px 0}
.countdown-days{margin:0;font:900 var(--step-6)/1.1 var(--title)}
.countdown-number{color:var(--yellow)}
.countdown-meta{margin:0;font:600 var(--step--1)/1.5 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#d8cdb9}

.gallery-section{padding-top:var(--space-l)}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px;align-items:start}
.frame,.gallery-soon{position:relative;margin:0;
 --frog-body:#146b72;--frog-body-2:#0b4f55;--frog-eye:var(--yellow);--frog-pupil:var(--ink);--frog-p1:var(--yellow);--frog-p2:#ff7a1f;--frog-p3:#ff2e7e;--frog-p4:#c9e83a}
.frame-box{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--ink);background:var(--cream)}
.frame.is-portrait .frame-box{aspect-ratio:3/4}
.frame .gallery-button{cursor:zoom-in}
.frame-box img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.frame-frog .peek-window{right:24px}
/* Shown while there are no photos (app.js hides it then); it carries the poster frog until frame 03 takes it. */
.gallery-soon{font:400 var(--step-4)/1.4 var(--serif)}

/* Exposure: armed only with motion allowed (gallery-motion.js); each frame clears from the top like a print.
   An animation rather than a transition, so the frame ends on clip-path:none: an inset(0) would clip the photo
   button's own focus outline. */
.gallery.exposure-armed .frame-box{clip-path:inset(0 0 100% 0);filter:contrast(.4) brightness(1.4)}
.gallery.exposure-armed .frame.is-exposed .frame-box{clip-path:none;filter:none;animation:frame-develop .52s cubic-bezier(.2,.7,.2,1) var(--expose-delay,0s) backwards}
@keyframes frame-develop{from{clip-path:inset(0 0 100% 0);filter:contrast(.4) brightness(1.4)}to{clip-path:inset(0);filter:none}}
@media(prefers-reduced-motion:reduce){.gallery.exposure-armed .frame-box{clip-path:none;filter:none;animation:none}}

.onward{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:20px 48px;margin-top:var(--space-l);padding-top:32px;border-top:2px solid var(--ink)}
.onward-lead{margin:0;font:400 var(--step-4)/1.4 var(--serif)}
.onward-links{display:flex;flex-wrap:wrap;gap:4px 32px;margin:0;padding:0;list-style:none}

@media(width<=820px){
 .countdown-inner{flex-direction:column;gap:6px;padding:20px 0}
 /* Two columns put frame 03 under frame 01: the row gap is as tall as the frog's window (credits.css), so the frog never reaches frame 01's caption. */
 .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:58px 16px}
 /* An odd last photo past six spans both columns instead of sitting alone (up to six the sheet keeps its two columns). */
 .gallery .frame:nth-child(n+7):nth-child(odd):last-child{grid-column:1/-1}
 .frame-frog .peek-window{right:8px}
 .onward{flex-direction:column;gap:12px}
 .onward-links{flex-direction:column}
}
@media print{.countdown-band,.onward,.peek-window{display:none!important}.gallery.exposure-armed .frame-box{clip-path:none;filter:none}}