/* ---------- Selbst ausgelieferte Schriften ----------
   Liegen unter assets/fonts/, damit beim Seitenaufruf keine Verbindung zu
   fremden Servern entsteht. Alle verwendeten Schriften stehen unter der
   SIL Open Font License. Pfade sind relativ zu dieser Datei. */

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/source-sans-3-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/source-sans-3-600.woff2") format("woff2");
}

/* Hero Guitars — private Sammlung Ibanez-Signature-Gitarren
   Einthemig dunkel: die Seite lebt von Gitarrenfotos auf dunklem Grund. */

:root {
  /* Grundton uebernommen aus dem alten Stylesheet: body{background-color:#2E3947} */
  --grund:      #2E3947;
  --grund-hoch: #384555;
  --linie:      #4A5868;
  --linie-hell: #5D6E81;
  --text:       #ECEAE5;
  --text-leise: #AAB6C4;
  --messing:    #C9922E;
  --tafel:      #F2F1EE;   /* heller Bildgrund - Anlehnung an den weissen
                              Inhaltskasten der alten Seite, minimal warm
                              statt Reinweiss, damit es auf Dunkel nicht grellt */
  --messing-hell:#E0AC4A;

  /* Grotesk statt der runden Baloo 2 - naeher an der alten Seite, die ihre
     Wortmarke als Arial-Black-Grafik gesetzt hatte. Systemschriften, also
     kein zusaetzlicher Download. */
  --schrift-display: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
  --schrift-marke:   "Arial Black", "Arial Bold", Gadget, Helvetica, Arial, sans-serif;
  --schrift-text:    "Source Sans 3", -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --mass: clamp(1rem, 4vw, 2rem);
  --bahn: 1180px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.bahn {
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: var(--mass);
}
.bahn--schmal { max-width: 68ch; }

/* ---------- Kopf ---------- */

.kopf {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: rgba(46, 57, 71, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}
.kopf__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 2rem;
  padding-block: 0.9rem;
}
.wortmarke {
  font-family: var(--schrift-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  line-height: 1;
}
.wortmarke span { color: var(--messing); }

.navi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.35rem;
  margin-left: auto;
  min-width: 0;
  font-family: var(--schrift-text);
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.navi a {
  color: var(--text-leise);
  text-decoration: none;
  padding-block: 0.2rem;
  border-bottom: 1px solid transparent;
}
.navi a:hover, .navi a:focus-visible { color: var(--text); border-bottom-color: var(--messing); }
.navi a[aria-current="page"] { color: var(--messing); }

/* ---------- Typografie ---------- */

h1, h2, h3 {
  font-family: var(--schrift-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2.6rem, 9vw, 5rem); }
h2 { font-size: clamp(1.8rem, 5vw, 2.8rem); }
h3 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); }

p { margin: 0 0 1.1em; }
a { color: var(--messing-hell); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--messing);
  outline-offset: 3px;
}

.kennung {
  font-family: var(--schrift-text);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--messing);
  margin: 0 0 0.6rem;
}
.leise { color: var(--text-leise); }
.vorspann { font-size: 1.2rem; line-height: 1.6; }

/* ---------- Masthead ---------- */

.masthead { padding-block: clamp(3rem, 9vw, 5.5rem) clamp(2rem, 6vw, 3.5rem); }
.masthead--figur { padding-block: clamp(3.5rem, 10vw, 6rem) clamp(3rem, 8vw, 4.5rem); }
.masthead h1 { margin-bottom: 0.6rem; }
.masthead__unter {
  font-family: var(--schrift-text);
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  letter-spacing: 0;
  color: var(--text-leise);
  margin: 0;
}
.regel { height: 1px; background: var(--linie); border: 0; margin: 0; }

/* Die Kulissen hinter den Seitenkoepfen reichen ueber die Bahn hinaus bis an
   den Rand des Fensters (inset-inline: calc(50% - 50vw)). 100vw zaehlt aber
   die Breite der senkrechten Bildlaufleiste mit - dadurch ragen sie um deren
   Breite nach rechts hinaus und die Seite bekommt eine waagerechte Leiste.
   clip statt hidden, weil hidden einen Scroll-Container erzeugen wuerde und
   damit position:sticky im Kopf brechen koennte. Der Lichtkasten haengt an
   document.body, liegt also ausserhalb und wird nicht beschnitten. */
main { overflow-x: clip; }

/* ---------- Abschnitte ---------- */

.abschnitt { padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.abschnitt + .abschnitt { padding-block-start: 0; }
.abschnitt__kopf { margin-bottom: 2rem; }

/* ---------- Künstler-Raster (Startseite) ---------- */

.kuenstler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
}
.kuenstler__karte {
  background: var(--grund);
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: background 0.18s ease;
}
.kuenstler__karte:hover, .kuenstler__karte:focus-visible { background: var(--grund-hoch); }
.kuenstler__karte h3 { font-size: 1.5rem; }
.kuenstler__karte .serie {
  font-family: var(--schrift-text);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  color: var(--messing);
  text-transform: uppercase;
}
.kuenstler__karte p { font-size: 0.95rem; color: var(--text-leise); margin: 0; }
.kuenstler__karte .pfeil { color: var(--messing); font-family: var(--schrift-mono); font-size: 0.78rem; margin-top: auto; }

/* ---------- Gitarren-Datenblatt ---------- */

.gitarren { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }

.gitarre {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--linie);
}
.gitarre:first-child { border-top: 0; padding-top: 0; }

.gitarre__bild { margin: 0; }
.gitarre__bild img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid var(--linie);
}
.gitarre__bild figcaption {
  font-family: var(--schrift-mono);
  font-size: 0.72rem;
  color: var(--text-leise);
  margin-top: 0.6rem;
  letter-spacing: 0.04em;
}

.platzhalter {
  aspect-ratio: 4 / 5;
  max-width: 100%;
  border: 1px dashed var(--linie-hell);
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(201,146,46,0.045) 11px 22px),
    var(--grund-hoch);
  display: grid;
  place-content: center;
  gap: 0.4rem;
  text-align: center;
  padding: 1.5rem;
}
.platzhalter b {
  font-family: var(--schrift-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--messing);
  text-transform: uppercase;
  font-weight: 400;
}
.platzhalter span { font-family: var(--schrift-mono); font-size: 0.72rem; color: var(--text-leise); }

.specs {
  margin: 1.25rem 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1.25rem;
  font-family: var(--schrift-mono);
  font-size: 0.82rem;
  line-height: 1.9;
  font-variant-numeric: tabular-nums;
}
.specs dt {
  color: var(--text-leise);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.specs dd { margin: 0; }
.specs dt, .specs dd { border-top: 1px solid var(--linie); padding-top: 0.35rem; }
.specs dt:first-of-type, .specs dd:first-of-type { border-top: 0; }

.luecke {
  border: 1px dashed var(--linie-hell);
  background: var(--grund-hoch);
  padding: 1.25rem 1.5rem;
  font-family: var(--schrift-mono);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-leise);
}
.luecke b { color: var(--messing); font-weight: 400; }

/* ---------- Hinweiskasten ---------- */

.hinweis {
  border-left: 2px solid var(--messing);
  padding: 0.25rem 0 0.25rem 1.25rem;
  color: var(--text-leise);
  font-size: 0.98rem;
}
.hinweis strong { color: var(--text); font-weight: 600; }

/* ---------- Fuß ---------- */

.fuss {
  border-top: 1px solid var(--linie);
  margin-top: clamp(3rem, 8vw, 5rem);
  padding-block: 2.5rem 3rem;
  font-family: var(--schrift-text);
  font-size: 0.86rem;
  letter-spacing: 0;
  color: var(--text-leise);
}
.fuss__innen { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: baseline; }
.fuss a { color: var(--text-leise); text-decoration: none; border-bottom: 1px solid var(--linie-hell); }
.fuss a:hover { color: var(--messing); }
.fuss__recht { margin-left: auto; }

/* ---------- Schmal ---------- */

@media (max-width: 720px) {
  .gitarre { grid-template-columns: 1fr; }
  .fuss__recht { margin-left: 0; }
  .kopf__innen { gap: 0.6rem; }
  .navi { margin-left: 0; width: 100%; gap: 0.35rem 1rem; font-size: 0.72rem; }
  .wortmarke { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* ---------- Instrumenten-Raster ---------- */

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.instrument { display: flex; flex-direction: column; gap: 0.7rem; }

.instrument__bild {
  margin: 0;
  aspect-ratio: 3 / 4;
  background: var(--tafel);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  place-content: center;
  overflow: hidden;
}
.instrument__bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.instrument__bild.ist-leer {
  border-style: dashed;
  border-color: var(--linie-hell);
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, rgba(201,146,46,0.05) 9px 18px),
    var(--grund-hoch);
}
.instrument__bild .datei {
  font-family: var(--schrift-mono);
  font-size: 0.68rem;
  color: var(--text-leise);
  letter-spacing: 0.04em;
  padding: 0.5rem;
  text-align: center;
}

.instrument__name {
  font-family: var(--schrift-mono);
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  color: var(--text);
  margin: 0;
}
.instrument__reihe {
  font-family: var(--schrift-text);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--messing);
  margin: 0;
}

.zaehler {
  font-family: var(--schrift-text);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin: 0 0 2rem;
}
.zaehler b { color: var(--messing); font-weight: 600; }

.unbestaetigt {
  border-left: 2px solid var(--linie-hell);
  padding-left: 1.25rem;
  margin-bottom: 2rem;
  font-family: var(--schrift-mono);
  font-size: 0.78rem;
  line-height: 1.8;
  color: var(--text-leise);
}


/* ---------- Schriftzug (Nachbau von ibanez_hero_guitars.png) ----------
   Die alte Seite hatte ihre Wortmarke als Grafik: fette Grotesk in
   Kleinbuchstaben mit Chrom-Verlauf (hell -> dunkel -> hell -> dunkel) und
   weichem Schlagschatten. Die Verlaufsstufen sind aus der Originaldatei
   abgetastet (Spalte durch einen Buchstabenstamm, Zeile fuer Zeile).
   Hier als Text gesetzt statt als Bild, damit er in jeder Groesse scharf
   bleibt und sich auswaehlen laesst. */

.schriftzug {
  font-family: var(--schrift-marke);
  font-weight: 900;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  color: #E4E7EB;                      /* Rückfallebene */
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.65));
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .schriftzug {
    background-image: linear-gradient(to bottom,
      #F6F7F8  0%,
      #F0F1F2 14%,
      #DFE1E4 21%,
      #A8ADB3 30%,
      #7C8186 40%,
      #C2C8CF 56%,
      #AEB5BE 64%,
      #767E89 78%,
      #949FAC 92%,
      #8A95A3 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* Kopfzeile - flacherer, hellerer Verlauf: bei 1,75 rem waere der dunkle
   Teil des Chrom-Verlaufs auf dem dunklen Grund zu kontrastarm. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .wortmarke.schriftzug {
    background-image: linear-gradient(to bottom,
      #FFFFFF 0%, #E8EAED 40%, #AEB6C0 72%, #8A94A1 100%);
  }
}

.wortmarke.schriftzug {
  font-size: 1.75rem;
  letter-spacing: 0;
  line-height: 1.05;
  padding-block: 0.08em 0.24em;       /* Unterlängen nicht abschneiden */
}
.wortmarke.schriftzug span {
  -webkit-text-fill-color: var(--messing);
  color: var(--messing);
}

/* Startseite: der große Schriftzug anstelle des alten Kopfbilds */
.masthead h1.schriftzug {
  font-size: clamp(2.8rem, 11vw, 6.5rem);
  line-height: 1;
  letter-spacing: -0.015em;
  padding-block: 0.08em 0.28em;
  margin-bottom: 0.1rem;
}

@media (max-width: 720px) {
  .wortmarke.schriftzug { font-size: 1.5rem; }
}


/* ---------- Gitarre im Kopf der Startseite ----------
   Die Silhouette aus dem alten Seitenkopf (pics/guitar.png), diesmal als
   freigestelltes Element neben dem Schriftzug statt als Hintergrundbild. */

.masthead--bild {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.masthead__text { min-width: 0; }

.masthead__gitarre {
  height: clamp(260px, 30vw, 430px);
  width: auto;
  justify-self: end;
  filter: brightness(1.12) drop-shadow(0 14px 34px rgba(0, 0, 0, 0.45));
}

@media (max-width: 720px) {
  .masthead--bild { grid-template-columns: 1fr; justify-items: center; }
  .masthead__text { justify-self: start; }
  .masthead__gitarre { height: 230px; justify-self: center; }
}


/* ---------- Lichtkasten ---------- */

.instrument__bild.ist-klickbar { cursor: zoom-in; transition: border-color 0.18s ease; }
.instrument__bild.ist-klickbar:hover,
.instrument__bild.ist-klickbar:focus-visible { border-color: var(--messing); }
.instrument__bild.ist-klickbar:focus-visible { outline: 2px solid var(--messing); outline-offset: 3px; }

body.ist-blockiert { overflow: hidden; }

.lichtkasten {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(22, 28, 36, 0.985);
  backdrop-filter: blur(10px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.25rem, 2vw, 1.5rem);
  padding: clamp(3.5rem, 8vw, 5rem) clamp(0.5rem, 3vw, 2.5rem);
}

/* Muss nach der display-Regel stehen: `display: grid` einer Klasse schlaegt
   sonst das [hidden]-Attribut aus dem Browser-Standard, und das Overlay
   liesse sich nicht mehr schliessen. */
.lichtkasten[hidden] { display: none; }

.lichtkasten__inhalt {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  min-width: 0;
}
.lichtkasten__inhalt img {
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--tafel);
}
.lichtkasten__inhalt figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.4rem 1.25rem;
  text-align: center;
}
.lichtkasten__reihe {
  font-family: var(--schrift-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--messing);
}
.lichtkasten__titel { font-family: var(--schrift-mono); font-size: 0.95rem; color: var(--text); }
.lichtkasten__zaehler {
  font-family: var(--schrift-mono);
  font-size: 0.75rem;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

/* ---------- Datenblatt im Lichtkasten ----------
   Traegt eine Kachel ein .instrument__daten mit sich, setzt das Skript die
   Klasse hat-daten. Dann wird aus der gestapelten Ansicht ein Zweispalter:
   Bild links, Angaben rechts. Ohne Datenblatt bleibt alles wie bisher.
   Die Angaben stehen im HTML der Seite, nicht in einer Datendatei - so sind
   sie auch ohne Skript im Dokument und fuer Suchmaschinen lesbar. */

.lichtkasten.hat-daten { align-items: start; overflow-y: auto; }
.lichtkasten.hat-daten .lichtkasten__inhalt,
.lichtkasten.hat-daten .lichtkasten__blatt { align-self: center; }

.lichtkasten.hat-daten .lichtkasten__inhalt {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(18rem, 26rem);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.lichtkasten.hat-daten .lichtkasten__inhalt img { max-height: 76vh; }

.lichtkasten.hat-daten figcaption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.35rem;
}
.lichtkasten.hat-daten .lichtkasten__titel {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  line-height: 1.15;
}
.lichtkasten.hat-daten .lichtkasten__zaehler { order: 3; margin-top: 0.9rem; }
.lichtkasten__daten { order: 2; width: 100%; }
.lichtkasten__daten .specs { margin-top: 0.9rem; }
.lichtkasten__daten .instrument__text {
  font-family: var(--schrift-text);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-leise);
  margin: 1.1rem 0 0;
}
.lichtkasten__daten .instrument__text em { color: var(--text); font-style: italic; }

/* Das Datenblatt gehoert in den Lichtkasten, nicht ins Raster. */
.instrument__daten[hidden] { display: none; }

@media (max-width: 860px) {
  /* Zu schmal fuer zwei Spalten: Bild oben, Angaben darunter. Das Bild wird
     kleiner, damit vom Datenblatt noch etwas zu sehen ist. */
  .lichtkasten.hat-daten { align-items: start; }
  .lichtkasten.hat-daten .lichtkasten__inhalt {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .lichtkasten.hat-daten .lichtkasten__inhalt img { max-height: 44vh; }
  .lichtkasten.hat-daten figcaption { align-items: flex-start; width: 100%; }

  /* Die Pfeile gehoeren unter den Inhalt. Im Raster bekam ich das nicht
     verlaesslich hin: das Overlay hat drei Spalten (Pfeil | Inhalt | Pfeil),
     und sobald der Inhalt hoeher wurde als sein Rasterfeld, ragte er darueber
     hinaus und die Pfeile lagen im Text. Schmal deshalb kein Raster, sondern
     Flex mit Umbruch - Flex-Elemente koennen sich nicht ueberlappen. */
  .lichtkasten.hat-daten {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    justify-content: space-between;
  }
  .lichtkasten.hat-daten[hidden] { display: none; }   /* muss nach display:flex stehen */

  .lichtkasten.hat-daten .lichtkasten__inhalt {
    order: 1;
    flex: 0 0 100%;
    align-self: auto;
  }
  .lichtkasten.hat-daten .lichtkasten__blatt {
    order: 2;
    flex: 0 0 48%;
    position: static;
    align-self: auto;
    width: auto;
    max-width: none;
    height: 3.25rem;
    margin: 1.25rem 0 0;
    background: transparent;
    backdrop-filter: none;
    border-width: 1px;
  }
}

.lichtkasten__zu, .lichtkasten__blatt {
  background: transparent;
  border: 1px solid var(--linie);
  color: var(--text-leise);
  font-family: var(--schrift-text);
  cursor: pointer;
  line-height: 1;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.lichtkasten__zu:hover, .lichtkasten__blatt:hover,
.lichtkasten__zu:focus-visible, .lichtkasten__blatt:focus-visible {
  color: var(--text); border-color: var(--messing);
}
.lichtkasten__zu {
  position: absolute;
  top: clamp(0.75rem, 3vw, 1.5rem);
  right: clamp(0.75rem, 3vw, 1.5rem);
  width: 2.75rem; height: 2.75rem;
  font-size: 1.6rem;
}
.lichtkasten__blatt { width: 2.75rem; height: 4.5rem; font-size: 1.9rem; }

@media (max-width: 720px) {
  .lichtkasten { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) auto; }
  .lichtkasten__inhalt { grid-row: 1; }
  .lichtkasten__blatt { height: 3rem; width: 100%; grid-row: 2; }
  .lichtkasten__blatt--zurueck { grid-column: 1; justify-self: start; max-width: 45%; }
  .lichtkasten__blatt--vor { grid-column: 1; justify-self: end; max-width: 45%; margin-top: -3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .instrument__bild.ist-klickbar, .lichtkasten__zu, .lichtkasten__blatt { transition: none; }
}


/* ---------- Portraets auf den Kuenstlerkarten ---------- */

.kuenstler__portrait {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--linie);
  margin-bottom: 0.35rem;
}
.kuenstler__karte:hover .kuenstler__portrait,
.kuenstler__karte:focus-visible .kuenstler__portrait { border-color: var(--messing); }

/* ---------- Kulisse hinter dem Seitenkopf ----------
   Grundgeruest (Lage, Vollbreite, Ausblendung nach unten) fuer jeden
   Seitenkopf mit Bild. Das Bild selbst setzen die Varianten darunter:
   --wechsel auf der Startseite (vier Ebenen im Wechsel), --figur auf den
   Kuenstlerseiten. Das hier eingetragene hintergrund-kraeftig.jpg ist nur
   noch der Rueckfall, falls eine Seite --kulisse ohne Variante benutzt. */

.masthead--kulisse {
  position: relative;
  isolation: isolate;
  min-height: clamp(340px, 42vw, 560px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.masthead--kulisse::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  inset-inline: calc(50% - 50vw);
  /* Bild in voller Staerke, darueber ein dunkler Schleier. Links, wo der
     Schriftzug steht, deckt er fast ganz ab; nach rechts wird er duenner,
     sodass die Figuren sichtbar bleiben. Eine blosse Deckkraft-Absenkung
     wuerde das Bild gleichmaessig ausloeschen. */
  background-image:
    linear-gradient(to right,
      rgb(46, 57, 71) 0%,
      rgb(46, 57, 71) 34%,
      rgba(46, 57, 71, 0.90) 45%,
      rgba(46, 57, 71, 0.52) 58%,
      rgba(46, 57, 71, 0.20) 78%,
      rgba(46, 57, 71, 0.06) 100%),
    url("../bilder/hintergrund-kraeftig.jpg");
  background-size: cover, contain;
  background-position: center, right center;
  background-repeat: no-repeat, no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
  pointer-events: none;
}

@media (max-width: 720px) {
  /* Auf schmalen Schirmen liegt der Text ueber der ganzen Breite,
     deshalb der Schleier durchgehend dichter. */
  .masthead--kulisse::before {
    background-image:
      linear-gradient(to right,
        rgba(46, 57, 71, 0.92) 0%,
        rgba(46, 57, 71, 0.68) 100%),
      url("../bilder/hintergrund-kraeftig.jpg");
  }
}


/* ---------- Kulisse der Kuenstlerseiten ----------
   Je Seite der zugehoerige Gitarrist, aus bg.jpg der alten Seite
   herausgeschnitten. Rechts platziert und in Bandhoehe skaliert, damit die
   Figur nicht ueber die Breite gezerrt wird; der Schleier deckt links,
   wo der Name steht. */

.masthead--figur::before {
  background-image:
    linear-gradient(to right,
      rgba(46, 57, 71, 0.95) 0%,
      rgba(46, 57, 71, 0.88) 42%,
      rgba(46, 57, 71, 0.42) 68%,
      rgba(46, 57, 71, 0.16) 100%),
    var(--kulisse);
  background-size: cover, auto 150%;
  background-position: center, 80% 22%;
  background-repeat: no-repeat, no-repeat;
}

@media (max-width: 720px) {
  .masthead--figur::before {
    background-image:
      linear-gradient(to right,
        rgba(46, 57, 71, 0.94) 0%,
        rgba(46, 57, 71, 0.70) 100%),
      var(--kulisse);
    background-size: cover, auto 130%;
    background-position: center, 95% 18%;
  }
}

/* Pfade MUESSEN hier stehen: ein url() in einer inline gesetzten
   Custom Property wird relativ zu diesem Stylesheet aufgeloest,
   nicht relativ zum HTML-Dokument. */
.figur--jem10th { --kulisse: url("../bilder/kulisse-jem10th.jpg"); }
.figur--steve-vai { --kulisse: url("../bilder/kulisse-steve-vai.jpg"); }
.figur--joe-satriani { --kulisse: url("../bilder/kulisse-joe-satriani.jpg"); }
.figur--paul-gilbert { --kulisse: url("../bilder/kulisse-paul-gilbert.jpg"); }
.figur--john-petrucci { --kulisse: url("../bilder/kulisse-john-petrucci.jpg"); }

/* ---------- Wechselbild auf der Startseite ----------
   Die alte Seite liess das Bild des Gitarristen im Sekundentakt springen.
   Derselbe Wechsel, nur ruhig: fuenf Sekunden je Bild, 1,2 Sekunden Blende.
   Vier Ebenen uebereinander, jede mit eigener Verzoegerung - reines CSS,
   kein Skript. Wer Bewegung abgestellt hat, sieht nur das erste Bild. */

.masthead--wechsel::before { display: none; }

.wechsler {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  inset-inline: calc(50% - 50vw);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
}

.wechsler__bild {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image: var(--kulisse);
  background-repeat: no-repeat;
  background-size: auto 150%;
  background-position: 80% 22%;
  animation: wechsel 25s linear infinite both;
}
.wechsler__bild:nth-child(2) { animation-delay:  5s; }
.wechsler__bild:nth-child(3) { animation-delay: 10s; }
.wechsler__bild:nth-child(4) { animation-delay: 15s; }
.wechsler__bild:nth-child(5) { animation-delay: 20s; }

/* Die erste Ebene ist die JEM 10th Anniversary aus dem Kopfbanner der alten
   Seite. Sie ist schon im Format des Seitenkopfs aufgebaut, deshalb cover
   statt der Hochkant-Einpassung der Gitarristen. */
.wechsler__bild--gitarre {
  background-size: cover;
  background-position: center;
}

@keyframes wechsel {
  0%   { opacity: 0; }    /* 1,2 s aufblenden ... */
  4.8% { opacity: 1; }
  20%  { opacity: 1; }    /* ... 5 s stehen ... */
  24.8%{ opacity: 0; }    /* ... 1,2 s abblenden, waehrend das naechste kommt */
  100% { opacity: 0; }
}

/* Der Schleier liegt ueber allen vier Ebenen, damit der Schriftzug links
   immer auf demselben ruhigen Grund steht. */
.wechsler::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right,
    rgba(46, 57, 71, 0.96) 0%,
    rgba(46, 57, 71, 0.88) 40%,
    rgba(46, 57, 71, 0.44) 66%,
    rgba(46, 57, 71, 0.14) 100%);
}

@media (max-width: 720px) {
  .wechsler__bild {
    background-size: auto 130%;
    background-position: 95% 18%;
  }
  .wechsler__bild--gitarre { background-size: cover; background-position: 62% center; }
  .wechsler::after {
    background-image: linear-gradient(to right,
      rgba(46, 57, 71, 0.94) 0%,
      rgba(46, 57, 71, 0.70) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wechsler__bild { animation: none; }
  .wechsler__bild:first-child { opacity: 1; }
}



/* ---------- Baureihe auf der Studio-Seite ----------
   Einzelbilder aus der Filmaufnahme von 2006. Anders als die Instrumente
   sind das Fotos, also dunkler Grund und formatfuellend statt eingepasst. */

.raster--bau { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.raster--bau .instrument__bild {
  aspect-ratio: 4 / 3;
  background: var(--grund-hoch);
  border-color: var(--linie);
}
.raster--bau .instrument__bild img { object-fit: contain; }

.instrument__schritt {
  font-family: var(--schrift-text);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-leise);
  margin: 0;
}