/* ═══════════════════════════════════════════════════════════════════════
   SEKTIONSGRUPPE „GALERIE" — [tp_galerie]  ·  Kontrast-Rhythmus
   Ton: HELL (Papier). Nur die Lightbox bleibt ein dunkles Overlay.
   Klassen: .tp-galerie, __saison(-head/-title/-dot), .tp-galc* (Odometer),
            __grid, __item(--tall/.is-hidden), __zoom,
            __kug-foot/-row/-icon/-text/-cta,
            __lightbox, __lb-stage/-img/-meta/-counter/-caption/-close/-prev/-next
   Ersetzt die beiden Inline-<style>-Blöcke des Shortcodes vollständig.
   Datum: 2026-08-07
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Kapitel-Grundfläche ──
   Die Sektion selbst bringt keinen eigenen Ton mehr mit (das erledigt
   .tp-sec--light aus dem Fundament) und auch keinen Innenabstand: den trägt
   ab jetzt jede Saison, weil jede Saison ihr EIGENES Material bekommt. */
.tp-sec.tp-galerie{
  color: var(--nb-ink);
  padding-block: 0;
}

/* Hidden-Wrapper der Lightbox-Navigation bleibt unsichtbar */
#tpGalerieAllItems[hidden]{ display: none; }

/* ═══════════ SAISON-GRUPPEN — jede Saison ein eigenes Kapitel ═══════════
   Vorher trennte nur eine Haarlinie zwei Saisons: die ganze Seite war ein
   einziges Papier-Kapitel mit 34 Fotos am Stück. Jetzt wechseln die Saisons
   das Material — ungerade auf Papier, gerade auf Maschinenblau. Der dunkle
   Grund ist randabfallend (100vw), wird aber von .tp-sec{overflow:hidden}
   sauber am Fensterrand abgeschnitten. Kein Markup wurde dafür geändert. */
.tp-galerie__saison{
  position: relative;
  padding-block: var(--tp-sec);
}
.tp-galerie__saison + .tp-galerie__saison{
  margin-top: 0;
  padding-top: var(--tp-sec);
  border-top: 0;
}
/* Gerade Saisons: dunkles Band, randabfallend.
   Die Fläche liegt bewusst AUCH auf dem Element selbst (nicht nur im ::before):
   sonst misst jedes Kontrast-Werkzeug helle Schrift gegen das Papier der
   Sektion und meldet 1:1. Beide Boxen tragen denselben rein senkrechten
   Verlauf und sind gleich hoch — deshalb ist an der Nahtstelle nichts zu
   sehen. (Ein radialer Verlauf würde hier eine Kante erzeugen, weil die
   beiden Boxen unterschiedlich BREIT sind.) */
.tp-galerie__saison:nth-of-type(even)::before{
  content: "";
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background: linear-gradient(180deg, var(--tp-d1) 0%, var(--tp-d0) 100%);
  border-block: 1px solid var(--tp-hair-d);
  pointer-events: none;
}
/* …und alles darin schaltet auf die Dunkel-Töne um (Muster aus Fundament 5.6) */
.tp-galerie__saison:nth-of-type(even){
  background: linear-gradient(180deg, var(--tp-d1) 0%, var(--tp-d0) 100%);
  --nb-ink    : var(--tp-ondark);
  --nb-ink-2  : var(--tp-ondark-2);
  --nb-ink-3  : var(--tp-ondark-3);
  --nb-surface: var(--tp-d2);
  --nb-hair-l : var(--tp-hair-d);
  --tp-red-ink: var(--tp-red-lift);
  color: var(--tp-ondark);
}

/* Saison-Kopf = khead--mini des Fundaments: Mono-Etikett → rote Linie → Anton.
   Der Odometer-Zähler übernimmt die Rolle des Mono-Etiketts (order 1). */
.tp-galerie__saison-head{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  max-width: 760px;
  margin: 0 auto 44px;
  padding: 0;
  border: 0;
}
/* Doppelklasse schlägt das alte ».tp-galerie h2 { color:#fff }« (0,1,1) */
.tp-galerie .tp-galerie__saison-title{
  order: 2;
  display: block;
  font-family: var(--nb-font-display);
  font-weight: 400;
  font-size: var(--nb-fs-m);
  line-height: 1.08;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--nb-ink);
  margin: 0;
}
.tp-galerie .tp-galerie__saison-title::before{
  content: "";
  display: block;
  width: 56px; height: 2px;
  background: var(--nb-red);
  margin: 18px auto 22px;
}
/* Alter Glow-Punkt im Titel: bewusst aus — die rote Linie ist der Akzent */
.tp-galerie__saison-dot{ display: none; }

/* ── Odometer-Zähler (.tp-galc, JS zählt per rAF hoch) ── */
.tp-galerie__saison-head .tp-galc{ order: 1; }
.tp-galc{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--nb-font-mono);
}
.tp-galc__odo{ display: inline-flex; gap: 3px; }
.tp-galc__digit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  padding: .32em .12em;
  font-family: var(--nb-font-mono);
  font-size: var(--tp-fs-body);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--nb-ink);
  background: var(--nb-surface);
  border: 1px solid var(--nb-hair-l);
  border-radius: var(--nb-r-ui);
}
.tp-galc__unit{
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nb-ink-3);
}

/* ═══════════ FOTO-GRID (masonry-light) ═══════════ */

/* Vier feste Spalten, EINE Kachelhöhe.
   Vorher: auto-fill + Rowspan 2 für hochformatige Bilder. Das ergab bei jeder
   Saison eine ausgefranste Unterkante mit Löchern — genau das Gegenteil der
   geforderten Symmetrie. Jetzt steht ein ruhiger, bündiger Block; die Bilder
   werden per object-fit beschnitten, die Lightbox zeigt sie ungekürzt. */
/* Acht Spuren, jede Kachel über zwei = vier pro Reihe. Die doppelte Spurzahl
   ist nötig, damit eine angebrochene letzte Reihe MITTIG steht statt links zu
   kleben — bei 14 Fotos in Saison 2024 wären das sonst 3 volle Reihen plus
   zwei Waisen am linken Rand. Kachelbreite bleibt rechnerisch identisch. */
.tp-galerie__grid{
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-auto-rows: 220px;
  gap: var(--tp-s2);
}
.tp-galerie__grid > *{ grid-column: span 2; }
.tp-galerie__grid > :last-child:nth-child(4n + 1){      grid-column: 4 / span 2; }
.tp-galerie__grid > :nth-last-child(2):nth-child(4n + 1){ grid-column: 3 / span 2; }
.tp-galerie__grid > :nth-last-child(3):nth-child(4n + 1){ grid-column: 2 / span 2; }

@media (max-width: 1000px){
  .tp-galerie__grid{ grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 200px; }
  .tp-galerie__grid > *,
  .tp-galerie__grid > :nth-last-child(3):nth-child(4n + 1){ grid-column: span 2; }
  .tp-galerie__grid > :last-child:nth-child(3n + 1){      grid-column: 3 / span 2; }
  .tp-galerie__grid > :nth-last-child(2):nth-child(3n + 1){ grid-column: 2 / span 2; }
}
@media (max-width: 640px){
  .tp-galerie__grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 150px;
    gap: var(--tp-s1);
  }
  .tp-galerie__grid > *,
  .tp-galerie__grid > :nth-last-child(2):nth-child(3n + 1),
  .tp-galerie__grid > :nth-last-child(3):nth-child(4n + 1){ grid-column: span 2; }
  .tp-galerie__grid > :last-child:nth-child(2n + 1){ grid-column: 2 / span 2; }
}

/* Foto-Kachel — <button>, deshalb Theme-Reset mit !important wie im Fundament */
.tp-galerie__item,
.tp-galerie__item:hover, .tp-galerie__item:focus, .tp-galerie__item:active{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  background: var(--nb-paper-deep) !important;
  background-color: var(--nb-paper-deep) !important;
  border: 1px solid var(--nb-hair-l) !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border-radius: var(--nb-r-fl);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease !important;
}
/* Die Klasse bleibt (PHP vergibt sie weiterhin für hochformatige Bilder), sie
   sprengt aber nicht mehr das Raster. Stattdessen wird bei Hochformaten der
   Bildausschnitt nach oben gezogen — dort stehen die Motive. */
.tp-galerie__item--tall{ grid-row: span 1; }
.tp-galerie__item--tall img{ object-position: center 32%; }
.tp-galerie__item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.85) contrast(1.03);
  transition: transform .5s var(--nb-ease), filter .3s ease;
}
/* Hover/Focus: Lift + der eine erlaubte Karten-Schatten, Zoom dezent */
.tp-galerie__item:hover,
.tp-galerie__item:focus-visible{
  border-color: rgba(22,24,28,.28) !important;
  transform: translateY(-3px);
  box-shadow: 0 18px 44px -22px rgba(22,24,28,.45) !important;
  z-index: 2;
}
.tp-galerie__item:hover img,
.tp-galerie__item:focus-visible img{
  transform: scale(1.05);
  filter: none;
}
.tp-galerie__item.is-hidden{ display: none; }

/* Zoom-Hinweis: rotes Quadrat mit UI-Radius (analog Reel-Karten-Plus) */
.tp-galerie__zoom{
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--nb-red);
  color: #fff;
  border-radius: var(--nb-r-ui);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.tp-galerie__item:hover .tp-galerie__zoom,
.tp-galerie__item:focus-visible .tp-galerie__zoom{
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════ KUG-RECHTSHINWEIS (Pflicht, gut lesbar) ═══════════ */

/* Pflichthinweis — sitzt als eigener Abschluss unter der letzten Saison,
   immer auf Papier, volle Fließtextgröße. Rote Kante links wie beim
   KI-Hinweis auf /musik/: Rechtstexte tragen im System dieselbe Marke. */
.tp-galerie__kug-foot{
  max-width: 900px;
  margin: var(--tp-sec) auto var(--tp-sec);
  padding: var(--tp-s4);
  background: var(--tp-surface);
  border: 1px solid var(--tp-hair-l);
  border-left: 3px solid var(--tp-red);
  border-radius: 0 var(--tp-r-fl) var(--tp-r-fl) 0;
}
.tp-galerie__kug-row{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
}
.tp-galerie__kug-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--tp-red-ink);
  background: rgba(227,6,19,.08);
  border: 1px solid rgba(227,6,19,.22);
  border-radius: 50%;
  flex-shrink: 0;
}
/* Doppelklasse + !important schlagen die alten Weiß-Forcierungen
   (».tp-galerie__kug-text { color: rgba(255,255,255,.86) !important }«) */
.tp-galerie .tp-galerie__kug-text{
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body) !important;
  line-height: 1.6 !important;
  color: var(--nb-ink-2) !important;
}
.tp-galerie .tp-galerie__kug-text strong{
  color: var(--nb-ink);
  font-weight: 600;
}
.tp-galerie .tp-galerie__kug-text a{
  color: var(--tp-red-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(227,6,19,.35);
  transition: color .2s ease, border-color .2s ease;
}
.tp-galerie .tp-galerie__kug-text a:hover{
  color: var(--nb-red-dark);
  border-bottom-color: var(--nb-red-dark);
}

/* Foto-Widerspruch-CTA: Ghost-Button hell (Inter 600, 16px, Radius 6px).
   Spezifität (0,2,0)+!important schlägt »a.tp-galerie__kug-cta«-Altregeln. */
.tp-galerie__kug-row .tp-galerie__kug-cta,
.tp-galerie__kug-row .tp-galerie__kug-cta:link,
.tp-galerie__kug-row .tp-galerie__kug-cta:visited,
.tp-galerie__kug-row .tp-galerie__kug-cta:hover,
.tp-galerie__kug-row .tp-galerie__kug-cta:focus,
.tp-galerie__kug-row .tp-galerie__kug-cta:active{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  font-family: var(--nb-font-text) !important;
  font-size: var(--tp-fs-body) !important;
  font-weight: 600 !important;
  letter-spacing: .012em !important;
  line-height: 1;
  text-transform: none !important;
  padding: 14px 24px !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--nb-ink) !important;
  border: 1px solid rgba(22,24,28,.28) !important;
  border-radius: var(--nb-r-ui) !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease !important;
}
.tp-galerie__kug-row .tp-galerie__kug-cta:hover{
  background: rgba(22,24,28,.05) !important;
  background-color: rgba(22,24,28,.05) !important;
  border-color: var(--nb-ink) !important;
  transform: translateY(-2px);
}
@media (max-width: 640px){
  .tp-galerie__kug-row{
    grid-template-columns: 1fr;
    gap: 14px;
    text-align: left;
  }
  .tp-galerie__kug-cta{ justify-self: start; }
}

/* ═══════════ LIGHTBOX (dunkles Overlay — bleibt dunkel) ═══════════ */

.tp-galerie__lightbox{
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(15,17,21,.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  animation: tpGalLbIn .25s var(--nb-ease);
}
.tp-galerie__lightbox[hidden]{ display: none; }
@keyframes tpGalLbIn{ from{ opacity: 0; } to{ opacity: 1; } }

.tp-galerie__lb-stage{
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 5rem 1rem;
}
/* JS re-triggert diese Animation beim Bildwechsel (style.animation reset) */
.tp-galerie__lb-img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--nb-r-ui);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: tpGalLbZoom .25s var(--nb-ease);
}
@keyframes tpGalLbZoom{
  from{ opacity: 0; transform: scale(.97); }
  to{   opacity: 1; transform: scale(1); }
}

.tp-galerie__lb-meta{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 28px 24px;
}
/* Zähler = Mono-Etikett; Rot als --nb-red-lift (AA-sicher auf dunkel) */
.tp-galerie__lb-meta .tp-galerie__lb-counter{
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono) !important;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tp-red-lift) !important;
}
/* Caption kann Alt-Text-Sätze enthalten → Inter, nicht Mono */
.tp-galerie__lb-meta .tp-galerie__lb-caption{
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body) !important;
  letter-spacing: .01em;
  color: var(--nb-ondark-2) !important;
  text-align: right;
}

/* Steuerknöpfe wie .tp-lb__nav im Fundament (Kreise bleiben Kreise) */
.tp-galerie__lb-close, .tp-galerie__lb-prev, .tp-galerie__lb-next,
.tp-galerie__lb-close:hover, .tp-galerie__lb-close:focus, .tp-galerie__lb-close:active,
.tp-galerie__lb-prev:hover, .tp-galerie__lb-prev:focus, .tp-galerie__lb-prev:active,
.tp-galerie__lb-next:hover, .tp-galerie__lb-next:focus, .tp-galerie__lb-next:active{
  position: absolute;
  width: 56px;
  height: 56px;
  background: rgba(33,37,44,.85) !important;
  background-color: rgba(33,37,44,.85) !important;
  color: var(--nb-ondark) !important;
  border: 1px solid var(--nb-hair-d) !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border-radius: 50%;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease !important;
  z-index: 2;
}
.tp-galerie__lb-close{ top: 20px; right: 20px; }
.tp-galerie__lb-prev{ left: 20px; top: 50%; transform: translateY(-50%); }
.tp-galerie__lb-next{ right: 20px; top: 50%; transform: translateY(-50%); }
.tp-galerie__lb-close:hover, .tp-galerie__lb-prev:hover, .tp-galerie__lb-next:hover{
  background: var(--nb-red) !important;
  background-color: var(--nb-red) !important;
  border-color: var(--nb-red) !important;
  color: #fff !important;
}
.tp-galerie__lb-close:hover{ transform: rotate(90deg); }
.tp-galerie__lb-prev:hover{ transform: translateY(-50%) translateX(-2px); }
.tp-galerie__lb-next:hover{ transform: translateY(-50%) translateX(2px); }

@media (max-width: 640px){
  .tp-galerie__lb-stage{ padding: 4.5rem 1rem 1rem; }
  .tp-galerie__lb-close, .tp-galerie__lb-prev, .tp-galerie__lb-next{
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
  }
  .tp-galerie__lb-close{ top: 12px; right: 12px; }
  .tp-galerie__lb-prev{ left: 8px; }
  .tp-galerie__lb-next{ right: 8px; }
  .tp-galerie__lb-meta{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 16px 18px;
  }
  .tp-galerie__lb-meta .tp-galerie__lb-caption{ text-align: left; }
}

/* ═══════════ REDUCED MOTION ═══════════ */

@media (prefers-reduced-motion: reduce){
  .tp-galerie__lightbox,
  .tp-galerie__lb-img{ animation: none; }
  .tp-galerie__item,
  .tp-galerie__item img,
  .tp-galerie__zoom,
  .tp-galerie__lb-close, .tp-galerie__lb-prev, .tp-galerie__lb-next{ transition: none !important; }
  .tp-galerie__item:hover,
  .tp-galerie__item:focus-visible{ transform: none; }
  .tp-galerie__item:hover img,
  .tp-galerie__item:focus-visible img{ transform: none; }
}

/* Bewusst neutral (Klasse existiert nur noch in Alt-CSS, nicht im Markup):
   .tp-galerie__saison-count — ersetzt durch .tp-galc (Odometer). */