/* Multipage layout: page titles, home previews, subpage intros. The hero is styled only in hero.css. */
.page-title{font:900 var(--step-8)/1.1 var(--title);letter-spacing:0}
.home-previews h2{white-space:pre-line}
.performance-band{padding-top:18px;padding-bottom:18px}
.home-previews h2{max-width:550px;margin-bottom:18px;letter-spacing:0}
.home-previews article>p:not(.section-kicker){max-width:500px;font-size:var(--step-0);margin-bottom:20px}
.home-previews .placeholder-note,.home-gallery .placeholder-note{font-size:var(--step-0)!important;margin-bottom:18px}.home-gallery{margin-bottom:18px}
.home-previews .section-kicker{line-height:1.5;margin-bottom:12px}.home-gallery.has-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.home-gallery figure{margin:0}.home-gallery figcaption{font-size:var(--step--2);line-height:1.4;margin-top:7px;color:var(--muted)}
.home-gallery .gallery-button img{aspect-ratio:4/3;object-fit:cover}
.subpage-intro{padding-top:38px;padding-bottom:0;display:flex;justify-content:space-between;gap:25px;align-items:center}
.subpage-intro .section-kicker{margin:0;color:var(--muted);font-weight:500;text-align:right}
.subpage-intro .text-link-back:focus-visible{outline-offset:0}
body:not([data-page=home]) main>section.section:first-of-type{padding-top:38px;border-top:0}
body:not([data-page=home]) .section-title{margin-bottom:36px}
body:not([data-page=home]) .section-number{display:none}
body:not([data-page=home]) .play-content,body:not([data-page=home]) .section-intro,body:not([data-page=home]) .program-body{margin-left:0;padding-left:0}
@media(width<=820px){.home-previews{row-gap:35px}.home-gallery.has-photos{max-width:600px}.subpage-intro{padding-top:12px;align-items:flex-start}.subpage-intro .section-kicker{max-width:50%}body:not([data-page=home]) main>section.section:first-of-type{padding-top:12px}
}
@media print{.subpage-intro,.facts-strip,.home-visit,.home-voices,.home-previews{display:none!important}}

/* Home tiles („Dein Theaterabend“, then the previews row): one two-column grid with the rule exactly on
   the centre line whatever the gap, and the same kicker / H2 rhythm in both rows. ≤820: one column. */
.home-visit,.home-previews{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:0;--tile-gap:clamp(36px,4.5vw,64px)}
.home-visit>:first-child,.home-previews>:first-child{padding-right:var(--tile-gap)}
.home-visit>:nth-child(2),.home-previews>:nth-child(2){border-left:1px solid var(--rule);padding-left:var(--tile-gap)}
.home-visit h2,.home-previews h2{font-size:var(--step-7);line-height:1.08}

/* Facts under the performance band: three inline label/value pairs. */
.facts-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 28px;margin:0;padding:12px var(--gutter);border-bottom:1px solid var(--rule)}
.facts-strip>div{display:flex;align-items:baseline;gap:8px}
.facts-strip dt{font:700 11px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.facts-strip dd{margin:0;font:600 var(--step--1)/1.4 var(--sans)}

/* „Dein Theaterabend“: words on the left; on the right the booking (date chips, door line, prices, link). */
/* Both home rows share one rhythm: --space-l above and below (--space-m once stacked on phones). */
.home-visit,.home-previews{padding:var(--space-l) 0}
.home-visit{align-items:start;border-bottom:1px solid var(--rule)}
.home-visit>:nth-child(2){container-type:inline-size}
.home-visit .section-kicker{line-height:1.5;margin-bottom:12px;color:var(--ink)}
.home-visit h2{margin:0 0 18px;letter-spacing:0}
.visit-address{font-size:var(--step-0);line-height:1.5}
.visit-lead{margin:var(--space-s) 0 0;font:600 var(--step-0)/1.5 var(--sans);max-width:26em}

/* Date chips: label row, the /tickets/ date tile (tickets.css), then the short weekday or the state word.
   Every part stays inside the 56 px column: long state words wrap (soft hyphens in tickets.js), so the
   tiles never shift and neighbours never collide. 1x8 in a wide column, 2x4 below 530 px. */
.date-chips{display:grid;grid-template-columns:repeat(8,56px);gap:14px 10px;justify-content:start;list-style:none;margin:0;padding:0}
@container (max-width:530px){.date-chips{grid-template-columns:repeat(4,56px)}}
.date-chip{display:grid;grid-template-columns:56px;grid-template-rows:14px 56px minmax(16px,auto);row-gap:4px;justify-items:center;width:56px;color:var(--ink);text-decoration:none}
.date-chip>*{grid-column:1;min-width:0;max-width:56px}
.date-chip .chip-label{grid-row:1}
.date-chip .date-tile{grid-area:auto;grid-row:2;width:56px;height:56px;transition:background-color .15s,color .15s}
.date-chip .chip-foot{grid-row:3}
.date-chip .date-num{font-size:28px}
.chip-label{font:700 10px/14px var(--sans);letter-spacing:.03em;text-transform:uppercase;color:var(--red);white-space:nowrap}
.chip-foot{align-self:start;font:600 12px/14px var(--sans);text-align:center;color:var(--muted);hyphens:manual;overflow-wrap:break-word}
@media(hover:hover){a.date-chip:hover .date-tile{background:var(--cream)}a.date-chip.is-featured:hover .date-tile{background:var(--ink)}a.date-chip.is-featured:hover .date-num{color:var(--paper)}}
a.date-chip:active .date-tile{background:var(--cream)}a.date-chip.is-featured:active .date-tile{background:var(--ink)}a.date-chip.is-featured:active .date-num{color:var(--paper)}
a.date-chip:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.date-chip.is-low .chip-foot{color:var(--red)}
.date-chip.is-soldout .chip-foot{color:var(--ink)}
.date-chip.is-soldout .date-month{color:var(--muted)}
.chip-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.visit-soon{margin:14px 0 0;max-width:32em;font:700 var(--step--1)/1.45 var(--sans)}.visit-soon[hidden]{display:none}
.visit-door{margin-top:14px}
.visit-door p{margin:0;font:700 var(--step--1)/1.45 var(--sans)}
.visit-over p{margin:0;font:700 var(--step-2)/1.35 var(--sans)}
.visit-prices{display:flex;flex-wrap:wrap;gap:4px 18px;margin:var(--space-s) 0 0;padding-top:var(--space-s);border-top:2px solid var(--ink);font-size:var(--step-0);line-height:1.5}
.visit-prices>span{white-space:nowrap}
.visit-prices b{font-weight:700}
.home-visit .text-link{margin-top:6px}
.date-chips[hidden],.visit-door[hidden],.visit-over[hidden],.visit-prices[hidden],.home-visit .text-link[hidden]{display:none}
/* Under 1024 px „Dein Theaterabend“ stacks: two ~410 px columns squeezed the title and address into four lines
   and broke the date chips into 2x4. The previews row keeps its two columns down to 820. */
@media(width<1024px){
 .home-visit{grid-template-columns:minmax(0,1fr)}
 .home-visit>:first-child{padding-right:0}
 .home-visit>:nth-child(2){border-left:0;padding-left:0;margin-top:var(--space-m)}
}
@media(width<=820px){
 .home-previews{grid-template-columns:minmax(0,1fr)}
 .home-previews>:first-child{padding-right:0}
 .home-visit,.home-previews{padding:var(--space-m) 0}
 .home-previews>:nth-child(2){border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:35px}
 .facts-strip{gap:4px 20px;padding:10px var(--gutter)}
}
@media(width<=420px){.performance-band{display:block}.performance-band span{display:block}.home-gallery.has-photos{grid-template-columns:repeat(2,minmax(0,1fr))}.home-gallery figure:nth-child(3){display:none}.date-chips{column-gap:8px}.facts-strip{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){.date-chip .date-tile{transition:none}}
/* A state word from the shop (tickets.js) fades in instead of popping. */
.fade-in{animation:fade-in .2s ease-out}
@keyframes fade-in{from{opacity:0}}


/* Numbered photo captions (home teaser and /einblicke/ frames): the frame number in the title face, then caption · credit. */
.frame-edge{display:flex;gap:.6em;align-items:baseline;margin-top:8px;font:var(--step--2)/1.5 var(--sans);color:var(--muted)}
.frame-number{font:900 var(--step--2)/1.5 var(--title);letter-spacing:.06em;color:var(--ink)}