/* ===========================================================================
 * Galerie der Pferdepension Sennweid
 *
 * Die Bilder sind das Design. Alles hier hat die Aufgabe, sie ruhig zu halten
 * und sonst nichts zu wollen: keine schweren Schatten, keine Glaseffekte,
 * keine Animationen ausser dem Noetigsten.
 *
 * Farben, Schriften und Satzbreite stammen aus der Website selbst, nicht aus
 * einem fremden Entwurf:
 *   #41695E  dunkles Gruen der Innenseiten und des Fussbereichs
 *   #587B72  das Gruen der Fliesstexte
 *   #313131  Dunkelgrau der Ueberschriften auf hellem Grund
 *   #EED284  Gold der Sektionslabels
 *   #F2F2F2  Hellgrau des Seitenhintergrunds
 *   Spectral fuer Ueberschriften, Source Sans 3 fuer Text
 *
 * Satzbreite gemessen an den bestehenden Seiten:
 *   375px Fenster -> 345px Inhalt
 *   768px         -> 691px
 *   ab 1280px     -> 1140px
 * Die Formel unten trifft alle drei genau.
 *
 * Abstaende folgen der Fibonacci-Reihe der uebrigen Seiten: 8 13 21 34 55 89.
 * ========================================================================= */

.sw-galerie {
  --gal-dunkel: #41695e;
  --gal-dunkler: #2c473f;
  --gal-text: #587b72;
  --gal-schrift: #313131;
  --gal-gold: #eed284;
  --gal-hell: #f2f2f2;
  --gal-linie: rgba(49, 49, 49, 0.14);
  --gal-titel-schrift: Spectral, Georgia, serif;
  --gal-text-schrift: 'Source Sans 3', system-ui, sans-serif;
}

/* Satzbreite, identisch zu den bestehenden Seiten */
.sw-gal-inhalt,
.sw-gal-innen,
.sw-gal-krumen {
  width: min(1140px, 100% - 2 * clamp(15px, 5vw, 70px));
  margin-inline: auto;
}

/* --- Brotkrumen ---------------------------------------------------------- */
.sw-gal-krumen {
  padding: 13px 0 0;
  font-family: var(--gal-text-schrift);
  font-size: 14px;
}

.sw-gal-krumen ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sw-gal-krumen li + li::before {
  content: '›';
  margin-right: 8px;
  color: var(--gal-linie);
}

.sw-gal-krumen a {
  color: var(--gal-text);
  text-decoration: none;
}

.sw-gal-krumen a:hover,
.sw-gal-krumen a:focus-visible {
  text-decoration: underline;
}

.sw-gal-krumen span {
  color: var(--gal-schrift);
}

/* --- Hero-Band ------------------------------------------------------------
 * Gleiche Machart wie die Innenseiten: Foto laeuft hinter dem festen Kopf
 * durch, der Text beginnt darunter. --sennweid-header kommt aus dem
 * Verbesserungs-Stylesheet, 101px auf dem Telefon, 190px ab 768px.
 * ------------------------------------------------------------------------ */
.sw-gal-hero {
  position: relative;
  margin-top: 21px;
  /* Gemessen statt geraten. Unter 768px zieht das Theme den Inhalt um 89px
     nach oben, die Ueberschrift begann dadurch bei 46px und lag im Logo,
     das bis 69px reicht. Es fehlten genau 44px. Mit 89px statt 34px steht
     sie bei 101px und damit frei. Ab 768px beginnt das Band bei 0, dort
     sind schon mit 34px rund 72px Luft, mehr waere nur Leerraum. */
  padding: calc(var(--sennweid-header, 101px) + 89px) 0 55px;
  background-color: var(--gal-dunkler);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--gal-hell);
}

/* Auf der Uebersicht und den Albumseiten sitzt der Kopf ueber dem Band,
   deshalb der Innenabstand oben. Die Brotkrumen stehen darueber und
   brauchen ihn nicht. */
.sw-gal-krumen + .sw-gal-hero {
  margin-top: 8px;
}

@media (min-width: 768px) {
  .sw-gal-hero {
    padding-top: calc(var(--sennweid-header, 190px) + 34px);
  }
}

.sw-gal-titel {
  margin: 0;
  color: var(--gal-hell);
  font-family: var(--gal-titel-schrift);
  font-size: clamp(30px, 7vw, 55px);
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}

.sw-gal-meta {
  margin: 13px 0 0;
  color: var(--gal-gold);
  font-family: var(--gal-text-schrift);
  font-size: 15px;
  letter-spacing: 0.04em;
}

.sw-gal-lead {
  max-width: 58ch;
  margin: 21px 0 0;
  color: rgba(242, 242, 242, 0.92);
  font-family: var(--gal-text-schrift);
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: 1.6;
  text-wrap: pretty;
}

/* --- Inhaltsbereich ------------------------------------------------------ */
.sw-gal-inhalt {
  padding: 55px 0 89px;
  font-family: var(--gal-text-schrift);
  color: var(--gal-text);
}

.sw-gal-h2 {
  margin: 0 0 21px;
  color: var(--gal-schrift);
  font-family: var(--gal-titel-schrift);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 400;
}

/* --- Einstieg: ein grosses Bild, daneben vier kleine ---------------------
 * Alle Bilder des Stallfests sind Hochformat. Ein liegender Rahmen wuerde
 * Kopf und Fuesse abschneiden, deshalb steht das grosse Bild stehend und die
 * vier kleinen daneben. Auf dem Telefon wird daraus eine Reihe unter dem
 * grossen Bild, eine Collage wuerde dort nur unruhig.
 * ------------------------------------------------------------------------ */
.sw-gal-einstieg {
  display: grid;
  gap: 13px;
  margin-bottom: 55px;
}

.sw-gal-nebenan {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
}

/* Ab 900px ein Raster aus vier Spalten und zwei Reihen. Das grosse Bild nimmt
   zwei mal zwei Felder ein, die vier kleinen je eines.
   Nachgerechnet bei 1140px Satzbreite und 13px Zwischenraum:
     Spalte      (1140 - 3*13) / 4 = 275.25px
     klein       275.25 breit, im Verhaeltnis 3:4 also 367 hoch
     zwei Reihen 367 + 13 + 367 = 747
     gross       2*275.25 + 13 = 563.5 breit, 747 hoch
     563.5 / 747 = 0.754, das ist 3:4
   Das grosse Bild steht damit im selben Verhaeltnis wie die kleinen, und beide
   Spalten enden auf derselben Hoehe. Kein Rest, kein Beschnitt aus Verlegenheit. */
@media (min-width: 900px) {
  .sw-gal-einstieg {
    grid-template-columns: repeat(4, 1fr);
  }

  .sw-galerie button.sw-gal-gross {
    grid-column: span 2;
    grid-row: span 2;
  }

  /* Die vier kleinen werden direkte Kinder des Rasters, damit sie die
     verbleibenden Felder einzeln fuellen. */
  .sw-gal-nebenan {
    display: contents;
  }
}

/* Die Selektoren tragen bewusst Klasse UND Element: .elementor-kit-8 button
   setzt padding: 0 50px, und das schlaegt eine reine Klassenregel. Gemessen,
   nicht vermutet: die Knoepfe waren 100px breiter als ihr Bild. */
.sw-galerie button.sw-gal-gross,
.sw-galerie button.sw-gal-klein,
.sw-galerie button.sw-gal-zelle {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--gal-dunkler);
  cursor: zoom-in;
  overflow: hidden;
}

.sw-galerie picture {
  display: block;
  width: 100%;
}

.sw-gal-gross img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.sw-galerie picture.sw-gal-hoch,
.sw-galerie button.sw-gal-gross picture {
  height: 100%;
}

.sw-gal-klein img,
.sw-gal-zelle img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center center;
}

/* --- Das Raster ----------------------------------------------------------
 * Zwei Spalten auf dem Telefon, drei auf dem Tablet, vier auf dem Rechner.
 * Unter 360px wird eine Spalte ruhiger als zwei.
 * ------------------------------------------------------------------------ */
.sw-gal-gitter {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 359px) {
  .sw-gal-gitter {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 600px) {
  .sw-gal-gitter {
    grid-template-columns: repeat(3, 1fr);
    gap: 21px;
  }
}

@media (min-width: 1025px) {
  .sw-gal-gitter {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sw-gal-gitter li.ist-versteckt {
  display: none;
}

.sw-gal-mehr {
  margin: 34px 0 0;
  text-align: center;
}

.sw-galerie button.sw-gal-knopf {
  min-height: 48px;
  padding: 13px 34px;
  border: 1px solid var(--gal-dunkel);
  border-radius: 2px;
  background: transparent;
  color: var(--gal-dunkel);
  font-family: var(--gal-text-schrift);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.sw-galerie button.sw-gal-knopf:hover,
.sw-galerie button.sw-gal-knopf:focus-visible {
  background: var(--gal-dunkel);
  color: var(--gal-hell);
}

.sw-gal-zurueck {
  margin: 55px 0 0;
}

.sw-gal-zurueck a {
  color: var(--gal-dunkel);
  font-size: 16px;
}

/* --- Karten der Uebersicht ----------------------------------------------- */
.sw-gal-neueste {
  margin-bottom: 55px;
}

.sw-gal-karte-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.sw-gal-karte img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.sw-gal-karte.ist-gross img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.sw-gal-karte:not(.ist-gross) img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.sw-gal-karte-text {
  padding: 21px 0 0;
}

.sw-gal-marke {
  margin: 0 0 8px;
  color: #a98b2f;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sw-gal-karte-titel {
  margin: 0;
  color: var(--gal-schrift);
  font-family: var(--gal-titel-schrift);
  font-size: clamp(22px, 3.4vw, 34px);
  font-weight: 400;
}

.sw-gal-karte-meta {
  margin: 8px 0 0;
  font-size: 15px;
}

.sw-gal-karte-lead {
  max-width: 58ch;
  margin: 13px 0 0;
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}

.sw-gal-cta {
  display: inline-block;
  margin-top: 13px;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--gal-gold);
  color: var(--gal-dunkel);
  font-size: 16px;
}

.sw-gal-karte-link:hover .sw-gal-cta,
.sw-gal-karte-link:focus-visible .sw-gal-cta {
  border-bottom-color: var(--gal-dunkel);
}

.sw-gal-kartengitter {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
}

@media (min-width: 600px) {
  .sw-gal-kartengitter {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  .sw-gal-kartengitter {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Filter --------------------------------------------------------------- */
.sw-gal-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 34px;
}

.sw-galerie button.sw-gal-chip {
  min-height: 44px;
  padding: 10px 21px;
  border: 1px solid var(--gal-linie);
  border-radius: 999px;
  background: transparent;
  color: var(--gal-text);
  font-family: var(--gal-text-schrift);
  font-size: 15px;
  cursor: pointer;
}

.sw-galerie button.sw-gal-chip.ist-aktiv {
  border-color: var(--gal-dunkel);
  background: var(--gal-dunkel);
  color: var(--gal-hell);
}

/* --- Startseiten-Teaser --------------------------------------------------- */
.sw-start-teaser {
  padding: 55px 0;
  background: #ffffff;
}

.sw-start-teaser-innen {
  display: grid;
  gap: 21px;
  width: min(1140px, 100% - 2 * clamp(15px, 5vw, 70px));
  margin-inline: auto;
  align-items: center;
}

@media (min-width: 800px) {
  .sw-start-teaser-innen {
    grid-template-columns: 1fr 1.618fr;
    gap: 34px;
  }
}

.sw-start-teaser img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 2px;
  object-fit: cover;
}

.sw-start-teaser a {
  text-decoration: none;
  color: inherit;
}

/* --- Fokus, ueberall gleich ---------------------------------------------- */
.sw-galerie :focus-visible,
.sw-start-teaser :focus-visible {
  outline: 2px solid var(--gal-dunkel);
  outline-offset: 3px;
  border-radius: 2px;
}

.sw-gal-hero :focus-visible {
  outline-color: var(--gal-gold);
}

/* ===========================================================================
 * Lightbox
 *
 * Vollflaechig und dunkel, damit nur das Bild zaehlt. Alle Bedienelemente
 * mindestens 48px, das Briefing verlangt 44. Das Bild bleibt in seinem
 * Originalverhaeltnis: das Raster beschneidet auf 3:4, hier nicht.
 * ========================================================================= */
.sw-lb {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(18, 26, 23, 0.96);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.sw-lb[hidden] {
  display: none;
}

.sw-lb.ist-offen {
  opacity: 1;
}

.sw-lb__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  padding: 13px clamp(13px, 4vw, 34px);
  padding-top: max(13px, env(safe-area-inset-top, 0px));
}

.sw-lb__zaehler {
  margin: 0;
  color: rgba(242, 242, 242, 0.72);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.sw-lb__buehne {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 clamp(8px, 3vw, 34px);
}

.sw-lb__bild {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.sw-lb__bild img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  /* Der Buehnenbereich ist die mittlere Zeile des Rasters. 100% davon haelt
     das Bild vollstaendig im Bild, ohne dass Hochformat abgeschnitten wird. */
  max-height: 100%;
  object-fit: contain;
}

.sw-lb__fuss {
  padding: 13px clamp(13px, 4vw, 34px);
  padding-bottom: max(13px, env(safe-area-inset-bottom, 0px));
}

.sw-lb__text {
  max-width: 70ch;
  margin: 0 auto;
  color: rgba(242, 242, 242, 0.78);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  text-wrap: pretty;
}

button.sw-lb__knopf {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(242, 242, 242, 0.12);
  color: #f2f2f2;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.16s ease;
}

button.sw-lb__knopf:hover,
buttonbutton.sw-lb__knopf:focus-visible {
  background: rgba(242, 242, 242, 0.24);
}

.sw-lb__knopf:focus-visible {
  outline: 2px solid #eed284;
  outline-offset: 3px;
}

.sw-lb__vor,
.sw-lb__zurueck {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.sw-lb__vor {
  left: clamp(8px, 2vw, 21px);
}

.sw-lb__zurueck {
  right: clamp(8px, 2vw, 21px);
}

/* Auf schmalen Geraeten wandern die Pfeile nach unten, in Daumennaehe, und
   nehmen dem Bild nicht die Breite weg. Gewischt wird dort ohnehin. */
@media (max-width: 599px) {
  .sw-lb__vor,
  .sw-lb__zurueck {
    top: auto;
    bottom: max(13px, env(safe-area-inset-bottom, 0px));
    transform: none;
  }

  .sw-lb__fuss {
    padding-right: 76px;
    padding-left: 76px;
  }

  .sw-lb__text {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sw-lb {
    transition: none;
  }
}

/* Die Brotkrumen stehen jetzt im Inhaltsbereich, nicht mehr ueber dem Band.
   Dort lagen sie im Bereich des festen Kopfes und wirkten wie verrutscht. */
.sw-gal-inhalt > .sw-gal-krumen {
  width: 100%;
  margin: 0 0 34px;
  padding: 0;
}

/* Startseiten-Teaser, Feinheiten */
.sw-start-teaser-titel {
  margin: 0;
  color: #313131;
  font-family: Spectral, Georgia, serif;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 400;
}

.sw-start-teaser-datum {
  margin: 8px 0 0;
  color: #587b72;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 15px;
}

.sw-start-teaser-lead {
  margin: 13px 0 0;
  color: #587b72;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

.sw-start-teaser-text p:last-child {
  margin: 21px 0 0;
}

/* Der Hero traegt am unteren Rand einen Scroll-Pfeil, der ueber seine Kante
   hinausragt. Ohne zusaetzliche Luft landet er im Teaser. */
.sw-start-teaser {
  padding-top: 89px;
}

/* /* ---------------------------------------------------------------------------
 * Grosse Karte der Uebersicht: zweispaltig statt liegend beschnitten
 *
 * Vorher presste sie das stehende Titelbild in einen Rahmen von 16:10.
 * Gemessen: Original 0.75, Anzeige 1.60, also gut die Haelfte weg. Beim
 * Stallfest ging das zufaellig gut, weil Sonnensegel und Menge quer liegen.
 * Beim naechsten Titelbild schneidet es Koepfe ab. Jetzt Bild links im
 * gleichen 3:4 wie ueberall, Text rechts, im Verhaeltnis 1 zu 1.618.
 * ------------------------------------------------------------------------- */
.sw-galerie .sw-gal-karte.ist-gross img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

@media (min-width: 900px) {
  .sw-gal-karte.ist-gross .sw-gal-karte-link {
    display: grid;
    grid-template-columns: 1fr 1.618fr;
    gap: 34px;
    align-items: center;
  }

  .sw-gal-karte.ist-gross .sw-gal-karte-text {
    padding: 0;
  }
}

/* Der Hinweis im Aktuelles-Rahmen des Heros */
.sw-aktuell {
  margin-top: 8px;
  font-family: 'Source Sans 3', system-ui, sans-serif;
}

.sw-aktuell-link {
  display: block;
  padding: 13px 0;
  color: #f2f2f2;
  text-decoration: none;
}

.sw-aktuell-titel {
  display: block;
  font-family: Spectral, Georgia, serif;
  font-size: 21px;
  line-height: 1.25;
}

.sw-aktuell-datum {
  display: block;
  margin-top: 3px;
  color: rgba(242, 242, 242, 0.76);
  font-size: 14px;
}

.sw-aktuell-cta {
  display: inline-block;
  margin-top: 8px;
  padding-bottom: 3px;
  border-bottom: 2px solid #eed284;
  font-size: 15px;
}

.sw-aktuell-link:hover .sw-aktuell-cta,
.sw-aktuell-link:focus-visible .sw-aktuell-cta {
  border-bottom-color: #f2f2f2;
}

/* ---------------------------------------------------------------------------
 * Korrektur am Aktuelles-Hinweis
 *
 * Gemessen an den gerenderten Pixeln, nicht an meiner eigenen Regel: der Titel
 * stand in rgb(88,123,114), dem Markengruen, auf hellem Gras. Kontrast 1.07:1,
 * also unsichtbar. Ursache ist dieselbe wie bei der mobilen Navigation:
 * .elementor-kit-8 a hat dieselbe Spezifitaet wie eine reine Klassenregel und
 * kommt spaeter. Deshalb Element plus Klasse.
 *
 * Dazu ein Schleier hinter dem Block. Das Hero-Foto wechselt mit der Jahreszeit
 * und mit kuenftigen Bildern, eine Textfarbe allein kann dafuer nicht buergen.
 * ------------------------------------------------------------------------- */
.sw-aktuell {
  padding: 13px 21px;
  border-radius: 2px;
  background: rgba(20, 32, 28, 0.62);
}

a.sw-aktuell-link,
a.sw-aktuell-link .sw-aktuell-titel,
a.sw-aktuell-link .sw-aktuell-cta {
  color: #f2f2f2;
}

a.sw-aktuell-link .sw-aktuell-datum {
  color: rgba(242, 242, 242, 0.82);
}

a.sw-aktuell-link:focus-visible {
  outline: 2px solid #eed284;
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Aktuelles-Rahmen auf dem Telefon
 *
 * Der Hinweis im Hero macht den Hero-Inhalt 152px hoeher. Auf schmalen
 * Geraeten rutscht die Headline dadurch nach oben und lag gemessen 50px im
 * Logo. Auf dem Telefon steht ausserdem direkt unter dem Hero der Teaser mit
 * derselben Aussage und mehr Platz, zwei Hinweise uebereinander sind einer
 * zu viel.
 *
 * Deshalb bleibt der Rahmen unter 768px aussen vor. Er war dort auch vorher
 * nur eine Ueberschrift ohne Inhalt, ein leerer Kasten mit Rahmenlinie.
 *
 * Die data-id ist die des Containers im statischen Aufbau. Sie ist stabil,
 * solange die Seite nicht neu gespiegelt wird, und die Quelle dafuer gibt es
 * nicht mehr.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-page-385 [data-id='654faab'] {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
 * Korrektur 1: das Bild in der Lightbox muss ins Fenster passen
 *
 * Gemessen: bei 2000 x 760 wurde das Bild mit 1932 x 2576 gerendert, also
 * 1890px unten hinaus. max-width griff, max-height nicht. Ursache ist das
 * <picture> dazwischen: es ist von Haus aus inline und hat keine bestimmte
 * Hoehe, deshalb loeste die Prozentangabe am img ins Leere.
 *
 * display: contents nimmt das picture aus dem Layout, das img wird direktes
 * Kind der Buehne und bezieht seine Prozente auf deren Flaeche. Dazu
 * minmax(0, 1fr) fuer die mittlere Zeile: ein 1fr-Track hat von Haus aus
 * min-height auto und waechst sonst mit dem Inhalt, statt ihn zu begrenzen.
 *
 * Elf Fenstergroessen von 2000x760 bis 320x568 werden in
 * _scripts/lightbox-passform.mjs geprueft. Meine bisherige QA hat nur zwei
 * geprueft, und beide passten zufaellig.
 * ------------------------------------------------------------------------- */
.sw-lb {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.sw-lb__buehne {
  min-height: 0;
  overflow: hidden;
}

.sw-lb__bild {
  display: contents;
}

.sw-lb__buehne img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ---------------------------------------------------------------------------
 * Korrektur 2: der Hover faerbt nicht die ganze Karte
 *
 * Die Karte ist ein grosser Link. Elementors Regel fuer a:hover setzt die
 * Farbe auf den Akzentton, und weil Ueberschrift, Datum und Flieesstext ihre
 * Farbe erben, wurde beim Ueberfahren der ganze Textblock goldgelb.
 *
 * Die Farben werden deshalb fest an den Kindelementen gesetzt, im Ruhezustand
 * wie im Hover. Bewegen soll sich nur der Unterstrich unter "Bilder ansehen".
 * ------------------------------------------------------------------------- */
.sw-galerie a.sw-gal-karte-link .sw-gal-karte-titel,
.sw-galerie a.sw-gal-karte-link:hover .sw-gal-karte-titel,
.sw-galerie a.sw-gal-karte-link:focus-visible .sw-gal-karte-titel {
  color: #313131;
}

.sw-galerie a.sw-gal-karte-link .sw-gal-karte-meta,
.sw-galerie a.sw-gal-karte-link:hover .sw-gal-karte-meta,
.sw-galerie a.sw-gal-karte-link .sw-gal-karte-lead,
.sw-galerie a.sw-gal-karte-link:hover .sw-gal-karte-lead {
  color: #587b72;
}

.sw-galerie a.sw-gal-karte-link .sw-gal-marke,
.sw-galerie a.sw-gal-karte-link:hover .sw-gal-marke {
  color: #a98b2f;
}

.sw-galerie a.sw-gal-karte-link .sw-gal-cta,
.sw-galerie a.sw-gal-karte-link:hover .sw-gal-cta,
.sw-galerie a.sw-gal-karte-link:focus-visible .sw-gal-cta {
  color: #41695e;
}

/* Nachtrag zur Korrektur 1.
   max-height: 100% allein reichte nicht. Ein Raster-Element hat von Haus aus
   min-height: auto, und die automatische Mindestgroesse eines Bildes ist seine
   Eigengroesse. Gemessen: min-height auto ergab 2469px und schlug damit die
   erlaubten 655px. Erst min-height: 0 loest die Bremse. */
.sw-lb__buehne img {
  min-width: 0;
  min-height: 0;
}

/* Ohne Bildunterschrift hat die Lightbox nur noch zwei Zeilen: Leiste oben
   und Buehne. Damit bekommt das Bild die volle restliche Hoehe. */
.sw-lb {
  grid-template-rows: auto minmax(0, 1fr);
}

.sw-lb__buehne {
  padding-bottom: max(13px, env(safe-area-inset-bottom, 0px));
}

@media (max-width: 599px) {
  /* Die Pfeile sassen ueber der Fusszeile. Ohne sie brauchen sie eigenen Platz,
     sonst liegen sie auf dem Bild. */
  .sw-lb__buehne {
    padding-bottom: calc(60px + max(13px, env(safe-area-inset-bottom, 0px)));
  }
}