/* Friederike Roth – "Zwei Räume"
   Tokens from the approved click dummy. Mobile first; desktop layout from 900px. */

:root {
  --paper: #F7F4EE;
  --ink: #1D1B17;
  --gold: #7A5F28;
  --muted: #5C564C;
  --line: #DDD5C6;
  --sand: #EFEADF;
  --band: #E9E3D6;
  --white: #FFFFFF;
  --marker: #E8D9B0;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Source Sans 3', system-ui, sans-serif;
  --hand: 'Nothing You Could Do', cursive;

  --gutter: 20px;
  --section: 64px;
}
@media (min-width: 900px) {
  :root { --gutter: 80px; --section: 104px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: var(--gold); }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; }
.skip:focus { left: 8px; }

/* ── Perspective visibility (home) ─────────────────────────── */
[data-mode="start"] [data-show]:not([data-show~="start"]),
[data-mode="stage"] [data-show]:not([data-show~="stage"]),
[data-mode="class"] [data-show]:not([data-show~="class"]) { display: none !important; }

/* ── Typography helpers ────────────────────────────────────── */
.kicker { font: italic 22px/1.2 var(--serif); color: var(--gold); }
.kicker-caps { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.h-section { font: 500 40px/1.02 var(--serif); }
.h-section em { color: var(--gold); }
.h-xl { font-size: 44px; }
.h-feature { font: 500 36px/1.05 var(--serif); }
.h-box { font: 30px/1.15 var(--serif); }
.display { font: 500 64px/.95 var(--serif); }
/* tempo / subtitle: always below its title (programme rows, movement headings, sub-headings) */
.tempo-line, .row-sub { font: italic 18px/1.3 var(--serif); color: var(--muted); }
.lead { font-size: 18px; line-height: 1.6; color: var(--muted); }
.muted { color: var(--muted); font-size: 15px; }
.body-lg { font-size: 18px; line-height: 1.65; }
.center { text-align: center; }
.dates { font-size: .55em; color: var(--muted); white-space: nowrap; }
.link-strong { font-weight: 600; align-self: flex-start; }
@media (min-width: 900px) {
  .h-section { font-size: 52px; }
  .h-xl { font-size: 64px; }
  .h-feature { font-size: 52px; }
  .h-box { font-size: 36px; }
  .display { font-size: 104px; }
  .tempo-line, .row-sub { font-size: 21px; }
}

.stack { display: flex; flex-direction: column; gap: 18px; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }
.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--section); padding-bottom: var(--section); display: flex; flex-direction: column; gap: 40px; }
.prose p + p { margin-top: 1em; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 6px; }

/* Buttons */
.btn { min-height: 48px; padding: 0 24px; display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: var(--paper); font: 600 16px var(--sans); text-decoration: none; border: 1px solid var(--ink); cursor: pointer; }
.btn:hover { background: var(--gold); border-color: var(--gold); color: var(--paper); }
.btn-outline { background: transparent; color: var(--ink); }
.btn-outline:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-light:hover { background: var(--marker); border-color: var(--marker); color: var(--ink); }

.badges { display: flex; gap: 10px; flex-wrap: wrap; }
.badge { padding: 6px 12px; border: 1px solid var(--ink); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.badge-solid { background: var(--ink); color: var(--paper); }
.tag { align-self: flex-start; padding: 3px 8px; border: 1px solid var(--gold); color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* Quotes with hover marker */
.q { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.q p { font: italic 28px/1.35 var(--serif); }
.q cite { font-style: normal; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.q mark { background: transparent; color: inherit; box-shadow: inset 0 -0.05em 0 0 transparent; transition: box-shadow .45s ease; }
.q mark { transition: box-shadow .6s ease; }
.q mark + mark, .q mark ~ mark { transition-delay: .35s; }
/* marker strikes the key words when the quote scrolls into view (site.js), and on hover */
.q.marked mark, .q:hover mark, .q:focus-within mark { box-shadow: inset 0 -0.42em 0 0 var(--marker); }
.q-side p { font-size: 26px; }

/* ── Masthead: progress "bars" + header ────────────────────── */
.masthead { position: sticky; top: 0; z-index: 30; background: var(--paper); }
.takte { height: 8px; display: flex; border-left: 3px solid var(--ink); border-bottom: 1px solid var(--ink); }
.takte span { flex: 1; border-right: 1px solid var(--ink); background: transparent; }
.header { min-height: 64px; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.logo { font: 24px var(--hand); color: var(--ink); text-decoration: none; white-space: nowrap; }
.header-tools { display: flex; gap: 12px; align-items: center; }

.nav ul { list-style: none; margin: 0; padding: 0; }
.nav a { color: var(--ink); text-decoration: none; font-size: 15px; padding: 12px 0; white-space: nowrap; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--ink); }
.nav .num { font: 500 1.1em var(--serif); color: var(--gold); }

.lang { display: flex; border: 1px solid var(--ink); }
.lang a { min-height: 40px; min-width: 40px; padding: 0 10px; display: inline-flex; white-space: pre; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; }
.lang a[aria-current="true"] { background: var(--ink); color: var(--paper); }
.lang .long { display: none; }  /* phones and tablets: "DE" / "EN"; desktop: "DE · in B" / "EN · in B♭" */

.menu-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; }

/* Mobile navigation (below 1024px) */
@media (max-width: 1023px) {
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--ink); padding: 8px var(--gutter) 20px; }
  .nav.open { display: block; }
  .nav li a { display: block; padding: 14px 0; font-size: 22px; font-family: var(--serif); border-bottom: 1px solid var(--line); }
  .header { position: relative; }
}
@media (min-width: 1024px) {
  .header { min-height: 88px; padding-top: 8px; padding-bottom: 8px; }
  .logo { font-size: 28px; }
  /* the menu takes the free space and wraps when it gets narrow (see container query below) */
  .nav { flex: 1 1 auto; min-width: 0; container-type: inline-size; }
  .nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 22px; align-items: center; }
  .nav a { padding: 8px 0; }
  .menu-btn { display: none; }
  .lang a { min-height: 44px; padding: 0 14px; }
  .lang .long { display: inline; }
  .lang .short { display: none; }
}

/* Perspective switch */
.switch { display: flex; border: 1px solid var(--ink); background: var(--paper); }
.switch a { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; transition: background .3s ease, color .3s ease; }
.switch a[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.switch a:hover:not([aria-pressed="true"]) { background: var(--sand); }
.header-switch { visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility .3s ease; }
.header-switch.show { visibility: visible; opacity: 1; }
.nav-switch { display: none; }
/* phones and tablets: Bühne / Lehre sit in the header line, next to DE / EN and the menu button */
@media (max-width: 1023px) {
  .header { gap: 8px; }
  .header-tools { gap: 8px; }
  .header-switch a { min-height: 40px; padding: 0 10px; }
  .lang a { min-width: 36px; padding: 0 8px; }
  .menu-btn { width: 40px; height: 40px; }
}
@media (max-width: 420px) {
  :root { --gutter: 14px; }
  .logo { font-size: 19px; }
  .header-switch a, .lang a { padding: 0 7px; font-size: 12px; }
  .lang a { min-width: 30px; }
}
@media (max-width: 379px) {
  :root { --gutter: 12px; }
  .header, .header-tools { gap: 6px; }
  .logo { font-size: 17px; }
  .header-switch a, .lang a { padding: 0 6px; }
  .lang a { min-width: 28px; }
  .menu-btn { width: 36px; height: 36px; }
}
/* small desktops: a little less margin so the menu keeps room */
@media (min-width: 1024px) and (max-width: 1279px) {
  .header { padding-left: 40px; padding-right: 40px; gap: 24px; }
}

/* ── Home: tiles ───────────────────────────────────────────── */
.tiles { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.tile { position: relative; height: 260px; overflow: hidden; display: block; color: var(--white); text-decoration: none; background: #2A2620; border-bottom: 6px solid transparent; transition: border-color .4s ease; }
.tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .5s ease; }
.tile-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(transparent, rgba(20,18,14,.7)); }
.tile-text { position: absolute; left: var(--gutter); right: 16px; bottom: 18px; display: flex; flex-direction: column; gap: 4px; }
.tile-kicker { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.tile-title { font: 21px/1.05 var(--serif); }
.tile-more { font-size: 14px; opacity: .9; display: none; }
.tile:hover { color: var(--white); }
.tiles-switch { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); z-index: 2; }
.tile-stage { }
[data-mode="stage"] .tile-stage, [data-mode="class"] .tile-class { border-bottom-color: var(--gold); }
[data-mode="class"] .tile-stage .tile-img, [data-mode="stage"] .tile-class .tile-img { filter: grayscale(1) opacity(.45); }
@media (min-width: 900px) {
  .tile { height: 330px; }
  .tile-text { left: 56px; right: 56px; bottom: 22px; }
  .tile-title { font-size: 32px; }
  .tile-more { display: block; }
  .tiles-switch { top: 24px; }
  .switch a { padding: 0 16px; }
}

.announce { padding: 12px var(--gutter); background: var(--white); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.announce p { font-size: 15px; color: var(--muted); }
.url-chip { display: none; font: 13px ui-monospace, monospace; padding: 6px 10px; border: 1px solid var(--line); white-space: nowrap; }
@media (min-width: 900px) { .url-chip { display: inline-block; } }

/* ── Home: intro + pillars ─────────────────────────────────── */
.intro { padding-top: 40px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 28px; }
.intro-head { display: grid; gap: 20px; }
.pillars { display: grid; border-top: 1px solid var(--ink); }
.pillar { padding: 22px 0 14px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--line); }
.pillar h3 { font: 400 34px var(--serif); }
.pillar p { font-size: 16px; line-height: 1.6; }
.pillar-quote { margin: 0; padding-left: 14px; border-left: 1px solid var(--line); font-family: var(--serif); font-style: italic; }
.pillar-quote footer { font-size: 14px; font-style: normal; margin-top: 4px; }
@media (min-width: 900px) {
  .intro-head { grid-template-columns: 5fr 7fr; gap: 80px; align-items: end; }
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .pillar { padding: 22px 32px 8px; border-bottom: 0; border-right: 1px solid var(--line); }
  .pillar:first-child { padding-left: 0; }
  .pillar:last-child { padding-right: 0; border-right: 0; }
}

.band { height: 40px; background: var(--band); }

/* ── Home: programme ───────────────────────────────────────── */
.programme { padding: var(--section) var(--gutter); display: flex; flex-direction: column; gap: 28px; }
.programme-title { font-size: 15px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); text-align: center; }
.programme ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 18px 8px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background .25s ease; }
.row:hover { background: var(--sand); color: var(--ink); }
.row:hover .tempo { color: var(--gold); }
.row-num { font: 500 22px var(--serif); color: var(--gold); }
.row-main { display: flex; flex-direction: column; gap: 4px; }
.row-title { font: 500 30px/1.1 var(--serif); }
.pause { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 24px 8px; border-bottom: 1px solid var(--line); }
.pause-title { font: italic 30px var(--serif); }
.breath-wrap { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.breath { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--gold); animation: breath 4s ease-in-out infinite; }
@keyframes breath { 0%, 100% { transform: scale(.55); opacity: .45; } 50% { transform: scale(1); opacity: 1; } }
@media (min-width: 900px) {
  .programme { padding-left: 200px; padding-right: 200px; }
  .row, .pause { grid-template-columns: 72px minmax(0, 1fr); gap: 24px; padding: 24px 16px; }
  .row-num { font-size: 28px; }
  .row-title { font-size: 40px; }
  .pause { padding: 32px 16px; }
  .pause-title { font-size: 34px; }
}
@media (min-width: 900px) and (max-width: 1199px) { .programme { padding-left: var(--gutter); padding-right: var(--gutter); } }

/* landing page: choose a perspective before the programme begins */
.choose { display: flex; flex-direction: column; gap: 28px; align-items: center; text-align: center; padding-top: 8px; }
.choose-text { font: italic 24px/1.35 var(--serif); color: var(--muted); max-width: 640px; }
.choose-btns { display: grid; gap: 16px; width: 100%; }
.choose-btn { display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 28px 24px; border: 1px solid var(--ink); background: var(--white); color: var(--ink); text-decoration: none; transition: background .3s ease, color .3s ease; }
.choose-title { font: 500 40px/1 var(--serif); }
.choose-sub { font-size: 15px; color: var(--muted); transition: color .3s ease; }
.choose-btn:hover, .choose-btn:focus-visible { background: var(--ink); color: var(--paper); }
.choose-btn:hover .choose-sub, .choose-btn:focus-visible .choose-sub { color: var(--marker); }
@media (min-width: 700px) { .choose-btns { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (min-width: 900px) { .choose-text { font-size: 28px; } .choose-btn { padding: 44px 32px; } .choose-title { font-size: 56px; } }

/* ── Home: slots ───────────────────────────────────────────── */
.quote-hero { padding: var(--section) var(--gutter); background: var(--white); display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.quote-hero .q p { font-size: 30px; }
.quote-hero .hint { font-size: 13px; color: var(--muted); }
@media (min-width: 900px) {
  .quote-hero { padding: 112px 200px; }
  .quote-hero .q p { font-size: 44px; line-height: 1.3; }
}

.split { display: grid; gap: 40px; }
.split-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: center; }
  .split-4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
  .split-img { aspect-ratio: 4 / 5; }
}
.split-img.split-img-wide { aspect-ratio: 4 / 3; }  /* landscape photos: never forced into portrait */
/* photos whose whole figure matters (Kammermusik): never cropped, in their own proportions */
.split-img.split-img-full { aspect-ratio: auto; object-fit: contain; max-height: 60vh; width: auto; max-width: 75%; }

.list-rows { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--ink); font-size: 16px; }
.list-rows li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.list-defs li { display: flex; flex-direction: column; gap: 4px; }
.list-defs span { color: var(--muted); font-size: 15px; }

/* Recordings */
.section-head { display: flex; flex-direction: column; gap: 20px; }
.section-head .muted { max-width: 460px; font-size: 17px; }
@media (min-width: 900px) { .section-head { flex-direction: row; justify-content: space-between; align-items: end; gap: 40px; } }

.feature { display: grid; gap: 32px; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
.feature-cover .cover-img { width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 1px 0 var(--line); }
.feature-works { font: italic 24px/1.3 var(--serif); }
.q-feature { padding-left: 20px; border-left: 1px solid var(--gold); gap: 8px; }
.q-feature p { font-size: 22px; line-height: 1.4; }
.q-feature cite { font-size: 13px; }
@media (min-width: 900px) { .feature { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; padding-bottom: 56px; } }

.cd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
.cd { display: flex; flex-direction: column; gap: 8px; }
.cd-cover .cover-img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .3s ease; }
.cd-cover:hover .cover-img { transform: translateY(-4px); }
.cd-composer { font: 500 22px/1.15 var(--serif); }
.vol { color: var(--muted); }
.cd-meta { font-size: 14px; color: var(--muted); line-height: 1.4; }
@media (min-width: 700px) { .cd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cd-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.editions-box { display: grid; gap: 32px; padding: 28px 20px; background: var(--sand); }
.edition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.edition { display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.35; color: var(--ink); text-decoration: none; }
.edition img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--white); border: 1px solid var(--line); }
.edition:hover { color: var(--gold); }
@media (min-width: 900px) {
  .editions-box { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: center; padding: 40px; }
  .edition-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Lineage (class) */
.lineage-flow { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.chips li { padding: 8px 14px; border: 1px solid var(--ink); font-size: 15px; }
.chips-gold li { border-color: var(--gold); color: var(--gold); font-weight: 600; }
.flow-line { width: 1px; height: 36px; background: var(--ink); }
.lineage-name { font: 30px var(--hand); }

/* Artist / rediscovered / collaborators */
.columns-2 { display: grid; gap: 1em; font-size: 18px; line-height: 1.7; }
.columns-2 p + p { margin-top: 0; }
@media (min-width: 900px) { .columns-2 { grid-template-columns: 1fr 1fr; gap: 56px; } }

.sand { background: var(--sand); }
.find-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.find { background: var(--white); border: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.find strong { font: 500 24px/1.1 var(--serif); }

.collab-grid { display: grid; gap: 32px; }
.collab { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.collab img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.collab figcaption { display: flex; flex-direction: column; gap: 2px; }
.collab-name { font: 500 28px var(--serif); }
@media (min-width: 900px) { .collab-grid { grid-template-columns: 1fr 1fr; } }

/* Calls to action */
.cta-line, .cta-dark { margin-bottom: var(--section); padding: 32px 24px; display: flex; flex-direction: column; gap: 24px; }
.cta-line { border: 1px solid var(--ink); }
.cta-dark { background: var(--ink); color: var(--paper); }
@media (min-width: 900px) {
  .cta-line, .cta-dark { flex-direction: row; justify-content: space-between; align-items: center; gap: 40px; padding: 48px 56px; }
}

/* ── Simple pages ──────────────────────────────────────────── */
.page-head { padding: var(--section) var(--gutter); display: flex; flex-direction: column; gap: 18px; min-height: 50vh; }
.crumb { font-size: 14px; color: var(--muted); }
.page-404 .kicker { font-style: normal; }

/* ── Footer ────────────────────────────────────────────────── */
.footer { background: var(--ink); color: var(--paper); padding: 56px var(--gutter) 40px; display: flex; flex-direction: column; gap: 40px; }
.footer a { color: var(--paper); }
.footer a:hover { color: var(--marker); }
.motto { font: italic 26px var(--serif); }
.footer-grid { display: grid; gap: 28px; font-size: 15px; line-height: 1.6; }
.tuning { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.tuning button { min-height: 44px; padding: 0 16px; border: 1px solid var(--paper); background: transparent; color: var(--paper); font: 600 14px var(--sans); cursor: pointer; display: flex; gap: 8px; align-items: center; transition: background .3s ease, color .3s ease; }
.tuning-controls { display: flex; gap: 8px; }
.tune-play { width: 44px; justify-content: center; padding: 0 !important; }
.tuning button:hover { background: rgba(247,244,238,.12); }
.tune-play.ring { background: var(--paper) !important; color: var(--ink); }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; opacity: .8; }
@media (min-width: 900px) {
  .footer { padding-top: 72px; padding-bottom: 48px; }
  .motto { font-size: 30px; }
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
}

/* ── Subpages ──────────────────────────────────────────────── */
.gold { color: var(--gold); }
.small { font-size: 13px; }
.page-head-band { padding-top: 56px; padding-bottom: 48px; display: grid; gap: 24px; border-bottom: 1px solid var(--line); }
.kicker-lg { font-size: 24px; }
.lead-lg { font-size: 19px; }
@media (min-width: 900px) {
  .page-head-band { padding-top: 88px; padding-bottom: 72px; grid-template-columns: 6fr 6fr; gap: 80px; align-items: end; }
  .lead-lg { font-size: 20px; }
  .split-5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .split-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}

/* segmented buttons (bio length, filters) */
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--ink); align-self: flex-start; }
.seg button { min-height: 44px; padding: 0 16px; border: 0; background: transparent; color: var(--ink); font: 600 14px var(--sans); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg button:hover:not([aria-pressed="true"]) { background: var(--sand); }

/* biography */
.figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.figure figcaption { font-size: 13px; color: var(--muted); }
.bio-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }
.bio-text { display: flex; flex-direction: column; gap: 1em; font-size: 18px; line-height: 1.7; }
.bio-lead { font: 24px/1.5 var(--serif); }
[data-bio="short"] .bio-text p:not([data-len~="short"]),
[data-bio="medium"] .bio-text p:not([data-len~="medium"]),
[data-bio="long"] .bio-text p:not([data-len~="long"]) { display: none; }
@media (min-width: 900px) { .bio-lead { font-size: 26px; } }

.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.timeline li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.tl-year { font: 24px var(--serif); }
.tl-body { display: flex; flex-direction: column; gap: 4px; }
.tl-body strong { font-size: 17px; }
.tl-body span { font-size: 15px; color: var(--muted); }
@media (min-width: 900px) { .timeline li { grid-template-columns: 160px minmax(0, 1fr); gap: 32px; padding: 22px 0; } .tl-year { font-size: 26px; } }

.ensemble { display: grid; gap: 28px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.ensemble:last-child { border-bottom: 0; padding-bottom: 0; }
.ensemble-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Placeholder marker (content still to be replaced) */
.ph { position: relative; }
.ph img { display: block; outline: 3px dashed #B4441C; outline-offset: -3px; }
.tile.ph { position: relative; }
.tile .ph-tag { left: auto; right: 12px; }
.mt-collage .ph-tag { top: 6px; left: 6px; font-size: 10px; padding: 4px 6px; }
.ph-tag { position: absolute; z-index: 2; top: 12px; left: 12px; background: #B4441C; color: #fff; font: 600 12px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; }
@media (min-width: 900px) { .ensemble { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; align-items: center; } .ensemble-plain { grid-template-columns: minmax(0, 8fr); } }

/* quote cards */
.quote-grid { display: grid; gap: 24px; }
.q-card { padding: 28px; background: var(--white); border: 1px solid var(--line); }
.q-card p { font-size: 22px; line-height: 1.45; }
.q-card .q-orig { font-size: 15px; color: var(--muted); }
.q-card cite { font-size: 13px; }
@media (min-width: 900px) { .quote-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .quote-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* recordings list + filter */
.filter-bar { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
@media (min-width: 900px) { .filter-bar { align-items: flex-end; } }
a.cd { color: var(--ink); text-decoration: none; }
a.cd:hover .cd-composer { color: var(--gold); }
a.cd:hover .cd-cover .cover-img { transform: translateY(-4px); }
.cd[hidden] { display: none; }
@media (min-width: 1000px) { .cd-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; } }

/* CD detail */
.cd-detail { display: grid; gap: 40px; }
.cd-detail-cover .cover-img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.h-cd { font: 500 40px/1.05 var(--serif); }
.h-cd em { font-size: .62em; line-height: 1.25; display: inline-block; margin-top: 8px; }
.note-box { padding: 18px 20px; background: var(--sand); border-left: 2px solid var(--gold); font-size: 15px; line-height: 1.6; }
.note-lg { display: flex; flex-direction: column; gap: 12px; font-size: 17px; }
@media (min-width: 900px) {
  .cd-detail { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
  .h-cd { font-size: 64px; }
}
.back-bar { padding-top: 32px; }
.btn-back { min-height: 44px; font-size: 15px; }
@media (min-width: 900px) { .back-bar { padding-top: 48px; } .back-bar + .cd-detail { padding-top: 48px; } }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 32px; padding-bottom: var(--section); border-top: 1px solid var(--line); font-weight: 600; }

/* editions */
.edition-list { display: grid; gap: 40px; }
.edition-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: start; }
.edition-cover img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line); background: var(--white); }
.edition-work { font: italic 20px/1.3 var(--serif); }
.edition-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; font-weight: 600; padding-top: 4px; }
@media (min-width: 900px) { .edition-list { grid-template-columns: 1fr 1fr; gap: 48px 64px; } .edition-item { grid-template-columns: 180px minmax(0, 1fr); gap: 28px; } }

/* press */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.stats div { padding: 20px 16px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--muted); }
.stats div:nth-child(odd) { border-right: 1px solid var(--line); }
.stat-num { font: 500 52px/1 var(--serif); color: var(--ink); }
@media (min-width: 900px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats div { padding: 28px 24px; border-right: 1px solid var(--line); }
  .stats div:last-child { border-right: 0; }
  .stat-num { font-size: 64px; }
}
/* Biografie: Werdegang (links) und Auszeichnungen (rechts) nebeneinander */
.career { display: grid; gap: 48px; }
.career-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.career .timeline li { grid-template-columns: 72px minmax(0, 1fr); }
.career .tl-year small { display: block; font: 12px/1.2 var(--sans, inherit); letter-spacing: .04em; color: var(--muted); }
.award-more-head { margin: 16px 0 0; font: italic 18px var(--serif); color: var(--muted); }
.award-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 24px; border-top: 1px solid var(--ink); padding-top: 22px; }
.award-card { display: flex; flex-direction: column; gap: 4px; }
.award-card .tl-year { line-height: 1.2; margin-top: 6px; }   /* gleiche Größen wie im Werdegang */
.award-card strong { font-size: 17px; }
.award-text { font-size: 15px; color: var(--muted); }
.tl-photo { margin: 0; }
.tl-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.tl-photo figcaption { margin-top: 4px; font-size: 11px; color: var(--muted); }
@media (min-width: 900px) {
  .career { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .career .timeline li { grid-template-columns: 96px minmax(0, 1fr); gap: 20px; }
}
.card-grid { display: grid; gap: 16px; }

/* Press photo card: irregular mosaic, tile shape by position in the list
   a a b c c c
   a a b c c c
   d e e f f g
   d e e h h g */
.pcol { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 54px); gap: 4px; margin-bottom: 8px;
  grid-template-areas: "a a b c c c" "a a b c c c" "d e e f f g" "d e e h h g"; }
.pcol img { display: block; width: 100%; height: 100%; min-width: 0; object-fit: cover; transition: filter .4s ease; }
.pcol img:nth-child(1) { grid-area: a; }
.pcol img:nth-child(2) { grid-area: b; }
.pcol img:nth-child(3) { grid-area: g; }
.pcol img:nth-child(4) { grid-area: e; }
.pcol img:nth-child(5) { grid-area: d; }
.pcol img:nth-child(6) { grid-area: c; }
.pcol img:nth-child(7) { grid-area: f; }
.pcol img:nth-child(8) { grid-area: h; }
.dl-card-photos:hover .pcol img { filter: brightness(1.06); }

/* Press photos page */
.press-gallery { columns: 3 300px; column-gap: 24px; }
.pg-item { break-inside: avoid; margin: 0 0 32px; display: flex; flex-direction: column; gap: 10px; }
.pg-item img { display: block; width: 100%; height: auto; }
.pg-item figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.pg-dl { font-weight: 600; margin-top: 4px; }
.pg-note { margin-top: 8px; }
.dl-card { padding: 24px; background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; color: var(--ink); text-decoration: none; transition: transform .3s ease, border-color .3s ease; }
.dl-card strong { font: 500 24px/1.15 var(--serif); }
.dl-card span { font-size: 14px; color: var(--muted); }
.dl-card .gold { color: var(--gold); font-weight: 600; margin-top: auto; padding-top: 8px; }
.dl-card:hover { transform: translateY(-4px); border-color: var(--ink); color: var(--ink); }
@media (min-width: 700px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

/* contact form */
.form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; gap: 20px; }
@media (min-width: 700px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field select, .field textarea { font: 17px var(--sans); color: var(--ink); background: var(--white); border: 1px solid var(--ink); border-radius: 0; padding: 12px 14px; min-height: 48px; }
.field textarea { resize: vertical; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ink); }
.form .btn { align-self: flex-start; }
.form-error { padding: 12px 16px; border-left: 2px solid #9B2C1F; background: #F6E7E3; font-size: 15px; }
.form-done { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; padding: 40px; border: 1px solid var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aside { padding: 28px; background: var(--sand); gap: 24px; font-size: 16px; }
.aside .kicker { font-size: 20px; }
.aside-legal { font-size: 14px; color: var(--muted); line-height: 1.6; }

/* legal */
.legal { max-width: 820px; gap: 32px; }
.legal-sec { display: flex; flex-direction: column; gap: 10px; }
.legal-sec h2 { font: 500 28px/1.2 var(--serif); }
.legal-sec p { line-height: 1.7; }

/* Horizontally scrollable CD row (home) */
.cd-scroller { display: flex; flex-direction: column; gap: 16px; margin-right: calc(-1 * var(--gutter)); }
.cd-row { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px var(--gutter) 16px 0; scrollbar-width: thin; scrollbar-color: var(--gold) transparent; }
.cd-row > .cd { scroll-snap-align: start; color: var(--ink); text-decoration: none; }
.cd-row > .cd:hover .cd-composer { color: var(--gold); }
.cd-row:focus-visible { outline-offset: 6px; }
.scroll-btns { display: flex; gap: 10px; padding-right: var(--gutter); }
.scroll-btn { width: 48px; height: 48px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-size: 20px; cursor: pointer; }
.scroll-btn:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.scroll-btn:disabled { opacity: .3; cursor: default; }
@media (min-width: 700px) { .cd-row { grid-auto-columns: 30%; } }
@media (min-width: 1024px) { .cd-row { grid-auto-columns: 220px; gap: 32px; } .scroll-btns { align-self: flex-end; } }

/* ── One-page programme: movements ordered per perspective ─── */
.movements { display: flex; flex-direction: column; }
[data-mode="stage"] .movement { order: var(--o-stage); }
[data-mode="class"] .movement { order: var(--o-class); }
.movement { scroll-margin-top: 0; border-top: 1px solid var(--line); }  /* the heading's top padding clears the sticky header */
.movement [id] { scroll-margin-top: 110px; }
.movement-head { padding-top: var(--section); display: grid; gap: 20px; }
.movement-head + .section { padding-top: 48px; }
@media (min-width: 900px) { .movement-head { grid-template-columns: 6fr 6fr; gap: 80px; align-items: end; } }
.sand > .movement-head { padding-bottom: 0; }
.movement-kontakt, .movement-kammermusik { border-top: 0; }
/* movement heading = a programme row: number, title, tempo below */
.mv-title { display: flex; align-items: baseline; }
.mv-num { font: 500 30px/1.02 var(--serif); color: var(--gold); margin-right: 16px; min-width: 1.6em; }
.mv-num:empty { display: none; }
@media (min-width: 900px) { .mv-num { font-size: 44px; margin-right: 24px; } }
.disco-head { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) { .disco-head { flex-direction: row; justify-content: space-between; align-items: end; } }
.find-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1000px) { .find-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cta-inline { margin: 8px 0 0; padding: 28px; flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; }
.aside-white { background: var(--white); border: 1px solid var(--line); }
.cd-row > .cd[hidden] { display: none; }

.nav-programme a { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 1023px) { .nav li.nav-programme a { font: 600 13px var(--sans); letter-spacing: .22em; } }

/* not enough room for one line: "Programm" on its own line, the movements below (wrapping further if needed) */
@container (max-width: 680px) {
  .nav li.nav-programme { flex-basis: 100%; text-align: center; }
}

/* scrollspy: the menu marks the movement currently on screen */
.nav a.is-current { border-bottom-color: var(--gold); }
.nav a.is-current .num { color: var(--gold); opacity: 1; }

/* Musiketage */
.mt-collage { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1.4fr 1fr; gap: 6px; aspect-ratio: 4 / 3; align-self: start; width: 100%; max-width: 560px;
  grid-template-areas: "probe hof" "dach schild"; }
.mt-collage figure { margin: 0; overflow: hidden; min-height: 0; }
.mt-collage img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mt-collage figure:hover img { transform: scale(1.04); }
.mt-dach { grid-area: dach; } .mt-probe { grid-area: probe; } .mt-hof { grid-area: hof; } .mt-schild { grid-area: schild; }
.mt-dach img { object-position: center 70%; }   /* Dachbalken oben abschneiden, Musiker und Publikum bleiben */
.mt-probe img { object-position: 60% 35%; }
.mt-hof img { object-position: 38% center; }     /* Giebel des Backsteinhauses */
.mt-schild img { object-position: 78% center; }  /* Schild mit Förderhinweis */

/* Klasse: Noten + Einspielung als Paar */
.praxis-list { display: grid; gap: 40px; }
.praxis-item { display: grid; gap: 20px; align-items: start; }
.praxis-media { display: flex; gap: 12px; }
.praxis-media a { width: 50%; max-width: 160px; }
.praxis-score img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line); background: var(--white); }
.praxis-cd .cover-img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.praxis-cd .seal { min-width: 40px; }
@media (min-width: 900px) { .praxis-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } }

/* Bühne: rotating press quotes (all stacked in one grid cell, so the height never jumps) */
.rot-stage { display: grid; width: 100%; }
.rot-item { grid-area: 1 / 1; align-self: center; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; }
.rot-item.is-active { opacity: 1; visibility: visible; }
.rot-dots { display: flex; gap: 6px; }
.rot-dots button { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rot-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--gold); transition: background .3s ease; }
.rot-dots button[aria-pressed="true"]::before { background: var(--gold); }

/* ── Prize sticker on CD covers ────────────────────────────── */
.cover-wrap { position: relative; display: block; }
.seal { position: absolute; right: 6%; bottom: 6%; width: 30%; min-width: 58px; max-width: 150px; aspect-ratio: 1; border-radius: 50%;
  container-type: inline-size; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #F1DFA6 0%, #D4B068 38%, #A9843E 78%, #8A6A2E 100%);
  box-shadow: 0 2px 6px rgba(20, 18, 14, .35), inset 0 0 0 1px rgba(255, 255, 255, .35); transform: rotate(-8deg); }
.seal-inner { position: absolute; inset: 7%; border-radius: 50%; border: 1px solid rgba(29, 27, 23, .55);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; color: #1D1B17; text-align: center; }
.seal-logo { width: 74%; height: auto; }
.seal-top { font: 600 11cqw/1 var(--sans); letter-spacing: .12em; }
.seal-name { font: 600 15cqw/1 var(--serif); letter-spacing: .04em; }
.seal-opus-dor .seal-name { font-size: 20cqw; font-style: italic; }
.seal-year { font: 600 10cqw/1 var(--sans); letter-spacing: .14em; }
.feature-cover .seal, .cd-detail-cover .seal { width: 26%; }
.seal-badge { position: absolute; right: 6%; bottom: 6%; width: 18%; min-width: 40px; max-width: 75px; height: auto;
  box-shadow: 0 2px 6px rgba(20, 18, 14, .35); }
.seal-badge-round { width: 27.6%; min-width: 55px; max-width: 127px; border-radius: 50%; box-shadow: none; transform: rotate(-20deg);
  filter: drop-shadow(0 2px 4px rgba(20, 18, 14, .35)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}