/* /programm/: the digital programme as an open booklet (consult 21.10.2026, docs/consults/2026-10-21/programm-design.md).
   The thesis „Kunst wird die Welt retten.“ on a yellow band with one poster frog (credits.css, credits-frogs.js),
   a contents row, then three numbered chapters that follow the story: 01 on paper (Athens), 02 on black (the
   underworld, with the original's ending behind its own <details>), 03 opened by a turquoise/cream split (the
   two pairs, then and now). app.js renders the chapters; program-motion.js runs the two one-shot movements. */
.program-section{--teal-deep:#147d84;--teal-light:#3cc4cc;--dim:#d8cdb9;border-top:0}

/* The quote band: full width between the play and the programme. Frog colours as the choirs frog on /mitwirkende/,
   with cream fingertips so none disappears into the yellow. */
.quote-band{position:relative;margin-top:60px;background:var(--yellow);border-block:2px solid var(--ink);
 --frog-body:#262626;--frog-body-2:#0b0b0b;--frog-eye:var(--yellow);--frog-pupil:var(--ink);--frog-p1:var(--paper);--frog-p2:#ff7a1f;--frog-p3:#ff2e7e;--frog-p4:#e8322e}
.quote-band .peek-window{right:clamp(16px,12vw,180px)}
.band-quote{width:calc(100% - 120px);max-width:1320px;margin:0 auto;padding:44px 0;font:italic 400 var(--step-7)/1.15 var(--serif);text-wrap:balance}

/* Contents: three numbered links in a row under a black rule. */
.program-section .section-intro{margin-bottom:var(--space-m)}
.program-section .program-body{max-width:none}
.chapter-toc ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 var(--space-l);padding:0;list-style:none;border-top:2px solid var(--ink)}
.chapter-toc li{border-bottom:1px solid var(--rule)}
.chapter-toc li+li{border-left:1px solid var(--rule)}
.chapter-toc a{display:flex;flex-direction:column;gap:6px;height:100%;padding:20px 24px 22px;text-decoration:none}
.chapter-toc li:first-child a{padding-left:0}.chapter-toc li:last-child a{padding-right:0}
.toc-number{font:900 var(--step-6)/1 var(--title)}
.toc-title{font:900 var(--step-3)/1.2 var(--title);text-wrap:balance}
@media(hover:hover){.chapter-toc a:hover .toc-title{text-decoration:underline;text-underline-offset:5px}}.chapter-toc a:active .toc-title{text-decoration:underline;text-underline-offset:5px}
.chapter-toc li:nth-child(1) .toc-number{color:var(--teal-deep)}
.chapter-toc li:nth-child(3) .toc-number{color:var(--red)}

/* A chapter: its number in the left column, then label, title and text. */
.program-chapter{display:grid;grid-template-columns:160px minmax(0,1fr);column-gap:40px;align-items:start;padding-bottom:var(--space-l)}
.chapter-number{position:relative;justify-self:start;margin:0;padding:0 .08em;font:900 var(--step-8)/.9 var(--title)}
.chapter-original .chapter-number{color:var(--teal-deep)}
.chapter-adaption .chapter-number{color:var(--red)}
.chapter-label{justify-self:start;display:inline-block;margin:0;padding:8px 16px;background:var(--ink);color:var(--yellow);font:700 var(--step--2)/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.chapter-title{margin:20px 0 32px;font:900 var(--step-5)/1.1 var(--title);text-wrap:balance}
.program-chapter .program-quote{margin-bottom:40px}
.program-chapter .chapter-copy{padding:0}
/* A large first letter opens chapters 1 and 3; the black chapter stays plain. */
.chapter-original .chapter-main>.chapter-copy>p:first-child::first-letter,.chapter-adaption .chapter-main>.chapter-copy>p:first-child::first-letter{float:left;margin:.1em .12em 0 0;font:900 var(--step-8)/.8 var(--title)}
.chapter-original .chapter-main>.chapter-copy>p:first-child::first-letter{color:var(--teal-deep)}
.chapter-adaption .chapter-main>.chapter-copy>p:first-child::first-letter{color:var(--red)}

/* Chapter 2 on black, full width: the ground is a pseudo-element whose border-image reaches 100vw to each
   side (ink overflow, no scrollbar), so program-motion.js can let it rise without moving the text box. */
.chapter-contest{position:relative;isolation:isolate;padding-top:var(--space-l);color:var(--paper)}
.chapter-contest::before{content:'';position:absolute;inset:0;z-index:-1;border-image:linear-gradient(var(--ink) 0 0) fill 0//0 100vw}
.chapter-contest .chapter-number{color:var(--yellow)}
.chapter-contest .chapter-label{background:var(--yellow);color:var(--ink)}
.chapter-contest .chapter-title{margin-bottom:18px}
.chapter-versus{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:0 0 36px;font:900 var(--step-4)/1.1 var(--title);letter-spacing:.04em;text-transform:uppercase}
.chapter-versus span:first-child{color:var(--teal-light)}
.chapter-versus span:last-child{color:var(--cream)}
.chapter-versus .versus-word{font:italic 400 var(--step-0)/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--dim)}
.chapter-ending{max-width:68ch;padding-top:24px;border-top:1px solid rgb(255 243 224/.25)}
.chapter-contest .spoiler-note{margin:0 0 18px;color:var(--yellow)}
.chapter-spoiler summary{display:inline-flex;align-items:center;min-height:48px;padding:12px 22px;border:1px solid var(--paper);font:700 var(--step-0)/1.3 var(--sans);list-style:none;cursor:pointer;transition:background .15s,color .15s}
.chapter-spoiler summary::-webkit-details-marker{display:none}
@media(hover:hover){.chapter-spoiler summary:hover{background:var(--paper);color:var(--ink)}}.chapter-spoiler summary:active{background:var(--paper);color:var(--ink)}
.chapter-spoiler summary:focus-visible{outline-color:var(--yellow)}
.chapter-spoiler .spoiler-hide,.chapter-spoiler[open] .spoiler-show{display:none}
.chapter-spoiler[open] .spoiler-hide{display:inline}
.chapter-spoiler[open] summary{min-height:44px;padding:10px 0;border-color:transparent;color:var(--dim);font-weight:600;text-decoration:underline;text-underline-offset:5px}
@media(hover:hover){.chapter-spoiler[open] summary:hover{background:none;color:var(--paper)}}.chapter-spoiler[open] summary:active{background:none;color:var(--paper)}
.chapter-spoiler .chapter-copy{padding-top:12px}

/* Chapter 3 opens with the two pairs, then and now: turquoise and cream like the poster's halves, an ink seam
   between them and an ink rule under both, all reaching the window edges. */
.chapter-eras{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-bottom:var(--space-l)}
.era{position:relative;padding:40px 0;color:var(--ink)}
.era-then{padding-right:40px;border-image:linear-gradient(to top,var(--ink) 2px,var(--turquoise) 0) fill 0//0 0 0 100vw}
.era-then::after{content:'';position:absolute;top:0;right:-1px;bottom:0;width:2px;background:var(--ink)}
.era-now{padding-left:40px;border-image:linear-gradient(to top,var(--ink) 2px,var(--cream) 0) fill 0//0 100vw 0 0}
.era-label{margin:0;font:700 var(--step--2)/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.era-names{margin:8px 0 0;font:900 var(--step-7)/1.05 var(--title);text-wrap:balance}
.program-chapter .program-finale{max-width:68ch;margin:16px 0 0;padding-top:24px;border-top:2px solid var(--ink);font:italic 400 var(--step-5)/1.35 var(--serif)}

/* The descent (program-motion.js): the first time chapter 2 scrolls in, its black ground rises from the bottom
   (600 ms) and the text follows. Armed only with motion allowed and IntersectionObserver present. The hidden
   state lives only in this screen/no-preference query, so print and reduced motion (even when switched on
   after load) always show the chapter. */
@media screen and (prefers-reduced-motion:no-preference){
 #program-body.descent-armed .chapter-contest::before{clip-path:inset(0 -100vw);transition:clip-path .6s cubic-bezier(.2,.7,.2,1)}
 #program-body.descent-armed .chapter-contest>*{transition:opacity .4s ease .3s,translate .5s cubic-bezier(.2,.7,.2,1) .25s}
 #program-body.descent-armed:not(.descent-done) .chapter-contest::before{clip-path:inset(100% -100vw 0)}
 #program-body.descent-armed:not(.descent-done) .chapter-contest>*{opacity:0;translate:0 14px}
}
/* The ripple: after a jump from the contents (or a #kapitel link), two rings spread from the chapter number. */
.chapter-number.ripple::before,.chapter-number.ripple::after{content:'';position:absolute;left:50%;top:50%;width:0;height:0;border:2px solid var(--teal-light);border-radius:50%;translate:-50% -50%;opacity:0;pointer-events:none;animation:chapter-ripple .7s cubic-bezier(.2,.7,.2,1) forwards}
.chapter-number.ripple::after{border-color:var(--rule);animation-delay:.12s}
@keyframes chapter-ripple{0%{width:0;height:0;opacity:.7}100%{width:1.9em;height:1.9em;opacity:0}}
/* Reduced motion: no rings; the number sits on a yellow highlight while .ripple is set (about 1 s, no animation,
   so style.css's reduced-motion rule leaves it alone). */
@media(prefers-reduced-motion:reduce){
 .chapter-number.ripple::before,.chapter-number.ripple::after{content:none}
 .chapter-number.ripple{background:rgb(255 213 66/.45)}
}

@media(width<1024px){.band-quote{width:calc(100% - 80px)}}
@media(width<=820px){
 .quote-band{margin-top:40px}
 .band-quote{width:calc(100% - 48px);padding:30px 0}
 .chapter-toc ol{grid-template-columns:minmax(0,1fr)}
 .chapter-toc li+li{border-left:0}
 .chapter-toc a,.chapter-toc li:first-child a,.chapter-toc li:last-child a{flex-direction:row;align-items:baseline;gap:16px;padding:14px 0}
 .toc-number{flex:none;width:1.2em}
 .program-chapter{grid-template-columns:minmax(0,1fr)}
 .chapter-number{margin-bottom:12px}
 .chapter-title{margin:16px 0 24px}
 .chapter-eras{grid-template-columns:minmax(0,1fr)}
 .era{padding:22px 0}
 .era-then,.era-now{border-image-outset:0 100vw}
 .era-then::after{content:none}
}
@media print{
 .quote-band,.chapter-toc,.chapter-eras,.chapter-number,.chapter-label,.chapter-spoiler summary{display:none!important}
 .program-chapter{display:block;padding-bottom:12pt}
 .chapter-contest{margin:0;padding:0;color:var(--ink)}
 .chapter-contest::before{content:none}
 .chapter-versus span{color:var(--ink)!important}
 .chapter-contest .spoiler-note{color:var(--muted)}
}