/* /mitwirkende/: three credit blocks. Desktop: team and choirs stacked left, cast right.
   Phone: one column in DOM order (team, cast, choirs). Site tokens only; no new fonts. */
.credits{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(45px,7vw,90px);row-gap:var(--space-l);align-items:start}
.credits-team{grid-column:1;grid-row:1}
.credits-cast{grid-column:2;grid-row:1/3}
.credits-choirs{grid-column:1;grid-row:2}
/* (0,3,0) keeps this label out of the heading size rules (.section h2 and the like). */
.ensemble-section .credits .credits-heading{font:700 var(--step--2)/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase;margin:0 0 23px}
.credits .credits-note{font:italic var(--step--1)/1.5 var(--serif);color:var(--muted);margin:-16px 0 23px}
.credits-list{margin:0}
.credits-list>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);column-gap:24px;align-items:baseline;border-top:1px solid var(--rule);padding:12px 0}
.credits-list>div:last-child{border-bottom:1px solid var(--rule)}
.credits-list dt{font:400 15px/1.4 var(--sans);hyphens:auto;overflow-wrap:break-word}
.credits-list dd{margin:0;font:600 var(--step-2)/1.2 var(--title);letter-spacing:.01em;overflow-wrap:break-word}
.credits-list-stacked>div{display:block;padding:14px 0}
.credits-list-stacked dd{margin-top:8px;font-size:var(--step-0);line-height:1.35}
.credits-list-stacked p{margin:0}
.credits-list-stacked dt{font-size:14px}
.credits-list-stacked .credits-lead{font:400 14px/1.5 var(--sans);margin-bottom:6px}
.credits-lead span:last-child{font:600 var(--step-2)/1.2 var(--title);letter-spacing:.01em}
@media(width<=820px){
 .credits{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:var(--space-m)}
 .credits-team,.credits-cast,.credits-choirs{grid-column:auto;grid-row:auto}
 .ensemble-section .credits .credits-heading{margin-bottom:17px}
 .credits .credits-note{margin:-10px 0 17px}
 .credits-list>div{padding:10px 0;column-gap:16px}
}
/* Role above name wherever a block is too narrow for two columns: phones, and the two-block layout up to 1180px. */
@media(width<=480px),(width>820px) and (width<=1180px){
 .credits-list>div{display:block}
 .credits-list dt{font-size:14px;hyphens:manual;margin-bottom:2px}
}
/* The frog rules below (.peek*) also serve the one frog over the quote band on /programm/ (program.css)
   and the one over the third frame on /einblicke/ (einblicke.css); both pages load this file for them.
   Each frog rule names its containers in one :is(.credits-block,.quote-band,.frame-frog); a new container
   goes into all four of these lists (in- and out-state, both hands, reduced motion) and into the
   querySelectorAll('.credits-block,.quote-band,.frame-frog') in credits-frogs.js, which adds .is-in. */
/* Colours and frogs after the poster. The blocks take its two grounds (team turquoise, cast cream) and its
   black title band (choirs). A poster frog peeks over each block's top edge (eyes, crown and fingertips): the
   team frog is the poster's left one (deep teal, colours that flow yellow > orange > hot pink > lime), the cast
   frog the right one in espresso with cream and greige, the choirs frog black with the hot colours.
   credits-frogs.js draws the frogs from these variables and adds .is-in / .blink / .look-*. The eye socket and
   lid are flat --frog-body, so a blink reads as a lid. Text stays at or above 5:1 on each block's deepest shade. */
.credits-team{--block-bg:linear-gradient(160deg,#27b3bb,#1a979e);--block-ink:var(--ink);--block-rule:rgb(16 17 17/.35);--head-bg:var(--ink);--head-ink:var(--yellow);
 --frog-body:#146b72;--frog-body-2:#0b4f55;--frog-eye:var(--yellow);--frog-p1:var(--yellow);--frog-p2:#ff7a1f;--frog-p3:#ff2e7e;--frog-p4:#c9e83a}
.credits-cast{--block-bg:linear-gradient(160deg,#fbe6c3,#f1d39d);--block-ink:var(--ink);--block-rule:rgb(16 17 17/.25);--head-bg:var(--ink);--head-ink:var(--cream);
 --frog-body:#3a2817;--frog-body-2:#20150c;--frog-eye:var(--cream);--frog-p1:var(--paper);--frog-p2:#d8c3a0;--frog-p3:#b9a894;--frog-p4:var(--cream)}
.credits-choirs{--block-bg:linear-gradient(160deg,#1f1a16,#101111);--block-ink:var(--paper);--block-rule:rgb(255 243 224/.25);--head-bg:var(--yellow);--head-ink:var(--ink);
 --frog-body:#262626;--frog-body-2:#0b0b0b;--frog-eye:var(--yellow);--frog-p1:var(--yellow);--frog-p2:#ff7a1f;--frog-p3:#ff2e7e;--frog-p4:#e8322e}
/* Room above the blocks for the frogs, which reach 56 px (42 px on phones) over the top edge. */
.credits{margin-top:30px}
.credits-block{--frog-pupil:var(--ink);--block-pad:clamp(16px,2.4vw,28px);position:relative;padding:0 var(--block-pad) var(--block-pad);background:var(--block-bg);color:var(--block-ink)}
.ensemble-section .credits .credits-heading{display:inline-block;margin-left:calc(-1 * var(--block-pad));padding:8px var(--block-pad);background:var(--head-bg);color:var(--head-ink)}
.credits-list dd{color:inherit}
.credits-list>div{border-top-color:var(--block-rule)}
.credits-list>div:last-child{border-bottom:0}
.peek-window{position:absolute;right:clamp(10px,3vw,36px);bottom:100%;width:200px;height:72px;overflow:hidden;pointer-events:none}
.peek{display:block;width:100%;height:100%;translate:0 105%;transition:translate .7s cubic-bezier(.3,1.45,.5,1) var(--peek-delay,0s);overflow:visible}
:is(.credits-block,.quote-band,.frame-frog).is-in .peek{translate:0 22%}
/* The rise is staggered per block; the hands open .5 s into it (credits-frogs.js times the first blink to match). */
.credits-cast{--peek-delay:.15s}.credits-choirs{--peek-delay:.3s}
.peek-hand{transform-box:fill-box;transform-origin:50% 100%;transition:rotate .5s cubic-bezier(.3,1.6,.5,1) calc(var(--peek-delay,0s) + .5s);rotate:0deg}
:is(.credits-block,.quote-band,.frame-frog):not(.is-in) .peek-hand-l{rotate:-25deg}:is(.credits-block,.quote-band,.frame-frog):not(.is-in) .peek-hand-r{rotate:25deg}
.peek-pupil{transform-box:fill-box;transition:transform .35s cubic-bezier(.3,.8,.3,1)}
.peek.look-left .peek-pupil{transform:translate(-4px,1px)}.peek.look-right .peek-pupil{transform:translate(4px,1px)}.peek.look-down .peek-pupil{transform:translate(0,4px)}.peek.look-up .peek-pupil{transform:translate(0,-3px)}
/* Following a mouse or pen (credits-frogs.js sets the offset); it wins over the frog's own glances. */
.peek.follow .peek-pupil{transform:translate(var(--look-x,0),var(--look-y,0))}
.peek-lid{transform-box:fill-box;transform:translateY(-103%)}
.peek.blink .peek-lid{animation:frog-blink .34s cubic-bezier(.45,0,.2,1) both}
.peek.blink .peek-eye-r .peek-lid{animation-delay:40ms}
/* Ducking (credits-frogs.js): touched or tapped, the frog drops behind the edge fast and folds its hands;
   it comes back with the springy rise above. */
:is(.credits-block,.quote-band,.frame-frog).is-in.ducked .peek{translate:0 105%;transition:translate .22s cubic-bezier(.5,0,.9,.4)}
:is(.credits-block,.quote-band,.frame-frog).ducked .peek-hand-l{rotate:-25deg}:is(.credits-block,.quote-band,.frame-frog).ducked .peek-hand-r{rotate:25deg}
/* <main> takes the frog taps (credits-frogs.js); no grey tap flash over the whole page on iOS. */
main{-webkit-tap-highlight-color:transparent}
/* Reduced motion: no transitions, so a frog that was ducked when it was switched on is simply back. */
@media(prefers-reduced-motion:reduce){.peek,.peek-hand{transition:none}.peek{translate:0 22%}:is(.credits-block,.quote-band,.frame-frog):not(.is-in) :is(.peek-hand-l,.peek-hand-r){rotate:0deg}}
/* Phone: one column; the gap leaves room for the frog over the next block. */
@media(width<=820px){.credits{margin-top:20px;row-gap:calc(var(--space-m) + 40px)}.peek-window{width:150px;height:54px}}