/* Musical Moments Hameln – Musterentwurf von Cyberdox
   Gestaltungssystem (Web-Standard Säule 8), Einzelheiten im README:
   - Typo-Skala 1,25 auf 18 px: 14,4 / 18 / 22,5 / 28,1 / 35,2 / 43,9 / 54,9 / 68,7
   - Abstände nur aus dem 8-Punkt-Raster (4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128 px)
   - Raster 1200 px, große Zweiteilungen im Goldenen Schnitt (1fr : 1.618fr)
   - Farben 60-30-10: Weiß / Tinte und Waldgrün / Bühnenlicht-Gold, dazu Salbei aus dem Logo für Linien
   - zwei Schriften, lokal: Bodoni Moda (Titel, Zahlen) und Montserrat (Text, Knöpfe – wie „MOMENTS“ im Logo)
   - Animationen laufen immer (Entscheidung Patrick), nichts blinkt schneller als 3× pro Sekunde */

/* feste Schnitte statt variabler Schriften: WebKit unter Windows zeichnete Montserrat sonst hauchdünn (schrift_fest.py) */
@font-face { font-family: 'Bodoni Moda'; src: url(schrift/bodoni-600-o11.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url(schrift/bodoni-600-kursiv-o11.woff2) format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url(schrift/montserrat-400.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url(schrift/montserrat-600.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url(schrift/montserrat-700.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Weiß-Grün statt Beige (Wunsch der Kundin 20.10.2026) */
  --papier: #FFFFFF;
  --papier-2: #EEF4F1;
  --karte: #FFFFFF;
  --tinte: #16201B;
  --tinte-2: #3B4741;
  --wald: #1F3A2F;
  --nacht: #121A16;
  --salbei: #8DABA8;
  --salbei-schatten: #A6BCB2;
  --salbei-hell: #DCE6E1;
  --salbei-tief: #4C6C66;
  --licht: #F2B84B;
  --licht-hell: #FFE3A3;
  --licht-tief: #8A5A0E;
  --linie: rgba(22, 32, 27, .16);

  --titel: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --text: 'Montserrat', 'Segoe UI', system-ui, sans-serif;

  --t-1: .8rem;      /* 14,4 */
  --t0: 1rem;        /* 18 */
  --t1: 1.25rem;     /* 22,5 */
  --t2: 1.5625rem;   /* 28,1 */
  --t3: 1.953rem;    /* 35,2 */
  --t4: 2.441rem;    /* 43,9 */
  --t5: 3.052rem;    /* 54,9 */
  --t6: 3.815rem;    /* 68,7 */

  --a1: 4px; --a2: 8px; --a3: 16px; --a4: 24px; --a5: 32px; --a6: 48px; --a7: 64px; --a8: 96px; --a9: 128px;
  --radius: 16px;
  --radius-klein: 8px;
  --max: 1200px;
  --kopf: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 112.5%; color-scheme: light; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf) + var(--a3)); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--tinte); font-family: var(--text); font-size: var(--t0); line-height: 1.56; font-weight: 400; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--licht); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4, h5 { font-family: var(--titel); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -.005em; text-wrap: balance; }
h1 { font-size: var(--t3); }
h2 { font-size: var(--t3); margin-bottom: var(--a3); }
h3 { font-size: var(--t1); }
p { margin: 0 0 var(--a3); max-width: 66ch; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.rahmen { width: min(100% - 2 * var(--a3), var(--max)); margin-inline: auto; }
.sym { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Sprungmarke, Entwurfshinweis, Kopf */
.sprung { position: absolute; left: var(--a3); top: -100px; z-index: 50; background: var(--tinte); color: var(--papier); padding: var(--a2) var(--a3); border-radius: var(--radius-klein); }
.sprung:focus { top: var(--a2); }
.entwurf { margin: 0; max-width: none; background: var(--wald); color: var(--papier); font-size: var(--t-1); text-align: center; padding: var(--a2) var(--a3); line-height: 1.4; }
.entwurf .kurz { display: none; }
/* Hinweis-Leiste aus dem Editor (Wetter, Änderung, Absage). Rot nur bei Absage. */
.hinweisleiste { background: var(--salbei-hell); color: var(--tinte); border-bottom: 1px solid var(--linie); }
.hinweisleiste--aenderung { background: var(--licht); }
.hinweisleiste--absage { background: #A4281C; color: #fff; border-bottom-color: transparent; }
.hinweisleiste__innen { display: flex; gap: var(--a2); align-items: flex-start; padding-block: var(--a3); }
.hinweisleiste .sym { width: 22px; height: 22px; margin-top: 1px; stroke-width: 2; }
.hinweisleiste p { margin: 0; max-width: none; font-weight: 600; line-height: 1.45; }
.kopf { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--linie); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.kopf__leiste { display: flex; align-items: center; gap: var(--a4); height: var(--kopf); }
.marke { display: flex; align-items: center; min-height: 48px; min-width: 48px; margin-right: auto; }
.wortmarke { height: 44px; width: auto; }
.wortmarke use, .buehne__wort use { fill: var(--tinte); }
.wortmarke .schatten, .buehne__wort .schatten { fill: var(--salbei-schatten); }
.navi { display: flex; gap: var(--a1); }
.navi a { display: flex; align-items: center; min-height: 48px; padding: 0 var(--a2); font-size: var(--t-1); font-weight: 600; text-decoration: none; border-radius: var(--radius-klein); }
.navi a:hover { background: var(--salbei-hell); }
.menue { display: none; position: relative; }
.menue summary { list-style: none; width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer; border-radius: var(--radius-klein); }
.menue summary::-webkit-details-marker { display: none; }
.menue summary svg { width: 24px; height: 24px; fill: none; stroke: var(--tinte); stroke-width: 2; stroke-linecap: round; }
.menue .zu, .menue[open] .auf { display: none; }
.menue[open] .zu { display: block; }
.menue__liste { position: absolute; right: 0; top: calc(100% + 12px); width: min(320px, calc(100vw - 32px)); background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--a2); box-shadow: 0 24px 48px -24px rgba(22, 32, 27, .45); display: grid; }
.menue__liste a { display: flex; align-items: center; min-height: 48px; padding: 0 var(--a3); text-decoration: none; font-weight: 600; border-radius: var(--radius-klein); }
.menue__liste a:hover { background: var(--salbei-hell); }

/* Knöpfe: einer für alles, drei Füllungen */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--a2); min-height: 48px; padding: 0 var(--a4); border-radius: 999px; font: 700 var(--t-1)/1.2 var(--text); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border: 2px solid transparent; transition: transform .2s, box-shadow .2s, background-color .2s; cursor: pointer; }
.knopf:hover { transform: translateY(-1px); }
.knopf--licht { background: var(--licht); color: var(--tinte); box-shadow: 0 0 0 0 rgba(242, 184, 75, .35); }
.knopf--licht:hover { box-shadow: 0 0 0 6px rgba(242, 184, 75, .3); background: #F5C463; }
.knopf--linie { border-color: currentColor; color: inherit; }
.knopf--linie:hover { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.knopf--tinte { background: var(--tinte); color: var(--papier); }
.knopf--tinte:hover { background: var(--wald); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--a3); margin-top: var(--a4); }

/* Abschnitte */
section { padding: var(--a7) 0; }
.abschnitt-kopf { max-width: 720px; margin-bottom: var(--a6); }
.abschnitt-kopf p { color: var(--tinte-2); }

/* Start: das Logo als Bühne */
.start { padding: var(--a5) 0 var(--a7); }
.start__raster { display: grid; gap: var(--a5); align-items: center; }
.start h1 em { font-style: italic; color: var(--salbei-tief); font-weight: 600; }
.start__lead { font-size: var(--t1); line-height: 1.5; color: var(--tinte-2); margin-top: var(--a4); }
.start__termin { display: flex; flex-wrap: wrap; gap: var(--a1) var(--a3); align-items: baseline; padding: var(--a3) 0; border-block: 1px solid var(--linie); margin-top: var(--a4); }
.start__tage { font-family: var(--titel); font-size: var(--t2); font-weight: 600; line-height: 1.2; }
.start__zeit { font-weight: 700; font-size: var(--t-1); letter-spacing: .08em; text-transform: uppercase; color: var(--salbei-tief); }
.start__countdown { margin-top: var(--a4); font-size: var(--t-1); color: var(--tinte-2); }
.start__countdown strong { font-family: var(--titel); font-size: var(--t2); color: var(--tinte); font-variant-numeric: lining-nums tabular-nums; margin-inline: 2px; }
/* Start: Original-Logo der GbR, unverändert und ohne Licht (Wunsch der Kundin 20.10.2026) */
.logo-buehne { position: relative; width: min(100%, 560px); margin-inline: auto; order: -1; }
.logo-buehne__logo { display: block; width: 100%; height: auto; }
.buehne { position: relative; width: min(100%, 560px); aspect-ratio: 800 / 760; margin-inline: auto; order: -1; }
.buehne__foto { position: absolute; left: 17.5%; top: 29.7%; width: 65%; height: 59.3%; object-fit: cover; object-position: 46% 30%; }
.buehne__bild { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rahmen-papier { fill: var(--papier); }
.kante { fill: none; stroke: var(--salbei); stroke-width: 1.4; }
.vorhang .vb1 { fill: #F2F5F0; }
.vorhang .vb2 { fill: #E2EAE5; }
.vl { fill: none; stroke: var(--salbei); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.behang .bogen { fill: var(--papier); stroke: var(--salbei); stroke-width: 1.4; }
.behang .schwanz { fill: #ECF1EC; stroke: var(--salbei); stroke-width: 1.3; stroke-linejoin: round; }
.behang .stange { stroke: var(--salbei); stroke-width: 4; stroke-linecap: round; }
.behang .knauf { fill: var(--salbei); }
.behang .quaste { fill: var(--licht); stroke: #B07F23; stroke-width: 1; stroke-linejoin: round; }
.boden__front { fill: #ECF1EC; stroke: var(--salbei); stroke-width: 1.4; }
.boden__oben { fill: var(--papier); stroke: var(--salbei); stroke-width: 1.4; }
.lampe { fill: #286147; }
.linse { fill: var(--licht-hell); }
.kordel { fill: none; stroke: var(--licht); stroke-width: 3; stroke-linecap: round; }
.funke { fill: var(--salbei); transform-box: fill-box; transform-origin: center; animation: funkeln 3.2s ease-in-out infinite; }
.funken g:nth-child(2n) .funke { animation-delay: -1.1s; animation-duration: 3.8s; }
.funken g:nth-child(3n) .funke { animation-delay: -2.2s; animation-duration: 2.9s; fill: var(--licht); }
@keyframes funkeln { 0%, 100% { opacity: .25; transform: scale(.6) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(45deg); } }
html:not(.js) .buehne .vorhang--zu, html.js .buehne .vorhang--offen { display: none; }
html.js .buehne:not(.laeuft) .buehne__wort, html.js .buehne:not(.laeuft) .scheinwerfer { opacity: 0; }
html.js .lichtfleck { opacity: 0; }

/* Der Abend */
.abend { background: var(--papier); }
.abend__raster { display: grid; gap: var(--a6); align-items: start; }
.zutaten { display: grid; gap: var(--a3); margin-top: var(--a5); }
.zutaten li { display: flex; gap: var(--a3); align-items: flex-start; }
.zutaten .sym { width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--karte); border: 1px solid var(--linie); color: var(--salbei-tief); }
.zutaten strong { display: block; font-family: var(--titel); font-size: var(--t1); line-height: 1.2; margin-bottom: var(--a1); }
.programm { background: var(--karte); border: 1px solid var(--tinte); border-radius: var(--radius-klein); padding: var(--a5); box-shadow: 8px 8px 0 var(--salbei-hell); position: relative; }
.programm::before { content: ''; position: absolute; inset: 8px; border: 1px solid var(--salbei); border-radius: 4px; pointer-events: none; }
.programm__titel { font-style: italic; font-size: var(--t2); text-align: center; margin-bottom: var(--a4); }
.programm__liste { margin: 0 0 var(--a4); }
.programm__liste div { display: grid; grid-template-columns: 112px 1fr; gap: var(--a3); padding: var(--a2) 0; border-bottom: 1px dotted var(--salbei-tief); }
.programm__liste dt { font-size: var(--t-1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--salbei-tief); padding-top: 2px; }
.programm__liste dd { margin: 0; }
.programm .knopf { width: 100%; position: relative; }

/* 2026: der Saal füllt sich */
.saal { background: var(--papier-2); overflow: clip; }  /* clip: der Stempel ragt beim Einblenden kurz über den Rand */
.saal__raster { display: grid; gap: var(--a5); align-items: center; }
.saal__zaehler { font-size: var(--t-1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--salbei-tief); margin: var(--a4) 0 var(--a1); }
.saal__zaehler strong { display: block; font-family: var(--titel); font-size: var(--t6); line-height: 1; color: var(--tinte); letter-spacing: 0; text-transform: none; font-variant-numeric: lining-nums tabular-nums; }
.saal__hinweis { font-size: var(--t-1); color: var(--tinte-2); }
.saal__grafik { position: relative; }
.saal__plaetze circle { fill: transparent; stroke: var(--salbei); stroke-width: 1.2; transition: fill .5s, stroke .5s; }
.saal__plaetze circle.besetzt, html:not(.js) .saal__plaetze circle { fill: var(--tinte); stroke: var(--tinte); }
.saal__plaetze circle.neu { fill: var(--licht); stroke: var(--licht); transition: none; }
/* Vorverkauf-Stand ohne JavaScript: nur der Anteil ist besetzt (1.000 Plätze, Reihenfolge wie beim Füllen) */
html:not(.js) .saal[data-stand="10"] .saal__plaetze circle:nth-child(n+101), html:not(.js) .saal[data-stand="20"] .saal__plaetze circle:nth-child(n+201), html:not(.js) .saal[data-stand="30"] .saal__plaetze circle:nth-child(n+301), html:not(.js) .saal[data-stand="40"] .saal__plaetze circle:nth-child(n+401), html:not(.js) .saal[data-stand="50"] .saal__plaetze circle:nth-child(n+501), html:not(.js) .saal[data-stand="60"] .saal__plaetze circle:nth-child(n+601), html:not(.js) .saal[data-stand="70"] .saal__plaetze circle:nth-child(n+701), html:not(.js) .saal[data-stand="80"] .saal__plaetze circle:nth-child(n+801), html:not(.js) .saal[data-stand="90"] .saal__plaetze circle:nth-child(n+901) { fill: transparent; stroke: var(--salbei); }
.turm path, .saal__buehne path { fill: var(--papier); stroke: var(--salbei); stroke-width: 1.4; stroke-linejoin: round; }
.turm .vl { fill: none; }
.saal__buehne path { fill: #ECF1EC; }
.baum { fill: var(--salbei-hell); stroke: var(--salbei); stroke-width: 1.2; }
.stempel { position: absolute; right: 4%; top: 6%; margin: 0; padding: var(--a2) var(--a3); border: 4px double var(--tinte); border-radius: var(--radius-klein); background: rgba(255, 255, 255, .9); font: 700 var(--t1)/1 var(--text); letter-spacing: .14em; text-transform: uppercase; text-align: center; transform: rotate(-12deg); }
.stempel span { display: block; margin-top: var(--a1); font-size: var(--t-1); letter-spacing: .1em; }
html.js .stempel { opacity: 0; transform: rotate(-12deg) scale(1.7); }
html.js .saal.voll .stempel { opacity: 1; transform: rotate(-12deg) scale(1); transition: opacity .2s, transform .45s cubic-bezier(.2, 1.7, .4, 1); }

/* Tickets */
.tickets { background: var(--papier-2); }
.karten { display: grid; gap: var(--a5); }
.karte { --kerbe: var(--papier-2); display: grid; grid-template-columns: 1fr; background: var(--karte); border-radius: var(--radius); box-shadow: 0 1px 0 rgba(22, 32, 27, .06), 0 24px 40px -28px rgba(22, 32, 27, .55); position: relative; }
.karte__haupt { padding: var(--a5); position: relative; }
.karte__haupt::after { content: ''; position: absolute; inset: 8px; border: 1px solid var(--salbei-hell); border-radius: var(--radius-klein); pointer-events: none; }
.karte__tag { font-size: var(--t3); margin-bottom: var(--a2); }
.karte__tag span { display: block; font-style: italic; font-size: var(--t1); color: var(--salbei-tief); }
.karte__ort { color: var(--tinte-2); }
.karte__preise { display: flex; flex-wrap: wrap; gap: var(--a3) var(--a5); margin: var(--a4) 0 var(--a3); }
.karte__preise dt { font-size: var(--t-1); color: var(--tinte-2); }
.karte__preise dd { margin: 0; font-size: var(--t1); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.karte__klein { font-size: var(--t-1); color: var(--tinte-2); margin: 0; }
.karte__abriss { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--a3); padding: var(--a5) var(--a4); border-top: 2px dashed var(--salbei); transform-origin: 0 0; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); position: relative; background: var(--karte); border-radius: 0 0 var(--radius) var(--radius); }
.karte__abriss::before, .karte__abriss::after { content: ''; position: absolute; width: 24px; height: 24px; border-radius: 50%; background: var(--kerbe); top: -13px; }
.karte__abriss::before { left: -12px; }
.karte__abriss::after { right: -12px; }
.karte:hover .karte__abriss, .karte:focus-within .karte__abriss { transform: rotate(2.5deg) translate(4px, 4px); }
.karte__datum { margin: 0; text-align: center; font-weight: 700; font-size: var(--t-1); letter-spacing: .14em; text-transform: uppercase; color: var(--salbei-tief); line-height: 1; }
.karte__datum span { display: block; font-family: var(--titel); font-size: var(--t6); font-weight: 600; letter-spacing: 0; color: var(--tinte); line-height: .95; margin-bottom: var(--a1); }
.karte__abriss .knopf { padding: 0 var(--a3); white-space: nowrap; }
.karte__abriss .knopf .sym { width: 16px; height: 16px; }
.karte__wo { margin: calc(-1 * var(--a2)) 0 0; font-size: var(--t-1); color: var(--tinte-2); }
.tickets__vorort { display: flex; gap: var(--a3); align-items: flex-start; margin: var(--a6) 0 var(--a2); font-size: var(--t1); max-width: 760px; }
.tickets__vorort .sym { width: 32px; height: 32px; color: var(--salbei-tief); margin-top: 2px; }
.tickets__stand { font-size: var(--t-1); color: var(--tinte-2); margin-left: 48px; }
.saal[data-stand="100"] .saal__text .knopf { display: none; }   /* ausverkauft: nichts mehr zu sichern */
.tickets .tickets__verkauft { display: inline-block; margin-top: var(--a3); padding: var(--a1) var(--a3); border-radius: 999px; background: var(--wald); color: var(--papier); font-weight: 700; }

/* Ensemble mit Verfolger */
.ensemble { --sx: 50%; --sy: 20%; background: var(--nacht); color: var(--papier); position: relative; overflow: hidden; isolation: isolate; }
.ensemble::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle 420px at var(--sx) var(--sy), rgba(242, 184, 75, .26), rgba(242, 184, 75, .08) 45%, transparent 72%); }
.ensemble .abschnitt-kopf p { color: var(--salbei-hell); }
.ensemble__gruppe { font-style: italic; font-size: var(--t2); color: var(--salbei); margin: var(--a6) 0 var(--a4); padding-bottom: var(--a2); border-bottom: 1px solid rgba(141, 171, 168, .35); }
.personen { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--a5) var(--a3); }
.person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); background: #1d2822; filter: grayscale(1) brightness(.82) contrast(1.06); transition: filter .8s ease, transform .8s ease, box-shadow .8s ease; }
html:not(.js) .person img, .person.im-licht img { filter: none; }
.person.im-licht img { transform: translateY(-4px); box-shadow: 0 16px 48px -16px rgba(242, 184, 75, .55); }
.person h4, .person h5 { font-size: var(--t1); margin-top: var(--a3); }
/* Ensemble nach Jahr (ab zwei Jahren): Reiter hell auf Dunkel; die Jahres-Überschrift braucht es nur ohne JavaScript */
.ensemble .reiter { margin-top: var(--a5); }
.ensemble .reiter__knopf { border-color: var(--salbei-hell); color: var(--papier); }
.ensemble .reiter__knopf[aria-selected="true"] { background: var(--papier); color: var(--tinte); }
.ensemble__jahr { font-size: var(--t3); margin-top: var(--a6); }
html.js .ensemble__jahr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.person__rolle { font-size: var(--t-1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--licht); margin: var(--a1) 0 var(--a2); }
.person > p:not(.person__rolle) { font-size: var(--t-1); color: var(--salbei-hell); line-height: 1.5; }
.mehr summary { display: inline-flex; align-items: center; gap: var(--a2); min-height: 44px; cursor: pointer; font-size: var(--t-1); font-weight: 700; color: var(--salbei); list-style: none; }
.mehr summary::-webkit-details-marker { display: none; }
.mehr summary::before { content: '+'; display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 16px; line-height: 1; transition: transform .3s; }
.mehr[open] summary::before { transform: rotate(45deg); }
.mehr p { font-size: var(--t-1); color: var(--salbei-hell); line-height: 1.55; }

/* Rückblick: Crescendo und Szenen */
.noten { margin-bottom: var(--a7); }
.noten__bild { width: 100%; height: auto; }
.noten__linien, .noten__takt, .noten__hilfe { stroke: var(--tinte); stroke-width: 1.4; fill: none; opacity: .55; }
.note ellipse { fill: var(--tinte); }
.note__hals { stroke: var(--tinte); stroke-width: 2.4; }
.note--4 ellipse { fill: var(--licht); stroke: var(--tinte); stroke-width: 2; }
.noten__gabel { stroke: var(--salbei-tief); stroke-width: 1.6; fill: none; }
.noten__cresc { font-family: var(--titel); font-style: italic; font-size: 22px; fill: var(--salbei-tief); }
html.js .note { opacity: 0; transform: translateY(-40px); transition: opacity .6s, transform .9s cubic-bezier(.2, 1.5, .4, 1); }
html.js .noten.sichtbar .note { opacity: 1; transform: none; }
.noten.sichtbar .note--2 { transition-delay: .35s; }
.noten.sichtbar .note--3 { transition-delay: .7s; }
.noten.sichtbar .note--4 { transition-delay: 1.05s; }
.noten__liste { display: grid; gap: var(--a3); margin-top: var(--a3); }
.noten__liste li { font-size: var(--t-1); line-height: 1.5; }
.noten__liste strong { display: block; font-family: var(--titel); font-size: var(--t1); line-height: 1.2; margin-bottom: var(--a1); }
.noten__liste li:last-child strong { color: var(--licht-tief); }
.szenen__titel { font-size: var(--t2); margin-bottom: var(--a4); }
.szenen { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--a2); grid-auto-flow: dense; }
.szene--breit { grid-column: span 2; }
.szene a { display: block; height: 100%; border-radius: var(--radius-klein); overflow: hidden; background: var(--salbei-hell); }
.szene img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s ease; }
.szene a:hover img { transform: scale(1.04); }
.reiter { display: flex; gap: var(--a2); margin-bottom: var(--a4); }
html:not(.js) .reiter { display: none; }
.reiter__knopf { min-height: 48px; min-width: 96px; padding: 0 var(--a4); border-radius: 999px; border: 2px solid var(--tinte); background: transparent; color: var(--tinte); font: 700 var(--t0)/1 var(--titel); cursor: pointer; }
.reiter__knopf[aria-selected="true"] { background: var(--tinte); color: var(--papier); }
.reiter__feld + .reiter__feld { margin-top: var(--a6); }
html.js .reiter__feld + .reiter__feld { margin-top: 0; }
.reiter__feld:focus-visible { outline-offset: 8px; }
.jahr2026 { display: grid; gap: var(--a5); align-items: start; }
.szenen.szenen--plakat { grid-template-columns: 1fr; max-width: 360px; }
.szenen--plakat img { aspect-ratio: auto; height: auto; }
.jahr2026__satz { font-family: var(--titel); font-size: var(--t2); line-height: 1.25; }
.szenen__nachweis { font-size: var(--t-1); color: var(--tinte-2); margin-top: var(--a3); }
.verweise { display: grid; gap: var(--a2); margin-top: var(--a4); }
.verweise a { display: inline-flex; gap: var(--a2); align-items: center; min-height: 44px; font-weight: 600; }
.leuchtkasten { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.leuchtkasten::backdrop { background: rgba(12, 18, 15, .92); }
.leuchtkasten figure { margin: 0; height: 100%; display: grid; place-items: center; align-content: center; gap: var(--a3); padding: var(--a8) var(--a3) var(--a5); }
.leuchtkasten img { max-width: min(92vw, 1600px); max-height: 76vh; width: auto; border-radius: var(--radius-klein); }
.leuchtkasten figcaption { color: var(--papier); font-size: var(--t-1); text-align: center; max-width: 66ch; }
.lk-knopf { position: fixed; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 0; background: var(--papier); color: var(--tinte); cursor: pointer; }
.lk-knopf .sym { width: 24px; height: 24px; }
.lk-zu { top: var(--a3); right: var(--a3); }
.lk-zurueck { left: var(--a3); top: 50%; transform: translateY(-50%); }
.lk-vor { right: var(--a3); top: 50%; transform: translateY(-50%); }

/* Häufige Fragen */
.fragen { background: var(--papier-2); }
.fragen__raster { display: grid; gap: var(--a5); align-items: start; }
.fragen__ort { display: flex; gap: var(--a3); align-items: flex-start; margin-top: var(--a4); }
.fragen__ort .sym { width: 32px; height: 32px; color: var(--salbei-tief); }
.fragen__ort a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 600; }
.frage { border-bottom: 1px solid var(--linie); }
.frage:first-child { border-top: 1px solid var(--linie); }
.frage summary { display: flex; justify-content: space-between; align-items: center; gap: var(--a3); min-height: 64px; padding: var(--a3) 0; cursor: pointer; font-weight: 700; list-style: none; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--karte); border: 1px solid var(--linie); font-size: 20px; font-weight: 400; transition: transform .3s; }
.frage[open] summary::after { transform: rotate(45deg); background: var(--licht); }
.frage__text { padding: 0 var(--a6) var(--a4) 0; color: var(--tinte-2); }

/* Unterstützer */
.unterstuetzer__raster { display: grid; gap: var(--a6); align-items: center; }
/* Hauptsponsor: eigener Kasten über den anderen Logos, Logo größer und mittig (Wunsch der Kundin 21.10.2026) */
.hauptsponsor { margin-top: var(--a5); text-align: center; }
/* ohne Rahmen und ohne sichtbare Überschrift (Patrick 21.10.2026): das größere Logo allein macht es klar, die Überschrift bleibt nur für Vorleseprogramme */
.hauptsponsor h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hauptsponsor ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--a4) var(--a8); }
.hauptsponsor img, .logos .hauptsponsor img { height: 180px; width: auto; max-height: none; }   /* .logos img würde sonst auf Dateigröße zurücksetzen */
@media (max-width: 699px) { .hauptsponsor img, .logos .hauptsponsor img { height: 140px; } }
/* Stufen 2–4 je eine Reihe über die volle Breite: gleich breite Felder, eine angefangene Zeile steht mittig (keine Lücke
   am Rand). Die Stufe bestimmt Feldbreite und Logohöhe (Sponsorenliste der Kundin 21.10.2026). */
.logos { grid-column: 1 / -1; display: grid; gap: var(--a6); }
/* Unterstützer je Jahr (ab zwei Jahren Reiter, Wunsch der Kundin 21.10.2026); Jahres-Überschrift nur ohne JavaScript sichtbar */
.logos__jahr { display: grid; gap: var(--a6); }
.logos__reiter { margin: var(--a5) 0 0; }
.logos__jahr .hauptsponsor { margin-top: 0; }
.logos__jahrtitel { font-size: var(--t2); }
html.js .logos__jahrtitel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.logos__stufe { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--a4) var(--a5); }
.logos__stufe li { display: flex; align-items: center; justify-content: center; }
.logos img { width: auto; height: auto; max-width: 100%; opacity: .88; }
.logos li > a { display: flex; align-items: center; justify-content: center; max-width: 100%; border-radius: 4px; }   /* verlinkte Logos bleiben in ihrer Zelle */
.logos li > a:hover img, .logos li > a:focus-visible img { opacity: 1; }
/* Stufe 3 nah an Stufe 2 (Wunsch der Kundin 21.10.2026: Lippelt/Sticher deutlich größer als Stufe 4) */
.logos__stufe--2 li { flex: 0 0 240px; min-height: 104px; }
.logos__stufe--2 img { max-height: 92px; }
.logos__stufe--3 li { flex: 0 0 210px; min-height: 96px; }
.logos__stufe--3 img { max-height: 84px; }
.logos__stufe--4 li { flex: 0 0 136px; min-height: 64px; }
.logos__stufe--4 img { max-height: 46px; }
.logos__stufe--5 li { flex: 0 0 120px; min-height: 52px; }
.logos__stufe--5 img { max-height: 36px; }
@media (max-width: 699px) {
  .logos__stufe--2 li, .logos__stufe--3 li { flex-basis: calc(50% - var(--a5) / 2); }
  .logos__stufe--4 li, .logos__stufe--5 li { flex-basis: calc(33.333% - var(--a5) * 2 / 3); }
}
.sponsor { background: var(--salbei-hell); border-radius: var(--radius); padding: var(--a5); }
.sponsor h3 { font-size: var(--t2); margin-bottom: var(--a3); }
.sponsor__satz { font-family: var(--titel); font-style: italic; font-size: var(--t1); line-height: 1.35; }

/* Über uns und Kontakt */
.ueber { background: var(--wald); color: var(--papier); }
.ueber__raster { display: grid; gap: var(--a6); align-items: start; }
.ueber__text p { color: var(--salbei-hell); }
.gruender { display: grid; gap: var(--a3); margin-top: var(--a5); }
.gruender li { display: flex; gap: var(--a3); align-items: center; }
.gruender img { width: 72px; height: 72px; object-fit: cover; object-position: 50% 25%; border-radius: 50%; border: 2px solid var(--salbei); }
.gruender strong { display: block; font-family: var(--titel); font-size: var(--t1); line-height: 1.2; color: var(--papier); }
.gruender span { font-size: var(--t-1); color: var(--salbei-hell); }
.kontakt { background: var(--nacht); border-radius: var(--radius); padding: var(--a5); border: 1px solid rgba(141, 171, 168, .3); }
.kontakt h3 { font-size: var(--t2); margin-bottom: var(--a3); }
.kontakt p { color: var(--salbei-hell); }
/* Mailadresse nie umbrechen (Patrick, 19.10.2026): Schrift wird mit der Breite des Kastens kleiner (cqi).
   5,1cqi passt für Adressen bis rund 30 Zeichen wie info@musical-moments-hameln.de; längere am Handy prüfen. */
.kontakt { container-type: inline-size; }
.kontakt__adresse { font-weight: 700; color: var(--papier); white-space: nowrap; font-size: min(1em, 5.25cqi); }
@media (max-width: 479px) { .kontakt { padding: var(--a4) var(--a3); } }
/* Kontaktformular: nur mit JavaScript (Einmal-Schlüssel gegen Spam), ohne JS bleibt die Mailadresse */
.kontakt__formular { display: none; margin-top: var(--a4); }
html.js .kontakt__formular { display: grid; gap: var(--a3); }
html:not(.js) .kontakt__oder { display: none; }
.feld { display: grid; gap: var(--a1); }
.feld label { font-weight: 600; color: var(--salbei-hell); }
.feld input, .feld textarea { width: 100%; min-height: 48px; padding: 12px var(--a2); font: 400 var(--t0)/1.5 var(--text); color: var(--papier); background: rgba(255, 255, 255, .06); border: 1px solid rgba(220, 230, 225, .45); border-radius: 8px; }
.feld textarea { min-height: 136px; resize: vertical; }
.feld input:focus-visible, .feld textarea:focus-visible { outline: 3px solid var(--licht); outline-offset: 2px; border-color: var(--licht); }
.feld [aria-invalid="true"] { border-color: var(--licht); }
.feld--falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kontakt__formular { position: relative; }
.kontakt__formular .knopf { justify-self: start; }
.kontakt__formular .knopf[disabled] { opacity: .6; cursor: wait; transform: none; }
.kontakt__meldung { padding: var(--a2) var(--a3); border-left: 4px solid var(--licht); background: rgba(242, 184, 75, .1); color: var(--papier) !important; }
.kontakt__hinweis { font-size: var(--t-1); }
.kontakt__hinweis a { color: var(--papier); }
.kontakt__formular.gesendet .feld, .kontakt__formular.gesendet .knopf { display: none; }
.kontakt__insta { display: flex; gap: var(--a2); align-items: center; min-height: 48px; margin-top: var(--a3); font-weight: 600; color: var(--papier); }

/* Schlussvorhang */
.schluss { background: var(--wald); padding: 0 0 var(--a7); color: var(--papier); }
.schluss__huelle { position: relative; max-width: 1000px; margin-inline: auto; }
.schluss__buehne { position: relative; aspect-ratio: 800 / 430; }
.schluss__foto { position: absolute; left: 5%; top: 10.2%; width: 90%; height: 82.2%; object-fit: cover; object-position: 50% 40%; }
.schluss__bild { position: absolute; inset: 0; width: 100%; height: 100%; }
.rahmen-nacht { fill: var(--wald); }
.schluss .vb1 { fill: #6F8F88; }
.schluss .vb2 { fill: #5F7F78; }
.schluss .vl { stroke: #3E5A53; }
.schluss .behang .bogen { fill: #7E9D96; stroke: #3E5A53; }
.schluss .behang .schwanz { fill: #6F8F88; stroke: #3E5A53; }
.schluss .behang .stange, .schluss .behang .knauf { stroke: var(--licht); fill: var(--licht); }
.boden__kante { stroke: var(--salbei); stroke-width: 2; }
.schluss__text { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); text-align: center; background: rgba(18, 26, 22, .78); padding: var(--a4) var(--a5); border-radius: var(--radius); width: max-content; max-width: 86%; transition: opacity .6s, transform .6s; }
.schluss__text h2 { margin-bottom: var(--a1); font-size: var(--t2); }
.schluss__text p { margin: 0 auto var(--a3); color: var(--salbei-hell); font-family: var(--titel); font-style: italic; font-size: var(--t1); }
html.js .schluss:not(.zu) .schluss__text { opacity: 0; transform: translate(-50%, -40%); pointer-events: none; }

/* Fuß */
.fuss { background: var(--nacht); color: var(--salbei-hell); padding: var(--a6) 0 var(--a5); font-size: var(--t-1); }
.fuss__raster { display: grid; gap: var(--a4); }
.fuss .wortmarke { height: 48px; margin-bottom: var(--a3); }
.fuss .wortmarke use { fill: var(--papier); }
.fuss .wortmarke .schatten { fill: #3E5A53; }
.fuss a { color: var(--papier); }
.fuss__navi { display: flex; flex-wrap: wrap; gap: 0 var(--a3); }
.fuss__navi a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; }
.fuss__entwurf { max-width: 90ch; opacity: .9; }
.fuss__partner { grid-column: 1 / -1; border-block: 1px solid rgba(141, 171, 168, .3); padding: var(--a4) 0; }
.fuss__partner p { margin-bottom: var(--a3); }
.fuss__partner ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a4) var(--a6); }
.fuss__partner img { height: 40px; width: auto; opacity: .85; }

/* Textseiten, 404 */
.text-seite { padding: var(--a7) 0 var(--a8); min-height: 60vh; }
.text-seite .rahmen { max-width: 760px; }
.text-seite h1 { font-size: var(--t4); margin-bottom: var(--a4); }
.text-seite h2 { font-size: var(--t1); margin: var(--a5) 0 var(--a2); }
.hinweis { background: var(--salbei-hell); border-radius: var(--radius-klein); padding: var(--a3) var(--a4); margin-bottom: var(--a5); }
.hinweis p:last-child { margin-bottom: 0; }
.offen { background: var(--licht-hell); padding: 0 4px; border-radius: 4px; }
.fehler-seite { display: grid; gap: var(--a5); align-items: center; }
.fehler__bild { width: 100%; max-width: 420px; justify-self: center; }
.fehler__tuch { fill: var(--salbei-hell); stroke: var(--salbei); stroke-width: 1.4; }
.fehler__knauf { fill: var(--licht); }

/* ab Tablet */
@media (min-width: 700px) {
  h1 { font-size: var(--t4); }
  h2 { font-size: var(--t4); }
  section { padding: var(--a8) 0; }
  .personen { grid-template-columns: repeat(3, 1fr); gap: var(--a6) var(--a4); }
  .szenen { grid-template-columns: repeat(3, 1fr); }
  .szene--breit { grid-row: span 2; }
  .noten__liste { grid-template-columns: repeat(4, 1fr); text-align: center; }
  .jahr2026 { grid-template-columns: 320px 1fr; gap: var(--a6); }
  .karte { grid-template-columns: 1fr 232px; }
  .karte__abriss { padding-inline: var(--a3); }
  .karte__abriss { border-top: 0; border-left: 2px dashed var(--salbei); border-radius: 0 var(--radius) var(--radius) 0; }
  .karte__abriss::before { left: -13px; top: -12px; }
  .karte__abriss::after { left: -13px; right: auto; top: auto; bottom: -12px; }
  .gruender { grid-template-columns: repeat(3, 1fr); }
  .gruender li { flex-direction: column; align-items: flex-start; }
  .fuss__raster { grid-template-columns: 1.618fr 1fr; align-items: start; }
  .fuss__entwurf { grid-column: 1 / -1; }
}

/* ab Laptop: Goldener Schnitt */
@media (min-width: 1100px) {
  .start__raster { grid-template-columns: 1fr 1.618fr; gap: var(--a6); }
  .buehne { order: 0; width: min(100%, calc((100vh - 150px) * 800 / 760)); max-width: 720px; margin-top: calc(-1 * var(--a3)); }
  .logo-buehne { order: 0; width: min(100%, calc((100vh - 170px) * 1795 / 1467)); max-width: 680px; }
  .start h1 { font-size: var(--t4); }
  .abend__raster, .fragen__raster, .unterstuetzer__raster, .ueber__raster { grid-template-columns: 1.618fr 1fr; gap: var(--a7); }
  .fragen__raster { grid-template-columns: 1fr 1.618fr; }
  .saal__raster { grid-template-columns: 1fr 1.618fr; gap: var(--a6); }
  .karten { grid-template-columns: 1fr 1fr; }
  .personen { grid-template-columns: repeat(4, 1fr); }
  .fehler-seite { grid-template-columns: 1.618fr 1fr; }
}

/* niedrige Laptop-Bildschirme: Startbereich kompakter, damit Termin und Knopf im ersten Bild stehen */
@media (min-width: 1100px) and (max-height: 760px) {
  .start { padding-top: var(--a4); }
  .start h1 { font-size: var(--t3); }
  .start__lead { font-size: var(--t0); margin-top: var(--a3); }
  .start__termin { margin-top: var(--a3); padding: var(--a2) 0; }
  .knopfreihe { margin-top: var(--a3); }
}

/* Kopf: Navigation erst ab breiten Bildschirmen, sonst Menü */
@media (max-width: 1179px) {
  .navi { display: none; }
  .menue { display: block; }
  .kopf__leiste { gap: var(--a2); }
}
@media (max-width: 699px) {
  :root { --kopf: 64px; }
  .entwurf .lang { display: none; }
  .entwurf .kurz { display: inline; }
  .wortmarke { height: 38px; }
  .knopf--kopf { padding: 0 var(--a3); }
  .start { padding-top: var(--a3); }
  .start__tage { font-size: var(--t1); }
  .karte__haupt { padding: var(--a4); }
  .tickets__stand { margin-left: 0; }
  .frage__text { padding-right: 0; }
  /* am Handy steht der Schlusstext unter der Bühne, sonst wäre der Vorhang zugedeckt */
  .schluss__text, html.js .schluss:not(.zu) .schluss__text { position: relative; left: auto; top: auto; transform: none; opacity: 1; pointer-events: auto; margin: var(--a4) auto 0; background: none; padding: 0; max-width: 100%; }
}