/* line 6, ../sass/lightbox.sass */
#lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
  opacity: 0.85;
  display: none;
}

/* line 15, ../sass/lightbox.sass */
#lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
  font-weight: normal;
}
/* line 24, ../sass/lightbox.sass */
#lightbox img {
  width: auto;
  height: auto;
}
/* line 27, ../sass/lightbox.sass */
#lightbox a img {
  border: none;
}

/* line 30, ../sass/lightbox.sass */
.lb-outerContainer {
  position: relative;
  background-color: white;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

/* line 39, ../sass/lightbox.sass */
.lb-container {
  padding: 10px;
}

/* line 42, ../sass/lightbox.sass */
.lb-loader {
  position: absolute;
  top: 40%;
  left: 0%;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

/* line 51, ../sass/lightbox.sass */
.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

/* line 59, ../sass/lightbox.sass */
.lb-container > .nav {
  left: 0;
}

/* line 62, ../sass/lightbox.sass */
.lb-nav a {
  outline: none;
}

/* line 65, ../sass/lightbox.sass */
.lb-prev, .lb-next {
  width: 49%;
  height: 100%;
  background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
  /* Trick IE into showing hover */
  display: block;
}

/* line 72, ../sass/lightbox.sass */
.lb-prev {
  left: 0;
  float: left;
}

/* line 76, ../sass/lightbox.sass */
.lb-next {
  right: 0;
  float: right;
}

/* line 81, ../sass/lightbox.sass */
.lb-prev:hover {
  background: url(../images/prev.png) left 48% no-repeat;
}

/* line 85, ../sass/lightbox.sass */
.lb-next:hover {
  background: url(../images/next.png) right 48% no-repeat;
}

/* line 88, ../sass/lightbox.sass */
.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -ms-border-bottom-left-radius: 4px;
  -o-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -ms-border-bottom-right-radius: 4px;
  -o-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

/* line 95, ../sass/lightbox.sass */
.lb-data {
  padding: 0 10px;
  color: #bbbbbb;
}
/* line 98, ../sass/lightbox.sass */
.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}
/* line 103, ../sass/lightbox.sass */
.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}
/* line 107, ../sass/lightbox.sass */
.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 11px;
}
/* line 112, ../sass/lightbox.sass */
.lb-data .lb-close {
  width: 35px;
  float: right;
  padding-bottom: 0.7em;
  outline: none;
}
/* line 117, ../sass/lightbox.sass */
.lb-data .lb-close:hover {
  cursor: pointer;
}


/* --- Media Queries für mobile Optimierung --- */
@media (max-width: 1350px) {
  /*
   * Lightbox Hauptcontainer
   * Stellt sicher, dass die Lightbox selbst auf mobilen Geräten den Großteil des Viewports einnimmt
   */
/* Basis-CSS für die Lightbox (Gültig für alle Bildschirmgrößen, wenn nicht überschrieben) */
#lightbox {
  position: fixed !important; /* Absolut entscheidend: Fixiert im Viewport */
  top: 50% !important;        /* Startet bei 50% des Viewports von oben */
  left: 50% !important;       /* Startet bei 50% des Viewports von links */
  transform: translate(-50%, -50%) !important; /* Zentriert das Element exakt */
  width: 100% !important;     /* Kann auch eine max-width haben, aber für die Zentrierung wichtig */
  height: 100% !important;    /* Kann auch eine max-height haben */
  z-index: 10000 !important;  /* Stellt sicher, dass es ganz oben liegt */
  text-align: center !important;
  line-height: 0 !important;
  font-family: "lucida grande", tahoma, verdana, arial, sans-serif !important;
  font-weight: normal !important;
  /* Und hier weitere globale Styles wie background, padding etc. */
}
/* Wenn .lb-outerContainer das eigentliche Fenster ist, muss es in #lightbox zentriert sein */
.lb-outerContainer {
  margin: 0 auto !important; 
 
}

  /*
   * Outer Container der Lightbox
   * Passt die Größe des Rahmens an das Bild an und zentriert ihn.
   */
  .lb-outerContainer {
    width: 90% !important;
    max-width: 100% !important;
    height: auto !important;
    text-align: center !important;
    margin: 0 auto !important;
	   margin-top:60px!important;
  }

  /*
   * Close Container (falls dieser ein eigener Wrapper für den Close-Button ist)
   * Stellt sicher, dass der Schließen-Bereich richtig skaliert und zentriert ist.
   * Wenn er nicht unbedingt gebraucht wird, kann dieser Block eventuell auch weg.
   */
  .lb-closeContainer {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    text-align: center !important;
    margin: 0 auto !important;
    padding: 10px 0 !important;
  }

  /*
   * Bild innerhalb der Lightbox
   * Passt das Bild an die verfügbare Fläche an, ohne es zu verzerren.
   */
  #lightbox img {
    max-width: 100% !important;
    max-height: 70vh !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    object-fit: contain !important;
  }

  /*
   * Datencontainer (für Bildbeschreibung und Steuerelemente)
   * Sorgt dafür, dass der Datenbereich mobil korrekt angezeigt wird.
   */
  .lb-dataContainer {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    position: relative !important; /* WICHTIG: Referenz für absolute Positionierung des Close-Buttons (falls er hierher gehört) */
  }

  /*
   * Bilddetails (Bildunterschrift, Nummerierung)
   * Passt die Anzeige von Texten an mobile Gegebenheiten an.
   */
  .lb-data .lb-details {
    width: 100% !important;
    float: none !important;
    text-align: left !important;
    padding: 0 10px 0.5em 10px !important;
    box-sizing: border-box !important;
  }

  .lb-data .lb-caption {
    font-size: 16px !important;
    line-height: 1.3em !important;
  }

  .lb-data .lb-number {
    font-size: 12px !important;
    padding-bottom: 0.8em !important;
  }

  /*
   * Close-Button der Lightbox
   * Positioniert den Schließen-Button unten rechts innerhalb des Daten-Containers.
   */
  .lb-data .lb-close {
    width: 30px !important;
    height: 30px !important;
    position: absolute !important; /* Absolut positioniert */
    bottom: 20px !important; /* 10px vom unteren Rand des .lb-dataContainer */
    right: 20px !important; /* 10px vom rechten Rand des .lb-dataContainer */
    float: none !important;
    margin: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    color: white !important;
    font-size: 24px !important;
    text-decoration: none !important;
    z-index: 11000 !important; /* Sicherstellen, dass er über allem liegt */
  }

  /*
   * Navigationspfeile (Vorheriges/Nächstes Bild)
   * Optimiert für Touch-Bedienung mit größeren, runden Buttons, seitlich mittig.
   */
  .lb-nav {
    position: absolute !important; /* Muss absolute sein, um top: 50% zu nutzen */
    top: 50% !important;
    left: 0 !important; /* Stelle sicher, dass es die volle Breite einnimmt */
    width: 100% !important;
    height: 100% !important; /* Muss volle Höhe einnehmen, damit prev/next buttons darauf reagieren können */
    transform: translateY(-50%) !important; /* Exakte vertikale Zentrierung */
    z-index: 10005 !important; /* Über dem Bild, aber unter dem Close-Button */
    pointer-events: none !important; /* Erlaubt Klicks auf das Bild, wenn man nicht die Pfeile trifft */
  }

  .lb-nav a { /* Die eigentlichen Klickbereiche für die Pfeile */
    pointer-events: auto !important; /* Klicks auf den Pfeilen wieder aktivieren */
  }

  .lb-prev, .lb-next {
    background-image: none !important;
    width: 55px !important;
    height: 55px !important;
    top: 50% !important; /* Positionierung relativ zum .lb-nav Container */
    transform: translateY(-50%) !important; /* Vertikale Zentrierung innerhalb von .lb-nav */
    opacity: 0.8 !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-decoration: none !important;
    margin: 0 !important;
    position: absolute !important; /* Absolute Positionierung innerhalb von .lb-nav */
  }

  .lb-prev {
    left: 10px !important; /* Links mittig */
    float: none !important;
  }

  .lb-next {
    right: 10px !important; /* Rechts mittig */
    float: none !important;
  }

  /* Icons für die Pfeile (Unicode Zeichen oder Font Awesome/Bootstrap Icons) */
  .lb-prev::before {
    content: '❮';
    color: white !important;
    font-size: 28px !important;
  }

  .lb-next::before {
    content: '❯';
    color: white !important;
    font-size: 28px !important;
  }
}