/* /tickets/: date rows (one link per date), prices, „Vor dem Besuch“. Phone first; new rules use the
   clamp tokens and only the breakpoints 1024 / 640 / 420. Titles use --title (Fira Sans Extra Condensed). */
.tickets-head{margin-bottom:var(--space-m)}
.tickets-head .section-kicker{margin:0 0 10px;color:var(--muted)}
/* Three facts under the title, label over value (not pills: the rows below already have bordered actions). */
.tickets-facts{display:flex;flex-wrap:wrap;gap:12px 24px;margin:14px 0 0}
.tickets-facts>div{display:grid;gap:2px}
.tickets-facts dt{font:700 12px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tickets-facts dd{margin:0;font:600 var(--step-2)/1.1 var(--title);letter-spacing:.01em}
.tickets-layout{display:grid;gap:var(--space-l)}
.tickets-page .tickets-subtitle{font:900 var(--step-5)/1.1 var(--title);letter-spacing:-.01em;margin:0 0 14px}

/* Date rows: the whole row is the link. Grid areas keep tile, text, badge and action in place. */
/* One grid for the whole list; rows and links share its columns (subgrid), so every action has the
   width of the longest label in the list and all left edges line up. Without subgrid each row keeps
   its own copy of the columns. As on the shop's date rows: kicker, weekday and time form one text
   block („Samstag 19:00“, the time wraps under a long weekday on narrow phones), the door line and
   the badge sit under it, and tile, text and action are centred on the row: the text rows sit between
   two flexible rows, so the block stays centred also when the line under it is empty. */
.date-list{display:grid;grid-template-columns:48px minmax(0,1fr) auto;column-gap:8px;list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.date-row{display:grid;grid-column:1/-1;grid-template-columns:subgrid;border-bottom:1px solid var(--rule)}
.date-link{position:relative;display:grid;grid-column:1/-1;grid-template-columns:48px minmax(0,1fr) auto;grid-template-columns:subgrid;grid-template-rows:1fr auto auto 1fr;grid-template-areas:"tile . cta" "tile text cta" "tile line cta" "tile . cta";column-gap:8px;align-items:center;min-height:84px;margin:0 -8px;padding:12px 8px;color:var(--ink);text-decoration:none}
a.date-link{transition:background-color .15s}
@media(hover:hover){a.date-link:hover{background:rgba(247,222,178,.6)}}a.date-link:active{background:rgba(247,222,178,.6)}
a.date-link:focus-visible{outline:3px solid var(--red);outline-offset:-3px}
.date-tile{grid-area:tile;display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:48px;box-sizing:border-box;border:2px solid var(--ink);background:var(--paper);line-height:1}
.date-num{font:900 24px/1 var(--title)}
.date-month{margin-top:4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.date-text{grid-area:text;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;min-width:0}
.date-label{width:100%;margin-bottom:3px;color:var(--red);font-size:12px;font-weight:700;letter-spacing:.1em;line-height:1.3;text-transform:uppercase}
.date-day{font:600 26px/1.05 var(--title);letter-spacing:0;min-width:0;overflow-wrap:break-word}
.date-time{color:var(--muted);font:600 17px/1.2 var(--title);letter-spacing:.01em;white-space:nowrap}
.date-door{grid-area:line;grid-column-end:-1;margin-top:4px;font-size:15px;font-weight:700;line-height:1.4}
/* The badge slot always exists (empty until the shop's availability arrives), so nothing moves. */
.date-badge{grid-area:line;justify-self:start;align-self:center;min-height:22px;margin-top:4px}
.date-badge:not(:empty){display:inline-flex;align-items:center;box-sizing:border-box;padding:3px 6px;border:1px solid var(--ink);background:var(--cream);font-size:11.5px;font-weight:700;line-height:1.2;white-space:nowrap}
.is-soldout .date-badge:not(:empty){background:var(--ink);color:var(--paper)}
/* Phones: the badge goes on the line under the weekday; the empty slot takes no room there. */
@media(width<=640px){.date-badge:empty{display:none}}
.date-cta{grid-area:cta;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;box-sizing:border-box;padding:8px 10px;border:1px solid var(--ink);background:var(--paper);font-size:15px;white-space:nowrap;font-weight:700;line-height:1.2;text-align:center;transition:background-color .15s,color .15s}
.is-featured .date-cta{background:var(--yellow)}
/* German: room for „Warteliste →“ from the start, so the actions do not widen when the shop reports a
   waiting list. (Greek „Εισιτήρια →“ is already the longest Greek label.) */
html:lang(de) .date-cta{min-width:7.7em}
.date-arrow{display:block;flex:none;transition:transform .15s}
@media(hover:hover){a.date-link:hover .date-cta{background:var(--ink);color:var(--yellow)}a.date-link:hover .date-arrow{transform:translateX(3px)}}
a.date-link:active .date-cta{background:var(--ink);color:var(--yellow)}a.date-link:active .date-arrow{transform:translateX(3px)}
.is-featured .date-tile{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.is-featured .date-num{color:var(--yellow)}
.is-soldout .date-day,.is-soldout .date-num{color:var(--muted)}
.is-soldout .date-tile{border-color:var(--muted)}
.is-boxoffice .date-tile{border-style:dashed}
.date-note,.share-intro{margin:12px 0 0;color:var(--muted);font-size:var(--step--1);line-height:1.5}
/* Pre-sale: a quiet word in the action's place (no border, no arrow: nothing to press yet). */
.date-soon{grid-area:cta;justify-self:end;align-self:center;color:var(--muted);font-size:var(--step--1);font-weight:600;line-height:1.3;white-space:nowrap;text-align:right}
/* Under 360 px a weekday („Donnerstag“, «Παρασκευή») and the action don't fit side by side: the action
   (or the pre-sale word) goes under the text, the text gets the whole width. */
@media(width<360px){
  .date-list{grid-template-columns:48px minmax(0,1fr)}
  .date-link{grid-template-columns:48px minmax(0,1fr);grid-template-columns:subgrid;grid-template-rows:1fr auto auto auto 1fr;grid-template-areas:"tile ." "tile text" "tile line" "tile cta" "tile ."}
  .date-cta,.date-soon{justify-self:start;margin-top:8px}
}
/* The one notice above the dates: cream panel, ink rule, title in the display face. */
.sales-notice{margin:0 0 18px;padding:16px 18px 17px;background:var(--cream);border-left:4px solid var(--ink)}
.sales-notice[hidden]{display:none}
.sales-notice p{margin:0;font-size:15px;line-height:1.5}
.sales-notice .sales-notice-title{margin:0 0 6px;font:900 var(--step-3)/1.2 var(--title)}
.is-soon .date-tile{background:var(--paper)}
/* The next date (tickets.js adds .is-next for the first 2.7 s): its tile pulses twice, a yellow ring. */
.is-next .date-tile{animation:next-pulse 1.1s var(--pulse-delay,.5s) 2 ease-out}
@keyframes next-pulse{0%{box-shadow:0 0 0 0 var(--yellow)}70%{box-shadow:0 0 0 12px color-mix(in srgb,var(--yellow) 0%,transparent)}100%{box-shadow:0 0 0 0 transparent}}

/* Past dates: collapsed under the list, quiet rows without action. */
.past-dates{margin-top:var(--space-s)}
.past-dates summary{display:flex;align-items:center;gap:12px;min-height:48px;cursor:pointer;font-size:16px;font-weight:700;list-style:none}
.past-dates summary::-webkit-details-marker{display:none}
.past-dates summary::before{content:'';width:7px;height:7px;margin:0 3px;border-right:2px solid;border-bottom:2px solid;transform:rotate(-45deg);transition:transform .15s}
.past-dates[open] summary::before{transform:rotate(45deg)}
.date-list-past{border-top:1px solid var(--rule)}
.is-past .date-link{min-height:64px;padding-top:8px;padding-bottom:8px;color:var(--muted)}
.is-past .date-tile{width:44px;height:44px;border-width:1px;border-color:var(--rule);background:none}
.is-past .date-num{font-size:20px}
.is-past .date-month{margin-top:2px;font-size:10px}
.is-past .date-day{font-size:20px}
.is-past .date-time{font-size:15px}

.dates-over{padding-top:18px;border-top:2px solid var(--ink)}
.dates-over p{margin:0 0 18px;font:900 var(--step-5)/1.15 var(--title)}
.route-link{margin-top:10px}

/* „Teilen“ under the dates: a quiet bordered button (the rows' action without the yellow), and the panel
   shown where the system share sheet is missing. Hidden in the HTML; tickets.js reveals it. */
.share{margin-top:var(--space-s)}
.share[hidden],.share-panel[hidden],.share-url[hidden]{display:none}
/* What the button shares and why (the presale note's look, see .date-note); inside the block, so it hides with it. */
.share-intro{margin:0 0 10px}
.share-intro-title{display:block;color:var(--ink);font-size:var(--step-0)}
.share-button{display:inline-flex;align-items:center;gap:8px;min-height:44px;box-sizing:border-box;padding:8px 16px;border:1px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);font-size:15px;font-weight:700;line-height:1.2;transition:background-color .15s,color .15s}
.share-button svg{display:block;flex:none}
.share-button[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
@media(hover:hover){.share-button:hover{background:var(--cream)}.share-button[aria-expanded="true"]:hover{background:var(--ink)}}
.share-panel{margin-top:10px;padding:12px;border:1px solid var(--ink);background:var(--cream)}
.share-links{display:flex;flex-wrap:wrap;gap:8px}
.share-links a,.share-links button{flex:1 1 9rem;display:flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;margin:0;padding:8px 10px;border:1px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);font-size:14px;font-weight:700;line-height:1.2;text-align:center;text-decoration:none;white-space:nowrap}
@media(hover:hover){.share-links a:hover,.share-links button:hover{background:var(--yellow)}}
.share-links a:focus-visible,.share-links button:focus-visible,.share-button:focus-visible{outline-offset:3px}
.share-url{margin:10px 0 0;font-size:14px;line-height:1.4;word-break:break-all}
/* The live region: read out, not shown (the copy button's own label says „Kopiert“). */
.share-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Prices: online tariffs, then the box office set apart (dashed), then the supporter tickets. */
.date-list[hidden],.tickets-info[hidden],.tickets-facts[hidden]{display:none}
.tickets-info{display:grid;gap:var(--space-m) var(--space-m);align-content:start}
.price-list{margin:0;border-top:2px solid var(--ink)}
.price-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;box-sizing:border-box;padding:10px 0;border-bottom:1px solid var(--rule)}
.price-row dt{display:grid;font-size:var(--step-0);font-weight:700;line-height:1.3}
.price-row dt small{color:var(--muted);font-size:var(--step--1);font-weight:400;line-height:1.4}
.price-row dd{margin:0;font:600 var(--step-5)/1 var(--title);font-variant-numeric:tabular-nums;white-space:nowrap}
.price-door{border-top:1px dashed var(--ink);margin-top:-1px}
.price-door dd{color:var(--muted)}
.supporter{margin-top:var(--space-m);padding:20px 18px 6px;background:var(--cream)}
.supporter h3{margin:0 0 6px;font:900 var(--step-2)/1.15 var(--title)}
.supporter>p{margin:0 0 14px;font-size:15px;line-height:1.5}
.supporter .price-row:last-child{border-bottom:0}
.supporter dt{grid-template-columns:28px auto;column-gap:12px;align-items:center}
.supporter dt .crown{grid-row:1/3;width:28px;height:28px}
.price-note{margin:14px 0 0;color:var(--muted);font-size:var(--step--1);line-height:1.5}

/* „Vor dem Besuch“: the visit facts on /tickets/. The shop order page keeps a shorter list of its own (copy.py tp_*). */
.visit-list{margin:0;border-top:2px solid var(--ink);font-size:16px;line-height:1.5}
.visit-list>div{display:grid;grid-template-columns:7.25rem minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--rule)}
.visit-list dt{font-weight:700;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.visit-list dd{margin:0}

/* „Fragen zu deinen Tickets“: native <details>, open and close without JS. Chevron as on .past-dates. */
.faq-list{border-top:2px solid var(--ink)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item summary{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 0;box-sizing:border-box;cursor:pointer;font-size:16px;font-weight:700;line-height:1.35;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:'';flex:none;width:7px;height:7px;margin:0 3px;border-right:2px solid;border-bottom:2px solid;transform:rotate(-45deg);transition:transform .15s}
.faq-item[open] summary::before{transform:rotate(45deg)}
.faq-item p{margin:0;padding:0 0 14px 25px;font-size:16px;line-height:1.5}
.faq-item a{color:inherit;text-decoration-thickness:1px;text-underline-offset:2px;overflow-wrap:anywhere}

/* A date's own page /termine/<date>/ (R63, scripts/build-date-pages.js): this page's head and layout for one
   evening. The evening is the title (one size down: a long date fits two lines on phones); its one row's
   action is yellow from the start, the page's main button. */
.date-page .page-title{font-size:var(--step-7);overflow-wrap:break-word}
html:lang(de) .date-page .page-title{hyphens:auto}
.date-lead{max-width:640px;margin:14px 0 0;font:var(--step-1)/1.5 var(--sans)}
.date-page .tickets-facts{margin-top:20px}
.date-page .date-cta{background:var(--yellow)}
.date-all{margin:var(--space-s) 0 0}

html:lang(el) .date-label{letter-spacing:.06em}



@media(width>420px){
  .date-list{grid-template-columns:56px minmax(0,1fr) auto;column-gap:14px}
  .date-link{grid-template-columns:56px minmax(0,1fr) auto;grid-template-columns:subgrid;column-gap:14px}
  .date-tile{width:56px;height:56px}
  .date-num{font-size:28px}
  .date-cta{gap:8px;padding:8px 14px;font-size:16px}
  html:lang(de) .date-cta{min-width:8.15em}
  .date-badge:not(:empty){padding:3px 8px;font-size:12px}
  
}
@media(width>640px){
  .tickets-facts>div+div{border-left:1px solid var(--rule);padding-left:24px}
  .date-list{grid-template-columns:64px minmax(0,1fr) 9rem auto;column-gap:20px}
  .date-link{grid-template-columns:64px minmax(0,1fr) 9rem auto;grid-template-columns:subgrid;grid-template-areas:"tile . badge cta" "tile text badge cta" "tile line badge cta" "tile . badge cta";column-gap:20px;min-height:92px;margin:0 -12px;padding:14px 12px}
  .date-tile{width:64px;height:64px}
  .date-num{font-size:32px}
  .date-day{font-size:30px}
  .date-text{column-gap:10px}
  .date-time{font-size:19px}
  .date-badge{grid-area:badge;justify-self:end;margin:0}
  .date-cta{min-height:48px;padding:10px 18px}
  html:lang(de) .date-cta{min-width:8.65em}
  
  
}
@media(width>640px) and (width<1024px){
  .tickets-info{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-m)}
  .ticket-faq{grid-column:1/-1}
}
@media(width>=1024px){
  .tickets-layout{grid-template-columns:minmax(0,1.4fr) minmax(340px,1fr);column-gap:var(--space-l);align-items:start}
}
@media(prefers-reduced-motion:reduce){
  a.date-link,.date-cta,.date-arrow,.past-dates summary::before,.faq-item summary::before,.share-button{transition:none}
  a.date-link:hover .date-arrow,a.date-link:active .date-arrow{transform:none}
}
/* „Nach der Vorstellung“ (app.js renderVoices, data in reviews.js): guest quotes, then press quotes, each group a
   kicker over a ruled list like the dates and prices (2 px ink top rule, 1 px rows). Serif italic for the words,
   the name in the title face, evening or outlet in muted meta. The first group ends with the note (the look of
   .date-note / .price-note) and, on the home page, „Alle Stimmen“. Hidden until the first quote.
   Home: its own row of the home grid between „Dein Theaterabend“ and the previews, same columns, centre rule,
   gutter and padding. data-layout (app.js): press = guests left, press right; guests / press-only = one list
   continued in the right column (no second kicker). ≤820: one column. /tickets/: the groups stack. */
.voices-body{display:grid;gap:var(--space-m)}
.voices-group{align-content:start;min-width:0}
.voices .section-kicker{margin:0 0 12px;line-height:1.5;color:var(--ink)}
.voice-list{display:grid;align-content:start;border-top:2px solid var(--ink)}
.voice{display:grid;align-content:start;gap:10px;min-width:0;margin:0;padding:var(--space-s) 0;border-bottom:1px solid var(--rule)}
.voice-quote{margin:0;font:italic 400 var(--step-2)/1.45 var(--serif);overflow-wrap:anywhere;text-wrap:pretty}
.voice-quote p{margin:0}
.voice-quote:lang(de){quotes:"\201E" "\201C"}
.voice-quote:lang(el){quotes:"\00AB" "\00BB"}
.voice-quote p::before{content:open-quote}
.voice-quote p::after{content:close-quote}
.voice-by{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0;overflow-wrap:anywhere;font:600 var(--step-0)/1.3 var(--title);letter-spacing:.01em}
.voice-by cite{font-style:normal}
.voice-meta{color:var(--muted);font:400 var(--step--1)/1.4 var(--sans)}
.voice-meta::before{content:"\00B7";margin-right:10px}
.voice-translated::before{content:"(";margin-right:0}.voice-translated::after{content:")"}
.voice-link{display:inline-flex;align-items:baseline;gap:.35em;color:var(--ink);font:700 var(--step--1)/1.4 var(--sans);text-decoration-thickness:1px;text-underline-offset:3px}
.voice-link svg{align-self:center}
.voices-note{margin:14px 0 0;max-width:40em;color:var(--muted);font-size:var(--step--1);line-height:1.5}
.voices .text-link{margin-top:6px}
.tickets-dates .voices{margin-top:var(--space-m)}
.home-voices{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:0;--tile-gap:clamp(36px,4.5vw,64px);align-items:start;padding:var(--space-l) 0;border-bottom:1px solid var(--rule)}
.home-voices>:first-child{padding-right:var(--tile-gap)}
.home-voices>:nth-child(2){border-left:1px solid var(--rule);padding-left:var(--tile-gap)}
/* Both columns share three rows (subgrid): kicker, list, note + link. So the two top rules sit at one height, also
   when the right column continues the list without a kicker, and the note sits under the longer column. */
.home-voices>.voices-group{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}
.home-voices .section-kicker{grid-row:1}
.home-voices .voice-list{grid-row:2}
.home-voices .voices-tail{grid-row:3}
@media(width<=820px){
  /* One column: the groups dissolve (display:contents) and the parts are reordered: kicker, list, its continuation
     (no second top rule), then note + link, then the press group. */
  .home-voices{grid-template-columns:minmax(0,1fr);grid-template-rows:none;padding:var(--space-m) 0}
  .home-voices>:first-child{padding-right:0}
  .home-voices>:nth-child(2){border-left:0;padding-left:0}
  .home-voices>.voices-group{display:contents}
  .home-voices .section-kicker,.home-voices .voice-list,.home-voices .voices-tail{grid-row:auto}
  .home-voices .voices-tail{order:1}
  .home-voices>.voices-group:not(:first-child):not(.voices-group-more)>*{order:2}
  .home-voices>.voices-group:not(:first-child) .section-kicker{margin-top:var(--space-m)}
  .home-voices>.voices-group-more .voice-list{border-top:0}
}