/* Billboard „Fische sehen“ und der Layer mit der Bildergalerie.
   Gestaltung wie das Quiz-Billboard; die ganze Fläche ist klickbar – dazwischen nichts positionieren. */
.galerie-billboard {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 36px 0 8px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 56px);
  border-radius: var(--radius); color: var(--on-deep);
  background:
    radial-gradient(55% 80% at 90% 20%, rgba(98, 211, 197, .26), transparent 70%),
    linear-gradient(135deg, var(--deep-1) 0%, var(--deep-2) 100%);
  box-shadow: var(--shadow);
}
.galerie-billboard::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(105deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 64px);
}
.galerie-eyebrow {
  margin: 0 0 8px; font: 600 .78rem var(--f-body); letter-spacing: .14em;
  text-transform: uppercase; color: var(--glow);
}
.galerie-billboard h2 { margin: 0; font: 600 clamp(2rem, 4.2vw, 3rem)/1.06 var(--f-display); letter-spacing: -.02em; }
.galerie-billboard p.galerie-lede { margin: 12px 0 0; max-width: 46ch; color: var(--on-deep-2); font-size: 1.05rem; }
.galerie-start {
  margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px;
  border: 0; border-radius: 999px; background: var(--glow); color: #04282B;
  font: 600 1rem var(--f-body); cursor: pointer; transition: box-shadow .15s;
}
.galerie-start::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.galerie-billboard:hover .galerie-start { box-shadow: 0 0 0 4px rgba(98, 211, 197, .3); }
.galerie-start:focus-visible { outline: none; }
.galerie-start:focus-visible::after { outline: 3px solid var(--glow); outline-offset: -3px; }
.galerie-start svg { width: 16px; height: 16px; }
/* Zwei gezeichnete Fische rechts – wie beim Quiz-Billboard, nur ein anderes Paar.
   Reine Zierde, deshalb aria-hidden und ohne Fotos (die bräuchten einen Nachweis). */
.galerie-fische { pointer-events: none; width: clamp(200px, 26vw, 300px); height: auto; }
.galerie-fische .schwimmt-gross { animation: galerie-schwimmen 6s ease-in-out infinite; transform-origin: 55% 50%; }
/* Der Kleine schwimmt versetzt und etwas flotter – sonst wirken beide wie ein Block. */
.galerie-fische .schwimmt-klein { animation: galerie-schwimmen 4.2s ease-in-out infinite .8s; transform-origin: 40% 78%; }
@keyframes galerie-schwimmen {
  0%, 100% { transform: translate(0, 0) rotate(2deg); }
  50% { transform: translate(6px, -6px) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .galerie-fische .schwimmt-gross, .galerie-fische .schwimmt-klein { animation: none; }
}

@media (max-width: 860px) {
  .galerie-billboard {
    grid-template-columns: auto 1fr auto; grid-template-areas: "bild titel pfeil" "bild kurz pfeil";
    column-gap: 14px; row-gap: 0; margin: 28px 0 4px; padding: 12px 16px;
  }
  .galerie-text { display: contents; }
  /* Auf dem Handy nur der große Fisch, klein – der Kleine hätte keinen Platz. */
  .galerie-fische { grid-area: bild; width: 76px; }
  .galerie-fische .schwimmt-klein { display: none; }
  .galerie-billboard h2 { grid-area: titel; align-self: end; font-size: 1.3rem; }
  .galerie-eyebrow { grid-area: kurz; align-self: start; margin: 2px 0 0; font-size: .7rem; }
  .galerie-billboard p.galerie-lede { display: none; }
  .galerie-start { grid-area: pfeil; margin: 0; padding: 0; width: 40px; height: 40px; justify-content: center; font-size: 0; }
}

/* ---------- Layer ---------- */
/* Feste Größe: Beim Blättern darf der Kasten nicht springen, sonst rutscht einem der Knopf
   „Weiter“ unter dem Finger weg. Deshalb steht die Höhe fest, der Inhalt scrollt notfalls. */
.galerie-layer {
  width: min(680px, 94vw); height: min(760px, 88vh); padding: 0; overflow: hidden;
  border: 0; border-radius: var(--radius); background: var(--surface); color: var(--ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.galerie-layer[open] { display: flex; flex-direction: column; }
.galerie-kopf, .galerie-fuss { flex: none; }
.galerie-layer::backdrop { background: rgba(2, 18, 20, .82); }
.galerie-kopf {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 20px 12px; border-bottom: 1px solid var(--line);
}
.galerie-kopf h2 { margin: 0; font: 600 1.3rem var(--f-display); }
.galerie-kopf p { margin: 2px 0 0; font-size: .85rem; color: var(--ink-2); }
.galerie-zu {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--line); background: none; color: var(--ink-2); cursor: pointer;
}
.galerie-zu:hover { border-color: var(--accent); color: var(--accent); }
.galerie-zu svg { width: 13px; height: 13px; }
.galerie-inhalt { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px 20px; }

.galerie-bild { margin: 0; }
/* Alle Fotos bekommen denselben Rahmen; „contain“ schneidet nichts ab, sonst fehlten Flossen. */
.galerie-bild img {
  display: block; width: 100%; height: min(420px, 48vh); object-fit: contain;
  border-radius: 10px; background: var(--deep-1);
}
.galerie-bild figcaption { margin-top: 8px; font-size: .95rem; }
.galerie-name { font-weight: 600; color: inherit; text-underline-offset: 3px; }
.galerie-bild em { color: var(--ink-2); }
.galerie-werte { display: block; margin-top: 4px; font: .82rem/1.5 var(--f-mono, ui-monospace, monospace); color: var(--ink-2); }
.galerie-nachweis { display: block; margin-top: 4px; font-size: .72rem; color: var(--ink-2); }
.galerie-nachweis a { color: inherit; }

/* Anzeige als eigene Ansicht zwischen den Fischen */
/* Flexbox statt Grid: Ein Grid ohne feste Spalten legte auf schmalen Bildschirmen zwei Spalten an –
   der Text stand dann als schmale Säule neben einem zum Oval verzerrten Knopf. */
.galerie-werbung {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: min(420px, 48vh); text-align: center;
  padding: 24px 18px; border-radius: 10px; background: var(--sand-grund); border: 1px dashed var(--sand);
  /* Sandfarben wie die übrige Ausstattungs-Werbung (werbung.css) */
  --sand: #8A6533; --sand-grund: #F7F0E3;
}
@media (prefers-color-scheme: dark) {
  .galerie-werbung { --sand: #E2C089; --sand-grund: #2E2519; }
}

.galerie-werbung > * { flex: none; max-width: 100%; }
.galerie-werbung .ad-kennung { color: var(--sand); }
.galerie-werbung-text { margin: 0; max-width: 42ch; font-size: 1rem; }
.galerie-werbung-knopf {
  margin-top: 4px; padding: 10px 20px; border-radius: 999px;
  background: var(--sand); color: var(--surface); font: 600 .95rem var(--f-body); text-decoration: none;
}
.galerie-werbung .ad-klein { margin: 2px 0 0; font-size: .72rem; color: var(--ink-2); }
.galerie-ende { margin: 10px 0 0; font-size: .9rem; color: var(--ink-2); }
.galerie-ende button {
  border: 1px solid var(--line); background: none; color: inherit; cursor: pointer;
  padding: 4px 12px; border-radius: 999px; font: 500 .88rem var(--f-body);
}
.galerie-ende button:hover { border-color: var(--accent); color: var(--accent); }

/* Blätterleiste */
.galerie-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px 16px; border-top: 1px solid var(--line);
}
.galerie-zaehler { margin: 0; font-size: .85rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.galerie-blatt {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: none; color: var(--ink); font: 500 .9rem var(--f-body); cursor: pointer;
}
.galerie-blatt:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.galerie-blatt:disabled { opacity: .4; cursor: default; }
.galerie-blatt svg { width: 15px; height: 15px; }

/* Auf dem Handy niedrigeres Bild, damit Name, Wasserwerte und Fotonachweis ohne Scrollen zu sehen sind */
@media (max-width: 560px) {
  .galerie-kopf { padding: 14px 16px 10px; }
  .galerie-kopf p { font-size: .8rem; }
  .galerie-inhalt { padding: 12px 16px 16px; }
  .galerie-bild img { height: min(300px, 34vh); }
  .galerie-werbung { min-height: min(260px, 30vh); padding: 18px 14px; gap: 8px; }
  .galerie-werbung-text { font-size: .95rem; }
  .galerie-fuss { padding: 10px 16px 14px; }
  .galerie-blatt { padding: 8px 12px; }
}

@media print { .galerie-billboard, .galerie-layer { display: none !important; } }