/*******************************************************************************
 galerie.css – Galerie-Unterseiten (fotogalerie/<name>/index.html), dunkles Design
 Body: <body class="dunkel galerie">. Lädt nach site.css, kopf.css und diashow.css
 (Vorschaubilder #thumbs und Overlay-Diashow: diashow.css + ../js/diashow.js; hier nur Variablen/Farben).
 Aufbau: header.kopf (Banner) → main > article.gtext (Beschreibung, 2 Spalten) →
 section.videos (Kurzvideos, Textliste mit Symbol) → section.fotos (#thumbs).
 Titelfarbe/Akzent: Variablen --h2, --h3, --akzent (Goldbraun-Ton, unten).
*******************************************************************************/

body.galerie {
  --bg: #232323; --rand: #444; --text-leise: #b0b0b0; --gruen: var(--gelb);
  --h2: #c4996b; --h3: #c4996b; --akzent: #c4996b;
}

main { padding-top: 24px; }
.kopf .box { --oben: .3; --unten: .55; }

/* ---------- Beschreibung: 2 Spalten (mind. 24 rem breit), sonst 1 Spalte ---------- */
.gtext { margin-top: 28px; columns: 2 24rem; column-gap: 40px; }
.gtext h2 { column-span: all; margin: 0 0 8px; font-size: 1.35rem; color: var(--h2); }
.gtext h3 { margin: 18px 0 6px; font-size: 1.05rem; color: var(--h3); break-after: avoid; }
.gtext p { margin: 0 0 12px; }
.gtext .route { font-weight: 600; }

/* Normaler Link im Text: weiss, punktiert unterstrichen (2 px, Akzentfarbe); Hover: durchgezogen (2 px) und Text in Akzentfarbe.
   Wichtig: einzelne text-decoration-Eigenschaften mit festem Farbwert – die Kurzschreibweise mit var(--akzent) zeigte auf dem iPhone (Safari/Firefox, iOS 18) keine Linie. */
.gtext a {
  color: var(--text);
  text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: #c4996b; text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.gtext a:hover, .gtext a:focus-visible { color: #c4996b; text-decoration-style: solid; }

/* ---------- Kurzvideos: Textliste in Spalten, Symbol "Play im Rechteck" (SVG als Maske) ---------- */
.videos { margin-top: 28px; }
.videos h2 { margin: 0 0 4px; font-size: 1.35rem; color: var(--h2); }
.videos .klein { margin: 0 0 10px; color: var(--text-leise); font-size: .9rem; }
.videos ul { list-style: none; margin: 0; padding: 0; display: block; columns: 3 13rem; column-gap: 24px; }
.videos li { margin: 0 0 6px; break-inside: avoid; }
.videos a { display: inline-flex; align-items: center; gap: .5em; color: var(--text); text-decoration: none; }
.videos a:hover, .videos a:focus-visible { color: var(--akzent); text-decoration: underline; text-underline-offset: 3px; }
.videos a::before {
  content: ""; flex: none; width: 1.45em; height: 1.45em;
  background: var(--akzent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5 4h14a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3zm0 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zm5 3v6l5-3z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5 4h14a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3zm0 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zm5 3v6l5-3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Fotos: Vorschaubilder und Diashow kommen aus diashow.css, hier nur die Farben/Rahmen ---------- */
.fotos { margin-top: 32px; }
.fotos h2 { font-size: 1.35rem; color: var(--h2); margin: 0 0 10px; }
/* Kamera-Angabe unter "Fotos" (kleine Schrift wie bei den Videos); der Link (a.dia-einzel) öffnet das Kamerafoto im Einzelfoto-Overlay.
   Wie .gtext a: nur Einzel-Eigenschaften mit festem Farbwert (iOS). */
.fotos .klein { margin: -4px 0 12px; color: var(--text-leise); font-size: .9rem; }
.fotos .klein a {
  color: var(--text-leise);                  /* gleiches Hellgrau wie der umgebende kleine Text */
  text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: #c4996b; text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.fotos .klein a:hover, .fotos .klein a:focus-visible { color: #c4996b; text-decoration-style: solid; }
body.galerie {
  --thumb-padding: 4px;
  --thumb-rahmen: #fff; --thumb-rahmen-dicke: 1px;     /* weisser Rahmen eng ums Bild */
  --thumb-hover-outline: none; --thumb-hover-rahmen: var(--akzent);
}

.fuss { border-color: var(--rand); }