/* ==========================================================
   Stefanie Kopinits – zentrales Stylesheet
   Farben und Schrift an einer Stelle änderbar (:root)
   ========================================================== */

:root {
  --bordeaux: #990000;      /* Menüleiste, Überschriften (wie bisher) */
  --bordeaux-dunkel: #7a0000;
  --dunkelrot: #8b0000;     /* Text auf der Home-Seite (bisher "darkred") */
  --text: #1a1a1a;
  --grau: #6b6b6b;
  --linie: #e4dcdc;
  --weiss: #ffffff;
  --menu-breite: 200px;
  --schrift: Tahoma, Verdana, "Segoe UI", Geneva, sans-serif;            /* Fließtext, Menü */
  --schrift-titel: Georgia, "Times New Roman", Times, serif;              /* Überschriften, Startseite */
  --textbreite: 38rem;
  /* Bühnenvorhang (Startseite und Übergang zu Home) */
  /* Falten über die ganze Breite – ein durchgehender Vorhang ohne sichtbare Mitte */
  --vorhang-falten: repeating-linear-gradient(90deg,
     rgba(0,0,0,.22) 0%, rgba(0,0,0,.09) 1.2%, rgba(255,150,150,.07) 2.4%, rgba(255,175,175,.12) 2.9%,
     rgba(0,0,0,.02) 3.9%, rgba(0,0,0,.22) 5.3%);
  /* zweite, versetzte Faltenschicht – macht das Muster unregelmäßig wie echter Samt */
  --vorhang-falten2: repeating-linear-gradient(90deg,
     rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 1.65%, rgba(0,0,0,0) 2.55%, rgba(255,140,140,.05) 3.2%, rgba(0,0,0,0) 3.95%);
  /* Samtrot, in der Mitte etwas heller (Bühnenlicht), zu den Rändern sanft dunkler */
  --vorhang-grund: radial-gradient(ellipse 80% 125% at 50% 40%, #a8141c 0%, #850810 50%, #5c040a 100%);
  /* Bühnenschatten oben und unten */
  --vorhang-schatten: linear-gradient(to bottom, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 72%, rgba(0,0,0,.38) 100%);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;     /* 17px am Computer, am Handy 16px (siehe unten) */
  line-height: 1.65;
  color: var(--text);
  background: var(--weiss);
  /* Fußleiste bleibt auch bei kurzen Seiten ganz unten */
  min-height: 100vh;
  display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }

img { max-width: 100%; height: auto; }

a { color: var(--bordeaux); text-decoration: none; }
a:hover, a:focus-visible { color: var(--dunkelrot); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--weiss); padding: .5rem 1rem; z-index: 100;
}
.skip:focus { left: .5rem; top: .5rem; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Menü (Seitenleiste) ---------- */

.topbar { display: none; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--menu-breite);
  background: var(--bordeaux);
  color: var(--weiss);
  padding: 1.5rem 0 1.25rem;
  overflow-y: auto;
  font-size: 15px;
  display: flex; flex-direction: column;
}
.sidebar > ul { flex: 0 0 auto; }



.sidebar ul { list-style: none; margin: 0; padding: 0; }

/* Name oben in der Leiste (nur am Computer; am Handy steht er in der Kopfleiste) */
.sidebar .sidebar-name {
  font-family: var(--schrift-titel);
  font-weight: normal;
  font-size: 1.15rem;       /* so groß, dass der Name in eine Zeile passt */
  line-height: 1.2;
  white-space: nowrap;
  padding: .2rem 1.1rem 1.1rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid rgba(255,255,255,.3);
}
.sidebar .sidebar-name:hover, .sidebar .sidebar-name:focus { color: var(--weiss); text-decoration: none; opacity: .85; }

.sidebar a,
.sidebar summary {
  display: block;
  padding: .3rem 1.1rem;
  color: var(--weiss);
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
}

.sidebar summary { list-style: none; position: relative; }
.sidebar summary::-webkit-details-marker { display: none; }
.sidebar summary::after {
  content: "›";
  position: absolute; right: 1rem;
  transition: transform .15s;
  opacity: .7;
}
.sidebar details[open] > summary::after { transform: rotate(90deg); }

/* Unterpunkte: eingerückt, nicht fett – wie bisher */
.sidebar details ul a {
  font-weight: normal;
  padding: .2rem 1.1rem .2rem 2.1rem;
}

.sidebar a:hover,
.sidebar summary:hover { color: #c8c8c8; }   /* bisher: Hover grau */

.sidebar a[aria-current="page"] {
  background: var(--bordeaux-dunkel);
  box-shadow: inset 3px 0 0 var(--weiss);
}

/* ---------- Inhalt ---------- */

.content {
  margin-left: var(--menu-breite);
  padding: 2.5rem clamp(1.25rem, 5vw, 4rem) 3rem;
}

/* Silhouette (Variante B): rechts unten neben dem Text, nur auf breiten
   Bildschirmen – so überlagert sie nie den Text. */
@media (min-width: 1400px) {
  .content {
    background: url("../images/silhouette_grau.png") no-repeat fixed
                right 2.5rem bottom 0 / 260px auto;
  }
}

.content > * { max-width: 52rem; }
/* Fließtext auf angenehme Zeilenlänge begrenzen; Tabellen, Galerien und
   der Lebenslauf (Zeitleiste) dürfen breiter bleiben */
.content > p,
.content > .text,
.content > .kritik,
.content > .linkliste { max-width: var(--textbreite); }
/* Galerien etwas breiter, damit die Vorschaubilder größer werden */
.content > .galerie { max-width: 60rem; }

h1, h2 {
  font-family: var(--schrift-titel);
  font-weight: normal;
  color: var(--bordeaux);
  letter-spacing: .01em;
}
h1 {
  font-size: 2.1rem;
  line-height: 1.2;
  margin: 0 0 1.75rem;
}
h2 {
  font-size: 1.4rem;
  line-height: 1.3;
  margin: 2rem 0 .75rem;
}
.untertitel {
  color: var(--bordeaux);
  font-weight: bold;
  margin: -1.25rem 0 1.75rem;
}

/* Schmale dunkle Fußleiste mit Copyright und Impressum */
.footer {
  margin-left: var(--menu-breite);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: .25rem 1.5rem;
  padding: .7rem clamp(1.25rem, 5vw, 4rem);
  background: #2b0003;
  color: rgba(255,255,255,.75);
  font-size: .8rem;
  letter-spacing: .02em;
}

/* Home-Text in Dunkelrot, wie bisher */
.home { color: var(--dunkelrot); }
.home p { margin: 0 0 1.1rem; }

/* ---------- Repertoire-Tabellen ---------- */

.repertoire {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}
.repertoire th {
  text-align: left;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--grau);
  font-weight: normal;
  padding: .4rem .75rem .4rem 0;
  border-bottom: 1px solid var(--linie);
}
.repertoire td {
  padding: .45rem .75rem .45rem 0;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
.repertoire td:first-child { text-transform: uppercase; width: 34%; }
.repertoire td:nth-child(2) { width: 33%; }

/* ---------- Listen (Fotos) ---------- */

.linkliste { padding-left: 1.25rem; }
.linkliste li { margin: .45rem 0; }
.linkliste a { color: var(--text); }
.linkliste a:hover { color: var(--dunkelrot); }   /* bisher: Hover darkred */

/* ---------- Fotos: Übersicht der Alben ---------- */
.content > .alben { max-width: 60rem; }
.alben {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  list-style: none; padding: 0; margin: 0;
}
.alben a {
  position: relative; display: block; overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4 / 3;
  background: var(--bordeaux-dunkel);
  color: var(--weiss); text-decoration: none;
  box-shadow: 0 2px 6px rgba(60, 0, 0, .18);
  transition: transform .2s, box-shadow .2s;
}
.alben img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  transition: transform .4s;
}
/* dunkler Verlauf unten, damit der Albumname gut lesbar ist */
.alben a::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(50, 0, 0, .85) 0%, rgba(50, 0, 0, .35) 32%, rgba(50, 0, 0, 0) 55%);
}
.alben .album-name, .alben .album-anzahl {
  position: absolute; left: 1rem; right: 1rem; z-index: 1;
}
.alben .album-name {
  bottom: 1.85rem;
  font-family: var(--schrift-titel);
  font-size: 1.45rem; line-height: 1.15;
}
.alben .album-anzahl {
  bottom: .8rem;
  font-size: .8rem; letter-spacing: .05em; opacity: .85;
}
.alben a:hover, .alben a:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(60, 0, 0, .3);
  color: var(--weiss); text-decoration: none;
}
.alben a:hover img, .alben a:focus-visible img { transform: scale(1.04); }

/* ---------- Fotogalerie ---------- */

.zurueck { display: inline-block; margin-bottom: 1rem; font-size: .9rem; }

.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* höchstens 3 Fotos pro Zeile */
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.galerie a { display: block; color: var(--text); text-decoration: none; }
.galerie img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 25%;
  border: 1px solid var(--linie);
  background: #f3eded;
  transition: transform .15s, box-shadow .15s;
}
.galerie a:hover img,
.galerie a:focus-visible img {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(80, 0, 0, .25);
}
.galerie span {
  display: block;
  font-size: .82rem;
  line-height: 1.35;
  margin-top: .35rem;
}
.galerie a:hover span { color: var(--dunkelrot); }

/* Lightbox – dunkles Bordeaux als Anklang an die alten Albumseiten */
.lightbox {
  width: 100vw; height: 100vh;
  max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: #1e0000;
  color: var(--weiss);
}
.lightbox::backdrop { background: rgba(0, 0, 0, .6); }
.lightbox[open] {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.lb-kopf {
  display: flex; justify-content: space-between; align-items: center;
  padding: .75rem 1rem; font-size: .9rem;
}
.lb-bild {
  display: flex; align-items: center; justify-content: center;
  min-height: 0; padding: 0 3.5rem;
}
.lb-bild img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border: 1px solid rgba(255,255,255,.4);
}
.lb-text {
  text-align: center; font-weight: bold;
  padding: .9rem 1rem 1.4rem; font-size: 1.05rem;
}
.lightbox button {
  background: none; border: 0; color: var(--weiss);
  font: inherit; cursor: pointer; padding: .5rem .75rem;
}
.lightbox .lb-schliessen { font-size: 1.6rem; line-height: 1; }
.lightbox .lb-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 2.5rem; line-height: 1; opacity: .85;
}
.lightbox .lb-pfeil:hover { opacity: 1; }
.lb-zurueck { left: .25rem; }
.lb-weiter { right: .25rem; }

/* ---------- Galerie-Variante für Programme / Plakate (ganzes Bild) ---------- */
.galerie.ganz img {
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: #f6f1f1;
}

/* ---------- Fließtext (Lebensläufe, Resonanz) ---------- */
.text p { margin: 0 0 1.1rem; }
.content a { overflow-wrap: anywhere; }

/* ---------- Lebenslauf allgemein (Zeitleiste) ---------- */
.cv { margin: 0 0 1.5rem; }
.cv .zeile {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1.25rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--linie);
}
.cv dt { color: var(--bordeaux); font-weight: bold; }
.cv dd { margin: 0; }
.cv em { color: #2d55c8; }          /* bisher: blau-kursiv hervorgehoben */

/* ---------- Konzert-Repertoire ---------- */
.konzert td:first-child { text-transform: none; width: 32%; }
.konzert td:nth-child(2) { width: auto; }

/* ---------- Charakterfach mit Bild ---------- */
.charakter td { vertical-align: middle; }
.charakter td:first-child { width: 28%; }
.charakter td:nth-child(2) { width: 26%; }
.charakter img { display: block; width: 150px; border: 1px solid var(--linie); }

/* ---------- Kritiken ---------- */
.kritik {
  margin: 0 0 1.25rem;
  padding: .1rem 0 .1rem 1rem;
  border-left: 3px solid var(--bordeaux);
}
.kritik p { margin: 0; }

/* ---------- Hörbeispiele ---------- */
.audioliste { list-style: none; padding: 0; margin: 0; }
.audioliste li { padding: .9rem 0; border-bottom: 1px solid var(--linie); }
.audioliste .titel { margin: 0 0 .5rem; }
.audioliste .dauer { color: var(--grau); white-space: nowrap; }
.audioliste audio { width: 100%; max-width: 32rem; display: block; }

/* ---------- CDs ---------- */
.cd-liste { list-style: none; padding: 0; margin: 0; }
.cd-liste li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--linie);
}
.cd-liste img { display: block; width: 140px; border: 1px solid var(--linie); }
.cd-liste h2 { margin: 0 0 .35rem; font-size: 1.2rem; }
.cd-liste p { margin: 0; }

/* ---------- Kontakt ---------- */
.kontakt { font-style: normal; line-height: 1.9; }
.kontakt a { color: var(--bordeaux); }

/* ---------- Startseite (index.htm) ---------- */

.start {
  margin: 0;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.5rem;
  padding: 1.25rem;
  /* Hintergrund = geschlossener Vorhang, genau wie der Vorhang auf home.htm,
     damit beim Klick auf „Bühne frei“ nichts umspringt */
  background:
    var(--vorhang-schatten) center / 100% 100% no-repeat fixed,
    var(--vorhang-falten2)  center / 100% 100% no-repeat fixed,
    var(--vorhang-falten)   center / 100% 100% no-repeat fixed,
    var(--vorhang-grund)    center / 100% 100% no-repeat fixed;
  background-color: #5a0207;
}
.start-bild {
  display: block; width: 100%;
  /* Bild so groß, dass Begrüßung und Knopf auch auf Laptops ohne Scrollen sichtbar sind */
  max-width: min(922px, calc((100vh - 18.5rem) * 1.494));
  min-width: min(100%, 320px);
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.12);
}
.start-bild img { display: block; width: 100%; height: auto; }

/* Begrüßung unter dem Startbild */
.start-gruss { text-align: center; }
.start-gruss p {
  margin: 0; color: #fff; line-height: 1.3;
  font-family: var(--schrift-titel); font-style: italic;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
}
.start-gruss span { font-size: .7em; }

/* Knopf „Bühne frei“ unter dem Startbild */
.start-eintreten {
  display: inline-flex; align-items: center; gap: .9rem;
  color: #fff; text-decoration: none;
  border: 2px solid rgba(255,255,255,.85); border-radius: 999px;
  padding: .85rem 2.4rem;
  letter-spacing: .18em; text-transform: uppercase;
  font-size: 1.05rem; font-weight: bold;
  transition: background .2s, color .2s, border-color .2s;
}
.start-eintreten:hover, .start-eintreten:focus { background: #fff; color: var(--dunkelrot); border-color: #fff; text-decoration: none; }
/* Pfeile nach außen – deuten das Aufgehen des Vorhangs an */
.start-eintreten .pfeil {
  font-size: 1.5em; line-height: 1; letter-spacing: 0;
  display: inline-block;
  animation: pfeil-auf 2.4s ease-in-out infinite;
}
.start-eintreten .pfeil-links  { --richtung: -1; }
.start-eintreten .pfeil-rechts { --richtung: 1; }
@keyframes pfeil-auf {
  0%, 60%, 100% { transform: translateX(0); }
  30%           { transform: translateX(calc(var(--richtung) * 6px)); }
}
.start-eintreten:hover .pfeil { animation-duration: 1.2s; }



/* ==========================================================
   Handy / schmale Bildschirme
   ========================================================== */
@media (max-width: 800px) {
  .topbar {
    display: flex;
    position: sticky; top: 0; z-index: 20;
    align-items: center; justify-content: space-between;
    background: var(--bordeaux);
    color: var(--weiss);
    padding: .6rem 1rem;
  }
  .brand { color: var(--weiss); font-weight: bold; font-size: 1.1rem; }
  .brand:hover { color: var(--weiss); text-decoration: none; }
  .menu-toggle {
    background: none; border: 1px solid rgba(255,255,255,.6); border-radius: 4px;
    color: var(--weiss); font: inherit; font-size: .95rem;
    padding: .3rem .7rem; cursor: pointer;
  }
  .menu-toggle::before { content: "☰ "; }
  .menu-toggle[aria-expanded="true"]::before { content: "✕ "; }

  .sidebar {
    display: none;
    position: sticky; top: 3.1rem; z-index: 19;
    width: 100%;
    max-height: calc(100vh - 3.1rem);
    padding: .5rem 0 1rem;
    font-size: 1.05rem;
    box-shadow: 0 6px 12px rgba(0,0,0,.2);
  }
  .sidebar.offen { display: block; }
  .sidebar .sidebar-name { display: none; }
  .sidebar a, .sidebar summary { padding: .55rem 1.25rem; }
  .sidebar details ul a { padding: .45rem 1.25rem .45rem 2.5rem; }

  .content {
    margin-left: 0;
    padding-top: 1.5rem;
  }
  .footer { margin-left: 0; }

  body { font-size: 1rem; }      /* Handy: 16px */
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.25rem; }

  /* Repertoire: jede Zeile wird ein kleiner Block */
  .repertoire thead { display: none; }
  .repertoire tr {
    display: block;
    padding: .55rem 0;
    border-bottom: 1px solid var(--linie);
  }
  .repertoire td {
    display: block; width: auto !important;
    padding: 0; border: 0;
  }
  .repertoire td:first-child { font-weight: bold; }
  .repertoire td:nth-child(3) { color: var(--grau); font-size: .9rem; }

  .galerie { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .alben { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .alben .album-name { font-size: 1.15rem; bottom: 1.6rem; left: .7rem; right: .7rem; }
  .alben .album-anzahl { font-size: .72rem; bottom: .6rem; left: .7rem; }
  .cv .zeile { grid-template-columns: 1fr; gap: .1rem; }
  .charakter tr { display: grid; grid-template-columns: 1fr auto; column-gap: .75rem; }
  .charakter td:nth-child(4) { grid-column: 2; grid-row: 1 / span 3; }
  .charakter img { width: 110px; }
  .konzert td:nth-child(2) { color: var(--text); font-size: 1rem; }
  .cd-liste li { grid-template-columns: 96px 1fr; gap: .9rem; }
  .cd-liste img { width: 96px; }
  .lb-bild { padding: 0 .5rem; }
  .lightbox .lb-pfeil { top: auto; bottom: 3.5rem; transform: none; font-size: 2.25rem; }
}

/* ---------- Bühnenvorhang (home.htm#vorhang) ----------
   Nur sichtbar, wenn die Seite über „Bühne frei“ geöffnet wird.
   Zwei Vorhanghälften raffen sich nach links und rechts zur Seite. */
.vorhang { display: none; }
.vorhang:target {
  display: block;
  position: fixed; inset: 0; z-index: 1000;
  pointer-events: none;
  animation: vorhang-weg .6s ease 2.3s forwards;
}
.vorhang-links, .vorhang-rechts {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  animation: 2.2s cubic-bezier(.6, 0, .3, 1) .5s forwards;
}
/* Gleicher Samt wie auf der Startseite; jede Hälfte zeigt ihren Teil davon */
.vorhang-links {
  left: 0; transform-origin: left center; animation-name: vorhang-links;
  background: var(--vorhang-schatten), var(--vorhang-falten2), var(--vorhang-falten), var(--vorhang-grund);
  /* Hintergrund so breit wie der ganze Bildschirm: beide Hälften ergeben zusammen
     genau das Bild der Startseite, ohne Naht in der Mitte */
  background-size: calc(100% / .505) 100%;
  background-repeat: no-repeat;
  background-position: left top;
}
.vorhang-rechts {
  right: 0; transform-origin: right center; animation-name: vorhang-rechts;
  background: var(--vorhang-schatten), var(--vorhang-falten2), var(--vorhang-falten), var(--vorhang-grund);
  /* Hintergrund so breit wie der ganze Bildschirm: beide Hälften ergeben zusammen
     genau das Bild der Startseite, ohne Naht in der Mitte */
  background-size: calc(100% / .505) 100%;
  background-repeat: no-repeat;
  background-position: right top;
}
@keyframes vorhang-links  { to { transform: translateX(-8%) scaleX(.1); } }
@keyframes vorhang-rechts { to { transform: translateX(8%)  scaleX(.1); } }
@keyframes vorhang-weg    { to { opacity: 0; visibility: hidden; } }

/* Startseite blendet beim Klick auf „Bühne frei“ sanft in den Vorhang über */
.start > * { transition: opacity .5s ease; }
.start.abgang > * { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .start-eintreten .pfeil { animation: none; }
  .vorhang:target { display: none; }
}

/* Impressum-Link in der Fußzeile */
.footer a { color: rgba(255,255,255,.75); }
.footer a:hover, .footer a:focus-visible { color: #fff; }