@font-face { font-family:'Fraunces'; font-style:italic; font-weight:300; font-display:swap; src:url(/schriften/fraunces-italic-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:300; font-display:swap; src:url(/schriften/fraunces-italic-latin.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:'Fraunces'; font-style:normal; font-weight:300 500; font-display:swap; src:url(/schriften/fraunces-normal-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:300 500; font-display:swap; src:url(/schriften/fraunces-normal-latin.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:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap; src:url(/schriften/manrope-normal-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap; src:url(/schriften/manrope-normal-latin.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; }
:root {
    --serif:'Fraunces', Georgia, serif; --sans:'Manrope', system-ui, sans-serif;
  --t-xs:11px; --t-s:13px; --t-m:15px; --t-l:19px; --t-xl:26px; --t-xxl:36px; --t-display:clamp(30px, 8.5vw, 44px);
}
:root { --grund:#0E0D11; --flaeche:#1A1820; --hoch:#24212B; --text:#F2EEE6; --grau:#9A95A3; --messing:#E2B75E; --messing-dunkel:#1A1408; --orgel:#8CC3B5; --barock:#E9A07A; --glas:#0E0D11cc; }
  @media (prefers-color-scheme: light) { :root { --grund:#FAF7F2; --flaeche:#FFFFFF; --hoch:#EEE8DE; --text:#1B1820; --grau:#6E6875; --messing:#9A6B12; --messing-dunkel:#FFF8EA; --orgel:#2F7A68; --barock:#B8562B; --glas:#FAF7F2e6; } }
  * { box-sizing:border-box; margin:0; }
  html { scroll-padding-top:120px; }
  body { background:var(--grund); color:var(--text); font:500 var(--t-m)/1.5 var(--sans); -webkit-font-smoothing:antialiased; }
  button { font:inherit; color:inherit; cursor:pointer; }
  .seite { max-width:560px; margin:0 auto; padding-bottom:130px; }
  a { color:inherit; }

    .hero { position:relative; margin:10px 10px 0; border-radius:30px; overflow:hidden; aspect-ratio:4/5; max-height:78vh; max-height:78dvh; width:calc(100% - 20px); cursor:pointer; color:#F2EEE6; }
  .hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, #0E0D11b3 0%, #0E0D1100 26%, #0E0D1100 45%, #0E0D11f0 94%); }
  .hero .inhalt { position:absolute; z-index:1; left:22px; right:22px; bottom:22px; }
  .tippschild { display:inline-flex; align-items:center; gap:8px; background:#E2B75E; color:#1A1408; font:800 var(--t-s) var(--sans); letter-spacing:.14em; text-transform:uppercase; padding:8px 14px 8px 10px; border-radius:999px; box-shadow:0 6px 24px #E2B75E55; }
  .tippschild .stern { width:22px; height:22px; border-radius:50%; background:#1A1408; color:#E2B75E; display:grid; place-items:center; font-size:var(--t-s); letter-spacing:0; }
  .als-naechstes { display:inline-block; font:700 var(--t-xs) var(--sans); letter-spacing:.14em; text-transform:uppercase; background:#0E0D1199; backdrop-filter:blur(10px); padding:7px 12px; border-radius:999px; }
  .hero h2 { font:300 var(--t-display)/1.02 var(--serif); margin:14px 0 8px; letter-spacing:-.01em; }
  .hero .meta { font-size:var(--t-m); opacity:.88; }
  .hero .meta b { color:#E2B75E; font-weight:700; }

    .leiste { position:sticky; top:0; z-index:10; background:var(--glas); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); padding:12px 0 10px; }
  .leiste-kopf { display:flex; align-items:center; justify-content:space-between; padding:0 20px 8px; }
  .leiste-monat { font:500 var(--t-l) var(--serif); }
  .pfeile { display:flex; gap:6px; }
  .pfeile button { width:34px; height:34px; border-radius:50%; border:1px solid var(--hoch); background:var(--flaeche); font-size:var(--t-m); display:grid; place-items:center; }
  .pfeile button:disabled { opacity:.3; cursor:default; }
  .schiene-rahmen { position:relative; }
  .schiene-rahmen::before, .schiene-rahmen::after { content:''; position:absolute; top:0; bottom:0; width:28px; z-index:1; pointer-events:none; transition:opacity .2s; }
  .schiene-rahmen::before { left:0; background:linear-gradient(90deg, var(--grund), transparent); opacity:var(--links, 0); }
  .schiene-rahmen::after { right:0; background:linear-gradient(270deg, var(--grund), transparent); opacity:var(--rechts, 1); }
  .schiene { display:flex; gap:6px; overflow-x:auto; padding:0 20px; scroll-snap-type:x proximity; scrollbar-width:none; cursor:grab; user-select:none; }
  .schiene::-webkit-scrollbar { display:none; }
  .schiene.zieht { cursor:grabbing; scroll-snap-type:none; }
  .schiene .tag { flex:0 0 48px; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; gap:1px; padding:8px 0 7px; border-radius:16px; border:none; background:var(--flaeche); font:500 var(--t-xs) var(--sans); color:var(--grau); }
  .schiene .tag b { font:500 var(--t-l) var(--serif); color:var(--text); }
  .schiene .tag i { width:5px; height:5px; border-radius:50%; background:var(--messing); visibility:hidden; margin-top:2px; }
  .schiene .tag.hat i { visibility:visible; }
  .schiene .tag.leer { opacity:.45; }
  .schiene .tag.we { background:var(--hoch); }
  .schiene .tag.an { background:var(--messing); } .schiene .tag.an, .schiene .tag.an b { color:var(--messing-dunkel); } .schiene .tag.an i { background:var(--messing-dunkel); }
  .schiene .monatsmarke { flex:0 0 auto; writing-mode:vertical-rl; transform:rotate(180deg); font:800 var(--t-xs) var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--messing); align-self:center; padding:0 2px; }
  .aktiv-filter { display:flex; gap:6px; overflow-x:auto; padding:10px 20px 0; scrollbar-width:none; }
  .aktiv-filter:empty { display:none; }
  .aktiv-filter button { flex:none; border:1px solid var(--messing); background:none; color:var(--messing); border-radius:999px; padding:5px 10px 5px 12px; font:700 var(--t-s) var(--sans); }

    .monat { padding:34px 20px 4px; font:300 var(--t-xxl)/1 var(--serif); letter-spacing:-.01em; }
  .monat small { font:700 var(--t-s) var(--sans); color:var(--grau); letter-spacing:.12em; text-transform:uppercase; margin-left:8px; }
  .woche { display:flex; align-items:center; gap:10px; padding:20px 20px 0; font:700 var(--t-xs) var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--grau); }
  .woche::after { content:''; flex:1; height:1px; background:var(--hoch); }
  .tagkopf { padding:16px 20px 10px; display:flex; align-items:baseline; gap:10px; }
  .tagkopf h3, .tagkopf h2 { font:500 var(--t-l) var(--serif); }
  .tagkopf .rel { font:800 var(--t-xs) var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--messing-dunkel); background:var(--messing); padding:3px 8px; border-radius:6px; }
  .karte { position:relative; display:grid; grid-template-columns:104px 1fr; gap:14px; margin:0 10px 10px; padding:10px; border-radius:22px; background:var(--flaeche); cursor:pointer; border:1px solid transparent; transition:transform .15s; }
  .karte:active { transform:scale(.985); }
  .karte img { width:104px; height:120px; object-fit:cover; border-radius:14px; }
  .karte .zeit { font-size:var(--t-s); font-weight:700; color:var(--grau); display:flex; gap:8px; align-items:center; }
  .karte :is(h3, h4) { font:500 var(--t-l)/1.15 var(--serif); margin:6px 0 4px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .karte .ort { font-size:var(--t-s); color:var(--grau); }
  .karte .termine-hinweis { margin-top:4px; font:700 var(--t-xs) var(--sans); letter-spacing:.06em; color:var(--messing); }
  .folgetermin { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:baseline; margin:0 10px 10px; padding:10px 14px; border-radius:16px;
    border:1px dashed var(--hoch); color:inherit; text-decoration:none; }
  .folgetermin .zeit { font:700 var(--t-s) var(--sans); color:var(--grau); white-space:nowrap; }
  .folgetermin .was { min-width:0; font:500 var(--t-m)/1.3 var(--serif); }
  .folgetermin .was small { display:block; font:500 var(--t-xs) var(--sans); color:var(--grau); margin-top:2px; }
  .folgetermin .pfeil { color:var(--messing); font-size:1.4em; line-height:1; }
  .chips.termine .an { background:var(--messing); color:var(--messing-dunkel); border-color:var(--messing); font-weight:700; }
  .karte .mit { font-size:var(--t-s); font-weight:600; margin-bottom:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .personen { list-style:none; padding:0; margin:2px 0 0; }
  .personen li { padding:3px 0; } .personen li span { color:var(--grau); font-size:var(--t-s); margin-left:6px; }
  .reihe a { color:var(--messing); font-weight:700; text-decoration:none; }
  .karte.tipp { border-color:var(--messing); background:linear-gradient(135deg, color-mix(in srgb, var(--messing) 14%, var(--flaeche)), var(--flaeche) 60%); }
  .karte.tipp .band { position:absolute; left:10px; top:10px; width:104px; padding:5px 0; text-align:center; background:var(--messing); color:var(--messing-dunkel); font:800 var(--t-xs) var(--sans); letter-spacing:.16em; border-radius:14px 14px 0 0; }
  .leer-hinweis { padding:32px 20px; color:var(--grau); font:300 var(--t-l) var(--serif); }

  
    .ebene-hg { position:fixed; inset:0; z-index:30; background:#000a; opacity:0; pointer-events:none; transition:.25s; }
  .ebene { position:fixed; z-index:31; left:0; right:0; bottom:0; max-height:92vh; overflow:auto; overscroll-behavior:contain; background:var(--grund); border-radius:28px 28px 0 0; transform:translateY(100%); transition:transform .35s cubic-bezier(.2,.8,.2,1); max-width:560px; margin:0 auto; padding-bottom:calc(26px + env(safe-area-inset-bottom)); }
  .offen .ebene-hg { opacity:1; pointer-events:auto; } .offen .ebene { transform:none; }
  .ebene .titelbild { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
  .ebene .text { padding:20px 22px 0; }
  .ebene h2 { font:300 var(--t-xxl)/1.05 var(--serif); margin:10px 0 6px; }
  .reihe { display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--hoch); font-size:var(--t-m); }
  .reihe .sym { width:36px; height:36px; flex:0 0 36px; border-radius:12px; background:var(--flaeche); display:grid; place-items:center; color:var(--messing); }
  .chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
  .chips span { font:500 var(--t-s) var(--sans); padding:6px 11px; border-radius:999px; background:var(--flaeche); border:1px solid var(--hoch); }
  .abschnitt { padding:16px 0 4px; }
  .abschnitt h5 { font:800 var(--t-xs) var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--grau); margin-bottom:10px; display:flex; justify-content:space-between; }
  .abschnitt h5 button { background:none; border:none; color:var(--messing); font:700 var(--t-s) var(--sans); letter-spacing:0; text-transform:none; }
  .wahl { display:flex; gap:7px; flex-wrap:wrap; }
  .wahl button { font:600 var(--t-s) var(--sans); padding:9px 13px; border-radius:999px; background:var(--flaeche); border:1px solid var(--hoch); }
  .wahl button small { color:var(--grau); margin-left:4px; font-weight:500; }
  .wahl button.an { background:var(--messing); color:var(--messing-dunkel); border-color:var(--messing); } .wahl button.an small { color:inherit; }
  .klein { font-size:var(--t-s); color:var(--grau); margin-top:8px; }
  .km { color:var(--messing); font-weight:700; }
  .suche { width:100%; font:500 var(--t-m) var(--sans); padding:12px 14px; border-radius:14px; border:1px solid var(--hoch); background:var(--flaeche); color:var(--text); margin-bottom:10px; }
  .knoepfe { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:20px; }
  .knoepfe a, .knoepfe button { font:800 var(--t-m) var(--sans); padding:15px; text-align:center; border-radius:18px; text-decoration:none; border:none; background:var(--flaeche); color:var(--text); }
  .knoepfe .haupt { grid-column:span 2; background:var(--messing); color:var(--messing-dunkel); }
  .blattkopf { position:sticky; top:0; z-index:1; background:var(--grund); padding:18px 22px 6px; display:flex; justify-content:space-between; align-items:baseline; }
  .blattkopf h2 { margin:0; }
  .blattkopf button { background:none; border:none; color:var(--messing); font:700 var(--t-m) var(--sans); }
  .blattfuss { position:sticky; bottom:0; background:linear-gradient(transparent, var(--grund) 30%); padding:16px 22px 0; }
  footer { padding:30px 20px; font-size:var(--t-xs); color:var(--grau); line-height:1.6; } footer a { color:inherit; }
  @media (hover:hover) { .karte:hover { border-color:var(--hoch); } .karte.tipp:hover { border-color:var(--messing); } .schiene .tag:hover { outline:1px solid var(--messing); } }

    .kopfzeile { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; }
  .kopfzeile a { text-decoration:none; }
  .kopfzeile .marke-klein strong { font:800 var(--t-s) var(--sans); letter-spacing:.22em; } .kopfzeile .marke-klein span { color:var(--messing); }
  .kopfzeile nav a { font:700 var(--t-s) var(--sans); color:var(--grau); margin-left:14px; }
  .unterseite .titelbild { width:calc(100% - 20px); margin:0 10px; aspect-ratio:4/3; object-fit:cover; border-radius:26px; display:block; }
  .unterseite .text { padding:20px 22px 0; }
  .unterseite h1 { font:300 var(--t-xxl)/1.05 var(--serif); margin:10px 0 6px; }
  .seitentitel { padding:20px 20px 4px; font:300 var(--t-xxl)/1 var(--serif); }
  .seitentitel small { display:block; font:700 var(--t-s) var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--grau); margin-bottom:8px; }
  .monatsliste a { display:flex; justify-content:space-between; align-items:center; gap:4px 14px; flex-wrap:wrap; margin:0 10px 8px; padding:18px 20px; border-radius:20px; background:var(--flaeche); text-decoration:none; font:500 var(--t-l) var(--serif); }
  .monatsliste a small { font:700 var(--t-s) var(--sans); color:var(--grau); margin-left:auto; text-align:right; }
  .monatsliste a small b { color:var(--messing); }
  .weiter { display:flex; gap:8px; justify-content:space-between; padding:20px; }
  .weiter a { font:700 var(--t-s) var(--sans); color:var(--messing); text-decoration:none; }
  .lade { text-align:center; padding:24px; color:var(--grau); font:500 var(--t-s) var(--sans); }
  .knoepfe a.haupt, .knoepfe a { display:block; }
  .karte { text-decoration:none; color:inherit; }
  .unterseite .orgel { white-space:pre-line; }
  footer nav a { margin-right:12px; }
  .mehr-personen summary { cursor:pointer; color:var(--messing); font:700 var(--t-s) var(--sans); padding:4px 0; list-style:none; }
  .mehr-personen summary::-webkit-details-marker { display:none; }
  .mehr-personen[open] summary { display:none; }

    .kopfzeile .marke-klein { font:500 var(--t-l)/1.05 var(--serif); }
  .kopfzeile .marke-klein em { display:block; font:italic 300 var(--t-s) var(--serif); color:var(--messing); }

    .zu { position:sticky; top:12px; z-index:3; display:grid; place-items:center; width:42px; height:42px; margin:12px 12px -54px auto; border-radius:50%; border:none;
        background:var(--glas); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:var(--text); font:500 var(--t-l) var(--sans); box-shadow:0 4px 18px #0004; }
  .blattkopf { padding-right:66px; }

    .rechtstext { padding:4px 22px 10px; max-width:760px; }
  .rechtstext h2 { font:500 var(--t-l) var(--serif); margin:26px 0 8px; }
  .rechtstext p, .rechtstext li { color:var(--text); margin:0 0 10px; }
  .rechtstext a { color:var(--messing); }
  .rechtstext small { color:var(--grau); }
  .ueber .einstieg { font:400 var(--t-l)/1.4 var(--serif); margin:6px 0 4px; }
  .ueber ul { padding-left:20px; }
  .ueber .signatur { font:italic 400 var(--t-l) var(--serif); color:var(--messing); margin-top:18px; }
  .ueber .knopf-link { display:inline-block; margin-top:8px; padding:12px 18px; border-radius:16px; background:var(--messing); color:var(--messing-dunkel); font-weight:800; text-decoration:none; }
  .grund a { color:inherit; }

    .karte .werke { display:none; }
  @media (min-width: 900px) {
    .seite { max-width:1180px; padding-left:24px; padding-right:24px; }
    .hero { aspect-ratio:21/9; max-height:540px; margin:16px 0 0; width:100%; }
    .hero .inhalt { left:40px; right:40px; bottom:36px; max-width:720px; }
    .leiste { margin:0 -24px; padding-left:24px; padding-right:24px; }
        #liste, .raster { display:grid; grid-template-columns:220px minmax(0, 1fr); column-gap:28px; align-items:start; }
    #liste > *, .raster > * { grid-column:1 / -1; }
    #liste > .tagkopf, .raster > .tagkopf { grid-column:1; flex-direction:column; align-items:flex-start; gap:6px; padding:22px 0 0; }
    #liste > .karte, .raster.tage > .karte { grid-column:2; }
    .tagkopf h3, .tagkopf h2 { font:500 var(--t-l)/1.2 var(--serif); }
    .karte { grid-template-columns:220px minmax(0, 1fr); gap:22px; margin:12px 0 0; padding:12px; }
    .karte img { width:220px; height:150px; }
    .karte.tipp .band { width:220px; left:12px; top:12px; }
    .karte :is(h3, h4) { font:500 var(--t-xl)/1.12 var(--serif); margin:8px 0 6px; }
    .karte .mit { -webkit-line-clamp:1; font-size:var(--t-m); }
    .karte .werke { display:block; font-size:var(--t-s); color:var(--grau); margin-top:4px; }
    .monat, .woche, .seitentitel, .lade { padding-left:0; padding-right:0; }
    .unterseite .titelbild { width:100%; margin:0; aspect-ratio:21/9; max-height:480px; }
    .unterseite .text, .rechtstext { max-width:760px; margin:0 auto; }
    .monatsliste { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; } .monatsliste a { margin:0; }
    .ebene { left:auto; right:0; top:0; bottom:0; width:min(480px, 92vw); max-height:none; border-radius:28px 0 0 28px; transform:translateX(100%); margin:0; }
    .offen .ebene { transform:none; }
  }
  .zu-seite { position:fixed; top:14px; right:14px; margin:0; text-decoration:none; }
  body:has(.zu-seite) .kopfzeile { padding-right:68px; }
    .personen a, .noten a, .chips a.chip { color:inherit; text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--messing) 45%, transparent); }
  .chips a.chip { border:1px solid var(--hoch); background:var(--flaeche); border-radius:999px; padding:6px 11px; font:500 var(--t-s) var(--sans); }
  .ext { font-size:.8em; color:var(--messing); margin-left:3px; }
  .noten { margin-top:10px; font-size:var(--t-s); color:var(--grau); }
    .thema-tag { display:inline-flex; align-items:center; gap:4px; font:700 var(--t-xs) var(--sans); letter-spacing:.06em; text-transform:uppercase;
               padding:2px 7px 2px 5px; border-radius:6px; }
  .thema-tag svg { width:12px; height:12px; fill:currentColor; }
  .thema-tag.barock { color:var(--barock); background:color-mix(in srgb, var(--barock) 14%, transparent); }
  .thema-tag.orgel { color:var(--orgel); background:color-mix(in srgb, var(--orgel) 16%, transparent); }
  .karte .zeit { flex-wrap:wrap; gap:6px; }
  .galerie { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; margin:16px 0 4px; }
  .galerie img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; }
  .thema-tag.rising { color:var(--messing); background:color-mix(in srgb, var(--messing) 16%, transparent); }
  .thema-tag.premiere { color:var(--text); background:color-mix(in srgb, var(--text) 10%, transparent); }
  .tippschild.rising { background:#F2EEE6; color:#1A1408; }
  .grund { color:var(--messing); font:600 var(--t-s) var(--sans); margin:2px 0 4px; }
  .chips button.chip { cursor:pointer; color:var(--text); border:1px solid var(--hoch); background:var(--flaeche); border-radius:999px; padding:6px 11px; font:600 var(--t-s) var(--sans); }
  .chips button.chip:hover { border-color:var(--messing); }
  .chips a.wiki { align-self:center; font:700 var(--t-xs) var(--sans); color:var(--grau); text-decoration:none; margin:0 6px 0 -2px; }
  .unterwahl { margin-top:10px; padding-left:10px; border-left:2px solid var(--messing); }
  .chips a.wiki span.ext, .chips a.chip span.ext { padding:0; margin-left:2px; border:none; background:none; border-radius:0; font-size:.85em; }

    .oben { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 20px 0; }
  .oben-links { display:flex; flex-wrap:wrap; gap:6px 18px; }
  .oben-links a { font:700 var(--t-s) var(--sans); color:var(--grau); text-decoration:none; }
  .oben-links a:first-child { color:var(--messing); }
  .social { display:inline-flex; gap:8px; vertical-align:middle; }
  .social a { display:grid; place-items:center; width:36px; height:36px; margin:0; border-radius:50%; background:var(--flaeche); border:1px solid var(--hoch); color:var(--text); }
  .social a:hover { color:var(--messing); border-color:var(--messing); }
  .social svg { width:19px; height:19px; fill:currentColor; }
  .kopfzeile nav { display:flex; align-items:center; }
  .kopfzeile nav .social { margin-left:14px; }
  @media (max-width:520px) { .kopfzeile nav a.nav-kalender, .kopfzeile nav .social { display:none; } .kopfzeile nav a { margin-left:10px; } }
  .kopf { position:relative; padding:34px 20px 18px; }
  .kopf .titelmarke { font:300 clamp(42px, 13vw, 84px)/.95 var(--serif); letter-spacing:-.025em; margin:0; color:var(--text); max-width:11ch; }
  .kopf .titelmarke sup { font-size:.42em; color:var(--messing); vertical-align:top; position:relative; top:.1em; margin-left:.04em; }
  .fussnote { margin:10px 0 0; text-align:right; font:italic 300 var(--t-l) var(--serif); color:var(--messing); }
  .fussnote sup { font-style:normal; margin-right:2px; }
  .postit { position:absolute; right:16px; top:14px; z-index:2; width:92px; padding:10px 8px 12px; text-align:center; transform:rotate(6deg);
            background:#F5DE7A; color:#2A2410; font:700 var(--t-xs)/1.25 var(--sans); letter-spacing:.02em; text-transform:uppercase;
            box-shadow:0 10px 18px -6px #0006, inset 0 -10px 18px -14px #0004; border-radius:2px 2px 10px 2px; }
  .postit b { display:block; font:400 34px/1 var(--serif); letter-spacing:0; margin-bottom:2px; }
  #hero .hero { aspect-ratio:4/3; margin-top:0; }
  @media (min-width: 900px) {
    .kopf { padding:48px 0 22px; } .oben { padding:22px 0 0; }
    .kopf .titelmarke { max-width:none; }
    .fussnote { margin-top:6px; }
    .postit { right:40px; top:26px; width:118px; } .postit b { font-size:44px; }
    #hero .hero { aspect-ratio:21/8; }
  }
  .titelblock { display:block; }
    @media (min-width: 900px) { .titelblock { display:inline-block; max-width:calc(100% - 170px); } }

    .ebene { display:flex; flex-direction:column; overflow:hidden; padding-bottom:0; }
  .ebene { isolation:isolate; }
    .ebene { max-height:92vh; max-height:92dvh; }
  .ebene-scroll { position:relative; z-index:1; flex:1; min-height:0; max-height:92vh; max-height:92dvh; overflow-y:auto; overscroll-behavior:contain;
                  padding-bottom:calc(26px + env(safe-area-inset-bottom)); }
    .ebene > .zu { position:absolute; top:12px; right:12px; margin:0; z-index:10; transform:translateZ(0); will-change:transform; }
  .blattkopf { padding-right:66px; }

    @media (min-width: 900px) { .ebene { max-height:none; } .ebene-scroll { max-height:100vh; max-height:100dvh; } }
    .komponisten li { padding:6px 0; }
  .komponisten .aktionen { display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; margin-top:2px; }
  .komponisten .aktion { background:none; border:none; padding:0; cursor:pointer; color:var(--messing); font:700 var(--t-s) var(--sans);
                         text-decoration:none; border-bottom:none; }
  .komponisten .aktion:hover { text-decoration:underline; }
  .komponisten .trenner { color:var(--grau); }
  .komponisten .ext { color:inherit; }

    .leiste-kopf { gap:8px; }
  .leiste-monat { margin-right:auto; }
  .werkzeuge { display:flex; gap:6px; }
  .werkzeuge button { height:38px; border-radius:19px; border:none; font:800 var(--t-s) var(--sans); display:flex; align-items:center; gap:6px; }
  .werkzeuge .merken { width:38px; justify-content:center; background:var(--hoch); color:var(--text); font-size:var(--t-m); }
  .werkzeuge .filterknopf { padding:0 14px; background:var(--messing); color:var(--messing-dunkel); }
  .werkzeuge .zahl { background:var(--messing-dunkel); color:var(--messing); border-radius:999px; min-width:20px; height:20px; display:grid; place-items:center; font-size:11px; padding:0 5px; }
  .werkzeuge .zahl[hidden] { display:none; }
  @media (hover: none) { .pfeile { display:none; } }      .reihe .breit { flex:1; min-width:0; }
  details.programm summary { cursor:pointer; list-style:none; display:flex; flex-direction:column; gap:2px; }
  details.programm summary::-webkit-details-marker { display:none; }
  details.programm summary .kurz { font:700 var(--t-m) var(--sans); color:var(--text); }
  details.programm summary::after { content:'Programm anzeigen ▾'; font:700 var(--t-s) var(--sans); color:var(--messing); margin-top:4px; }
  details.programm[open] summary::after { content:'Programm ausblenden ▴'; }
  details.programm[open] summary .kurz { display:none; }
  .werkliste { list-style:none; padding:0; margin:4px 0 2px; }
  .werkliste li { padding:2px 0 2px 14px; position:relative; font-size:var(--t-m); }
  .werkliste li::before { content:'–'; position:absolute; left:0; color:var(--grau); }
  .noten-link { white-space:nowrap; color:var(--messing); font:700 var(--t-s) var(--sans); text-decoration:none; border:none; margin-left:4px; }

    .slider { position:relative; margin:0 10px; border-radius:26px; overflow:hidden; background:var(--flaeche); }
  .slider-bahn { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
  .slider-bahn::-webkit-scrollbar { display:none; }
  .slider-bahn img { flex:0 0 100%; width:100%; aspect-ratio:4/3; object-fit:cover; scroll-snap-align:start; display:block; }
  .slider-punkte { position:absolute; left:0; right:0; bottom:12px; display:flex; justify-content:center; gap:7px; }
  .slider-punkte button { width:8px; height:8px; padding:0; border:none; border-radius:50%; background:#F2EEE6aa; box-shadow:0 1px 4px #0006; cursor:pointer; }
  .slider-punkte button.an { background:#F2EEE6; width:22px; border-radius:4px; }
  .slider-pfeil { position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; border:none;
                  background:var(--glas); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:var(--text); font-size:var(--t-l); cursor:pointer; }
  .slider-pfeil.zurueck { left:12px; } .slider-pfeil.weiter { right:12px; }
  .slider-pfeil:disabled { opacity:0; pointer-events:none; }
  @media (hover: none) { .slider-pfeil { display:none; } }
  @media (min-width: 900px) { .slider { margin:0; } .slider-bahn img { aspect-ratio:21/9; max-height:480px; } }
  .karte .datum-k { color:var(--text); font-weight:800; }
  .wann-oben { margin-top:12px; font:800 var(--t-s) var(--sans); letter-spacing:.04em; color:var(--messing); }
  .wann-oben + h1, .wann-oben + h2 { margin-top:4px; }
  .chips .filter-chip { cursor:pointer; color:var(--text); text-decoration:none; border:1px solid var(--hoch); background:var(--flaeche);
                        border-radius:999px; padding:6px 11px; font:600 var(--t-s) var(--sans); }
  .chips .filter-chip small { color:var(--grau); font-weight:600; margin-left:6px; }
  .chips .filter-chip:hover { border-color:var(--messing); }
    .rolle-filter { background:none; border:none; padding:0; font:inherit; color:var(--messing); cursor:pointer; text-decoration:underline;
                  text-decoration-color:color-mix(in srgb, var(--messing) 45%, transparent); text-underline-offset:2px; }

html:not(.js) .nur-js { display:none !important; }
.monatslinks { display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center; font:500 var(--t-s) var(--sans); }
.monatslinks a { color:var(--messing); text-decoration:none; font-weight:700; }
.sym-svg { width:1em; height:1em; fill:currentColor; vertical-align:-.1em; }
.schiene .tag.jetzt b { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }

.spiel-intro { padding:0 20px 14px; color:var(--grau); }
.spiel-intro b { color:var(--text); }
#spiel { padding:0 20px; }
.spiel-stand { display:flex; justify-content:space-between; font:800 var(--t-xs) var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--grau); margin-bottom:6px; }
.spiel-stand #spiel-summe { color:var(--messing); }
.spiel-frage { font:400 var(--t-xl)/1.15 var(--serif); margin-bottom:12px; }
.spiel-frage b { font-weight:600; color:var(--messing); }
.spiel-karte { position:relative; border-radius:18px; overflow:hidden; background:var(--hoch); aspect-ratio:589/520; touch-action:none; user-select:none; -webkit-user-select:none; }
.spiel-karte svg { display:block; width:100%; height:100%; cursor:crosshair; }
.spiel-karte .land path { fill:var(--flaeche); stroke:var(--grau); stroke-opacity:.45; stroke-width:.6; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.spiel-karte circle.tipp { fill:var(--messing); stroke:var(--grund); stroke-width:2; vector-effect:non-scaling-stroke; }
.spiel-karte circle.wahr { fill:var(--barock); stroke:var(--grund); stroke-width:2; vector-effect:non-scaling-stroke; }
.spiel-karte circle.koeln { fill:var(--grau); }
.spiel-karte line.abstand { stroke:var(--text); stroke-width:1.5; stroke-dasharray:4 4; vector-effect:non-scaling-stroke; }
.spiel-zoom { position:absolute; right:10px; top:10px; display:flex; flex-direction:column; gap:6px; }
.spiel-zoom button { width:40px; height:40px; border-radius:12px; border:none; background:var(--glas); color:var(--text); font:600 22px/1 var(--sans); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.spiel-tipp { position:absolute; left:10px; bottom:10px; right:60px; font:600 var(--t-xs) var(--sans); color:var(--grau); pointer-events:none; }
.spiel-eingabe { display:grid; grid-template-columns:auto 1fr; gap:8px 12px; align-items:center; margin-top:14px; }
.spiel-eingabe label { font:800 var(--t-xs) var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--grau); }
.spiel-eingabe input { font:500 var(--t-xl) var(--serif); padding:10px 14px; border-radius:14px; border:1px solid var(--hoch); background:var(--flaeche); color:var(--text); width:100%; }
.spiel-eingabe .haupt { grid-column:span 2; font:800 var(--t-m) var(--sans); padding:15px; border-radius:18px; border:none; background:var(--messing); color:var(--messing-dunkel); }
.spiel-eingabe .haupt:disabled { background:var(--flaeche); color:var(--grau); }
.spiel-ergebnis { margin-top:16px; }
.spiel-loesung { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; align-items:baseline; font:400 var(--t-xl) var(--serif); }
.spiel-loesung span { font:600 var(--t-s) var(--sans); color:var(--grau); }
.spiel-punkte { margin:14px 0; display:grid; gap:8px; }
.spiel-punkte div { display:grid; grid-template-columns:1fr 3.2em; gap:4px 10px; align-items:center; font:600 var(--t-s) var(--sans); }
.spiel-punkte i { grid-column:1; grid-row:2; height:6px; border-radius:3px; background:linear-gradient(90deg, var(--messing) calc(var(--anteil) * 100%), var(--flaeche) 0); }
.spiel-punkte b { grid-row:span 2; text-align:right; font:500 var(--t-l) var(--serif); }
.spiel-punkte .gesamt { border-top:1px solid var(--hoch); padding-top:8px; grid-template-columns:1fr auto; }
.spiel-punkte .gesamt b { grid-row:auto; color:var(--messing); }
.spiel-live h3 { font:800 var(--t-xs) var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--grau); margin:18px 0 8px; }
.spiel-konzert { display:grid; grid-template-columns:64px 1fr; gap:12px; align-items:center; padding:8px; margin-bottom:8px; border-radius:14px; background:var(--flaeche); color:var(--text); text-decoration:none; font:500 var(--t-s)/1.35 var(--sans); }
.spiel-konzert img { width:64px; height:64px; object-fit:cover; border-radius:10px; }
.spiel-konzert b { display:block; font:500 var(--t-m)/1.2 var(--serif); margin-bottom:2px; }
.spiel-konzert span { color:var(--grau); } .spiel-konzert b { color:var(--text); }
.spiel-urteil { font:400 var(--t-l) var(--serif); }
.spiel-regeln { margin:24px 20px 0; padding:14px 16px; border-radius:14px; background:var(--flaeche); color:var(--grau); font-size:var(--t-s); }
.spiel-regeln summary { cursor:pointer; font-weight:800; color:var(--text); }
.spiel-regeln p { margin-top:8px; }
@media (min-width:900px) { .spiel { max-width:760px; } }
.spiel-eingabe[hidden], .spiel-ergebnis[hidden], .spiel-tipp[hidden], .spiel-hilfen[hidden], .spiel-hilfen [hidden] { display:none; }
.spiel-hilfen { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.spiel-hilfen button { font:700 var(--t-s)/1.35 var(--sans); padding:9px 14px; min-height:40px; border-radius:999px; border:1px dashed var(--messing); background:none; color:var(--text); cursor:pointer; text-align:left; }
.spiel-hilfen button small { font-weight:800; color:var(--messing); margin-left:4px; }
.spiel-hilfen button.offen { flex-basis:100%; border-style:solid; border-radius:14px; background:var(--flaeche); font-weight:500; cursor:default; }
.spiel-hilfen button.offen small { display:block; margin:0 0 2px; font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; }
.spiel-kopf { display:flex; gap:14px; align-items:flex-start; margin-bottom:12px; }
.spiel-kopf .spiel-frage { margin:0; flex:1; }
.spiel-portraet { flex:0 0 92px; margin:0; }
.spiel-portraet[hidden] { display:none; }
.spiel-portraet img { display:block; width:92px; height:116px; object-fit:cover; object-position:50% 20%; border-radius:12px; background:var(--hoch); }
.spiel-portraet figcaption { margin-top:4px; font:500 9px/1.3 var(--sans); color:var(--grau); overflow-wrap:anywhere; }
.spiel-portraet figcaption a { color:inherit; }
@media (min-width:700px) { .spiel-portraet { flex-basis:120px; } .spiel-portraet img { width:120px; height:150px; } }

.zettel { position:absolute; z-index:2; left:14px; top:98px; padding:5px 8px 6px; transform:rotate(-5deg);
  background:#F5DE7A; color:#2A2410; font:800 var(--t-xs)/1.1 var(--sans); letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 8px 14px -6px #0007, inset 0 -8px 14px -12px #0004; border-radius:2px 2px 8px 2px; pointer-events:none; }
.zettel.frei { background:#BFE6C8; color:#12301A; }
.zettel.gross { left:auto; top:auto; right:18px; bottom:18px; padding:9px 14px 10px; font-size:var(--t-s); transform:rotate(4deg); }
.hero .zettel.gross { top:18px; bottom:auto; }
.titelrahmen { position:relative; }
@media (min-width:900px) { .zettel { left:24px; top:126px; } }
.raetsel { display:grid; grid-template-columns:104px 1fr; gap:14px; align-items:center; margin:0 10px 10px; padding:10px; border-radius:22px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--messing) 24%, var(--flaeche)), color-mix(in srgb, var(--messing) 9%, var(--flaeche)));
  border:1px dashed var(--messing); color:inherit; text-decoration:none; }
.raetsel img { width:104px; height:120px; object-fit:cover; object-position:50% 20%; border-radius:14px; }
.raetsel-symbol, .raetsel span.raetsel-symbol { display:grid; place-items:center; width:104px; height:120px; border-radius:14px; background:var(--messing); color:var(--messing-dunkel); font:300 64px/1 var(--serif); }
.raetsel small { display:block; font:800 var(--t-l)/1.1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--messing); }
.raetsel h4 { font:500 var(--t-l)/1.15 var(--serif); margin:6px 0 4px; }
.raetsel h4 b { font-weight:600; }
.raetsel span { font-size:var(--t-s); color:var(--grau); }
@media (min-width:900px) { #liste > .raetsel { grid-column:2; grid-template-columns:220px minmax(0, 1fr); gap:22px; margin:12px 0 0; padding:12px; }
  .raetsel img, .raetsel span.raetsel-symbol { width:220px; height:150px; } }