/* Varvara Tishina · öffentliche Seite. Richtung „Stille“: Papierweiß, Tinte, Flieder als einziger Akzent. */
/* Dunkel: „Bühnennacht“. */
:root{
  --paper:#F7F6F9; --paper-rgb:247,246,249; --paper-2:#EEEBF3; --surface:#FFFFFF;
  --ink:#231D2C; --ink-soft:#5C5568; --line:#DCD6E4;
  --lilac:#6E5A9C; --lilac-soft:#E8E1F3; --sky:#CBDAE6; --on-lilac:#FFFFFF;
  --accent2:#8E7BC0; --on-accent2:#FFFFFF;
  --warn:#86601A; --warn-bg:#F4EAD5;
  --glass:rgba(247,246,249,.86); --shade:rgba(35,29,44,.22);
  --f-display:"Noto Serif Display","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --f-body:"Manrope","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --gl:max(20px, env(safe-area-inset-left, 0px));
  --gr:max(20px, env(safe-area-inset-right, 0px));
  --player-h:4.75rem;
  --kopf-h:calc(4.25rem + 1px);
  /* Bühne (Hero, immer dunkel): heller Akzent und ein Hauch der Farbwelt im Schwarz */
  --buehne:#C9B9F0; --tiefe-rgb:15,12,22;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#16131B; --paper-rgb:22,19,27; --paper-2:#1F1B26; --surface:#221D2A;
    --ink:#EEEAF3; --ink-soft:#ABA3B8; --line:#3A3345;
    --lilac:#BBA9E6; --lilac-soft:#2E2641; --sky:#2B3B4A; --on-lilac:#16131B; --accent2:#D2C4F2; --on-accent2:#16131B;
    --warn:#E2BC6C; --warn-bg:#362B18;
    --glass:rgba(22,19,27,.86); --shade:rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#16131B; --paper-rgb:22,19,27; --paper-2:#1F1B26; --surface:#221D2A;
  --ink:#EEEAF3; --ink-soft:#ABA3B8; --line:#3A3345;
  --lilac:#BBA9E6; --lilac-soft:#2E2641; --sky:#2B3B4A; --on-lilac:#16131B; --accent2:#D2C4F2; --on-accent2:#16131B;
  --warn:#E2BC6C; --warn-bg:#362B18;
  --glass:rgba(22,19,27,.86); --shade:rgba(0,0,0,.55);
  color-scheme:dark;
}
/* Farbwelten zum Ausprobieren (Lasche am linken Rand) */
/* Ruhiger Grundton + genau ein Akzent. Grundton und Akzent haben entgegengesetzte Temperatur
   (warm gegen kühl). --accent2 ist nur eine Tönung desselben Akzents: Bogen, Nachname, Markierungen. */
:root[data-palette="tinte"]{ --buehne:#A9BEE4; --tiefe-rgb:8,14,28; --paper:#F2F1EE; --paper-rgb:242,241,238; --paper-2:#E9E8E4; --surface:#FAF9F7; --ink:#101014; --ink-soft:#55555C; --line:#DEDCD6; --lilac:#2E4A7D; --lilac-soft:#E4E8EF; --sky:#E9E8E4; --on-lilac:#FFFFFF; --accent2:#5F79A5; --on-accent2:#FFFFFF; --warn:#86601A; --warn-bg:#F4EAD5; --glass:rgba(242,241,238,.9); --shade:rgba(16,16,20,.2); color-scheme:light }
:root[data-palette="kupfer"]{ --buehne:#E3B68C; --tiefe-rgb:20,14,10; --paper:#F2F3F5; --paper-rgb:242,243,245; --paper-2:#E8EAED; --surface:#FFFFFF; --ink:#1F2024; --ink-soft:#5C5E66; --line:#D8DADE; --lilac:#9C5F2E; --lilac-soft:#F1E6DC; --sky:#E4E6EA; --on-lilac:#FFFFFF; --accent2:#A97B4D; --on-accent2:#FFFFFF; --warn:#86601A; --warn-bg:#F4EAD5; --glass:rgba(242,243,245,.9); --shade:rgba(31,32,36,.2); color-scheme:light }
/* Kühles Grau & Silberblau (Varvara 26.10.2026: „ближе к холодному скандинавскому серебристо-синему“) */
:root[data-palette="frost"]{ --buehne:#B9CCDD; --tiefe-rgb:12,18,26; --paper:#EEF1F3; --paper-rgb:238,241,243; --paper-2:#E3E8EC; --surface:#F8FAFB; --ink:#141A21; --ink-soft:#56606B; --line:#D5DCE2; --lilac:#4D6B86; --lilac-soft:#E1E8EF; --sky:#E3E8EC; --on-lilac:#FFFFFF; --accent2:#7891A8; --on-accent2:#FFFFFF; --warn:#86601A; --warn-bg:#F4EAD5; --glass:rgba(238,241,243,.9); --shade:rgba(20,26,33,.2); color-scheme:light }
:root[data-palette="graphit"]{ --buehne:#D9C0A3; --tiefe-rgb:14,13,12; --paper:#1B1A18; --paper-rgb:27,26,24; --paper-2:#22201E; --surface:#282624; --ink:#F1EEE7; --ink-soft:#B3ADA3; --line:#3A3734; --lilac:#D9C0A3; --lilac-soft:#3A332B; --sky:#2A2826; --on-lilac:#1B1A18; --accent2:#D9C0A3; --on-accent2:#1B1A18; --warn:#FFD27A; --warn-bg:rgba(255,210,122,.14); --glass:rgba(27,26,24,.9); --shade:rgba(0,0,0,.55); color-scheme:dark }
/* Graphit & Rosé: wie Graphit & Sand, kühler, mit gedämpftem kühlem Rosa (Varvara 26.10.2026: „холодный приглушённый розовый“) */
:root[data-palette="rose"]{ --buehne:#E3B9C3; --tiefe-rgb:13,13,15; --paper:#1A1B1E; --paper-rgb:26,27,30; --paper-2:#212226; --surface:#27282C; --ink:#EEEDF0; --ink-soft:#ADABB3; --line:#38393E; --lilac:#D8AAB6; --lilac-soft:#3A2F35; --sky:#2A2B2F; --on-lilac:#1A1B1E; --accent2:#D8AAB6; --on-accent2:#1A1B1E; --warn:#FFD27A; --warn-bg:rgba(255,210,122,.14); --glass:rgba(26,27,30,.9); --shade:rgba(0,0,0,.55); color-scheme:dark }
@media (max-width:760px){ :root{ --player-h:7rem } }

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:5.5rem; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:1.0625rem; line-height:1.65; -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--player-h) + env(safe-area-inset-bottom, 0px))}
body.no-player{padding-bottom:env(safe-area-inset-bottom, 0px)}
img{max-width:100%; display:block}
h1,h2,h3,h4,p,ul,ol,dl,figure{margin:0}
h1,h2,h3{font-family:var(--f-display); font-weight:400; line-height:1.1; text-wrap:balance}
a{color:var(--lilac); text-underline-offset:.18em; text-decoration-thickness:1px}
button,input{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--lilac); outline-offset:3px; border-radius:4px}
[hidden]{display:none !important}
.wrap{max-width:1200px; margin-inline:auto; padding-left:var(--gl); padding-right:var(--gr)}
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.skip{position:absolute; left:-9999px; top:0}
.skip:focus{left:1rem; top:1rem; z-index:100; background:var(--surface); padding:.6rem 1rem; border-radius:6px}
.kicker{font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--ink-soft)}
.arc{position:relative; display:inline-block; line-height:1}
.arc > svg{position:absolute; left:5%; width:90%; top:-.22em; height:.24em; fill:var(--accent2); overflow:visible; pointer-events:none; transform-origin:50% 100%}
.chip{display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.04em; padding:.15rem .6rem; border-radius:999px; color:var(--lilac); background:var(--lilac-soft); white-space:nowrap; font-family:var(--f-body)}
.chip.warn{color:var(--warn); background:var(--warn-bg)}

/* Kopf */
.site-header{position:sticky; top:0; z-index:46; /* über Schleier, Schublade und Player: Menü bleibt bei offener Schublade scharf und bedienbar (User 20.10.2026) */background:var(--glass); -webkit-backdrop-filter:saturate(1.2) blur(12px); backdrop-filter:saturate(1.2) blur(12px); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top, 0px)}
.bar{display:flex; align-items:center; gap:1.5rem; min-height:4.25rem}
.logo{font-family:var(--f-display); font-style:italic; font-weight:300; font-size:1.6rem; color:var(--ink); text-decoration:none; margin-right:auto; margin-top:.3rem; white-space:nowrap}
/* Logo wie der Name im Hero: Vorname kursiv, Nachname in gesperrten Versalien.
   Solange das große „Varvara“ der Bühne zu sehen ist, nur „V T“ (Klasse .monogramm, site.js);
   beim Darüberfahren und sobald es unter dem Kopf verschwunden ist, entfalten sich die Namen langsam. */
.logo{display:inline-flex; align-items:baseline}
.logo-vor{line-height:1}
.logo-vor > svg{left:5%; width:90%; height:.3em; top:-.26em;
  transition:left .5s cubic-bezier(.45,0,.2,1), width .5s cubic-bezier(.45,0,.2,1), height .5s ease, top .5s ease}
.logo-nach{font-style:normal; font-weight:400; font-size:.76em; line-height:1; letter-spacing:.24em; text-transform:uppercase; margin-left:.6em; color:var(--lilac);   /* Versalien so hoch wie das „a“ */
  transition:font-size .5s cubic-bezier(.45,0,.2,1), letter-spacing .5s cubic-bezier(.45,0,.2,1), margin-left .5s cubic-bezier(.45,0,.2,1)}
.logo-rest{display:inline-block; vertical-align:top; overflow:hidden; white-space:nowrap; line-height:1; padding-right:.1em; margin-right:-.1em;
  transition:max-width .5s cubic-bezier(.45,0,.2,1), opacity .4s ease}
.logo-vor .logo-rest{max-width:3em}
.logo-nach .logo-rest{max-width:5em}
.site-header.monogramm .logo:not(:hover):not(:focus-visible) .logo-rest{max-width:0; opacity:0; transition-duration:.4s, .25s}
.site-header.monogramm .logo:not(:hover):not(:focus-visible) .logo-nach{font-size:1em; letter-spacing:0; margin-left:.28em}
.site-header.monogramm .logo:not(:hover):not(:focus-visible) .logo-vor > svg{left:.04em; width:1.52em; height:.22em; top:-.24em}
.nav ul{display:flex; gap:.3rem; list-style:none; padding:0; font-size:.9375rem; font-weight:500}
.nav a{position:relative; display:block; color:var(--ink); text-decoration:none; padding:.4rem .7rem; border-radius:6px; white-space:nowrap; transition:background-color .15s ease, color .15s ease}
.nav a:hover{color:var(--lilac); background:var(--lilac-soft)}
.nav a[aria-current="true"]{color:var(--lilac)}
.nav a[aria-current="true"]::after{content:""; position:absolute; left:.7rem; right:.7rem; bottom:.15rem; height:2px; border-radius:1px; background:var(--accent2)}
.lang button:hover{color:var(--ink); background:var(--paper-2)}
/* Kopf ganz oben über dem Vollbild-Foto: transparent, helle Schrift. Beim ersten Scrollen wird er hell (site.js). */
.site-header{transition:background-color .25s ease, border-color .25s ease}
.site-header.auf-buehne{background:linear-gradient(rgba(8,8,10,.55), rgba(8,8,10,0)) border-box no-repeat; border-bottom-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none}
.site-header.auf-buehne .logo,.site-header.auf-buehne .lang button,.site-header.auf-buehne .menu-btn{color:#F4F1EC}
.site-header.auf-buehne .logo svg{fill:var(--buehne); --atem-von:var(--buehne); --atem-bis:#FFFFFF}
/* Atmender Bogen über dem Logo: Solange Musik läuft, setzt site.js --atem (0 … 1) und die Höhe; die Farbe geht von der
   gewohnten zur kräftigen Akzentfarbe, auf der dunklen Bühne vom Bühnenakzent zu Weiß */
@supports (fill: color-mix(in srgb, red 50%, blue)){
  .logo .arc > svg,.site-header.auf-buehne .logo .arc > svg{fill:color-mix(in srgb, var(--atem-bis) calc(var(--atem, 0) * 100%), var(--atem-von))}
  .logo .arc > svg{--atem-von:var(--accent2); --atem-bis:var(--lilac)}
}
.site-header.auf-buehne .logo-nach{color:var(--buehne)}
.site-header.auf-buehne .lang button[aria-pressed="true"]{background:rgba(255,255,255,.16); color:#fff}
.site-header.auf-buehne .lang button:hover{background:rgba(255,255,255,.1); color:#fff}
.site-header.auf-buehne .menu-btn{border-color:rgba(244,241,236,.45)}
@media (min-width:921px){
  .site-header.auf-buehne .nav a{color:#F4F1EC}
  .site-header.auf-buehne .nav a:hover{color:#fff; background:rgba(255,255,255,.16)}
  .site-header.auf-buehne .nav a[aria-current="true"]{color:#fff}
  .site-header.auf-buehne .nav a[aria-current="true"]::after{background:var(--buehne)}
}
.lang{display:flex; gap:.15rem; font-size:.75rem; font-weight:700; letter-spacing:.08em}
.lang button{background:none; border:0; padding:.35rem .5rem; border-radius:6px; color:var(--ink-soft); cursor:pointer; letter-spacing:inherit}
.lang button[aria-pressed="true"]{color:var(--ink); background:var(--lilac-soft)}
.menu-btn{display:none; align-items:center; background:none; border:1px solid var(--line); border-radius:999px; padding:.4rem .9rem; font-size:.8125rem; font-weight:600; cursor:pointer}
@media (max-width:920px){
  .menu-btn{display:inline-flex}
  .nav{display:none; position:absolute; left:0; right:0; top:100%; background:var(--paper); border-bottom:1px solid var(--line); padding:.75rem var(--gr) 1.5rem var(--gl); box-shadow:0 24px 30px -26px var(--shade)}
  .nav.open{display:block}
  .nav ul{flex-direction:column; gap:.1rem; font-family:var(--f-display); font-size:1.6rem; font-weight:400}
  .nav a{padding:.35rem .6rem; margin-inline:-.6rem}
  .nav a[aria-current="true"]::after{display:none}
}
@media (max-width:520px){
  .bar{gap:.6rem}
  .logo{font-size:1.3rem}
  .lang button{padding:.3rem .35rem}
}
@media (max-width:380px){   /* sehr schmale Handys: engere Abstände, damit der volle Name, die Sprachen und „Menü“ in eine Zeile passen */
  .bar{gap:.4rem}
  .lang button{padding:.3rem .25rem}
  .menu-btn{padding:.4rem .7rem}
}
@media (max-width:359px){
  :root{ --gl:max(14px, env(safe-area-inset-left, 0px)); --gr:max(14px, env(safe-area-inset-right, 0px)) }
  .logo{font-size:1.15rem}
  .lang{gap:0}
}

/* Bühne: Vollbild-Foto in gedämpfter Farbe, der Name steht auf dem Bild.
   Der Kopf liegt transparent darüber (Klasse .auf-buehne) und wird beim Scrollen wieder hell. */
.hero{position:relative; display:flex; align-items:flex-end; min-height:100vh; min-height:100svh; overflow:hidden; background:rgb(var(--tiefe-rgb)); color:#F4F1EC;
  margin-top:calc(-1 * (var(--kopf-h) + env(safe-area-inset-top, 0px)))}
.hero-grid{position:relative; z-index:2; width:100%; padding-top:calc(var(--kopf-h) + 3rem);
  padding-bottom:max(clamp(3rem,12vh,8rem), calc(var(--player-h) + env(safe-area-inset-bottom, 0px) + 1.5rem))}   /* Knöpfe nie unter dem Player */
.hero-text{max-width:48rem}
.hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(var(--tiefe-rgb),.86) 0%, rgba(var(--tiefe-rgb),.5) 36%, rgba(var(--tiefe-rgb),0) 62%), linear-gradient(0deg, rgba(var(--tiefe-rgb),.62) 0%, rgba(var(--tiefe-rgb),0) 38%)}
.hero .kicker{color:rgba(244,241,236,.72)}
/* Name etwa 80 % der ersten Fassung (Varvara 26.10.2026: „на главной … слишком крупным“; Bogen namen-groesse, Variante A) */
.hero-name{font-family:var(--f-display); font-style:italic; font-weight:300; font-size:clamp(3.4rem,8vw,8rem); line-height:.95; letter-spacing:-.015em; margin-block:clamp(1.9rem,3.6vw,3.2rem) 1.4rem; color:#F4F1EC}
.hero-name .arc > svg{top:-.17em; height:.17em; fill:var(--buehne)}
.name-2{color:var(--buehne)}
.hero-name > .arc{margin-left:-.08em}   /* das kursive V beginnt 0,08 em rechts seiner Kante: so steht es bündig mit „Sopran“ */
.hero-name .name-2{display:block; font-style:normal; font-weight:400; font-size:.45em; line-height:1.15; letter-spacing:.42em; text-transform:uppercase; margin-top:.2em; padding-left:1.18em}   /* das T beginnt unter dem ersten „a“ */
.hero-tag{font-size:1.25rem; line-height:1.55; color:rgba(244,241,236,.86); max-width:30ch}
/* Unter dem Namen: Text oder nächster Termin. Der Platz ist immer so hoch wie drei Textzeilen, so stehen Name und Knöpfe
   immer an derselben Stelle, auch ohne Zeile (User 26.10.2026: Name „sitzt sonst zu tief“, Knöpfe sollen nicht wandern). */
.hero-unter{min-height:calc(1.25rem * 1.55 * 3)}
/* Nächster Termin wie ein kleines Blatt aus der Agenda: links der Tag im Bühnenakzent, rechts Hinweis, Stück und Wochentag · Ort.
   Bewusst klein (Variante 2, User 26.10.2026), damit es nicht mit dem Namen konkurriert; „Nächste Termine“ entfällt dann (site.js). */
.hero-naechst{display:inline-flex; align-items:center; gap:.85rem; color:#F4F1EC; text-decoration:none; max-width:100%}
.hn-datum{display:grid; justify-items:center; min-width:2.4rem; padding-right:.85rem; border-right:1px solid rgba(244,241,236,.28); color:var(--buehne); line-height:1}
.hn-datum b{font-family:var(--f-display); font-weight:400; font-size:2.1rem; line-height:.95}
.hn-datum small{font-size:.625rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-top:.3rem}
.hn-text{display:grid; gap:.2rem; min-width:0}
.hn-label{font-size:.625rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,241,236,.72)}
.hn-werk{font-family:var(--f-display); font-style:italic; font-size:1.125rem; line-height:1.2}
.hn-werk::after{content:"→"; margin-left:.4em; font-style:normal; font-family:var(--f-body); font-size:.8em; color:var(--buehne); display:inline-block; transition:transform .2s ease}
.hn-ort{font-size:.8125rem; color:rgba(244,241,236,.8)}
.hero-naechst:hover .hn-werk,.hero-naechst:focus-visible .hn-werk{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em}
.hero-naechst:hover .hn-werk::after{transform:translateX(.25rem)}
@media (prefers-reduced-motion: reduce){ .hn-werk::after{transition:none} }
.ctas{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem}
.btn{display:inline-flex; align-items:center; gap:.55rem; border-radius:999px; padding:.8rem 1.4rem; font-size:.9375rem; font-weight:600; border:1px solid var(--lilac); cursor:pointer; text-decoration:none; line-height:1.2}
.btn svg{width:1rem; height:1rem; fill:currentColor}
.btn.primary{background:var(--lilac); color:var(--on-lilac)}
.btn.ghost{background:transparent; color:var(--lilac)}
.hero .btn.primary{background:var(--lilac); border-color:var(--lilac); color:var(--on-lilac); box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.hero .btn.ghost{color:#F4F1EC; border-color:var(--buehne)}
/* Das Foto füllt nur die rechten ~70 % und läuft links weich ins Schwarz aus,
   damit der Name auf jeder Bildschirmbreite neben dem Gesicht steht. */
.hero-photo{position:absolute; top:0; right:0; bottom:0; width:72%; z-index:0; margin:0;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 30%); mask-image:linear-gradient(90deg, transparent 0%, #000 30%)}
/* Bildausschnitt kommt aus der Verwaltung (Startseite › Bildausschnitt) */
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:var(--fokus, 56% 26%); filter:saturate(.82) contrast(1.06) brightness(.9)}
@media (max-width:760px){
  .hero-photo{width:100%; -webkit-mask-image:none; mask-image:none}
  .hero-photo img{object-position:var(--fokus-handy, 35% 22%)}
  .hero::after{background:linear-gradient(0deg, rgba(var(--tiefe-rgb),.88) 0%, rgba(var(--tiefe-rgb),.35) 55%, rgba(var(--tiefe-rgb),.15) 100%)}
  .hero-grid{padding-bottom:max(7vh, calc(var(--player-h) + env(safe-area-inset-bottom, 0px) + 2rem))}   /* am Handy ist der Player 7 rem hoch (User 26.10.2026: Knöpfe lagen darunter) */
}

/* Bühne zum Ausprobieren (vorübergehend, User 27.10.2026; Bögen werkzeuge/bilder/hero-umbau…, Varvaras Skizzen): Lasche „Design“ › Bühne.
   Zur Wahl (html.buehne-neu): abgerundeter Knopf rechts (j3, Standard) oder links (j6); das Medaillon hat Varvara verworfen;
   „Soprano“ getrennt wählbar (html[data-soprano], Lasche › Soprano). Für alle: Name klein und oben, kein Termin, „Nächste Termine“
   als Textknopf, Knöpfe ohne Füllung (User: „dezent“); kein Player auf der Bühne: er kommt mit dem Abspielen oder beim Scrollen
   (body.player-da) und geht wieder, wenn man auf der Bühne anhält; „VT“ fehlt nur ganz oben.
   ?buehne=heute zeigt die bisherige Bühne (nicht mehr in der Lasche, nur für die Tests der bisherigen Abläufe). */
.b-bogen,.b-senk{display:none}
.buehne-neu .hero{align-items:stretch}
.buehne-neu .hero-grid{display:flex; flex-direction:column; padding-bottom:clamp(2rem,6vh,3.5rem); transition:padding-bottom .45s ease}
.buehne-neu .player-da .hero-grid{padding-bottom:calc(var(--player-h) + env(safe-area-inset-bottom, 0px) + 1.5rem)}   /* rückt mit dem Player hoch */
.buehne-neu .hero-text{max-width:none; flex:1; display:flex; flex-direction:column; position:relative; z-index:0}
.buehne-neu .hero .kicker{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}   /* „Soprano“ bleibt für Vorleser und Suchmaschinen */
.buehne-neu .hero-unter{display:none}   /* kein Termin auf der Bühne (Varvara) */
.buehne-neu .hero-name{font-size:clamp(2.5rem,5.2vw,5.2rem); margin-block:clamp(.75rem,4vh,2.25rem) 0}   /* klein und oben: links mehr Luft (Varvara) */
.buehne-neu .site-header.auf-buehne .logo{visibility:hidden}   /* auf der Bühne ist der Name das Logo; beim Scrollen kommt „VT“ wie bisher */
.buehne-neu .player{transition:background-color .35s ease, color .35s ease, border-color .35s ease, transform .45s ease}
.buehne-neu body:not(.player-da) .player{transform:translateY(105%)}
/* Unten: Knopf und „Nächste Termine“; der Knopf rechts (j3) oder links, der Termin-Knopf rechts (j6) */
.buehne-neu .ctas{margin-top:auto; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:1rem 2.25rem}
[data-buehne="j3"] .ctas{justify-content:flex-end}
.buehne-neu .hero .ctas .btn.ghost{padding:0; border:0; border-radius:0; background:none; font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; line-height:1.6; color:rgba(244,241,236,.88)}
.buehne-neu .hero .ctas .btn.ghost::after{content:"→"; display:inline-block; margin-left:.4rem; color:var(--buehne); transition:transform .2s ease}
.buehne-neu .hero .ctas .btn.ghost:hover{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.3em}
.buehne-neu .hero .ctas .btn.ghost:hover::after{transform:translateX(.25rem)}
/* Abgerundeter Knopf (j3, j6): feine Linie, ohne Füllung */
[data-buehne="j3"] .hero #cta-play,[data-buehne="j6"] .hero #cta-play{height:2.75rem; padding:0 1.4rem; gap:.7rem; border:1px solid var(--buehne); border-radius:999px; background:transparent; box-shadow:none; color:#F4F1EC;
  font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; line-height:1; transition:background-color .2s ease}
[data-buehne="j3"] .hero #cta-play svg,[data-buehne="j6"] .hero #cta-play svg{width:.85rem; height:.85rem; fill:var(--buehne)}
[data-buehne="j3"] .hero #cta-play:hover,[data-buehne="j6"] .hero #cta-play:hover{background:color-mix(in srgb, var(--buehne) 14%, transparent)}
/* „Soprano“ (Lasche › Soprano): auf dem Bogen über „Varvara“; senkrecht links neben dem Namen, so hoch wie er; senkrecht links mit
   Linie bis zur Unterkante; senkrecht links unten mit kurzer Linie darüber; klein hinter TISHINA. Lage setzt site.js (buehneLage).
   Senkrecht: von unten nach oben gelesen (gedreht), deshalb steht ::after oben und ::before unten. */
.buehne-neu[data-soprano="bogen"] .b-bogen{display:block}
.buehne-neu:not([data-soprano="bogen"]) .b-senk{display:flex}
.b-senk{position:absolute; z-index:1; writing-mode:vertical-rl; transform:rotate(180deg); align-items:center; justify-content:center; gap:.9rem; white-space:nowrap; pointer-events:none;
  font-family:var(--f-display); font-size:clamp(.6rem,.9vw,.95rem); letter-spacing:.5em; line-height:1; text-transform:uppercase; color:var(--buehne)}
.b-senk::before,.b-senk::after{content:""; display:none; background:currentColor; opacity:.45}
[data-soprano="linie"] .b-senk{justify-content:flex-start}
[data-soprano="linie"] .b-senk::before{display:block; flex:1; width:1px}
[data-soprano="unten"] .b-senk::after{display:block; width:1px; height:3.5rem}
[data-soprano="tishina"] .b-senk{writing-mode:horizontal-tb; transform:none; gap:.75rem; font-family:var(--f-body); font-size:.75rem; font-weight:700; letter-spacing:.16em; color:rgba(244,241,236,.72)}
[data-soprano="tishina"] .b-senk::before{display:block; width:1.6rem; height:1px; opacity:.6}
.b-bogen{position:absolute; overflow:visible; pointer-events:none}
.b-bogen text{font-family:var(--f-display); font-size:14px; letter-spacing:.85em; text-transform:uppercase; fill:var(--buehne)}
@media (max-width:760px){
  .buehne-neu .hero-name{margin-top:auto}   /* am Handy bleibt der Name unter dem Gesicht */
  .buehne-neu .ctas{margin-top:1.4rem; flex-direction:row; justify-content:space-between; align-items:center}
  [data-buehne="j3"] .hero .ctas .btn.ghost{order:-1}   /* Knopf rechts */
  [data-soprano="unten"] .b-senk::after{display:none}   /* zwischen Name und Unterkante ist am Handy wenig Platz */
  [data-buehne="j3"] .hero #cta-play span,[data-buehne="j6"] .hero #cta-play span{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}   /* nur die Form, sonst bricht die Zeile um */
  [data-buehne="j3"] .hero #cta-play,[data-buehne="j6"] .hero #cta-play{padding:0 1.3rem}
  .b-bogen text{font-size:11px; letter-spacing:.7em}
}
@media (prefers-reduced-motion: reduce){ .buehne-neu .hero-grid,.buehne-neu .player{transition:none} }

/* Leiste rechts: die Seite als Notenzeile. Ergänzt das Menü oben.
   Oben ein Doppelpfeil (Klick: zum Anfang), dann fünf Notenlinien bis zum Schlussstrich und ein Doppelpfeil nach unten (Klick: ans Ende).
   Jeder Menüpunkt ist ein Taktstrich mit seinem Namen an seiner Stelle im Verhältnis zur Seitenlänge. Eine feine waagrechte Linie wandert beim Scrollen mit;
   der schon „gesungene“ Teil der Linien ist eingefärbt und zart hinterlegt. Klick auf eine Marke oder auf die Linien springt dorthin.
   Nur mit Maus und ab 1280 px. In Ruhe nur mit dem aktuellen Namen, die übrigen erscheinen beim Darüberfahren (siehe Ende des Blocks). */
.leiste{display:none}
@media (min-width:1280px) and (hover:hover){
  .leiste{display:block; position:fixed; z-index:30; right:0; width:4rem;
    top:calc(var(--kopf-h) + env(safe-area-inset-top, 0px) + 1rem); bottom:calc(var(--player-h) + env(safe-area-inset-bottom, 0px) + 2.2rem);   /* unten Platz für den Pfeil zum Ende */
    --l-linie:rgba(108,104,118,.72); --l-zeichen:var(--lilac); --l-text:var(--ink-soft); --l-akzent:var(--lilac); --l-lauf:var(--accent2);
    --l-linie-hell:rgba(244,241,236,.58); --l-text-hell:rgba(244,241,236,.9)}
  body.no-player .leiste{bottom:2.4rem}
  /* Ohne Violinschlüssel (User 21.10.2026: „überflüssig … ruhiger und länger“): oben der Pfeil zum Anfang, gleich darunter die Notenzeile */
  .leiste-bahn{position:absolute; top:1.7rem; bottom:0; left:0; right:0; cursor:pointer}
  /* Fünf einzelne Linien. site.js legt sie auf ganze Bildschirmpixel, damit sie auch bei 125 % oder 150 % gleich dick sind. */
  .leiste-system,.leiste-lauf{position:absolute; top:0; bottom:0; right:18px; width:21px; pointer-events:none}
  /* --l-linien / --l-laeufe setzt site.js: stückweise hell, wo die Linien über dunklen Flächen liegen (Bühne, Video) */
  .leiste-system i,.leiste-lauf i{position:absolute; top:0; bottom:0; width:var(--haar, 1px); background:var(--l-linien, var(--l-linie))}
  .leiste-lauf i{background:var(--l-laeufe, var(--l-lauf))}
  .leiste-system i:nth-child(2),.leiste-lauf i:nth-child(2){left:5px}
  .leiste-system i:nth-child(3),.leiste-lauf i:nth-child(3){left:10px}
  .leiste-system i:nth-child(4),.leiste-lauf i:nth-child(4){left:15px}
  .leiste-system i:nth-child(5),.leiste-lauf i:nth-child(5){left:20px}
  .leiste-lauf{clip-path:inset(0 0 100% 0)}
  .leiste-schluss{position:absolute; z-index:1; bottom:0; right:18px; width:21px; height:6px; border-top:1px solid var(--l-text); border-bottom:3px solid var(--l-text); cursor:pointer}
  .leiste-schluss::before{content:""; position:absolute; inset:-6px -5px -4px}   /* Klick: ans Seitenende (wie der Schlüssel an den Anfang) */
  /* Anfangsstrich: Die Notenzeile beginnt mit einem feinen Strich, als Gegenstück zum Schlussstrich unten */
  .leiste-anfang{position:absolute; top:0; right:18px; width:21px; height:var(--haar, 1px); background:var(--l-lauf); pointer-events:none}   /* gehört zum schon „gesungenen“ Teil */
  .leiste.anfang-dunkel .leiste-anfang{background:var(--buehne)}
  /* Oben über der Notenzeile ein Doppelpfeil zum Anfang, unten unter dem Schlussstrich einer zum Ende (User 23.10.2026: statt „Da capo“
     und „Fine“, „dann ist alles einheitlich“). In der Farbe der „gesungenen“ Linien, so breit wie die Notenzeile, immer sichtbar.
     Ganz oben bzw. ganz unten nur in der Akzentfarbe, ohne Schild (site.js: am-anfang, am-ende). */
  .leiste-wort{position:absolute; right:18px; width:21px; height:1.15rem; display:grid; place-items:center; color:var(--l-lauf); text-decoration:none; cursor:pointer}
  .leiste-wort svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
  .leiste-wort-dc{top:0}
  .leiste-wort-fine{bottom:-1.5rem}
  .leiste-wort:hover,.leiste.am-anfang .leiste-wort-dc,.leiste.am-ende .leiste-wort-fine{color:var(--l-akzent)}
  .leiste.dc-dunkel .leiste-wort-dc,.leiste.schluss-dunkel .leiste-wort-fine{color:var(--buehne)}   /* über Bühne und Video */
  /* Statt der Note eine feine waagrechte Linie, etwas breiter als die Notenzeile: die Grenze zwischen „gesungen“ und „noch nicht“
     (User 23.10.2026, Variante B aus werkzeuge/bilder/leiste-schublade/bogen.html). Farbe wie der Knopf „Stimme hören“, über dunklen
     Flächen dessen helle Tönung. Der schon gesungene Teil der Notenzeile ist zart hinterlegt (.leiste-grund, Höhe aus site.js). */
  .leiste-grund{position:absolute; top:0; right:14px; width:29px; height:0; border-radius:2px; background:color-mix(in srgb, var(--lilac) 11%, transparent); pointer-events:none}
  .leiste-note{position:absolute; z-index:2; top:0; left:0; right:0; pointer-events:none}   /* über Marken und Schlussstrich: auch auf einem Strich greifbar */
  .leiste-note i{position:absolute; right:12px; width:33px; top:calc(var(--haar, 1px) / -2); height:var(--haar, 1px); background:currentColor; color:var(--l-akzent);
    box-shadow:0 0 0 .5px rgba(var(--paper-rgb),.6); transition:height .2s ease, color .3s ease; pointer-events:auto; cursor:grab}
  /* Die Linie lässt sich ziehen: größere Greiffläche, beim Darüberfahren und Ziehen etwas kräftiger */
  .leiste-note i::before{content:""; position:absolute; inset:-7px -4px}
  .leiste-note i:hover,html.leiste-zieht .leiste-note i{height:2px; top:-1px}
  html.leiste-zieht,html.leiste-zieht *{cursor:grabbing !important; -webkit-user-select:none; user-select:none}
  .leiste-note.auf-dunkel i{color:var(--buehne); box-shadow:none}   /* über Bühne und Video die helle Tönung */
  .leiste-marke{position:absolute; top:0; right:18px; display:flex; align-items:center; gap:.5rem; height:1.6rem; margin-top:-.8rem;
    color:var(--l-text); text-decoration:none; cursor:pointer; white-space:nowrap}
  .leiste-marke::after{content:""; width:21px; height:var(--haar, 1px); background:currentColor; transition:height .2s ease}
  /* Namen in der Schrift des Menüs (User 23.10.2026, vorher kursiv in der Titelschrift), ohne Studierbuchstaben. Die Spalte ist so breit
     wie der längste Name (--namen-b, site.js), die Namen stehen darin linksbündig. Jeder Name sitzt auf der Höhe seines Taktstrichs. */
  .leiste-spalte{min-width:var(--namen-b, auto); translate:0 -.8rem}   /* Unterkante des Namens auf dem Strich */
  .leiste-name{display:inline-block; font-family:var(--f-body); font-weight:500; font-size:.9375rem; line-height:1.3; opacity:.9;
    padding:.15rem .45rem; transition:opacity .3s ease, color .3s ease}
  .leiste-marke.ist-vorbei .leiste-name{opacity:.62}
  /* Wie im Menü oben (User 23.10.2026): Der aktuelle Abschnitt ist unterstrichen, mit einer zarten gepunkteten Linie unter dem Namen
     bis kurz vor seinen Taktstrich (User: durchgezogen „sieht zu dick aus“, „zarte punktierte Linie“). */
  .leiste-marke::before{content:""; position:absolute; left:.45rem; right:calc(21px + 6px); top:calc(50% - var(--haar, 1px) / 2); height:var(--haar, 1px);   /* ab dem ersten Buchstaben, mit Abstand zur Notenzeile (User 23.10.2026) */
    background:repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px 4px); opacity:0; pointer-events:none; transition:opacity .3s ease}
  .leiste-marke.ist-aktiv::before{opacity:1}
  /* Namen überall ohne Schild, nur mit einem weichen Schein in der Gegenfarbe (User 23.10.2026: Variante C aus
     werkzeuge/bilder/namen-dunkel/bogen.html, „für alle Bereiche, nicht nur oben“; Glas wirkte auf Dunkel „zu grell“).
     Auf Hell dunkle Schrift mit hellem Schein, auf Bühne und Video gedämpft helle Schrift mit dunklem Schatten; so auch über Fotos lesbar.
     Aktiv und unter der Maus nur in der Akzentfarbe. */
  .leiste-name{text-shadow:0 0 2px rgba(var(--paper-rgb),.95), 0 0 8px rgba(var(--paper-rgb),.9), 0 0 14px rgba(var(--paper-rgb),.7)}
  .leiste-marke.ist-aktiv{color:var(--l-akzent)}
  .leiste-marke.ist-aktiv .leiste-name{opacity:1; color:var(--l-akzent); animation:leiste-ein .45s ease}
  .leiste-marke:hover .leiste-name{opacity:1; color:var(--l-akzent)}
  .leiste-marke.auf-dunkel .leiste-name{text-shadow:0 1px 3px rgba(0,0,0,.65), 0 0 12px rgba(0,0,0,.6)}
  .leiste-marke.auf-dunkel.ist-aktiv .leiste-name,.leiste-marke.auf-dunkel:hover .leiste-name{color:var(--buehne)}
  /* Beim Darüberfahren: Name in der Akzentfarbe, Taktstrich kräftiger */
  .leiste-marke:hover{color:var(--l-akzent)}
  .leiste-marke:hover::after{height:2px}
  /* Über dunklen Flächen (Bühne, Video) hell */
  .leiste-marke.auf-dunkel{color:rgba(244,241,236,.9)}
  .leiste-marke.auf-dunkel.ist-aktiv,.leiste-marke.auf-dunkel:hover{color:var(--buehne)}
  /* Auf der Bühne nur Pfeil, Linien und Positionslinie; die Namen erscheinen erst darunter (oder beim Darüberfahren) */
  .leiste.auf-buehne .leiste-name{opacity:0}
  .leiste.schluss-dunkel .leiste-schluss{border-color:var(--l-text-hell)}
  /* Beim Darüberfahren alle Namen sichtbar, wie oben ohne Schild */
  .leiste:hover .leiste-name{opacity:1; color:var(--ink)}
  .leiste:hover .leiste-marke.ist-aktiv .leiste-name,.leiste:hover .leiste-marke:hover .leiste-name{color:var(--lilac)}
  .leiste:hover .leiste-marke.auf-dunkel .leiste-name{color:rgba(244,241,236,.85)}
  .leiste:hover .leiste-marke.auf-dunkel.ist-aktiv .leiste-name,.leiste:hover .leiste-marke.auf-dunkel:hover .leiste-name{color:var(--buehne)}
  /* Unter der Maus derselbe Schatten wie oben auf der Bühne, auf jedem Grund (User 23.10.2026: „beim Darüberfahren den Schatten genau so wie oben“) */
  .leiste .leiste-marke:hover .leiste-name{text-shadow:0 1px 5px rgba(0,0,0,.16), 0 0 18px rgba(0,0,0,.14)}   /* auf Hell subtiler und breiter (User: dunkel „sieht dreckig aus“) */
  .leiste .leiste-marke.auf-dunkel:hover .leiste-name{text-shadow:0 1px 3px rgba(0,0,0,.65), 0 0 12px rgba(0,0,0,.6)}
  /* Hineinfahren wirkt sofort (User: „soll sofort auf Darüberfahren reagieren“), nur beim Verlassen blendet es kurz aus (weiter unten) */
  .leiste:hover .leiste-name,.leiste:hover .leiste-marke,.leiste:hover .leiste-system i,.leiste .leiste-marke:hover::after{transition:none}
  /* In Ruhe nur die Pfeile, helle Linien, feine Taktstriche, die Positionslinie und der aktuelle Name (User 20.10.2026: „rechte Seite super überladen“,
     Variante B aus werkzeuge/bilder/notenleiste/bogen.html). Die übrigen Namen erscheinen, wenn die Maus an den Rand kommt,
     und verschwinden kurz verzögert, damit nichts flackert, wenn sie nur vorbeistreift. Muss am Ende stehen: schlägt aktive und vorbeigezogene Marken. */
  .leiste-wort{transition:color .3s ease}
  .leiste-marke,.leiste-system i{transition:opacity .3s ease}
  .leiste:not(:hover) .leiste-marke:not(.ist-aktiv) .leiste-name{opacity:0; transition-delay:.25s}
  .leiste:not(:hover) .leiste-spalte,.leiste:not(:hover) .leiste-name{pointer-events:none}   /* die Namen ragen über den Inhalt: in Ruhe sollen sie dort keine Klicks abfangen */
  .leiste:not(:hover) .leiste-marke:not(.ist-aktiv){opacity:.6}
  .leiste:not(:hover) .leiste-system i{opacity:.55}
}
/* Platz für diesen Namen: Zwischen 1280 und 1439 px rückt der Inhalt der Abschnitte rechts ein und steht mittig im Raum links
   der Leiste (bei 1280 px verdeckte „Hören“ sonst die Dauer der Aufnahmen). Ab 1440 px reicht der Rand von selbst. */
@media (min-width:1280px) and (max-width:1439px) and (hover:hover){
  .sec > .wrap{padding-right:calc(var(--gr) + (1440px - 100vw) * .6)}
}
@keyframes leiste-ein{from{opacity:0; transform:translateX(8px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .leiste *{animation:none !important; transition:none !important} }

/* Abschnitte */
.sec{padding-block:clamp(3.5rem,8vw,6.5rem); border-top:1px solid var(--line)}
.sec-head{display:grid; gap:.8rem; max-width:46rem; margin-bottom:clamp(1.75rem,4vw,2.75rem)}
.sec-head h2{font-size:clamp(2rem,4.2vw,3.1rem); display:flex; align-items:center; gap:.8rem; flex-wrap:wrap}
.sec-head p{color:var(--ink-soft); max-width:60ch}
/* „Text“ im Hinweis unter „Aufnahmen“ ist selbst ein Knopf: Er öffnet Liedtext und Übersetzung unten im Player */
.hinweis-knopf{display:inline; margin:0; padding:0; border:0; background:none; font:inherit; font-weight:600; color:var(--lilac); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; cursor:pointer}
.hinweis-knopf:hover{text-decoration-thickness:2px}

/* Künstlerisches Profil direkt unter der Bühne: der Schwerpunkt groß in der Titelschrift,
   daneben die Identität in der Textschrift, getrennt durch eine feine Linie */
.profil-grid{display:grid; gap:2.5rem}
.profil h2.kicker{font-family:var(--f-body); line-height:1.4; margin-bottom:1.1rem}
.profil-schwerpunkt{display:grid; gap:1rem; font-family:var(--f-display); font-style:italic; font-weight:300; font-size:clamp(1.45rem,2.5vw,2.05rem); line-height:1.38; text-wrap:pretty}
.profil-identitaet{display:grid; gap:1rem; color:var(--ink-soft); line-height:1.7; max-width:48ch; text-wrap:pretty}
@media (min-width:900px){
  .profil-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:4.5rem; align-items:start}
  .profil-teil + .profil-teil{border-left:1px solid var(--line); padding-left:2.5rem; margin-left:-2rem}
}

/* Hören: die Aufnahmen wie ein Programmheft, eine Zeile je Aufnahme mit denselben feinen Linien wie die Termine.
   Die ganze Zeile ist ein Knopf: Antippen spielt, beim laufenden Titel hält es an. Der laufende Titel ist markiert
   wie in der Liste im Player. */
.prog{list-style:none; margin:0; padding:0; border-top:1px solid var(--ink)}
.prog > li{border-bottom:1px solid var(--line); scroll-margin-top:6rem}
/* Kompakt (User 21.10.2026: „die Aufnahmen auf der Seite selbst kann man kompakter machen“): kleinerer Knopf und Rollenname, knappere Zeilen */
.prog-zeile{display:grid; grid-template-columns:2.25rem minmax(0,10rem) minmax(0,1fr) minmax(0,14rem) 4rem; grid-template-areas:"p r s k d"; align-items:center; column-gap:1.4rem;
  width:100%; margin:0; padding:.55rem .75rem; border:0; background:none; text-align:left; cursor:pointer; transition:background-color .2s ease}
.prog-zeile:hover{background:var(--paper-2)}
.prog-play{grid-area:p; width:2.25rem; height:2.25rem; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--lilac); display:grid; place-items:center; transition:background-color .2s ease, border-color .2s ease}
.prog-play svg{width:.875rem; height:.875rem; fill:currentColor}
.prog-zeile:hover .prog-play{border-color:var(--lilac)}
.prog-rolle{grid-area:r; font-family:var(--f-display); font-style:italic; font-weight:300; font-size:1.4rem; line-height:1.1}
.prog-stueck{grid-area:s; display:grid; gap:.1rem; min-width:0}
.prog-arie{font-weight:600; font-size:.9375rem; line-height:1.3}
.prog-werk{font-size:.8125rem; line-height:1.35; color:var(--ink-soft)}
.prog-klavier{grid-area:k; font-size:.875rem; line-height:1.35}
.prog-dauer{grid-area:d; display:flex; justify-content:flex-end; align-items:center; gap:.5rem; font-size:.875rem; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.prog-dauer .eq{color:var(--accent2); visibility:hidden}
.prog-zeile[aria-current="true"] .prog-play{background:var(--lilac); border-color:var(--lilac); color:var(--on-lilac)}
.prog-zeile[aria-current="true"] .prog-rolle{color:var(--lilac)}
.prog-zeile.spielt .prog-dauer .eq{visibility:visible}
/* Worum es geht: nur unter der Aufnahme, die gerade im Player steht; gleitet auf (Raster 0fr → 1fr), eingerückt wie die Rolle */
.prog-szene{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s cubic-bezier(.4,.1,.2,1)}
/* Dasselbe Raster wie die Zeile: „Worum es geht“ unter Rolle und Stück, die Besetzung unter der Begleitung (Spalte k) */
.prog-szene > div{overflow:hidden; min-height:0; display:grid; grid-template-columns:2.25rem minmax(0,10rem) minmax(0,1fr) minmax(0,14rem) 4rem; column-gap:1.4rem; align-items:start; padding-inline:.75rem}
.prog-szene p{grid-column:2 / 4; grid-row:1; padding-bottom:.9rem; max-width:66ch; font-size:.9375rem; line-height:1.6; color:var(--ink-soft)}
.prog-szene p.prog-besetzung{grid-column:4; grid-row:1; max-width:none; font-size:.8125rem; line-height:1.5; white-space:pre-line}   /* kein negativer Abstand: overflow:hidden schnitte die erste Zeile an */
.prog > li.mit-szene .prog-szene{grid-template-rows:1fr}
@media (prefers-reduced-motion: reduce){ .prog-szene{transition:none} }
@media (max-width:760px){
  .prog-szene > div{grid-template-columns:2.25rem minmax(0,1fr); column-gap:.9rem; padding-inline:.2rem}
  .prog-szene p{grid-column:2; grid-row:auto}
  .prog-szene p.prog-besetzung{grid-column:2; grid-row:1; padding-bottom:.6rem}   /* am Handy unter der Begleitung, vor „Worum es geht“ */
  .prog-zeile{grid-template-columns:2.25rem minmax(0,1fr) auto; grid-template-areas:"p r d" "p s s" "p k k"; column-gap:.9rem; row-gap:.1rem; align-items:start; padding:.7rem .2rem}
  .prog-rolle{font-size:1.25rem}
  .prog-dauer{padding-top:.25rem}
}
.play-dot{position:relative; z-index:1; width:2.75rem; height:2.75rem; border-radius:50%; background:var(--surface); display:grid; place-items:center; box-shadow:0 6px 16px rgba(20,14,28,.3); flex:none}
.play-dot svg{width:1.05rem; height:1.05rem; fill:var(--lilac)}
.eq{display:inline-flex; gap:2px; height:.9rem; align-items:flex-end}
.eq i{width:3px; height:35%; background:currentColor; border-radius:1px}
.is-on .eq i{animation:eq .9s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:-.3s}
.eq i:nth-child(3){animation-delay:-.6s}
@keyframes eq{from{height:20%}to{height:100%}}
/* Begleitung am Klavier, überall gleich hervorgehoben (Liste der Aufnahmen, Liste und Player unten): „KLAVIER“ klein in der Akzentfarbe, der Name kräftig */
.klavier-k{font-size:.625rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent2); margin-right:.15em}
.prog-klavier b,.pl-piano b,.p-piano b{font-weight:600; color:var(--ink)}
.pill-btn{justify-self:start; display:inline-flex; align-items:center; gap:.35rem; font-size:.8125rem; font-weight:600; color:var(--lilac); background:none; border:1px solid var(--line); border-radius:999px; padding:.3rem .8rem; cursor:pointer; margin-top:.25rem; white-space:nowrap}
.pill-btn svg{width:.95rem; height:.95rem; fill:currentColor}
.pill-btn[aria-pressed="true"]{background:var(--lilac-soft); border-color:var(--lilac-soft)}

.lyrics-role{font-weight:600; font-size:.9375rem}
.ly-scroll{position:relative; max-height:26rem; overflow-y:auto; overscroll-behavior:contain; padding-right:.4rem; margin-right:-.4rem}
.ly-list{display:grid; gap:.1rem}
.ly-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.15rem 2.5rem; padding:.3rem .65rem; border-radius:6px; transition:opacity .35s ease, background-color .35s ease}
.ly-list.single .ly-row{grid-template-columns:minmax(0,1fr)}
.ly-o{font-family:var(--f-display); font-style:italic; font-size:1.2rem; line-height:1.45}
.ly-t{color:var(--ink-soft); font-size:.9375rem; line-height:1.55; align-self:center}
.ly-gap{height:.9rem}
.ly-list.is-synced .ly-row{opacity:.55}
.ly-list.is-synced .ly-row.is-past{opacity:.35}
.ly-list.is-synced .ly-row.is-active{opacity:1; background:var(--lilac-soft); box-shadow:inset 3px 0 0 var(--accent2)}
.ly-row.is-active .ly-o{color:var(--lilac)}
.ly-list.can-seek .ly-row,.ly-list.tapping .ly-row{cursor:pointer}
.ly-list.can-seek .ly-row:hover,.ly-list.tapping .ly-row:hover{background:var(--paper-2)}
.ly-note{font-size:.8125rem; color:var(--ink-soft)}
@media (max-width:640px){.ly-row{grid-template-columns:minmax(0,1fr); gap:0}.ly-t{font-size:.875rem}}

/* Termine als Agenda (User 21.10.2026, Variante B aus werkzeuge/bilder/termine/bogen.html): nach Monaten geordnet, der Tag groß,
   Stück in der Grundschrift, Mitwirkende und Saal in einer Zeile; „Tickets ↗“ als Textlink, „In Kalender“ als Kalenderzeichen. */
.nur-leser{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.dates{display:grid}
.monat{font-family:var(--f-display); font-style:italic; font-weight:400; font-size:1.2rem; line-height:1.2; padding:1.1rem 0 .35rem; border-bottom:1px solid var(--ink)}
.monat:first-child{padding-top:0}
.date-row{display:grid; grid-template-columns:2.6rem minmax(0,1fr) auto; gap:0 1.25rem; align-items:center; padding:.65rem .5rem; border-bottom:1px solid var(--line)}
.date-row time{display:grid; justify-items:center; line-height:1.2}
.date-row time b{font-family:var(--f-display); font-size:1.5rem; font-weight:400; line-height:1; font-variant-numeric:lining-nums}
.date-row time small{font-size:.625rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.date-work{font-size:.9375rem; font-weight:600; line-height:1.3}
.date-meta{font-size:.8125rem; line-height:1.35; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.date-act{display:flex; gap:.15rem; align-items:center}
.date-act a,.date-act button{display:inline-flex; align-items:center; font:inherit; font-size:.8125rem; font-weight:600; color:var(--lilac); background:none; border:0; border-radius:999px; padding:.3rem .55rem; text-decoration:none; cursor:pointer; white-space:nowrap}
.date-act a:hover,.date-act button:hover{background:var(--lilac-soft)}
.date-act button{padding:.3rem .4rem}
.date-act svg{width:1.05rem; height:1.05rem; fill:currentColor}
.date-act .muted{font-size:.8125rem; color:var(--ink-soft); padding:.3rem .55rem; white-space:nowrap}
.dates-empty{padding-block:1.4rem; color:var(--ink-soft); border-bottom:1px solid var(--line)}
@media (max-width:640px){
  .date-row{grid-template-columns:2.6rem minmax(0,1fr); align-items:start}
  .date-meta{white-space:normal}
  .date-act{grid-column:2; margin-left:-.55rem}
}

/* Dunkles Band für Bildmaterial (in allen Farbwelten); Akzent wird dort zur helleren Tönung */
.sec-dark{background:#141316; color:#F1EEE7; border-top-color:transparent;
  --ink:#F1EEE7; --ink-soft:#B3ADA3; --line:rgba(241,238,231,.14); --paper-2:#1F1D21; --lilac:var(--accent2)}
.sec-dark .more{color:var(--ink)}
.sec-dark + .sec{border-top-color:transparent}
/* Hell und zart getönt im Wechsel (User 21.10.2026, Variante A aus werkzeuge/bilder/video-hintergrund/bogen.html): Aufnahmen,
   Fotos und Kontakt auf dem Papierton eine Stufe dunkler, Video bleibt das einzige dunkle Band. Der Farbwechsel trennt die
   Abschnitte, die feine Linie entfällt dort. Flächen, die sonst den Papierton nutzen (Hover, Platzhalter), werden eine Spur dunkler. */
.sec-ton{background:var(--paper-2); border-top-color:transparent}
.sec-ton + .sec{border-top-color:transparent}
.sec-ton .prog-zeile:hover{background:color-mix(in srgb, var(--ink) 5%, var(--paper-2))}
.sec-ton .g-bild{background:color-mix(in srgb, var(--ink) 6%, var(--paper-2))}

/* Video */
.videos{display:grid; gap:1.25rem}
@media (min-width:820px){.videos{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:1.25rem 2rem}.video.is-feature{grid-row:1 / span var(--rest,3)}}
.video{background:none; border:0; padding:0; text-align:left; cursor:pointer; display:grid; gap:.65rem; align-content:start}
.video:not(.is-feature){grid-template-columns:minmax(0,9.5rem) minmax(0,1fr); gap:.9rem; align-items:center}
.video-thumb{position:relative; aspect-ratio:16/9; border-radius:6px; overflow:hidden; background:var(--paper-2); display:grid; place-items:center}
.video-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.video:hover .video-thumb img{transform:scale(1.03)}
.video:not(.is-feature) .play-dot{width:2rem; height:2rem}
.video:not(.is-feature) .play-dot svg{width:.75rem; height:.75rem}
.video-text{display:grid; gap:.2rem}
.video-title{font-weight:600; font-size:.9375rem; line-height:1.35}
.video.is-feature .video-title{font-family:var(--f-display); font-weight:400; font-size:1.55rem; line-height:1.25}
.video-meta{font-size:.8125rem; color:var(--ink-soft)}
.more{display:inline-block; margin-top:1.6rem; font-weight:600}
/* Ältere Videos unter dem Klapp-Knopf: kleine Kacheln nebeneinander, am Handy Zeilen wie oben */
.videos-mehr{display:grid; grid-template-columns:repeat(auto-fill,minmax(14rem,1fr)); gap:1.6rem 1.25rem; padding-top:2rem}
.videos-mehr .video{grid-template-columns:minmax(0,1fr); gap:.6rem; align-items:start}
@media (max-width:640px){
  .videos-mehr{grid-template-columns:minmax(0,1fr); gap:1.25rem; padding-top:1.25rem}
  .videos-mehr .video{grid-template-columns:minmax(0,9.5rem) minmax(0,1fr); gap:.9rem; align-items:center}
}

/* Große Bereiche einklappen (site.js: klappe). Eingeklappt steht nur der Anfang da, Fließtext läuft unten weich aus.
   Darunter ohne Rahmen der Text mit einem », das nach unten zeigt; aufgeklappt zeigt es nach oben (User 19.10.2026, Variante B).
   Beim Darüberfahren wird der Text unterstrichen und das » rückt ein Stück in seine Richtung. */
.klappe{overflow:hidden; transition:height .55s cubic-bezier(.4,.1,.2,1)}
.klappe.zu.auslaufen{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 5.5em),transparent); mask-image:linear-gradient(180deg,#000 calc(100% - 5.5em),transparent)}
.klappe-fuss{margin-top:1rem}
.klappe-knopf{display:inline-flex; align-items:center; gap:.45rem; margin:0; padding:.35rem 0; border:0; background:none; color:var(--lilac);
  font-size:.9375rem; font-weight:600; line-height:1.3; white-space:nowrap; cursor:pointer}
.klappe-knopf span{padding-bottom:.06em; background:linear-gradient(currentColor, currentColor) 0 100%/0 1px no-repeat; transition:background-size .3s ease}
.klappe-knopf:hover span,.klappe-knopf:focus-visible span{background-size:100% 1px}
.klappe-knopf::after{content:"»"; display:inline-block; font-size:1.25em; line-height:1; transform:rotate(90deg); transition:transform .3s ease}
.klappe-knopf:hover::after{transform:rotate(90deg) translateX(2px)}
.klappe-knopf[aria-expanded="true"]::after{transform:rotate(-90deg)}
.klappe-knopf[aria-expanded="true"]:hover::after{transform:rotate(-90deg) translateX(2px)}
.sec-dark .klappe-knopf{color:var(--buehne)}   /* auf dem dunklen Band der helle Bühnenakzent */
@media (prefers-reduced-motion: reduce){ .klappe,.klappe-knopf::after,.klappe-knopf span{transition:none} }

/* Biografie: Kopf wie bei den anderen Abschnitten, ohne Foto (User 21.10.2026: Seite zu voll).
   Der Titel aus Pult steht darunter als kursive Unterzeile. */
.sec-head .about-unter{font-family:var(--f-display); font-style:italic; font-weight:300; font-size:clamp(1.5rem,2.8vw,2.3rem); line-height:1.15; color:var(--ink); max-width:22ch}
.about-body{display:grid; gap:2.5rem}
@media (min-width:900px){.about-body{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:4.5rem}}
.about-text{display:grid; gap:1.1rem; max-width:62ch}
.facts{display:grid; border-top:1px solid var(--ink); align-self:start}
.facts div{display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:1rem; padding-block:.85rem; border-bottom:1px solid var(--line)}
.facts dt{font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); padding-top:.25rem}
.facts dd{margin:0; font-size:.9375rem; line-height:1.55}
@media (max-width:480px){.facts div{grid-template-columns:1fr; gap:.15rem}}
.rep{margin-top:3rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.rep summary{cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; padding:1.1rem .75rem; font-family:var(--f-display); font-size:1.6rem; transition:background-color .2s ease, color .2s ease}
.rep summary:hover,.rep summary:focus-visible{background:var(--paper-2); color:var(--lilac)}   /* klickbare Zeile (User 21.10.2026) */
.rep summary::-webkit-details-marker{display:none}
.rep summary::after{content:"+"; font-family:var(--f-body); font-weight:300; font-size:1.8rem; line-height:1; color:var(--lilac)}
.rep[open] summary::after{content:"–"}
.rep-grid{display:grid; gap:2rem; padding-bottom:2rem}
@media (min-width:820px){.rep-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.5rem}}
.rep-grid h3{font-family:var(--f-body); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); margin-bottom:.7rem}
.rep-grid h4{font-size:.8125rem; font-weight:700; color:var(--lilac); margin:1.1rem 0 .4rem}
.rep-list{list-style:none; padding:0; display:grid; gap:.35rem; font-size:.9375rem; line-height:1.45}
.rep-list b{font-weight:600}
.rep-list span{color:var(--ink-soft)}

/* Termine mit Karte: links groß der Umriss der Niederlande (assets/karte/niederlande.svg, Land im zarten Akzentton, Wasser
   frei), rechts die Agenda. Kommende Termine sind kräftige Punkte, vergangene der letzten drei Jahre blasse. Die Namen sind
   immer gleich groß (site.js rechnet sie auf die Kartengröße um); wo sie sich drängen, steht der Name nur im Fenster.
   Zeigt man auf einen Punkt, öffnet sich sofort ein Fenster mit allen Terminen dort; Termin und Punkt leuchten gemeinsam auf.
   Am Handy und Tablet keine Karte (User 21.10.2026): die Orte stehen in der Liste. */
.termine-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); column-gap:3.5rem; row-gap:2rem; align-items:start}
.termine-grid > .klappe-teil,.termine-grid > .dates{grid-column:2}
.termine-grid.ohne-karte{grid-template-columns:minmax(0,1fr)}   /* Karte in Pult ausgeblendet oder kein Ort bekannt */
.termine-grid.ohne-karte > .klappe-teil,.termine-grid.ohne-karte > .dates{grid-column:1}
.termine-karte{grid-column:1; grid-row:1 / span 2; position:relative; display:grid; gap:.6rem; justify-items:center}
.karte{display:block; width:100%; max-width:36rem; height:auto; overflow:visible}
.karte .land-rand{fill:none; stroke:var(--ink-soft); stroke-width:1.6; stroke-linejoin:round; opacity:.55}   /* zuerst der Rand, darüber die Füllung: innere Grenzen verschwinden */
.karte .land{fill:var(--lilac-soft); stroke:var(--lilac-soft); stroke-width:.6}
.karte .ort{cursor:pointer}
.karte .punkt{fill:var(--lilac); stroke:rgb(var(--paper-rgb)); stroke-width:1.5; transform-box:fill-box; transform-origin:center; transition:transform .2s ease}
.karte .ring{fill:none; stroke:var(--lilac); stroke-width:1; opacity:0; transition:opacity .2s ease}
.karte text{font-family:var(--f-body); font-weight:700; letter-spacing:.08em; text-transform:uppercase; fill:var(--ink-soft); pointer-events:none}
.karte .ort.war .punkt{fill:var(--ink-soft); opacity:.45}   /* hier sang sie schon */
.karte .ort.war text,.karte .ort.ohne-name text{display:none}
.karte .ort.aktiv .punkt{transform:scale(1.35); opacity:1}
.karte .ort.aktiv .ring{opacity:.45}
.karte .ort.aktiv text{fill:var(--lilac)}
.karte-legende{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.3rem .5rem; font-size:.75rem; color:var(--ink-soft)}
.karte-legende .kl{width:.55rem; height:.55rem; border-radius:50%; background:var(--lilac)}
.karte-legende .kl-war{margin-left:.6rem; background:var(--ink-soft); opacity:.45}
.karte-legende.ohne-war .kl-war,.karte-legende.ohne-war .kl-war + span{display:none}
.karte-quelle{font-size:.6875rem; color:var(--ink-soft); opacity:.8}
.karte-fenster{position:absolute; z-index:6; width:16.5rem; padding:.8rem 1rem .85rem; background:rgb(var(--paper-rgb)); border-radius:10px;
  box-shadow:0 0 0 1px var(--line), 0 22px 44px -22px rgba(20,20,45,.55); font-size:.8125rem; line-height:1.4; text-align:left}
.karte-fenster::before{content:""; position:absolute; top:var(--pfeil, 50%); width:10px; height:10px; margin-top:-5px; background:inherit; transform:rotate(45deg)}
.karte-fenster.links::before{right:-5px; box-shadow:1px -1px 0 var(--line)}
.karte-fenster.rechts::before{left:-5px; box-shadow:-1px 1px 0 var(--line)}
.kf-ort{font-size:.6875rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--lilac); margin-bottom:.35rem}
.kf-termin + .kf-termin{border-top:1px solid var(--line); margin-top:.55rem; padding-top:.55rem}
.kf-termin time{display:block; font-weight:700; font-variant-numeric:tabular-nums}
.kf-termin b{display:block; font-family:var(--f-display); font-weight:400; font-size:1.06rem; line-height:1.25; margin-block:.1rem}
.kf-termin span{display:block; color:var(--ink-soft)}
.kf-termin a{display:inline-block; margin-top:.3rem; font-weight:600; color:var(--lilac); text-decoration:none}
.kf-termin a:hover{text-decoration:underline}
.kf-termin em{display:block; margin-top:.3rem; font-style:normal; color:var(--ink-soft)}
.date-row{transition:background-color .2s ease}
.date-row.aktiv{background:var(--lilac-soft); box-shadow:inset 3px 0 0 var(--accent2)}
.date-row[data-stadt]{cursor:pointer}   /* Klick öffnet das Fenster an der Karte */
@media (max-width:900px){ .date-row[data-stadt]{cursor:auto} }
@media (max-width:900px){
  .termine-grid{grid-template-columns:minmax(0,1fr)}
  .termine-grid > .klappe-teil,.termine-grid > .dates{grid-column:1}
  .termine-karte{display:none}
}
@media (prefers-reduced-motion: reduce){ .karte .punkt,.karte .ring{transition:none} }

/* Presse */
.press{display:grid; gap:2rem; align-items:center}
@media (min-width:820px){.press{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:4rem}}
.press-photo{aspect-ratio:4/3; border-radius:4px; overflow:hidden; background:var(--paper-2)}
.press-photo img{width:100%; height:100%; object-fit:cover; object-position:40% 45%}
.cap{font-size:.8125rem; color:var(--ink-soft); padding-top:.55rem}
.sec-title{font-size:clamp(2rem,4.2vw,3.1rem); display:flex; align-items:center; gap:.8rem; flex-wrap:wrap}
.quote{font-family:var(--f-display); font-style:italic; font-weight:300; font-size:clamp(1.6rem,3.4vw,2.4rem); line-height:1.28; margin-top:1rem}
.quote-src{margin-top:1rem; font-size:.875rem; color:var(--ink-soft)}
.quote-src a{color:inherit}
.quotes-more{list-style:none; padding:0; margin-top:1.8rem; display:grid; gap:1.2rem; border-top:1px solid var(--line); padding-top:1.4rem}
.quotes-more blockquote{margin:0; font-family:var(--f-display); font-style:italic; font-size:1.15rem; line-height:1.4}
.quotes-more .quote-src{margin-top:.35rem}
.press-kit{margin-top:2rem; padding-top:1.25rem; border-top:1px solid var(--line); font-size:.9375rem; color:var(--ink-soft)}

/* Kontakt */
.contact{display:grid; gap:2.5rem; align-items:center}
/* Foto randlos mit Verlauf wie die Bühne (User 26.10.2026, Bogen kontakt Variante A; vorher „einfach öde“):
   ab 820 px füllt es die rechte Hälfte des Abschnitts bis an den Rand und läuft zum Text hin aus; sie schaut nach links, zum Text.
   Am Handy steht es in voller Breite über dem Text und läuft nach unten aus. Bild: kontakt-fluegel.jpg (statt des roten Kleids). */
.contact-photo{overflow:hidden}
.contact-photo img{width:100%; height:100%; object-fit:cover; object-position:40% 25%}
@media (min-width:820px){
  #kontakt{position:relative; overflow:hidden}
  .contact{grid-template-columns:minmax(0,1fr); min-height:34rem}
  .contact > div:not(.contact-photo){max-width:min(34rem, calc(48vw - var(--gl) - 1rem)); position:relative; z-index:1}   /* endet immer vor dem Foto (52 %) */
  .contact-photo{position:absolute; top:0; bottom:0; right:0; width:52%;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 38%); mask-image:linear-gradient(90deg, transparent 0%, #000 38%)}
}
@media (max-width:819px){
  .contact-photo{margin-inline:calc(-1 * var(--gl)) calc(-1 * var(--gr)); aspect-ratio:4/4.2;
    -webkit-mask-image:linear-gradient(180deg, #000 70%, transparent 100%); mask-image:linear-gradient(180deg, #000 70%, transparent 100%)}
}
.mail{font-family:var(--f-display); font-size:clamp(1.55rem,3.4vw,2.4rem); color:var(--ink); text-decoration:none; overflow-wrap:anywhere; display:inline-block; margin-top:.6rem}
.mail:hover{color:var(--lilac)}
.contact-p{display:grid; gap:.6rem; color:var(--ink-soft); margin-top:.8rem; max-width:44ch}
/* Agenturen unter dem Kontakttext (Pult › Kontakt › Agenturen): Satz, darunter Name und E-Mail je Agentur nebeneinander */
.agenturen{margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--line); max-width:44ch; color:var(--ink-soft)}
.agenturen ul{list-style:none; margin:.8rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:1rem 2.5rem}
.agenturen li{display:grid; gap:.15rem}
.agenturen b{font-weight:600; color:var(--ink)}
.agenturen a{color:var(--lilac); text-decoration:none}
.agenturen a:hover{text-decoration:underline}

/* Fuß */
.site-footer{border-top:1px solid var(--line); padding-block:2.5rem 3rem; font-size:.875rem; color:var(--ink-soft)}
.foot{display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between}
.foot .logo{font-size:1.15rem; margin:0 auto 0 0}
.foot-links{display:flex; flex-wrap:wrap; gap:.4rem 1.2rem}
/* Eigene Zeile unter dem Fuß (User 22.10.2026): wer die Seite gemacht hat, und der Weg in die Verwaltung (Pult) */
.foot-credit{flex-basis:100%; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem 1.2rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.8125rem}
.foot-credit a{color:inherit; text-decoration:none}
.foot-credit a:hover,.foot-credit a:focus-visible{color:var(--lilac); text-decoration:underline}

/* Vorübergehend: Farbwelt zum Ausprobieren. Lasche am linken Rand; ein Klick zieht die Auswahl heraus,
   die Lasche hängt dann rechts daran. Die Lasche trägt den Akzent der gewählten Farbwelt. */
.farbwahl{position:fixed; left:env(safe-area-inset-left, 0px); top:50%; z-index:35; display:flex; align-items:center; transform:translateY(-50%)}
.farbwahl-lasche{display:block; margin:0; padding:.95rem .45rem; border:0; border-radius:0 8px 8px 0; background:var(--lilac); color:var(--on-lilac); cursor:pointer;
  font-size:.6875rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; line-height:1;
  box-shadow:0 0 0 1px rgba(255,255,255,.28), 0 8px 20px -10px rgba(0,0,0,.5)}
.farbwahl-lasche span{display:block; writing-mode:vertical-rl; transform:rotate(180deg)}   /* von unten nach oben lesen, wie ein Buchrücken */
.farbwahl-lasche:hover,.farbwahl-lasche[aria-expanded="true"]{padding-right:.6rem}
.farbwahl-feld{display:grid; gap:.1rem; padding:.9rem .7rem .8rem; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-left:0;
  border-radius:0 10px 10px 0; box-shadow:0 18px 40px -16px rgba(0,0,0,.45); animation:farbwahl-ein .25s ease}
.farbwahl-titel{margin:0 .45rem .45rem}
.farbwahl-feld{max-height:calc(100svh - var(--kopf-h) - 2rem); overflow-y:auto}   /* mit den Bühnen ist die Liste lang */
.farbwahl-gruppe{display:grid; gap:.1rem}
.farbwahl-gruppe + .farbwahl-gruppe{margin-top:.6rem; padding-top:.75rem; border-top:1px solid var(--line)}
.farbe{display:flex; align-items:center; gap:.7rem; width:100%; margin:0; padding:.4rem .45rem; border:0; border-radius:8px; background:none; cursor:pointer;
  text-align:left; font-size:.875rem; line-height:1.3; white-space:nowrap}
.farbe:hover{background:var(--paper-2)}
.farbe i{flex:none; width:1.6rem; height:1.6rem; border-radius:50%; border:1px solid var(--line);
  background:conic-gradient(from 270deg, var(--d2) 0 30%, var(--d3) 30% 50%, var(--d1) 50% 100%)}
.farbe[aria-pressed="true"]{font-weight:700; background:var(--lilac-soft)}
.farbe[aria-pressed="true"] i{outline:2px solid var(--ink); outline-offset:2px}
.farbe[data-pal="tinte"]{--d1:#F2F1EE; --d2:#2E4A7D; --d3:#101014}
.farbe[data-pal="kupfer"]{--d1:#F2F3F5; --d2:#9C5F2E; --d3:#1F2024}
.farbe[data-pal="frost"]{--d1:#EEF1F3; --d2:#4D6B86; --d3:#141A21}
.farbe[data-pal="rose"]{--d1:#1A1B1E; --d2:#D8AAB6; --d3:#EEEDF0}
.farbe[data-pal="graphit"]{--d1:#1B1A18; --d2:#D9C0A3; --d3:#F1EEE7}
/* Bühne: kleines Zeichen der Variante auf dem Bühnengrund (Lage des Knopfs) */
.buehne-knopf i{position:relative; display:grid; place-items:end end; padding:.3rem; box-sizing:border-box; border-radius:6px; background:rgb(var(--tiefe-rgb)); color:var(--buehne)}
.buehne-knopf[data-buehne="j6"] i{place-items:end start}
.buehne-knopf i::after{content:""; width:.8rem; height:.38rem; border-radius:99px; box-shadow:inset 0 0 0 1px currentColor}
/* Soprano: wo das Wort steht */
.soprano-knopf i{position:relative; border-radius:6px; background:rgb(var(--tiefe-rgb)); color:var(--buehne)}
.soprano-knopf i::after{content:""; position:absolute; background:currentColor}
.soprano-knopf[data-soprano="bogen"] i::after{left:22%; right:22%; top:34%; height:.3rem; background:none; border-top:1.5px solid currentColor; border-radius:50% 50% 0 0}
.soprano-knopf[data-soprano="neben"] i::after{left:22%; top:25%; width:1.5px; height:30%}
.soprano-knopf[data-soprano="linie"] i::after{left:22%; top:25%; width:1px; height:58%}
.soprano-knopf[data-soprano="unten"] i::after{left:22%; bottom:17%; width:1.5px; height:30%}
.soprano-knopf[data-soprano="tishina"] i::after{left:52%; top:50%; width:28%; height:1px}
@keyframes farbwahl-ein{from{opacity:0; transform:translateX(-12px)} to{opacity:1; transform:none}}
@media (max-width:760px){ .farbwahl-lasche{padding:.85rem .32rem} }   /* schmal genug für den Seitenrand von 20 px */
@media (max-width:760px){ .farbwahl{top:calc(var(--kopf-h) + env(safe-area-inset-top, 0px) + 1rem); transform:none} }   /* am Handy oben: in der Mitte lag sie über „Soprano“ und dem Termin */
@media (prefers-reduced-motion: reduce){ .farbwahl-feld{animation:none} }

/* Player */
.player{position:fixed; left:0; right:0; bottom:0; z-index:45; background:var(--paper); color:var(--ink); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom, 0px);
  transition:background-color .35s ease, color .35s ease, border-color .35s ease}   /* Grund wie die Seite, nur die Linie trennt (User 23.10.2026: weiß „hebt sich stark hervor“) */
/* Über Bühne und Video wird der Player dunkel wie die Fläche dahinter (User 23.10.2026), darunter wieder hell. site.js setzt
   .ueber-buehne bzw. .ueber-band an Player und Schublade, je nachdem, was hinter der Mitte des Players liegt. Solange die Schublade
   offen ist, bleibt die Farbe stehen (User: „offen bleibt er immer bei der aktuellen Farbe“). */
.ueber-buehne,.ueber-band{--paper:rgb(var(--tiefe-rgb)); --ink:#F1EEE7; --ink-soft:#B3ADA3; --line:rgba(241,238,231,.12); --paper-2:rgba(241,238,231,.08); --surface:#1F1D21;
  --lilac:var(--buehne); --lilac-soft:rgba(241,238,231,.1); --accent2:var(--buehne); --on-lilac:#101014; --shade:rgba(0,0,0,.5); color:var(--ink)}
.ueber-band{--paper:#141316}   /* wie .sec-dark */
@media (hover:none){ .player{touch-action:none} }   /* am Handy: nach oben wischen öffnet die Schublade, nach unten schließt sie (site.js) */
.player .wrap{display:grid; grid-template-columns:auto minmax(0,17rem) minmax(0,1fr) auto auto; grid-template-areas:"pp meta wave time txt"; align-items:center; gap:.45rem 1.1rem; min-height:var(--player-h); padding-block:.5rem}
.pp{grid-area:pp; width:2.9rem; height:2.9rem; border-radius:50%; border:0; background:var(--lilac); color:var(--on-lilac); display:grid; place-items:center; cursor:pointer}
.pp svg{width:1.1rem; height:1.1rem; fill:currentColor}
.p-meta{grid-area:meta; display:grid; min-width:0; margin:0 0 0 -.4rem; padding:.2rem .4rem; border:0; border-radius:8px; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; transition:background-color .15s ease}
.p-meta:hover{background:var(--paper-2)}
/* Titel und Rolle klappen die Schublade auf und zu; das kleine » zeigt hinauf (zu) bzw. hinunter (offen) */
.p-state::after{content:"»"; display:inline-block; margin-left:.1rem; font-size:1.15em; letter-spacing:0; line-height:1; color:var(--accent2); transform:rotate(-90deg); transition:transform .3s ease}
.p-meta[aria-expanded="true"] .p-state::after{transform:rotate(90deg)}
.p-state{display:flex; align-items:center; gap:.45rem; font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--lilac); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.p-state .eq{color:var(--accent2); flex:none}
.p-title,.p-sub{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.p-title{font-weight:600; font-size:.875rem; line-height:1.35}
.p-sub{font-size:.75rem; color:var(--ink-soft); line-height:1.35}
/* Die Welle darf schmaler werden als ihre 64 Balken: dann dünnere Balken statt Überlauf unter die Zeit */
.wave{grid-area:wave; display:flex; align-items:center; gap:2px; height:2.4rem; min-width:0; overflow:hidden; cursor:pointer; border-radius:4px}
.wave span{flex:1; min-width:2px; background:var(--line); background:color-mix(in srgb, var(--ink) 17%, transparent); border-radius:1px}   /* auf Papiergrund kräftiger als --line */
@media (max-width:1199px){ .wave{gap:1px} .wave span{min-width:1px} }
.wave span.vor{background:var(--accent2); opacity:.45}   /* Vorschau bis zur Maus */
.wave span.on{background:var(--lilac); opacity:1}
/* Ziehen spult: waagrecht gehört die Geste der Welle, senkrecht scrollt die Seite weiter */
.wave{touch-action:pan-y; -webkit-user-select:none; user-select:none}
.wave.zieht{cursor:grabbing}
/* Zeit über der Maus bzw. dem Finger (site.js setzt left/top relativ zum Player) */
.wave-zeit{position:absolute; z-index:2; padding:.2rem .45rem; border-radius:6px; background:var(--ink); color:var(--paper); font-size:.75rem; font-weight:600; line-height:1.2;
  font-variant-numeric:tabular-nums; white-space:nowrap; transform:translate(-50%, calc(-100% - 6px)); pointer-events:none; box-shadow:0 4px 12px -4px rgba(0,0,0,.35)}
.p-time{grid-area:time; font-size:.75rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap}
.p-txt{grid-area:txt; margin:0}
.p-list{grid-area:list; margin:0}
.txt-breit{display:none}   /* „Text“ bzw. ab 1200 px „Aufnahmen & Text“: im Player und im Hinweis unter „Aufnahmen“ */
/* Unter 1200 px zwei Knöpfe („Aufnahmen“, „Text“), ab 1200 px einer („Aufnahmen & Text“) */
.player .wrap{grid-template-columns:auto minmax(0,13rem) minmax(8rem,1fr) auto auto auto auto; grid-template-areas:"pp meta wave time vol list txt"}
@media (min-width:1200px){
  .player .wrap{grid-template-columns:auto minmax(0,17rem) minmax(0,1fr) auto auto auto; grid-template-areas:"pp meta wave time vol txt"}
  .p-list{display:none}
  .txt-schmal{display:none}
  .txt-breit{display:inline}
}
/* Schmal zwei unabhängige Zeilen (Flex statt Raster, sonst teilen sich beide Zeilen die Spaltenbreiten):
   oben Abspielen, Titel, Knöpfe; unten Welle, Zeit, Lautstärke. ::after erzwingt den Zeilenumbruch. */
@media (max-width:760px){
  .player .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:0 .8rem; padding-block:.55rem .65rem}
  .player .wrap::after{content:""; order:5; flex-basis:100%; height:0}
  .pp{order:1; flex:none} .p-meta{order:2; flex:1 1 0; min-width:0} .p-list{order:3; flex:none} .p-txt{order:4; flex:none}
  .wave{order:6; flex:1 1 0} .p-time{order:7} .vol{order:8}
  .wave,.p-time,.vol{margin-top:.45rem}
}
/* Sehr schmal (360 px): „Aufnahmen“ nur als Symbol, sonst wurden Status und Titel abgeschnitten; der Text bleibt für Bildschirmleser */
@media (max-width:380px){
  .player .wrap{gap:0 .6rem}
  .p-list{padding:.3rem .55rem}
  .p-list span{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}   /* wie .nur-leser */
}
/* Lautstärke: Im Player steht nur der Knopf (Ton aus/an). Der Regler klappt senkrecht darüber auf, beim Darüberfahren
   oder mit der Tastatur. Nur mit Maus; auf Touch-Geräten regeln die Tasten am Gerät (iPhone und iPad lassen Websites
   die Lautstärke ohnehin nicht setzen). Der Regler ist ein gedrehter waagrechter, das geht in allen Browsern. */
.vol{grid-area:vol; position:relative; display:flex; align-items:center}
.vol-btn{width:2.2rem; height:2.2rem; display:grid; place-items:center; flex:none; margin:0; padding:0; border:0; border-radius:50%; background:none; color:var(--ink-soft); cursor:pointer}
.vol-btn:hover,.vol-btn[aria-pressed="true"],.vol:hover .vol-btn{color:var(--ink); background:var(--paper-2)}
.vol-btn svg{width:1.25rem; height:1.25rem; fill:currentColor}
.vol-pop{position:absolute; z-index:3; left:50%; bottom:100%; width:2.75rem; height:8.5rem; margin-left:-1.375rem; padding-bottom:.5rem;
  visibility:hidden; opacity:0; transform:translateY(4px); transition:opacity .15s ease, transform .15s ease, visibility 0s linear .15s}
.vol-pop::before{content:""; position:absolute; inset:0 0 .5rem; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 28px -12px var(--shade)}   /* der freie Streifen darunter hält das Darüberfahren zum Knopf */
.vol:hover .vol-pop,.vol:focus-within .vol-pop{visibility:visible; opacity:1; transform:none; transition-delay:0s}
.vol-regler{position:absolute; left:50%; top:calc(50% - .25rem); width:6.25rem; margin:0; transform:translate(-50%, -50%) rotate(-90deg); accent-color:var(--lilac); cursor:pointer}
@media (hover:none){ .vol{display:none} }

/* Schublade über dem Player: Aufnahmen und Text & Übersetzung.
   Ab 1200 px Liste links und Text rechts, beides zugleich; die Spalten rollen einzeln.
   Darunter zwei Reiter, es ist immer eins von beiden zu sehen (data-ansicht am #drawer, site.js). */
.drawer{position:fixed; left:0; right:0; bottom:calc(var(--player-h) + env(safe-area-inset-bottom, 0px)); z-index:44; background:var(--paper); color:var(--ink); border-top:1px solid var(--line); box-shadow:0 -24px 40px -32px var(--shade); max-height:55vh;
  display:flex; flex-direction:column}
/* Die Schublade gleitet langsam hinter dem Player hervor und zügiger wieder zurück (.offen setzt site.js).
   Die Dauer beim Schließen steht auch in site.js (ZU_MS): danach bekommt die Schublade wieder hidden. */
.drawer{transform:translateY(100%); transition:transform .32s cubic-bezier(.4,0,.9,.6)}
.drawer.offen{transform:none; transition:transform .6s cubic-bezier(.4,.1,.2,1)}
@media (prefers-reduced-motion: reduce){ .drawer,.drawer.offen{transition:none} }
/* Der Inhalt rollt in .drawer-innen, damit die Lasche über die Kante der Schublade ragen kann */
.drawer-innen{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain}
/* Griff zum Ziehen (User 23.10.2026, Variante B aus werkzeuge/bilder/leiste-schublade/bogen.html, statt einer Lasche über der Kante):
   immer zu sehen und in der Akzentfarbe (User: „immer zu sehen, im geschlossenen und geöffneten Zustand … farblich hervorgehoben“).
   Geschlossen sitzt er oben mittig im Player: Hochziehen öffnet die Schublade in der gezogenen Höhe, Klick öffnet.
   Offen sitzt er an der oberen Kante der Schublade: Ziehen ändert die Höhe, fast ganz hinunter oder Klick schließt (site.js, griffStart).
   Die ganze obere Kante lässt sich ebenfalls ziehen, mit der Maus darauf wird sie kräftiger. Pfeiltasten auf dem Griff ändern die Höhe. */
.griff{position:absolute; z-index:3; left:50%; translate:-50% 0; width:4rem; height:18px; padding:0; border:0; background:none; cursor:ns-resize; touch-action:none}
.griff::after{content:""; position:absolute; left:50%; top:50%; width:2rem; height:5px; margin:-2.5px 0 0 -1rem; border-radius:3px;   /* User 23.10.2026: „ein bisschen schmaler“ (vorher 2,6 rem) */
 
  background:color-mix(in srgb, var(--lilac) 70%, transparent); transition:background-color .2s ease, width .2s ease}
.griff:hover::after,.griff:focus-visible::after,.drawer-kante:hover .griff::after,html.griff-zieht .griff::after{background:var(--lilac)}
.griff:focus-visible{outline:2px solid var(--lilac); outline-offset:1px; border-radius:6px}
.player-griff{top:-1px}
html.schublade-offen .player-griff{visibility:hidden}   /* offen übernimmt der Griff an der Schublade */
.drawer-kante{position:absolute; z-index:2; left:0; right:0; top:-6px; height:20px; cursor:ns-resize; touch-action:none}
.drawer-kante .griff{top:3px}
.drawer-kante::before{content:""; position:absolute; left:0; right:0; top:5px; height:3px; background:color-mix(in srgb, var(--lilac) 55%, transparent); opacity:0; transition:opacity .2s ease}
.drawer-kante:hover::before,html.griff-zieht .drawer-kante::before{opacity:1}
.drawer.ohne-gleiten{transition:none}   /* beim Aufziehen aus dem Player folgt die Schublade dem Finger */
@media (hover:none){ .griff{height:28px; width:5rem} .player-griff{top:-6px} .drawer-kante{top:-10px; height:32px} .drawer-kante .griff{top:4px} }
html.griff-zieht,html.griff-zieht *{cursor:ns-resize !important; -webkit-user-select:none; user-select:none}
/* Pfeil an „Aufnahmen & Text“: zeigt, wohin ein Klick die Schublade bewegt (nur ab 1200 px, darunter wählen die Knöpfe die Ansicht) */
.pill-btn .p-pfeil{display:none; width:12px; height:8px; margin-left:.4rem; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:rotate .3s ease}
@media (min-width:1200px){ .pill-btn .p-pfeil{display:inline-block} }
.p-txt[aria-pressed="true"] .p-pfeil{rotate:180deg}
/* Selbst gewählte Höhe (--schublade-h, site.js), höchstens bis unter den Kopf. Dann rollen Liste und Liedtext für sich, wie ab 1200 px. */
.drawer.gezogen{height:min(var(--schublade-h), calc(100vh - var(--kopf-h) - var(--player-h) - 2.5rem)); max-height:none}
.drawer.gezogen .wrap{height:100%; box-sizing:border-box}
@media (max-width:1199px){
  .drawer.gezogen .wrap{display:flex; flex-direction:column}
  .drawer.gezogen .pl{overflow-y:auto; min-height:0; flex:0 1 auto}
  .drawer.gezogen .ly-scroll{flex:1 1 auto; min-height:0; max-height:none}
}
/* Schleier hinter Schublade und Player: Solange die Schublade offen ist, wird die Seite darüber unscharf und leicht gedämpft
   (User 19.10.2026). Unsichtbar ist er ganz aus (visibility), damit die Unschärfe nichts kostet. */
.schleier{position:fixed; inset:0; z-index:43; background:rgba(var(--paper-rgb),.22); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .45s ease, visibility 0s linear .45s}
.schleier.an{opacity:1; visibility:visible; transition-delay:0s}
@media (prefers-reduced-motion: reduce){ .schleier{transition:none} }
.drawer .wrap{padding-block:1.3rem 1.5rem; display:grid; grid-template-columns:minmax(0,1fr); gap:.9rem}
.drawer-head{order:-1; display:flex; align-items:center; gap:.75rem 1rem; flex-wrap:wrap; min-height:2.25rem}
.drawer-head h3,.pl-kopf{font-size:1.3rem}
.tabs{display:flex; gap:.3rem; flex-wrap:wrap}
.tab{background:none; border:0; padding:.3rem .85rem; border-radius:999px; font-family:var(--f-display); font-size:1.2rem; line-height:1.3; color:var(--ink-soft); cursor:pointer}
.tab:hover{color:var(--ink); background:var(--paper-2)}
.tab[aria-pressed="true"]{background:var(--lilac-soft); color:var(--lilac)}
.tab-n{font-family:var(--f-body); font-size:.75rem; font-weight:700; margin-left:.35rem}
/* Liste der Aufnahmen: Rolle · Arie, Komponist · Werk, Dauer; der aktuelle Titel ist markiert */
.pl{list-style:none; margin:0; padding:0; display:grid; gap:2px; align-content:start}
.pl-row{display:grid; grid-template-columns:1.6rem minmax(0,1fr) auto; align-items:center; gap:.1rem .8rem; width:100%; margin:0; padding:.45rem .7rem; border:0; border-radius:8px; background:none; text-align:left; cursor:pointer}
.pl-row:hover{background:var(--paper-2)}
.pl-nr{display:flex; justify-content:center; font-size:.8125rem; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.pl-main{display:grid; min-width:0}
.pl-main b{font-weight:600; font-size:.9375rem; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pl-main small{font-size:.75rem; line-height:1.4; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pl-main .pl-piano{font-size:.8125rem}
.pl-piano .klavier-k,.p-piano .klavier-k{font-size:.5625rem}
.pl-dur{font-size:.75rem; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.pl-row[aria-current="true"]{background:var(--lilac-soft); box-shadow:inset 3px 0 0 var(--accent2)}
.pl-row[aria-current="true"] b{color:var(--lilac)}
.pl-row[aria-current="true"] .pl-nr{color:var(--accent2)}
@media (max-width:1199px){
  .pl-spalte,.ly-spalte{display:contents}
  .pl-kopf,.ly-kopf{display:none}
  .drawer .ly-scroll{max-height:36vh}
  .drawer[data-ansicht="liste"] .drawer-head .chip,.drawer[data-ansicht="liste"] .lyrics-role,
  .drawer[data-ansicht="liste"] .ly-scroll,.drawer[data-ansicht="liste"] .ly-note,.drawer[data-ansicht="text"] .pl{display:none}
  .p-txt.ohne-text,.tab.ohne-text{display:none}   /* Aufnahme ohne Liedtext */
}
@media (min-width:761px) and (max-width:1199px){
  .pl{grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(var(--pl-zeilen, 4), auto); grid-auto-flow:column; column-gap:1.75rem}
}
@media (max-width:760px){ .tab{font-size:1.02rem; padding:.3rem .6rem} }
@media (min-width:1200px){
  .drawer:not(.gezogen){height:min(58vh, 36rem)}
  .drawer-innen{overflow:hidden}
  .drawer .wrap{height:100%; grid-template-columns:minmax(0,22rem) minmax(0,1fr); column-gap:2.5rem}
  .pl-spalte,.ly-spalte{display:flex; flex-direction:column; gap:.9rem; min-height:0}
  .pl-spalte{border-right:1px solid var(--line); padding-right:1.25rem}
  .pl-kopf{display:flex; align-items:center; min-height:2.25rem; line-height:1.1}
  .tabs{display:none}
  .pl{overflow-y:auto; min-height:0; overscroll-behavior:contain}
  .drawer .ly-scroll{flex:1; min-height:0; max-height:none}
}

/* Großansicht Video: aufgebaut wie die der Fotos (Kopf mit Zähler und „Schließen“, Pfeile seitlich, Unterschrift unten;
   User 21.10.2026: „unterer Bereich … zu überladen“). Das Video so groß, wie Breite und Höhe es zulassen. */
.theater{position:fixed; inset:0; z-index:60; display:grid; grid-template-rows:auto minmax(0,1fr) auto; background:#0E0C12; color:#F1EEE7; touch-action:pan-y pinch-zoom}
.theater-frame{grid-column:2; grid-row:1; width:min(100%, (100dvh - 12rem) * 16 / 9); aspect-ratio:16/9; background:#000; border-radius:6px; overflow:hidden}
.theater-frame iframe{width:100%; height:100%; border:0; display:block}
.theater-paused{margin-left:.8rem; font-size:.6875rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#BFCBE3}
.theater .fotobox-foto a{color:#BFCBE3; font-weight:600; text-decoration:none}
.theater .fotobox-foto a:hover{text-decoration:underline}
.btn.ghost-light{background:transparent; color:#EEEAF3; border-color:rgba(238,234,243,.45)}

/* Fotos: --r ist das Seitenverhältnis (Breite/Höhe) aus den Bildmaßen, die Pult mitliefert (_bilder); so springt beim Laden nichts. */
/* Offene Großansicht: Die Seite rollt nicht mit. Die Breite der Bildlaufleiste (--sbw, site.js) wird ausgeglichen, damit beim
   Öffnen nichts zuckt; scrollbar-gutter ging nicht, der freigehaltene Streifen schien rechts hell durch. */
html.fotobox-offen{overflow:hidden}
html.fotobox-offen body{padding-right:var(--sbw, 0px)}
html.fotobox-offen .player, html.fotobox-offen .drawer, html.fotobox-offen .leiste{right:var(--sbw, 0px)}
.g-bild{display:block; min-width:0; margin:0; padding:0; border:0; border-radius:3px; overflow:hidden; background:var(--paper-2); cursor:pointer; aspect-ratio:var(--r, 1.5); transform-origin:0 0}
.g-bild img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.6,.2,1)}
@media (hover:hover){ .g-bild:hover img{transform:scale(1.03)} }
.g-bild:focus-visible{outline:2px solid var(--lilac); outline-offset:3px}
/* Filmstreifen (User 21.10.2026, Variante B aus werkzeuge/bilder/galerie/bogen.html, kombiniert mit der Übersicht): eine Reihe
   gleich hoher Fotos in ihrem eigenen Format, nach rechts zu blättern: Pfeile, mit der Maus ziehen, Touchpad, am Handy wischen.
   Rechts läuft der Streifen weich aus, solange noch Fotos folgen. Die Linie darunter zeigt, wie weit man ist. */
.streifen{display:flex; gap:12px; overflow-x:auto; overflow-anchor:none; scrollbar-width:none; overscroll-behavior-x:contain; cursor:grab;
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 4rem), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 4rem), transparent)}
.streifen::-webkit-scrollbar{display:none}
.streifen.am-ende{-webkit-mask-image:none; mask-image:none}
.streifen.zieht{cursor:grabbing}
.streifen.zieht .g-bild{pointer-events:none}
.streifen .g-bild{flex:none; height:clamp(16rem, 44vh, 24.375rem); aspect-ratio:var(--r, 1.5)}   /* User 22.10.2026: höchstens 390 px wie am Anfang */
.streifen-fuss{display:flex; align-items:center; gap:.6rem; margin-top:1rem}
/* Die Linie ist ein Bildlaufbalken (User 22.10.2026): Mit der Maus darüber wird sie dicker, der Balken lässt sich ziehen, ein Klick
   daneben gleitet dorthin (site.js). Die Fläche zum Greifen ist 2 rem hoch, gezeichnet werden nur Linie und Balken.
   Seit 22.10.2026 dicker (User: „man trifft es dann einfacher“): Balken 5 px, unter der Maus 12 px. */
.streifen-lauf{position:relative; flex:1; height:2rem; margin-right:.6rem; cursor:pointer; touch-action:none}
.streifen-lauf::before{content:""; position:absolute; left:0; right:0; top:50%; height:2px; transform:translateY(-50%); border-radius:6px; background:var(--line); transition:height .2s ease}
.streifen-lauf i{position:absolute; left:0; top:50%; height:5px; transform:translateY(-50%); border-radius:6px; background:var(--lilac); cursor:grab; transition:height .2s ease}
@media (hover:hover){
  .streifen-lauf:hover::before,.streifen-lauf.zieht::before{height:8px}
  .streifen-lauf:hover i,.streifen-lauf.zieht i{height:12px}
}
.streifen-lauf.zieht,.streifen-lauf.zieht i{cursor:grabbing}
/* „Alle Fotos“ (User 21.10.2026, Variante C aus werkzeuge/bilder/fotos-uebersicht/bogen.html): dieselben Fotos brechen aus dem
   Streifen in Reihen gleicher Höhe um, die die Breite füllen (die letzte wird nicht gestreckt); site.js lässt jedes Foto an seinen
   Platz gleiten. Der Knopf steht oben neben der Überschrift; aufgeklappt läuft „Weniger“ auch unten am Bildschirm mit (über dem
   Player), solange die Übersicht im Bild ist, und setzt sich am Ende unter die Fotos.
   22.10.2026 (User: „runde Buttons gefallen mir hier nicht“): keine Pillen mehr, sondern Textknöpfe wie „Weiterlesen“ (.klappe-knopf).
   Der mitlaufende hat einen Grund in Papierfarbe, damit er über den Fotos lesbar bleibt. */
#fotos .sec-head{grid-template-columns:minmax(0,1fr) auto; align-items:end; max-width:none}
.f-oben{justify-self:end}
.f-unten{display:none}
#fotos.offen .f-unten{display:flex; width:max-content; position:sticky; z-index:5; bottom:calc(var(--player-h) + env(safe-area-inset-bottom, 0px) + .8rem);
  margin:1rem auto 0; padding:.5rem 1rem; border-radius:4px; background:rgb(var(--paper-rgb)); box-shadow:0 10px 26px -14px rgba(16,16,30,.45)}
body.no-player #fotos.offen .f-unten{bottom:1rem}
#fotos.offen .streifen{flex-wrap:wrap; overflow:visible; gap:10px; cursor:auto; -webkit-mask-image:none; mask-image:none}
#fotos.offen .streifen .g-bild{height:auto; flex:var(--r, 1.5) var(--r, 1.5) calc(var(--r, 1.5) * 17rem)}
#fotos.offen .streifen::after{content:""; flex-grow:999999}
#fotos.offen .streifen-fuss{display:none}
/* Während des Umschaltens: nach oben und unten nicht beschneiden (die Fotos gleiten aus den Reihen herauf), seitlich am Rand
   des Streifens schon, sonst flögen Fotos, die außerhalb des sichtbaren Teils landen, über den Seitenrand. */
#fotos.wechselt .streifen{overflow-x:clip; overflow-y:visible; -webkit-mask-image:none; mask-image:none}
/* Seitlich mit clip, nicht mit clip-path: Sonst ragen die Fotos über den Rand, und ein Handy macht die Seite breiter und zoomt
   heraus (Fensterhöhe 844 → 3376 px): Die Seite sprang, der Player verschwand nach unten (User 21.10.2026). clip zählt nicht zur Seitenbreite. */
#fotos{overflow-x:clip}
#fotos.wenige .f-umschalten{display:none !important}   /* bis drei Fotos: alles steht ohnehin da */
@media (hover:none){ .streifen-fuss .g-knopf{display:none} .streifen{cursor:auto} }
@media (max-width:760px){
  .streifen{gap:8px}
  .streifen .g-bild{height:min(24rem, 60vh)}
  #fotos.offen .streifen{gap:6px}
  #fotos.offen .streifen .g-bild{flex-basis:calc(var(--r, 1.5) * 8rem)}
}
.g-knopf{width:2.75rem; height:2.75rem; flex:none; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink); display:grid; place-items:center; padding:0; cursor:pointer; transition:border-color .15s ease, color .15s ease}
.g-knopf:hover:not(:disabled){border-color:var(--lilac); color:var(--lilac)}
.g-knopf:disabled{opacity:.4; cursor:default}
.g-knopf svg{width:1.1rem; height:1.1rem}
.galerie-zahl{font-variant-numeric:tabular-nums; font-size:.875rem; font-weight:600; letter-spacing:.06em; color:var(--ink-soft); white-space:nowrap}
@media (prefers-reduced-motion: reduce){ .g-bild img{transition:none} }

/* Großansicht der Fotos: ganz dunkel, damit nichts von der Seite durchscheint */
.fotobox{position:fixed; inset:0; z-index:60; overflow:hidden; display:grid; grid-template-rows:auto minmax(0,1fr) auto; background:#0E0C12; color:#F1EEE7; touch-action:pan-y pinch-zoom}
.fotobox-kopf{display:flex; justify-content:space-between; align-items:center; padding:calc(1rem + env(safe-area-inset-top, 0px)) var(--gr) 0 var(--gl)}
.fotobox .galerie-zahl,.theater .galerie-zahl{color:rgba(241,238,231,.7)}
.fotobox-mitte{display:grid; grid-template-columns:4.5rem minmax(0,1fr) 4.5rem; align-items:center; justify-items:center; min-height:0; padding:1rem 0}
.fotobox-bild{grid-column:2; grid-row:1; width:100%; height:100%; min-height:0; display:grid; grid-template:minmax(0,1fr) / minmax(0,1fr); place-items:center}   /* feste Spalte: am Handy fehlen die Pfeile */
.fotobox-bild img{grid-area:1/1; display:block; max-width:100%; max-height:100%; min-width:0; min-height:0; object-fit:contain; transform-origin:0 0}   /* große Fotos passen in die Fläche; Ursprung für den Übergang (flip) */
/* Ziehen mit der Maus (site.js): Hand über dem Foto, beim Ziehen geschlossen, ohne dabei Text zu markieren */
#fb-mitte{-webkit-user-select:none; user-select:none}
@media (hover:hover){ #fb-img{cursor:grab} }
#fotobox.zieht, #fotobox.zieht *{cursor:grabbing}
.fotobox .g-knopf,.theater .g-knopf{background:transparent; color:#F1EEE7; border-color:rgba(241,238,231,.35)}
.fotobox .g-knopf:hover:not(:disabled),.theater .g-knopf:hover:not(:disabled){border-color:#F1EEE7; color:#fff}
.fotobox .g-knopf:disabled,.theater .g-knopf:disabled{opacity:.25}
.fotobox-fuss{display:grid; gap:.25rem; min-height:3.6rem; text-align:center; padding:0 1rem calc(1.6rem + env(safe-area-inset-bottom, 0px))}
.fotobox-cap{font-family:var(--f-display); font-style:italic; font-weight:300; font-size:1.4rem; line-height:1.25; margin:0 auto}
.fotobox-foto{font-size:.8125rem; color:rgba(241,238,231,.65); margin:0 auto}
@media (hover:none){
  .fotobox-mitte{grid-template-columns:.5rem minmax(0,1fr) .5rem}
  .fotobox-mitte .g-knopf{display:none}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .is-on .eq i{animation:none; height:70%}
  .role-thumb img,.video-thumb img{transition:none}
}

/* Impressum & Datenschutz (privacy.html, User 22.10.2026): schlichte Textseite mit Kopf wie die Website */
.recht-kopf{position:sticky; top:0; z-index:5; background:var(--glass); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top, 0px)}
.recht-bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:4.25rem}
.recht-logo{font-family:var(--f-display); font-style:italic; font-weight:300; font-size:1.5rem; color:var(--ink); text-decoration:none}
.recht-logo:hover{color:var(--lilac)}
.recht{max-width:46rem; padding-block:3rem 5rem}
.recht h1{font-size:clamp(2.2rem, 5vw, 3.2rem); margin-bottom:2rem}
.recht h2{font-size:1.45rem; margin:2.2rem 0 .6rem}
.recht p,.recht ul{color:var(--ink-soft); margin-bottom:.8rem}
.recht ul{padding-left:1.2rem}
.recht li+li{margin-top:.35rem}
.recht a{color:var(--lilac)}
.recht-adresse{color:var(--ink) !important}
.recht-stand{margin-top:2.5rem; font-size:.875rem}
.luecke{background:#FFE9A8; color:#5A4500; padding:0 .3em; border-radius:3px}   /* von Varvara noch zu füllen */

/* Namen mit Link (site.js, Pult: Kontakt › Namen mit Link): im Fließtext dezent unterstrichen, beim Darüberfahren in der Akzentfarbe */
.name-link{color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; text-decoration-color:color-mix(in srgb, currentColor 40%, transparent)}
.name-link:hover,.name-link:focus-visible{color:var(--lilac); text-decoration-color:currentColor}