/* petzold-jazz.de. One frame (52rem, centred) for every page: the sax-keys banner, the orange tabs, the text on a
   warm grey. Source Sans 3 for reading, Source Serif 4 for titles and quotations. Every element below is drawn by one
   component in bauen.py; there is no per-page styling. */

@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('../_schrift/source-sans-3-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('../_schrift/source-sans-3-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url('../_schrift/source-sans-3-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url('../_schrift/source-sans-3-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('../_schrift/source-serif-4-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('../_schrift/source-serif-4-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url('../_schrift/source-serif-4-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url('../_schrift/source-serif-4-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --navy: #15162b;          /* the dark cloth behind the sax keys */
  --orange: #e8661f;        /* the tabs; orange also means sound */
  --orange-hi: #f58a3c;
  --orange-ink: #b84b0e;
  --link: #a3221a;
  --ink: #232327;
  --muted: #55555c;
  --rule: rgba(0, 0, 0, .13);
  --page: #d4d4d1;
  --card: #f7f7f4;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius: 10px;
  --col: 40rem;             /* the reading measure: about 70 characters a line */
  --frame: 52rem;           /* banner, tabs, content and footer share this width on every page (the menu needs ~45rem) */
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 4.5rem; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font: 400 clamp(1.125rem, 1.05rem + .3vw, 1.25rem)/1.6 var(--sans);
  font-kerning: normal; font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--orange-ink); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 3px; }
/* icons (Lucide): inline in buttons and links, the size of the text; play and pause filled */
.ic { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.18em; }
.ic-play, .ic-pause, .ic-skip-back, .ic-skip-forward { fill: currentColor; }
.in-korb, .zum-korb, .korb-link { display: inline-flex; align-items: center; gap: .45em; }
.zum-korb[hidden] { display: none; }
.in-korb .ic { width: 1.05em; height: 1.05em; }
/* beside links: leaving the site, a PDF, an e-mail address (the masks: bauen.py, --ic-…) */
.prose a[href^="http"]:not([href*="petzold"])::after, .prose a[href$=".pdf"]::before, a[href^="mailto:"]::before {
  content: ''; display: inline-block; width: .85em; height: .85em; background: currentColor; vertical-align: -.08em;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.prose a[href^="http"]:not([href*="petzold"])::after { --ic: var(--ic-external-link); margin-left: .2em; }
.prose a[href$=".pdf"]::before { --ic: var(--ic-file-text); margin-right: .25em; }
a[href^="mailto:"]::before { --ic: var(--ic-mail); margin-right: .3em; }
.prose a:has(> img)::after, .prose a:has(> img)::before { content: none; }
/* a link to the contact form (instead of "write me an e-mail"): ?thema=noten chooses the topic there */
.prose a[href*="kontakt/"] { font-weight: 600; white-space: nowrap; }
.prose a[href*="kontakt/"]::before { content: ''; display: inline-block; width: .9em; height: .9em; margin-right: .3em; vertical-align: -.1em; background: currentColor;
  -webkit-mask: var(--ic-send) center / contain no-repeat; mask: var(--ic-send) center / contain no-repeat; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 99; background: #fff; padding: .5rem 1rem; }

/* ------------------------------------------------------------ banner + tabs */
.hero {
  position: relative; min-height: clamp(96px, 11vw, 150px);
  background-color: var(--navy); background-position: center 35%; background-size: cover; background-repeat: no-repeat;
  display: flex; align-items: flex-end;
}
.hero::after {   /* a little shade at the top, for the name on the brass */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21,22,43,.5) 0%, rgba(21,22,43,0) 45%, rgba(21,22,43,0) 80%, rgba(21,22,43,.25) 100%);
}
.hero-inner { width: 100%; max-width: var(--frame); margin: 0 auto; padding: .75rem var(--gutter) .8rem; }
.brand { position: absolute; z-index: 1; top: 1rem; left: max(var(--gutter), calc((100% - var(--frame)) / 2 + var(--gutter))); color: #fff; text-decoration: none; font: 700 .875rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .92; }
.brand:hover { color: #fff; opacity: 1; }
.hero-home { min-height: clamp(170px, 20vw, 270px); background-position: center 30%; }
.hero-home::after { background: linear-gradient(180deg, rgba(21,22,43,.3) 0%, rgba(21,22,43,0) 38%, rgba(21,22,43,.15) 60%, rgba(21,22,43,.78) 100%); }
.hero h1, .hero .kicker { position: relative; z-index: 1; }
.hero h1 { margin: 0; color: #fff; font: 500 clamp(2.1rem, 5.5vw, 3.6rem)/1.1 var(--serif); font-optical-sizing: auto; text-shadow: 0 1px 12px rgba(0,0,0,.45); text-wrap: balance; }
.hero .kicker { margin: 0 0 .3rem; color: #ffd9b8; font: 700 .875rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.5); }

.tabs {
  position: sticky; top: 0; z-index: 20;
  background: var(--orange);
}
.tabs-inner { max-width: var(--frame); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; }
.tabs ul { list-style: none; margin: 0 0 0 -.8rem; padding: 0; display: flex; flex-wrap: nowrap; }
.tabs a { display: block; color: #fff; text-decoration: none; font: 600 .98rem/1 var(--sans); padding: 1.05rem .75rem 1rem; white-space: nowrap; }
.tabs a:hover { background: rgba(255,255,255,.14); color: #fff; }
.tabs a[aria-current], .tabs a[aria-current]:hover { background: var(--navy); color: #fff; font-weight: 700; }
.tabs .brand-mini, .menu-btn { display: none; }
/* the basket in the menu bar, at the right, from the first CD on: the cart and how many */
.tabs a.korb-link { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; padding: .75rem .8rem; }
.tabs a.korb-link[hidden] { display: none; }
.tabs a.korb-link .ic { width: 1.3rem; height: 1.3rem; }
.tabs .korb-zahl { min-width: 1.35rem; padding: .2rem .35rem; border-radius: 999px; background: #fff; color: var(--orange-ink); font: 700 .875rem/1 var(--sans); text-align: center; }
body.art-bestellen .tabs a.korb-link { background: var(--navy); }

@media (max-width: 940px) {
  .tabs-inner { justify-content: space-between; min-height: 3.25rem; flex-wrap: wrap; }
  .tabs a.korb-link { order: 1; margin-right: .5rem; border-top: 0; padding: .6rem .7rem; border-radius: 999px; }   /* phone: the name, the basket, the menu button */
  .menu-btn { order: 2; }
  .tabs ul { order: 3; }
  .tabs .brand-mini { display: block; color: #fff; text-decoration: none; font: 700 .95rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 1.15rem .5rem; }
  .brand-mini:hover { color: #fff; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: .6rem; appearance: none; border: 0; cursor: pointer;
    background: rgba(255,255,255,.18); color: #fff; font: 700 .95rem/1 var(--sans); padding: .7rem .95rem; border-radius: 999px;
  }
  .menu-btn .ic { width: 18px; height: 18px; }
  .menu-btn .ic-x, .menu-btn[aria-expanded="true"] .ic-menu { display: none; }
  .menu-btn[aria-expanded="true"] .ic-x { display: block; }
  .js .tabs ul { display: none; }
  .tabs ul { flex-direction: column; width: 100%; margin: 0; padding: .25rem 0 .75rem; }
  .js .tabs.open ul { display: flex; }
  .tabs a { padding: .85rem .5rem; font-size: 1.08rem; border-top: 1px solid rgba(255,255,255,.2); }
  .tabs a[aria-current] { border-top-color: transparent; }
  .hero .brand { display: none; }
  .home .brand-mini { visibility: hidden; }
  .home .tabs.stuck .brand-mini { visibility: visible; }
}

/* ------------------------------------------------------------ the page */
.wrap { max-width: var(--frame); margin: 0 auto; padding: clamp(1.25rem, 4vw, 3rem) var(--gutter) 4rem; }
.wrap > article, .wrap > .page-title, .wrap > .untertitel, .wrap > .text-meta, .wrap > .crumbs { max-width: var(--col); }
.crumbs { font-size: .95rem; margin: -.25rem 0 .6rem; color: var(--muted); }
.crumbs a { color: inherit; font-weight: 600; }
.page-title { margin: 0 0 clamp(1.25rem, 3vw, 2rem); font: 500 clamp(2rem, 4.6vw, 3rem)/1.12 var(--serif); font-optical-sizing: auto; letter-spacing: -.005em; color: var(--ink); text-wrap: balance; hyphens: manual; }
.untertitel { margin: calc(-1 * clamp(.75rem, 2vw, 1.4rem)) 0 1.25rem; font: italic 400 clamp(1.15rem, 2vw, 1.35rem)/1.4 var(--serif); color: var(--muted); text-wrap: balance; }
.text-meta { margin: -.5rem 0 1.75rem; font-size: .95rem; color: var(--muted); }

/* running text */
.prose { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
.prose::after { content: ''; display: table; clear: both; }
.prose > :first-child, .prose-teil > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol, .prose figure, .prose table, .prose dl { margin: 0 0 1em; }
.prose p, .prose li { text-wrap: pretty; hanging-punctuation: first last; }
.prose li + li { margin-top: .3em; }
.prose ul { padding-left: 1.25rem; }
.prose ol { padding-left: 1.5rem; }
.prose h2 { font: 500 clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem)/1.2 var(--serif); font-optical-sizing: auto; margin: 2.2em 0 .55em; text-wrap: balance; hyphens: manual; clear: both; }
.prose h3 { font: 700 1em/1.4 var(--sans); margin: 1.9em 0 .35em; text-wrap: balance; hyphens: manual; }
.prose h2 + p, .prose h3 + p, .prose h2 + h3 { margin-top: 0; }
.prose [id] { scroll-margin-top: 5.5rem; }
.prose b, .prose strong { font-weight: 700; }
.prose .lead { font-size: 1.15em; line-height: 1.5; }
.prose .notiz, .prose figcaption { font-size: .95rem; color: var(--muted); line-height: 1.5; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }
.prose sup { font-size: .875em; line-height: 0; }

/* quotations: serif, an orange rule, the source below */
.prose blockquote { margin: 1.75em 0; padding: 0 0 0 1.25rem; border-left: 3px solid var(--orange); }
.prose blockquote p { font: 400 1em/1.6 var(--serif); margin: 0 0 .6em; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose .quelle { margin: -.9em 0 1.75em calc(1.25rem + 3px); font-size: .95rem; line-height: 1.45; color: var(--muted); }
.prose .quelle::before { content: '— '; }

/* pictures */
.prose figure { margin-left: 0; margin-right: 0; }
.prose figure img { display: block; border-radius: 4px; }
.prose figure figcaption { margin-top: .5em; }
.prose figure.portrait { float: right; width: min(42%, 15rem); margin: .35em 0 1rem 1.75rem; }
.prose figure.portrait img { width: 100%; }
.prose figure.portrait:has(img[width]) { width: auto; max-width: min(42%, 15rem); }   /* never bigger than its file */
.prose figure.portrait:has(img[width]) img { width: auto; }
/* a small picture beside the text, at its own size */
.prose figure.klein { float: right; max-width: min(42%, 15rem); margin: .35em 0 1rem 1.75rem; }
/* pictures in a row: side by side, at the top of each other */
.prose .bildreihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; margin: 1.5em 0; }
.prose .bildreihe.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prose .bildreihe figure { margin: 0; }
.prose .bildreihe img { width: 100%; }
.prose img.hoch { max-width: min(100%, 20rem); }   /* a picture in portrait format on its own: not as wide as the column */
.prose .bildreihe img.hoch, .prose figure.hochformat img.hoch, .prose figure.portrait img.hoch, .nebenbei img.hoch { max-width: 100%; }   /* a row reads as one: every picture fills its column */
@media (max-width: 480px) { .prose .bildreihe.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* a picture shown smaller than its file opens large on a click (site.js) */
.prose img.zoombar { cursor: zoom-in; }
.bildfenster { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; }
.bildfenster::backdrop { background: rgba(10,10,20,.85); }
.bildfenster img { display: block; max-width: 96vw; max-height: 96vh; width: auto; height: auto; border-radius: 4px; cursor: zoom-out; }

/* a picture in portrait format beside the text, where there is room (bauen.py marks it; site.js too) */
.prose figure.hochformat { float: right; width: min(40%, 15rem); margin: .35em 0 1rem 1.75rem; }
.prose figure.hochformat img { width: 100%; }
.nebenbei.neben { float: right; width: min(40%, 15rem); margin: .35rem 0 1rem 1.75rem; }
.nebenbei.neben img { width: 100%; max-width: none; }
.nebenbei.neben figure { margin: 0; }
article > .more, article > .blaettern { clear: both; }
.blaettern { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.blaettern a { display: block; text-decoration: none; color: var(--ink); font: 500 1.15rem/1.3 var(--serif); }
.blaettern a.weiter { text-align: right; grid-column: 2; }
.blaettern small { display: block; margin-bottom: .2rem; font: 600 .95rem/1.3 var(--sans); color: var(--orange-ink); }
.blaettern a:hover { color: var(--orange-ink); }
@media (max-width: 480px) { .blaettern { grid-template-columns: 1fr; } .blaettern a.weiter { grid-column: 1; text-align: left; } }
/* where the window has room beside the frame, the portrait picture hangs there and the text keeps its full width */
/* The text column (40rem) sits at the left of the 52rem frame; right of it, in the frame and the window's margin, is
   room for the picture: half the window minus 264px (frame offset + gutter + text). The picture takes what is there,
   between 8rem and 15rem, so from a window of about 54rem it always stands beside the text. */
@media (min-width: 54rem) {
  .prose figure.hochformat { --w: clamp(8rem, calc(50vw - 264px - 3rem), 15rem); width: var(--w); margin: .35em calc(-1 * var(--w) - 1.5rem) 1rem 0; }
}
@media (max-width: 560px) {
  .prose figure.hochformat, .nebenbei.neben { float: none; width: min(70%, 16rem); margin: 0 0 1.25rem; }
}

/* chord charts (Big Relief) */
.prose table.akkorde { border-collapse: collapse; font-weight: 600; margin: 0 0 1.25rem; }
.prose table.akkorde td { border: 1px solid rgba(0,0,0,.35); padding: .2rem .55rem; min-width: 3rem; }
.prose table.akkorde p { margin: 0; }

/* section headings inside a page: Besetzung, Titel, Pressestimmen, Verwandte Texte */
.prose h2.abschnitt { font: 500 1.4rem/1.25 var(--serif); color: var(--ink); margin: 2.25em 0 .75em; }
.prose h2.abschnitt:first-child { margin-top: 0; }
.kicker-klein, .prose .kicker-klein { margin: 0 0 .35rem; font: 600 .95rem/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--orange-ink); }

/* ------------------------------------------------------------ an album (or a programme, a book): head, facts */
.prose .album { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 0 1.75rem; align-items: start; margin: 0 0 2rem; }
.prose .album.ohne-cover { grid-template-columns: minmax(0, 1fr); }
.prose .album-cover { margin: 0; }
.prose .album-cover img { width: 100%; border-radius: 3px; box-shadow: 0 10px 26px -14px rgba(0,0,0,.6); }
.prose .album-info > :last-child { margin-bottom: 0; }
.prose .album-info .lead { margin-top: 0; }
@media (max-width: 560px) {
  .prose .album { grid-template-columns: 1fr; }
  .prose .album-cover { max-width: 12rem; margin-bottom: 1.25rem; }
}
.prose dl.fakten { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem 1rem; font-size: .95em; line-height: 1.45; }
.prose dl.fakten dt { color: var(--muted); }
.prose dl.fakten dd { margin: 0; hyphens: manual; }
@media (max-width: 420px) { .prose dl.fakten { grid-template-columns: 1fr; } .prose dl.fakten dd { margin-bottom: .45rem; } }

/* the line-up: name, then instrument */
.prose h3.besetzung-gruppe { font: 600 1.05em/1.3 var(--serif); margin: 1.5em 0 .6em; }
.prose ul.besetzung { list-style: none; padding: 0; margin: 0 0 1.5em; columns: 2 15rem; column-gap: 2rem; }
.prose ul.besetzung li { break-inside: avoid; margin: 0 0 .5em; line-height: 1.35; hyphens: manual; }
.prose ul.besetzung li b { display: block; }
.prose ul.besetzung li span { font-size: .95em; color: var(--muted); }

/* the track list; excerpts play right in it */
.prose ol.titelliste { list-style: none; padding: 0; margin: 0 0 1.75em; counter-reset: t; border-top: 1px solid var(--rule); }
.prose ol.titelliste > li {
  counter-increment: t; display: grid; grid-template-columns: 1.6rem 2.1rem minmax(0, 1fr) auto;
  grid-template-areas: 'num play title time' '. . bar bar'; align-items: center; column-gap: .6rem; row-gap: .25rem;
  margin: 0; padding: .42rem 0; max-width: none; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none;
  font-size: 1em; line-height: 1.35;
}
.prose ol.titelliste > li::before { content: counter(t); grid-area: num; text-align: right; font-size: .9375em; font-variant-numeric: tabular-nums; color: var(--muted); }
.prose ol.titelliste > li > .track-title { grid-area: title; white-space: normal; font-weight: 400; }
.prose ol.titelliste > li.track > .track-title { font-weight: 700; }
.prose ol.titelliste .titel-info { font-weight: 400; font-size: .9375em; color: var(--muted); }
.prose ol.titelliste .titel-dauer { font-weight: 400; font-size: .9375em; color: var(--muted); font-variant-numeric: tabular-nums; }
.prose ol.titelliste .titel-dauer::before { content: '· '; }
.prose ol.titelliste .play { width: 2.1rem; height: 2.1rem; }
.prose ol.titelliste .play svg { width: 12px; height: 12px; }
.prose ol.titelliste > li.track:not(.current) .bar { display: none; }
.prose ol.titelliste > li.track.current { background: none; }
.prose ol.titelliste > li.track.current > .track-title { color: var(--orange-ink); }

/* reviews: the quote, its source; on Pressestimmen with a small picture */
.prose .presse { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1.75rem; padding: 1.75rem 0; border-top: 1px solid var(--rule); }
.prose h2.abschnitt + .presse, .prose > .presse:first-child, .prose-teil + .presse { border-top: 0; padding-top: 0; }
.prose .presse:has(.presse-bild) { grid-template-columns: minmax(0, 1fr) 8.5rem; }
.prose .presse > blockquote { grid-column: 1; margin: 0 0 .9rem; }
.prose .presse > .quelle { grid-column: 1; margin: 0 0 0 calc(1.25rem + 3px); }
.prose .presse-bild { grid-column: 2; grid-row: 1 / span 2; margin: .3rem 0 0; }
.prose .presse-bild img { width: 100%; border-radius: 3px; box-shadow: 0 8px 20px -12px rgba(0,0,0,.5); }
@media (max-width: 560px) {
  .prose .presse:has(.presse-bild) { grid-template-columns: minmax(0, 1fr); }
  .prose .presse-bild { grid-column: 1; grid-row: auto; max-width: 9rem; margin: 0 0 1rem; }
}

.prose h3.presse-gruppe { font: 600 1.05em/1.3 var(--serif); margin: 2em 0 .25em; }

/* a way to act at the end of a page */
.prose .kontakt-kasten { margin: 2.25em 0 1em; padding: 1.25rem 1.4rem; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 26px -18px rgba(0,0,0,.4); }
.prose .kontakt-kasten > :last-child { margin-bottom: 0; }
.prose .kasten-h { margin: 0 0 .4rem; font: 600 .95rem/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--orange-ink); }

/* ------------------------------------------------------------ the CDs overview: one entry per album */
.prose .cd-eintrag { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 0 1.5rem; align-items: start; padding: 1.75rem 0; border-top: 1px solid var(--rule); }
.prose .cd-eintrag-cover { margin: 0; }
.prose .cd-eintrag-cover img { width: 100%; border-radius: 3px; box-shadow: 0 8px 22px -12px rgba(0,0,0,.55); transition: box-shadow .2s; }
.prose .cd-eintrag-cover a:hover img { box-shadow: 0 14px 30px -12px rgba(0,0,0,.75); }
.prose .cd-eintrag h2 { margin: 0 0 .2rem; font-size: 1.45rem; }
.prose .cd-eintrag h2 a { color: inherit; text-decoration: none; }
.prose .cd-eintrag h2 a:hover { color: var(--orange-ink); }
.prose .cd-eintrag-nr { margin: 0 0 .5rem; font-size: .9375rem; color: var(--muted); }
.prose .cd-eintrag-zeile { font-style: italic; }
.prose .cd-eintrag-text > :last-child { margin-bottom: 0; }
@media (max-width: 560px) { .prose .cd-eintrag { grid-template-columns: 1fr; } .prose .cd-eintrag-cover { max-width: 10rem; margin-bottom: 1rem; } }

/* ------------------------------------------------------------ lists of pages (texts), PDFs, a CV */
.prose ul.verzeichnis { list-style: none; padding: 0; margin: 0 0 2em; border-top: 1px solid var(--rule); }
.prose ul.verzeichnis > li { margin: 0; padding: .85rem 0 .95rem; border-bottom: 1px solid var(--rule); }
.prose ul.verzeichnis .v-titel { font: 500 1.15em/1.3 var(--serif); text-decoration: none; color: var(--ink); hyphens: manual; text-wrap: balance; }
.prose ul.verzeichnis a.v-titel:hover { color: var(--orange-ink); text-decoration: underline; text-decoration-thickness: 1px; }
.prose ul.verzeichnis .v-jahr { font-size: .875em; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: .35rem; }
.prose ul.verzeichnis p { margin: .2rem 0 0; font-size: .95em; line-height: 1.5; color: var(--muted); }
.prose ul.pdf-liste { list-style: none; padding: 0; margin: 1.5em 0; }
.prose ul.pdf-liste a { font-weight: 700; }
.prose ul.pdf-liste span { color: var(--muted); font-size: .95em; }
/* (not a grid: so the lines can run beside a picture and then use the whole width again) */
.prose dl.zeitleiste { margin: 0 0 2em; }
.prose dl.zeitleiste::after { content: ''; display: table; clear: left; }
.prose dl.zeitleiste dt { float: left; clear: left; width: 5.5rem; padding: .55rem 0; border-top: 1px solid var(--rule); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--orange-ink); }
.prose dl.zeitleiste dd { margin: 0 0 0 6.75rem; padding: .55rem 0; border-top: 1px solid var(--rule); overflow-wrap: break-word; }
@media (max-width: 480px) {
  .prose dl.zeitleiste dt { float: none; width: auto; padding-bottom: 0; }
  .prose dl.zeitleiste dd { margin-left: 0; border-top: 0; padding-top: .1rem; }
}

/* next to the text on the old site, now after it */
.nebenbei { margin: 2rem 0 0; font-size: .95rem; color: var(--muted); }
.nebenbei img { display: block; border-radius: 6px; max-width: min(100%, 340px); }

/* the other pages of a section, under a page */
.more { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.more + .more { margin-top: 1.5rem; }
.more-h { margin: 0 0 .6rem; font: 600 .95rem/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.more ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.more a { font-weight: 600; text-decoration: none; } .more a:hover { text-decoration: underline; }

/* ------------------------------------------------------------ sound excerpts (orange = sound) */
.track {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; grid-template-areas: 'play title time' 'play bar bar';
  align-items: center; column-gap: .8rem; row-gap: .35rem; margin: .5rem 0; padding: .5rem 1.1rem .5rem .5rem;
  background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.08); border-radius: 999px;
  font-size: .98rem; line-height: 1.3; max-width: 30rem;
}
.prose p:has(> .track) { overflow: visible; }
.track audio { grid-column: 1 / -1; width: 100%; height: 2.25rem; }
.js .track audio { display: none; }
.track-title { grid-area: title; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track:not(:has(.play)) .track-title { white-space: normal; }
.track .play {
  grid-area: play; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: var(--orange); color: #fff; display: grid; place-items: center; box-shadow: 0 2px 6px -2px rgba(184,75,14,.7);
}
.track .play:hover { background: var(--orange-ink); }
.track .play svg { width: 14px; height: 14px; }
.track .bar { grid-area: bar; height: 4px; border-radius: 4px; background: rgba(0,0,0,.12); position: relative; cursor: pointer; }
.track .bar::before { content: ''; position: absolute; inset: -8px 0; }
.track .bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--orange); border-radius: inherit; }
.track .time { grid-area: time; font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.track.current { border-color: rgba(232,102,31,.5); background: #fff; }
.track.current .time { color: var(--orange-ink); }

/* ------------------------------------------------------------ the player bar (stays while you browse) */
.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(21, 22, 43, .97); color: #fff;
  box-shadow: 0 -10px 30px -14px rgba(0,0,0,.6); padding-bottom: env(safe-area-inset-bottom);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: pl-in .25s ease-out;
}
.player[hidden] { display: none; }
@keyframes pl-in { from { transform: translateY(100%); } }
body.has-player { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
.pl-inner {
  max-width: var(--frame); margin: 0 auto; padding: .55rem var(--gutter) .6rem;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: .9rem;
}
.pl-cover img { display: block; width: 2.9rem; height: 2.9rem; object-fit: cover; border-radius: 3px; background: #2a2b45; }
.player.no-cover .pl-cover { display: none; }
.pl-meta { display: grid; min-width: 0; line-height: 1.25; }
.pl-meta a { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-meta a:hover { text-decoration: underline; color: #fff; }
.pl-title { font-weight: 700; font-size: .98rem; }
.pl-album { font-size: .9375rem; color: #b9b9d2 !important; }
.pl-time { font-size: .9375rem; font-variant-numeric: tabular-nums; color: #b9b9d2; white-space: nowrap; }
.pl-ctrls { display: flex; align-items: center; gap: .35rem; }
.player button { appearance: none; border: 0; cursor: pointer; color: #fff; background: transparent; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; padding: 0; }
.player button svg { width: 15px; height: 15px; }
.player button:hover { background: rgba(255,255,255,.12); }
.player button:disabled { opacity: .3; cursor: default; background: transparent; }
.player .pl-play { width: 2.8rem; height: 2.8rem; background: var(--orange); box-shadow: 0 2px 10px -3px rgba(232,102,31,.8); }
.player .pl-play:hover { background: var(--orange-hi); }
.player .pl-close { color: #9a9ab5; width: 2rem; height: 2rem; }
.player .pl-close svg { width: 12px; height: 12px; }
.pl-seek { --p: 0%; position: absolute; left: 0; right: 0; top: -7px; width: 100%; height: 14px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.pl-seek::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, var(--orange) var(--p), rgba(255,255,255,.18) var(--p)); }
.pl-seek::-moz-range-track { height: 3px; background: linear-gradient(90deg, var(--orange) var(--p), rgba(255,255,255,.18) var(--p)); }
.pl-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 50%; background: var(--orange-hi); border: 0; opacity: 0; transition: opacity .15s; }
.pl-seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--orange-hi); border: 0; opacity: 0; }
.player:hover .pl-seek::-webkit-slider-thumb, .pl-seek:focus-visible::-webkit-slider-thumb { opacity: 1; }
.player:hover .pl-seek::-moz-range-thumb, .pl-seek:focus-visible::-moz-range-thumb { opacity: 1; }
.pl-seek:focus-visible { outline: none; }
@media (max-width: 600px) {
  .pl-inner { gap: .65rem; grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .pl-time, .player .pl-prev { display: none; }
  .pl-cover img { width: 2.5rem; height: 2.5rem; }
  body.has-player { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------ variants (preview only) */
[data-variants] > [data-variant]:not(:first-child) { display: none; }
html.pjw-on [data-variants] > [data-variant] { display: none; }
html.pjw-on [data-variants] > [data-variant].pjw-shown { display: block; }

/* ------------------------------------------------------------ home */
.home-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.home-grid > * { min-width: 0; }

/* the CDs on the homepage: one at a time on its own blurred cover ("Scheinwerfer"), dots for where one is */
.sw-kopf { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 .75rem; }
.sw-kopf a { font-weight: 600; text-decoration: none; }
.sw-buehne { position: relative; height: 19rem; border-radius: var(--radius, 10px); overflow: hidden; background: var(--navy); box-shadow: 0 12px 32px -18px rgba(0,0,0,.5); }
.sw-cd { position: absolute; inset: 0 0 2.75rem; display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: 2rem; align-items: center; padding: 0 2.5rem; color: #fff;
  opacity: 0; visibility: hidden; transition: opacity .9s, visibility .9s; }
.sw-cd.an { opacity: 1; visibility: visible; z-index: 1; }
.sw-cd > * { position: relative; }
.sw-cd > .sw-grund { position: absolute; inset: -40px -40px -80px; background: center / cover no-repeat; filter: blur(28px) brightness(.45) saturate(1.3); }
.sw-cover { position: relative; display: block; }
.sw-cover > img { position: relative; z-index: 1; display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 18px 36px -12px #000; }
/* the disc behind the cover: it slides half out when its CD comes up, and turns while its excerpt plays */
.sw-cd.mit-cd { column-gap: 7.5rem; }
.sw-scheibe { position: absolute; top: 4%; bottom: 4%; right: 3%; aspect-ratio: 1; z-index: 0; transition: transform 1s cubic-bezier(.2, .7, .2, 1) .35s; }
.sw-scheibe img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)); }
.sw-cd.an .sw-scheibe { transform: translateX(42%); }
.sw-cd.an .sw-cover:hover .sw-scheibe, .sw-cd.an .sw-cover:focus-visible .sw-scheibe { transform: translateX(68%); transition-duration: .5s; transition-delay: 0s; }   /* pointed at: the disc comes out further */
.sw-cd:has(.track.playing) .sw-scheibe img { animation: sw-dreh 3.6s linear infinite; }
@keyframes sw-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sw-scheibe { transition: none; } .sw-cd:has(.track.playing) .sw-scheibe img { animation: none; } }
.sw-text .kicker-klein { color: #ffb886; margin: 0 0 .2rem; }
.sw-text h2 { margin: 0 0 .4rem; font: 500 clamp(1.5rem, 3.2vw, 2rem)/1.15 var(--serif); }
.sw-text h2 a { color: #fff; text-decoration: none; } .sw-text h2 a:hover { color: #ffd9b8; }
.sw-zeile { margin: 0 0 1rem; color: #e6e6f2; }
.sw-text .track { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); color: #fff; max-width: 22rem; }
.sw-text .track .time { color: #d0d0e0; } .sw-text .track .bar { background: rgba(255,255,255,.25); }
.sw-punkte { position: absolute; left: 50%; bottom: .85rem; z-index: 5; transform: translateX(-50%); display: flex; align-items: center; gap: .55rem; margin: 0;
  padding: .45rem .8rem; border-radius: 999px; background: rgba(0,0,0,.28); backdrop-filter: blur(4px); }
.sw-punkte button { width: .5rem; height: .5rem; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.5); cursor: pointer; transition: width .3s, background .3s; }
.sw-punkte button:hover { background: #fff; }
.sw-punkte button.an { width: 1.4rem; background: #ffb886; }
@media (max-width: 640px) {
  .sw-buehne { height: 23rem; }
  .sw-cd { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: 1rem; padding: 1.25rem 1.25rem 0; }
  .sw-cover { width: 8.5rem; }
  .sw-cd.mit-cd { column-gap: 0; }
  .sw-punkte { gap: .4rem; }
}
@media print { .scheinwerfer { display: none; } }
.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.intro-photo { margin: 0; }
.intro-photo img { display: block; width: 100%; border-radius: 6px; }
.intro-photo figcaption { font-size: .9375rem; color: var(--muted); margin-top: .5rem; }
.quote { margin: 0 0 1.5rem; padding: 0 0 0 1.25rem; border-left: 4px solid var(--orange); }
.quote p { margin: 0; font: italic 400 clamp(1.15rem, 2.2vw, 1.4rem)/1.5 var(--serif); }
.quote footer { margin-top: .6rem; font: 600 .95rem/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--orange-ink); }
@media (max-width: 760px) { .intro { grid-template-columns: 1fr; } }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: clamp(1rem, 2.5vw, 1.5rem); }
.card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 32px -18px rgba(0,0,0,.35); transition: box-shadow .2s; }
.card:hover { color: var(--ink); box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 20px 40px -18px rgba(0,0,0,.45); }
.card img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; display: block; transition: transform .5s ease; }
.card:hover img { transform: scale(1.04); }   /* in its frame (overflow: hidden): nothing moves out of place */
.card-body { padding: 1.1rem 1.25rem 1.35rem; display: grid; gap: .3rem; font-size: .98rem; line-height: 1.5; color: var(--muted); }
.card-h { font: 500 1.35rem/1.2 var(--serif); color: var(--ink); }
.card-h { transition: color .2s; }
.card:hover .card-h { color: var(--orange-ink); }
.card-h::after { content: '→'; display: inline-block; margin-left: .3em; color: var(--orange); transition: transform .2s; }
.card:hover .card-h::after { transform: translateX(4px); }

/* ------------------------------------------------------------ the news (Aktuelles) */
.meldungen { max-width: var(--col); }
.section-h { margin: 0 0 1.25rem; font: 500 1.6rem/1.2 var(--serif); color: var(--ink); }
.meldung { padding: 1.75rem 0 2rem; border-top: 1px solid var(--rule); }
.meldung:first-child { border-top: 0; padding-top: 0; }
.meldung-datum { margin: 0 0 .35rem; font: 600 .95rem/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--orange-ink); }
.meldung-datum:empty { display: none; }
.meldung-titel { margin: 0 0 .8rem; font: 500 clamp(1.55rem, 1.2rem + 1.4vw, 2rem)/1.2 var(--serif); text-wrap: balance; hyphens: manual; }
.meldungen-leer { color: var(--muted); }
.prose + .meldungen { margin-top: 2.5rem; }
/* the news archive (aktuelles/archiv, bauen.news_archive): by year, each item folded to its first lines; search and years */
.meldungsarchiv { max-width: var(--col); }
.archiv-suche { margin: 0 0 1.5rem; }
.archiv-suche input { width: 100%; padding: .65rem 1rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--card); font: 400 1rem/1.3 var(--sans); color: var(--ink); }
.archiv-suche input:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.archiv-jahre { display: flex; flex-wrap: wrap; gap: .35rem; margin: .8rem 0 0; }
.archiv-jahre button { padding: .2rem .75rem; border: 1px solid var(--rule); border-radius: 999px; background: transparent; font: 600 .9rem/1.5 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer; }
.archiv-jahre button:hover { background: var(--card); }
.archiv-jahre button.an { background: var(--ink); border-color: var(--ink); color: #fff; }
.archiv-zahl { margin: .7rem 0 0; font-size: .9rem; color: var(--muted); }
.archiv-nichts { color: var(--muted); }
.meldungen-jahr[hidden], .meldungsarchiv .meldung[hidden], .meldung-anriss[hidden] { display: none; }
.meldungen-jahr-h { position: sticky; top: 3rem; z-index: 2; margin: 0 0 .25rem; padding: .7rem 0 .45rem; border-bottom: 1px solid var(--rule); background: var(--page); font: 500 1.8rem/1 var(--serif); font-variant-numeric: lining-nums; }
.meldungen-jahr + .meldungen-jahr { margin-top: 2rem; }
@media (max-width: 940px) { .meldungen-jahr-h { top: 3.3rem; } }   /* under the menu bar, which stays on top */
.meldungsarchiv .meldung { padding: 1.25rem 0 1.4rem; }
.meldungsarchiv .meldungen-jahr-h + .meldung { border-top: 0; }
.meldungsarchiv .meldung-titel { margin-bottom: .45rem; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.55rem); }
.meldung-anriss { margin: 0; color: var(--muted); }
.meldung-auf { padding: 0; border: 0; background: none; font: 600 1rem/1.4 var(--sans); color: var(--link); cursor: pointer; white-space: nowrap; }
.meldung-auf:hover { text-decoration: underline; }
.meldung-text.zu { display: none; }
html.pjw-on .meldung-text.zu { display: block; }   /* editing in the page: the whole text */
html.pjw-on .meldung-anriss { display: none; }
/* the concert archive (aktuelles/konzerte, bauen.concert_register): one line per concert, the year at each year's first */
.konzertregister { max-width: var(--col); }
.kr-summe { margin: 0 0 1rem; color: var(--muted); }
.kr-leer { color: var(--muted); }
.kr-liste { list-style: none; margin: 0; padding: 0; }
.kr { display: grid; grid-template-columns: 3.2rem 3.4rem 1.7rem minmax(0, 1.3fr) minmax(0, 1fr); gap: .65rem; padding: .22rem 0; font-variant-numeric: tabular-nums; }
.kr[hidden] { display: none; }
.kr.erst { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--ink); }
.kr.erst:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.kr-jahr { font-weight: 700; visibility: hidden; }
.kr.erst .kr-jahr { visibility: visible; }
.kr time { color: var(--muted); }
.kr-tag { color: var(--muted); }
.kr-titel { font-weight: 600; }
.kr-titel a { color: var(--ink); text-decoration: none; }
.kr-titel a:hover { color: var(--orange-ink); text-decoration: underline; }
.kr-wer, .kr-wo { color: var(--muted); }
.kr-ab { display: inline-block; margin-left: .4rem; padding: 0 .45rem; border-radius: 999px; background: #8a1c1c; color: #fff; font: 700 .75rem/1.5 var(--sans); vertical-align: .1em; }
.kr.abgesagt .kr-titel { text-decoration: line-through; text-decoration-thickness: 1px; }
@media (max-width: 560px) {
  .kr { grid-template-columns: 2.7rem 3rem minmax(0, 1fr); gap: .1rem .55rem; padding: .35rem 0; }
  .kr-tag { display: none; }
  .kr-wo { grid-column: 3; font-size: .95rem; }
}
/* Aktuelles, at the end: a card for each archive (bauen.archive_cards) */
.archiv-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; max-width: var(--col); margin-top: 3rem; }
.archiv-karte { display: flex; gap: 1.1rem; align-items: center; padding: 1.1rem 1.2rem; border-radius: var(--radius); background: var(--card); color: var(--ink); text-decoration: none; box-shadow: 0 10px 26px -18px rgba(0,0,0,.5); transition: transform .15s; }
.archiv-karte[hidden] { display: none; }
.archiv-karte:hover { transform: translateY(-2px); }
.archiv-karte:hover b { color: var(--orange-ink); }
.ak-text b { display: block; font: 500 1.3rem/1.2 var(--serif); }
.ak-text .kicker-klein { display: block; margin: 0 0 .1rem; }
.ak-text small { display: block; margin-top: .2rem; color: var(--muted); font-size: .92rem; }
.ak-bild { flex: none; position: relative; width: 5.6rem; height: 4.6rem; }
.ak-bild > * { position: absolute; top: 0; }
.ak-meldungen img, .ak-meldungen i { width: 3.6rem; height: 3.6rem; object-fit: cover; border-radius: 3px; box-shadow: 0 6px 14px -8px rgba(0,0,0,.6); }
.ak-meldungen i { background: #fff repeating-linear-gradient(transparent 0 .55rem, rgba(0,0,0,.12) .55rem calc(.55rem + 1px)) .5rem .7rem / 2.6rem 2.4rem no-repeat; }
.ak-bild > :nth-child(1) { left: 0; top: .9rem; transform: rotate(-6deg); }
.ak-bild > :nth-child(2) { left: 1rem; top: .45rem; }
.ak-bild > :nth-child(3) { left: 2rem; top: 0; transform: rotate(5deg); }
.ak-konzerte .termin-blatt { width: 3.2rem; font-size: .7rem; }
.ak-konzerte .termin-blatt b { font-size: 1.3rem; color: var(--muted); }
.ak-konzerte .termin-blatt small:first-child { background: #8d8d93; }
.ak-konzerte .termin-blatt:nth-child(1) { top: .6rem; transform: rotate(-7deg); }
.ak-konzerte .termin-blatt:nth-child(2) { left: 1.1rem; top: .3rem; }
.ak-konzerte .termin-blatt:nth-child(3) { left: 2.3rem; transform: rotate(6deg); }

/* ------------------------------------------------------------ concerts (bauen.concerts_next / concerts_all) */
.termine-blaetter, .termine-liste { list-style: none; margin: 0; padding: 0; }
.termin { display: flex; gap: 1rem; align-items: flex-start; }
.termin[hidden], .termine-start[hidden], .termine-leer[hidden] { display: none; }
.termin-blatt { flex: none; display: flex; flex-direction: column; width: 4.2rem; text-align: center; background: #fff; border-radius: 8px; overflow: hidden;
  box-shadow: 0 6px 16px -10px rgba(0,0,0,.45); font: 600 .8rem/1.2 var(--sans); color: var(--muted); }
.termin-blatt small:first-child { padding: .2rem 0; background: var(--orange); color: #fff; font-weight: 700; }
.termin-blatt b { font: 600 1.8rem/1.15 var(--serif); color: var(--ink); }
.termin-blatt small:last-child { padding-bottom: .3rem; }
.termin-text { min-width: 0; flex: 1; }
.termin-text p { margin: 0; }
.termin-titel { font: 500 1.15rem/1.3 var(--serif); color: var(--ink); text-wrap: balance; }
.termin-titel a { color: inherit; text-decoration: none; }
.termin-titel a:hover { color: var(--orange-ink); text-decoration: underline; }
.termin-wer { color: var(--ink); }
.termin-wann, .termin-info { font-size: .95rem; color: var(--muted); }
.termin-info a { font-weight: 600; }
.termin-abgesagt { display: inline-block; margin-bottom: .15rem !important; padding: .05rem .5rem; border-radius: 999px; background: #8a1c1c; color: #fff; font: 700 .8rem/1.4 var(--sans); }
.termin.abgesagt .termin-titel, .termin.abgesagt .termin-wann { text-decoration: line-through; text-decoration-thickness: 1px; }
.termin.abgesagt .termin-blatt { opacity: .55; }
/* the homepage: up to four calendar leaves */
.termine-blaetter { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem 1.75rem; }
.termine-blaetter .termin-tag { display: none; }   /* the leaf says the day */
.termine-blaetter .termin-wer, .termine-blaetter .termin-info { font-size: .95rem; }
/* Aktuelles: every concert to come, the past ones folded below */
.termine { max-width: var(--col); margin: 0 0 3rem; }
.prose + .termine { margin-top: 2.5rem; }
.termine-liste .termin { padding: 1rem 0; border-top: 1px solid var(--rule); }
.termine-liste .termin:first-child { border-top: 0; padding-top: 0; }
.termin-cover { flex: none; width: 4.5rem; }
.termin-cover img { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 6px 14px -8px rgba(0,0,0,.55); }
.termine-leer { color: var(--muted); }
@media (max-width: 560px) { .termin-cover { display: none; } }

/* a draft page (built, not in any menu or list) */
.entwurf-hinweis { margin: 0 0 1.5rem; padding: .6rem 1rem; border-radius: 8px; background: #fff3d6; color: #6b4600; font: 600 .95rem/1.4 var(--sans); }

/* ------------------------------------------------------------ switchable components (bauen.py SYSTEM) */
.prose nav.toc { margin: 0 0 2.25em; padding: 1rem 1.25rem 1.1rem; border-left: 3px solid var(--rule); background: rgba(255,255,255,.35); border-radius: 0 6px 6px 0; }
.prose nav.toc .toc-h { margin: 0 0 .45rem; font: 600 .95rem/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.prose nav.toc ol { margin: 0; padding-left: 1.3rem; font-size: .95em; }
.prose nav.toc li + li { margin-top: .2em; }
.prose nav.toc a { text-decoration: none; }
.prose nav.toc a:hover { text-decoration: underline; }
.prose .hinweis-hoeren { font-size: .95rem; color: var(--muted); margin: -1.1em 0 1.75em; }
.prose .hinweis-hoeren::before { content: '● '; color: var(--orange); }
.prose .presse-zu { grid-column: 1; margin-bottom: .5rem; }
.prose .presse-zu a { color: inherit; }
.start-aktuell { margin: 0; font-weight: 600; }
.start-aktuell .kicker-klein { display: inline; margin-right: .6rem; }
.start-aktuell a { text-decoration: none; }
.prose ul.album-raster { list-style: none; padding: 0; margin: 0 0 2.5em; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); gap: 2rem 2rem; }
/* every card takes four rows of the grid (subgrid): cover, title, year, excerpts. So in each row of cards the covers
   stand on one line (a cover that is not square sits on it), and titles, years and "Hörproben" start level, however
   many lines a title takes */
.prose ul.album-raster > li { margin: 0; min-width: 0; display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; align-content: start; }
.prose ul.album-raster a { display: contents; text-decoration: none; color: var(--ink); }
/* every cover in the footprint of a CD, 142 × 125 mm (bauen.case_cover): a digipak's front fills it; a square cover is
   just as high and stands on the left, so it is narrower (125/142) */
.prose ul.album-raster .a-cover { position: relative; display: block; aspect-ratio: 142 / 125; }
.prose ul.album-raster .a-cover img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 3px;
  box-shadow: 0 8px 20px -12px rgba(0,0,0,.55); transition: box-shadow .2s; }
.prose ul.album-raster .quadrat img { width: calc(100% * 125 / 142); }
.prose ul.album-raster a:hover .a-cover img { box-shadow: 0 14px 28px -12px rgba(0,0,0,.75); }
.prose ul.album-raster a:focus-visible .a-cover img { outline: 3px solid var(--orange); outline-offset: 3px; }
.prose ul.album-raster .a-titel, .prose ul.album-raster .a-info, .prose ul.album-raster li > :last-child { align-self: start; }
.prose ul.album-raster .a-titel { padding-top: .55rem; }
.prose ul.album-raster a:hover .a-titel { color: var(--orange-ink); }
.prose ul.album-raster .a-titel { font: 500 1.05em/1.3 var(--serif); hyphens: manual; overflow-wrap: break-word; }   /* breaks only where a title says (soft hyphen) */
.prose ul.album-raster a:hover .a-titel { color: var(--orange-ink); }
.prose ul.album-raster .a-info { font-size: .9375em; color: var(--muted); }
.prose .kachel-proben summary { cursor: pointer; font-size: .9375rem; line-height: 1.4; font-weight: 700; color: var(--orange-ink); margin-top: .35rem; }
.prose .kachel-proben-leer { margin: .35rem 0 0; height: calc(.9375rem * 1.4); }
.prose ul.album-raster .kachel-proben { margin: 0; }
.prose .kachel-proben .track { font-size: .9375rem; padding: .3rem .8rem .3rem .3rem; grid-template-columns: 2rem minmax(0, 1fr) auto; }
.prose .kachel-proben .track .play { width: 2rem; height: 2rem; }

/* ------------------------------------------------------------ forms (contact, order), the basket */
.knopf, .in-korb {
  appearance: none; border: 0; cursor: pointer; font: 700 1rem/1 var(--sans); padding: .8rem 1.3rem; border-radius: 999px;
  background: var(--orange); color: #fff; box-shadow: 0 2px 8px -3px rgba(184,75,14,.7);
}
.knopf:hover, .in-korb:hover { background: var(--orange-ink); }
.knopf:disabled { opacity: .55; cursor: default; }
.in-korb { font-size: .95rem; padding: .6rem 1.05rem; }
/* the CD as a download elsewhere (bauen.download_button): beside "In den Warenkorb", quieter */
.prose .als-download { display: inline-flex; align-items: center; gap: .45rem; padding: calc(.6rem - 1.5px) 1rem; border: 1.5px solid var(--orange-ink); border-radius: 999px;
  font: 600 .95rem/1.2 var(--sans); color: var(--orange-ink); text-decoration: none; }
.prose .als-download .ic { width: 1.05em; height: 1.05em; }
.prose .als-download:hover { background: var(--orange-ink); color: #fff; }
.prose .bestellkasten p { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.prose .bestellkasten .kaufen-preis { display: block; margin: 0 0 .7rem; }
.prose .bestellkasten { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0 1.4rem; align-items: start; }
.prose .bestellkasten.ohne-cover { grid-template-columns: minmax(0, 1fr); }
.prose .bestell-cover img { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 6px 16px -10px rgba(0,0,0,.55); }
.prose .bestellkasten .kasten-h { margin-bottom: .15rem; }
.prose .bestell-titel { margin: 0 0 .35rem; font: 500 1.3rem/1.25 var(--serif); }
@media (max-width: 420px) { .prose .bestellkasten { grid-template-columns: 5rem minmax(0, 1fr); gap: 0 1rem; } }
/* buying, in the album head under the facts */
.prose .kaufen { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule, rgba(0,0,0,.12)); }
.prose .kaufen p { margin: 0; }
.prose .kaufen p + p { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: .6rem; }
.prose .kaufen-preis { font-size: .95em; color: var(--muted); }
.prose .kaufen-preis b { font: 600 1.2rem/1 var(--sans); color: var(--ink); margin-right: .2rem; }
.prose .kaufen-preis { hyphens: manual; }
.prose .kaufen-preis span { display: block; font-size: .95em; margin-top: .2rem; }
.preise-auf { appearance: none; border: 0; background: none; padding: 0; font: inherit; color: var(--link, var(--orange-ink)); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: .18em; cursor: pointer; }
.preise-auf:hover { color: var(--ink); }

/* "mehrere CDs günstiger": the prices by number, each a stack of covers */
.preisfenster { width: min(27rem, calc(100vw - 2rem)); border: 0; border-radius: 12px; padding: 1.5rem 1.6rem 1.4rem; background: var(--page);
  color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); font-family: var(--sans); }
.preisfenster::backdrop { background: rgba(21,22,43,.55); }
.preisfenster h2 { margin: 0 2rem .2rem 0; font: 500 1.5rem/1.2 var(--serif); }
.preisfenster > p { margin: 0 0 1rem; color: var(--muted); font-size: .95rem; }
.preisfenster .zu { position: absolute; top: .7rem; right: .8rem; border: 0; background: none; font-size: 1.1rem; color: var(--muted); cursor: pointer; padding: .3rem .5rem; }
.preisfenster .staffel { list-style: none; margin: 0 0 1rem; padding: 0; }
.preisfenster .staffel li { display: grid; grid-template-columns: 7.5rem 1fr auto; align-items: center; gap: .9rem; padding: .7rem 0; border-top: 1px solid var(--rule); }
.preisfenster .stapel { position: relative; height: 3.4rem; }
.preisfenster .stapel img { position: absolute; top: 0; left: calc(var(--i) * 1.2rem); z-index: calc(10 - var(--i)); width: 3.4rem; height: 3.4rem; object-fit: cover; border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,.35); transform: rotate(calc(var(--i) * 4deg)); transform-origin: bottom left; }
.preisfenster .menge { font-weight: 600; }
.preisfenster .betrag { text-align: right; line-height: 1.25; }
.preisfenster .betrag b { font: 600 1.15rem/1.2 var(--sans); }
.preisfenster .betrag small { display: block; color: var(--muted); font-size: .9375rem; }
.preisfenster .weitere { margin: 0 0 1rem; font-size: .95rem; }
.preisfenster .weiter { margin: 0; }
/* "stöbern": all CDs in the window, each to add */
.preisfenster.stoebern { width: min(36rem, calc(100vw - 2rem)); max-height: min(88vh, 52rem); overflow-y: auto; overscroll-behavior: contain; }
.stoebern-liste { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.stoebern-liste li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: .75rem 0; border-top: 1px solid var(--rule); }
.stoebern-liste img, .stoebern-liste .ohne { display: block; width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: 3px; background: #c9c9c4; box-shadow: 0 4px 10px -6px rgba(0,0,0,.5); }
.stoebern-liste a { color: var(--ink); text-decoration: none; }
.stoebern-liste a b { font: 500 1.08rem/1.3 var(--serif); }
.stoebern-liste a:hover b { color: var(--orange-ink); }
.stoebern-liste small { display: block; color: var(--muted); font-size: .9375rem; line-height: 1.35; margin: .1rem 0 .45rem; }
.stoebern-liste .in-korb { font-size: .9375rem; padding: .45rem .85rem; }
.prose .cd-eintrag-korb { margin-top: .9rem; }
.prose .formular { margin: 1.5em 0 0; }
.prose .formular .feld { margin: 0 0 1.15rem; display: grid; gap: .4rem; }
.prose .formular label { font-size: 1rem; font-weight: 600; color: var(--ink); }
.prose .formular ::placeholder { color: #9a9aa2; opacity: 1; }
.prose .formular input:not([type=checkbox]), .prose .formular select, .prose .formular textarea {
  width: 100%; font: inherit; font-size: 1.0625rem; padding: .75rem .85rem; border-radius: 8px; border: 1px solid rgba(0,0,0,.22);
  background: #fff; color: var(--ink);
}
.prose .formular textarea { resize: vertical; line-height: 1.5; }
.prose .formular :focus-visible { outline-offset: 1px; }
.prose .formular .feld-paar { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: .3rem 1rem; }
.prose .formular .feld-paar span { display: grid; gap: .3rem; }
.prose .formular .feld-ok label { font-weight: 400; display: flex; gap: .55rem; align-items: start; line-height: 1.45; }
.prose .formular .feld-ok input { margin-top: .25rem; }
.prose .formular .feld-hinweis { font-size: .92rem; line-height: 1.5; color: var(--muted); }
.prose .formular .feld-falle { position: absolute; left: -9999px; }
.prose .formular-status { min-height: 1.5em; font-size: .95rem; color: var(--muted); }
.prose .formular-danke { display: none; padding: 1.1rem 1.3rem; border-radius: 8px; background: #fff; font-weight: 600; }
.prose .formular-danke.zeigen { display: block; }
.prose .bestellt { margin: 1rem 0 1.5rem; padding: 1.2rem 1.4rem .4rem; border-radius: 8px; background: #fff; scroll-margin-top: 5rem; }
.prose .bestellt h2 { margin: 0 0 .2rem; font-size: 1.3em; }
.prose .bestellt-nr { margin: 0 0 1rem; color: var(--muted); }
.prose .bestellt-adresse span { display: block; color: var(--muted); font-size: .9em; }
.prose .bestellt-mail { color: var(--muted); }
/* the contact form under a paragraph that asks for it ("anfrage") */
.prose .anfrage-form { margin: .25em 0 2em; padding: 0 0 0 1.25rem; border-left: 3px solid var(--orange); }
.prose .anfrage-form .formular { margin-top: .75em; max-width: 34rem; }
.prose .anfrage-form .formular-danke { margin-top: .75em; }
.prose ul.korb-liste { list-style: none; padding: 0; margin: 0 0 1rem; border-top: 1px solid var(--rule); }
.prose ul.korb-liste li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto 4.5rem; gap: .9rem; align-items: center; margin: 0; padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.prose ul.korb-liste img { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: 3px; display: block; }
.prose .korb-titel a { font: 500 1.08em/1.3 var(--serif); color: var(--ink); text-decoration: none; }
.prose .korb-titel small { display: block; color: var(--muted); font-size: .9375rem; }
.prose .korb-anzahl { display: flex; align-items: center; gap: .5rem; }
.prose .korb-anzahl button { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); background: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; color: var(--ink); }
.prose .korb-anzahl .ic { width: 1rem; height: 1rem; }
.prose .korb-anzahl b { min-width: 1.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.prose .preise-kurz { color: var(--muted); }
.prose .preise-kurz b { color: var(--ink); }
.prose .korb-tipp { margin: -.75rem 0 2rem; text-align: right; font-size: .95em; color: var(--muted); }
.prose .korb-tipp b { color: var(--ink); }
.prose .preise-kurz[hidden] { display: none; }
.prose .korb-preis { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* under the list, right-aligned with the prices: (n CDs, Mengenrabatt,) Gesamt */
.prose dl.korb-summe { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 0; margin: 0 0 1.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.prose dl.korb-summe dt { color: var(--muted); }
.prose dl.korb-summe dd { margin: 0; min-width: 6rem; padding-left: 1.5rem; white-space: nowrap; }
.prose dl.korb-summe .gesamt { margin-top: .35rem; padding-top: .5rem; border-top: 1px solid var(--rule); color: var(--ink); font-weight: 700; font-size: 1.1em; }
.prose dl.korb-summe dt.gesamt span { font-weight: 400; font-size: .875em; color: var(--muted); margin-right: .5em; }
@media (max-width: 480px) { .prose ul.korb-liste li { grid-template-columns: 2.75rem minmax(0, 1fr) auto; } .prose ul.korb-liste img { width: 2.75rem; height: 2.75rem; }
  .prose .korb-preis { grid-column: 2 / -1; margin-top: -.4rem; }
  .prose dl.korb-summe dt.gesamt { display: flex; flex-direction: column-reverse; align-items: flex-end; }
  .prose dl.korb-summe dt.gesamt span { margin: .1rem 0 0; } }
.foot-weiter a { font-weight: 700; text-decoration: none; }
.foot-recht { margin-top: 1.4rem !important; font-size: .9rem; }
.foot-recht a { color: #c8c8d8; }
.foot-recht a[aria-current] { color: var(--orange-hi); }

/* ------------------------------------------------------------ footer */
.foot { background: var(--navy); color: #c8c8d8; font-size: 1rem; line-height: 1.6; }
.foot-inner { max-width: var(--frame); margin: 0 auto; padding: 3rem var(--gutter) 3rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem; }
.foot p { margin: 0 0 .8rem; }
.foot a { color: #fff; }
.foot a:hover { color: var(--orange-hi); }
.foot-name { font: 500 1.5rem/1.2 var(--serif); color: #fff; }
.foot-h { font: 600 .95rem/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--orange-hi); }
.foot ul { list-style: none; margin: 0; padding: 0; columns: 2; }
.foot li a { text-decoration: none; display: inline-block; padding: .15rem 0; }
.foot li a[aria-current] { color: var(--orange-hi); }
.to-top { display: flex; align-items: center; gap: .4em; max-width: var(--frame); margin: 0 auto; padding: 1rem var(--gutter) 2rem; font-size: .9375rem; color: #9a9ab5 !important; text-decoration: none; }

@media print {
  .tabs, .foot nav, .to-top, .track .play, .track .bar, .player { display: none; }
  .hero { min-height: 0; background: none; } .hero::after { display: none; } .hero h1 { color: #000; text-shadow: none; }
  body { background: #fff; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ------------------------------------------------------------ elements in running text (the backend's "Einfügen") */
.prose p.einbettung-cd:has(+ .cd-karte) { display: none; }
.prose .cd-karte { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin: 1.5em 0; padding: 1rem;
  background: var(--card); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 28px -20px rgba(0,0,0,.35); }
.prose .cd-karte-bild img { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 8px 18px -12px rgba(0,0,0,.6); }
.prose .cd-karte p { margin: 0 0 .35em; }
.prose .cd-karte-meta { font: 600 .9rem/1.35 var(--sans); color: var(--orange-ink); }
.prose .cd-karte-titel { font: 500 1.4rem/1.2 var(--serif); }
.prose .cd-karte-titel a { color: var(--ink); text-decoration: none; }
.prose .cd-karte-titel a:hover { color: var(--orange-ink); }
.prose .cd-karte-zeile { color: var(--muted); }
.prose .cd-karte-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: .6em !important; }
@media (max-width: 30rem) { .prose .cd-karte { grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr); gap: .9rem; } }
.prose p.termin-kasten { margin: 1.5em 0; padding: .85rem 1.1rem .9rem; border-left: 4px solid var(--orange); background: var(--card); border-radius: 0 var(--radius) var(--radius) 0; }
.prose p.termin-kasten::before { content: 'Termin'; display: block; margin-bottom: .2rem; font: 700 .75rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--orange-ink); }
.prose p.hinweis-kasten { margin: 0 0 1.75em; padding: .85rem 1.1rem .9rem; border-left: 4px solid var(--orange); background: var(--card); border-radius: 0 var(--radius) var(--radius) 0; }
.prose p.linkknopf { margin: 1.25em 0; }
.prose p.linkknopf a { display: inline-block; padding: .55rem 1.15rem; border-radius: 999px; background: var(--orange); color: #fff; font: 600 1rem/1.3 var(--sans); text-decoration: none; }
.prose p.linkknopf a:hover { background: var(--orange-ink); }
/* a page's own block (the backend's "Baustein"): running text like the rest */
.baustein { margin: 1.5em 0; }

/* several pictures, one at a time (the backend's picture panel: "Karussell"); arrows and count from site.js */
.prose .bildkarussell { position: relative; display: flex; align-items: flex-start; gap: 1rem; margin: 1.5em 0 .5rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain; }
.prose .bildkarussell::-webkit-scrollbar { display: none; }
.prose .bildkarussell figure { flex: 0 0 86%; margin: 0; scroll-snap-align: center; }
.prose .bildkarussell img { display: block; width: 100%; height: auto; border-radius: 3px; }
.prose .karussell-nav { display: flex; align-items: center; justify-content: center; gap: .9rem; margin: 0 0 1.5em; font: 600 .95rem/1 var(--sans); color: var(--muted); }
.prose .karussell-nav button { width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%; background: var(--card); color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 6px 14px -8px rgba(0,0,0,.4); }
.prose .karussell-nav button:hover { background: var(--orange); color: #fff; }
.prose .karussell-nav button:disabled { opacity: .35; cursor: default; background: var(--card); color: var(--ink); }

/* a row of pictures evened out (the backend's picture panel): side by side the same height; one below the other the
   same width or the same height */
.prose .bildreihe.gleich-hoch { display: flex; align-items: flex-start; gap: 1rem; }
.prose .bildreihe.gleich-hoch figure { flex: var(--r, 1.5) 1 0; min-width: 0; }
@media (max-width: 480px) { .prose .bildreihe.gleich-hoch { flex-wrap: wrap; } .prose .bildreihe.gleich-hoch figure { flex-basis: calc(var(--r, 1.5) * 7rem); } }
.prose .bildstapel { margin: 1.5em 0; }
.prose .bildstapel figure { margin: 0 0 1rem; }
.prose .bildstapel.gleich-breit img { width: 100%; height: auto; }
.prose .bildstapel.gleich-hoch figure { text-align: center; }
.prose .bildstapel.gleich-hoch img { height: min(22rem, 60vw); width: auto; max-width: 100%; object-fit: contain; margin: 0 auto; }

/* a row cut to one size (reihe-zuschneiden): every picture in the first one's format (--rr), filling its place */
.prose .zugeschnitten figure img, .prose .bildstapel.zugeschnitten figure img { display: block; width: 100%; height: auto; max-width: 100%; aspect-ratio: var(--rr, 1.5); object-fit: cover; }

/* videos (bauen.video): the still with a play button; YouTube only after a click (site.js enhanceVideos). On a videos
   page one below the other, as wide as the text; under a piece of the teaching literature two side by side */
.videos { display: grid; gap: 2rem; margin: 1.5em 0 2em; max-width: var(--col); }
.videos-klein { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 1.25rem; margin: .4em 0 1em; }
.video-rahmen { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--navy);
  box-shadow: 0 10px 24px -16px rgba(0,0,0,.6); }
.video-bild { all: unset; position: absolute; inset: 0; display: block; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #2b2c45, var(--navy) 65%); }
.video-bild:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
.video-bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter .2s; }
/* the cover from the title (bauen.video_cover, "Saxophon"): everything in cqw, so it is the same picture at any size */
.video-rahmen { container-type: inline-size; }
.vc { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--navy) url('../_bilder/saxophon-002.jpg') center / cover no-repeat;   /* = bauen.DEFAULT_BANNER */
  transition: filter .2s; }
.vc::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 12, 24, .94) 18%, rgba(12, 12, 24, .35) 62%, rgba(12, 12, 24, .1)); }
.vc-text { position: absolute; z-index: 1; left: 6cqw; right: 22cqw; bottom: 12cqw; display: flex; flex-direction: column; gap: .7cqw; text-align: left; }
.vc-k { font: 700 3.2cqw/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--orange-hi); }
.vc-t { font: 500 8.2cqw/1.04 var(--serif); color: #fff; text-wrap: balance; }
.vc-n { font: 400 3.1cqw/1.3 var(--sans); color: rgba(255, 255, 255, .72); }
.video-bild:hover .vc { filter: brightness(.92); }
.video-folgt .vc { opacity: .5; }
.video-folgt .vc-text { bottom: 6cqw; }
.video-knopf { position: absolute; z-index: 1; right: 6cqw; bottom: 12cqw; width: 11cqw; height: 11cqw; border-radius: 50%;
  background: var(--orange); box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: background .15s; }
.video-knopf::before { content: ''; position: absolute; left: 52%; top: 50%; transform: translate(-40%, -50%);
  border-style: solid; border-width: 2.1cqw 0 2.1cqw 3.4cqw; border-color: transparent transparent transparent #fff; }
.video-fremd .video-knopf::before { border: 0; width: 4cqw; height: 4cqw; transform: translate(-50%, -50%); background: #fff;
  -webkit-mask: var(--ic-external-link) center / contain no-repeat; mask: var(--ic-external-link) center / contain no-repeat; }
.video-bild:hover .video-knopf { background: var(--orange-hi); }
.video-bild:hover img { filter: brightness(.9); }
.video-hinweis { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: .9cqw 2.2cqw; font: 400 max(.68rem, 2.6cqw)/1.35 var(--sans);
  color: #e8e8ee; background: rgba(10, 10, 20, .55); }
.video-folgt { cursor: default; }
.video-folgt .video-hinweis { left: auto; bottom: auto; top: 5cqw; right: 6cqw; padding: .6cqw 2.2cqw; border-radius: 999px; font-weight: 600; color: #fff; background: rgba(10, 10, 20, .6); }
.video-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-worte { padding: .7rem .1rem 0; }
.video-worte p { margin: 0 0 .3rem; }
.video-titel { font: 500 1.3rem/1.25 var(--serif); }
.video-klein .video-titel { font: 600 1.02rem/1.3 var(--sans); }
.video-text { color: var(--muted); }
.video-klein .video-text { font-size: .95rem; }
.video-mehr { font-weight: 600; }

.prose p.video:has(+ .video) { display: none; }
.prose .video { margin: 1.5em 0; }

/* the teaching literature (bauen.piece): each booklet or piece, its cover beside what it is, the videos below */
.stuecke { max-width: var(--col); }
.stueck { padding: 1.6rem 0 1rem; border-top: 1px solid var(--rule); }
.stueck:first-child { border-top: 0; padding-top: .4rem; }
.stueck-kopf.mit-bild { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.stueck-bild img { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 8px 18px -12px rgba(0,0,0,.6); }
.stueck-titel { margin: 0 0 .25rem; font: 500 1.55rem/1.2 var(--serif); }
.stueck-meta { margin: 0 0 .2rem; color: var(--muted); }
.stueck-verlag { margin: 0; }
.stueck-text { margin: .8rem 0 0; }
.stueck .hoerprobe { margin: .8rem 0 0; }
.stueck-gespielt { margin: 1.2rem 0 .2rem !important; }

/* the next concert as the lead box, the ones after it below with everything they have: calendar leaf, what, who,
   day and time, place, admission and link, cover ("Der nächste groß", Matthias 10 Nov 2026: "ruhig alle Informationen,
   mehrere Zeilen i.O."; bauen.concerts_next / concerts_all with their switches; site.js marks the first one still to
   come: .erster) */
.termine-aufmacher .termin { gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--rule); align-items: flex-start; }
.termine-aufmacher .termin:not(.erster) .termin-titel { margin-bottom: .1rem; }
.termine-aufmacher .termin:not(.erster) .termin-cover { width: 4.2rem; }
.termine-aufmacher .termin-tag { display: block; }
.termine-aufmacher .termin-wo { display: block; }
.termine-aufmacher .termin.erster { position: relative; align-items: flex-start; justify-content: space-between; margin: 0 0 .9rem; padding: 1.1rem 1.3rem 1.2rem;
  border: 0; border-left: 6px solid var(--orange); border-radius: var(--radius); background: #fff; box-shadow: 0 10px 26px -18px rgba(0,0,0,.5); }
.termine-aufmacher .termin.erster + .termin { border-top: 0; }
.termine-aufmacher .termin.erster .termin-blatt { display: none; }
.termine-aufmacher .termin.erster .termin-text::before { content: 'Nächster Termin'; display: block; margin-bottom: .15rem; font: 600 .95rem/1.3 var(--sans); color: var(--orange-ink); }
.termine-aufmacher .termin.erster .termin-titel { font: 500 1.55rem/1.2 var(--serif); margin-bottom: .3rem; }
.termine-aufmacher .termin.erster .termin-tag { display: block; font-weight: 700; color: var(--ink); font-size: 1.05rem; }
/* on the homepage the box stays as plain as "Der nächste groß" (Variante 3): what, when, where */
.termine-start.termine-aufmacher .termin-wer, .termine-start.termine-aufmacher .termin-info { display: none; }
.termine-aufmacher .termin.erster .termin-wann { color: var(--ink); font-size: 1rem; }
.termine-aufmacher .termin.erster .termin-cover { width: 5.5rem; }
.termine-start.termine-aufmacher { max-width: var(--col); }
.termine-start.termine-aufmacher .termin.erster { margin-bottom: .4rem; }
.termine-alle { margin: .2rem 0 0; font-weight: 600; }
@media (max-width: 480px) { .termine-aufmacher .termin.erster { flex-direction: column-reverse; } }
/* the quiet lines to the archives (switch "archiv-zeilen") instead of the two cards */
.archiv-zeile { max-width: var(--col); margin: 1.4rem 0 0; padding-top: .7rem; border-top: 1px solid var(--rule); font-weight: 600; }
.archiv-zeile[hidden] { display: none; }
.archiv-zeile a { color: var(--muted); text-decoration: none; }
.archiv-zeile a:hover { color: var(--orange-ink); text-decoration: underline; }
.meldungsarchiv .archiv-zeile { font-weight: 400; }
.meldungsarchiv .archiv-zeile a { color: var(--link); text-decoration: underline; font-weight: 600; }
/* programmes and projects under the CDs (switch "cds-projekte") */
.projekte { margin: 2.5rem 0 1rem; }
.projekte-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.projekte-liste a { display: flex; gap: .9rem; align-items: center; padding: .8rem; border-radius: var(--radius); background: var(--card); color: var(--ink); text-decoration: none; }
.projekte-liste a:hover b { color: var(--orange-ink); }
.pr-bild { flex: none; width: 4rem; aspect-ratio: 1; border-radius: 3px; overflow: hidden; background: #e2e1dc; }
.pr-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pr-text b { display: block; font: 500 1.1rem/1.25 var(--serif); }
.pr-text small { display: block; color: var(--muted); font-size: .92rem; }

/* icons (Lucide, ISC), made by bauen.py */
:root { --ic-external-link: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%203h6v6%22%20/%3E%3Cpath%20d%3D%22M10%2014%2021%203%22%20/%3E%3Cpath%20d%3D%22M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6%22%20/%3E%3C/svg%3E"); --ic-file-text: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7Z%22%20/%3E%3Cpath%20d%3D%22M14%202v4a2%202%200%200%200%202%202h4%22%20/%3E%3Cpath%20d%3D%22M10%209H8%22%20/%3E%3Cpath%20d%3D%22M16%2013H8%22%20/%3E%3Cpath%20d%3D%22M16%2017H8%22%20/%3E%3C/svg%3E"); --ic-mail: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2216%22%20x%3D%222%22%20y%3D%224%22%20rx%3D%222%22%20/%3E%3Cpath%20d%3D%22m22%207-8.97%205.7a1.94%201.94%200%200%201-2.06%200L2%207%22%20/%3E%3C/svg%3E"); --ic-send: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.536%2021.686a.5.5%200%200%200%20.937-.024l6.5-19a.496.496%200%200%200-.635-.635l-19%206.5a.5.5%200%200%200-.024.937l7.93%203.18a2%202%200%200%201%201.112%201.11z%22%20/%3E%3Cpath%20d%3D%22m21.854%202.147-10.94%2010.939%22%20/%3E%3C/svg%3E"); }