/* ==========================================================================
   martin-spahr.com · Stylesheet
   Hell, ruhig, typografisch. Keine Frameworks, keine externen Anfragen.
   Aufbau: 1 Schrift · 2 Grundwerte · 3 Kopfleiste · 4 Einstieg · 5 Abschnitte
           6 News · 7 Vita · 8 Termine · 9 Kontakt · 10 Repertoire · 11 Fuß
   ========================================================================== */

/* 1 · Schrift (lokal eingebunden, OFL-Lizenz, keine Google-Server) ---------- */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* 2 · Grundwerte ------------------------------------------------------------ */
:root {
  /* Farben */
  --weiss:    #FFFFFF;   /* Kopfleiste und jeder zweite Abschnitt */
  --papier:   #F6F7F6;   /* helles Grau: Einstieg und jeder zweite Abschnitt */
  --tinte:    #1D2430;   /* Text */
  --graphit:  #5B6470;   /* Sekundärtext, Metadaten */
  --linie:    #DDE1E5;   /* dünne Trenner, nur wo sie Information tragen */
  --blau:     #2F4A6D;   /* Links und Fokus */
  --haarlinie: color-mix(in srgb, var(--tinte) 25%, transparent);   /* dünne Linie unter Textlinks */

  /* Schriften */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Maße */
  --breite: 78rem;                      /* maximale Seitenbreite */
  --rand:   clamp(1.25rem, 5vw, 3rem);  /* seitlicher Abstand */
  --spalte: 12rem;                      /* schmale Titelspalte links */
  --luft:   clamp(2rem, 5vw, 4.5rem);   /* Abstand zwischen den Spalten */
  --kopfhoehe: 3.75rem;                 /* Höhe der festen Kopfleiste */
  /* Abstand vom Bildschirmrand bis zum Inhalt (für die Trennlinien, in % der Abschnittsbreite) */
  --seitenrand: max(var(--rand), calc((100% - var(--breite)) / 2));
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopfhoehe) + .5rem);
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

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

/* Textlinks: blau, ohne Unterstreichung. Eine dünne Haarlinie darunter markiert den Link;
   beim Darüberfahren zeichnet sich eine blaue Linie von links nach rechts darüber. */
a {
  color: var(--blau);
  text-decoration: none;
  padding-bottom: .12em;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(var(--haarlinie), var(--haarlinie));
  background-repeat: no-repeat;
  background-position: 0 100%, 0 100%;
  background-size: 0 1px, 100% 1px;
  transition: background-size .25s ease;
}
a:hover { background-size: 100% 1px, 100% 1px; }
@media (prefers-reduced-motion: reduce) { a { transition: none; } }

/* Links ohne Textlinie: Sprunglink, Navigation, Symbole, Vorschaubilder */
.sprung, .navigation a, .symbol-link, .eintrag__bild {
  padding-bottom: 0;
  background-image: none;
}

:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sprunglink für Tastatur und Screenreader */
.sprung {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: .6rem 1rem;
  background: var(--tinte);
  color: var(--weiss);
}
.sprung:focus { top: 1rem; outline-color: var(--weiss); }

/* 3 · Kopfleiste: bleibt beim Scrollen oben stehen ------------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
}

.kopf__innen {
  max-width: var(--breite);
  margin-inline: auto;
  padding: .5rem var(--rand);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0 2rem;
}

/* Symbole der Netzwerke; das Symbol selbst (nicht seine Klickfläche) schließt bündig mit dem Inhalt ab */
.folgen__liste { display: flex; margin: 0 0 0 -.625rem; padding: 0; list-style: none; }

.symbol-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--tinte);
}
.symbol-link:hover { color: var(--blau); }
.symbol-link svg { width: 1.25rem; height: 1.25rem; }

.navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navigation a {
  display: inline-block;
  padding-block: .4rem;
  color: var(--tinte);
  font-size: .975rem;
  text-decoration: none;
}
.navigation a:hover {
  color: var(--blau);
  text-decoration: underline;
  text-underline-offset: .35em;
}

/* 4 · Einstieg: breites Foto links, Name rechts -------------------------- */
.einstieg {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 7rem);
  background: var(--papier);
}

.einstieg__innen {
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  grid-template-areas: "bild text";
  gap: var(--luft);
  align-items: end;
  container-type: inline-size;   /* Größen des Namens werden aus der Breite berechnet */
}
.einstieg__text { grid-area: text; }
.einstieg__bild { grid-area: bild; margin: 0; }
.einstieg__bild img { width: 100%; height: auto; }

.einstieg h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.5rem, 9vw, 9rem);
  line-height: .92;
  letter-spacing: -.025em;
}
.einstieg h1 span { display: block; }

.untertitel {
  margin: 1.5rem 0 0;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.3;
}

/* Zweispaltig (Foto links, Name rechts): Name plus Untertitel sind höchstens so hoch wie das Foto.
   Foto = (Breite - Abstand) * 1,75/2,75, Seitenverhältnis 1400:612. Die Schrift nutzt davon rund 97 %. */
@media (min-width: 52.01rem) {
  .einstieg h1 { font-size: calc((100cqw - var(--luft)) * .1196); }
  .untertitel {
    margin-top: calc((100cqw - var(--luft)) * .1196 * .2);
    font-size: max(1rem, calc((100cqw - var(--luft)) * .1196 * .16));
  }
}

.nachweis {
  margin: .6rem 0 0;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--graphit);
}

/* Ein ruhiger Moment beim Laden: Foto und Name blenden weich ein */
@media (prefers-reduced-motion: no-preference) {
  .einstieg__bild { animation: einblenden 1.1s ease-out both; }
  .einstieg__text { animation: einblenden 1.1s ease-out .25s both; }
}
@keyframes einblenden {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 5 · Abschnitte: schmale Titelspalte links, Inhalt rechts ------------------ */
.abschnitt { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

/* Hintergründe wechseln: Einstieg grau, dann News weiß, Vita grau, Termine weiß ... */
.abschnitt:nth-of-type(even) { background: var(--papier); }

/* Feine Trennlinie über jedem Abschnitt. Sie reicht abwechselnd bis zum linken
   und bis zum rechten Bildschirmrand und endet auf der anderen Seite an der
   Kante des Inhalts. */
.abschnitt, .fuss { position: relative; }
.abschnitt::before,
.fuss::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: var(--seitenrand);
  height: 1px;
  background: var(--tinte);
}
.abschnitt:nth-of-type(even)::before,
.fuss::before {
  left: var(--seitenrand);
  right: 0;
}

.abschnitt__innen {
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
  display: grid;
  grid-template-columns: minmax(0, var(--spalte)) minmax(0, 1fr);
  column-gap: var(--luft);
}

.abschnitt h2 {
  align-self: start;
  position: sticky;
  top: calc(var(--kopfhoehe) + 1.5rem);
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.65rem;
  line-height: 1.2;
}

.inhalt { min-width: 0; }

/* 6 · News: Datum links, Text mittig, kleines Bild rechts ------------------- */
.liste { margin: 0; padding: 0; list-style: none; }

.eintrag {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) 8rem;
  grid-template-areas: "datum text bild";
  column-gap: 1.75rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--linie);   /* trennt datierte Einträge */
}
.eintrag:first-child { padding-top: 0; border-top: 0; }
.eintrag:last-child  { padding-bottom: 0; }

.eintrag time {
  grid-area: datum;
  padding-top: .3rem;
  color: var(--graphit);
  font-size: .95rem;
  line-height: 1.4;
}

.eintrag__text { grid-area: text; }
.eintrag h3 {
  margin: 0 0 .3rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.25;
}
.eintrag p { margin: 0; max-width: 60ch; }

/* Vorschaubild: gleiche Größe, graue Kachel; weiße Logo-Hintergründe gehen darin auf */
.eintrag__bild {
  grid-area: bild;
  align-self: start;
  width: 8rem;
  aspect-ratio: 4 / 3;
  background: var(--papier);
  isolation: isolate;
}
.eintrag__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}
.eintrag__bild--logo img { object-fit: contain; }

/* Vorschaubild als Link zu einem Video */
.eintrag__bild--video { position: relative; display: block; }
.eintrag__bild--video img { mix-blend-mode: normal; }
.eintrag__bild--video .abspielen {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.5rem;
  height: 2.5rem;
  translate: -50% -50%;
  color: var(--weiss);
  transition: color .2s ease;
}
.eintrag__bild--video .abspielen circle { fill: var(--tinte); fill-opacity: .8; stroke: var(--weiss); stroke-width: 1.5; transition: fill .2s ease; }
.eintrag__bild--video:hover .abspielen circle { fill: var(--blau); fill-opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .eintrag__bild--video .abspielen, .eintrag__bild--video .abspielen circle { transition: none; }
}

/* "Ältere News anzeigen": eine <details>-Schaltfläche, kein JavaScript nötig.
   Sitzt als eigenes <li> unterhalb der sichtbaren News, mit derselben Trennlinie wie die
   übrigen Einträge; die ältere Liste steckt eingeklappt darin und teilt sich das .eintrag-Aussehen. */
.news-mehr-zeile {
  border-top: 1px solid var(--linie);
  padding-top: 1.75rem;
}
.news-mehr summary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  list-style: none;
  color: var(--tinte);
  font-size: .975rem;
  line-height: 1.4;
}
.news-mehr summary::-webkit-details-marker { display: none; }
.news-mehr summary::after {
  content: "+";
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1;
  color: var(--graphit);
}
.news-mehr[open] summary::after { content: "\2212"; }
.news-mehr summary:hover,
.news-mehr summary:hover::after { color: var(--blau); }
.liste--eingebettet { margin-top: 1.75rem; }

/* 7 · Vita ------------------------------------------------------------------ */
.vita p {
  max-width: 38rem;
  margin: 0 0 1.2em;
  font-family: var(--serif);
  font-size: clamp(calc(1.15rem - 1pt), calc(1.6vw - 1pt), calc(1.3rem - 1pt));
  line-height: 1.65;
}
.vita p:last-child { margin-bottom: 0; }

/* 8 · Termine: eingebetteter Google-Kalender (erst nach Klick geladen) ------- */
.kalender__hinweis { max-width: 38rem; }
.kalender__hinweis p { margin: 0 0 1.25rem; color: var(--graphit); }

.knopf {
  padding: .75rem 1.4rem;
  border: 1px solid var(--tinte);
  background: transparent;
  color: var(--tinte);
  font: inherit;
  font-size: .975rem;
  line-height: 1.2;
  cursor: pointer;
}
.knopf:hover { background: var(--tinte); color: var(--weiss); }

.kalender iframe {
  display: block;
  width: 100%;
  height: 38rem;
  border: 0;
  background: var(--weiss);
}

/* 9 · Kontakt --------------------------------------------------------------- */
.kontakt__name {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1.2;
}
.kontakt__rolle { margin: .25rem 0 2rem; color: var(--graphit); }

.kontakt dl {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: .75rem 1rem;
  margin: 0;
}
.kontakt dt { color: var(--graphit); }
.kontakt dd { margin: 0; }
.kontakt dd a {
  color: var(--tinte);
  font-weight: 500;
  background-size: 0 1px, 0 1px;          /* im Ruhezustand keine Linie */
  transition: background-size .25s ease, color .2s ease;
}
.kontakt dd a:hover,
.kontakt dd a:focus-visible {
  color: var(--blau);
  background-size: 100% 1px, 0 1px;       /* Linie zeichnet sich von links nach rechts */
}

/* 10 · Repertoire (eingeklappt nach Gattung) -------------------------------- */
.repertoire details { border-top: 1px solid var(--linie); }
.repertoire details:last-of-type { border-bottom: 1px solid var(--linie); }

.repertoire summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem 0;
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.repertoire summary::-webkit-details-marker { display: none; }
.repertoire summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--graphit);
}
.repertoire details[open] summary::after { content: "\2212"; }
.repertoire summary:hover { color: var(--blau); }

.werke {
  margin: 0;
  padding: .25rem 0 1.9rem;
  list-style: none;
  columns: 2 18rem;
  column-gap: 3rem;
}
.werke li {
  break-inside: avoid;
  margin: 0 0 .7rem;
  font-size: .975rem;
  line-height: 1.5;
}
.komp { font-weight: 600; }

/* 11a · Rechtstext (Impressum, Datenschutz): schmale Lesespalte, klare Absätze */
.rechtstext .inhalt { max-width: 42rem; }
.rechtstext h3 {
  margin: 2.25rem 0 .6rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.3;
}
.rechtstext h3:first-child { margin-top: 0; }
.rechtstext p { margin: 0 0 1em; }
.rechtstext .kontakt { margin: .5rem 0 0; }

/* 11 · Fußzeile ------------------------------------------------------------- */
.fuss { padding-block: 2.5rem 3rem; font-size: .9rem; color: var(--graphit); background: var(--papier); }
.fuss__innen {
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 2rem;
}
.fuss ul { display: flex; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.fuss a { color: var(--graphit); }
.fuss a:hover { color: var(--blau); }

/* 12 · Scroll-Strich: dünne Linie rechts statt der Bildlaufleiste ---------- */
/* Die Klasse "js" setzt ein Mini-Skript im Kopf der Seite. Ohne JavaScript bleibt die normale Bildlaufleiste. */
html.js { scrollbar-width: none; }
html.js::-webkit-scrollbar { display: none; }

.scrollstrich {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 14px;
  z-index: 30;
  background: var(--weiss);   /* durchgehend weiße Spur */
  pointer-events: none;
}
.scrollstrich__griff {
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  pointer-events: auto;
  touch-action: none;
}
.scrollstrich__griff::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 6px;
  width: 1px;              /* so dünn wie die Trennlinien */
  background: var(--tinte);
}

/* Schmale Bildschirme ------------------------------------------------------- */
@media (max-width: 46rem) {
  /* Kopfleiste zweizeilig: oben die Symbole, darunter die Navigation */
  :root { --kopfhoehe: 5.9rem; }
  .kopf__innen { gap: 0; }
  .navigation ul { gap: 0 1.25rem; }
}

@media (max-width: 52rem) {
  .einstieg__innen { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "bild"; align-items: start; }

  .abschnitt__innen { grid-template-columns: minmax(0, 1fr); }
  .abschnitt h2 { position: static; margin-bottom: 1.75rem; }
}

@media (max-width: 40rem) {
  .eintrag {
    grid-template-columns: minmax(0, 1fr) 5.5rem;
    grid-template-areas: "datum datum" "text bild";
    column-gap: 1.1rem;
    row-gap: .35rem;
  }
  .eintrag--ohne-bild { grid-template-columns: minmax(0, 1fr); grid-template-areas: "datum" "text"; }
  .eintrag__bild { width: 5.5rem; }
  .kalender iframe { height: 32rem; }
  .kontakt dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kontakt dd { margin-bottom: .9rem; }
}