/* Sächsische Bläserphilharmonie – Brücken-Website 2026/27
   Nachbau des bisherigen Erscheinungsbildes mit eigenem Code (keine Dateien der früheren Vorlage).
   Alle Farben und Maße als Variablen; die Gestaltungsschicht ist für den Relaunch 2027 austauschbar. */

@font-face { font-family: "Alegreya Sans"; font-weight: 300; font-style: normal; font-display: swap; src: url("schriften/alegreya-sans-latin-300-normal.db78f3c613ff.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya Sans"; font-weight: 300; font-style: normal; font-display: swap; src: url("schriften/alegreya-sans-latin-ext-300-normal.4f501863e571.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Alegreya Sans"; font-weight: 300; font-style: italic; font-display: swap; src: url("schriften/alegreya-sans-latin-300-italic.1a74a6e0a1b2.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Alegreya Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("schriften/alegreya-sans-latin-400-normal.dec96422d9be.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("schriften/alegreya-sans-latin-ext-400-normal.19c52c5ec74e.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Alegreya Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("schriften/alegreya-sans-latin-400-italic.008b59ff81bd.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Alegreya Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("schriften/alegreya-sans-latin-700-normal.c198fa600447.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("schriften/alegreya-sans-latin-ext-700-normal.b10558b07723.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Alegreya Sans"; font-weight: 700; font-style: italic; font-display: swap; src: url("schriften/alegreya-sans-latin-700-italic.928b9d3d40ef.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Alegreya Sans SC"; font-weight: 100; font-style: normal; font-display: swap; src: url("schriften/alegreya-sans-sc-latin-100-normal.4e2569d838dd.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya Sans SC"; font-weight: 100; font-style: normal; font-display: swap; src: url("schriften/alegreya-sans-sc-latin-ext-100-normal.9a9c928746a1.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Alegreya Sans SC"; font-weight: 300; font-style: normal; font-display: swap; src: url("schriften/alegreya-sans-sc-latin-300-normal.16f2e4be5277.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya Sans SC"; font-weight: 300; font-style: normal; font-display: swap; src: url("schriften/alegreya-sans-sc-latin-ext-300-normal.ed9bee1db008.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Alegreya Sans SC"; font-weight: 400; font-style: normal; font-display: swap; src: url("schriften/alegreya-sans-sc-latin-400-normal.95c6edfa2f31.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya Sans SC"; font-weight: 400; font-style: normal; font-display: swap; src: url("schriften/alegreya-sans-sc-latin-ext-400-normal.0ccb469891b2.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Alegreya Sans SC"; font-weight: 700; font-style: normal; font-display: swap; src: url("schriften/alegreya-sans-sc-latin-700-normal.9a10c727ad7a.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya Sans SC"; font-weight: 700; font-style: normal; font-display: swap; src: url("schriften/alegreya-sans-sc-latin-ext-700-normal.20847a8233d7.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --papier: #eae9e1;
  --papier-hell: #f2f1ec;
  --papier-dunkel: #e0ddd4;
  --schiefer: #58616a;
  --anthrazit: #303b44;
  --nacht: #252e35;
  --text: #58616a;
  --text-zart: #7c8792;
  --text-hell: #e4e2d8;
  --weiss: #fbfbf9;
  --weinrot: #651713;
  --gold: #d6990a;
  --gold-hell: #f5b51e;
  --datumrot: #b23f19;
  --konzert: #d6990a;
  --schuelerkonzert: #c8188f;
  --familienkonzert: #3f8f5f;
  --akademie: #b23f19;
  --sonstiges: #651713;
  --goldverlauf: linear-gradient(90deg, #f0ad12 0%, #d9c83d 36%, #a06000 66%, #e0bf33 100%);
  --schrift: "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;
  --kapitaelchen: "Alegreya Sans SC", "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;
  --breite: 1170px;
  --rand: clamp(1rem, 4vw, 2.5rem);
  --ecke: 30px;
  --dock: 112px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0; font: 400 18px/1.5 var(--schrift); color: var(--text);
  background: var(--papier) url("marke/hg-hell.110bb91c4079.webp") center top / 100% auto;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--weinrot); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--gold-hell); outline-offset: 3px; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.1; }
p { margin: 0 0 1em; }
.sprungmarke { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--gold); color: #000; padding: .6rem 1rem; }
.sprungmarke:focus { left: 1rem; top: 1rem; }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Grundflächen ---------- */
.flaeche-papier { background: var(--papier) url("marke/hg-hell.110bb91c4079.webp") center top / 100% auto; color: var(--text); }
.flaeche-schiefer { background: var(--schiefer) url("marke/hg-grau.3aa8cbc04279.webp") center top / 100% auto; color: var(--text-hell); }
.flaeche-nacht { background: var(--nacht); color: var(--text-hell); }
.flaeche-anthrazit { background: var(--anthrazit); color: var(--text-hell); }
:is(.flaeche-schiefer, .flaeche-nacht, .flaeche-anthrazit) :is(p, dd, .fliesstext, .karten, .weitere, .reihenliste, .seitenkasten) a:not(.knopf) { color: var(--gold-hell); }
.innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.abschnitt { padding: clamp(3rem, 7vw, 6rem) 0; }

/* ---------- Typografie ---------- */
.titel-gross { font: 100 clamp(2.6rem, 6.4vw, 4.5rem)/1 var(--kapitaelchen); color: var(--weinrot); letter-spacing: .01em; }
.titel-gold { font: 100 clamp(2.4rem, 6vw, 4.5rem)/1 var(--kapitaelchen); color: var(--gold); }
.titel-verlauf { background: var(--goldverlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.unterzeile { font: 400 1.35rem/1.25 var(--kapitaelchen); color: var(--text-zart); margin: 0 0 1.5rem; }
.flaeche-schiefer .unterzeile, .flaeche-nacht .unterzeile, .flaeche-anthrazit .unterzeile { color: var(--text-hell); }
.fliesstext { max-width: 46rem; }
.fliesstext h2 { font: 300 2rem/1.15 var(--kapitaelchen); color: var(--weinrot); margin-top: 1.6em; }
.fliesstext h3 { font: 700 1.35rem/1.2 var(--schrift); color: var(--weinrot); margin-top: 1.4em; }
.flaeche-schiefer .fliesstext h2, .flaeche-schiefer .fliesstext h3, .flaeche-nacht .fliesstext h2, .flaeche-nacht .fliesstext h3 { color: var(--weiss); }
.fliesstext ul { padding-left: 1.2rem; }
.fliesstext li { margin: .2em 0; }
.klein { font-size: .9rem; color: var(--text-zart); }
.lead { font-size: 1.3rem; line-height: 1.35; }

/* ---------- Knöpfe und Pfeile ---------- */
.knopf {
  display: inline-block; padding: .35rem 1.5rem; border: 1px solid var(--gold); border-radius: 999px;
  color: var(--gold); background: transparent; font: 400 1rem/1.5 var(--schrift); cursor: pointer;
  transition: background-color .2s, color .2s;
}
.knopf:hover, .knopf:focus-visible { background: var(--gold); color: var(--nacht); text-decoration: none; }
.knopf--voll { background: var(--gold); color: var(--nacht); }
.knopf--voll:hover { background: var(--gold-hell); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .8rem 1rem; }
.pfeil { width: 38px; height: 38px; flex: none; color: var(--gold); }
.pfeil--weinrot { color: var(--weinrot); }

/* ---------- Kopf: Menüknopf und Menü ---------- */
.menueknopf {
  position: fixed; top: 14px; left: 14px; z-index: 60; width: 52px; height: 44px; padding: 8px 6px;
  background: rgba(37, 46, 53, .55); border: 0; border-radius: 4px; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between;
}
.menueknopf span { display: block; height: 3px; background: var(--gold); border-radius: 2px; transition: transform .25s, opacity .25s; }
.menueknopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(11.5px) rotate(45deg); }
.menueknopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menueknopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-11.5px) rotate(-45deg); }
.menue {
  position: fixed; inset: 0 auto 0 0; z-index: 55; width: min(420px, 100%); overflow-y: auto;
  background: rgba(37, 46, 53, .97); padding: 90px 2.2rem 2rem; transform: translateX(-100%); transition: transform .3s ease;
  visibility: hidden;
}
.menue.offen { transform: none; visibility: visible; }
.menue ul { list-style: none; margin: 0; padding: 0; }
.menue > ul > li { border-bottom: 1px solid rgba(228, 226, 216, .12); }
.menue > ul > li > a { display: block; padding: .55rem 0; font: 400 1.6rem/1.2 var(--kapitaelchen); color: var(--weiss); }
.menue > ul > li > a[aria-current] { color: var(--gold); }
.menue ul ul { padding: 0 0 .6rem 1rem; }
.menue ul ul a { display: block; padding: .15rem 0; color: var(--text-hell); font-size: 1.05rem; }
.menue a:hover { color: var(--gold-hell); text-decoration: none; }
.menue__fuss { margin-top: 1.5rem; display: flex; gap: .8rem 1.4rem; flex-wrap: wrap; font-size: 1rem; }
.menue__fuss a { color: var(--text-hell); }

/* ---------- Förderer, Sponsoren, Partner (über der Fußleiste, jede Seite) ---------- */
.unterstuetzer { padding: 3.5rem 0 3rem; }
.unterstuetzer__gruppe { display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; align-items: center; padding: 1.2rem 0; }
.unterstuetzer__gruppe h2 { font: 700 1.3rem/1.1 var(--schrift); color: var(--text-zart); margin: 0; }
.unterstuetzer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 2.4rem; }
.unterstuetzer img, .logoleiste img { max-height: 70px; max-width: 165px; width: auto; height: auto; }
/* Querformatige Logos (z. B. BKM: Bundesadler mit zweizeiligem Schriftzug) brauchen mehr Breite, um gleich groß zu wirken */
.unterstuetzer img.logo--quer, .logoleiste img.logo--quer { max-width: 210px; }
.unterstuetzer img.logo--breit, .logoleiste img.logo--breit { max-width: 300px; max-height: 64px; }
@media (max-width: 640px) { .unterstuetzer__gruppe { grid-template-columns: 1fr; } .unterstuetzer img { max-height: 54px; max-width: 130px; } .unterstuetzer img.logo--quer { max-width: 170px; } .unterstuetzer img.logo--breit { max-width: 240px; max-height: 52px; } }

/* ---------- Fußleiste (bisher fest am unteren Rand und über dem Inhalt; jetzt am Seitenende) ---------- */
.fussleiste {
  background: var(--nacht); color: var(--text-hell);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 1.5rem 3rem;
  padding: 0 0 0 clamp(1rem, 4vw, 6rem); min-height: var(--dock); margin-top: 26px;
}
.fussleiste__marke { align-self: start; margin-top: -26px; }
.fussleiste__marke img { height: 118px; width: auto; }
.fussleiste__nav ul { list-style: none; margin: 0; padding: 1rem 0; display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); gap: 0 2.4rem; justify-content: start; }
.fussleiste__nav a { font: 400 1.2rem/1.45 var(--kapitaelchen); color: var(--text-hell); }
.fussleiste__nav .stark a { font-weight: 700; color: var(--weiss); }
.fussleiste__nav a[aria-current] { color: var(--gold); }
.fussleiste__kontakt { font-size: .9rem; line-height: 1.35; padding: 1rem 0; }
.fussleiste__kontakt p { margin: 0 0 .4rem; }
.fussleiste__kontakt a { color: var(--text-hell); }
.fussleiste__sozial { display: flex; gap: .45rem; margin-top: .5rem; }
.fussleiste__sozial a { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(228, 226, 216, .6); border-radius: 50%; color: var(--weiss); }
.fussleiste__sozial a:hover { border-color: var(--gold); color: var(--gold); text-decoration: none; }
.fussleiste__sozial svg { width: 15px; height: 15px; }
.fussleiste__dba { align-self: stretch; display: flex; align-items: center; padding: 0 1.4rem 0 3.4rem;
  background: var(--papier-hell); clip-path: polygon(48px 0, 100% 0, 100% 100%, 0 100%); }
.fussleiste__dba img { height: 70px; width: auto; }
@media (max-width: 1100px) {
  .fussleiste { grid-template-columns: 1fr auto; padding: 0 var(--rand); }
  .fussleiste__nav { grid-column: 1 / -1; grid-row: 2; }
  .fussleiste__nav ul { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  .fussleiste__kontakt { grid-column: 1 / -1; grid-row: 3; padding-top: 0; }
  .fussleiste__dba { grid-column: 2; grid-row: 1; margin-right: calc(-1 * var(--rand)); }
}

.hinweisbalken { background: #fdf6dc; color: #4a3b00; padding: .5rem var(--rand); text-align: center; font-size: .95rem; border-bottom: 2px solid var(--gold-hell); }

/* ---------- Fotobühne (Startseite) ---------- */
.buehne { position: relative; height: 100vh; height: 100svh; max-height: 980px; min-height: 460px; overflow: hidden; background: var(--nacht); color: var(--weiss); }
.buehne__bild { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.buehne__bild.aktiv { opacity: 1; }
.buehne__bild img { width: 100%; height: 100%; object-fit: cover; }
.buehne__bild::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .3); }
.buehne__text { position: absolute; z-index: 2; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
.buehne__titel { font: 100 clamp(2.8rem, 7.5vw, 6.75rem)/1 var(--kapitaelchen); margin: 0 0 .2em; color: var(--weiss); text-shadow: 0 2px 18px rgba(0, 0, 0, .25); overflow-wrap: anywhere; }
.buehne__unter { font: 400 clamp(1.4rem, 3.1vw, 2.8rem)/1.3 var(--kapitaelchen); margin: 0 0 1.4rem; }
.buehne .knopf { color: var(--weiss); border-color: var(--gold); background: rgba(37, 46, 53, .35); }
.buehne .knopf:hover { background: var(--gold); color: var(--nacht); }
.buehne__pfeil {
  position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: var(--gold); color: var(--nacht); cursor: pointer; display: grid; place-items: center;
}
.buehne__pfeil--zurueck { left: 24px; } .buehne__pfeil--vor { right: 24px; }
.buehne__pfeil svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .buehne__bild { transition: none; } }

/* ---------- Willkommen ---------- */
.willkommen { display: grid; grid-template-columns: 1fr 1.25fr .9fr; gap: 2.5rem; align-items: start; }
.willkommen__kopf { text-align: right; }
.willkommen__kopf .unterzeile { margin-bottom: 0; }
.willkommen__knoepfe { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; padding-top: .6rem; }
@media (max-width: 900px) { .willkommen { grid-template-columns: 1fr; } .willkommen__kopf { text-align: left; } }

/* ---------- Datumsschild ---------- */
.datum { position: absolute; width: 78px; text-align: center; background: var(--weiss); color: var(--text); border-radius: 3px 3px 0 0; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); font-family: var(--schrift); }
.datum__tag { display: block; font-size: .78rem; padding-top: .3rem; }
.datum__zahl { display: block; font: 700 2.6rem/1 var(--schrift); color: var(--datumrot); }
.datum__monat { display: block; font-size: .78rem; font-weight: 700; padding-bottom: .35rem; }
.datum__zeit { display: block; background: var(--schiefer); color: var(--weiss); font-size: .78rem; padding: .25rem 0; border-radius: 0 0 3px 3px; }

/* ---------- Konzertkarten (Startseite) ---------- */
.konzertkarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; margin-top: 3rem; }
@media (max-width: 900px) { .konzertkarten { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); } }
.konzertkarte { position: relative; display: flex; flex-direction: column; background: var(--anthrazit); color: var(--weiss); border-bottom-right-radius: var(--ecke); overflow: hidden; }
.konzertkarte:hover { text-decoration: none; }
.konzertkarte__bild { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; border-bottom: 2px solid var(--gold); }
.konzertkarte__kopf { position: relative; display: block; }
.konzertkarte .datum { left: 0; top: auto; bottom: -54px; }
.konzertkarte__ort { color: var(--gold); font-size: .9rem; line-height: 1.3; margin: .6rem 1rem 0 5.6rem; min-height: 3.1rem; }
.konzertkarte__titel { font: 700 1.35rem/1.15 var(--kapitaelchen); color: var(--weiss); margin: .9rem 1rem 0 1rem; flex: 1; }
.konzertkarte__pfeil { align-self: flex-end; margin: .5rem 1rem 1rem; }
.konzertkarte:hover .konzertkarte__titel { color: var(--gold-hell); }

/* ---------- Neuigkeitenkarten ---------- */
.zentriert { text-align: center; }
.newskarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.4rem; margin-top: 2.5rem; align-items: start; }
.newskarte { display: flex; flex-direction: column; background: var(--papier-hell); color: var(--text); border-bottom-right-radius: var(--ecke); box-shadow: 0 1px 4px rgba(48, 59, 68, .12); }
.newskarte:hover { text-decoration: none; box-shadow: 0 4px 16px rgba(48, 59, 68, .22); }
.newskarte__bild { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; border-bottom: 3px solid var(--weinrot); }
.newskarte__rumpf { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; flex: 1; }
.newskarte__datum { font-size: .8rem; color: var(--text-zart); }
.newskarte__titel { font: 700 1.3rem/1.15 var(--schrift); color: var(--weinrot); margin: .3rem 0 .5rem; }
.newskarte__text { font-size: .95rem; line-height: 1.35; margin: 0; }
.newskarte .pfeil { align-self: flex-end; margin-top: .4rem; }

/* ---------- CD-Bereich ---------- */
.cdkopf { display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; }
.cdkopf .titel-gold { margin: 0; }
.cdbuehne { position: relative; margin-top: 3rem; }
.cdfolie { display: none; grid-template-columns: 220px 1fr auto; gap: 2.5rem; align-items: center; }
.cdfolie.aktiv { display: grid; }
.cdfolie img { width: 220px; aspect-ratio: 1; object-fit: cover; box-shadow: 0 4px 20px rgba(0, 0, 0, .35); }
.cdfolie h3 { font: 700 2.2rem/1.1 var(--schrift); color: var(--weiss); margin: 0 0 .3rem; }
.cdfolie .unterzeile { color: var(--text-hell); margin-bottom: .6rem; }
.cdfolie p { color: var(--text-hell); }
.punkte { display: flex; justify-content: center; gap: .55rem; margin-top: 2rem; }
.punkte button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1px solid var(--gold); background: transparent; cursor: pointer; }
.punkte button[aria-current="true"] { background: var(--gold); }
.cdbuehne .buehne__pfeil--zurueck { left: -64px; } .cdbuehne .buehne__pfeil--vor { right: -64px; }
@media (max-width: 1300px) { .cdbuehne .buehne__pfeil { display: none; } }
@media (max-width: 800px) { .cdkopf, .cdfolie, .cdfolie.aktiv { grid-template-columns: 1fr; } .cdfolie img { width: 180px; } }

/* ---------- Motivstreifen und Seitenkopf ---------- */
.motiv { height: clamp(170px, 39vw, 600px); overflow: hidden; background: var(--nacht); }
.motiv img { width: 100%; height: 100%; object-fit: cover; }
.seitenkopf { padding: clamp(2rem, 5vw, 3.5rem) 0 1rem; }
.seitenkopf .unterzeile { margin-top: -.3rem; }
.mit-seite { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 3rem; align-items: start; }
.seitenkasten { background: var(--papier-hell); padding: 1.3rem 1.5rem; border-bottom-right-radius: var(--ecke); box-shadow: 0 1px 4px rgba(48, 59, 68, .12); margin-top: -7rem; position: relative; }
.seitenkasten h2 { font: 700 1.15rem/1.2 var(--schrift); color: var(--weinrot); }
.seitenkasten ul { list-style: none; padding: 0; margin: 0; }
.seitenkasten li { margin: .25rem 0; }
.seitenkasten a { color: var(--weinrot); font-weight: 700; }
@media (max-width: 900px) { .mit-seite { grid-template-columns: 1fr; } .seitenkasten { margin-top: 0; } }

/* ---------- Konzertübersicht ---------- */
.termine-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; padding: clamp(3rem, 7vw, 5.5rem) 0 1.5rem; }
.filter { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; font-size: .95rem; }
.filter label { display: flex; align-items: center; gap: .5rem; color: var(--text-hell); }
.filter select { font: inherit; color: var(--nacht); background: var(--papier-hell); border: 1px solid var(--gold); border-radius: 999px; padding: .2rem .9rem; }
.legende { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .9rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.legende li::before { content: ""; display: inline-block; width: .8em; height: .8em; border-radius: 50%; margin-right: .35rem; vertical-align: -.05em; border: 2px solid var(--farbe, var(--gold)); }
.terminliste { list-style: none; margin: 0; padding: 0 0 clamp(3rem, 7vw, 5rem); display: grid; gap: 1.1rem; }
.terminzeile { position: relative; display: grid; grid-template-columns: 210px 1fr; background: var(--anthrazit); border-bottom-right-radius: var(--ecke); overflow: hidden; color: var(--text-hell); min-height: 150px; }
.terminzeile:hover { text-decoration: none; }
.terminzeile__bild { width: 100%; height: 100%; object-fit: cover; border-right: 2px solid var(--gold); }
.terminzeile .datum { left: 120px; top: 6px; }
.terminzeile__rumpf { padding: .9rem 4rem 1rem 1.4rem; display: flex; flex-direction: column; justify-content: center; }
.terminzeile__wann { font-size: .95rem; }
.terminzeile__wann b { color: var(--weiss); }
.terminzeile__ort { font-size: .95rem; color: var(--text-hell); }
.terminzeile__titel { font: 700 clamp(1.3rem, 2.4vw, 2.1rem)/1.15 var(--kapitaelchen); color: var(--weiss); margin: .5rem 0 0; }
.terminzeile:hover .terminzeile__titel { color: var(--gold-hell); }
.terminzeile .pfeil { position: absolute; right: 1rem; bottom: .9rem; }
.faehnchen { position: absolute; left: 0; top: 0; z-index: 2; padding: .1rem .9rem .1rem .6rem; font-size: .85rem; color: var(--weiss); background: var(--farbe, var(--konzert)); border-bottom-right-radius: 14px; }
.statusband { display: inline-block; align-self: flex-start; margin-top: .4rem; padding: .05rem .6rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--gold-hell); color: var(--nacht); }
.terminzeile--abgesagt .terminzeile__titel { text-decoration: line-through; text-decoration-thickness: 2px; }
.sparte-konzert { --farbe: var(--konzert); } .sparte-schuelerkonzert { --farbe: var(--schuelerkonzert); }
.sparte-familienkonzert { --farbe: var(--familienkonzert); } .sparte-akademie { --farbe: var(--akademie); } .sparte-sonstiges { --farbe: var(--sonstiges); }
.leer { padding: 2rem; background: rgba(37, 46, 53, .5); color: var(--text-hell); border-bottom-right-radius: var(--ecke); }
@media (max-width: 640px) {
  .terminzeile { grid-template-columns: 1fr; }
  .terminzeile__bild { aspect-ratio: 3 / 2; border-right: 0; border-bottom: 2px solid var(--gold); }
  .terminzeile .datum { left: auto; right: 12px; top: 12px; }
}

/* ---------- Termin-Detail ---------- */
.termin { padding: clamp(3rem, 7vw, 5rem) 0; }
.termin__karte { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(17rem, 1fr); background: var(--anthrazit); border-radius: 0 6px 6px 0; overflow: visible; position: relative; }
.termin__bildrahmen { position: relative; border-right: 2px solid var(--gold); }
.termin__bild { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.termin__bildrahmen .datum { right: -40px; top: 30px; z-index: 2; }
.termin__seite { padding: 1.8rem 2rem 2rem 3.5rem; color: var(--text-hell); }
.termin__ort { font: 300 1.5rem/1.25 var(--schrift); color: var(--weiss); margin: 0 0 1.4rem; }
.termin__seite h2 { font: 700 1.5rem/1.2 var(--schrift); color: var(--weiss); margin: 1.6rem 0 .8rem; }
.termin__seite h3 { font: 700 1.1rem/1.2 var(--schrift); color: var(--weiss); margin: 1.2rem 0 .5rem; }
.termin__seite ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.termin__seite li { position: relative; padding-left: 1.1rem; margin: .45rem 0; line-height: 1.45; }
.termin__seite li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border: 1px solid var(--gold); border-radius: 50%; }
.termin__seite p { line-height: 1.45; }
.termin__seite .knopf { margin-top: 1rem; }
.termin__haupt { margin-top: 3rem; color: var(--text-hell); }
.termin__haupt h1 { font: 300 clamp(2.2rem, 4.5vw, 3.4rem)/1.05 var(--kapitaelchen); }
.termin__haupt .unterzeile { color: var(--text-hell); }
.programm { margin: 2rem 0; }
.programm h2 { font: 700 .95rem/1.2 var(--kapitaelchen); color: var(--gold); letter-spacing: .06em; margin-bottom: .6rem; }
.programm ol { list-style: none; margin: 0; padding: 0; }
.programm li { margin: 0 0 .55rem; }
.programm__komponist { display: block; font-weight: 700; color: var(--weiss); }
.programm__werk { display: block; font-style: italic; font-weight: 300; }
.statusbox { display: inline-block; margin: 0 0 1rem; padding: .35rem .9rem; background: var(--gold-hell); color: var(--nacht); font-weight: 700; }
.zurueck { margin-top: 2rem; }
@media (max-width: 900px) {
  .termin__karte { grid-template-columns: 1fr; }
  .termin__bildrahmen { border-right: 0; border-bottom: 2px solid var(--gold); }
  .termin__bildrahmen .datum { right: 16px; top: auto; bottom: -30px; }
  .termin__seite { padding: 2.2rem 1.4rem 1.6rem; }
}

/* ---------- Inhalte: Bilder, Galerie, Zitat, Dokument ---------- */
.bild { margin: 2rem 0; }
.bild figcaption { font-size: .9rem; color: var(--text-zart); margin-top: .4rem; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .8rem; margin: 2rem 0; }
.galerie img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.zitat { margin: 2rem 0; padding-left: 1.2rem; border-left: 3px solid var(--gold); font-size: 1.3rem; font-style: italic; font-weight: 300; }
.dokument a { font-weight: 700; color: var(--weinrot); }
.flaeche-schiefer .dokument a { color: var(--gold-hell); }

/* ---------- Kacheln (Unterseiten) ---------- */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.4rem; margin: 2.5rem 0; }
.kachel { display: flex; flex-direction: column; background: var(--papier-hell); color: var(--text); border-bottom-right-radius: var(--ecke); box-shadow: 0 1px 4px rgba(48, 59, 68, .12); }
.kachel:hover { text-decoration: none; box-shadow: 0 4px 16px rgba(48, 59, 68, .22); }
.kachel img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; border-bottom: 3px solid var(--weinrot); }
.kachel span { padding: .8rem 1rem 0; }
.kachel__titel { font: 700 1.25rem/1.15 var(--schrift); color: var(--weinrot); }
.kachel__text { font-size: .95rem; padding-bottom: 1rem !important; }

/* ---------- Personen ---------- */
.personen { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 2rem 1.6rem; margin: 2rem 0 3rem; }
.person { font-size: .9rem; line-height: 1.35; }
.person img { aspect-ratio: 1; object-fit: cover; width: 100%; margin-bottom: .7rem; }
.person p { margin: 0; }
.person__name { font-weight: 700; font-size: 1.05rem; color: var(--text); }
.person__funktion { color: var(--weinrot); margin-bottom: .4rem !important; }
.person a { color: var(--weinrot); }

/* ---------- Aufnahmen ---------- */
.cdraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1.6rem; padding-bottom: 4rem; }
.cdraster a { display: block; color: var(--text-hell); }
.cdraster a:hover { text-decoration: none; color: var(--gold-hell); }
.cdraster img { aspect-ratio: 1; width: 100%; object-fit: cover; box-shadow: 0 3px 14px rgba(0, 0, 0, .35); margin-bottom: .6rem; }
.cdraster span { display: block; font-weight: 700; }
.aufnahme { display: grid; grid-template-columns: 300px 1fr; gap: 3rem; align-items: start; }
.aufnahme img { width: 100%; box-shadow: 0 4px 20px rgba(0, 0, 0, .3); }
@media (max-width: 800px) { .aufnahme { grid-template-columns: 1fr; } .aufnahme img { max-width: 300px; } }

/* ---------- Logoleiste in Inhalten ---------- */
.logoleiste { list-style: none; padding: 0; margin: 1rem 0 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 2.4rem; }

/* ---------- Formulare ---------- */
.formular { max-width: 40rem; }
.feld { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1.1rem; }
.feld label { font-weight: 700; }
.feld input, .feld textarea, .feld select { font: inherit; color: var(--nacht); background: var(--weiss); border: 1px solid #a6aeb5; border-radius: 3px; padding: .55rem .7rem; }
.feld textarea { min-height: 9rem; }
.feld--fehler input, .feld--fehler textarea { border-color: var(--datumrot); }
.fehler { color: var(--datumrot); margin: 0; font-size: .9rem; }
.honigtopf { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.blaettern { display: flex; justify-content: center; gap: 1.5rem; align-items: center; margin: 2rem 0 0; }

/* ---------- Ergänzungen Fassung 4 ---------- */
.knopf--weinrot { border-color: var(--weinrot); color: var(--weinrot); }
.knopf--weinrot:hover, .knopf--weinrot:focus-visible { background: var(--weinrot); color: var(--weiss); }
.abschnitt--trenner { border-top: 1px solid rgba(88, 97, 106, .12); }
.konzertkarte__bild--leer, .terminzeile__bild--leer, .termin__bild--leer { display: block; background: var(--schiefer) url("marke/hg-grau-dunkel.7dde5edec9e0.webp") center / cover; }
.konzertkarte__bild--leer { aspect-ratio: 3 / 2; }
.termin__bild--leer { aspect-ratio: 4 / 3; }
.bild--knapp { background: transparent; }
.konzertkarten > li, .newskarten > li, .terminliste > li { list-style: none; }
.konzertkarten, .newskarten { padding: 0; }
.konzertkarte { height: 100%; }
.newskarte, .kachel { height: 100%; }
.legende a { color: var(--text-hell); }
.legende a[aria-current] { color: var(--weiss); font-weight: 700; text-decoration: underline; text-underline-offset: .25em; }
.legende .sparte-konzert { --farbe: var(--konzert); } .legende .sparte-schuelerkonzert { --farbe: var(--schuelerkonzert); }
.legende .sparte-familienkonzert { --farbe: var(--familienkonzert); } .legende .sparte-akademie { --farbe: var(--akademie); } .legende .sparte-sonstiges { --farbe: var(--sonstiges); }
.jahr h2 { font: 100 2.4rem/1 var(--kapitaelchen); color: var(--gold); margin: 1.5rem 0 .2rem; }
.terminzeile__hinweis { font-size: .85rem; color: var(--gold-hell); margin-top: .3rem; }
.reihenliste { padding: 1rem 0 2rem; }
.reihenliste ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .4rem 2rem; }
.reihenliste a { font-weight: 700; }
.reihenliste span { display: block; font-size: .9rem; color: var(--text-hell); }
.kalenderabo { padding: 0 0 4rem; font-size: .95rem; }

/* Konzertseite: Aufführungen im Seitenpanel */
.auffuehrungen { list-style: none; margin: 0; padding: 0; }
.auffuehrung { padding: 0 0 1.2rem; margin: 0 0 1.2rem; border-bottom: 1px solid rgba(228, 226, 216, .15); scroll-margin-top: 2rem; }
.auffuehrung:last-child { border-bottom: 0; margin-bottom: 0; }
.auffuehrung:target { outline: 2px solid var(--gold); outline-offset: .6rem; border-radius: 2px; }
.auffuehrung__wann { font-weight: 700; color: var(--weiss); margin: 0 0 .2rem; }
.auffuehrungen--einzeln .auffuehrung__wann { font-weight: 400; color: var(--text-hell); }
.auffuehrung .termin__ort { margin-bottom: .3rem; }
.auffuehrung p { margin: 0 0 .35rem; }
.auffuehrung__hinweis { font-size: .92rem; border-left: 2px solid var(--gold); padding-left: .7rem; margin: .5rem 0; }
.termin__seite .karten ul li { font-size: .95rem; }
.termin__seite details.karten { margin: .4rem 0 .6rem; font-size: .95rem; }
.termin__seite details.karten summary { cursor: pointer; color: var(--gold-hell); }
.termin__seite .knopf { margin-top: .5rem; }
.mitwirkende { margin: 0 0 .3rem; }
.weitere { margin: 2.5rem 0 0; }
.weitere h2 { font: 700 1.1rem/1.3 var(--schrift); color: var(--weiss); }
.weitere ul { padding-left: 1.1rem; }
.flaeche-schiefer .fliesstext a, .termin__haupt a:not(.knopf) { color: var(--gold-hell); }

/* Reihenseite */
.reihenbuehne { position: relative; height: clamp(180px, 30vw, 420px); overflow: hidden; background: var(--nacht); }
.reihenbuehne img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.reihenbuehne__titel { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 0 var(--rand); text-align: center;
  font: 100 clamp(2.4rem, 7vw, 5.5rem)/1 var(--kapitaelchen); color: var(--weiss); text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.reihentermine { margin: 3rem calc(-1 * var(--rand)) 0; padding: 2rem var(--rand) 1rem; border-bottom-right-radius: var(--ecke); }
.reihentermine .terminliste { padding-bottom: 1rem; }
.seitenkasten .karten { font-size: .92rem; }
.seitenkasten .karten ul { list-style: disc; padding-left: 1.1rem; }
.seitenkasten h2 + ul, .seitenkasten h2 + p { margin-bottom: 1.2rem; }
.eckdaten { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1.2rem; font-size: .95rem; margin: 1.5rem 0; }
.eckdaten dt { font-weight: 700; } .eckdaten dd { margin: 0; }
.programm--hell .programm__komponist { color: var(--text); }
.programm--hell h2 { color: var(--weinrot); }
.cdraster small { display: block; color: var(--text-hell); font-size: .85rem; }
.fliesstext + .fliesstext { margin-top: 0; }
.innen > .fliesstext, .innen > .bild, .innen > .galerie, .innen > .zitat, .innen > .personen, .innen > h2, .innen > .logoleiste { max-width: 46rem; }
.innen > .personen, .innen > .galerie, .innen > .logoleiste { max-width: none; }
.innen > h2 { font: 300 2rem/1.15 var(--kapitaelchen); color: var(--weinrot); margin-top: 2rem; }
.bild--breit { max-width: none !important; }

.termin__panelkopf { margin-top: 0 !important; }
.kurzliste { list-style: none; margin: 0 0 1rem; padding: 0; }
.kurzliste li { margin: 0; padding: 0 !important; }
.kurzliste li::before { display: none; }
.kurzliste a { display: block; padding: .45rem 0; border-bottom: 1px solid rgba(228, 226, 216, .15); color: var(--text-hell); line-height: 1.3; }
.kurzliste a:hover { color: var(--gold-hell); text-decoration: none; }
.kurzliste b { display: block; color: var(--weiss); font-weight: 700; }
.kurzliste span { display: block; font-size: .92rem; }
.kurzliste em { font-style: normal; font-size: .8rem; font-weight: 700; background: var(--gold-hell); color: var(--nacht); padding: 0 .4rem; }
.termine-karten { margin-top: 3rem; scroll-margin-top: 1rem; }
.auffuehrungskarten { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.2rem; }
.auffuehrungskarten .auffuehrung { background: var(--anthrazit); padding: 1.1rem 1.2rem 1.3rem; border: 0; margin: 0; border-bottom-right-radius: var(--ecke); color: var(--text-hell); scroll-margin-top: 1.5rem; }
.auffuehrungskarten .termin__ort { font: 300 1.25rem/1.25 var(--schrift); color: var(--weiss); }
.auffuehrungskarten details.karten { font-size: .92rem; margin: .4rem 0 .6rem; }
.auffuehrungskarten details.karten summary { cursor: pointer; color: var(--gold-hell); }
.auffuehrungskarten .karten ul { padding-left: 1.1rem; }
.auffuehrungskarten .knopf { margin-top: .4rem; }
.termin__haupt .fliesstext { max-width: 46rem; }

/* Terminbild: festes Format; bei hohem Seitenpanel füllt es die Spalte bis höchstens 820 px (kein starkes Hochzoomen mehr) */
.termin__bildrahmen { align-self: stretch; overflow: hidden; }
.termin__bild { height: 100%; max-height: 820px; object-fit: cover; }
@media (max-width: 900px) { .termin__bild { height: auto; } }

/* Konzertseite mit mehreren Aufführungen: Termine, Tickets und Preise direkt neben dem Bild */
.knopf--klein { padding: .15rem 1rem; font-size: .9rem; }
.auffuehrungen:not(.auffuehrungen--einzeln) .auffuehrung { padding-bottom: .9rem; margin-bottom: .9rem; }
.auffuehrungen:not(.auffuehrungen--einzeln) .termin__ort { font-size: 1.12rem; margin-bottom: .1rem; }
.auffuehrungen:not(.auffuehrungen--einzeln) .auffuehrung__wann { font-size: .98rem; }
.auffuehrung__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; margin-top: .45rem; }
.auffuehrung__aktionen .knopf { margin-top: 0 !important; }
.auffuehrung__aktionen details.karten { margin: 0; font-size: .92rem; }
.auffuehrung__aktionen details[open] { flex-basis: 100%; order: 2; }
.auffuehrung__aktionen details summary { cursor: pointer; color: var(--gold-hell); }
.auffuehrung__aktionen details .rich-text, .auffuehrung__aktionen details ul { margin-top: .4rem; }
.auffuehrung__aktionen details ul { padding-left: 1.1rem; }
.auffuehrung__aktionen details li { padding-left: 0 !important; margin: .2rem 0 !important; }
.auffuehrung__aktionen details li::before { display: none; }