/*
 * Aulë Bildergalerie — Variablengesteuertes Design
 *
 * Nutze die untenstehenden Variablen, um das Erscheinungsbild der Galerie und
 * ihres Vollbild-Modals anzupassen, ohne die grundlegenden Layout-Regeln ändern
 * zu müssen.
 *
 * Die Bedienelemente IM Modal (Pfeil-Buttons, Punkte, Fortschritt) werden über
 * die Variablen der Image-Slider-CSS gesteuert (--aule-slider-*), da das Modal
 * einen echten Image-Slider enthält.
 *
 * ACHTUNG bei neuen Variablennamen: Die Rahmen-Variablen heißen bewusst
 * "…-frame-width" / "…-frame-color" und NICHT "…-border-width" /
 * "…-border-color". WordPress liefert in seiner Block-Library folgende Regeln
 * aus:
 *
 *     html :where([style*="border-width"]) { border-style: solid; }
 *     html :where([style*="border-color"]) { border-style: solid; }
 *
 * Das ist ein Teilstring-Vergleich auf dem style-Attribut — er greift auch dann,
 * wenn der Treffer nur der NAME einer CSS-Variablen ist. Der Block schreibt seine
 * Variablen inline in den Galerie-Container; hieße eine davon
 * "--aule-gallery-tile-border-width", bekäme der Container dadurch
 * border-style: solid und mangels Breitenangabe den Startwert "medium" — also
 * einen 3 px breiten Rahmen in der Textfarbe um die gesamte Galerie.
 */

:root {
  /* Ab wann ein Bildschirm als "mobil" gilt. Nur relevant, wenn am Block
     "Modal auf Mobilgeräten deaktivieren" aktiv ist: image-gallery-core.js liest
     diesen Wert und schaltet die Kacheln darunter stumm. Die Media Query am Ende
     dieser Datei (Kacheln ohne Klick-Optik) muss denselben Wert verwenden. */
  --aule-gallery-mobile-max: 599px;

  /* Raster */
  --aule-gallery-tile-radius: 0px;          /* Eckenradius der Kacheln */
  --aule-gallery-tile-frame-width: 0px;     /* Rahmenbreite der Kacheln */
  --aule-gallery-tile-frame-color: currentColor; /* Rahmenfarbe der Kacheln */
  --aule-gallery-tile-bg: transparent;      /* Hintergrund hinter dem Bild (sichtbar bei "Einpassen") */

  /* Hover */
  --aule-gallery-hover-speed: 0.35s;        /* Dauer der Hover-Animation */
  --aule-gallery-hover-timing: ease;        /* Zeitverlauf der Hover-Animation */
  --aule-gallery-hover-zoom: 1.06;          /* Zoom-Faktor beim Überfahren */
  --aule-gallery-overlay-bg: rgba(0, 0, 0, 0.45);  /* Farbe des Hover-Overlays */
  --aule-gallery-overlay-icon-color: #ffffff;      /* Farbe des Overlay-Icons */
  --aule-gallery-overlay-icon-size: 34px;          /* Größe des Overlay-Icons */

  /* "Mehr anzeigen"-Button */
  --aule-gallery-more-gap: 24px;            /* Abstand über dem Button */
  --aule-gallery-more-bg: oklch(0.25 0 0);  /* Hintergrund des Buttons */
  --aule-gallery-more-color: #ffffff;       /* Textfarbe des Buttons */
  --aule-gallery-more-radius: 4px;          /* Abrundung des Buttons */
  --aule-gallery-more-padding: 12px 22px;   /* Innenabstand des Buttons */

  /* Modal */
  /* Hintergrund hinter dem Modal. Richtung ("Abdunkeln" / "Aufhellen") UND Stärke
     sind Blockoptionen — der Block setzt daraus fertige rgba()-Werte inline. Hier
     stehen nur die beiden Farben; die Stärke gehört in den Editor, nicht hierher. */
  --aule-gallery-backdrop-darken-rgb: 0, 0, 0;               /* Farbe beim Abdunkeln */
  --aule-gallery-backdrop-lighten-rgb: 255, 255, 255;        /* Farbe beim Aufhellen */
  /* Was zur jeweiligen Richtung passen muss: Textfarbe der Meta-Zeile und
     Helligkeit des aktiven Vorschaubilds. Der Block wählt daraus per Inline-Stil
     das Paar der gewählten Richtung — angepasst wird also HIER, nicht an
     --aule-gallery-modal-fg bzw. --aule-gallery-thumb-active-brightness. */
  --aule-gallery-fg-on-darken: #ffffff;         /* Textfarbe über abgedunkeltem Grund */
  --aule-gallery-fg-on-lighten: #1a1a1a;        /* Textfarbe über aufgehelltem Grund */
  --aule-gallery-thumb-brightness-on-darken: 1.2;  /* Aktive Vorschau über abgedunkeltem Grund */
  --aule-gallery-thumb-brightness-on-lighten: 0.8; /* Aktive Vorschau über aufgehelltem Grund */
  --aule-gallery-close-bg-on-darken: #ffffff;      /* Schließen-Button über abgedunkeltem Grund */
  --aule-gallery-close-color-on-darken: #1a1a1a;
  --aule-gallery-close-bg-on-lighten: oklch(0.25 0 0); /* Schließen-Button über aufgehelltem Grund */
  --aule-gallery-close-color-on-lighten: #ffffff;
  /* Fallback, falls das Modal keine Inline-Werte mitbringt (alte Inhalte). */
  --aule-gallery-backdrop: rgba(var(--aule-gallery-backdrop-darken-rgb), 0.7);
  --aule-gallery-backdrop-soft: rgba(var(--aule-gallery-backdrop-darken-rgb), 0.4);
  --aule-gallery-backdrop-blur: 12px;           /* Stärke des Weichzeichners (wird vom Block gesetzt) */
  --aule-gallery-modal-radius: 0px;             /* Eckenradius der Bilder im Modal */
  --aule-gallery-modal-control-gap: 26px;       /* Abstand der Slider-Bedienelemente zum Bild im Modal */
  --aule-gallery-modal-arrow-space: calc(
    var(--aule-slider-btn-size, 45px) + var(--aule-gallery-modal-control-gap)
  );                                            /* Platz je Seite für außen liegende Pfeile */
  --aule-gallery-modal-z: 999999;               /* Stapelebene des Modals */
  --aule-gallery-modal-width: 92vw;             /* Breite des Modal-Inhalts */
  --aule-gallery-modal-max-width: 1600px;       /* Maximale Breite des Modal-Inhalts */
  --aule-gallery-modal-stage-height: 78vh;      /* Höhe der Bildbühne im Modus "eingepasst" */
  --aule-gallery-modal-fg: #ffffff;             /* Textfarbe für Zähler und Bildunterschrift */
  --aule-gallery-modal-meta-gap: 14px;          /* Abstand zwischen Bild und Textzeile */
  --aule-gallery-modal-edge: 2rem;              /* Luft über und unter dem Bild */
  --aule-gallery-thumb-size: 72px;              /* Kantenlänge der quadratischen Vorschaubilder */
  --aule-gallery-thumb-gap: 10px;               /* Abstand zwischen den Vorschaubildern */
  --aule-gallery-thumb-strip-gap: 2rem;         /* Abstand zwischen Bild und Vorschau-Leiste */
  --aule-gallery-thumb-offset: 2vh;             /* Abstand der Leiste zum unteren Bildschirmrand */
  --aule-gallery-thumb-size-sm: 52px;           /* Kantenlänge auf schmalen Bildschirmen (< 600px) */
  --aule-gallery-thumb-gap-sm: 6px;             /* Abstand auf schmalen Bildschirmen (< 600px) */
  /* Aktives Vorschaubild: leicht aufhellen (dunkler UI-Stil) bzw. abdunkeln
     (heller UI-Stil). Die inaktiven Vorschauen bleiben unverändert — sie sind
     das Angebot, das aktive Bild sieht der Besucher schon groß. */
  --aule-gallery-thumb-active-brightness: 1.2;
  /* Markierung des aktiven Vorschaubilds — welcher Stil greift, entscheidet die
     Blockoption ("Rahmen", "Punkt" oder "Anheben"). Die Blockoption schreibt nur
     die Variablen ihres Stils, alle anderen behalten die Werte von hier. */
  --aule-gallery-thumb-frame-width: 2px;        /* Rahmen: Stärke */
  --aule-gallery-thumb-frame-inset: 2px;        /* Rahmen: Abstand nach innen von der Bildkante */
  /* Rahmen-/Punktfarbe folgen ohne eigene Angabe der Textfarbe des Modals, damit
     der Hell-/Dunkel-Stil greift. Sie werden erst am Verwendungsort aufgelöst
     (var(…, var(--aule-gallery-modal-fg))) — eine Angabe hier würde bereits an
     :root aufgelöst und die Theme-Klassen am Modal ignorieren. Zum Festlegen
     einer eigenen Farbe die nächste Zeile einkommentieren: */
  /* --aule-gallery-thumb-frame-color: #ffffff; */
  --aule-gallery-thumb-dot-size: 25%;           /* Punkt: Durchmesser, bezogen auf die Vorschauhöhe */
  /* --aule-gallery-thumb-dot-color: #ffffff; */ /* Punkt: Farbe (s. Hinweis oben) */
  --aule-gallery-thumb-lift: 0px;               /* Anheben: Hub nach oben (setzt die Blockoption) */
  --aule-gallery-thumb-overlay-darken: #000000; /* Overlay: Farbe beim Abdunkeln */
  --aule-gallery-thumb-overlay-brighten: #ffffff; /* Overlay: Farbe beim Aufhellen */
  --aule-gallery-thumb-overlay-strength: 0.35;  /* Overlay: Deckkraft (setzt die Blockoption) */
  --aule-gallery-close-size: 44px;              /* Größe des Schließen-Buttons */
  /* Fallback; gesetzt wird der Button nach der Hintergrund-Richtung (s. oben),
     weil nur der Grund entscheidet, ob man ihn sieht. */
  --aule-gallery-close-bg: var(--aule-gallery-close-bg-on-darken);
  --aule-gallery-close-color: var(--aule-gallery-close-color-on-darken);
  --aule-gallery-close-offset: 20px;            /* Abstand des Schließen-Buttons zum Bildschirmrand */
}

/* =====================================================================
 *  UI-Stil Presets (Hell / Dunkel)
 *
 *  Werden aktiv, wenn an der Galerie die Klasse .aule-ui-dark oder
 *  .aule-ui-light gesetzt ist (Block-Option "UI-Stil"). Im Modus "CSS" bleibt
 *  die Galerie unverändert und nutzt die oben definierten :root-Variablen.
 *
 *  Die Klasse wird zusätzlich am Modal gesetzt, damit die Slider-Variablen
 *  (--aule-slider-*) aus der Image-Slider-CSS dort ebenfalls greifen.
 * ===================================================================== */

/*
 *  Der UI-Stil beschreibt die BEDIENELEMENTE (Slider-Buttons, Kachel-Overlay,
 *  "Mehr anzeigen", Schließen-Button). Wie der Hintergrund des Modals wirkt,
 *  gehört NICHT hierher: das entscheidet die Blockoption "Abdunkeln/Aufhellen"
 *  weiter unten, damit die Wahl im Editor sichtbar ist und nicht aus dem UI-Stil
 *  abgeleitet wird.
 */

/* Dunkel — dunkle Flächen, helle Icons */
.aule-image-gallery.aule-ui-dark,
.aule-gallery-modal.aule-ui-dark {
  --aule-gallery-overlay-bg: rgba(0, 0, 0, 0.45);
  --aule-gallery-overlay-icon-color: #ffffff;
  --aule-gallery-more-bg: oklch(0.25 0 0);
  --aule-gallery-more-color: #ffffff;
}

/* Hell — helle Flächen, dunkle Icons */
.aule-image-gallery.aule-ui-light,
.aule-gallery-modal.aule-ui-light {
  --aule-gallery-overlay-bg: rgba(255, 255, 255, 0.55);
  --aule-gallery-overlay-icon-color: #1a1a1a;
  --aule-gallery-more-bg: #ffffff;
  --aule-gallery-more-color: #1a1a1a;
}

/* =====================================================================
 *  Responsive Bänder — NUR BEI BEDARF ÄNDERN
 *
 *  Der Block schreibt Spaltenzahl und Abstände je Größenband als Variablen
 *  in das Container-Attribut (…-base / -lg / -md / -sm). Die folgenden
 *  Media Queries entscheiden, welches Band gerade gilt. Fehlt ein Band,
 *  fällt es auf das nächstgrößere zurück.
 * ===================================================================== */

.aule-image-gallery {
  --aule-gallery-cols: var(--aule-gallery-cols-base, 3);
  --aule-gallery-colgap: var(--aule-gallery-colgap-base, 16px);
  --aule-gallery-rowgap: var(--aule-gallery-rowgap-base, 16px);
}

@media (max-width: 1199px) {
  .aule-image-gallery {
    --aule-gallery-cols: var(--aule-gallery-cols-lg, var(--aule-gallery-cols-base, 3));
    --aule-gallery-colgap: var(--aule-gallery-colgap-lg, var(--aule-gallery-colgap-base, 16px));
    --aule-gallery-rowgap: var(--aule-gallery-rowgap-lg, var(--aule-gallery-rowgap-base, 16px));
  }
}

@media (max-width: 992px) {
  .aule-image-gallery {
    --aule-gallery-cols: var(--aule-gallery-cols-md, var(--aule-gallery-cols-lg, var(--aule-gallery-cols-base, 2)));
    --aule-gallery-colgap: var(--aule-gallery-colgap-md, var(--aule-gallery-colgap-lg, var(--aule-gallery-colgap-base, 12px)));
    --aule-gallery-rowgap: var(--aule-gallery-rowgap-md, var(--aule-gallery-rowgap-lg, var(--aule-gallery-rowgap-base, 12px)));
  }
}

@media (max-width: 599px) {
  .aule-image-gallery {
    --aule-gallery-cols: var(--aule-gallery-cols-sm, var(--aule-gallery-cols-md, 1));
    --aule-gallery-colgap: var(--aule-gallery-colgap-sm, var(--aule-gallery-colgap-md, 8px));
    --aule-gallery-rowgap: var(--aule-gallery-rowgap-sm, var(--aule-gallery-rowgap-md, 8px));
  }
}

/* =====================================================================
 *  Kern-Layout — NUR BEI BEDARF ÄNDERN
 * ===================================================================== */

.aule-image-gallery {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/* --- Raster (flex-wrap statt CSS-Grid, damit sich die letzte Zeile
       ausrichten lässt: bei vollen Zeilen bleibt kein Freiraum, nur die
       unvollständige letzte Zeile reagiert auf justify-content) --- */
.aule-gallery-layout-grid .aule-gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aule-gallery-rowgap) var(--aule-gallery-colgap);
}

.aule-gallery-layout-grid .aule-gallery-item {
  flex: 0 0
    calc(
      (100% - (var(--aule-gallery-cols) - 1) * var(--aule-gallery-colgap)) /
        var(--aule-gallery-cols)
    );
  max-width: calc(
    (100% - (var(--aule-gallery-cols) - 1) * var(--aule-gallery-colgap)) /
      var(--aule-gallery-cols)
  );
  aspect-ratio: var(--aule-gallery-ratio, 4 / 3);
}

.aule-gallery-lastrow-left .aule-gallery-grid {
  justify-content: flex-start;
}
.aule-gallery-lastrow-center .aule-gallery-grid {
  justify-content: center;
}
/* "Gestreckt": nur die unvollständige letzte Zeile hat Freiraum zum Wachsen. */
.aule-gallery-lastrow-stretch .aule-gallery-item {
  flex-grow: 1;
  max-width: none;
}

/* --- Masonry (Spalten werden von oben nach unten gefüllt) --- */
.aule-gallery-layout-masonry .aule-gallery-grid {
  display: block;
  columns: var(--aule-gallery-cols);
  column-gap: var(--aule-gallery-colgap);
}

.aule-gallery-layout-masonry .aule-gallery-item {
  display: block;
  width: 100%;
  margin: 0 0 var(--aule-gallery-rowgap);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* --- Kacheln --- */
.aule-gallery-item {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--aule-gallery-tile-bg);
  border-radius: var(--aule-gallery-tile-radius);
  border: var(--aule-gallery-tile-frame-width) solid
    var(--aule-gallery-tile-frame-color);
}

/* Klickbare Kacheln sind <button> — Browser-Standardstile zurücksetzen. */
button.aule-gallery-item {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

.aule-gallery-image {
  display: block;
  width: 100%;
  transition: transform var(--aule-gallery-hover-speed)
    var(--aule-gallery-hover-timing);
}

.aule-gallery-layout-grid .aule-gallery-image {
  height: 100%;
  object-fit: var(--aule-gallery-fit, cover);
  object-position: var(--aule-gallery-pos, center center);
}

.aule-gallery-layout-masonry .aule-gallery-image {
  height: auto;
}

/* Ausgeblendete Bilder hinter der "Mehr anzeigen"-Grenze. Die höhere
   Spezifität ist nötig, weil die Layout-Regeln oben display setzen. */
.aule-gallery-grid .aule-gallery-item[hidden] {
  display: none;
}

/* --- Hover-Effekte --- */
.aule-gallery-hover-zoom .aule-gallery-item:hover .aule-gallery-image,
.aule-gallery-hover-zoom .aule-gallery-item:focus-visible .aule-gallery-image,
.aule-gallery-hover-zoom-overlay .aule-gallery-item:hover .aule-gallery-image,
.aule-gallery-hover-zoom-overlay
  .aule-gallery-item:focus-visible
  .aule-gallery-image {
  transform: scale(var(--aule-gallery-hover-zoom));
}

.aule-gallery-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--aule-gallery-overlay-bg);
  opacity: 0;
  transition: opacity var(--aule-gallery-hover-speed)
    var(--aule-gallery-hover-timing);
  pointer-events: none;
}

.aule-gallery-item:hover .aule-gallery-overlay,
.aule-gallery-item:focus-visible .aule-gallery-overlay {
  opacity: 1;
}

.aule-gallery-overlay-icon {
  font-size: var(--aule-gallery-overlay-icon-size);
  line-height: 1;
  color: var(--aule-gallery-overlay-icon-color);
}

.aule-gallery-item:focus-visible {
  outline: 2px solid var(--aule-gallery-overlay-icon-color);
  outline-offset: 2px;
}

/* --- "Mehr anzeigen" --- */
.aule-gallery-more {
  display: flex;
  justify-content: center;
  margin-top: var(--aule-gallery-more-gap);
}

.aule-gallery-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--aule-gallery-more-padding);
  border: none;
  border-radius: var(--aule-gallery-more-radius);
  background: var(--aule-gallery-more-bg);
  color: var(--aule-gallery-more-color);
  font: inherit;
  cursor: pointer;
}

.aule-gallery-more[hidden] {
  display: none;
}

/* =====================================================================
 *  Modal (Vollbild)
 * ===================================================================== */

.aule-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: var(--aule-gallery-modal-z);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--aule-gallery-modal-edge) 0;
}

.aule-gallery-modal[hidden] {
  display: none;
}

/* Richtung des Hintergrunds (Blockoption "Abdunkeln" / "Aufhellen"):
   Hintergrund, Textfarbe und Helligkeit der aktiven Vorschau kommen als
   Inline-Stil vom Block und verweisen auf die …-darken / …-lighten Variablen
   oben — dort wird angepasst. Bewusst inline und nicht als Regel hier: eine
   Klassenregel würde von einer alten Kopie der Presets in der eigenen
   Galerie-CSS (Override) überstimmt, die Blockoption hätte dann keine Wirkung.

   Die Klassen .aule-gallery-modal-tone-darken / -lighten sitzen weiterhin am
   Modal und stehen als Aufhänger für eigene Regeln bereit, z. B.:
   .aule-gallery-modal-tone-lighten .aule-gallery-modal-close { … } */

.aule-gallery-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--aule-gallery-backdrop);
}

/* Modus "Weichzeichnen": die Seite wird nur leicht eingefärbt, dafür unscharf
   gezeichnet. Die Stärke kommt als Inline-Variable vom Block. */
.aule-gallery-modal-blur .aule-gallery-modal-backdrop {
  background: var(--aule-gallery-backdrop-soft);
  -webkit-backdrop-filter: blur(var(--aule-gallery-backdrop-blur));
  backdrop-filter: blur(var(--aule-gallery-backdrop-blur));
}

.aule-gallery-modal-inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(var(--aule-gallery-modal-width), var(--aule-gallery-modal-max-width));
  /* Die volle Höhe des (bereits um Leiste und Luft verkleinerten) Modals. Damit
     ist der Platz für die Bühne eine RECHNUNG DES LAYOUTS und keine Schätzung:
     die Textzeile nimmt sich, was sie braucht, die Bühne den Rest. Ein
     geschätzter Abzug hinterließ leere Streifen, sobald die Textzeile kürzer war
     als angenommen — bei fehlenden Bildunterschriften also fast immer. */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--aule-gallery-modal-meta-gap);
}

/* Liegen die Pfeile AUSSERHALB und mittig, hält das Modal seitlich Platz für sie
   frei: die Bühne wird schmaler, statt dass die Pfeile bei wenig Platz auf das
   Bild rutschen (die Leiste in der Slider-CSS ist auf die Fensterbreite
   begrenzt und zieht sie sonst nach innen). Oben/unten liegende Leisten regeln
   das schon selbst über die Reserve am Slider-Container. */
.aule-gallery-modal-inner:has(
    .aule-image-slider-container.aule-nav-loc-outside.aule-nav-middle
  ) {
  width: min(
    calc(
      var(--aule-gallery-modal-width) - 2 * var(--aule-gallery-modal-arrow-space)
    ),
    var(--aule-gallery-modal-max-width)
  );
}

/* Der Slider ist der wachsende Teil; min-height: 0 erlaubt ihm, unter seine
   Inhaltshöhe zu schrumpfen (sonst gewinnt das Seitenverhältnis der Bühne). Die
   eigene Flexbox zentriert die Bühne im übrigen Platz. */
.aule-gallery-modal .aule-image-slider-container {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Leere Textzeile ganz ausblenden — ein 0 Pixel hohes Flex-Element kostet sonst
   trotzdem den gap darüber. Trifft zu, wenn der Zähler abgeschaltet ist und die
   Bildunterschrift fehlt. */
.aule-gallery-modal-meta:not(
    :has(.aule-gallery-counter, .aule-gallery-caption:not(:empty))
  ) {
  display: none;
}

.aule-gallery-modal-close {
  position: absolute;
  top: var(--aule-gallery-close-offset);
  right: var(--aule-gallery-close-offset);
  z-index: 2;
  width: var(--aule-gallery-close-size);
  height: var(--aule-gallery-close-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--aule-gallery-close-bg);
  color: var(--aule-gallery-close-color);
  font-size: 22px;
  cursor: pointer;
}

/* Im Modal ist mehr Platz als in einem Slider im Textfluss — Pfeile,
   Play/Pause und Punkte rücken deshalb weiter vom Bild ab. Gilt für beide
   Platzierungen (außerhalb wie innerhalb). */
.aule-gallery-modal .aule-image-slider-container {
  --aule-slider-outside-gap: var(--aule-gallery-modal-control-gap);
  --aule-slider-inside-inset: var(--aule-gallery-modal-control-gap);
  /* Im Modal liegen die Bedienelemente über Bild UND eingefärbtem Grund und
     dürfen deshalb deckender sein als ein Slider im Textfluss. Gilt für den
     CSS-Modus; die beiden Regeln darunter tun dasselbe für Hell und Dunkel, weil
     die Presets dort andere Ausgangsfarben haben. */
  --aule-slider-btn-opacity: 0.92;
  --aule-slider-indicator-bg: rgba(0, 0, 0, 0.72);
  --aule-slider-dot-bg: rgba(255, 255, 255, 0.72);
}

.aule-gallery-modal.aule-ui-dark .aule-image-slider-container {
  --aule-slider-indicator-bg: rgba(0, 0, 0, 0.72);
  --aule-slider-dot-bg: rgba(255, 255, 255, 0.72);
}

.aule-gallery-modal.aule-ui-light .aule-image-slider-container {
  --aule-slider-indicator-bg: rgba(255, 255, 255, 0.88);
  --aule-slider-dot-bg: rgba(0, 0, 0, 0.55);
}

/* Eckenradius der Bilder im Modal. Gewinnt gegen --aule-slider-border-radius
   aus der Image-Slider-CSS (0,2,0 gegen 0,1,0), damit ein global abgerundeter
   Slider das Modal nicht zwangsweise mit abrundet. */
.aule-gallery-modal .aule-slider-wrapper {
  border-radius: var(--aule-gallery-modal-radius);
}

/* Der Slider im Modal: die Bühne bekommt eine feste Höhe, damit jedes Bild
   vollständig hineinpasst und das Layout beim Durchklicken nicht springt — aber
   höchstens den Platz, der übrig ist (100% = übrige Höhe im Modal, s. oben). */
.aule-gallery-modal-fit .aule-slider-wrapper {
  aspect-ratio: auto;
  height: min(var(--aule-gallery-modal-stage-height), 100%);
}

/* Im Modus "eingepasst" schrumpft das Bild auf seine tatsächlich gezeichnete
   Größe (width/height: auto + max-*) statt die ganze Bühne zu füllen. Nur so
   sitzt der Eckenradius an den sichtbaren Bildkanten: mit object-fit: contain
   auf einer bühnenfüllenden Box würde er die leeren Ränder abrunden und wäre
   unsichtbar. Die Slide-Box bleibt bühnenfüllend und zentriert das Bild. */
.aule-gallery-modal-fit .aule-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.aule-gallery-modal-fit .aule-slider-image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--aule-gallery-modal-radius);
}

/* Feste Slide-Höhe: das gewählte Seitenverhältnis gewinnt, Bilder füllen es
   formatfüllend aus (--aule-slider-aspect-ratio kommt vom Block). Hier füllt
   das Bild die Bühne, der Radius am Wrapper beschneidet es also bereits — die
   Wiederholung am Bild kostet nichts und hält beide Modi gleich. */
/* Bei fester Slide-Höhe rechnet das Seitenverhältnis die Höhe aus der Breite —
   passt sie nicht, ist die übrige Höhe die Obergrenze (das Bild wird dann
   formatfüllend beschnitten, statt einen leeren Streifen zu hinterlassen). */
.aule-gallery-modal-ratio .aule-slider-wrapper {
  max-height: 100%;
}

.aule-gallery-modal-ratio .aule-slider-image {
  object-fit: cover;
  border-radius: var(--aule-gallery-modal-radius);
}

.aule-gallery-modal-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--aule-gallery-modal-fg);
  text-align: center;
}

.aule-gallery-counter {
  font-size: 14px;
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}

.aule-gallery-caption {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

.aule-gallery-caption:empty {
  display: none;
}

/* --- Vorschau-Leiste (schwebt am unteren Bildschirmrand) ---
       Die Leiste liegt außerhalb von .aule-gallery-modal-inner und wird am
       Rand des Modals (= Viewport) verankert. Damit sie das Bild nicht
       überdeckt, reserviert .aule-gallery-modal-has-thumbs unten Platz. */
.aule-gallery-modal-has-thumbs {
  --aule-gallery-thumb-reserve: calc(
    var(--aule-gallery-thumb-size) + var(--aule-gallery-thumb-offset) +
      var(--aule-gallery-thumb-strip-gap) + var(--aule-gallery-thumb-lift)
  );
  box-sizing: border-box;
  padding-bottom: var(--aule-gallery-thumb-reserve);
}

.aule-gallery-thumbs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--aule-gallery-thumb-offset);
  z-index: 2;
  display: flex;
  justify-content: center;
  /* Nur die Leiste selbst soll klickbar sein — der Streifen daneben schließt
     das Modal weiterhin über den Backdrop. */
  pointer-events: none;
}

.aule-gallery-thumbs-track {
  display: flex;
  align-items: flex-end;
  gap: var(--aule-gallery-thumb-gap);
  max-width: min(
    var(--aule-gallery-modal-width),
    var(--aule-gallery-modal-max-width)
  );
  /* Oben Platz für den Hub des Stils "Anheben": overflow-x: auto erzwingt
     overflow-y: auto, ein angehobenes Vorschaubild würde sonst beschnitten. */
  padding: var(--aule-gallery-thumb-lift) 2px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  pointer-events: auto;
  /* Scrollleiste ausblenden — gescrollt wird per Klick/Wischen. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.aule-gallery-thumbs-track::-webkit-scrollbar {
  display: none;
}

.aule-gallery-thumb {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--aule-gallery-thumb-size);
  height: var(--aule-gallery-thumb-size);
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  overflow: hidden;
  /* Gleiche Abrundung wie das Hauptbild im Modal. */
  border-radius: var(--aule-gallery-modal-radius);
  /* Bezugsrahmen für den Punkt des Stils "Punkt". */
  position: relative;
  transition: outline-color 0.2s ease, transform 0.2s ease;
}

/* --- Markierung 1: Rahmen ---
       Der Abstand wird negativ angewandt, damit der Rahmen INNEN am Bild sitzt.
       Ein positiver outline-offset läge außerhalb der Vorschau und würde vom
       Overflow der Leiste beschnitten. */
.aule-gallery-thumbs-active-frame .aule-gallery-thumb {
  outline: var(--aule-gallery-thumb-frame-width) solid transparent;
  outline-offset: calc(-1 * var(--aule-gallery-thumb-frame-inset));
}

.aule-gallery-thumbs-active-frame .aule-gallery-thumb.is-active {
  outline-color: var(
    --aule-gallery-thumb-frame-color,
    var(--aule-gallery-modal-fg)
  );
}

/* --- Markierung 2: Punkt in der Bildmitte --- */
.aule-gallery-thumbs-active-dot .aule-gallery-thumb.is-active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: var(--aule-gallery-thumb-dot-size);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--aule-gallery-thumb-dot-color, var(--aule-gallery-modal-fg));
  pointer-events: none;
}

/* --- Markierung 3: Anheben --- */
.aule-gallery-thumbs-active-lift .aule-gallery-thumb.is-active {
  transform: translateY(calc(-1 * var(--aule-gallery-thumb-lift)));
}

/* --- Markierung 4: Overlay ---
       Eine Farbschicht über dem aktiven Vorschaubild. Richtung (abdunkeln oder
       aufhellen) und Stärke kommen als Inline-Stil vom Block. */
.aule-gallery-thumbs-active-overlay .aule-gallery-thumb.is-active::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(
    --aule-gallery-thumb-overlay-color,
    var(--aule-gallery-thumb-overlay-darken)
  );
  opacity: var(--aule-gallery-thumb-overlay-strength);
  pointer-events: none;
}

.aule-gallery-thumb-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.2s ease;
}

/* Die Helligkeit sitzt am Bild, nicht am Button — so bleiben Rahmen und Punkt
   in genau der gewählten Farbe. Hover zeigt dieselbe Vorschau der Auswahl. */
.aule-gallery-thumb.is-active .aule-gallery-thumb-image,
.aule-gallery-thumb:hover .aule-gallery-thumb-image,
.aule-gallery-thumb:focus-visible .aule-gallery-thumb-image {
  filter: brightness(var(--aule-gallery-thumb-active-brightness));
}

/* Im Overlay-Modus bestimmt allein das Overlay, wie das aktive Bild aussieht —
   die automatische Helligkeit würde sich sonst mit ihm addieren. Die höhere
   Spezifität (0,3,0) gewinnt auch, wenn zusätzlich gehovert wird. Nicht aktive
   Vorschauen behalten ihre Hover-Rückmeldung. */
.aule-gallery-thumbs-active-overlay .aule-gallery-thumb.is-active .aule-gallery-thumb-image {
  filter: none;
}

/* Auf kleinen Bildschirmen kleinere Vorschaubilder. Die Regel greift am
   Track — die Blockeinstellung setzt die Variable am Modal, würde also als
   Inline-Stil gewinnen, wenn sie hier auf derselben Ebene stünde. */
@media (max-width: 599px) {
  .aule-gallery-modal-has-thumbs {
    --aule-gallery-thumb-reserve: calc(
      var(--aule-gallery-thumb-size-sm) + var(--aule-gallery-thumb-offset) +
        var(--aule-gallery-thumb-strip-gap) + var(--aule-gallery-thumb-lift)
    );
  }

  .aule-gallery-thumbs {
    --aule-gallery-thumb-size: var(--aule-gallery-thumb-size-sm);
    --aule-gallery-thumb-gap: var(--aule-gallery-thumb-gap-sm);
  }
}

/* Scroll-Sperre, während ein Modal offen ist. Der Ausgleich für die
   verschwindende Scrollleiste wird per JS als Inline-Padding gesetzt. */
body.aule-gallery-modal-open {
  overflow: hidden;
}

/* =====================================================================
 *  Galerie ohne Modal auf Mobilgeräten
 *
 *  Blockoption "Modal auf Mobilgeräten deaktivieren": unterhalb der Grenze
 *  öffnet keine Kachel mehr ein Modal, die Galerie selbst ist die Ansicht. Die
 *  Kacheln dürfen dann auch nicht mehr klickbar aussehen.
 *
 *  Die Grenze steht zusätzlich als --aule-gallery-mobile-max oben (Media Queries
 *  können keine Variablen auswerten) — beide Werte gehören zusammen.
 * ===================================================================== */

@media (max-width: 599px) {
  .aule-gallery-no-modal-mobile button.aule-gallery-item {
    cursor: default;
  }

  .aule-gallery-no-modal-mobile .aule-gallery-overlay {
    display: none;
  }
}

/* =====================================================================
 *  Editor-Vorschau
 * ===================================================================== */

.aule-image-gallery-editor .aule-gallery-item--placeholder {
  background: #f0f0f0;
  border: 1px dashed #c3c4c7;
}

.aule-image-gallery-editor .aule-gallery-placeholder-box {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 80px;
}

.aule-image-gallery-editor .aule-gallery-editor-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: #757575;
}

.aule-image-gallery-editor .aule-gallery-editor-toolbar {
  margin-top: 12px;
}


/*
 * Aulë Bildergalerie — Variablengesteuertes Design
 *
 * Nutze die untenstehenden Variablen, um das Erscheinungsbild der Galerie und
 * ihres Vollbild-Modals anzupassen, ohne die grundlegenden Layout-Regeln ändern
 * zu müssen.
 *
 * Die Bedienelemente IM Modal (Pfeil-Buttons, Punkte, Fortschritt) werden über
 * die Variablen der Image-Slider-CSS gesteuert (--aule-slider-*), da das Modal
 * einen echten Image-Slider enthält.
 *
 * ACHTUNG bei neuen Variablennamen: Die Rahmen-Variablen heißen bewusst
 * "…-frame-width" / "…-frame-color" und NICHT "…-border-width" /
 * "…-border-color". WordPress liefert in seiner Block-Library folgende Regeln
 * aus:
 *
 *     html :where([style*="border-width"]) { border-style: solid; }
 *     html :where([style*="border-color"]) { border-style: solid; }
 *
 * Das ist ein Teilstring-Vergleich auf dem style-Attribut — er greift auch dann,
 * wenn der Treffer nur der NAME einer CSS-Variablen ist. Der Block schreibt seine
 * Variablen inline in den Galerie-Container; hieße eine davon
 * "--aule-gallery-tile-border-width", bekäme der Container dadurch
 * border-style: solid und mangels Breitenangabe den Startwert "medium" — also
 * einen 3 px breiten Rahmen in der Textfarbe um die gesamte Galerie.
 */

:root {
  /* Raster */
  --aule-gallery-tile-radius: 0px;          /* Eckenradius der Kacheln */
  --aule-gallery-tile-frame-width: 0px;     /* Rahmenbreite der Kacheln */
  --aule-gallery-tile-frame-color: currentColor; /* Rahmenfarbe der Kacheln */
  --aule-gallery-tile-bg: transparent;      /* Hintergrund hinter dem Bild (sichtbar bei "Einpassen") */

  /* Hover */
  --aule-gallery-hover-speed: 0.35s;        /* Dauer der Hover-Animation */
  --aule-gallery-hover-timing: ease;        /* Zeitverlauf der Hover-Animation */
  --aule-gallery-hover-zoom: 1.06;          /* Zoom-Faktor beim Überfahren */
  --aule-gallery-overlay-bg: rgba(0, 0, 0, 0.45);  /* Farbe des Hover-Overlays */
  --aule-gallery-overlay-icon-color: #ffffff;      /* Farbe des Overlay-Icons */
  --aule-gallery-overlay-icon-size: 34px;          /* Größe des Overlay-Icons */

  /* "Mehr anzeigen"-Button */
  --aule-gallery-more-gap: 24px;            /* Abstand über dem Button */
  --aule-gallery-more-bg: oklch(0.25 0 0);  /* Hintergrund des Buttons */
  --aule-gallery-more-color: #ffffff;       /* Textfarbe des Buttons */
  --aule-gallery-more-radius: 4px;          /* Abrundung des Buttons */
  --aule-gallery-more-padding: 12px 22px;   /* Innenabstand des Buttons */

  /* Modal */
  --aule-gallery-backdrop: rgba(0, 0, 0, 0.9);  /* Abdunklung der Website hinter dem Modal (Modus "Einfärben") */
  --aule-gallery-backdrop-soft: rgba(0, 0, 0, 0.5); /* Schwächere Einfärbung im Modus "Weichzeichnen" */
  --aule-gallery-backdrop-blur: 12px;           /* Stärke des Weichzeichners (wird vom Block gesetzt) */
  --aule-gallery-modal-radius: 0px;             /* Eckenradius der Bilder im Modal */
  --aule-gallery-modal-control-gap: 26px;       /* Abstand der Slider-Bedienelemente zum Bild im Modal */
  --aule-gallery-modal-z: 999999;               /* Stapelebene des Modals */
  --aule-gallery-modal-width: 92vw;             /* Breite des Modal-Inhalts */
  --aule-gallery-modal-max-width: 1600px;       /* Maximale Breite des Modal-Inhalts */
  --aule-gallery-modal-stage-height: 78vh;      /* Höhe der Bildbühne im Modus "eingepasst" */
  --aule-gallery-modal-fg: #ffffff;             /* Textfarbe für Zähler und Bildunterschrift */
  --aule-gallery-modal-meta-gap: 14px;          /* Abstand zwischen Bild und Textzeile */
  --aule-gallery-close-size: 44px;              /* Größe des Schließen-Buttons */
  --aule-gallery-close-bg: rgba(255, 255, 255, 0.12); /* Hintergrund des Schließen-Buttons */
  --aule-gallery-close-color: #ffffff;          /* Icon-Farbe des Schließen-Buttons */
  --aule-gallery-close-offset: 20px;            /* Abstand des Schließen-Buttons zum Bildschirmrand */
}

/* =====================================================================
 *  UI-Stil Presets (Hell / Dunkel)
 *
 *  Werden aktiv, wenn an der Galerie die Klasse .aule-ui-dark oder
 *  .aule-ui-light gesetzt ist (Block-Option "UI-Stil"). Im Modus "CSS" bleibt
 *  die Galerie unverändert und nutzt die oben definierten :root-Variablen.
 *
 *  Die Klasse wird zusätzlich am Modal gesetzt, damit die Slider-Variablen
 *  (--aule-slider-*) aus der Image-Slider-CSS dort ebenfalls greifen.
 * ===================================================================== */

/* Dunkel — dunkler Hintergrund, helle Bedienelemente */
.aule-image-gallery.aule-ui-dark,
.aule-gallery-modal.aule-ui-dark {
  --aule-gallery-overlay-bg: rgba(0, 0, 0, 0.45);
  --aule-gallery-overlay-icon-color: #ffffff;
  --aule-gallery-backdrop: rgba(0, 0, 0, 0.9);
  --aule-gallery-backdrop-soft: rgba(0, 0, 0, 0.5);
  --aule-gallery-modal-fg: #ffffff;
  --aule-gallery-close-bg: rgba(255, 255, 255, 0.12);
  --aule-gallery-close-color: #ffffff;
  --aule-gallery-more-bg: oklch(0.25 0 0);
  --aule-gallery-more-color: #ffffff;
}

/* Hell — die Website wird aufgehellt statt abgedunkelt */
.aule-image-gallery.aule-ui-light,
.aule-gallery-modal.aule-ui-light {
  --aule-gallery-overlay-bg: rgba(255, 255, 255, 0.55);
  --aule-gallery-overlay-icon-color: #1a1a1a;
  --aule-gallery-backdrop: rgba(255, 255, 255, 0.94);
  --aule-gallery-backdrop-soft: rgba(255, 255, 255, 0.55);
  --aule-gallery-modal-fg: #1a1a1a;
  --aule-gallery-close-bg: rgba(0, 0, 0, 0.08);
  --aule-gallery-close-color: #1a1a1a;
  --aule-gallery-more-bg: #ffffff;
  --aule-gallery-more-color: #1a1a1a;
}

/* =====================================================================
 *  Responsive Bänder — NUR BEI BEDARF ÄNDERN
 *
 *  Der Block schreibt Spaltenzahl und Abstände je Größenband als Variablen
 *  in das Container-Attribut (…-base / -lg / -md / -sm). Die folgenden
 *  Media Queries entscheiden, welches Band gerade gilt. Fehlt ein Band,
 *  fällt es auf das nächstgrößere zurück.
 * ===================================================================== */

.aule-image-gallery {
  --aule-gallery-cols: var(--aule-gallery-cols-base, 3);
  --aule-gallery-colgap: var(--aule-gallery-colgap-base, 16px);
  --aule-gallery-rowgap: var(--aule-gallery-rowgap-base, 16px);
}

@media (max-width: 1199px) {
  .aule-image-gallery {
    --aule-gallery-cols: var(--aule-gallery-cols-lg, var(--aule-gallery-cols-base, 3));
    --aule-gallery-colgap: var(--aule-gallery-colgap-lg, var(--aule-gallery-colgap-base, 16px));
    --aule-gallery-rowgap: var(--aule-gallery-rowgap-lg, var(--aule-gallery-rowgap-base, 16px));
  }
}

@media (max-width: 992px) {
  .aule-image-gallery {
    --aule-gallery-cols: var(--aule-gallery-cols-md, var(--aule-gallery-cols-lg, var(--aule-gallery-cols-base, 2)));
    --aule-gallery-colgap: var(--aule-gallery-colgap-md, var(--aule-gallery-colgap-lg, var(--aule-gallery-colgap-base, 12px)));
    --aule-gallery-rowgap: var(--aule-gallery-rowgap-md, var(--aule-gallery-rowgap-lg, var(--aule-gallery-rowgap-base, 12px)));
  }
}

@media (max-width: 599px) {
  .aule-image-gallery {
    --aule-gallery-cols: var(--aule-gallery-cols-sm, var(--aule-gallery-cols-md, 1));
    --aule-gallery-colgap: var(--aule-gallery-colgap-sm, var(--aule-gallery-colgap-md, 8px));
    --aule-gallery-rowgap: var(--aule-gallery-rowgap-sm, var(--aule-gallery-rowgap-md, 8px));
  }
}

/* =====================================================================
 *  Kern-Layout — NUR BEI BEDARF ÄNDERN
 * ===================================================================== */

.aule-image-gallery {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/* --- Raster (flex-wrap statt CSS-Grid, damit sich die letzte Zeile
       ausrichten lässt: bei vollen Zeilen bleibt kein Freiraum, nur die
       unvollständige letzte Zeile reagiert auf justify-content) --- */
.aule-gallery-layout-grid .aule-gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aule-gallery-rowgap) var(--aule-gallery-colgap);
}

.aule-gallery-layout-grid .aule-gallery-item {
  flex: 0 0
    calc(
      (100% - (var(--aule-gallery-cols) - 1) * var(--aule-gallery-colgap)) /
        var(--aule-gallery-cols)
    );
  max-width: calc(
    (100% - (var(--aule-gallery-cols) - 1) * var(--aule-gallery-colgap)) /
      var(--aule-gallery-cols)
  );
  aspect-ratio: var(--aule-gallery-ratio, 4 / 3);
}

.aule-gallery-lastrow-left .aule-gallery-grid {
  justify-content: flex-start;
}
.aule-gallery-lastrow-center .aule-gallery-grid {
  justify-content: center;
}
/* "Gestreckt": nur die unvollständige letzte Zeile hat Freiraum zum Wachsen. */
.aule-gallery-lastrow-stretch .aule-gallery-item {
  flex-grow: 1;
  max-width: none;
}

/* --- Masonry (Spalten werden von oben nach unten gefüllt) --- */
.aule-gallery-layout-masonry .aule-gallery-grid {
  display: block;
  columns: var(--aule-gallery-cols);
  column-gap: var(--aule-gallery-colgap);
}

.aule-gallery-layout-masonry .aule-gallery-item {
  display: block;
  width: 100%;
  margin: 0 0 var(--aule-gallery-rowgap);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* --- Kacheln --- */
.aule-gallery-item {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--aule-gallery-tile-bg);
  border-radius: var(--aule-gallery-tile-radius);
  border: var(--aule-gallery-tile-frame-width) solid
    var(--aule-gallery-tile-frame-color);
}

/* Klickbare Kacheln sind <button> — Browser-Standardstile zurücksetzen. */
button.aule-gallery-item {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

.aule-gallery-image {
  display: block;
  width: 100%;
  transition: transform var(--aule-gallery-hover-speed)
    var(--aule-gallery-hover-timing);
}

.aule-gallery-layout-grid .aule-gallery-image {
  height: 100%;
  object-fit: var(--aule-gallery-fit, cover);
  object-position: var(--aule-gallery-pos, center center);
}

.aule-gallery-layout-masonry .aule-gallery-image {
  height: auto;
}

/* Ausgeblendete Bilder hinter der "Mehr anzeigen"-Grenze. Die höhere
   Spezifität ist nötig, weil die Layout-Regeln oben display setzen. */
.aule-gallery-grid .aule-gallery-item[hidden] {
  display: none;
}

/* --- Hover-Effekte --- */
.aule-gallery-hover-zoom .aule-gallery-item:hover .aule-gallery-image,
.aule-gallery-hover-zoom .aule-gallery-item:focus-visible .aule-gallery-image,
.aule-gallery-hover-zoom-overlay .aule-gallery-item:hover .aule-gallery-image,
.aule-gallery-hover-zoom-overlay
  .aule-gallery-item:focus-visible
  .aule-gallery-image {
  transform: scale(var(--aule-gallery-hover-zoom));
}

.aule-gallery-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--aule-gallery-overlay-bg);
  opacity: 0;
  transition: opacity var(--aule-gallery-hover-speed)
    var(--aule-gallery-hover-timing);
  pointer-events: none;
}

.aule-gallery-item:hover .aule-gallery-overlay,
.aule-gallery-item:focus-visible .aule-gallery-overlay {
  opacity: 1;
}

.aule-gallery-overlay-icon {
  font-size: var(--aule-gallery-overlay-icon-size);
  line-height: 1;
  color: var(--aule-gallery-overlay-icon-color);
}

.aule-gallery-item:focus-visible {
  outline: 2px solid var(--aule-gallery-overlay-icon-color);
  outline-offset: 2px;
}

/* --- "Mehr anzeigen" --- */
.aule-gallery-more {
  display: flex;
  justify-content: center;
  margin-top: var(--aule-gallery-more-gap);
}

.aule-gallery-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--aule-gallery-more-padding);
  border: none;
  border-radius: var(--aule-gallery-more-radius);
  background: var(--aule-gallery-more-bg);
  color: var(--aule-gallery-more-color);
  font: inherit;
  cursor: pointer;
}

.aule-gallery-more[hidden] {
  display: none;
}

/* =====================================================================
 *  Modal (Vollbild)
 * ===================================================================== */

.aule-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: var(--aule-gallery-modal-z);
  display: flex;
  align-items: center;
  justify-content: center;
}

.aule-gallery-modal[hidden] {
  display: none;
}

.aule-gallery-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--aule-gallery-backdrop);
}

/* Modus "Weichzeichnen": die Seite wird nur leicht eingefärbt, dafür unscharf
   gezeichnet. Die Stärke kommt als Inline-Variable vom Block. */
.aule-gallery-modal-blur .aule-gallery-modal-backdrop {
  background: var(--aule-gallery-backdrop-soft);
  -webkit-backdrop-filter: blur(var(--aule-gallery-backdrop-blur));
  backdrop-filter: blur(var(--aule-gallery-backdrop-blur));
}

.aule-gallery-modal-inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(var(--aule-gallery-modal-width), var(--aule-gallery-modal-max-width));
  display: flex;
  flex-direction: column;
  gap: var(--aule-gallery-modal-meta-gap);
}

.aule-gallery-modal-close {
  position: absolute;
  top: var(--aule-gallery-close-offset);
  right: var(--aule-gallery-close-offset);
  z-index: 2;
  width: var(--aule-gallery-close-size);
  height: var(--aule-gallery-close-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--aule-gallery-close-bg);
  color: var(--aule-gallery-close-color);
  font-size: 22px;
  cursor: pointer;
}

/* Im Modal ist mehr Platz als in einem Slider im Textfluss — Pfeile,
   Play/Pause und Punkte rücken deshalb weiter vom Bild ab. Gilt für beide
   Platzierungen (außerhalb wie innerhalb). */
.aule-gallery-modal .aule-image-slider-container {
  --aule-slider-outside-gap: var(--aule-gallery-modal-control-gap);
  --aule-slider-inside-inset: var(--aule-gallery-modal-control-gap);
}

/* Eckenradius der Bilder im Modal. Gewinnt gegen --aule-slider-border-radius
   aus der Image-Slider-CSS (0,2,0 gegen 0,1,0), damit ein global abgerundeter
   Slider das Modal nicht zwangsweise mit abrundet. */
.aule-gallery-modal .aule-slider-wrapper {
  border-radius: var(--aule-gallery-modal-radius);
}

/* Der Slider im Modal: die Bühne bekommt eine feste Höhe, damit jedes Bild
   vollständig hineinpasst und das Layout beim Durchklicken nicht springt. */
.aule-gallery-modal-fit .aule-slider-wrapper {
  aspect-ratio: auto;
  height: var(--aule-gallery-modal-stage-height);
}

.aule-gallery-modal-fit .aule-slider-image {
  object-fit: contain;
}

/* Feste Slide-Höhe: das gewählte Seitenverhältnis gewinnt, Bilder füllen es
   formatfüllend aus (--aule-slider-aspect-ratio kommt vom Block). */
.aule-gallery-modal-ratio .aule-slider-image {
  object-fit: cover;
}

.aule-gallery-modal-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--aule-gallery-modal-fg);
  text-align: center;
}

.aule-gallery-counter {
  font-size: 14px;
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}

.aule-gallery-caption {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

.aule-gallery-caption:empty {
  display: none;
}

/* Scroll-Sperre, während ein Modal offen ist. Der Ausgleich für die
   verschwindende Scrollleiste wird per JS als Inline-Padding gesetzt. */
body.aule-gallery-modal-open {
  overflow: hidden;
}

/* =====================================================================
 *  Editor-Vorschau
 * ===================================================================== */

.aule-image-gallery-editor .aule-gallery-item--placeholder {
  background: #f0f0f0;
  border: 1px dashed #c3c4c7;
}

.aule-image-gallery-editor .aule-gallery-placeholder-box {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 80px;
}

.aule-image-gallery-editor .aule-gallery-editor-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: #757575;
}

.aule-image-gallery-editor .aule-gallery-editor-toolbar {
  margin-top: 12px;
}