/* ------------------------------------------------------------------ *
 *  galerie.css — die Bilderfolge, Aufmacher wie Werbung
 *
 *  Wird von der Einstiegsseite und von beiden Anwendungen geladen. Die
 *  Farbnamen sind dieselben wie in site.css, app.css und mindmap.css;
 *  die Ersatzwerte dahinter greifen nur, falls die Folge je auf einer
 *  Seite ohne diese Vorlagen landet.
 * ------------------------------------------------------------------ */

.gl{
  --gl-linie: var(--line, #E4E0D8);
  --gl-blatt: var(--card, #FFFFFF);
  --gl-text:  var(--ink, #1F1E1C);
  --gl-grau:  var(--ink-2, #6A665E);
  --gl-matt:  var(--ink-3, #969187);
  display:flex; flex-direction:column; gap:12px;
  font-family:inherit;
}

/* --- Bühne --------------------------------------------------------- */
.gl-buehne{
  display:flex; flex-direction:column;
  aspect-ratio:1240 / 613;
  border:1px solid var(--gl-linie);
  border-radius:8px;
  overflow:hidden;
  background:var(--gl-blatt);
}
/* Bilder und Pfeile. Ohne Titel füllt das Feld die ganze Bühne. */
.gl-feld{ position:relative; flex:1; min-height:0 }
/* `contain` und nicht `cover`: die Aufnahmen sind bereits alle auf
   dasselbe Mass gebracht und mit ihrer eigenen Grundfarbe aufgefüllt.
   Ein Beschnitt würde am Rand Beschriftungen abschneiden. */
.gl-bild{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity .3s ease;
}
.gl-bild.an{ opacity:1 }
@media(prefers-reduced-motion:reduce){ .gl-bild{ transition:none } }

/* Die beiden Pfeile im Bild. Sie sind die einzige Bedienung neben den
   Punkten und deshalb immer sichtbar. */
.gl-pfeil{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; padding:0;
  border:1px solid var(--gl-linie);
  border-radius:50%;
  background:rgba(255,255,255,.86);
  color:var(--gl-text);
  cursor:pointer;
  opacity:.9; transition:opacity .2s;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
}
.gl-pfeil:hover{ opacity:1 }
.gl-pfeil:disabled{ opacity:0; cursor:default }
.gl-links{ left:12px }
.gl-rechts{ right:12px }
.gl-pfeil::before{
  content:""; position:absolute; top:50%; left:50%;
  width:10px; height:10px;
  border-top:2px solid currentColor; border-right:2px solid currentColor;
}
.gl-links::before{ transform:translate(-35%,-50%) rotate(-135deg) }
.gl-rechts::before{ transform:translate(-65%,-50%) rotate(45deg) }

/* Der Titel steht über der Aufnahme und nicht darauf: eine
   Bildschirmaufnahme ist als Grund immer unruhig, und auf der
   Schlüsseltafel läge er ausgerechnet über deren eigenem Titel. */
.gl-titel{
  flex:none;
  padding:9px 14px;
  text-align:center;
  font-size:14px; font-weight:600; letter-spacing:-.01em;
  color:var(--gl-text);
  background:var(--gl-blatt);
  border-bottom:1px solid var(--gl-linie);
}

/* Die Punkte stehen mittig unter dem Bild. */
.gl-punkte{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:-2px; flex-wrap:wrap;
}
.gl-punkt{
  width:8px; height:8px; padding:0;
  border:1px solid var(--gl-matt);
  border-radius:50%;
  background:none;
  cursor:pointer;
}
.gl-punkt.an{ background:var(--gl-text); border-color:var(--gl-text) }
.gl-punkt:hover{ border-color:var(--gl-text) }

/* Unter dem Bild: Legende links, was der Aufrufer anhängt rechts. */
.gl-unten{
  display:flex; align-items:flex-start; gap:18px;
}
.gl-legende{
  margin:0; flex:1;
  font-size:13px; line-height:1.45;
  color:var(--gl-grau);
  min-height:2.9em;
}

/* Auf schmalen Fenstern kleinere Pfeile und die Legende unter dem Bild
   statt daneben. Die Regeln standen bis zum 8. September 2026 in
   werbung.css und zeigten dort nach dem Umzug ins Leere. */
@media(max-width:600px){
  .gl-legende{ font-size:12.5px }
  .gl-unten{ flex-direction:column; gap:12px }
  .gl-pfeil{ width:32px; height:32px }
  .gl-titel{ font-size:13px; padding:7px 10px }
}

/* Im Ausdruck hat eine Bilderfolge nichts verloren. */
@media print{
  .gl{ display:none !important }
}